html {
  scroll-behavior: smooth;
}


.f10{font-size: 10px}
.f11{font-size: 11px}
.f12{font-size: 12px}
.f13{font-size: 13px}
.f14{font-size: 14px}
.f15{font-size: 15px}
.f16{font-size: 16px}
.f17{font-size: 17px}
.f18{font-size: 18px}
.f19{font-size: 19px}
.f20{font-size: 20px}
.f21{font-size: 21px}
.f22{font-size: 22px}
.f23{font-size: 23px}
.f24{font-size: 24px}
.f25{font-size: 25px}
.f26{font-size: 26px}
.f27{font-size: 27px}
.f28{font-size: 28px}
.f29{font-size: 29px}
.f30{font-size: 30px}
.f35{font-size: 35px}
.f40{font-size: 40px}
.f45{font-size: 45px}

.emt10{height: 10px}
.emt20{height: 20px}
.emt30{height: 30px}
.emt40{height: 40px}
.emt50{height: 50px}
.emt60{height: 60px}
.emt70{height: 70px}
.emt80{height: 80px}
.emt90{height: 90px}
.emt100{height: 100px}
.emt110{height: 110px}
.emt120{height: 120px}
.emt130{height: 130px}
.emt140{height: 140px}
.emt150{height: 150px}


.inner{max-width: 1580px; margin: 0 auto; padding: 0 20px;}


#fullpage {
  width:100%;
  height:100%;
}

/* header */


/* CUSTOM NAVIGATION */





.fp-viewing-foot > #my-nav{display: none}
.fp-watermark{display: none}

