@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:640px; background:#000; display:flex; flex-wrap:wrap; align-content:flex-end; }
#visual  {position:relative; }
#visual  .scr_arr {display:block; position: absolute; right: 50%; margin-right:-675px; top: 50%; transform: translateY(-50%); z-index: 99;}
#visual  .scr_arr span {display:block; width: 40px; height: 70px; border-radius: 30px; border: 1px solid rgba(255,255,255,.3); overflow: hidden; box-sizing: border-box; position: relative; transition: all 0.3s linear;}
#visual  .scr_arr span:after {content: '\ead0'; display: block; font-size:24px; font-family:var(--icon); position: absolute; left: 50%; top: 50%; margin-left: -12px; margin-top: -15px; animation: upDown 1.5s ease-in-out infinite; color:var(--white); font-weight:300;}
#visual  .scr_arr:hover span {border: 1px solid rgba(255,255,255,0.7); transition: all 0.3s linear;}

@keyframes upDown {
    0% {
        /* opacity: 0.1; */
        transform: translateY(-40px);
    }

    50% {
        opacity: 1;
        transform: translateY(40%);
    }

    100% {
        /* opacity: 0.1; */
        transform: translateY(45px);
    }
}


/* #visual .visual_in {position:absolute; top:45%; width:100%; left:50%; margin-left:-675px;} */
#visual .v_txt{text-align:left;}
#visual .v_txt h3{color: var(--white); font-size: 2.777rem; font-weight: 700; line-height: 130%;;  opacity:0; filter: blur(20px); animation:v_tit 1.0s 0.3s; animation-fill-mode:both; margin-bottom:150px;}

#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 3s ease-in-out;}

@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_tit {
	0% { opacity:0; filter: blur(20px); }
	100% { opacity:1; filter: blur(0); }
}

