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







.header .headerIn .logo a svg path,
.header .headerIn .logo a svg rect {fill:var(--black);}
.header .headerIn .topUtil button path,
.header .headerIn .topUtil button rect {fill:var(--black);}
.header .gnb ul li > a {color:var(--black);}


#visual { padding: 30px 0 0; box-sizing: border-box; }
#visual .visual_in { display: flex; flex-direction: column; }
#visual .visual_in .basic_in { max-width: 1720px; }
#visual .v_txt h2 { text-align: center; color: var(--black); padding: 0 0 60px; }
#visual .v_bg { position: relative; width: 100%; height: 698px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#visual .v_bg .bg { position: relative; width: 55.73%; max-width: 1070px; min-width: 280px; height: 598px; border-radius: var(--borderR100); overflow: hidden; background-image: var(--bg-img); background-position: center center; background-size: cover; background-repeat: no-repeat; transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1), height 1.4s cubic-bezier(0.4, 0, 0.2, 1), border-radius 1.4s cubic-bezier(0.4, 0, 0.2, 1), max-width 1.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: width, height, border-radius; }
#visual .v_bg .bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background-color: var(--bk000); opacity: 0.4; pointer-events: none; transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
#visual .v_bg.is-open .bg { width: 100%; max-width: none; height: 100%; border-radius: 0; transition-delay: 0.2s; }
#visual .v_bg.is-open .bg::before { opacity: 0; transition-delay: 0.2s; }


.mainVisualScroll-area { opacity: 0; transition: opacity 0.5s ease-in-out; }
.is-open .mainVisualScroll-area, .is-open.mainVisualScroll-area { opacity: 1; transition-delay: 1.2s; }
.mainVisualScroll { position: absolute; bottom: 50px; left: 50%; margin-left: -13px; display: block; width: 26px; height: 36px; box-sizing: border-box; border: 2px solid rgba(255,255,255,0.5); border-radius: 30px; overflow: hidden; animation: scrollDown1 2s ease-in-out infinite; z-index: 90; }
.mainVisualScroll::before { content: ''; position: absolute; left: 50%; top: 60%; width: 4px; height: 4px; border-radius: 50%; background: var(--white); margin-left: -2px; margin-top: -2px; animation: scrollDown2 2s ease-in-out infinite; }
@keyframes scrollDown1 { 0% { opacity: 0.1; } 50% { opacity: 1; } 100% { opacity: 0.1; } }
@keyframes scrollDown2 { 0% { transform: translateY(-30px); } 50% { transform: translateY(0); } 100% { transform: translateY(30px); } }




