html{ scroll-behavior: smooth;}

.inner{max-width: 1660px; padding: 0 20px; margin: 0 auto; width: 100%}

.top_btn{width: 100px; height: 100px; border-radius: 100px; background: rgba(255,255,255,.8);
 position: fixed; right: 50px; bottom: 50px; z-index: 3;
 display: flex;
    justify-content: center;
    align-items: center; transition-duration: .5s}
.top_btn span{background: url(../img/top.png); width: 14px; height: 18px; display: block;
 background-position: center; background-repeat: no-repeat; transition-duration: 1s}

.top_btn:hover{background:#551C87; box-shadow: 4px 4px 25px 0px rgba(255, 255, 255, 0.20);}
.top_btn:hover span{background-image: url(../img/topon.png); }

.foot_are{background: #141413}
.foot_top{border-bottom: 1px solid rgba(211,211,211,.1); padding: 30px 0;}
.foot_top .inner{display: flex; gap:15px; align-items: center;
    justify-content: flex-start;}
.foot_top .inner a{font-size: 18px; color: #666666; font-weight: 500}
.foot_top .inner a:first-child{color: #fff; }
.foot_top .inner span{width: 4px; height: 4px; display: block; background: #fff; border-radius: 4px}

.foot_info{padding: 40px 0}
.foot_info .inner{display: flex; gap:50px;}
.foot_info_list{display: flex; gap:10px 20px;     flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.foot_info_list li{display: flex; font-size: 18px; color: #fff; line-height: 35px; gap:20px; justify-content: flex-start;
    align-items: center;}
.foot_info_list li b{height: 35px; color: #1D1D1B; background: #f5f5f5; 
border: 1px solid #ddd; border-radius: 35px; line-height: 35px; width: 100px; text-align: center}

.foot_info_list li.w100{width: 100%}

.foot_copy{border-top: 1px solid rgba(211,211,211,.1); padding: 30px 0; text-align: center}
.foot_copy p{color: #383838; font-size: 18px}


.header_top{position: fixed; left: 0; top: 0; width: 100%; z-index: 9998; transition-duration: .5s}
.header_top .inner{position: relative}
.header_top.drop{background: rgba(0,0,0,0.5)}



.logo_top{position: absolute; left: 0; top: 30px}
.top_nav{display: flex; gap:60px; height: 100px; align-items: center;
    justify-content: center;}
.top_nav li{position: relative; text-align: center; display: flex; height: 100px; align-items: center;
    justify-content: center;}    
.top_nav li .deps1{font-size: 18px; color: #fff; font-weight: 500; text-align: center; transition-duration: .5s; position: relative}

.top_nav li:hover .deps1{color: #551C87; }
.top_nav li .deps1:after{content: ''; background: url(../img/nav_point.svg); width: 6px; height: 6px; background-position: center;
background-repeat: no-repeat; position: absolute; right: -10px; top: 0; transition-duration: .5s; opacity: 0}

.top_nav li:hover .deps1:after{opacity: 1}

.top_nav li .deps2{position: absolute; left: 50%; top: 80px; 
text-align: center; border-radius: 10px; background: #551C87; 
padding: 0px 20px; width: max-content; transform: translateX(-50%); box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);
height: 0; max-height: 0; transition-duration: .5s; visibility: hidden; opacity: 0
}

.top_nav li:hover .deps2{visibility: visible; height: auto; max-height: 500px; opacity: 1; padding: 40px 20px}

.top_nav li .deps2 a{font-size: 16px; font-weight: 500; color: #fff; 
opacity: .6; transition-duration: .5s; display: block;  text-align: center}
.top_nav li .deps2 a:hover{opacity: 1}
.top_nav li .deps2 a + a{margin-top: 15px;}

.sns_top{position: absolute; right: 0; top: 30px; display: flex; gap:10px}
.sns_top .sns_icon, .sns_top .lang_icon{background: rgba(255,255,255,.2); width: 40px; height: 40px; display: flex; border-radius: 50px;justify-content: center;
    align-items: center; transition-duration: .5s}
.sns_top .sns_icon:hover{box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);}
.sns_top .sns_icon:first-child:hover{background: #19166C}
.sns_top .sns_icon:nth-child(2):hover{background: #E64473;}
.sns_top .sns_icon:nth-child(3):hover{background: #FF0000}

.lang{position: relative}
.lang_list{position: absolute; padding:0 25px ; border-radius: 10px; background: rgba(255,255,255,.9); transform: translateX(-50%);
top: calc(100% + 10px); left: 50%; height: 0; max-height: 0; opacity: 0; visibility: hidden; transition-duration: .5s}
.lang_list a{display: block; text-align: center; color: #666; font-size: 16px; font-weight: 500; transition-duration: .5s}
.lang_list a + a{margin-top: 15px;}
.lang_list a:hover, .lang_list a.on{color: #111; font-weight: 600}

.lang_list.open{height: auto; max-height: 500px; opacity: 1; visibility: visible; padding: 25px}



.main_slide{height: 100vh; position: relative; }
.main_slide iframe{position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;  opacity: .7}

.video_are{ position: relative;
            width: 100%;
            /*height: 0;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */*/
            max-width: 100vw;
            max-height: 100vh; z-index: -1; background: #000; overflow: hidden}

.main_slide video {
        width: 100%;
        opacity: .7;
        height: 100%;
        object-fit: cover;
    }

.video_bg{width: 100%;height: 100vh;  position: relative} 

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

.main_visual_txt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding-bottom: 20em;
}
.main_visual_txt h2{font-size: 90px; font-weight: bold; color: #fff; margin-bottom: 20px;}
.main_visual_txt p{color: #fff; font-size: 24px; font-weight: 400}


.main_slide .slick-dots{position: absolute; width: 100%; max-width: 1660px; padding: 0 20px; bottom: 15em; display: flex;
transform: translateX(-50%);left: 50%; z-index: 2; gap:10px}

.main_slide .slick-dots li{width: 8px; height: 8px; background: #fff; border-radius: 8px; transition-duration: .5s; opacity: .5; cursor: pointer}
.main_slide .slick-dots li button{opacity: 0; height: 0; width: 0}


.main_slide .slick-dots li.slick-active{width: 60px; opacity: 1}


.section{padding: 150px 0}

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

.main_about .inner{display: flex; gap:100px;justify-content: space-between;
    align-items: center; }
.main_about .main_about_txt{flex:1; }


.main_title h2{font-size: 60px; font-weight: bold; color: #fff}
.main_title h2 b{font-weight: 900}
.main_title h2 b.color{color: #551C87; font-weight: 900}

.main_title p{font-size: 24px; line-height: 40px; color: #fff; opacity: .8; margin-top: 15px}

.main_title.point_title{text-align: center}
.main_title.point_title h2 span{position: relative; max-width: max-content;}
.main_title.point_title h2 span:after{content: ''; position: absolute; right: -28px; top: 0; width: 18px; height: 18px; 
background: url(../img/point_title.svg); background-position: center;
background-repeat: no-repeat;  transition-duration: .5s; }

.main_about_long{margin-top: 30px; margin-bottom: 60px; }
.main_about_long p{color: #fff; opacity: .8; font-size: 24px; line-height: 40px; font-weight: 400; word-break: keep-all}
.main_about_long p b{font-weight: bold;}

.main_about_img{border-radius: 80px 10px 80px 80px;
box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20); overflow: hidden}
.main_about_img img{display: block; max-width: 100%; width: 100%; scale: 1.1; transition-duration: 2s}


.show .main_about_img img{scale: 1.0;}


.common_btn{border: 2px solid #fff; height: 80px; border-radius: 20px 5px 20px 20px; padding: 0 30px; 
line-height: 80px; display: flex; width: 330px; font-size: 24px; color: #fff; font-weight: 500 ;align-items: center;
    justify-content: space-between; transition-duration: 1s;   position: relative; overflow: hidden; z-index: 2}
.common_btn span{z-index: 2; position: relative}
.common_btn span.plus{transition-duration: .5s}
.common_btn:after{content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: rgba(85,28,135,1); z-index: 1; transition-duration: 1s}

.common_btn:hover{ box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20); border-color:#551C87 }

.common_btn:hover span.plus{transform: rotate(45deg);}
.common_btn:hover:after{width: 100%}


.main_product_flex{margin-top: 130px; display: flex; gap:60px;}
.main_product_flex a .thum{overflow: hidden; position: relative}
.main_product_flex a .thum img{display: block; width: 100%; max-width: 100%; scale: 1.0; transition-duration: 1s}
.main_product_flex a:nth-child(2){margin-top: -50px}
.main_product_flex a:nth-child(1) .thum{border-radius: 60px 10px 10px 10px}
.main_product_flex a:nth-child(2) .thum{border-radius: 10px 10px 10px 10px}
.main_product_flex a:nth-child(2) .thum{border-radius: 10px 10px 60px 10px}

.main_product_flex a .thum:after{content:'' ; width: 100%; height: 100%; position: absolute; 
left: 0; top: 0; border:20px solid #551C87; opacity: .0; transition-duration: 1s}

.main_product_flex a:nth-child(1) .thum:after{border-radius: 60px 10px 10px 10px}
.main_product_flex a:nth-child(2) .thum:after{border-radius: 10px 10px 10px 10px}
.main_product_flex a:nth-child(2) .thum:after{border-radius: 10px 10px 60px 10px}

.main_product_flex a:hover .thum:after{opacity: .5}
.main_product_flex a:hover .thum img{scale: 1.1;}

.main_product_flex a p{color: #fff; opacity: .5; font-size: 24px; font-weight: bold; margin-top: 35px; transition-duration: 1s}
.main_product_flex a:hover p{opacity: 1; color: #551C87}


.main_product .common_btn{margin:100px auto 0}


.main_installation{background: linear-gradient(180deg, #1D1D1B 0%, #1A1A18 100%);}

.install_slide_are{position: relative; margin-top: 50px}


.arrowSlider{position: absolute; left: 0; width: 100%; padding: 0 ; top: 50%; z-index: 2; transform: translateY(calc(-50% - 20px)); height: 56px}
.arrowSlider .prev{width: 56px; height: 56px; border-radius: 56px; background: rgba(255,255,255,.8); cursor: pointer; display: flex !important;
    justify-content: center;
    align-items: center; position: absolute; left: 40px; top: 0}
.arrowSlider .next{width: 56px; height: 56px; border-radius: 56px; background: rgba(255,255,255,.8); cursor: pointer; display: flex !important;
    justify-content: center;
    align-items: center; position: absolute; right: 40px; top: 0; transition-duration: .5s}



.arrowSlider .prev:after{content: ''; background: url(../img/main/prev.png); width: 18px; height: 16px; display: block;
 background-position: center; background-repeat: no-repeat; transition-duration: 1s}
 
 .arrowSlider .next:after{content: ''; background: url(../img/main/next.png); width: 18px; height: 16px; display: block;
 background-position: center; background-repeat: no-repeat; transition-duration: 1s}
 
.arrowSlider .prev:hover, .arrowSlider .next:hover{background: #551C87}

.arrowSlider .prev:hover:after{background-image: url(../img/main/prevon.png)}
.arrowSlider .next:hover:after{background-image: url(../img/main/nexton.png)}

.main_installation_slide{margin: 0 -30px}
.main_installation_slide a .thum{display: block; overflow: hidden; border-radius: 10px; transition-duration: .5s; }
.main_installation_slide a .thum img{display: block; width: 100%; max-width: 100%; scale: 1.0; transition-duration: 1s;width: 100%;
    aspect-ratio: 16 / 10;
    height: 100%;
    object-fit: cover;}
.main_installation_slide .slick-slide{padding: 30px}

.main_installation_slide a p{color: #fff; opacity: .5; font-size: 24px; font-weight: 600; margin-top: 30px; transition-duration: 1s; white-space: nowrap; /* 텍스트가 한 줄에 나타나도록 설정 */
  overflow: hidden; /* 넘치는 텍스트 숨기기 */
  text-overflow: ellipsis; /* 넘치는 부분을 생략 부호로 표시 */}

.main_installation_slide a:hover .thum{box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);}
.main_installation_slide a:hover .thum img{scale: 1.1;}
.main_installation_slide a:hover p{color: #551C87; opacity: 1}


.main_partner{background: url(../img/main/main_partner.png); background-position: center; background-size: cover; padding-top: 220px}
.main_partner .inner{display: flex; gap:150px; align-items: flex-start;
    justify-content: flex-start;}
.main_partner .inner .main_title.point_title{text-align: left; flex:1;    position: sticky;
    top: 120px;
    left: 0;}
.main_partner .inner .main_title.point_title .common_btn{margin-top: 40px}



.main_partner_flex{display: flex; flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end; gap:60px; width: 55%}

.main_partner_flex .box{width:calc(50% - 30px)}

.main_partner_flex .box .thum{height: 270px; display: flex; border: 1px solid #ddd; border-radius: 10px; align-items: center;
    justify-content: center; transition-duration: .5s}

.main_partner_flex .box p{color: #fff; font-size: 24px; font-weight: bold; opacity: .8; transition-duration: .5s; margin-top: 30px}

.main_partner_flex .box:hover .thum{border: 10px solid #551C87; box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);}
.main_partner_flex .box:hover p{opacity: 1}

.main_partner_flex .box:nth-child(2n){margin-top: -70px}



.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:30px 30px; border-radius: 20px 5px 20px 20px;
  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 .agree_close{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_lnk_new{display: flex; gap:10px; margin-top: 30px}
.product_lnk_new img{max-width: 100px}