@import url("common.css");

/*** Subtop ***/
/* SUBTOP — SIMPLE HEADER */
.wrapper.is-sub-simple #header {background:var(--white);}
.wrapper.is-sub-simple #header .gnb1 > li > a {color:var(--black);}
.wrapper.is-sub-simple #header .logo img.logoC {opacity:1;}
.wrapper.is-sub-simple #header .logo img.logoW {opacity:0;}
.wrapper.is-sub-simple #header .headerUtil button rect,
.wrapper.is-sub-simple #header .headerUtil button path {fill:var(--black);}
.wrapper.is-sub-simple #header .headerUtil button.btnSitemap span {background:var(--black);}

/* SUBTOP — VISUAL */
.wrapper.is-sub-visual #header .gnb1 > li > a {color:var(--white);}
.wrapper.is-sub-visual #header .logo img.logoC {opacity:0;}
.wrapper.is-sub-visual #header .logo img.logoW {opacity:1;}
.wrapper.is-sub-visual #header .headerUtil button rect,
.wrapper.is-sub-visual #header .headerUtil button path {fill:var(--white);}
.wrapper.is-sub-visual #header .headerUtil button.btnSitemap span {background:var(--white);}
.wrapper.is-sub-visual #header.fixed .gnb1 > li > a,
.wrapper.is-sub-visual #header.is-bk .gnb1 > li > a {color:var(--black);}
.wrapper.is-sub-visual #header.fixed .headerUtil button rect,
.wrapper.is-sub-visual #header.fixed .headerUtil button path,
.wrapper.is-sub-visual #header.is-bk .headerUtil button rect,
.wrapper.is-sub-visual #header.is-bk .headerUtil button path {fill:var(--black);}
.wrapper.is-sub-visual #header.fixed .headerUtil button.btnSitemap span,
.wrapper.is-sub-visual #header.is-bk .headerUtil button.btnSitemap span {background:var(--black);}
.wrapper.is-sub-visual #header.fixed .logo img.logoC,
.wrapper.is-sub-visual #header.is-bk .logo img.logoC {opacity:1;}
.wrapper.is-sub-visual #header.fixed .logo img.logoW,
.wrapper.is-sub-visual #header.is-bk .logo img.logoW {opacity:0;}



html.sitemapOpen .wrapper #header {background:var(--white);}
html.sitemapOpen .wrapper #header .gnb1 > li > a {color:var(--black); transition:none;}
html.sitemapOpen .wrapper #header .headerUtil button rect,
html.sitemapOpen .wrapper #header .headerUtil button path {fill:var(--black); transition:none;}
html.sitemapOpen .wrapper #header .headerUtil button.btnSitemap span {background:var(--black);}
html.sitemapOpen .wrapper #header .logo img {transition:none;}
html.sitemapOpen .wrapper #header .logo img.logoC {opacity:1;}
html.sitemapOpen .wrapper #header .logo img.logoW {opacity:0;}



#subtop {position:relative; z-index:var(--z-subtop); padding: 90px 0 0;}
#subtop.subtopVisual {height:100vh; height:100svh; height:var(--vh, 100vh); overflow:hidden; background:var(--bk000); color:var(--white); padding: 0;}
#subtop .subtopBg {position:absolute; inset:0; z-index:0; overflow:hidden;}
#subtop .subtopBg img {display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0.8; transform:scale(1); backface-visibility:hidden; -webkit-backface-visibility:hidden; animation:subtopZoom 6s linear forwards;}
#subtop .subtopIn {position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; height:100%; box-sizing:border-box; padding:90px 0 100px;}
#subtop .subtopTxt {display:flex; flex-direction:column; align-items:flex-start; gap:20px; max-width:880px; opacity:0; transform:translateY(40px); animation:subtopFadeUp 0.9s ease forwards;}
#subtop .subtopCate {color:var(--main);}
#subtop .subtopTit {color:var(--white);}
#subtop .subtopDesc {color:rgba(255,255,255,.8); line-height:166.67%;}
#subtop .subtopDesc strong{display: block; padding-bottom: 8px; color:var(--white); font-weight: 500; line-height:166.67%;}
#subtop .subtopScroll {position:absolute; left:max(5%, calc((100% - 1530px) / 2)); bottom:50px; z-index:2; display:inline-flex; align-items:center; gap:2px; opacity:0; transform:translateY(20px); animation:subtopFadeUp 0.9s ease 0.35s forwards;}
#subtop .subtopScrollMouse {position:relative; display:block; width:25px; height:35px; border:2.5px solid var(--white); border-radius:40px;}
#subtop .subtopScrollMouse::after {content:''; position:absolute; top:6px; left:50%; margin-left:-1.5px; width:3px; height:6px; background-color:var(--white); border-radius:900px; animation:subtopScrollWheel 1.6s ease-in-out infinite;}
#subtop .subtopScrollIco {display:block; width:22px; height:22px; font-style:normal;}
#subtop .subtopScrollIco::before {content:'\ead0'; display:block; width:22px; height:22px; font-family:var(--icon); font-size:22px; line-height:100%; color:var(--white); -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';}
#subtop .subtopScroll:hover {opacity:0.6;}