.mobile_snb {display:none !important;}
/* 비주얼 lnb */
.visual_lnb { margin: 0 0 60px; }
.visual_lnb dl { display: flex; align-items: center; gap: 22px; }
.visual_lnb dl dt a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--borderR10); background: rgba(0, 112, 74, 0.1); font-size: 0; flex-shrink: 0; transition: all 0.3s linear;}
.visual_lnb dl dt a:hover { background: var(--main); transition: all 0.3s linear;}
.visual_lnb dl dt a::before {content:'\e58a'; font-family:var(--icon); font-size:26px; line-height:1;  color:var(--main); font-weight:300; flex-shrink:0; transition:transform 0.3s linear, color 0.3s linear;}
.visual_lnb dl dt a:hover::before {color:var(--white); transition: all 0.3s linear;}
.visual_lnb dl dd { display: flex; align-items: center; position: relative; flex-shrink: 0; }
.visual_lnb dl dd + dd { padding-left: 22px; }
.visual_lnb dl dd + dd::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: var(--border); }
.visual_lnb dl dd .txt { position: relative; display: flex; align-items: center; gap: 6px; max-width: 100%; color: var(--basic); font-family: var(--kor); font-size: 0.889rem; font-weight: 400; font-style: normal; line-height: 1.75; letter-spacing: -0.64px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: color 0.3s linear; }
.visual_lnb dl dd .txt:hover { color: var(--black); }
.visual_lnb dl dd .txt::after { content: '\e7cd'; display: block; font-family: var(--icon); font-size: 18px; line-height: 1; color: var(--basic); font-weight: 300; flex-shrink: 0; transition: transform 0.3s linear, color 0.3s linear; }
.visual_lnb dl dd .txt.on { color: var(--black); }
.visual_lnb dl dd .txt.on::after { transform: rotate(180deg); color: var(--main); }
.visual_lnb dl dd .dlst { position: absolute; top: calc(100% + 10px); left: 0; z-index: 999; min-width: 180px; width: max-content; max-width: 280px; background-color: var(--white); padding: 14px 18px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--borderR10); box-shadow: var(--shadow); visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
.visual_lnb dl dd .dlst.on { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.visual_lnb dl dd .dlst ul li { padding: 0 0 8px; }
.visual_lnb dl dd .dlst ul li:last-child { padding: 0; }
.visual_lnb dl dd .dlst ul li a { display: block; font-family: var(--kor); font-size: 0.889rem; font-weight: 400; line-height: 1.75; letter-spacing: -0.64px; color: var(--basic); transition: color 0.3s linear; }
.visual_lnb dl dd .dlst ul li a:hover { color: var(--main); }
.visual_lnb dl dd .dlst ul li a.on { color: var(--main); font-weight: 500; }
.search_none .visual_lnb dl dd:last-child { display: none; }





/*** 공통통 css ***/
.w1070 {max-width: 1070px; margin: 0 auto;}
.container {padding:108px 0 0;}
.basic_cont {}

.sub_tit { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin:0 0 60px; width:100%;}
.sub_tit .fs16E { color: var(--main); font-weight: 600; text-transform: uppercase; }
.sub_tit .fs50 { color: var(--black); }
.sub_tit .fs22 {margin:10px 0 0; font-weight: 400; color: var(--black);}
.dep_tit { display: flex; flex-direction: column; align-items: center; gap: 15px; padding-top: 36px; position: relative; text-align: center; margin:0 0 40px;}
.dep_tit::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--main); }
.dep_tit .fs40 { color: var(--black);  font-weight: 700;}
.dep_tit .fs32 { color: var(--black); font-weight: 300; }

.sub_anchor_tab { position: fixed; left: 0; top: 0; width: 100%; height: 66px; z-index: var(--z-subtop); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-100%); transition: opacity 0.3s linear, visibility 0.3s linear, transform 0.3s linear, top 0.4s; overflow: hidden; background: var(--main); border-radius: 0 0 var(--borderR30) var(--borderR30); text-align:center;}
.sub_anchor_tab.is-show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.sub_anchor_tab .sub_anchor_tab_in {display:block; white-space: nowrap; /* display: flex !important; flex-direction: row !important; align-items: flex-start; justify-content: center; */ font-size:0; text-align:center; width: 100% !important; height: 100%; box-sizing: border-box;  }
.sub_anchor_tab .sub_anchor_tab_in a { position: relative; display: inline-block !important; padding: 18px 2px; margin: 0 20px; font-family: var(--kor); font-size: 1rem; font-weight: 400; line-height: 1.667; letter-spacing: -0.72px; color: var(--white); opacity: 0.5;  transition: all 0.3s linear; width: auto !important; flex-shrink: 0 !important; box-sizing:border-box;}
.sub_anchor_tab .sub_anchor_tab_in a::after { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 3px; background: var(--white); transition: all 0.3s linear; }
.sub_anchor_tab .sub_anchor_tab_in a.on { font-weight: 600; opacity: 1; transition: all 0.3s linear; }
.sub_anchor_tab .sub_anchor_tab_in a.on::after { width: 100%; transition: width 0.3s linear; }
.sub_anchor_tab .sub_anchor_tab_in a.hover { opacity: 1; transition: all 0.3s linear; }
.sub_anchor_tab .sub_anchor_tab_in a.hover::after { width: 100%; transition: width 0.3s linear; }







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






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

.sub_tit { margin-bottom: 50px; }

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

#visual .v_bg { height: 580px; }
#visual .v_bg .bg { height: 500px; }

.sub_tit { margin-bottom: 45px; }
.dep_tit { margin-bottom: 35px; }

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


.sub_tit { margin-bottom: 40px; gap: 8px; }
.sub_tit .fs22 { margin-top: 8px; }
.dep_tit { margin-bottom: 30px; padding-top: 30px; gap: 12px; }
.sub_anchor_tab { height: 56px; }
.sub_anchor_tab .sub_anchor_tab_in { /* gap: 24px;  */border-radius: 0 0 var(--borderR20) var(--borderR20); }
.sub_anchor_tab .sub_anchor_tab_in a { padding: 14px 2px; font-size: 1rem; }