/* 비주얼 lnb */
.visual_lnb{position: absolute; right: 50%; top:585px; z-index:999; margin-right:-675px;}
.visual_lnb dl{display: flex; align-items:center;}
.visual_lnb dl dt{}
.visual_lnb dl dt a {font-size:0; display:block;}
.visual_lnb dl dd{position:relative; display:flex; flex-wrap:wrap; align-items:center; }
.visual_lnb dl dd:before{content:''; display:block; width:1px; height:15px; background:rgba(255,255,255,.2); position:relative; margin:0 20px;}
.visual_lnb dl dd .txt{position: relative; padding-right:32px; box-sizing:border-box; font-size:1rem; color:rgba(255,255,255,.7); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.visual_lnb dl dd .txt:after{content:''; display:block; width:22px; height:22px; box-sizing:border-box; border:1px solid rgba(255,255,255,.4); border-radius:5px; background:url("/img/expand_more.svg")no-repeat center; position:absolute; top:5px; right:0; transition:all 0.3s ease-in-out;}
.visual_lnb dl dd .txt.on:after{transform:rotate(180deg); transition:all 0.3s ease-in-out;}
.visual_lnb dl dd .dlst{position: absolute; z-index: 999; margin: 10px 0 0; width: 90%; min-width:180px; background-color: var(--white); padding: 10px 15px; box-sizing:border-box; display: none; box-shadow:5px 5px 15px rgba(0,0,0,0.05); top:35px;}
.visual_lnb dl dd .dlst.on{display: block;}
.visual_lnb dl dd .dlst ul{}
.visual_lnb dl dd .dlst ul li{padding: 0 0 11px; line-height: 130%;}
.visual_lnb dl dd .dlst ul li.link span {font-size:14px; margin:-2px 0 0 4px;}
.visual_lnb dl dd .dlst ul li:last-child{padding: 0;}
.visual_lnb dl dd .dlst ul li a{font-size:0.938rem; transition:all .2s linear; line-height: inherit;}
.visual_lnb dl dd .dlst ul li a.on{color:var(--main);}
.search_none .visual_lnb dl dd:last-child{display: none;}


/* PC lnb */
.company_wrapper .lnb {position:sticky !important; top:0px !important; width:100%; overflow:hidden;  z-index: 9; top:0; background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(2.5px);}


.lnb{width:100%; overflow:hidden; position: absolute; z-index: 9; top:0; background: rgba(0, 0, 0, 0.10); backdrop-filter: blur(2.5px); top:560px; transition:all 0.4s;}
.company_wrapper .header.fixed + .mo_menu + #sitemap + #visual + .container .lnb {top:106px !important; transition:all 0.4s;}

.lnb .lnb_in {max-width:1350px; width:90%; margin:0 auto;}
.lnb .lnb_in ul{display:flex;}
.lnb .lnb_in ul li{width: auto; margin:0 20px;}
.lnb .lnb_in ul li:first-of-type {margin-left:0;}
.lnb .lnb_in ul li a{display:block; color: rgba(255,255,255,0.7); font-weight: 600; line-height:177.778%; padding:24px 0; transition:all .3s ease-in-out;}
.lnb .lnb_in ul li.link span {font-size:16px; line-height:inherit; margin:-2px 0 0 4px; vertical-align:middle; }
.lnb .lnb_in ul li.left_linktop a{color:var(--white); transition:all .3s ease-in-out;}
.lnb .lnb_in ul li.active a{color:var(--white); transition:all .3s ease-in-out;}

.lnb .lnb_in ul li:hover a{color:var(--white); transition:all .3s ease-in-out;}
.lnb .lnb_in ul li a:after{content:''; display:block; width:0; height:3px; background:var(--white); position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:all .3s ease-in-out;}
.lnb .lnb_in ul li:hover a:after{width: 100%; transition:all .3s ease-in-out;}
.lnb .lnb_in ul li.left_linktop a:after{width: 100%;}
.lnb .lnb_in ul li.active a:after{width: 100%;}

.search_none .lnb{display: none;}

.lnb.fixed {background:rgba(255,255,255,0.8);}
.lnb.fixed::after {content:''; width:100%; height:1px; background:var(--border); position:absolute; bottom:0; left:0;}
.lnb.fixed .lnb_in ul li a {color:var(--basic);}
.lnb.fixed .lnb_in ul li a:after {background:var(--main);}
.lnb.fixed .lnb_in ul li.active a {color:var(--main);}





/* 모바일 lnb */
.mobile_snb {display:none;}

#contents{margin:0 auto 0;}
#contents{margin-top:-80px !important;}
.search_none #contents{margin: 0 auto;}

/* 타이틀 */
#subtitle{padding: 180px 0 50px; text-align:center;}
#subtitle h3{color: var(--black); font-size: 2.777rem; font-style: normal; font-weight: 700; line-height:130%;;}




/*** 공통 css ***/
.basic_cont{max-width:1350px; width: 90%; margin:0 auto 200px;}

.subTit{font-size:2.5rem; line-height:120%; font-weight:300; color:var(--black);}
.subTit strong{display:inline; font-weight:700;}
.subTxt{font-size:1.25rem; color:rgba(119,119,119,.8); line-height:150%; font-weight:400;}
.stxt{}

.imgBox img {max-width:100%;}


/* 페이지 스타일 */
.basic_style2{}
.basic_style2 article{padding:70px 0; display:flex; flex-wrap:wrap; border-top:1px solid var(--border);}
.basic_style2 article:last-of-type {padding-bottom:0 !important;}
.basic_style2 .tit_area{width:346px; box-sizing:border-box; padding:0 50px 0 0;}
.basic_style2 .cont_area{width:calc(100% - 346px);}



/* 이용약관, 개인정보취급방침 */
.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; 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;}
.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;  line-height:1.7;}

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



.subpad {padding:180px 0 180px;}
.subpad_b {padding:0 0 180px;}
.subpad_t {padding:180px 0 0;}




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



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

#visual {overflow:hidden;}
#visual .visual_in {left: 0; margin-left: 5%;}
#visual .scr_arr {right:5%; margin-right:0;}

/* 비주얼 lnb */
.visual_lnb {right:5%; margin-right:0;}
.visual_lnb dl{}
.visual_lnb dl dd .dlst{right: 0; width: 100%;}


.basic_style2{}
.basic_style2 .tit_area{width:30%;}
.basic_style2 .cont_area{width:70%;}

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


/* 비주얼 lnb */
.visual_lnb {display:none;}


.subpad {padding:150px 0 150px;}
.subpad_b {padding:0 0 150px;}
.subpad_t {padding:150px 0 0;}


