.foot_as{position: fixed; right: 3rem; bottom: 3rem; z-index: 6;
background: #1936B2; width: 70px; height: 70px; border-radius: 70px;
display: inline-flex; gap:0px; justify-content: center;
    align-items: center; max-width: 70px; transition-duration: .8s; overflow: hidden;
    min-width: 70px}

.foot_as:hover{width: auto; max-width: 250px; padding: 0 25px; gap:20px;}
.foot_as span{font-size: 16px; color: #fff; 
word-break: keep-all; width: 0; overflow: hidden; visibility: hidden; opacity: 0;
 transition-duration: .8s; max-width: 0}

.foot_as:hover span{width: auto; visibility: visible; opacity: 1; max-width: 150px;}

/*pop*/

.videio_pop{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999;
background: rgba(0,0,0,0.8); display: none}
.videio_pop .videio_pop_btn_close{position: absolute; right: 6rem; top: 30px;}
.videio_pop .videio_pop_are{overflow: hidden; width: 100%; max-width: 1280px;
border-radius: 20px; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);}
.videio_pop .videio_pop_are video{width: 100%; display: block}


.videio_pop.atv_pop{display: block}

.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}

.pop03 .agree_pop_content{max-width: 660px;}

.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}

.product_pop_info{margin-top: 15px; padding: 15px 0;max-height: 80vh; overflow-y: auto;}


.inner{padding: 0 6rem}
.inner2{padding: 0 8rem}


/*head*/

body.all_menu{height: 100vh; overflow: hidden}

.header{position: absolute; left: 0; top: 0px; width: 100%; z-index: 9998}
.header .logo{
	display: inline-block;
	width: 262px; height: 26px;
	background: url(../img/logow.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute; left: 50px; top: 35px
}

.header .nav_top{display: flex; gap:70px; text-align: center;
    justify-content: center; transition-duration: .8s}
.header .nav_top li a.onedeps{height: 100px; display: flex; font-size: 18px; color: #fff;
justify-content: center;
    align-items: center; transition-duration: .5s; text-transform: uppercase}

.header .nav_top li:hover a.onedeps{color: #07A0F4}

.header .nav_top li{position: relative; width: auto; transition-duration: .8s}
.header .nav_top li .sub_deps{position: absolute; width: 170px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.3);
padding: 0px 15px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); transition-duration: .8s; visibility: hidden; overflow: hidden; opacity: 0;
    height: 0; max-height: 0; text-align: center}

.header .nav_top li:hover .sub_deps{opacity: 1; height: auto; max-height: 500px; 
visibility: visible; padding: 15px 15px}