.container {padding:90px 0 0;}

#visual .visual_lnb { margin: 0 0 40px; }
#visual .v_bg { height: 460px; }
#visual .v_bg .bg { height: 380px; border-radius: var(--borderR60); }
#visual .v_bg.is-open .bg { width: 100%; height: 100%; border-radius: 0; }


.visual_lnb dl { gap: 16px; }
.visual_lnb dl dt a { width: 36px; height: 36px; }
.visual_lnb dl dt a svg { width: 22px; height: 22px; }
.visual_lnb dl dd + dd { padding-left: 16px; }
.visual_lnb dl dd .txt { font-size: 0.833rem; }
.visual_lnb dl dd .txt::after { font-size: 16px; }


/* 개인정보처리방침 */
.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){

.container  {padding:80px 0 0 ;}
.sub_tit { margin-bottom: 30px; gap: 6px; }
.sub_tit .fs22 { margin-top: 6px; }
.dep_tit { margin-bottom: 24px; padding-top: 26px; gap: 8px; }
.dep_tit::before { width: 6px; height: 6px; }
.sub_anchor_tab { height: 50px; }
.sub_anchor_tab .sub_anchor_tab_in { /* gap: 16px; */ border-radius: 0 0 var(--borderR15) var(--borderR15); }
.sub_anchor_tab .sub_anchor_tab_in a { padding: 12px 2px; margin:0 12px;}

.mainVisualScroll {bottom:30px;}


#visual { padding:40px 0 0; }
#visual .v_bg { height: 320px; }
#visual .v_bg .bg { width: 60%; height: 240px; border-radius: var(--borderR40); }
#visual .v_bg.is-open .bg { width: 100%; height: 100%; border-radius: 0; }
#visual .v_txt h2 {padding:0 0 40px;}


.visual_lnb{display:none;}
.mobile_snb {display:block !important;}
.mobile_snb.mo_none {display:none !important;}
.mobile_snb .tbox{display:flex; width:100%; position:relative;}
.mobile_snb .tbox .box{flex:1; min-width:0; box-sizing:border-box;}
.mobile_snb .tbox .box .dropLst{position:static; min-width:0;}
.mobile_snb .tbox .box .dropLst .title {display:block; width:100%; font-size:1rem; font-weight: 500; line-height:50px; font-family:var(--kor); box-sizing:border-box; padding:0 40px 0 min(5vw, 25px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; border:1px solid var(--border); background:var(--white); color:var(--basic); letter-spacing:-0.72px;}
.mobile_snb .tbox .box.dep1 + .box.dep2 .dropLst .title {border-left:0;}
.mobile_snb .tbox .box.dep2 + .box.dep3 .dropLst .title {border-left:0;}
.mobile_snb .tbox .box .dropLst .title:after{content:'\e7cd'; display:block; font-size:18px; font-family:var(--icon); line-height:1; position:absolute; right:min(4vw, 25px); top:50%; margin-top:-9px; transition:transform 0.3s linear, color 0.3s linear; color:var(--basic); font-weight:300; transform:rotate(0);}
.mobile_snb .tbox .box .dropLst .title.on{color:var(--main);}
.mobile_snb .tbox .box .dropLst .title.on:after{transform:rotate(180deg); color:var(--main);}
.mobile_snb .tbox .box .dropLst .dlst{display:none; position:absolute; left:0; top:52px; width:100%; background:var(--white); z-index:99999; box-shadow:var(--shadow); border:1px solid var(--border); border-top:0; box-sizing:border-box; padding:14px 18px;}
.mobile_snb .tbox .box .dropLst .dlst ul{display:flex; flex-direction:column; gap:8px;}
.mobile_snb .tbox .box .dropLst .dlst ul li a{display: block; padding:0; font-size:1rem; line-height:1.667; font-family:var(--kor); box-sizing:border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:var(--basic); letter-spacing:-0.72px;}
.mobile_snb .tbox .box .dropLst .dlst ul li a.on{color:var(--main); font-weight:600; background:transparent;}

.search_none .mobile_snb{display: none;}




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





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




}