@charset "utf-8";
@import url('paperlogy.css');
@import url('SCDream.css');
:root {	
	--paperlogy: 'paperlogy', 'Malgun Gothic', '맑은고딕', sans-serif;
	--SCDream: 'SCDream', 'Malgun Gothic', '맑은고딕', sans-serif;
	--base: #2E2E2E;
	--point-blue: #009CDE;
	--gray: #6C6C6C
}

#quick {z-index: 999;}

/* skip_nav */
#skipnav {position: absolute; top: 0; left: 0; width: 100%; z-index: 999999;}
#skipnav a {position: absolute; top: 0; left: 0; text-align: center; display: block; height: 0; font-size: 0; line-height: 0;}
#skipnav a:hover, #skipnav a:active, #skipnav a:focus {position: relative; margin: 0 auto; width: 100%; height: 100px; color: #ffd84e; font-size: 20px; font-weight: bold; line-height: 100px; background: #261d18; border: 2px solid #ffd84e; outline: none;}

.wrap {margin:0 auto;}
header {font-family: var(--SCDream); --gnb: url(../img/main2025/gnb.svg) no-repeat 0 0;}
header .wrap {max-width: 1600px; width: 100%;}
header h1 a {display: block; line-height: 0;}

header nav .logoTit, header nav .submenu, header nav .close {display:none;}

#gnb>li>a {display: block; width: 24px; height: 24px; font-size: 0; line-height: 0; background: var(--gnb);}
#gnb #lang>a {background-position: calc(-34px * 2) 0;}
#gnb .login>a,
#gnb .mypage>a {background-position: calc(-34px * 3) 0;}
#gnb .logout>a {background-position: calc(-34px * 4) 0;}
#gnb .allmenu>a {background-position: calc(-34px * 5) 0;}

#lang {position: relative; z-index:999;}
#lang>ul {display:none; position:absolute; left:-5px; padding: 10px 8px;}
#lang>a[aria-expanded='true']+ul {display: flex; flex-direction: column; justify-content: center; gap: 1px;}
#lang>a[aria-expanded='true']+ul::before {content: ''; position: absolute; left: 0; right: 0; top: -34px; width: 100%; height: calc(100% + 34px); border-radius: 50px; background: var(--point-blue); z-index: -1;}
#lang>ul>li a {display: block; margin-top: 1px; color: #000; font-size: 14px; font-weight: 500; line-height: 150%;}

#gnb .topSearch {position: relative;}
#gnb .top_search {display:none; position: absolute; right: 30px; top: calc(50% - 21px); height: 42px; width: 211px; border-radius: 50px; background: #F4F4F4;}
#gnb .top_search form {width: 100%; height: 100%;}
#gnb .top_search input[type=text] { padding: 0 50px 0 20px; width: 100%; height: 100%; font-family: var(--paperlogy); font-size: 15px; font-weight: 500; line-height: 150%; border: none; background: none; }
#gnb .top_search input[type=submit] { position: absolute; right: 20px; top: 0; width: 18px; height: 100%; text-indent: -5000px; border: none; background: url(../img/main2025/search.svg) no-repeat center; }
#gnb .topSearch>a.close {display:none; position: absolute; right: 0; top: 0; width: 24px; height: 24px; background: #fff var(--gnb); background-position: -34px 0;}
#gnb .topSearch.on>a.close {display:block;}

