/*pop*/

.agree_pop{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.5)}
.agree_pop.atv_pop{display: block}

.agree_pop_content{position: absolute; left: 50%;
  top: 50%; background: #fff; padding: 40px; border-radius: 10px;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}



.agree_pop_content .agree_title{position: relative; }

.agree_pop_content .agree_title h2{font-size: 25px;}
.agree_pop_content .agree_title .close_pop{position: absolute; right: 0; top: 0; cursor: pointer}

.agree_pop_info{max-height: 400px; overflow-y: auto; margin-top: 15px; padding: 15px 0; border-top: 1px solid #ddd}
.agree_pop_info h3{font-size: 18px; font-weight: bold; word-break: keep-all; margin-bottom: 10px}
.agree_pop_info p{font-size: 16px; font-weight: 400; word-break: keep-all}
.agree_pop_info p + h3{margin-top: 30px}


.top_head{position: absolute; left: 0; top: 0; width: 100%; transition-duration: .5s; z-index: 9999}
.top_head:hover{background: rgba(34, 34, 34, 0.60);}
.top_head:hover:after{content: ''; position: absolute; left: 0; 
top: 80px; height: 1px; width: 100%; background: #fff; opacity: .5}

.all_open .top_head:hover:after{display: none}


.top_head .logo{position: absolute; left: 8rem; top: 25px;
width: 150px; height: 42px; background: url(../img/common/logow.png);
background-position: center; background-repeat: no-repeat;
background-size: 150px auto}

.top_head .top_nav{display: flex; justify-content: center;
    align-items: flex-start; transition-duration: .5s}
    
.all_open .top_head .top_nav{display: none}    
    
    
.top_head .top_nav .main_deps{height: 80px; color: #fff; font-size: 18px; text-align: center; 
padding: 0 35px; display: flex; justify-content: center;
    align-items: center; position: relative}

.top_head .top_nav .main_deps:after{content: ''; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px;
background:#DBB400; transition-duration: .5s}

.top_head .top_nav li:hover .main_deps:after{width: 100%}

.top_head .top_nav li{position: relative}
.top_head .top_nav li .sub_deps{height: 0; overflow: hidden; max-height: 0px; transition-duration: .5s; visibility: hidden;
transition-duration: .5s}




.top_head:hover .top_nav li .sub_deps{height: auto; text-align: center; visibility: visible; max-height: 300px;
padding: 15px 0}

.top_head .top_nav li .sub_deps a{color: #fff; padding: 15px 5px; transition-duration: .5s; display: block;
font-size: 16px;}
.top_head .top_nav li .sub_deps a:hover{color: #DBB400}

.top_head .right_top{position: absolute; right: 8rem; top: 30px; display: flex; gap:1.2rem}
.top_head .right_top .lang{position: relative}
.top_head .right_top .lang img{cursor: pointer}
.top_head .right_top .lang .lang_list{position: absolute; text-align: center; 
background: #fff; border-radius: 5px;
padding: 0 15px; max-height: 0; height: 0; transition-duration: .5s; visibility: hidden; overflow: hidden ;
left: 50%;
    transform: translateX(-50%);
    top: 30px;}

.top_head .right_top .lang .lang_list a{display: block; font-size: 16px; color: #222; opacity: .6;
transition-duration: .5s; font-weight: 500}
.top_head .right_top .lang .lang_list a:hover,
.top_head .right_top .lang .lang_list a.on{opacity: 1}

.top_head .right_top .lang.open_lang .lang_list{height: auto; max-height: 300px;
opacity: 1; visibility: visible; padding: 15px}

.top_head .all_btn{height: 18px; width: 28px; position: relative}
.top_head .all_btn span{background: #fff; height: 2px; border-radius: 2px; width: 90%; position: absolute; transition-duration: .5s}
.top_head .all_btn span:nth-child(1){left: 0; top: 0}
.top_head .all_btn span:nth-child(2){right: 0; top: 8px}
.top_head .all_btn span:nth-child(3){left: 0; top: 16px}


.all_open .top_head .all_btn span:nth-child(1) {
    left: 0;
    top: 50%;
    width: 100%;
    transform: rotate(45deg) translateY(calc(-50% + 1px))
}
.all_open .top_head .all_btn span:nth-child(2){opacity: 0}
.all_open .top_head .all_btn span:nth-child(3) {
    left: 0;
    top: 50%;
    width: 100%;
    transform: rotate(-45deg) translateY(calc(-50% + 1px))
}


.all_nav_are{position: fixed; left: 0; top: 0; z-index: 9998; width: 100%; height: 100%;
background: rgba(34, 34, 34, 0.35);
backdrop-filter: blur(12.5px); display: flex; justify-content: center;
    align-items: center; opacity: 0; visibility: hidden; transition-duration: .5s}

.all_open .all_nav_are{opacity: 1; visibility: visible}

.all_nav_are .nav_are{display: flex; justify-content: center;
    align-items: flex-start; gap:10rem}

.all_nav_are .nav_are li{text-align: center;}
.all_nav_are .nav_are .main_deps{font-size: 50px; color: #fff; font-weight: 600}
.all_nav_are .nav_are .sub_deps{margin-top: 20px;}
.all_nav_are .nav_are .sub_deps a{display: block; color: #fff; font-size: 20px;}
.all_nav_are .nav_are .sub_deps a + a{margin-top: 20px;}

.inner{padding: 0 8rem}

.floating{position: fixed; z-index: 9997; right: 3rem; bottom: calc(3rem + 70px);
background: #DBB400; width: 60px; height: 60px; display: flex; justify-content: center;
    align-items: center; border-radius: 60px}

.floating_up{position: fixed; z-index: 9997; right: 3rem; bottom: 3rem;
background: #fff; width: 60px; height: 60px; display: flex; justify-content: center;
    align-items: center; border-radius: 60px; border: 1px solid #ddd; cursor: pointer}

.main_visual{overflow: hidden; position: relative; height: 100vh; width: 100%;
display: flex; justify-content: flex-start;
    align-items: center;}
.main_visual .video_are{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; z-index: -1}
.main_visual .video_are video{width: 100%; height: 100%; object-fit: cover; opacity: .9}


.main_txt h2{color: #fff; font-size: 70px; font-weight: 900; line-height: 1.4}

.main_visual .scroll{position: absolute; bottom: 3rem; left: 50%;
transform: translateX(-50%);}


.main_visual .scroll p {
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(
    -90deg, #FFF 0%, rgba(255, 255, 255, 0.30) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -00% 0;
  }
}



.main_title h2{color: #222; font-size: 60px; font-weight: 800;}
.main_title p{font-size: 24px; line-height: 1.4; word-break: keep-all; margin-top: 10px}

.main_product{padding: 150px 0 150px 8rem; overflow: hidden; display: flex; }
.main_product .main_title{width: 30%; padding: 60px 0}
.main_product .main_product_silde{width: 70%}


.main_product .main_product_silde .slick-slide{padding: 0 15px}

.main_product .main_product_silde .slick-list{padding-right: 8rem !important}


	
.main_product .main_product_silde .box a	{overflow: hidden; position: relative; height: 64vh;
	padding: 50px; border-radius: 10px; border: 1px solid #ddd;
	justify-content: flex-start;
    align-items: flex-end;
    display: flex
	}

.main_product .main_product_silde .box .txt{font-size: 24px; color: #222; font-weight: bold;
position: relative; z-index: 2; transition-duration: .5s}

.main_product .main_product_silde .box .thum{position: absolute; width: 300px; height: 300px; 
border-radius: 300px; left: 50%; top: 70px; overflow: hidden;
transform: translateX(-50%); transition-duration: 1s; z-index: 2}

.main_product .main_product_silde .box:hover .thum{ border-radius: 10px; 

    top: 0px;
    width: calc(100%);
    height: calc(100%);

}


.main_product .main_product_silde .box .thum img{max-width: 100%;    object-fit: cover;}

.main_product .main_product_silde .box a:hover .thum{top: 0; border-radius: 0; height: 100%; width: 100%;}
.main_product .main_product_silde .box a:hover .txt{color: #fff}

.main_product .slide_ct{margin-top: 60px}

.slide_ct{display: flex; gap:20px}
.slide_ct span{width: 60px; height: 60px; border: 1px solid #ddd; border-radius: 60px;
display: flex; justify-content: center;
    align-items: center; cursor: pointer; transition-duration: .5s}

.slide_ct span .prev{width:8px; height: 16px;
background: url(../img/common/prev.png); background-repeat: no-repeat; background-size: 8px auto }
.slide_ct span .next{width:8px; height: 16px;
background: url(../img/common/next.png); background-repeat: no-repeat; background-size: 8px auto }


.slide_ct span:hover{background: #DBB400; border-color:#DBB400 }
.slide_ct span:hover .prev{background-image: url(../img/common/prevw.png);}
.slide_ct span:hover .next{background-image: url(../img/common/nextw.png);}


.main_key{padding: 150px 8rem;  background-size: cover; position: relative;
background-image: url(../img/main/bg01.png);}

.main_key::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  left: 0; top: 0; width: 100%; height: 100%;
  transition-duration: 1s
}


.main_key .main_title h2{color: #fff}

.main_key.bg01::before {
  background-image: url(../img/main/bg01.png);
  opacity: 1;
}
.main_key.bg02::before {
  background-image: url(../img/main/bg02.png);
  opacity: 1;
}
.main_key.bg03::before {
  background-image: url(../img/main/bg03.png);
  opacity: 1;
}

.main_key_flex{display: flex; margin-top: 60px; z-index: 2; position: relative}
.main_key_flex .key_img{width: 800px;}
.main_key_flex .key_txt{width: calc(100% - 800px); padding:0 0 0 6rem}

.key_img .box{}
.key_img .box .thum{overflow: hidden; border-radius: 10px;}
.key_img .box .thum img{width: 100%; display: block}
.key_img .box .txt{margin-top: 30px}
.key_img .box .txt h3{color: #fff; font-size: 24px; word-break: keep-all; line-height: 1.4; font-weight: bold}
.key_img .box .txt p{color: #fff; font-size: 16px; word-break: keep-all; line-height: 1.4; margin-top: 15px}

.key_txt .flex_txt{display: flex; gap:30px;align-items: center;
    justify-content: flex-start; transition-duration: .5s; cursor: pointer}
.key_txt .flex_txt *{transition-duration: .5s}    
    
.key_txt .flex_txt p{padding: 10px ; border: 1px solid #DBB400; border-radius: 50px; font-size: 14px;
color: #DBB400; display: none}
.key_txt .flex_txt h2{font-size: 40px; color: #fff; opacity: .5}

.key_txt .slick-slide{padding: 30px 0}

.key_txt .slick-current p{display: block}
.key_txt .slick-current h2{opacity: 1; color: #DBB400}

.key_txt .slick-track{transform:none !important }



#image{background: #fff}
#image .txt_info{width: 70%; padding: 0 12rem}
#image .txt_info h2{color: #fff; font-size: 60px; line-height: 1.5; word-break: keep-all}

#image .txt_info .main_btn{margin-top: 50px}

#image .img_area {width: 100%;}
#image .img_area img {width: 100%; height: 100vh; object-fit: cover; position: absolute; left: 0; top: 0;}

#image .txt_area {position: relative; }
#image .txt_area .txt_container {}
#image .txt_area .txt_container li {height: 100vh; display: flex; align-items: center; justify-content: flex-end;}




.main_ani_sc{padding: 150px 0 0; position: relative}
.inner_flex{padding: 0 8rem; display: flex;
justify-content: space-between;
    align-items: flex-start;
    }

.flex_img_top{display: flex; gap:100px;
    justify-content: flex-end;
    align-items: flex-end;}
.flex_img_top p{font-size: 40px; font-weight: bold}

.flex_img_top .img_box{max-width: 100%}
.flex_img_top .img_box img{max-width: 100%}


#image_top{ min-height: 100vh; overflow: hidden}
#image_top .img_box{position: absolute; bottom: 150px; z-index: 2}


.main_btn{display: inline-flex; gap:10px; transition-duration: .5s; position: relative; padding-right: 70px}
.main_btn span{height: 60px; padding: 0 40px; font-size: 16px; font-weight: 600; border-radius: 60px; background: #f5f5f5;
display: flex;
    justify-content: center;
    align-items: center;}
.main_btn i{width: 60px; height: 60px; background: #DBB400; border-radius: 60px;
display: flex;
    justify-content: center;
    align-items: center;  transform: translateX(0px); transition-duration: .5s; position: absolute; right: 0px; top: 0}


.main_btn:hover{padding-left: 70px; padding-right: 0}
.main_btn:hover i{right:calc(100% - 60px)}



.main_news{padding: 150px 8rem}
.main_news .main_title{display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 60px}

.main_news_silde_are{position: relative; padding: 0 60px}
.main_news_silde_are .slide_ct{position: absolute; left: 0; top: 50%;      transform: translateY(-50%);
    width: 100%;
    justify-content: space-between; margin-top: -30px}
.main_news_silde .slick-slide{padding: 0 15px}
.main_news_silde .thum{display: block; border-radius: 10px; overflow: hidden}
.main_news_silde .thum img{aspect-ratio: 16 / 9;
    object-fit: cover; width: 100%; height: 100%}

.main_news_silde h2{font-size: 18px; margin-top: 30px; color: #222}
.main_news_silde p{font-size: 16px; opacity: .2; color: #222}


.foot_are{padding: 60px 0; background: #222}
.foot_are .inner{display: flex; gap:60px; 
align-items: flex-start;
    justify-content: flex-start;}

.foot_are .inner .foot_link{display: flex; gap:30px}
.foot_are .inner .foot_link a{font-size: 16px; color: #fff}

.foot_add{margin: 30px 0;
display: flex; gap:30px; 
align-items: flex-start;
    justify-content: flex-start;}

.foot_are p{font-size: 16px; color: #fff;
display: flex; gap:10px; 
align-items: flex-start;
    justify-content: flex-start;}

.foot_add p span:first-child,
.foot_are p.copy{opacity: .5}