.foot_info{margin-top: 30px; padding-bottom: 60px}
.foot_info p{display: flex; gap:18px; font-size: 16px; color: #fff; align-items: center}
.foot_info p + p{margin-top: 10px}
.foot_info p b{color: #646464}
.foot_info p b.point{line-height: 30px; height: 30px; background: #292929; border: 1px solid #383838; border-radius: 30px; padding: 0 10px; color: #fff}
.foot_info p span{color: #fff}

.foot_copy{text-align: center; padding: 15px 20px; border-top: 1px solid #292929}
.foot_copy p{font-size: 14px; color: #383838}





/* main_banner */

#my-nav{position: fixed; right: 70px; top: 50%; transform: translateY(-50%);}
#my-nav li{width: 36px; border-radius: 36px; border: 1px solid rgba(255,255,255,0); height: 36px; position: relative}
#my-nav li.active{border: 1px solid rgba(255,255,255,1); }
#my-nav li span{position: absolute; width: 10px; height: 10px; left: 50%; top: 50%; border-radius: 10px; background: #fff; opacity: .4;
transform: translate(-50%, -50%);}
#my-nav li i{display: none}

#my-nav li.active span{opacity: 1}

.main{position: relative; height: 100vh}



.main .video_are{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1}
.main .video_are video{width: 100%; height: 100%; object-fit: cover;}

.viusal_txt{position: relative; z-index: 2}
.viusal_txt *{color: #fff}
.viusal_txt h2{font-size: 70px; font-weight: 800; line-height: 1.3}
.viusal_txt p{font-size: 20px; font-weight: 600; margin-top: 15px}








/* main_company */

.main_company{display: flex; height: 100vh; background: #FBFBFB}
.main_company .left{flex:1; display: flex;
    align-items: center;
    justify-content: center;}
.main_company .right{width: 50%; background: url(../img/main/main_company.png); background-position: center; background-size: cover}



.main_title{position: relative; z-index: 2}
.main_title h3{font-size: 16px; color: #182E88; font-weight: 800; margin-bottom: 15px;}
.main_title h2{color: #231815; font-size: 40px; font-weight: 800}
.main_title p{font-size: 18px; color: #222; margin-top: 25px; line-height: 1.4}

.main_btn{display: inline-flex; position: relative; gap:15px;justify-content: flex-start;
    align-items: center; margin-top: 50px}
.main_btn i{width: 55px; height: 55px; background: url(../img/main_btn.png); background-position: center; background-repeat: no-repeat; background-size: 12px auto}

.main_btn:after{content: ''; position: absolute; 
right: 0; top: 0; width: 55px; height: 55px; background: #182E88; z-index: -1; border-radius: 55px; transition-duration: .5s}

.main_title .main_btn p{color: #182E88; font-size: 16px; margin: 0; transition-duration: .5s}


.main_btn:hover:after{width: 100%}
.main_btn:hover p{color: #fff; margin-left: 15px}








.fp-viewing-business{height: 400vh}

.swiper-container{ width: 100%;
  height: 100%; overflow: hidden}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
}



.swiper-backface-hidden .swiper-slide .slide_bg{transform: scale(.7);}
.swiper-backface-hidden .swiper-slide.swiper-slide-active .slide_bg{transform: scale(1);}




.slide_bg{height: 100%; background-position: center !important; background-size: cover !important; overflow: hidden; width: 100%; position: relative; transition-duration: 1s}
.slide_bg.slide_bg01{background: url(../img/main/slide01.png)}
.slide_bg.slide_bg02{background: url(../img/main/slide02.png)}


.business .swiper-wrapper{}

.swip_txt{height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 1580px;  margin: 0 auto; padding-top: 110px; width: 100%}


.swip_txt .main_title h3{ color: #fff; }
.swip_txt .main_title h2{color: #fff;}
.swip_txt .main_title .main_btn p{color: #fff}


.swiper-pagination {
	position: absolute;
	top: 50% !important;
	left: 50% !important;
	right: auto;
	width: auto !important;
	margin: 0;
	width: 100% !important;
	display: flex; gap:11px;
	max-width: 1580px;
	transform: translate(-50%, calc(-50% - 180px)) !important;

}
.swiper-pagination-bullet {
	padding: 0px 30px;
	border-radius: 0;
	width: auto;
	height: 46px;
	text-align: center;
	line-height: 46px;
	font-size: 16px;
	color:#fff;
	opacity: 1;
	background: rgba(255,255,255,0.1);
	border-radius: 46px
}
.swiper-pagination-bullet-active {
	color:#fff;
	background: #182E88;
}




.main_business{background: url(../img/main/main_business.png); background-position: center; background-size: cover}


.main_business .main_title h3{ color: #fff; }
.main_business .main_title h2{color: #fff;}

.main_business_flex{display: flex; margin-top: 70px; z-index: 2; position: relative;
justify-content: flex-start;
    align-items: stretch;}
.main_business_flex a{flex:1; text-align: center;  transition-duration: .5s; padding: 10px 0}
.main_business_flex a .box{
	padding: 40px 5px; 
border-bottom: 1px solid #BDBDBD; border-top: 1px solid #BDBDBD; position: relative;
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%
}    
    
.main_business_flex a h3{color: #fff; font-size: 18px; font-weight: 600; word-break: keep-all}
.main_business_flex a p{color: #fff; font-size: 18px; margin-top: 10px; word-break: keep-all}

.main_business_flex a img{display: block; margin: 0 auto 50px}

.main_business_flex a:hover{ background:rgba(25,46,136,.8) ; z-index: 2; }
.main_business_flex a:hover .box{border: 1px solid rgba(255,255,255,.0)}


.main_board{background: url(../img/main/main_board.png); background-position: 90% 90%; background-repeat: no-repeat}

.main_board_top{position: relative}
.main_board_top .slide_btn{display: flex; position: absolute; right: 0; bottom: 0; gap:15px;z-index: 3}
.main_board_top .slide_btn span{border-radius: 55px; height: 55px; width: 55px;background: #182E88;
display: flex;
    justify-content: center;
    align-items: center; cursor: pointer}

.main_board_top .slide_btn span img{max-width: 100%; display: block}

.main_board_top .slide_btn span:first-child img{transform: rotate(180deg);}

.main_board_slide{margin: 70px -20px 0}
.main_board_slide .slick-slide{padding: 0 20px}
.main_board_slide .slick-slide img{width: 100%; aspect-ratio: 1;}


.fp-viewing-board #my-nav li.active{border: 1px solid #182E88; }
.fp-viewing-board #my-nav li span{position: absolute; width: 10px; height: 10px; left: 50%; top: 50%; border-radius: 10px; background: #182E88; opacity: .4;
transform: translate(-50%, -50%);}

.fp-viewing-board #my-nav li.active span{opacity: 1}


.foot_are{background: #fff; border-top: 1px solid #E1E1E1; padding: 50px 0}
.foot_are p{font-size: 16px; word-break: keep-all; line-height: 1.4}
.foot_are img{margin-bottom: 40px;}
.foot_copy{text-align: center; padding: 30px 0; border-top: 1px solid #E1E1E1;}
.foot_copy p{font-size: 16px; color: #ccc; word-break: keep-all}

.foot_top{position: fixed; right: 50px; bottom: 50px; width: 55px; height: 55px; background: #182E88; border-radius: 55px;display: flex;
    justify-content: center;
    align-items: center; cursor: pointer;z-index: 9994 }

.main .fp-overflow,
.main_business .fp-overflow{overflow: hidden}

.header{position: fixed; left: 0; top: 0; width: 100%; 
height: 100px; z-index: 9999; border-bottom: 1px solid rgba(255,255,255,.2); transition-duration: .5s}
.header .inner{position: relative}
.header .logo{position: absolute; left: 0; top: 35px; width: 190px; height: 24px; background: url(../img/logow.png); background-size: 100% auto; background-repeat: no-repeat}
.header .nav_btn{position: absolute; right: 0; top: 40px; width: 28px; height: 18px; }
.header .nav_btn span{width: 100%; height: 2px; background: #fff; position: absolute; left: 0; top: 0; transition-duration: .5s}
.header .nav_btn span:nth-child(2){top: 50%; margin-top: -1px}
.header .nav_btn span:nth-child(3){top: auto; bottom: 0}



.top_nav{display: flex; align-items: flex-start;
    justify-content: center; gap:0px;}
    
.top_nav li{height: 100px; display: flex; text-align: center; justify-content: center;
    align-items: center; position: relative; min-width: 180px}    
.top_nav li a{color: #fff; font-size: 18px;}    

.top_nav li .deps_nav{position: absolute; top: 100%; background: #fff; padding:0 20px; width: max-content;
    min-width: 180px; height: 0; max-height: 0; visibility: hidden; overflow: hidden; transition-duration: .5s}
.top_nav li .deps_nav a{font-size: 16px; color: #231815; transition-duration: .5s; display: block; }
.top_nav li .deps_nav a:hover{color: #182E88; font-weight: bold}
.top_nav li .deps_nav a + a{margin-top: 20px}

.top_nav li:hover .deps_nav{height: auto; max-height: 500px; visibility: visible; padding: 20px; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.10)}







.header.drop{background: #fff; border-bottom: 1px solid rgba(0,0,0,.05)}
.header.drop .logo{background-image: url(../img/logob.png);}
.header.drop .top_nav li a{color: #222}
.header.drop .nav_btn span{background-color: #222}



.fp-viewing-company .header{background: #fff;}
.fp-viewing-company .header .logo{background-image: url(../img/logob.png);}
.fp-viewing-company .header .top_nav li a{color: #222}
.fp-viewing-company .header .nav_btn span{background-color: #222}


.fp-viewing-board .header{background: #fff; border-bottom: 1px solid rgba(0,0,0,.05)}
.fp-viewing-board .header .logo{background-image: url(../img/logob.png);}
.fp-viewing-board .header .top_nav li a{color: #222}
.fp-viewing-board .header .nav_btn span{background-color: #222}

.fp-viewing-foot .header{display: none}


.all_nav{position: fixed; left: 0; top:-100%; width: 100%; height: 100%; z-index: 9998; background: #fff; display: flex; align-items: center; transition-duration: .5s; opacity: 0}

.all_nav .left_tab{width: 40%; background-size: cover; background-position: center; height: 100%; display: flex
;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center; gap:60px; transition-duration: .5s; padding: 12rem 0}
.all_nav .left_tab.all01{background-image: url(../img/all01.png)}
.all_nav .left_tab.all02{background-image: url(../img/all02.png)}
.all_nav .left_tab.all03{background-image: url(../img/all03.png)}
.all_nav .left_tab.all04{background-image: url(../img/all04.png)}
.all_nav .left_tab.all05{background-image: url(../img/all05.png)}

.all_nav .left_tab a{color: #fff; font-size: 40px; font-weight: bold; opacity: .6; transition-duration: .5s}
.all_nav .left_tab a.atvall,
.all_nav .left_tab a:hover{opacity: 1}

.all_nav .right_tab{padding: 12rem 8rem; background: url(../img/allnav.png); background-position: bottom right; background-repeat: no-repeat; height: 100%; flex:1}
.all_nav .right_tab .deps_nav{display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;}
.all_nav .right_tab .deps_nav.atvall{display: flex; gap:40px}

.all_nav .right_tab .deps_nav a{font-size: 24px; color: #222; font-weight: 500; transition-duration: .5s}
.all_nav .right_tab .deps_nav a:hover{color: #182E88; }

.mo_open{display: none}
.mo_nav_are{display: none}




.open_all .all_nav{top: 0; opacity: 1}
.open_all .top_nav{visibility: hidden}
.open_all .header .nav_btn span{background-color: #222}
.open_all .header .nav_btn span:nth-child(1){top: 50%;
        transform: translateY(-50%) rotate(45deg);}
.open_all .header .nav_btn span:nth-child(2){opacity: 0}
.open_all .header .nav_btn span:nth-child(3){bottom: 50%;
        transform: translateY(50%) rotate(-45deg);}

.open_all .header{background: transparent; border-bottom: 0}
.open_all .header .logo{background-image: url(../img/logow.png);}




@media (max-width: 1660px) {



}


@media (max-width: 1580px) {


   #my-nav{right: 20px}
   .header .logo{left: 20px}
   .header .nav_btn{right: 20px}
	.all_nav .right_tab{background-size: 100%}
	
	.swiper-pagination,
	.swip_txt{padding: 0 20px}
  .inner{padding: 0 20px}	
  
  
  .foot_top{right: 20px; bottom: 20px}
	.main_board_slide{margin: 70px -10px 0}
	.main_board_slide .slick-slide{padding: 0 10px}

}


@media (max-width: 1280px) {

   .top_nav li{min-width: 120px}
   .all_nav .left_tab{gap:40px}
   .all_nav .left_tab a{font-size: 30px}
   
   .all_nav .right_tab .deps_nav.atvall{gap:20px}
   .all_nav .right_tab .deps_nav a{font-size: 18px}
   
   
   .main_business_flex a h3,
   .main_business_flex a p{font-size: 16px}

}




@media (max-width: 1024px) {


.top_nav{display: none}

.all_nav {
    align-items: center;
    transition-duration: .5s;
    opacity: 0;
    flex-direction: column;
    justify-content: flex-start;
}

    .all_nav .left_tab {
        width: 100%;
        height: 30vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 120px 20px 0;
    }
    .all_nav .right_tab {
        background-size: 100%;
        width: 100%;
        height: 70vh;
        padding: 100px 20px;
        text-align: center;
    }
    
   .all_nav .right_tab .deps_nav.atvall {
        gap: 20px;
        justify-content: flex-start;
        align-items: center;
    }
    
    .open_all .header .nav_btn span{background-color: #fff}


.main_company {
    display: flex;
    height: 100vh;
    background: #FBFBFB;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;}

.main_company .left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 20px 50px
}
.main_company .right {
    width: 100%;
    height: 50vh;
}


.swiper-pagination, .swip_txt{height: 100vh}




   .swiper-backface-hidden .swiper-slide .slide_bg{transform: scale(1);}
.swiper-backface-hidden .swiper-slide.swiper-slide-active .slide_bg{transform: scale(1);}

   .swiper-pagination {
    transform: translate(-50%, calc(-35% - 0px)) !important;
}


.main_business_flex{flex-wrap: wrap;}
.main_business_flex a{width: 33.33%; flex:none}
.main_business_flex a .box{border: 0}
.main_business_flex a:nth-child(1),
.main_business_flex a:nth-child(2),
.main_business_flex a:nth-child(3){border-bottom: 1px solid rgba(255,255,255,.5)}


.main_business_flex a:nth-child(2),
.main_business_flex a:nth-child(5){border-left: 1px solid rgba(255,255,255,.5);
border-right: 1px solid rgba(255,255,255,.5)}


}




@media (max-width: 768px) {

 
    body{overflow-x: hidden}
	#my-nav{display: none}

	.all_nav .left_tab a{font-size: 24px}
   	




}




@media (max-width: 600px) {

   .all_nav .left_tab{gap:0; overflow-x: auto; display: flex;
        align-items: center;
        justify-content: flex-start;}
   .all_nav .left_tab a{font-size: 16px; padding: 0 10px; flex:0 0 auto}
	.all_nav .right_tab{padding: 50px 20px}
	
	
	.viusal_txt h2{font-size: 30px;}
	.viusal_txt p{font-size: 18px; word-break: keep-all; line-height: 1.5}
	
	.main_title{text-align: center; width: 100%}
	.main_title h3{font-size: 14px}
	.main_title h2{font-size: 24px; word-break: keep-all}
	.main_title p{font-size: 16px; word-break: keep-all}
	.main_title p br{display: none}
	
	.main_business{padding: 100px 0}
	.main_business_flex a{width: 50%}
	.main_business_flex a .box{padding:20px 0}
	
    .fp-overflow{max-height: max-content; }
    
    .main_business_flex a:nth-child(1), .main_business_flex a:nth-child(2), .main_business_flex a:nth-child(3){border-bottom: 0}
    .main_business_flex a:nth-child(2), .main_business_flex a:nth-child(5){border: 0}
	.main_business_flex a h3, .main_business_flex a p{font-size: 14px; word-break: keep-all}

   
    .swiper-pagination{top: 20% !important;     height: max-content;
    flex-wrap: wrap;}

    .swiper-pagination {
    transform: translate(-50%, calc(-0px)) !important;}


    .swip_txt {
    padding: 50% 20px 0;}
    
    
    .main_board_top .slide_btn {
    display: flex;
    position: relative;
    right: 0;
    bottom: 0;
    gap: 15px;
    z-index: 3;
    margin-top: 50px;
    justify-content: center;
    align-items: center;
}

       .main_board_slide {
        margin: 50px -10px 0;
    }


.foot_are p, .foot_copy p{font-size: 14px}

.header .logo{width: 140px; top: 40px} 

}



@media (max-width: 410px) {

   .swiper-pagination-bullet{font-size: 14px}
   
   .all_nav .left_tab{flex-wrap: wrap; padding: 120px 20px 40px; gap:10px}

.all_nav .left_tab a{flex:none; padding: 0}

}