@charset "utf-8";
@import url('board.css');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* GmarketSans */
@font-face {
    font-family:'GmarketSansLight';
    src:url('/site/common/fonts/GmarketSansLight.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'GmarketSansMedium';
    src:url('/site/common/fonts/GmarketSansMedium.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'GmarketSansBold';
    src: url('/site/common/fonts/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset css*/
html {font-family:sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video, input, button {margin:0; padding:0; border:0; font-size:100%; font-family:'Noto Sans KR', sans-serif; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {letter-spacing:-0.75px; word-break:break-all}
ol, ul, li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
table {border-collapse:collapse; border-spacing:0; /*table-layout:fixed*/}
caption, legend {overflow:hidden; text-indent:-9999px; height:1px; padding:0 !important}
a {background-color:transparent; color:inherit; text-decoration:none}
a:active, a:hover {outline:0; text-decoration:none; color:inherit; text-underline-position:under}
p {outline:none}
img {border:0; vertical-align:top}
button {cursor:pointer; background:none}
select {font:inherit}
select:hover {cursor:pointer}
textarea {padding:0}
input, select {vertical-align:top; margin-top:0 !important}
.bx-wrapper {box-shadow:none; border:none; background:none; margin:0}
.bx-wrapper .bx-controls-direction a {text-indent:0 !important; color:rgba(255,255,255,0) !important}
.width100 {width:100% !important}


#wrap {max-width:1200px; margin:0 auto; margin-bottom:70px; overflow:hidden}
.head {margin:30px auto; text-align:center; padding:20px; color:#333; letter-spacing:-1px}
.head .logo {display:flex; align-items:center; justify-content:center} 
.head .logo span {font-family:GmarketSansLight; font-size:22px; margin-left:20px; color:#fff; padding:10px 20px 6px 20px; background:#142a5b; border-radius:50px}
.head h2 {font-family:GmarketSansMedium; font-size:50px; margin-top:50px}
.head h2 span {font-family:GmarketSansMedium; color:#142a5b}

.majorWrap {display:flex; justify-content:row; max-width:1200px; margin:10px auto}
.majorWrap > a {display:flex; width:25%; flex-direction:column; align-items:center; padding:10px; text-decoration:none}
.majorWrap > a img {border-radius:30px}
.majorWrap > a span {padding:10px 10px 7px 10px; font-size:15px; background:#eee; border-radius:30px; color:#333; font-family:GmarketSansMedium; width:100%; text-align:center; margin-top:10px}
.majorWrap > a:hover span {color:#fff; background:#142a5b; transition:0.3s}
.majorWrap > a:hover {text-decoration:none}
.majorWrap > a:focus {text-decoration:none}
.majorWrap > a:hover img {scale:1.02; transition:0.2s}

.modal-open .modal {background:rgba(0,0,0,0.9)}
.modal-dialog {width:726px}
.modal-header {border-bottom:none; padding:5px 15px; overflow:hidden}
.modal-body {padding:0 40px}
.close {font-size:36px}
.introList {overflow:hidden; display:flex}
.introList h2 {font-family:GmarketSansMedium}
.introList li {float:left; position:relative}
.introList li:nth-child(1) {width:314px; margin-right:20px}
.introList li:nth-child(2) {width:310px}
.introList li:nth-child(2) h2 {font-size:30px; font-weight:600}
.introList li:nth-child(2) .box {position:relative; bottom:0; width:100%; background:#eee; padding:10px; margin-top:20px; font-family:GmarketSansMedium} 
.modal-body h3 {font-family:GmarketSansMedium; font-size:20px}
.nList2 {line-height:2em}
.nList2 li {display:flex}
.nList2 span {display:inline-block; width:43px; font-weight:600; flex-shrink:0}
.bbox {background:#eee; padding:20px}

.nav {margin-top:20px}
.nav li {width:50%; text-align:center; background-color:#eee}
.nav li a {color:#DA4C6D !important}
.nav-tabs>li.active>a, .nav-tabs>li.active > a:focus {background-color:#DA4C6D !important; color:#fff !important}


@media all and (max-width:1200px) {
	.majorWrap > a {padding:20px}
}
@media all and (max-width:900px) {
	.majorWrap {flex-wrap:wrap}
	.head .logo {flex-direction:column}
	.head .logo span {margin-top:40px; margin-left:0}
	.majorWrap > a {width:100%}
}
@media all and (max-width:800px) {
	.head {margin-bottom:0}
	.head h2 {line-height:1.2em; margin-top:30px}
	.head h2 span {display:block}
}
@media all and (max-width:800px) {
	.head .logo span {font-size:18px}
	.head h2 {font-size:44px}
}
@media all and (max-width:600px) {
	.introList {display:block}
	.introList li:nth-child(1) {width:100%}
	.introList li:nth-child(2) {width:100%}
	.nList2 span {width:100%}
	.nList2 span.blank {display:none}
	.head .logo > img {width:180px}
	.nList2 li {display:block}
}

@media all and (max-width:500px) {
	.head {padding-bottom:0}
	.head h2 {font-size:30px}	
}