/* SUBTOP — LOCA */
#subtop .subtopLoca {position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2);}
#subtop.subtopVisual .subtopLoca {position:absolute; left:0; right:0; top:90px;}
#subtop .subtopLocaIn {display:flex; align-items:center;}
#subtop .subtopHome {display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin-right:20px; flex-shrink:0; color:var(--white);}
#subtop .subtopHome i {display:block; width:24px; height:24px; font-style:normal;}
#subtop .subtopHome i::before {content:'\e88a'; display:block; width:24px; height:24px; font-family:var(--icon); font-size:24px; line-height:24px; color:inherit;}
#subtop .subtopHome:hover {color:var(--main);}
#subtop .subtopLine {display:block; width:1px; height:20px; background:rgba(255,255,255,0.2); flex-shrink:0;}
#subtop .depth {position:relative; width:240px; flex-shrink:0;}
#subtop .depth_btn {display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:20px; box-sizing:border-box; color:var(--white); text-align:left;}
#subtop .depth_btn span {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
#subtop .depth_btn::after {content:'\e5cf'; display:block; width:15px; height:15px; font-family:var(--icon); font-size:15px; line-height:15px; color:inherit; opacity:0.7; flex-shrink:0; transition:transform 0.2s linear;}
#subtop .depth.open .depth_btn::after {transform:rotate(180deg);}
#subtop .depth_list {position:absolute; left:0; top:calc(100% + 0px); width:100%; min-width:240px; padding:10px 0; background:var(--white); box-shadow:var(--shadow); z-index:var(--z-dropdown); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity 0.2s linear, transform 0.2s linear, visibility 0.2s linear;}
#subtop .depth.open .depth_list {opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
#subtop .depth_list a {display:block; padding:12px 20px; color:var(--basic); line-height:160%;}
#subtop .depth_list a:hover,
#subtop .depth_list li.on a {color:var(--main);}

/* SUBTOP — VISUAL DEPTH LIST (불투명 글래스) */
.wrapper.is-sub-visual #subtop .depth_list {background:rgba(17,17,17,0.88); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid rgba(255,255,255,0.15); box-shadow:var(--shadow);}
.wrapper.is-sub-visual #subtop .depth_list a {color:rgba(255,255,255,0.75);}
.wrapper.is-sub-visual #subtop .depth_list a:hover,
.wrapper.is-sub-visual #subtop .depth_list li.on a {color:var(--white); background:rgba(255,255,255,0.08);}
.wrapper.is-sub-visual #subtop .depth_list li.on a {color:var(--main);}

/* SUBTOP — SIMPLE */
#subtop.subtopSimple {background:var(--white); color:var(--black);}
#subtop.subtopSimple .subtopLoca {border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
#subtop.subtopSimple .subtopHome {color:var(--basic);}
#subtop.subtopSimple .subtopHome:hover {color:var(--main);}
#subtop.subtopSimple .subtopLine {background:var(--basic); opacity:0.2;}
#subtop.subtopSimple .depth_btn {color:var(--basic);}

.wrapper.search_ver #subtop{display: none !important;}


@keyframes subtopZoom {0%{transform:scale(1);} 100%{transform:scale(1.08);}}
@keyframes subtopFadeUp {0%{opacity:0;transform:translateY(40px);} 100%{opacity:1;transform:translateY(0);}}
@keyframes subtopScrollWheel {0%,100%{transform:translateY(0);opacity:1;} 50%{transform:translateY(6px);opacity:0.35;}}
@media (prefers-reduced-motion:reduce){#subtop .subtopBg img,#subtop .subtopTxt,#subtop .subtopScroll{animation:none; opacity:1; transform:none;} #subtop .subtopScrollMouse::after{animation:none;}}

/*** Contents ***/
/* CONTENTS — PAGE TIT */
.pageTit {margin:0 auto 50px; color: var(--black); text-align: center; font-weight: 700;}


/* CONTENTS — PRIVACY */
.policy_cont {position:relative; color:var(--basic); font-family:var(--eng); letter-spacing:var(--letter-spacing-none); line-height:170%; word-break:keep-all;}
.policy_cont .pageTit {max-width:100%;}
.policy_cont br {display:block;}
.policy_cont strong {font-weight:500; color:var(--black);}
.policy_cont a {color:var(--main); word-break:break-all;}
.policy_cont a:hover {opacity:0.7;}
.policy_cont .cont_title {padding-bottom:18px; font-size:1.222rem; font-weight:500; line-height:154.55%; color:var(--black); letter-spacing:var(--letter-spacing-none);}
.policy_cont .cont_tit {display:block; padding-bottom:12px; font-size:1.222rem; font-weight:700; line-height:154.55%; color:var(--black); letter-spacing:var(--letter-spacing-none); font-family:var(--eng);}
.policy_cont .cont_txt {padding:0 0 40px; color:var(--basic); line-height:170%;}
.policy_cont .cont_txt2 {padding-bottom:40px;}
.policy_cont .cont_box {display:block; margin:12px 0 0; padding:24px 28px; box-sizing:border-box; background:var(--grayBg); border-radius:var(--borderR5); color:var(--basic); letter-spacing:var(--letter-spacing-none); line-height:170%;}
.policy_cont .pri-target {display:block; position:relative; top:-110px; height:0; visibility:hidden;}
.privacy_list {display:flex; flex-wrap:wrap; gap:10px 0; width:100%; margin:0 0 40px; padding:28px 32px; box-sizing:border-box; border:1px solid var(--border); border-radius:var(--borderR5);}
.privacy_list li {width:50%; box-sizing:border-box; padding-right:20px;}
.privacy_list li a {display:inline-block; font-weight:500; color:var(--black); line-height:170%; transition:color .3s;}
.privacy_list li a:hover {color:var(--main);}




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

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

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

/*** Contents ***/
/* CONTENTS — PAGE TIT */
.pageTit {margin:0 auto 40px;}
}
/*******************************************************************************
	@media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* SUBTOP — VISUAL */
