@charset "utf-8";

/* layout */
#wrapper {position:relative}
#header {position:absolute; top:0; left:0; right:0; z-index:500; height:82px; padding:0 30px}
#header .menu-open {display:inline-block; position:relative; z-index:399; width:32px; height:40px; margin-top:21px; background:url(../images/icon-menu.png) left center no-repeat}
#header .logo {display:inline-block; position:relative; z-index:399; margin:21px 0 0 25px}
#header .logo a {display:inline-block; width:214px; height:40px; background:url(../images/logo.png) no-repeat}
#header .side-gnb {position:absolute; top:0; left:-370px; z-index:400; width:370px; padding-top:80px; background-color:#fff; box-shadow:0px 13px 81px 0 rgba(0, 0, 0, 0.5);}
#header .side-gnb .close {position:absolute; top:30px; left:33px; width:26px; height:26px; background:url(../images/icon-gnb-close.png) no-repeat}
#header .side-gnb > ul > li > a {display:block; position:relative; margin:0 22px; padding:25px 0 19px 62px; font-family:'GmarketSans'; font-size:22px; color:#000}
#header .side-gnb > ul > li ~ li > a {border-top:1px solid #cfcfcf}
#header .side-gnb > ul > li > a:after {content:""; position:absolute; top:50%; left:3px; width:42px; height:42px; transform:translateY(-50%); border-radius:100%}
#header .side-gnb > ul > li.intro > a:after {background:#bf0404 url(../images/icon-intro.png) center center no-repeat; background-size:33px auto}
#header .side-gnb > ul > li.content > a:after {background:#f9c117 url(../images/icon-contents.png) center center no-repeat; background-size:28px auto}
#header .side-gnb > ul > li.kforum > a:after {background:#36b08b url(../images/icon-kforum.png) center center no-repeat; background-size:24px auto}
#header .side-gnb > ul > li.library > a:after {background:#36b08b url(../images/icon-library.png) center center no-repeat; background-size:26px auto}
#header .side-gnb > ul > li.library > a:before {content:""; position:absolute; top:50%; right:0; width:22px; height:22px; transform:translateY(-50%); background:url(../images/icon-pop-link.png) no-repeat}
#header .side-gnb > ul > li > ul {display:none; padding:35px 0 35px 102px; background-color:#f3f3f3}
#header .side-gnb > ul > li > ul > li ~ li {margin-top:30px}
#header .side-gnb > ul > li > ul > li > a {font-family:'GmarketSans'; font-weight:300; font-size:20px; color:#6a6a6a}
#header .side-gnb > ul > li > ul > li > a:hover,
#header .side-gnb > ul > li > ul > li.selected > a {font-weight:400; color:#000}
#header .side-gnb > ul > li.active + li > a {border-top:none}
#header .gnb {position:absolute; top:0; right:0; left:0; z-index:300; height:82px; text-align:center; border-bottom:1px solid rgba(255, 255, 255, .9)}
#header .gnb .gnb-inner {width:1200px; margin:0 auto}
#header .gnb .gnb-inner .bg {display:none; position:absolute; top:83px; right:0; left:0; z-index:299; height:288px; background-color:rgba(0, 0, 0, .9)}
#header .gnb .gnb-inner > ul {display:inline-block; position:relative; padding-top:32px; z-index:400; text-align:left}
#header .gnb .gnb-inner > ul:after {content:""; display:block; clear:both}
#header .gnb .gnb-inner > ul > li {float:left; padding:0 30px}
#header .gnb .gnb-inner > ul > li.intro {width:206px; padding-left:0}
#header .gnb .gnb-inner > ul > li.content {width:181px}
#header .gnb .gnb-inner > ul > li.kforum {width:260px}
#header .gnb .gnb-inner > ul > li.library {padding-left:6px}
#header .gnb .gnb-inner > ul > li.library > a {padding-right:35px}
#header .gnb .gnb-inner > ul > li > a {display:inline-block; position:relative; padding-top:15px; padding-bottom:15px; font-family:'GmarketSans'; font-weight:400; font-size:20px; color:#fff}
#header .gnb .gnb-inner > ul > li > a:after {content:""; position:absolute; top:50%; left:3px; width:42px; height:42px; transform:translateY(-50%)}
#header .gnb .gnb-inner > ul > li.intro > a:after {background:url(../images/icon-intro.png) left center no-repeat; background-size:33px auto}
#header .gnb .gnb-inner > ul > li.content > a:after {margin-top:-3px; background:url(../images/icon-contents.png) left center no-repeat; background-size:28px auto}
#header .gnb .gnb-inner > ul > li.kforum > a:after {background:url(../images/icon-kforum.png) left center no-repeat; background-size:24px auto}
#header .gnb .gnb-inner > ul > li.library > a:after {background:url(../images/icon-library.png) left center no-repeat; background-size:26px auto}
#header .gnb .gnb-inner > ul > li.library > a:before {content:""; position:absolute; top:9px; right:0; width:22px; height:22px; background:url(../images/icon-pop-link-wht.png) no-repeat}
#header .gnb .gnb-inner > ul > li.intro > a,
#header .gnb .gnb-inner > ul > li.intro > ul {padding-left:49px}
#header .gnb .gnb-inner > ul > li.content > a,
#header .gnb .gnb-inner > ul > li.content > ul {padding-left:44px}
#header .gnb .gnb-inner > ul > li.kforum > a,
#header .gnb .gnb-inner > ul > li.kforum > ul {padding-left:41px}
#header .gnb .gnb-inner > ul > li.library > a,
#header .gnb .gnb-inner > ul > li.library > ul {padding-left:42px}
#header .gnb .gnb-inner > ul > li > ul {display:none; padding-top:33px}
#header .gnb .gnb-inner > ul > li > ul > li ~ li {margin-top:17px}
#header .gnb .gnb-inner > ul > li > ul > li > a {font-family:'GmarketSans'; font-weight:300; font-size:16px; color:#fff; white-space:nowrap}
#header .gnb .gnb-inner > ul > li > ul > li > a:hover,
#header .gnb .gnb-inner > ul > li > ul > li.selected > a {font-weight:400}
#header .gnb .gnb-inner > ul > li.intro a:hover,
#header .gnb .gnb-inner > ul > li.intro.active > a,
#header .gnb .gnb-inner > ul > li.intro > ul > li.selected > a {color:#bf0404}
#header .gnb .gnb-inner > ul > li.content a:hover,
#header .gnb .gnb-inner > ul > li.content.active > a,
#header .gnb .gnb-inner > ul > li.content > ul > li.selected > a {color:#f9c117}
#header .gnb .gnb-inner > ul > li.kforum a:hover,
#header .gnb .gnb-inner > ul > li.kforum.active > a,
#header .gnb .gnb-inner > ul > li.kforum > ul > li.selected > a {color:#36b08b}
#header .gnb .gnb-inner > ul > li.library a:hover,
#header .gnb .gnb-inner > ul > li.library.active > a,
#header .gnb .gnb-inner > ul > li.library > ul > li.selected > a {color:#36b08b}

