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


.footer{border-top: 1px solid var(--border); position:relative; z-index: 1;}

.view_ver #visual{display: none;}
.view_ver .subtitle{display: none;}
.view_ver .visual-lnb{display: none;}
.search_none .visual-lnb{display: none;}

.view_ver .header {background:var(--white);}
.view_ver .header .header_in h1 a svg, .header.fixed .header_in h1 a svg, .header.change-color .header_in h1 a svg {filter: unset;transition:all .5s; }
.view_ver .header .header_in .top_util ul li a svg, .header.fixed .header_in .top_util ul li a svg, .header.change-color .header_in .top_util ul li a svg {filter: unset;transition:all .5s; }
.view_ver .header .header_in .top_util ul li .tit, .header.fixed .header_in .top_util ul li .tit, .header.change-color .header_in .top_util ul li .tit {color:var(--black);transition:all .5s; }
.view_ver .header .gnb ul li > a, .header.fixed .gnb ul li > a, .header.change-color .gnb ul li > a {color:var(--black); transition:all .5s; }





/* ¼­ºê ºñÁÖ¾ó ¡¤ LNB (ÇDZ׸¶ ³ëµå 24297:2440 ±âÁØ) */
@keyframes sub-visual-bg-zoom { 0% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes sub-visual-fade-up { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes sub-visual-lnb-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
#visual { position:relative; z-index:2; box-sizing:border-box; height: 560px;}
#visual .v_bg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow: hidden;}
#visual .v_bg .bg { position: absolute; left: 0; top:0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; transform-origin: center center; transform: scale(1.1); animation: sub-visual-bg-zoom 3s ease-in-out forwards; }
#visual .v_txt { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); z-index: 9; text-align: left; display: flex; flex-direction: column; gap:10px;}
#visual .v_txt h2{color: var(--white); font-family: var(--eng); opacity: 0; animation: sub-visual-fade-up 0.65s cubic-bezier(0.33, 1, 0.68, 1) 0.15s forwards;}
#visual .v_txt p{color: var(--basic-w); opacity: 0; animation: sub-visual-fade-up 0.65s cubic-bezier(0.33, 1, 0.68, 1) 0.28s forwards;}
@media (prefers-reduced-motion: reduce) {
#visual .v_bg .bg { animation: none; transform: scale(1); }
#visual .v_txt h2, #visual .v_txt p { animation: none; opacity: 1; transform: none; }
.visual-lnb { animation: none; opacity: 1; }
.subtitle h3 { animation: none; opacity: 1; transform: none; }
}


.visual-lnb { width:100%; backdrop-filter:blur(17.5px); -webkit-backdrop-filter:blur(17.5px); background:rgba(29,32,136,0.7); box-sizing:border-box; position: sticky; top:0; margin-top: -68px; transition: top .4s; z-index:10; opacity: 0; animation: sub-visual-lnb-fade-in 0.55s cubic-bezier(0.33, 1, 0.68, 1) 0.38s forwards; }
.visual-lnb.on{background:var(--main);}

.header.fixed + .mo_menu + #grayLayer + #siteMapLayer + .container .visual-lnb{top:80px; transition: top .4s;}

.visual-lnb__inner { display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; box-sizing:border-box; max-width:1590px; margin:0 auto; width:90%; }
.visual-lnb__home { position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:68px; height:68px; border-left:1px solid rgba(255,255,255,0.15); border-right:1px solid rgba(255,255,255,0.15); color:var(--white); text-decoration:none; transition:background 0.25s ease; }
.visual-lnb__home:hover { background:var(--main); }
.visual-lnb__home::before { content:'\e58a'; font-family:var(--icon); font-weight:400; font-style:normal; font-size:28px; line-height:1; display:block; color:var(--white); }
.visual-lnb__cell { position:relative; flex-shrink:0; box-sizing:border-box; width: 100%; max-width:300px; height:68px; border-right:1px solid rgba(255,255,255,0.15); }
.visual-lnb .visual-lnb__toggle.fs18 { color:var(--basic-w); line-height:166.667%; }
.visual-lnb__toggle { display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; width:100%; height:68px; margin:0; padding:0 25px; border:0; background:transparent; cursor:pointer; font-family:inherit; text-align:left; letter-spacing:var(--letter-spacing-default); color:rgba(255,255,255,0.8); transition:color 0.25s ease; }
.visual-lnb__toggle:hover { color:var(--white); }
.visual-lnb__toggle::after { content:'\e5c5'; flex-shrink:0; font-family:var(--icon); font-weight:400; font-style:normal; font-size:22px; line-height:1; display:block; color:inherit; transition:transform 0.25s ease; }
.visual-lnb__cell.is-open .visual-lnb__toggle::after { transform:rotate(180deg); }
.visual-lnb__label { overflow:hidden; max-width:calc(100% - 30px); white-space:nowrap; text-overflow:ellipsis; letter-spacing: var(--letter-spacing-default);}
.visual-lnb__panel { position:absolute; left:0; top:100%; z-index:30; box-sizing:border-box; width:100%; margin:0; padding:0; list-style:none; visibility:hidden; opacity:0; transform:translateY(-6px); transition:opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; background:var(--white); border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border); box-shadow:0 8px 24px rgba(17,17,17,0.12); }
.visual-lnb__cell.is-open .visual-lnb__panel { visibility:visible; opacity:1; transform:translateY(0); }
.visual-lnb__panel li { margin:0; padding:0; border-bottom:1px solid var(--border); }
.visual-lnb__panel li:last-child { border-bottom:0; }
.visual-lnb__panel a { display:flex; align-items:center; box-sizing:border-box; padding:17px 25px; font-size:0.889rem; font-weight:400; line-height:175%; letter-spacing:var(--letter-spacing-default); color:rgba(17,17,17,0.7); text-decoration:none; transition:background 0.2s ease, color 0.2s ease; }
.visual-lnb__panel a:hover {color:var(--main); background:var(--grayBg); }
.visual-lnb__panel a.is-current { font-weight:700; color:var(--main); background:var(--grayBg); }



main.container { position:relative; z-index:2; }

#contents { position:relative; z-index:20; }
.subtitle{padding: 100px 0 60px;}
.subtitle h3{font-weight: 800; color: var(--black); letter-spacing: var(--letter-spacing-title); opacity: 0; animation: sub-visual-fade-up 0.65s cubic-bezier(0.33, 1, 0.68, 1) 0.5s forwards;}


.subpad{padding: 100px 0; box-sizing: border-box;}
.subpad_t{padding: 100px 0 0; box-sizing: border-box;}
.subpad_b{padding: 0 0 100px; box-sizing: border-box;}


.subpad2{padding: 50px 0; box-sizing: border-box;}
.subpad2_t{padding: 50px 0 0; box-sizing: border-box;}
.subpad2_b{padding: 0 0 50px; box-sizing: border-box;}


.dot-list{display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 100%;}
.dot-list li{padding-left: 10px; box-sizing: border-box; position: relative; color: var(--basic); letter-spacing: var(--letter-spacing-default); font-size: 1rem; line-height: 165%;}
.dot-list li::before{content: ''; width: 3px; height: 3px; background: var(--main); position: absolute; left: 0; top:11px;}

.border-box{box-sizing:border-box; position: relative;}
.border-box::after{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; border:1px solid var(--border); position: absolute; left: 0; top:0; z-index: 2;}

.img-zoom{display: block;}
.img-zoom img{max-width: 100% !important; height: auto !important;}

.responsive-dim{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);z-index: 100; display:none;}
.responsive-dim .stock-scroll-drag-guide{position: absolute;top: 50%; left: 0;right: 0; text-align: center; transform: translate(0,-50%);}

