@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:550px; display:flex; align-items:flex-end;}
#visual .visual_in{position:absolute; left:50%; top:47%; display:flex; align-items:center; justify-content:center; transform:translateX(-50%); z-index:2; box-sizing:border-box;}
#visual .visual_in.cate {top:42%;}
#visual .v_txt {width:100%; text-align:center;}
#visual .v_txt h2 {color:var(--white); font-family:var(--eng); text-transform:uppercase; font-weight:700; letter-spacing:0; transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.3s; animation-fill-mode:both;}
#visual .v_txt p{margin-top:12px; color:var(--white); font-weight:300; 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; z-index:-1;}
#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::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(34,34,34,.3) 0%,rgba(34,34,34,0) 44%,rgba(0,77,161,.05) 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; }
}


/* ???? LNB (????? ???) */
.sub-lnb {position:absolute; left:0; bottom:0; width:100%; height:76px; background:rgba(34,34,34,.2); border-top:1px solid rgba(255,255,255,.2); box-sizing:border-box; z-index:3;}
.sub-lnb .basic_in {width:100%; height:100%;}
.sub-lnb__list {height:100%; overflow:hidden;}
.sub-lnb__list .swiper-wrapper{display:flex; height:100%;}
.sub-lnb__list .swiper-slide {flex:1; width:auto; height:100%; border-right:1px solid rgba(255,255,255,.2); box-sizing:border-box;}
.sub-lnb__list .swiper-slide:first-child {border-left:1px solid rgba(255,255,255,.2);}
.sub-lnb__list .swiper-slide a {display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--white); font-weight:400; box-sizing:border-box; transition:all .3s ease-out;}
.sub-lnb__list .swiper-slide a:hover {background:var(--white); color:var(--main);}
.sub-lnb__list .swiper-slide.is-active {background:var(--main); border-color:var(--main);}
.sub-lnb__list .swiper-slide.is-active a {font-weight:600;}
.sub-lnb__list .swiper-slide:hover a {font-weight:600;}

.lnb_none .sub-lnb {display: none;}



/* ????? lnb */
.mobile_snb {display:none;}


/*** ???? css ***/
#contents {margin:0 auto;}

.basic_cont {max-width:1590px; width:94%; margin:0 auto;}
.contents_in {position:relative; padding:150px 0 180px 0;}
.contents_in.no {padding-bottom:0;}

br.block {display:block;}


/* ??????2(???) */
.gallery_roll{position:relative;}
.gallery_roll:after{content:''; display:block; clear:both;}
.gallery_roll .roll{position:relative;}
.gallery_roll .roll .imgArea{background:#000; overflow: hidden; aspect-ratio: 3 / 2;}
.gallery_roll .roll .imgArea img{width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
.gallery_roll .roll .txtArea{position:absolute; left:0; bottom:0; width:100%; text-align:center; background:rgba(34,34,34,.6); padding:20px; box-sizing:border-box;}
.gallery_roll .roll .txtArea h4{font-weight:400; color:var(--white); line-height:150%; font-size:1.25rem;}
.gallery_roll .slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999; width: 30px; height: 30px; opacity: 1; left: auto; right:auto; bottom: auto; top:50%; margin-top:-15px;}
.gallery_roll .slick-arrow:hover{opacity:0.5;}
.gallery_roll .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; left:30px;}
.gallery_roll .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto; right:30px;}

