@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");



/* 비주얼 */
#visual{position:relative; width:100%; height:600px;}
#visual .visual_in{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9999;}
#visual .v_txt h2{transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.5s; animation-fill-mode:both; margin-top: 10px;}
#visual .v_txt p{transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.3s; animation-fill-mode:both; color: rgba(255, 255, 255, 0.8);}
#visual .v_bg {position:absolute; left:0; top:0; width:100%; height:100%; overflow: hidden;}
#visual .v_bg .bg{position:absolute; left:0; top:0; width:100%; height:100%; transform: scale(1); animation: m_vsImg 1.8s;}
#visual .v_bg::before {content: ''; width: 100%; height: 100%; position: absolute; left:0; top:0; opacity: 0.3; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 15%, rgba(0, 0, 0, 0.20) 70%, #000 100%); z-index: 1;}
#visual .v_bg::after {content: ''; width: 100%; height: 100%; position: absolute; left:0; top:0; opacity: 0.5; background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); z-index: 1;}


@keyframes m_vsImg {
	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 v_txt {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}


#visual .v_lnb{position: absolute; left:50%; bottom: 0; transform:translateX(-50%); z-index: 9999; display: flex; justify-content: space-between; align-items:center; border-top: 1px solid rgba(255,255,255,.1); box-sizing:border-box; padding:20px 0; flex-wrap: wrap; gap: 10px;}

#visual .sub_location ul{display: flex; align-items:center;}
#visual .sub_location ul li{padding-left: 38px; position: relative; font-size:0.889rem; font-weight:600; color:var(--white); line-height: 187.5%; letter-spacing: var(--letter-spacing-default);}
#visual .sub_location ul li:first-child{padding-left: 0; top:-1px}
#visual .sub_location ul li:first-child:before{display: none;}
#visual .sub_location ul li:before{content:'\e5cc'; display:block; width:18px; height:18px; line-height:18px; font-size:18px; position: absolute; left:10px; top:50%; font-family:var(--icon); font-weight: 400; transform:translateY(-50%);}
#visual .sub_location ul li a{display: block; width: 18px; height: 18px;}
#visual .sub_location ul li a:hover {opacity: 0.3;}
#visual .sub_location ul li a svg{width: 100%; height: auto;}

#visual .sub_location ul li:nth-child(2) {color: rgba(255, 255, 255, 0.7); letter-spacing: 0; font-weight: 700; font-family: var(--eng);}


/* 비주얼 lnb */
.mobile_snb{max-width:660px; width: 100%; background: rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); border-radius: 9999px;}
.mobile_snb .tbox{display:flex; justify-content: flex-end;}
.mobile_snb .tbox .box{width:50%; box-sizing:border-box; position: relative;}
.mobile_snb .tbox .box .dropLst{position: relative;}
.mobile_snb .tbox .box .dropLst .title{display:block; font-size:1rem; font-weight: 600; line-height:177.778%; letter-spacing:var(--letter-spacing-default); box-sizing:border-box; padding:18px 60px 18px 30px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; position: relative; color:var(--white);}
.mobile_snb .tbox .box .dropLst .title::after{content:'\e313'; display:block; width:24px; height:24px; line-height: 1; font-size:24px; font-family:var(--icon); position:absolute; right:30px; top:50%; transition:all .3s; font-weight: 400; transform:translateY(-50%);}
.mobile_snb .tbox .box .dropLst .title.on::after{transform:translateY(-50%) rotate(180deg);}
.mobile_snb .tbox .box .dropLst .dlst{display:none; position: absolute; left: 0; top:70px; width: 100%; background: var(--white); z-index: 99999; box-shadow:0 20px 20px rgba(0,0,0,.05); padding: 20px 30px; box-sizing:border-box; border-radius:20px;}
.mobile_snb .tbox .box .dropLst .dlst ul li{margin: 0 0 6px;}
.mobile_snb .tbox .box .dropLst .dlst ul li:last-child{margin: 0;}
.mobile_snb .tbox .box .dropLst .dlst ul li a{display: block; color:var(--basic); font-size:1rem; line-height:177.778%; letter-spacing:var(--letter-spacing-default); box-sizing:border-box;}
.mobile_snb .tbox .box .dropLst .dlst ul li a.on{font-weight: 700; color:var(--main);}
.mobile_snb .tbox .box .dropLst .dlst ul li a:hover {color: var(--main);}

.mobile_snb .tbox .box.dep1 .title {font-family: var(--eng); letter-spacing: 0; font-weight: 700;}
.mobile_snb .tbox .box.dep1 .title::before {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: calc(100% - 36px); border-left: 1px solid rgba(255, 255, 255, 0.2);}

.mobile_snb .tbox .box.dep1 .dropLst .dlst ul li a {font-family: var(--eng); letter-spacing: 0;}


.search_none #visual .v_lnb{display:none}


/*** 공통 css ***/
.basic_cont{max-width:1530px; width: 90%; margin:150px auto 180px;}


/* 개인정보 처리방침 */
.policy_cont{position:relative; overflow:hidden; font-size:1rem;}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--black);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px; letter-spacing:var(--letter-spacing-default); font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important; letter-spacing:var(--letter-spacing-default);}
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:var(--grayBg); margin:7px 0px 10px 0px; display:block;  letter-spacing:var(--letter-spacing-default); line-height:1.7;}

.privacy_list {width:100%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px solid var(--border); box-sizing:border-box; margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 

/* Responsive Dim */
.responsive-dim {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); z-index: 80; display:none;}
.responsive-dim p {position: absolute;top: 50%; left: 0;right: 0; text-align: center; transform: translate(0,-50%);}
.responsive-dim span {display: block; margin-top: 10px;color: var(--white); font-weight: 600; font-size: 14px; letter-spacing: -0.3pt;}
.responsive-dim i {font-size:40px; color:var(--white);}




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

}

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

}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 비주얼 lnb */
.mobile_snb {max-width: 550px;}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 비주얼 */
#visual {height: 400px;}
#visual .v_txt h2 {margin-top: 5px;}

/* 비주얼 lnb */
.sub_location {display: none;}
.mobile_snb {width: 100%; max-width: 100%;}

#visual .v_lnb {padding: 10px 0;}

.mobile_snb .tbox .box .dropLst .title {padding: 15px 50px 15px 20px;}
.mobile_snb .tbox .box .dropLst .title::after {font-size: 20px; right: 20px; width: 20px; height: 20px;}

.mobile_snb .tbox .box .dropLst .dlst {top: 60px; border-radius: 10px; padding: 15px 20px;}

.mobile_snb .tbox .box.dep1 .title::before {height: calc(100% - 30px);}

	
/* 개인정보 처리방침 */
.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%;}

/* 공통 CSS */
.basic_cont {margin: 80px auto 100px;}

}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 비주얼 */
#visual {height: 300px;}

/* 비주얼 lnb */
.mobile_snb .tbox .box .dropLst .title {padding: 10px 42px 10px 20px;}
.mobile_snb .tbox .box .dropLst .title::after {font-size: 18px; width: 18px; height: 18px;}
.mobile_snb .tbox .box .dropLst .dlst {top: 45px; padding: 15px 20px;}
.mobile_snb .tbox .box.dep1 .title::before {height: calc(100% - 20px);}

/* 공통 CSS */
.basic_cont {margin: 40px auto 60px;}
}

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

}

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

}