.stock-scroll-drag-guide {display:flex; justify-content:center;}
	.stock-scroll-drag-guide .stock-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.stock-scroll-drag-guide .stock-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:rgba(255,255,255,0.5); content:""; border-radius:5px;}
	.stock-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:stock-drag-hand 3s both infinite; }
	.stock-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color:#fff; border-radius:5px; opacity:1; }
	.stock-scroll-drag-guide .drag-tail .hand-icon{margin-top: 5px; display: block;}
	@keyframes stock-drag-hand {
		0% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		10% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}

.dep-tit{font-size: 1.778rem; line-height: 130%; letter-spacing: var(--letter-spacing-heading); font-weight: 800; color: var(--black); padding-left: 38px; margin-bottom: 30px; text-align: left; box-sizing: border-box; position: relative;}
.dep-tit::before{content: ''; display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 1.424px rgba(0, 0, 0, 0.04); background: url('/img/dep_dot.png') no-repeat center/contain; position: absolute; left: 0; top:6px;}


.form-cont{padding: 100px 0 200px; max-width:1050px; margin: 0 auto; width: 90%;}


/* ÀÌ¿ë¾à°ü, °³ÀÎÁ¤º¸Ãë±Þ¹æħ */
.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:170%;}

.privacy_list {width:100%; overflow:hidden; clear:both; 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 1500px
*******************************************************************************/
@media all and (max-width:1500px){



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




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


/* ¼­ºê ºñÁÖ¾ó ¡¤ LNB (ÇDZ׸¶ ³ëµå 24297:2440 ±âÁØ) */
#visual {height: 400px;}

.visual-lnb__home { width:60px; height:60px;}
.visual-lnb__home::before { font-size:24px; }
.visual-lnb__cell { max-width:calc((100% - 60px)/2); height:60px; }
.visual-lnb__toggle { height:60px; padding:0 20px; }
.visual-lnb__panel a { padding:17px 20px; }

.visual-lnb{margin-top: -60px;}

.subtitle{padding: 80px 0 40px;}
	

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

.subpad2{padding: 30px 0;}
.subpad2_t{padding: 30px 0 0;}
.subpad2_b{padding: 0 0 30px;}

.dep-tit{font-size: 1.556rem; padding-left: 32px; margin-bottom: 20px;}
.dep-tit::before{width: 24px; height: 24px; top:3px;}


.form-cont{padding: 60px 0 150px;}

/* ÀÌ¿ë¾à°ü, °³ÀÎÁ¤º¸Ãë±Þ¹æħ */
.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){



/* ¼­ºê ºñÁÖ¾ó ¡¤ LNB (ÇDZ׸¶ ³ëµå 24297:2440 ±âÁØ) */
#visual {height: 300px;}
#visual .v_txt { gap:5px;}

.header.fixed + .mo_menu + #grayLayer + #siteMapLayer + .container .visual-lnb{top:64px;}
.visual-lnb{margin-top: -50px;}

.visual-lnb__inner{ border-left: 1px solid rgba(255, 255, 255, 0.15);}
.visual-lnb__home { display: none; }
.visual-lnb__cell { max-width:50%; height:50px; }
.visual-lnb__toggle { height:50px; padding:0 15px; }
.visual-lnb__toggle::after { font-size:20px;}
.visual-lnb__panel a { padding:12px 15px; }

.subtitle{padding: 60px 0 20px;}

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

.subpad2{padding: 20px 0;}
.subpad2_t{padding: 20px 0 0;}
.subpad2_b{padding: 0 0 20px;}

.dot-list{gap: 6px;}
.dot-list li{padding-left: 8px;}
.dot-list li::before{top: 9px;}



.dep-tit{font-size: 1.333rem; padding-left: 25px; margin-bottom: 15px;}
.dep-tit::before{width: 20px; height: 20px; top:1px;}


.form-cont{padding: 40px 0 100px;}


}