@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; min-height: 100vh; min-height: -webkit-fillavailable;}
html{height: -webkit-fill-available;}
body.on{overflow-y: hidden;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1280px;	position:relative;	margin-left:auto;	margin-right:auto;}
.ss-inner {	width:1000px;	position:relative;	margin-left:auto;	margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1399px) {	
	.inner {width:94%;}
}
@media all and (max-width:1279px){	
	.s-inner {width:94%;}
}
@media all and (max-width:1000px){	
	.ss-inner {width:94%;}
}

/* header */
#header{position: fixed; top: 0; left: 0; width: 100%; z-index: 999; height: 100px; background: transparent; transition: .3s ease-in-out;}
#header.on{background-color: #fff;}
#header.onn{background-color: #fff;}
#header.onnn{background-color: #fff;}
#header #logo{}
#header #logo a{width: 143px; height: 50px; display: block; position: absolute; left: 60px; top: 50%; transform: translateY(-50%); background: url(/images/common/logo_230512.png) no-repeat center center / 100%;}
#header.on #logo a{background: url(/images/common/logo_onn_230512.png) no-repeat center center / 100%; transition: .3s ease-in-out;}
#header.onn #logo a{background: url(/images/common/logo_onn_230512.png) no-repeat center center / 100%; transition: .3s ease-in-out;}
#header.onnn #logo a{background: url(/images/common/logo_onn_230512.png) no-repeat center center / 100%; transition: .3s ease-in-out;}
#header #logo.on a{background: url(/images/common/logo_onn_230512.png) no-repeat center center / 100%; transition: .3s ease-in-out;}
#header .pc_menu{position: absolute; right: 60px; height: 100%; display: flex; gap:50px; align-items: center;}
#header .pc_menu .menu{display: flex; height: 100%; align-items: center;}
#header .pc_menu .menu > li{margin-left: 34px; position: relative;}
#header .pc_menu .menu > li > div{}
#header .pc_menu .menu > li > div > a{font-size: var(--fz15); color: #fff; transition: .3s ease-in-out; display: inline-block; line-height: 60px;}
#header.on .pc_menu .menu > li:hover > div > a{color: #999;}
#header.onn .pc_menu .menu > li:hover > div > a{color: #999;}
#header.onnn .pc_menu .menu > li:hover > div > a{color: #999;}
#header.on .pc_menu .menu > li > div > a{color: #212121;}
#header.onn .pc_menu .menu > li > div > a{color: #212121;}
#header.onnn .pc_menu .menu > li > div > a{color: #212121;}
#header .pc_menu .menu > li > ul{display: none; position: absolute; top: 60px; left: 50%; transform: translateX(-50%); background-color: #000; width: 130px; padding: 10px 0;}
#header .pc_menu .menu > li:hover > ul{display: block;}
#header .pc_menu .menu > li > ul::after{content: ''; width: 12px; height: 12px; display: block; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); border: 12px solid transparent; border-bottom: 12px solid #000; }
#header .pc_menu .menu > li > ul > li{}
#header .pc_menu .menu > li > ul > li > a{ color: #fff; font-size: var(--fz14); display: block; padding: 10px 15px; width: 100%;}
#header .pc_menu .menu > li > ul > li:hover > a{color: #ddd;}
#header .menuToggle,
#header .mo_menu{display: none;}

#header .login_box{display: flex; align-items: center; gap:25px;}
#header .login_box li{}
#header .login_box li a{font-size: var(--fz14); color: #fff; transition: .3s ease-in-out; display: inline-block; line-height: 100px;}
#header.on .login_box li a{color: #777;}
#header.onn .login_box li a{color: #777;}
#header.onnn .login_box li a{color: #777;}
#header .login_box li a b{}

