@import url("common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");

@keyframes sub_banner_bg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}

@keyframes sub_banner_txt {
	0% { transform:translateY(100px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}


/* ¼­ºêž */
#visual{padding: 220px 0 0;}

.v_location{display: flex; align-items:center; gap:0 23px; padding: 0 0 20px;}
.v_location dt{}
.v_location dt a{display: block; width: 16px; height: 16px; vertical-align: top;}
.v_location dt a svg{width: 100%; height: auto; display: inline-block; vertical-align: top;}
.v_location dt a path{transition:all .3s linear;}
.v_location dt a:hover path{fill:var(--main);}
.v_location dd{font-size:14px; font-weight: 600; color:var(--white); line-height: 150%; letter-spacing: var(--letter-spacing-default); position: relative;}
.v_location dd::before{content:''; display: block; width: 3px; aspect-ratio:1/1; border-radius:50%; background:rgba(255,255,255,.2); position: absolute; left:-13px; top:50%; margin-top:-1px;}
.subtitle{padding: 0 0 70px;}
.subtitle h2{font-size:4.111rem; font-weight: 700; color:var(--white); line-height: 120%; letter-spacing: 0; font-family:var(--eng);}

.lnb{overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.1);}
.lnb .lnb_swiper{}
.lnb .lnb_swiper ul{font-size:0; white-space: nowrap; text-align:left;}
.lnb .lnb_swiper ul li{width: auto; display: inline-block; margin:0; padding:0;}
.lnb .lnb_swiper ul li a{display: block; font-size:1rem; font-weight: 400; color:rgba(255,255,255,.7); letter-spacing: var(--letter-spacing-default); line-height: 150%; padding: 15px 0; margin: 0 50px 0 0; position: relative; transition:all .3s linear;}
.lnb .lnb_swiper ul li a:hover{color:var(--white);}
.lnb .lnb_swiper ul li a::after{content:''; display: block; width: 0; height: 3px; background:var(--main); position: absolute; left:0; bottom: 0;}
.lnb .lnb_swiper ul li.left_linktop a::after{width: 100%;}
.lnb .lnb_swiper ul li.left_linktop a{font-weight: 600 !important; color:var(--main) !important;}

.sub_banner{width: 100%; height: 700px; position: relative; overflow: hidden;}
.sub_banner .sub_banner_bg{position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center; transform: scale(1); animation: sub_banner_bg 1.8s;}
.sub_banner .sub_banner_txt{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); z-index:99; text-align:center;}
.sub_banner .sub_banner_txt .fs50{color:var(--white); transform:translateY(100px); opacity:0; animation:sub_banner_txt 1s 0.3s; animation-fill-mode:both;}
.sub_banner .sub_banner_txt .fs50 span{display: inline; letter-spacing: inherit; line-height: inherit;}
.sub_banner .sub_banner_txt .fs18{padding: 15px 0 0; color:var(--white); transform:translateY(100px); opacity:0; animation:sub_banner_txt 1s 0.6s; animation-fill-mode:both;}
.sub_banner .sub_banner_txt dl{margin: 30px auto 0; max-width:1100px; transform:translateY(100px); opacity:0; animation:sub_banner_txt 1s 0.6s; animation-fill-mode:both; display: flex; text-align:left;}
.sub_banner .sub_banner_txt dl + dl{margin: 10px auto 0;}
.sub_banner .sub_banner_txt dl dt{width: 112px; height: 38px; line-height: 38px; border-radius:38px; background:var(--main); text-align:center; font-size:0.889rem; font-weight: 700; color:var(--white); letter-spacing: var(--letter-spacing-default);}
.sub_banner .sub_banner_txt dl dt::before{display: inline-block; vertical-align: middle; margin:-2px 6px 0 0; font-size:18px; font-weight: 400; font-family:var(--icon); color:inherit;}
.sub_banner .sub_banner_txt dl.product dt::before{content:'\f082';}
.sub_banner .sub_banner_txt dl.as dt::before{content:'\f10b';}
.sub_banner .sub_banner_txt dl dd{width: calc(100% - 112px); padding:0 0 0 15px; box-sizing:border-box; font-size:0.889rem; font-weight: 400;  letter-spacing: var(--letter-spacing-default); line-height: 150%; color:var(--white); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.sub_banner .sub_banner_txt .marks{margin: 60px auto 0; display: flex; align-items:center; justify-content: center; gap:0 40px; transform:translateY(100px); opacity:0; animation:sub_banner_txt 1s 0.6s; animation-fill-mode:both;}
.sub_banner .sub_banner_txt .marks li{width: auto;}
.sub_banner .sub_banner_txt .marks li img{max-width:100%; width: 100%; height: auto;}
.sub_banner .sub_banner_tit{position: absolute; left: 0; bottom: -50px; width: 100%;}
.sub_banner .sub_banner_tit h3{display: inline-block; font-size:180px; font-weight: 700; font-family:var(--eng); color:rgba(255,255,255,.07); line-height: 100%; letter-spacing: 9px; white-space: nowrap;  margin: 0;}

.sub_banner .sub_banner_tit.short h3{position: relative; left: 50%;}



.search_none .lnb{display: none;}


/* ŸÀÌƲ */
.title_area{text-align:center; padding: 0 0 60px;}
.title_area .fs36{color:var(--white); font-weight: 200;}
.title_area .fs36 b{font-weight: 700; display: inline; letter-spacing: inherit; line-height: inherit;}
.title_area .fs18{padding: 40px 0 0; color:rgba(255,255,255,.7);}
.title_area .fs18 b{font-weight: 800; display: inline; letter-spacing: inherit; line-height: inherit;}





.policy_cont{position:relative; overflow:hidden; font-size:1rem; color:rgba(255,255,255,.7);}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--white);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--white); padding-bottom:18px; font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--white) !important; }
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt:last-child{padding:0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:rgba(255,255,255,.1); margin:7px 0px 10px 0px; display:block;  line-height:1.7;}