#subtop {padding:70px 0 0;}
#subtop.subtopVisual .subtopLoca {top:70px;}
#subtop .subtopIn {padding:70px 0 80px;}
#subtop .subtopTxt {gap:16px; max-width:720px;}
#subtop .subtopScroll {bottom:30px;}

/* SUBTOP — LOCA */
#subtop .subtopHome {width:22px; height:22px; margin-right:16px;}
#subtop .subtopHome i {width:22px; height:22px;}
#subtop .subtopHome i::before {width:22px; height:22px; font-size:22px; line-height:22px;}
#subtop .depth {width:200px;}
#subtop .depth_btn {padding:16px;}
#subtop .depth_list {min-width:200px; padding:8px 0;}
#subtop .depth_list a {padding:10px 16px;}

/*** Contents ***/
/* CONTENTS — PAGE TIT */
.pageTit {margin:0 auto 30px;}

/* CONTENTS — PRIVACY */
.policy_cont .cont_tit {padding-bottom:10px; font-size:1.111rem;}
.policy_cont .cont_txt {padding:0 0 32px;}
.policy_cont .cont_box {padding:20px 22px;}
.policy_cont .pri-target {top:-90px;}
.privacy_list {margin:0 0 32px; padding:22px 24px; gap:8px 0;}
.privacy_list li {padding-right:12px;}
}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* SUBTOP — VISUAL */
#subtop {padding:60px 0 0;}
#subtop.subtopVisual .subtopLoca {top:60px;}
#subtop .subtopIn {padding:60px 0 70px;}
#subtop .subtopTxt {gap:12px; max-width:100%;}
#subtop .subtopScroll {left:5%; bottom:20px;}
#subtop .subtopScrollMouse {width:20px; height:28px;}
#subtop .subtopScrollMouse::after {top:4px; width:2px; height:4px; margin-left:-1px;}
#subtop .subtopScrollIco {width:18px; height:18px;}
#subtop .subtopScrollIco::before {width:18px; height:18px; font-size:18px;}

/* SUBTOP — LOCA */
#subtop .subtopLocaIn{width: 100%; box-sizing: border-box; padding: 0 3% 0 5%;}
#subtop .subtopHome {width:20px; height:20px; margin-right:10px;}
#subtop .subtopHome i {width:20px; height:20px;}
#subtop .subtopHome i::before {width:20px; height:20px; font-size:20px; line-height:20px;}
#subtop .subtopLine {height:16px;}
#subtop .depth {width:auto; flex:1; min-width:0;}
#subtop .depth_btn {padding:12px 10px; gap:6px;}
#subtop .depth_btn::after {width:14px; height:14px; font-size:14px; line-height:14px;}
#subtop .depth_list {left:0; right:0; width:auto; min-width:0; padding:6px 0;}
#subtop .depth_list a {padding:10px 12px;}


/*** Contents ***/
/* CONTENTS — PAGE TIT */
.pageTit {margin:0 auto 20px;}

/* CONTENTS — PRIVACY */
.policy_cont .cont_tit {font-size:1rem; padding-bottom:8px;}
.policy_cont .cont_txt {padding:0 0 28px;}
.policy_cont .cont_box {margin-top:10px; padding:16px 18px;}
.policy_cont .pri-target {top:-80px;}
.privacy_list {margin:0 0 28px; padding:18px 16px;}
.privacy_list li {width:100%; padding-right:0;}
}