@media all and (max-width:976px){
	#header{height: 60px;}
	#header #logo a{left: 3%; width: 106px;}
	#header .pc_menu{display: none;}
	#header .menuToggle{display: block; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); transition: .2s ease-in-out; cursor: pointer;}
	#header .menuToggle span{color: #fff; font-size: 3rem;}
	#header.on .menuToggle span,
	#header.onn .menuToggle span{color: #212121;}
	#header.onnn .menuToggle span{color: #212121;}
	
	#header .mo_menu{display: block; width: 100%; background-color: #fff; height: 100%; position: fixed; margin-top: 60px; padding-top: 90px; right: -100%; transition: .3s ease-in-out; opacity: 0;}
	#header .mo_menu.on{right: 0; opacity: 1;}
	#header .mo_menu > ul{}
	#header .mo_menu > ul > li{margin-bottom: 17px;}
	#header .mo_menu > ul > li > div{}
	#header .mo_menu > ul > li > div > a{font-size: var(--fz20); color: #212121; padding: 10px 20px; font-weight: 500;}
	#header .mo_menu > ul > li > ul{margin-top: 10px;}
	#header .mo_menu > ul > li > ul > li{margin-bottom: 10px;}
	#header .mo_menu > ul > li > ul > li > a{padding: 8px 20px; color: #777; font-size: var(--fz18);}
	
	#header .login_box{padding: 0 20px;}
	#header .login_box li a{font-size: var(--fz16);}
}

/* quick */
.quick{position: fixed; right: 60px; top: 50%; transform: translateY(-50%); z-index: 998; display: flex; flex-direction: column; gap:25px 0;}
.quick li{position: relative; cursor: pointer; text-align: center;}
.quick li:nth-child(1) a{pointer-events: none;}
.quick.invert-color li a img{filter: invert(100%);}
.quick li .info{position: absolute; left: -236px; top: 50%; transform: translateY(-50%); opacity: 0; z-index: -2; visibility: hidden; transition: .2s ease-in-out; cursor: pointer;}
.quick li:nth-child(1):hover .info{opacity: 1; z-index: 1; visibility: visible;}
.quick li .info .time_box{ height: 115px; background-color: #fff; border-radius: 4px; padding: 15px 16px 13px; color: #212121; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.quick li .info .time_box::after{content: ''; border: 8px solid transparent; border-left: 12px solid #fff; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 12px; height: 11px;}
.quick li .info .time_box dl{display: flex; line-height: 1em;}
.quick li .info .time_box dl dt{text-align: justify; width: 90px; margin-right: 6px; font-size: var(--fz12); font-weight: 500;}
.quick li .info .time_box dl dt::after{content: ''; display: inline-block;  width: 100%;}
.quick li .info .time_box dl dd{font-size: var(--fz12); font-weight: 300; letter-spacing: 0.1em;}
.quick li .info .time_box p{text-align: center; font-weight: 500; font-size: var(--fz12); margin-top: 0px; line-height: 1em;}
.quicktoggle{display: none;}

@media all and (max-width:976px){
	.quick{right: 23px; top: auto; bottom: 70px; transform: translateY(0); gap: 15px 0; display: none;}
	.quick.on{display: flex;}
	.quicktoggle{display: flex; justify-content: center; align-items: center; background-color: #fff; width: 32px; height: 32px; border-radius: 100%; position: fixed; bottom: 20px; right: 20px; z-index: 99; cursor: pointer;}
	.quicktoggle span{font-size: 20px !important;}
}

/* footer */
#footer{width: 100%; display: flex; justify-content: space-between; padding: 45px 0 40px;}
#footer .l_cont{margin-left: 60px;}
#footer .l_cont span{font-size: var(--fz14); font-weight: 300; color: #666; display: inline-block; margin-right: 15px;}
#footer .r_cont{margin-right: 60px;}
#footer .r_cont p{font-size: var(--fz14); font-weight: 300; color: #666; display: inline-block;}

@media all and (max-width:976px){
	#footer{flex-direction: column; text-align: center;width: 94%; padding: 25px 0;}
	#footer .l_cont{margin-left: 0;}
	#footer .l_cont span{margin-right: 0; margin: 0 6px; line-height: 1.4em;}
	#footer .r_cont{margin-right: 0; margin-top: 10px;}
}

.white_bg{position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff;}