@charset "euc-kr";

:root {
    --max-width: 1280px;
}

.skip-nav{position:fixed;left:0;top:-100px;}
.skip-nav a{display:block; position:fixed;top:-100px;padding:8px 0;width:150px;text-align:center;color:#fff;background:#000;z-index:999999}
.skip-nav a:focus,
.skip-nav a:hover,
.skip-nav a:active{left:0px;top:0px}
.skip-nav a:focus{top:0;}

#header{height:120px; border-bottom:1px solid rgba(0,0,0,0.15);}
.top-util{height:40px; background-color:#F4F4F4; padding:5px 0; box-sizing:border-box;}
.top-util .top-inner{max-width:var(--max-width); margin:0 auto; display:flex; justify-content:right;}
.top-util .top-links{ display:flex; align-items:center; height:30px;}
.top-util .top-links a{display:block; line-height:30px; margin:0 17px; font-size:14px; color:#333;}
.top-util .top-search{width:270px; height:30px; background-color:#fff; border:1px solid #DEDEDE; box-sizing:border-box; margin-left:17px;}
.top-util .top-search form{height:100%;}
.top-util .top-search fieldset{display:flex;height:100%;}
.top-util .top-search .keyword{width:100%; height:100%; border:none;}
.top-util .top-search .btn-search{width:40px; height:100%; text-align:left; text-indent:-9999px; overflow:hidden; background:url(../images/layout/btn_top_search.png) center center / 18px auto no-repeat; flex-shrink: 0;}

.top-gnav{position:relative;}
.top-gnav .top-inner{max-width:var(--max-width); margin:0 auto; display:flex;}

.top-gnav h1{height:80px;}
.top-gnav h1 a{height:100%; display:flex; align-items:center;}
.top-gnav h1 img{vertical-align:top;}

#header a.allNavOpen,
#header a.allNavClose{display:none;}

.gnbWrap{box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05); margin-bottom:20px; border-bottom:1px solid #ddd;}

#gnav{height:80px; margin-left:auto;}
#gnav .ganv-depth1{display:flex; height:100%;}
#gnav .ganv-depth1 a{display:flex; align-items:center; height:100%; position:relative; font-size:20px; font-weight:600; color:#333; letter-spacing:-0.05em; padding:0 30px;}
#gnav .ganv-depth1 > li:last-child a{padding-right:0;}

.top-gnav .btn-menu{display:none; position:absolute; right:20px; top:15px;}
.btn-menu-open{width:50px; height:50px; background:url(../images/layout/i_menu.png) center center / 22px auto no-repeat; text-indent:-9999em; text-align:left;z-index:1000;}
.btn-menu-open.active{background-image:url(../images/layout/i_menu_close.png);}

.go-center{width:50px;height:50px; border-radius:5px; background-color:#00c2c2; color:#fff; font-size:10px; line-height:1em; letter-spacing:-0.05em; display:inline-block; text-align:center; box-sizing:border-box; padding:5px 0 0 0;}
.go-center:before{display:block;content:''; width:15px;height:15px; background:url(../images/layout/ic_window.png) 0 0 / cover no-repeat; margin:0 auto 3px auto;}
.btn-membercard{width:50px;height:50px; margin-right:4px; border-radius:5px; background-color:#f18e14; color:#fff; font-size:10px; line-height:1em; letter-spacing:-0.05em; display:inline-block; text-align:center; box-sizing:border-box; padding:7px 0 0 0;}
.btn-membercard:before{display:block;content:''; width:28px;height:10px; background:url(../images/layout/ic_barcode.png) 0 0 / cover no-repeat; margin:0 auto 5px auto;}


.gnav-pc{position:absolute; top:80px;left:0px;width:100%; box-sizing:border-box;background:#fff; border-top:1px solid #CDCDCD;  z-index:9999;box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05); display:none;}
.gnav-pc.active{display:block;}
.gnav-pc .gnav-inner{max-width:var(--max-width); margin:0 auto; text-align:left; }
.gnav-pc .depth1{display:flex; }
.gnav-pc .depth1 > li{width:20%;  padding:25px; box-sizing:border-box; padding-bottom:80px;}
.gnav-pc .depth1 > li:not(:first-child){ border-left:1px solid #F3F3F3;}
.gnav-pc .depth1 > li > a{position:relative; display:block; padding-bottom:20px; font-size:22px; font-weight:bold; color:#00C2C2;letter-spacing:-0.5px; margin-bottom:20px;}
.gnav-pc .depth1 > li > a:after{position:absolute; content:''; display:block; bottom:0px; left:0px; width:25px; height:1px; background:#00C2C2;}
.gnav-pc .depth2{margin-top:-5px;}
.gnav-pc .depth2 > li > a{display:block; font-size:16px; color:#333; padding:5px 0;}
.gnav-pc .depth2 > li > a:hover{color:#2C9B80; text-decoration:underline;}
.gnav-pc .depth3{display:none;}

.gnav-all{display:flex; flex-direction:column; position:fixed; top:110px;left:0px; right:0;bottom:0; box-sizing:border-box; background:#fff; z-index:999; border-top:1px solid #ddd; display:none; }

.gnav-all .all-top-links{border-bottom:1px solid #ddd; background-color:#F8F9FB; flex-shrink: 0;}
.gnav-all .all-top-links ul{display:flex; height:50px; align-items:center; justify-content: center;}
.gnav-all .all-top-links li{width:50%;}
.gnav-all .all-top-links a{display:block; padding:0 10px; font-size:13px; position:relative; text-align:center;}
.gnav-all .all-top-links a:after{display:block;content:'';width:1px;height:26px; background-color:#333; opacity:0.15; position:absolute;right:0;top:50%; margin-top:-13px;}
.gnav-all .all-top-links li:last-child a:after{display:none;}

.mobile-search{flex-shrink: 0; padding:20px; text-align:center; border-bottom:1px solid #E1E1E1;}
.mobile-search fieldset{display:flex; border:1px solid #dedede; align-items:center;}
.mobile-search .keyword{width:100%; border:none;}
.mobile-search .btn-search{width:40px; height:100%; text-align:left; text-indent:-9999px; overflow:hidden; background:url(../images/layout/btn_top_search.png) center center / 18px auto no-repeat; flex-shrink: 0;}

.gnv-mobile-wrap{height:100%; overflow-y:auto;}
.gnv-mobile-wrap .depth1 > li > a{display:block; padding:20px; font-size:17px; position:relative;}
.gnv-mobile-wrap .depth1 > li > a:before,
.gnv-mobile-wrap .depth1 > li > a:after{display:block;content:'';width:15px;height:1px; background-color:#868686; position:absolute;right:20px;top:50%;}
.gnv-mobile-wrap .depth1 > li > a:after{transform:rotate(90deg);}
.gnv-mobile-wrap .depth1 > li{border-bottom:1px solid #E1E1E1;}
.gnv-mobile-wrap .depth2{border-top:1px solid #E1E1E1; background-color:#F6FAF9; display:none;}
.gnv-mobile-wrap .depth2 > li > a{display:block; padding:10px 30px; font-size:15px;}
.gnv-mobile-wrap .depth2 > li{border-bottom:1px solid #E1E1E1;}
.gnv-mobile-wrap .depth2 > li:last-child{border-bottom:none;}
.gnv-mobile-wrap .depth3{border-top:1px solid #E1E1E1; padding:12px 10px 12px 40px;}
.gnv-mobile-wrap .depth3 a{font-size:14px; display:inline-block; padding:3px 0; position:relative; padding-left:10px;}
.gnv-mobile-wrap .depth3 a:before{display:block;content:'';width:4px;height:2px; background-color:#868686; position:absolute;left:0px;top:1em;}

.gnv-mobile-wrap .depth1 > li.active > a{background-color:#D7F2ED; font-weight:600;}
.gnv-mobile-wrap .depth1 > li.active > a:before{background-color:#2C9B80; height:2px;}
.gnv-mobile-wrap .depth1 > li.active > a:after{display:none;}
.gnv-mobile-wrap .depth1 > li.active .depth2{display:block;}

.gnav-all.active{display:flex;}

#mainLink{padding:20px 0; background:#D0D0D0;}
#mainLink .inner{width:1280px;position: relative;margin: 0 auto;box-sizing: border-box;}
#mainLink .inner:after {display: block; content: '';clear: both;}
#mainLink b{display:block;position:absolute; font-weight:400; top:-3px;left:71px;font-size:16px;line-height:38px;}
#mainLink ul{float:right; padding-right:60px;}
#mainLink ul li{float:left;margin-left:10px;}
#mainLink ul li select{width:200px;height:28px;border:1px #838383 solid;color:#555;font-size:14px;}
#mainLink ul li a{display:inline-block;width:50px;height:28px;color:#fff;line-height:28px;text-align:center;background:#838383;border-radius:2px;vertical-align:middle;}

#footer{padding:50px 0; background-color:#EEEEEE;}
.footer-inner{max-width:var(--max-width); margin:0 auto; display:flex; }
.footer-logo{margin-right:80px; flex-shrink: 0;}
.footer-links{display:flex; flex-wrap:wrap;}
.footer-links a{position:relative; color:#787878; padding:0 10px; font-size:13px;}
.footer-links a em{color:#00C2C2;font-weight:bold;}
.footer-links a:after{display:block;content:'';position:absolute;right:0;top:50%; margin-top:-6px; height:13px; width:1px; background-color:#DEDEDE;}
.footer-links a:first-child{padding-left:0; color:red;}
.footer-links a:last-child:after{display:none;}
.footer-copyright{margin-top:10px; font-size:12px; color:#AAAAAA;}
.footer-site-links{margin-left:auto; flex-shrink: 0;}
.footer-site-links .footer-sns{text-align:right; margin-bottom:17px;}
.footer-site-links .footer-sns img{width:47px;}
.footer-site-links .footer-sites select{width:240px; font-size:13px; color:#878787;}

.footer-contact{display:flex;margin-top:15px; font-size:13px;}
.footer-contact .footer_cont {position:relative;}
.footer-contact .footer_cont.onsan{padding-right:30px;}
.footer-contact .footer_cont + .footer_cont{padding-left:30px;}
.footer-contact .footer_cont + .footer_cont:before {content:'';display:inline-block;position:absolute;top:30px;left:0;width:1px;height:47px;background-color:#dedede}
.footer-contact .footer_cont > p {line-height:1.4;}
.footer-contact .footer_cont .tit {display:inline-flex;justify-content:center;align-items:center;padding:0 10px;min-width:50px;border-radius:6px;color:#fff;margin-bottom:4px;font-size:13px;font-weight:500;}
.footer-contact .footer_cont.onsan .tit{background-color:#15b9b9;}
.footer-contact .footer_cont.onyang .tit{background-color:#f18e14;}
.footer-contact .center {font-size:13px;font-weight:600;}
.footer-contact .address{line-height:1.4;}
.footer-contact .contact{display:flex;flex-wrap:wrap;line-height:1.4;}

/* quickmenu */
.side-quick{position:fixed; top:160px; left:50%; margin-left:670px; width:100px; background:#fff; border:2px solid #00C2C2; box-sizing:border-box; border-radius:20px 20px 0 0; z-index:999; box-sizing:border-box; padding:10px; text-align:center;}
.side-quick h2{border-radius:12px; height:30px; line-height:30px; color:#fff; background:#FF83A9; font-size:12px; letter-spacing:-0.05em;}
.side-quick .quick-links li{border-bottom:1px solid #D3D3D3; }
.side-quick .quick-links a{display:block; padding:14px 0; font-size:14px; color:#6A6A6A; line-height:1.5em;}
.side-quick .quick-links a:before{display:block;content:'';width:20px;height:20px; margin:0 auto 10px auto; background-size:cover; background-position:center center; background-repeat:no-repeat;}
.side-quick .quick-links .item1 a:before{background-image:url("../images/layout/i_quick1.png"); }
.side-quick .quick-links .item2 a:before{background-image:url("../images/layout/i_quick2.png"); }
.side-quick .quick-links .item3 a:before{background-image:url("../images/layout/i_quick3.png"); }
.side-quick .quick-links .item4 a:before{width:23px; height:25px; background-image:url("../images/layout/i_quick4.png"); }
.side-quick .quick-links .item5 a:before{width:20px; height:25px; background-image:url("../images/layout/i_quick5.png"); }
.side-quick .quick-sns{padding:17px 1px 7px; display:flex; justify-content:space-around;}
.side-quick .quick-sns a{display:block;}
.side-quick .go-top{display:flex; align-items:center; justify-content:center; background-color:#00C2C2; color:#fff; text-align:center; font-weight:600; height:40px; border-radius:0 0 20px 20px; position:absolute;top:100%;left:-2px;right:-2px;}
.side-quick .go-top:before{ display:block;content:'';width:14px;height:14px; background:url("../images/layout/i_gotop.png") center center no-repeat; margin-right:5px;}


/* sub */
#container{margin-top:40px;}
.container-inner{display:flex; max-width:var(--max-width); margin:0 auto; min-height:700px;}

.side-nav{width:240px; flex-shrink: 0;}
.side-nav-title{background:#00C2C2; position:relative; display:flex; align-items:center; justify-content:center; width:240px; height:100px; border-radius:15px 15px 0px 0px; margin-bottom:14px;}
.side-nav-title h2{color:#fff; font-size:26px; text-align:center; }
.side-nav-title:before,
.side-nav-title:after{position:absolute; bottom:-14px; display:block; content:''; width:19px; height:24px; background:url("../images/layout/side_title_line.png") center no-repeat; }
.side-nav-title:before{left:15%;}
.side-nav-title:after{right:15%;}

.side-nav-list .depth2{padding:40px;}
.side-nav-list .depth2{border:2px solid #00C2C2; border-radius: 0px 0px 15px 15px;}
.side-nav-list .depth2 > li{ border-bottom:1px dashed #dedede;}
.side-nav-list .depth2 > li > a{display:block; padding:14px 0; font-size:18px;color:#333333; line-height:1.3em}
.side-nav-list .depth3{padding:0 0 14px 10px; margin-top:-6px;}
.side-nav-list .depth3 li a{display:block; position:relative; font-size:14px; color:#333; padding-left:16px; margin:7px 0; line-height:1.3em}
.side-nav-list .depth3 li a:before{position:absolute; top:8px; left:0; width:7px; height:2px; content:''; display:block; background:#333333;}
.side-nav-list .depth4 {background:#EFEFEF; padding:5px 0; margin-top:5px; border-radius:5px;}
.side-nav-list .depth4 li a {font-size:13px;}
.side-nav-list .depth4 li a:before{display:none;}
.side-nav-list .depth2 > li.active > a{color:#00C2C2;}
.side-nav-list .depth3 > li.active a:before{ background:#00C2C2; }
.side-nav-list .depth3 > li.active a, 
.side-nav-list .depth4 > li.active a{color:#00C2C2; font-weight:600;}

.sub-section{flex-grow:1; margin-left:40px; padding-bottom:120px; width:100%;}
.sub-section img{max-width:100%;}

.section-header{min-height:60px; border-bottom:1px solid #dedede; padding:10px 0; margin-bottom:40px; box-sizing:border-box; position:relative;}
.section-header .page-title{font-size:26px; color:#333;}

.page-route{ position:absolute;right:0;top:10px; font-size:15px;}
.page-route ul{display:flex; flex-wrap:wrap;}
.page-route li{position:relative; margin-right:8px; display:inline-flex; align-items:center;}
.page-route li:after{display:inline-block; content:''; width:16px; height:16px; margin-left:10px; background:url(../images/layout/arr_route.png) center center / cover no-repeat;}
.page-route li:last-child{margin-right:0;}
.page-route li:last-child:after{display:none;}
.page-route .home{text-align:left; text-indent:-9999px; overflow:hidden;}
.page-route .home:before{display:inline-block;content:'';width:24px;height:24px; background:url(../images/layout/i_home.png) center center / cover no-repeat;}