#footer {background-color:#00555e}
#footer .footer-inner {position:relative; width:880px; margin:0 auto; padding:56px 0 35px}
#footer .logo {position:absolute; top:50%; left:0; width:271px; height:71px; transform:translateY(-50%); background:url(../images/logo-footer.png) no-repeat}
#footer .info {padding-left:312px}
#footer .info .addr,
#footer .info .contact,
#footer .info .copy {line-height:1.5; font-size:14px; color:#80aaaf}

#container {padding-bottom:140px}
[class*="section-"] .sub-header {padding-top:82px}
[class*="section-"] .sub-header h2 {padding:53px 0 39px; line-height:34px; font-family:'GmarketSans'; font-weight:400; font-size:40px; color:#fff; text-align:center}
[class*="section-"] .sub-header .snb {height:44px}
[class*="section-"] .sub-header .snb ul {width:1200px; margin:0 auto; padding:0 26px}
[class*="section-"] .sub-header .snb ul:after {content:""; display:block; clear:both}
[class*="section-"] .sub-header .snb ul li {float:left; position:relative}
[class*="section-"] .sub-header .snb ul li ~ li {margin-left:27px}
[class*="section-"] .sub-header .snb ul li a {display:inline-block; min-width:138px; line-height:44px; padding:1px 15px 0; font-size:16px; color:#fff; text-align:center}
[class*="section-"] .sub-header .snb ul li.active:after {content:""; position:absolute; top:-5px; left:0; width:100%; height:5px; background-color:#fff}
[class*="section-"] .sub-header .snb ul li.active a {line-height:44px; padding:0 15px; font-weight:700; background-color:#fff}
[class*="section-"] .contents .contents-inner {width:1200px; margin:0 auto; padding:0 65px}
[class*="section-"] .contents .tit-content {padding:55px 0 62px; text-align:center}
[class*="section-"] .contents .tit-content h3 {display:inline-block; position:relative; line-height:35px; margin-bottom:28px; font-weight:400; font-size:35px}
[class*="section-"] .contents .tit-content h3:after {content:""; position:absolute; bottom:-28px; left:50%; width:36px; height:1px; transform:translateX(-50%)}
[class*="section-"] .contents .tit-content .desc {padding-top:37px}
[class*="section-"] .contents .tit-content .desc p {display:inline-block; min-width:945px; line-height:1.45; padding:20px 0 17px; font-weight:300; font-size:24px; border-radius:3em; background-color:#f6f6f6}
[class*="section-"] .contents .tit-content .desc strong {font-weight:400}
[class*="section-"] .contents .tit-content .desc span {display:block; line-height:1.45}

/* common */
.hidden {overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; padding:0; font-size:1px; color:transparent; border:none; clip:rect(0 0 0 0); white-space:nowrap}

/* popup */
.popup-wrap {position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000; text-align:center; background-color:rgba(0, 0, 0, .6)}
.popup-wrap:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle}
.popup-wrap .popup-section {display:inline-block; text-align:left; vertical-align:middle; background-color:#fff}
.popup-wrap .popup-header {position:relative}
.popup-wrap .popup-header .popup-close {position:absolute; top:0; right:0; width:35px; height:35px; background:url(../images/icon-popup-close.png) 50% 50% no-repeat}

/* button */
[class*="btn-"] {display:inline-block; height:40px; padding:0 17px; font-size:18px; color:#fff; border:1px solid}
[class*="btn-"] span {display:inline-block; line-height:40px}
[class*="btn-"].gry {border-color:#949494; background-color:#949494}
[class*="btn-"].grn {border-color:#006535; background-color:#006535}
[class*="btn-"].sml {height:32px; padding:0 14px; font-size:14px}
[class*="btn-"].sml span {line-height:32px}
.btn-round {border-radius:2em}
.section-intro [class*="btn-"].key {border-color:#bf0404; background-color:#bf0404}
.section-forum [class*="btn-"].key {border-color:#ecb40a; background-color:#ecb40a}

/* pagination */
.pagination {padding-top:48px; text-align:center}
.pagination .arr {display:inline-block; width:28px; height:28px; border:1px solid #ababab; vertical-align:top}
.pagination .arr.prev {margin-right:8px; background:url(../images/icon-page-prev.png) 50% 50% no-repeat}
.pagination .arr.next {margin-left:8px; background:url(../images/icon-page-next.png) 50% 50% no-repeat}
.pagination .current {display:inline-block; line-height:28px; padding:2px 12px 0; vertical-align:top}
.pagination .page {display:inline-block; line-height:28px; padding:2px 12px 0; color:#6d6d6d; vertical-align:top}

/* tab */
.tab-basic {display:flex; padding:0 60px}
.tab-basic a {flex:1; height:52px; line-height:51px; font-size:24px; text-align:center; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; box-sizing:border-box}
.tab-basic a:last-child {border-right:1px solid #000}
.tab-basic a.active {color:#fff; /* border-color:#bf0404; background-color:#bf0404 */} /* 색상 섹터별 정의 */
.tab-basic a.active + a {/* border-left-color:#bf0404 */} /* 색상 섹터별 정의 */

/* table */
.tbl-basic table {table-layout:fixed; border-top:2px solid #000}
.tbl-basic tbody th {padding:17px 0 13px; font-size:22px; border-bottom:1px solid #b6b6b6; background-color:#f1ecec}
.tbl-basic tbody td {padding:17px 0 13px; font-size:18px; color:#666; border-bottom:1px solid #b6b6b6}