.header .nav_top li .sub_deps a{display: block; color: #fff; transition-duration: .5s; font-size: 16px; 
font-weight: 500}
.header .nav_top li .sub_deps a + a{margin-top: 15px; }
.header .nav_top li .sub_deps a:hover{color: #07A0F4}

.sub_deps .sub_deps_in{text-align: center}
.sub_deps .sub_deps_in a{color: #fff; font-size: 14px; opacity: .6; transition-duration: .8s}
.sub_deps .sub_deps_in a + a{margin-top: 12px;}
.sub_deps .sub_deps_in a:hover{opacity: 1}

.sub_deps a + .sub_deps_in{margin-top: 20px}
.sub_deps_in + a{margin-top: 20px}


.header .nav_top li .sub_deps .sub_deps_in a{font-size: 14px}

.header .right{position: absolute; right: 50px; top: 36px; display: flex; gap: 30px;     align-items: center;}
.header .right .lang{position: relative; cursor: pointer}
.header .right .lang p{
	display:inline-flex; gap:8px;   align-items: center;
	color: #fff; font-weight: 600; font-size: 17px
}

.header .right .lang .lang_list{position: absolute; top: calc(100% + 10px); padding: 10px; border-radius: 5px;
background: #fff; width: 100%; text-align: center; visibility: hidden; opacity: 0; transition-duration: .8s}
.header .right .lang .lang_list a{display: block; font-size: 16px; color: #333}
.header .right .lang .lang_list a + a{margin-top: 8px}

.header .right .lang.atv .lang_list{visibility: visible; opacity: 1;}

.all_btn{width: 30px; height: 20px; position: relative}
.all_btn span{width: 100%; height: 2px; background: #fff; position: absolute; transition-duration: .5s}
.all_btn span:first-child{top: 0; left: 0}
.all_btn span:last-child{bottom: 0; left: 0}

.all_btn span:nth-child(2){top: 50%;
    right: 0;  transform:translateY(calc(-50% + 0.5px)); width: 80%}   

.all_menu .all_btn span:first-child{top: 50%;
    left: 0;
    transform: rotate(45deg) translateY(calc(-50% + 0.5px));}
 
.all_menu .all_btn span:nth-child(2){opacity: 0}
    
.all_menu .all_btn span:last-child{top: 50%;
    left: 0;
    transform: rotate(-45deg) translateY(calc(-50% + 0.5px)); bottom: auto}


.site_map{position: fixed; left: 0; top: -100%; width: 100%;  z-index: 9992;
background: rgba(27, 27, 27, 0.70);
backdrop-filter: blur(10px);
display: flex;
    justify-content: center;
    align-items: center; opacity: 0; visibility: hidden; transition-duration: .8s; padding-top: 100px}

.site_map:after{content: '';
width: 100%; height: 1px;
background: rgba(255, 255, 255, 0.20);
position: absolute; left: 0; top: 100px }

.site_map .nav_top{display: flex; gap:0}

.site_map .nav_top li{width: 180px;
border-left:1px solid rgba(255, 255, 255, 0.20)}
.site_map .nav_top li:last-child{ 
	border-right:1px solid rgba(255, 255, 255, 0.20)}

.site_map .nav_top li a.onedeps{color: #fff; font-size: 35px; font-weight: 800; text-transform: uppercase;
display: none}
.site_map .nav_top li .sub_deps{padding: 30px 0; text-align: center }
.site_map .nav_top li .sub_deps a{display: block; font-size: 16px ; color: #fff; word-break: keep-all; 
opacity: .9; transition-duration: .8s; font-weight: 500}
.site_map .nav_top li .sub_deps a + a{margin-top: 15px;}
.site_map .nav_top li .sub_deps a:hover{opacity: 1; color: #07A0F4}


.site_map .nav_top li .sub_deps .sub_deps_in a{font-size: 14px; font-weight: 400; opacity: .6}
.site_map .nav_top li .sub_deps .sub_deps_in a:hover{color: #fff; opacity: 1}

.all_menu .site_map{opacity: 1; visibility: visible; top: 0}
.all_menu .header .nav_top li .sub_deps{display: none}


.all_menu .header .nav_top{gap:0px; }
.all_menu .header .nav_top li{width: 180px}




.floating_right{position: fixed; z-index: 4; right: 0; top: 50%;
transform:translateY(-50%); padding: 17px 25px;
border-radius: 10px 0 0 10px;
background: rgba(0, 0, 0, 0.70);
backdrop-filter: blur(12.5px);}

.floating_right a{text-align: center; display: block}
.floating_right a + a{margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.20)}
.floating_right a p{margin-top: 5px; font-size: 14px; font-weight: 800; color: #fff}

.floating_right a i svg path{transition-duration: .8s}
.floating_right a:hover i svg path{fill:#88C744}



/*main_cisual*/




.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  background: linear-gradient(90deg, #20C557 0%, #07A0F4 100%);
  color: #fff;
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 150px;
  pointer-events: none;
  transform: translate(-100%, -100%);

  user-select: none;
  z-index: 9999;
  gap:20px; display: flex;
  backdrop-filter: blur(5px);
}
















/*footer*/

.footer{background: #111; }
.footer .top_foot{padding: 100px 0 80px; position: relative; 
display: flex;
    justify-content: space-between;
    align-items: flex-start;}

.footer .top_foot h2{color: #fff; font-size: 80px; font-weight: 800}

.footer .top_foot .foot_info{margin-top: 30px}
.footer .top_foot .foot_info li{display: flex; gap:10px;  align-items: center;
font-size: 16px; color: #fff; word-break: keep-all}
.footer .top_foot .foot_info li b{color: #999}

.footer .top_foot .foot_info li span + b{margin-left: 30px;}
.footer .top_foot .foot_info li + li{margin-top: 10px;}




.footer .top_foot .right{}
.footer .top_foot .right .foot_more{}
.footer .top_foot .right .foot_more a{display: flex;
color: rgba(255, 255, 255, 0.50);
font-size: 22px; font-weight: 700; transition-duration: .8s;
gap:15px;align-items: center;
}

.footer .top_foot .right .foot_more a + a{margin-top: 15px}

.footer .top_foot .right .foot_more a i{width: 50px; height: 50px; display: flex; 
border-radius: 50px;
background: linear-gradient(90deg, #20C557 -40.71%, #07A0F4 100%);
    justify-content: center;
    align-items: center; opacity: 0; transition-duration: .8s}

.footer .top_foot .right .foot_more a:hover{color: #29B34B;}
.footer .top_foot .right .foot_more a:hover i{opacity: 1}


.footer .foot_copy{padding: 50px 0 100px; position: relative; display: flex
;align-items: center; justify-content: space-between;}
.footer .foot_copy p{font-size: 16px; color: #666; word-break: keep-all}



.family-box {
    width: 240px;
    position: relative;
    font-family: 'Pretendard', sans-serif;
}

.family-btn {
    width: 100%;
    background: #2b2b2b;
    color: #fff;
    border: none;
    padding: 16px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
}

.family-btn .plus {
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* 열릴 때 + 회전 */
.family-btn.active .plus {
    transform: rotate(45deg);
}

.family-list {

    background: #1e1e1e;
    border-radius: 10px;
    margin-bottom: 4px;
    overflow: hidden;
    position: absolute; 
    bottom: 100%;
    width: 100%;
    display: none
}

.family-list li a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.family-list li:last-child a {
    border-bottom: none;
}

.family-list li a:hover {
    background: #333;
}








/*main*/

.main_visual{position: relative; height: 100vh; overflow: hidden}
.main_visual_slide{}

.main_visual_slide .box{position: relative; height: 100vh; overflow: hidden;
display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;}
.main_visual_slide .box .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.main_visual_slide .box .bg img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    transition-duration: 3s; 
transform: scale(1.1);
animation: imgsc 3s ease-in-out 1;
}


.main_visual_slide .slick-active .box .bg img{transform: scale(1.0)}

@keyframes imgsc {
  0%   { transform: scale(1.1) }
  100% { transform: scale(1.0)}
} 




.main_visual_slide .box .txt{position: relative; z-index: 2; padding-bottom: 10vh}
.main_visual_slide .box .txt h2{color: #fff; font-size: 48px; font-weight: 700; line-height: 140%; word-break: keep-all}
.main_visual_slide .box .txt p{margin-top: 12px; font-size: 18px; word-break: keep-all; line-height: 140%; font-weight: 500; color: #fff}



.main_visual_slide .slick-dots{position: absolute; left: 0; bottom: calc(50% - 10vh); width: 100%; display: flex; gap:10px;
    justify-content: center;}
.main_visual_slide .slick-dots li{width: 12px; height: 12px; border-radius: 12px; background: #fff; transition-duration: .8s; opacity: 0.4}
.main_visual_slide .slick-dots li button{font-size: 0; opacity: 0}



.main_visual_slide .slick-dots li.slick-active{opacity: 1}





.count_num_flex{position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; padding: 34px 25px; display: flex;
justify-content: center; gap:150px; 
background: rgba(0, 0, 0, 0.20);
backdrop-filter: blur(12.5px);}

.count_num_flex .box{text-align: center}

.count_num_flex .box h2{font-size: 46px; line-height: 130%; word-break: keep-all; display: flex; color: #fff;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;}
.count_num_flex .box h2 span{font-size: 40%; font-weight: 400; margin-bottom: -8px}
.count_num_flex .box p{margin-top: 8px; font-size: 18px; color: #fff; word-break: keep-all}




.inner{padding: 0 6rem}
.main_title{margin-bottom: 50px}
.main_title h2{font-size: 50px; line-height: 130%; word-break: keep-all; font-weight: 700; color: #000}
.main_title h2 b{color: #07A0F4; font-weight: 700}

ul.dot{}
ul.dot li{font-size: 18px; padding-left: 15px; position: relative; line-height: 140%; color: #111; opacity: .7}
ul.dot li + li{margin-top: 4px}
ul.dot li:after{content: '·'; position: absolute; left: 0; top: 0}


.more_btn{height: 60px;
padding: 13px 25px 13px 20px; display: inline-flex; border-radius: 60px; gap:20px;
background: linear-gradient(90deg, #20C557 0%, #07A0F4 100%); color: #fff; font-size: 16px; font-weight: 700; word-break: keep-all;
align-items: center;
    justify-content: center; border: 0}

.more_btn.sub{border: 1px solid #FFF;background: transparent}

.main_business{padding: 180px 0}

.main_business_flex{display: flex; gap:20px}

.main_business_flex .box{flex:1 1 0%; border-radius: 20px; overflow: hidden; height: 600px; 
transition-duration: 1s; position: relative;  z-index: 2; padding:60px 50px; background-position: center; background-size: cover; display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;}
.main_business_flex .box:hover{flex:4 1 0% }
.main_business_flex .box:last-child{margin: 0 auto 0}


.main_business_flex .box:nth-child(1){background-image: url(../img/main/main_business_flex01.png)}
.main_business_flex .box:nth-child(2){background-image: url(../img/main/main_business_flex02.png)}
.main_business_flex .box:nth-child(3){background-image: url(../img/main/main_business_flex03.png)}
.main_business_flex .box:nth-child(4){background-image: url(../img/main/main_business_flex04.png)}

.main_business_flex .box .txt h2{color: #fff; font-size: 30px; word-break: keep-all;font-weight: 700; line-height: 130%; transition-duration: .8s}

.main_business_flex .box ul.dot{height: 0; overflow: hidden; max-height: 0; visibility: hidden; opacity: 0}
.main_business_flex .box:hover ul.dot{margin-top: 15px; opacity: 1; height: auto; max-height: 300px; transition-duration: .8s; visibility:visible}

.main_business_flex .box ul.dot li{color: #fff; opacity: 1}


.main_product{height: 100vh; position: relative; background-position: center; background-size: cover; background-color: #000;
background-image: url(../img/main/main_product_flex01.png); transition-duration: .8s}
.main_product .main_title{position: absolute; left: 0; width: 100%; top: 160px; padding: 0 6rem; z-index: 2}
.main_product .main_title h2{color: #fff}


.main_product.bg01{background-image: url(../img/main/main_product_flex01.png)}
.main_product.bg02{background-image: url(../img/main/main_product_flex02.png)}
.main_product.bg03{background-image: url(../img/main/main_product_flex03.png)}
.main_product.bg04{background-image: url(../img/main/main_product_flex04.png)}


.main_product_flex{display: flex; height: 100vh; background: rgba(0,0,0,0.15); position: relative; z-index: 2}
.main_product_flex li{text-align: center; padding: 17% 60px 0; flex:1}
.main_product_flex li + li{border-left: 1px solid rgba(255,255,255,0.4)}
.main_product_flex li .txt{opacity: .5; transition-duration: .8s}
.main_product_flex li .txt h4{color: #fff; font-size: 18px; font-weight: 700; line-height: 140%; word-break: keep-all; margin-bottom: 10px; 
text-transform: uppercase; transition-duration: .8s}
.main_product_flex li .txt h2{color: #fff; word-break: keep-all; font-size: 30px; font-weight: 700;}
.main_product_flex li .txt p{margin-top: 15px; font-size: 16px; line-height: 150%; font-weight: 400; word-break: keep-all; color: #fff}

.main_product_flex li .more_btn{margin-top: 40px; opacity: 0; transition-duration: .8s}

.main_product_flex li:hover .txt{opacity: 1}
.main_product_flex li:hover .more_btn{opacity: 1}

.main_product_flex li:hover .txt h4{color: #4EB694}



.main_product_flex li.on .txt{opacity: 1}
.main_product_flex li.on .more_btn{opacity: 1}

.main_product_flex li.on .txt h4{color: #4EB694}









.main_oem{position: relative; background-position: center; background-size: cover; background-color: #000;
background-image: url(../img/main/main_oem.png); transition-duration: .8s; padding: 160px 0}

.main_oem .main_title h2{color: #fff}


.main_oem_flex{display: flex; gap:20px; flex-wrap: wrap;}
.main_oem_flex li{overflow: hidden; border-radius: 20px; width: calc(33.33% - 16.66px); position: relative}
.main_oem_flex li img{width: 100%;display: block}

.main_oem_flex li .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); text-align: center;
display: flex; 
    justify-content: center;
    align-items: center; transition-duration: .8s; opacity: 0}
.main_oem_flex li .bg p{font-size: 24px; font-weight: bold; color: #fff; word-break: keep-all}

.main_oem_flex li a:hover .bg{opacity: 1}

.main_roof{overflow: hidden; padding: 30px 0}


.roof_text{overflow: hidden}
.roof_text h2{
font-size: 200px;
font-style: normal;
font-weight: 400;
line-height: normal;
white-space: nowrap;
opacity: 0.05;
display: inline-block;
}

.main_roof .slick-track{display: flex !important}

.main_news{padding: 160px 0; background: #F9F9F9}



.main_news_flex{display: flex; gap:20px}
.main_news_flex .left{width: 600px; border-radius: 20px; border: 1px solid #ddd; overflow: hidden}
.main_news_flex .left img{display: block; width: 100%; height: 100%;object-fit: cover;}


.main_news_flex .right{flex:1}
.main_news_flex .right .right_title{
	border-radius: 20px;
border: 1px solid #DDD;
background: #FFF;
padding: 18px 40px; 
display: flex; 
align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}
.main_news_flex .right .right_title h3{font-size: 24px; word-break: keep-all; line-height: 130%; font-weight: 400}
.main_news_flex .right .right_title h3 b{font-weight: 700}



.main_news_flex .right .right_contant{padding: 56px 40px;
	border-radius: 20px;
border: 1px solid #DDD;
background: #FFF;}






.board_least{grid-template-columns: 1fr 2fr;
  gap:0 40px; display: grid;}


.board_least li .txt{display: flex;
    justify-content: space-between;
    align-items: center;}

.board_least li .txt h3{color: #111; font-size: 18px; line-height: 130%; word-break: keep-all; font-weight: 600;
display: -webkit-box;
  -webkit-line-clamp: 1; /* 줄 수를 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;}
.board_least li .txt p{display: flex; gap:0px; font-size: 16px; line-height: 130%; word-break: keep-all; font-weight: 400;
align-items: center; transition-duration: .8s}

.board_least li .txt p span{color: #111; opacity: .6}
.board_least li .txt p i{
	border-radius: 20px;
background: linear-gradient(90deg, #20C557 0%, #07A0F4 100%);
 height: 40px;
display: flex;
justify-content: center;
align-items: center; opacity: 0; visibility: hidden;
overflow: hidden; width: 0;  
}


.board_least li a:hover .txt p i{width: 40px; opacity: 1; visibility: visible; transition-duration: .5s}
.board_least li a:hover .txt p{gap:5px}




.board_least li .thum{display: none}


.board_least li{
	grid-column: 2 / 3;
}

.board_least li a{
	padding: 24px;
	border-top: 1px solid #DDD;
	display: block; transition-duration: .8s;
	background: #fff
}

.board_least li a:hover{background: rgba(7, 160, 244, 0.10);}

.board_least li:last-child a{
	border-bottom: 1px solid #DDD;
}

.board_least li:first-child {

  grid-column: 1 / 2;
  grid-row: 1 / span 6;
  width: 350px
}

.board_least li:first-child a{border: 0; padding: 0}
.board_least li:first-child .thum{display: block; border-radius: 20px; overflow: hidden}
.board_least li:first-child .thum img{display: block; width: 100%; height: 100%;object-fit: cover; aspect-ratio: 1}


.board_least li:first-child .txt{display: block; margin-top: 20px}
.board_least li:first-child .txt p{text-align: right; margin-top: 15px; display: block}
.board_least li:first-child .txt p i{display: none}

.board_least li:first-child a:hover{background: #fff}




.pop_open_are{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999}
.popup_new{position: absolute; width: 540px; left: 50%; top: 50%;
transform: translate(-50%, -50%)}
.popup_new .pop_slide img{display: block; width: 100%}

.popup_new .slick-arrow{position: absolute;width: 50px; height: 50px; 
background: rgba(0,0,0,0.5); background-position: center; background-repeat: no-repeat; border-radius: 50px; z-index: 2; border: 0 ; top: 50%;
transform: translateY(-50%)}

.popup_new .slick-arrow.slick-prev{background-image: url(../img/pop/prev.png); left: 18px}
.popup_new .slick-arrow.slick-next{background-image: url(../img/pop/next.png); right: 18px}

.close_pop_are{background: #fff; padding: 15px; display: flex; gap:10px;
align-items: center;
    justify-content: space-between;}
.close_pop_are .lect{display: flex; align-items: center; gap:10px}
.close_pop_are .lect label{font-size: 16px; word-break: keep-all}
.close_pop_are button{border: 0;
    background: transparent;}
.close_pop_are button img{display: block}