.gallery_nav{margin:30px -2px 0; width:calc(100% + 4px);}
.gallery_nav:after{content:''; display:block; clear:both;}
.gallery_nav .roll{margin:0 2px; cursor:pointer; background-color:#000; overflow: hidden;}
.gallery_nav .roll .txtArea{display: none;}
.gallery_nav .roll .imgArea{overflow: hidden; aspect-ratio: 3 / 2;}
.gallery_nav .roll .imgArea img{opacity:0.5; width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
.gallery_nav .roll.slick-current .imgArea img{opacity:1;}




/* ??????? */
.sitemap_cont {display:flex; flex-wrap:wrap;}
.sitemap_cont dl {width:calc((100% - 90px) / 4); margin: 0 30px 50px 0; text-align:center; text-align:center; border-top: 2px solid var(--main);}
.sitemap_cont dl:nth-child(4n) {margin-right:0;}
.sitemap_cont dl dt{border-bottom:1px solid var(--border); font-weight:500; color:var(--black); letter-spacing:var(--letter-spacing-default); padding:20px 0; line-height:120%; font-size:1.125rem;}
.sitemap_cont dl dd {border-bottom:1px solid var(--border); }
.sitemap_cont dl dd a{display:block; width:100%; padding:17px 0; line-height:120%; letter-spacing:var(--letter-spacing-default); transition:all 0.3s linear; font-size:1rem;}
.sitemap_cont dl dd a:hover{color:var(--main); transition:all 0.3s linear; font-weight:500;}



/* ?????, ?????????????? */
.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%; display:flex; flex-wrap:wrap; gap:10px; padding:4%; border:1px solid var(--border); box-sizing:border-box; margin-bottom:30px;}
.privacy_list li {width:50%;}
.privacy_list li a {font-weight:500; color:var(--black);} 



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

.stxt br, .stxt > p br {display:none;}

}

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

#visual {height:480px;}	

/*** ???? css ***/
.subTit br{display:none;}
.subTxt br{display:none;}
.stxt br{display:none;}
.txt br{display:none;}


.sub-lnb{height:70px;}


/* ??????2(???) */
.gallery_roll{}
.gallery_roll .roll .txtArea{padding:15px;}
.gallery_roll .slick-arrow{width: 25px; height: 25px; margin-top:-12px;}
.gallery_roll .slick-prev{left:20px;}
.gallery_roll .slick-next{right:20px;}
.gallery_nav{margin:20px -2px 0; width:calc(100% + 4px);}
.gallery_nav .roll{margin:0 2px;}



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


#visual {height:400px;}	
#visual .v_txt p {margin-top: 8px;}

.sub-lnb {height:60px;}
.sub-lnb__list .swiper-slide a{padding:0 20px;}


/*** ???? css ***/
.contents_in {padding:80px 0 110px 0;}


/* ??????? */
.sitemap_cont dl {width:calc((100% - 60px) / 4); margin: 0 20px 30px 0;}
.sitemap_cont dl:nth-child(4n) {margin-right:0;}
.sitemap_cont dl dt{padding:15px 0;}
.sitemap_cont dl dd a{padding:12px 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 {height:300px;}	
#visual .visual_in, #visual .visual_in.cate {top:41%;}

.sub-lnb {display:none;}


/* ????? lnb */
.mobile_snb {position:relative; width:100%; display:block; background: rgba(34, 34, 34, .2); box-sizing: border-box;}
.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; color:var(--white); line-height:50px; letter-spacing:var(--letter-spacing-default); box-sizing:border-box; padding:0 35px 0 5%; 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:"\e313"; display:block; width:24px; height:24px; font-size:24px; font-family:var(--icon); font-weight:normal; line-height:1;color:var(--white); position:absolute; right:5%; top:50%; margin-top: -12px; transition:all .3s linear; opacity: 1;}
.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.hidden {display:none;}
.mobile_snb .tbox .box .dropLst .dlst ul li a{display: block; padding: 0 3%; 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);}


/*** ???? css ***/
.contents_in {padding:50px 0 60px 0;}


/* ??????2(???) */
.gallery_roll{}
.gallery_roll .roll .txtArea{padding:10px;}
.gallery_roll .slick-prev{left:10px;}
.gallery_roll .slick-next{right:10px;}
.gallery_nav{margin:10px -2px 0; width:calc(100% + 4px);}
.gallery_nav .roll{margin:0 2px;}


/* ??????? */
.sitemap_cont dl {width:calc((100% - 40px) / 3); margin: 0 20px 30px 0;}
.sitemap_cont dl:nth-child(4n) {margin-right:20px;}
.sitemap_cont dl:nth-child(3n) {margin-right:0;}
.sitemap_cont dl dt{padding:12px 0;}
.sitemap_cont dl dd a{padding:10px 0;}



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

#visual {height:260px;}	
#visual .visual_in, #visual .visual_in.cate {top:40%;}
}