.company_wrapper .header.fixed + .mo_menu + #sitemap + #visual + .container .lnb {top:94px !important; transition:all 0.4s;}

.basic_style2{}
.basic_style2 article{padding:50px 0;}
.basic_style2 .tit_area{padding:0 30px 0 0;}




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

/* 서브탑 */
#visual{height:500px;}
#visual .v_txt{width:100%;}
#visual .v_txt h3 {margin-bottom:130px; font-size:2.22rem;}
#contents{margin-top:-68px !important;}


.company_wrapper .header.fixed + .mo_menu + #sitemap + #visual + .container .lnb {top:77px !important; transition:all 0.4s;}

/* 비주얼 lnb */
.visual_lnb {top: 452px;}
.visual_lnb dl dd .txt:after {top:1px;}

/* PC lnb */
.lnb{top:432px;}
.lnb .lnb_in {}
.lnb .lnb_in ul{}
.lnb .lnb_in ul li{margin:0 15px;}
.lnb .lnb_in ul li a {padding:20px 0 22px;}



/* 타이틀 */
#subtitle {padding:148px 0 40px;}
#subtitle h3 {font-size:2.4rem;}

/*** 공통 css ***/
.basic_cont{margin:0 auto 120px;}

.subTit{font-size:2rem;}
.subTxt{font-size:1.12rem;}
.stxt{font-size:1rem;}


.basic_style2{}
.basic_style2 article{padding:30px 0;}
.basic_style2 .tit_area{width:100%; padding:0 0 16px;}
.basic_style2 .cont_area{width:100%;}


/* 이용약관, 개인정보취급방침 */
.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%;  }

.subpad {padding:100px 0 100px;}
.subpad_b {padding:0 0 100px;}
.subpad_t {padding:100px 0 0;}

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

#contents{margin-top:-50px !important;}
/* 서브탑 */
#visual{height:300px;}
#visual .v_txt h3 {margin-bottom:95px;}
#visual .scr_arr span {width:30px; height:50px;}
#visual .scr_arr span:after {font-size:20px; margin-left:-10px;}

/* 비주얼 lnb */
.visual_lnb{display:none;}

/* PC lnb */
.lnb{display: none;}


/* 모바일 lnb */
.mobile_snb {display:block; width:100%; position:sticky; top:0; z-index:10;}
.header.fixed + .mo_menu + #sitemap + #visual + .container .mobile_snb {top:63px !important; transition:all 0.4s;}
/* .mobile_snb.none {display:none;} */
.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; box-sizing:border-box; padding:0 40px 0 10%; 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; font-family:var(--icon); font-size:24px; color:var(--white); position:absolute; right:8%; top:0; font-weight:300;}
.mobile_snb .tbox .box.dep1 .dropLst .title:after{color:var(--main);}
.mobile_snb .tbox .box.dep1 .dropLst .title{background:var(--white); color:var(--main);}
.mobile_snb .tbox .box.dep2 .dropLst .title{background:var(--main); color:#fff;}
.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:#fff; 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.link span {font-size:16px; margin:-2px 0 0 4px; line-height: inherit; vertical-align: middle;}

.mobile_snb .tbox .box .dropLst .dlst ul li a{display: block; padding: 0 5%; font-size:1rem; line-height:50px; 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:#fff;}

.search_none .mobile_snb{display: none;}

#contents{margin:0 auto;}

/* 타이틀 */
#subtitle {padding:60px 0 30px;}
#subtitle h3 {font-size:2rem;}

/*** 공통 css ***/
.basic_cont{margin:0 auto 80px;}

.subTit{font-size:1.8rem; line-height: 130%;}
.subTit strong{line-height: 130%;}


.subpad {padding:60px 0 60px;}
.subpad_b {padding:0 0 60px;}
.subpad_t {padding:60px 0 0;}



.basic_style2{}
.basic_style2 .tit_area{padding:0 0 10px;}



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



/* 사이트맵 */
.sitemap_cont dl {width:calc((100% - 20px) / 2); margin: 0 20px 30px 0;}
.sitemap_cont dl:nth-child(4n) {margin-right:20px;}
.sitemap_cont dl:nth-child(3n) {margin-right:20px;}
.sitemap_cont dl:nth-child(2n) {margin-right:0;}

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




}

