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

.whiteFoot {background:var(--white) !important;}
.footer {background: var(--grayBg);}

/* Visual */
#visual{position:relative; width:100%; height:620px; background:#000;}
#visual .visual_in{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9999;}
#visual .v_txt{display:flex; flex-direction:column; gap:15px; text-align:left;}
#visual .v_txt p{font-size:0.889rem; line-height:1.75; color:var(--sub); letter-spacing:1.44px; font-family:var(--eng); text-transform:uppercase; transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.3s; animation-fill-mode:both; font-weight:700;}
#visual .v_txt h3{color:var(--white); font-weight:800; transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.5s; animation-fill-mode:both;}
#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;}

@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; }
}



.mobile_snb {display:none;}

/* visual_lnb */
.visual_lnb{position:absolute; left:0; bottom:0; width:100%; z-index:9999;}
.visual_lnb .inner{display:flex; justify-content:space-between; align-items:center; border-top: 1px solid rgba(255, 255, 255, 0.2); gap:20px;}
.lnb {overflow:hidden; flex:1;}
.lnb::after {content:''; width:100%; height:1px; background:var(--border); position:absolute; bottom:0; left:0;}
.lnb .lnb_in ul{display:flex;}
.lnb .lnb_in ul li{width:fit-content; text-align:center; margin-right: 50px;}
.lnb .lnb_in ul li:last-child{margin-right: 0;}
.lnb .lnb_in ul li a{display:block; line-height:70px; color:var(--white); box-sizing:border-box; position:relative; transition:all .3s linear;}
.lnb .lnb_in ul li a:after{content:''; display:block; width:0; height:3px; background:var(--white); position:absolute; left:50%; top:0; transform:translateX(-50%); transition:all .3s linear;}
.lnb .lnb_in ul li:hover a:after{width: 100%;}
.lnb .lnb_in ul li.left_linktop a{font-weight:700;}
.lnb .lnb_in ul li.left_linktop a:after{width: 100%;}

.sub_location{display:flex; align-items:center; gap:0; flex-shrink:0; color:var(--white);}
.sub_location .sub_location_home{display:flex; align-items:center; justify-content:center; color:var(--white); transition:opacity .3s linear;}
.sub_location .sub_location_home:hover{opacity:0.8;}
.sub_location .sub_location_home svg{width:14px; height:14px; display:block;}
.sub_location .fs14{color:var(--white); font-weight:700;}
.sub_location .sub_location_chevron{font-size:18px; color:var(--white); opacity:0.7; margin:0 10px;}



.basic_cont{max-width:1530px; width: 90%; margin:150px auto;}

/* subpad 유틸리티 클래스 */
.subpad {padding:150px 0; box-sizing:border-box;}
.subpad_t {padding-top:150px; box-sizing:border-box;}
.subpad_b {padding-bottom:150px; box-sizing:border-box;}

/* 서브타이틀 */
#subtitle{text-align:center; padding-bottom:50px; color:var(--black);}


.border_btn {display: flex; align-items: center; padding-bottom:18px; position: relative; width:160px}
.border_btn .button-text-container {position:relative; overflow:hidden; display:flex; align-items:center; flex:1;}
.border_btn .button-text {font-size:0.889rem; font-weight:600; color:var(--white); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); white-space:nowrap;}
.border_btn .button-text-original {display:block;}
.border_btn .button-text-hover {display:block; position:absolute; transform:translateY(30px);}
.border_btn .button_icon {display: flex;;}
.border_btn .button_icon span {font-size:20px; color:var(--white); font-variation-settings: 'FILL' 1;}
.border_btn:hover .button-text-original {transform:translateY(-30px);}
.border_btn:hover .button-text-hover {transform:translateY(0);}
.border_btn::after {content:''; position:absolute; bottom:0; left:0; height:1px; background:var(--white); width:0; transition:width 0.4s cubic-bezier(0.34,1.56,0.64,1); z-index:2}
.border_btn::before {content:''; position:absolute; bottom:0; left:0; height:1px; background:var(--white); width:100%; transition:width 0.4s cubic-bezier(0.34,1.56,0.64,1); opacity:0.3}
.border_btn:hover::after {width:100%;}



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

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


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


}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 서브타이틀 */
#subtitle{padding-bottom:30px;}
#subtitle h3{font-size:2.3rem;}

/* Visual */
#visual{height:450px;}
#visual .v_txt h3{font-size:2.8rem;}

/* visual_lnb */
.lnb .lnb_in ul li{margin-right:30px;}
.sub_location .sub_location_chevron{margin:0 6px;}

/* subpad 유틸리티 클래스 */
.subpad {padding:100px 0;}
.subpad_t {padding-top:100px;}
.subpad_b {padding-bottom:100px;}

.basic_cont{margin:100px auto;}


/* border_btn */
.border_btn {padding-bottom:10px; width:130px;}
.border_btn .button_icon span {font-size:18px;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* Visual */
#visual{height:280px;}
#visual .visual_in{top:55%;}
#visual .v_txt {gap:5px;}

/* visual_lnb */
.visual_lnb{display:none;}

.mobile_snb {display:block;}
.mobile_snb .tbox{display:flex;}
.mobile_snb .tbox .box{width:50%; box-sizing:border-box;}
.mobile_snb .tbox .box .dropLst{position: relative;}
.mobile_snb .tbox .box .dropLst .title{display:block; font-size:1rem; font-weight: 700; line-height:50px; letter-spacing:var(--letter-spacing-default); box-sizing:border-box; padding:0 50px 0 30px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; position: relative;}
.mobile_snb .tbox .box .dropLst .title:after{content:''; display:block; width:18px; height:18px; background:url('/jp/img/lnb_arrow_w.png') no-repeat center/100% auto; position:absolute; right:30px; top:50%; margin-top: -9px; transition:all .3s linear; opacity: 1;}
.mobile_snb .tbox .box.dep1 .dropLst .title:after{background-image:url('/jp/img/lnb_arrow_on.png');}
.mobile_snb .tbox .box.dep1 .dropLst .title{background:var(--white); color:var(--main);}
.mobile_snb .tbox .box.dep2 .dropLst .title{background:var(--main); color:var(--white);}
.mobile_snb .tbox .box .dropLst .title.on{}
.mobile_snb .tbox .box .dropLst .title.on:after{transform:rotate(180deg);}
.mobile_snb .tbox .box .dropLst .dlst{display:none; position: absolute; left: 0; top:50px; width: 200%; background:var(--white); z-index: 99999; box-shadow:0 20px 20px rgba(0,0,0,.05);}
.mobile_snb .tbox .box.dep2 .dropLst .dlst{left: -100%;}
.mobile_snb .tbox .box .dropLst .dlst ul{}
.mobile_snb .tbox .box .dropLst .dlst ul li{}
.mobile_snb .tbox .box .dropLst .dlst ul li a{display: block; padding: 0 5%; font-size:1rem; line-height:50px; letter-spacing:var(--letter-spacing-default); box-sizing:border-box; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.mobile_snb .tbox .box .dropLst .dlst ul li a.on{background:var(--main); color:var(--white);}

/* subpad 유틸리티 클래스 */
.subpad {padding:50px 0;}
.subpad_t {padding-top:50px;}
.subpad_b {padding-bottom:50px;}

.basic_cont{margin:60px auto;}

/* border_btn */
.border_btn {width:110px;}
}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){

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




}