.privacy_list {width:91%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px dashed rgba(255,255,255,.2); margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--white);} 




/*******************************************************************************
    @media 1710px
*******************************************************************************/
@media all and (max-width:1710px){




}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/* ¼­ºêž */
#visual{padding: 180px 0 0;}

.v_location{padding: 0 0 10px;}
.subtitle{padding: 0 0 50px;}
.subtitle h2{font-size:3.333rem;}

.lnb{}
.lnb .lnb_swiper ul li a{padding: 12px 0; margin: 0 30px 0 0;}

.sub_banner{height: 500px;}
.sub_banner .sub_banner_txt .fs18{padding: 10px 0 0;}
.sub_banner .sub_banner_txt .marks{margin: 30px auto 0; gap:0 30px;}

.sub_banner .sub_banner_tit{bottom: -25px;}
.sub_banner .sub_banner_tit h3{font-size:100px; letter-spacing: 5px;}


/* ŸÀÌƲ */
.title_area{padding: 0 0 40px;}
.title_area .fs36 br{display:none;}
.title_area .fs18{padding: 20px 0 0;}


.policy_cont{}
.policy_cont p.cont_tit {font-size:1.2em !important; padding-bottom:5px;}
.policy_cont .cont_txt {padding:0px 0px 25px 0; }
.policy_cont .cont_txt2 {padding-bottom:25px;}
.policy_cont .cont_box {padding:18px 18px; }

.privacy_list {margin-bottom:30px;}
.privacy_list li {width:100%;  }
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* ¼­ºêž */
#visual{padding: 140px 0 0;}

.subtitle{padding: 0 0 20px;}
.subtitle h2{font-size:2.5rem;}

.lnb{}
.lnb .lnb_swiper ul li a{margin: 0 20px 0 0;}
.lnb .lnb_swiper ul li a::after{height: 2px;}

.sub_banner{height: 400px;}
.sub_banner .sub_banner_txt dl{margin: 20px auto 0;}
.sub_banner .sub_banner_txt dl dt{width: 100px; height: 30px; line-height: 30px;}
.sub_banner .sub_banner_txt dl dt::before{margin:-2px 3px 0 0; font-size:14px;}
.sub_banner .sub_banner_txt dl dd{width: calc(100% - 100px); padding:0 0 0 10px;}
.sub_banner .sub_banner_txt .marks{margin: 20px auto 0; gap:0 20px;}

.sub_banner .sub_banner_tit{bottom: -10px;}
.sub_banner .sub_banner_tit h3{font-size:60px; letter-spacing:3px;}


/* ŸÀÌƲ */
.title_area{padding: 0 0 30px;}
.title_area .fs18{padding: 10px 0 0;}


}