footer .wrap {max-width: 1600px; width: 100%;}
footer .link-box {padding: 20px 0; background: #717171;}
footer .link-box .wrap {display: flex; align-items: center; justify-content: space-between; gap: 15px;}
footer .link-box .sns {display: flex; align-items: flex-end; gap: 20px;}
footer .link-box .sns>ul {display: flex; align-items: center; gap: 8px;}
footer .link-box .sns>ul a {display: block; width: 36px; height: 36px; font-size: 0; line-height: 0; text-indent: -5000px; border-radius: 10px; background: #585858 url(../img/main2025/footer-sns.svg) no-repeat;}
footer .link-box .sns>ul .facebook a {background-position: -46px 0;}
footer .link-box .sns>ul .kakao-plus a {background-position: calc(-46px * 2) 0;}
footer .link-box .sns>ul .youtube a {background-position: calc(-46px * 3) 0;}
footer .link-box .other-site {display: flex; gap: 10px;}
footer .link-box .other-site>li{position: relative;}
footer .link-box .other-site>li>button {position: relative; display: inline-block; text-align: left; padding: 10px 20px; min-width: 249px; height: 44px; color: #FFF; font-size: 16px; font-weight: 500; line-height: 150%; border-radius: 8px; border: none; background: #868686; cursor: pointer;;}
footer .link-box .other-site>li>button::after {content: ''; position: absolute; right: 20px; top: calc(50% - 11px / 2); width: 11px; height: 11px; background: url(../img/main2025/footer-site.svg) no-repeat; transition: .3s}
footer .link-box .other-site>li>button[aria-expanded='true']::after{transform: rotate(180deg);}
footer .link-box .other-site>li>ul {position: absolute; left: 0; bottom: 47px; display: none; flex-direction: column; gap: 5px; padding-left: 20px; padding-right: 20px; width: 100%; height: 0; border-radius: 8px; background: #EAEAEA; overflow: hidden;}
footer .link-box .other-site>li>button[aria-expanded='true']+ul {display: flex; padding-top: 20px; padding-bottom: 20px; height: auto;}
footer .link-box .other-site>li>ul a{display: block; color: var(--base); font-size: 16px; font-weight: 500; line-height: 150%;}
footer .con-box {padding: 60px 0; background: #595959;}
footer .con-box .wrap {display: flex; justify-content: space-between; align-items: center; gap: 20px;}
footer .con-box .info>ul {display: flex; gap: 20px; align-items: center; margin-bottom: 48px;}
footer .con-box .info>ul li {display: flex; align-items: center; gap: 20px;}
footer .con-box .info>ul li::after {content: ''; width: 2px; height: 11px; background: #787878;}
footer .con-box .info>ul li:nth-last-child(1)::after {display: none;}
footer .con-box .info>ul a {color: #F0F0F0; font-size: 16px; font-weight: 500; line-height: 150%;}
footer .con-box .info>ul li:nth-child(1)>a {color: #8CC243; font-weight: 700;}
footer .con-box .addr {display: flex; gap: 20px; color: #F0F0F0; font-size: 16px; font-weight: 700; line-height: 150%;}
footer .con-box .addr address {color: #D3D3D3; font-weight: 500;}
footer .con-box .copy {margin-top: 10px; color: #ABABAB; font-size: 13px; font-weight: 500; line-height: 150%;}
footer .con-box .call {display: flex; flex-direction: column; gap: 10px; font-size: 16px;}
footer .con-box .call li {display: flex; gap: 20px; color: #BBB; font-weight: 500; line-height: 150%;}
footer .con-box .call li span {color: #D3D3D3; font-weight: 700;}

/* 실명인증 */
#loginForm {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:600;}
#loginForm>div {position:relative; width:90%; max-width:970px; margin:15% auto; padding:50px; background:#fff;}
#loginForm>div .close {position:absolute; right:0; top:-50px; display:block; padding-left:40px; color:#fff; font-weight:700; font-size:2rem; line-height:29px;}
#loginForm>div .close:before {display:block; content:""; position:absolute; left:0; top:0; width:30px; height:28px; border-radius:50%; border:2px solid #fff;}
#loginForm>div .close:after {display:block; content:"Ｘ"; position:absolute; left:7px; top:1px; font-weight:700; font-size:2rem; color:#fff;}

.realname{overflow:hidden;}
.realname li{float:left; margin:.5% !important; width:49%; border-top:3px solid #333}
.realname li button{text-align:left; width:100%; padding:8% 3%; padding-left:33%; border:1px solid #ccc; border-top:none; background-color:#fff; background-repeat:no-repeat; background-position:12% center; word-break:keep-all }
.realname li button:hover{border-color:#333}
.realname li.ic01 button{background-image:url(/share/images/program/ic_realname01.gif);}
.realname li.ic02 button{background-image:url(/share/images/program/ic_realname02.gif);}
.realname li button .tit{display:block; font-size:2.3rem; color:#333}
.realname li button .txt{display:block; margin-top:15px; padding-left:2px; line-height:150%; color:#484848; letter-spacing:-1px}

/*pc*/
@media all and (min-width:1280px){
	.wrap {position:relative; max-width:1280px;}
	#lnb h2 {display:none;}
	header {position: relative; border-bottom:1px solid rgba(0,0,0,.2); --h:100px;}
	header .wrap {display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--h);}
	#lnb {flex: 1 1 auto; width: 100%; max-width: 1023px;}
	#lnb a {display: block;}
	#lnb .close {display:none !Important;}
	/* #lnb>div {position:relative; margin:auto;} */
	#lnb .mn>ul {display:flex; align-items: center; justify-content: space-between; width: 100%;}
	#lnb .mn>ul>li>a {position:relative; display: flex; align-items: center; margin-top: 2px; height: calc(var(--h) - 2px); color: var(--base); font-size: 20px; font-weight: 500; line-height: 150%;}
	#lnb .submenu {display:none; position:absolute; left:0; right: 0; text-align:left; margin: 0 auto; width:100%; max-width: 1280px; min-height:305px; overflow:hidden; z-index:350;}
	#lnb .submenu>p {position:absolute; width:20%; height:100%; text-align:center; padding-top:200px; font-size:35px; color:#333; font-weight:bold;}
	#lnb .submenu>p:before {display:block; content:""; position:absolute; left:50%; top:60px; width:150px; height:120px; margin-left:-75px; background-image:url('/main/img/inc2020/ic_submenu.png'); background-repeat:no-repeat;}
	#lnb .mn>ul>li.m1 .submenu>p:before {background-position:0 0;}
	#lnb .mn>ul>li.m2 .submenu>p:before {background-position:-300px 0;}
	#lnb .mn>ul>li.m3 .submenu>p:before {background-position:-150px 0;}
	#lnb .mn>ul>li.m4 .submenu>p:before {background-position:-450px 0;}
	#lnb .mn>ul>li.m5 .submenu>p:before {background-position:-600px 0;}
	#lnb .mn>ul>li.m6 .submenu>p:before {background-position:-750px 0;}
	#lnb .mn>ul>li.m7 .submenu>p:before {background-position:-900px 0;}
	#lnb .mn>ul>li.m8 .submenu>p:before {background-position:-1050px 0;}

	#lnb .submenu>ul {margin-left:30%; font-size:0; line-height:0;}
	#lnb .submenu>ul>li {display:inline-block; vertical-align:top; width:25%; margin-top:30px; padding-bottom: 4px; font-size:1.4rem; line-height:1.3em;}
	#lnb .submenu>ul>li>a {display:inline-block; margin:10px 0 0; font-weight:500; font-size:2rem; color:#333;}
	#lnb .submenu>ul>li>ul>li {margin-top:5px;}
	#lnb .submenu>ul>li>ul>li a {color:#333;}
	#lnb .submenu>ul>li>ul>li:first-child {margin-top:20px;}

	header .navBg {display:none; position:absolute; left:0; top:100px; width:100%; height:305px; background:#f9f9f9; box-shadow:0 10px 10px rgba(0,0,0,.3); z-index:200;}
	header .navBg.m1 {height:600px;}
	header .navBg.m4 {height:600px;}
	header .navBg.m5 {height:340px;}
	header .navBg.m7 {height:480px;}
	header .navBg.m8 {height:700px;}

	#gnb {display: flex; align-items: center; gap: 20px;} 
}


@media all and (max-width:1279px){
	body.noScroll {position:fixed; top:0; width:100%; height:100%; overflow:hidden;}
	
	header {position: relative; height: 100px; padding: 0 44px 0 0 !important;}
	header .wrap {position: static !important; display: flex; align-items: center; justify-content: space-between; padding-left: 20px; padding-right: 20px; height: 100%;}
	header h1 {width: 180px;}

	#gnb {display: flex; align-items: center; gap: 20px;}
	#lang {left: auto !important;}
	#gnb .allmenu {display: none;}

	#lnb h2 {position:absolute; right:20px; top: 38px;}
	#lnb h2 a {display: block; width: 24px; height: 24px; font-size: 0; line-height: 0; background: var(--gnb); background-position: calc(-34px * 5) 0;}
	
	header nav#lnb .logoTit {display:block; padding:33px 20px; height: 85px; background:#f5f5f5}
	header nav#lnb .logoTit a {position:relative; padding:3px 0 0 32px; margin-left:10px; font-size:1.4rem; color:#333;}
	header nav#lnb .logoTit a:after {display:block; content:""; position:absolute; left:0; top:0; width:24px; height:24px; background:url('/main/img/inc2020/gnb.png') no-repeat -24px -24px}

	header nav#lnb .logoTit a.logoutBtn:after {background:url('/main/img/inc2020/gnb.png') no-repeat -96px -24px}
	header nav#lnb .logoTit a.mypageBtn:after {background:url('/main/img/inc2020/gnb.png') no-repeat -24px -24px}

	header nav#lnb .mn {position:fixed; right:-100%; top:0; width:100%; height:100%; background:#fff; z-index:9999; transition:.5s;}
	header nav#lnb .mn-open {right:0;}
	header nav#lnb .mn>ul {display:block !important; position:relative; width:100%; height: calc(100% - 85px); margin-top:0;}
	header nav#lnb .mn>ul:before {display:block; content:""; position:absolute; left:0; top:0; bottom:0; width:30%; height:100%; min-height:500px; background:#0a3fc1;}
	header nav#lnb .mn>ul>li {height:75px;}
	header nav#lnb .mn>ul>li>a {position:absolute; display:block; text-align:center; width:30%; height:50px; padding:15px 10px; font-size:1.5rem !Important; line-height:1.4em; color:#fff; border-bottom:1px solid rgba(0,0,0,.2); }
	header nav#lnb .mn>ul>li>a span {display:block;}
	header nav#lnb .mn>ul>li.on>a {color:#fff; background:rgba(0,0,0,.2);}
	header nav#lnb .mn>ul>li:nth-child(1)>a {top:0;}
	header nav#lnb .mn>ul>li:nth-child(2)>a {top:50px;}
	header nav#lnb .mn>ul>li:nth-child(3)>a {top:100px;}
	header nav#lnb .mn>ul>li:nth-child(4)>a {top:150px;}
	header nav#lnb .mn>ul>li:nth-child(5)>a {top:200px;}
	header nav#lnb .mn>ul>li:nth-child(6)>a {top:250px;}
	header nav#lnb .mn>ul>li:nth-child(7)>a {top:300px;}
	header nav#lnb .mn>ul>li:nth-child(8)>a {top:350px;}
	header nav#lnb .mn>ul>li:nth-child(9)>a {top:400px;}
	header nav#lnb .mn>ul>li:nth-child(10)>a {top:450px;}

	header nav#lnb div.submenu {display:none; position:absolute; right:0; top:0; width:70%; height:100%; padding:10px; visibility:visible;  overflow-y: auto;}
	header nav#lnb .on div.submenu {display:block;}
	header nav#lnb div.submenu>p {padding:10px 20px 20px; font-size:2.2rem; font-weight:500; color:#0a3fc1;}
	header nav#lnb div.submenu>ul>li.smenu {position:relative;}
	header nav#lnb div.submenu>ul>li.smenu:before {content:""; position:absolute; right:20px; top:12px; width:6px; height:6px; border-right:2px solid #3c5eca; border-bottom:2px solid #3c5eca; transform:rotate(45deg);}
	header nav#lnb div.submenu>ul>li.smenu.on {border:2px solid #3c5eca;}
	header nav#lnb div.submenu>ul>li.on:before {border-color:#fff;}
	header nav#lnb div.submenu>ul>li>a {display:block; padding:10px 20px; color:#333; font-size:1.5rem; border-bottom:1px solid #dfdfdf;}
	header nav#lnb div.submenu>ul>li.on>a {color:#fff; border-top:0; background:#3c5eca;}
	header nav#lnb div.submenu>ul>li>ul {display:none; padding:10px 10px 10px 13px;}
	header nav#lnb div.submenu>ul>li>ul>li>a {display:block; position:relative; padding:8px 0 8px 8px; font-size:1.4rem; color:#333;}
	header nav#lnb div.submenu>ul>li>ul>li.on>a {font-weight:500; color:#3c5eca;}
	header nav a[target=_blank] {background-position:right 10px center;}

	header nav#lnb .close {position:fixed; right:27px; top:28px; width:30px; height:30px; z-index:100000;}
	header nav#lnb .close:before, header nav#lnb .close:after {display:block; content:""; position:absolute; left:0; top:48%; width:28px; height:2px; background:#333;}
	header nav#lnb .close:before {transform:rotate(45deg);}
	header nav#lnb .close:after {transform:rotate(-45deg);}

	footer .link-box .other-site>li>button {min-width: 227px;}
}

@media all and (max-width:1024px) {
	#gnb .login {display: none;}
	footer .link-box .wrap {flex-direction: column; align-items: flex-start; padding-left: 20px; padding-right: 20px;}
	footer .link-box .other-site {flex-direction: column; width: 100%;}
	footer .link-box .other-site>li>button {min-width: 100%;}
	footer .con-box {padding: 30px 20px;}
	footer .con-box .wrap {flex-direction: column; align-items: flex-start; padding: 0;}
	footer .con-box .info>ul {flex-wrap: wrap; gap: 15px; margin-bottom: 20px;}
	footer .con-box .info>ul li {gap: 15px;}
	footer .con-box .addr {gap: 10px; font-size: 15px;}
	footer .con-box .call {gap: 6px; font-size: 15px;}
}

@media all and (max-width:800px) {
	header {height: 70px !important; padding-right: 30px !important;}
	header h1 {width: 130px;}
	#lnb h2 {top: 25px;}
	#gnb {gap: 10px;}
	#gnb>li>a,
	#lnb h2 a,
	#gnb .topSearch>a.close {width: 20px; height: 20px; background-size: 170px;}
	#gnb .topSearch>a.close {background-position: calc(-30px * 1) 0;}
	#gnb #lang>a {background-position: calc(-30px * 2) 0;}
	#gnb .login>a,
	#gnb .mypage>a {background-position: calc(-30px * 3) 0;}
	#gnb .logout>a {background-position: calc(-30px * 4) 0;}	
	#lnb h2 a {background-position: calc(-30px * 5) 0;}
	#lang>ul {left: -7px;}
	footer .link-box .sns {flex-direction: column; align-items: flex-start;}
	footer .link-box .sns .logo {text-align: left; width: 100px;}
	footer .con-box .info>ul {gap: 1px 10px;}
	footer .con-box .info>ul li {gap: 10px;}
	footer .con-box .addr {flex-wrap: wrap; row-gap: 0;}
}

/*포커스링*/
*:focus-visible{outline:2px dashed #df002c; box-shadow:-4px -4px 0 #fff, 4px 4px 0 #fff, -4px 4px 0 #ffff, 4px -4px 0 #fff, 0 -4px 0 #fff, 0 4px 0 #fff, 4px 0 0 #fff, -4px 0 0 #fff; z-index:999999999;}


.focus:focus-visible {position: relative; outline: none; box-shadow: none; z-index: 9999; }
.focus:focus-visible::after {content: ''; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; width: calc(100% - 4px); height: calc(100% - 4px); outline: 2px dashed #df002c; box-shadow: inset 0 -2px 0 #fff, inset 0 2px 0 #fff, inset 2px 0 0 #fff, inset -2px 0 0 #fff !important; z-index: 9999;}


input[type=text]:focus-visible,
textarea:focus-visible{outline:2px solid #df002c !important;}