@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 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;
}

/* TangsBudaeJjigae */
@font-face {
    font-family: 'TangsBudaeJjigae';
    font-weight: 300;
    font-style: normal;
    src: url('/site/common/fonts/TangsBudaeJjigae_Light.eot');
    src: url('/site/common/fonts/TangsBudaeJjigae_Light.eot?#iefix') format('embedded-opentype'),
        url('/site/common/fonts/TangsBudaeJjigae_Light.woff2') format('woff2'),
        url('/site/common/fonts/TangsBudaeJjigae_Light.woff') format('woff'),
        url('/site/common/fonts/TangsBudaeJjigae_Light.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'TangsBudaeJjigae';
    font-weight: 500;
    font-style: normal;
    src: url('/site/common/fonts/TangsBudaeJjigae_Medium.eot');
    src: url('/site/common/fonts/TangsBudaeJjigae_Medium.eot?#iefix') format('embedded-opentype'),
        url('/site/common/fonts/TangsBudaeJjigae_Medium.woff2') format('woff2'),
        url('/site/common/fonts/TangsBudaeJjigae_Medium.woff') format('woff'),
        url('/site/common/fonts/TangsBudaeJjigae_Medium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'TangsBudaeJjigae';
    font-weight: 700;
    font-style: normal;
    src: url('/site/common/fonts/TangsBudaeJjigae_Bold.eot');
    src: url('/site/common/fonts/TangsBudaeJjigae_Bold.eot?#iefix') format('embedded-opentype'),
        url('/site/common/fonts/TangsBudaeJjigae_Bold.woff2') format('woff2'),
        url('/site/common/fonts/TangsBudaeJjigae_Bold.woff') format('woff'),
        url('/site/common/fonts/TangsBudaeJjigae_Bold.ttf') format("truetype");
    font-display: swap;
}

/* reset css*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; font-family:'Noto Sans KR', sans-serif; letter-spacing:-0.45px}
body {line-height:normal !important; word-break:keep-all}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
dl,ul,ol,menu,li {list-style:none}
caption, legend {visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content:none}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none}
a:focus, a:hover {text-decoration:none !important}
ins {background-color:#ff9; color: #000; text-decoration:none}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold}
del {text-decoration:line-through}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help}
table {border-collapse:collapse; border-spacing:0}
hr {display:block; height:1px; border:0; border-top: 1px solid #ccc; margin:1em 0; padding:0}
input, select {vertical-align:middle}
i {vertical-align:middle}
.width100 {width:100%}
.img-responisve {display:block; max-width:100%; height:auto}
.show560 {display:none}

/* common */
.width100 {width:100%}
.inline-flex {display:inline-flex}
.align-items-center {align-items:center}

/* header */
header {background:url('../images/headerBg.png') no-repeat; background-size:cover; height:480px}
header > .inner {max-width:1234px; height:100%; margin:0 auto; padding:0 15px; position:relative}
.headerTextWrap {text-align:center; max-width:560px; position:relative; z-index:99}
.headerTextWrap > h1 {padding-top:60px}
.headerTextWrap > h1 img {height:42px; margin:0 auto}
.headerTextWrap > h2 {font-family:'TangsBudaeJjigae'; font-size:58px; font-weight:700; color:#003E85; letter-spacing:-0.75px; margin-top:25px; line-height:120%}
.headerTextWrap > h2 span {font-family:'TangsBudaeJjigae'; color:#CE397A}
.headerTextWrap > h3 {font-size:15px; font-weight:500; color:#231F20; letter-spacing:1px; margin-top:40px}
.headerImg {position:absolute; top:16px; right:-50px}

/* containerMain */
.containerMain {width:100%; padding-bottom:35px; background:#EFF5FB; position:relative}
.containerMain > .inner {max-width:1234px; margin:0 auto; padding:0 15px}
.containerMain2 {width:100%; padding:50px 0; background:#EFF5FB; position:relative}
.containerMain2 > .inner {max-width:1234px; margin:0 auto; padding:0 15px; display:flex; justify-content:space-between}

.conWrap {display:flex}
.conLeft {width:100%; margin-top:-35px}
.btnWrap {display:flex; align-items:center; justify-content:space-between; margin-top:30px}
.btnWrap > a {display:flex; align-items:center; justify-content:space-between; padding:0 30px 0 35px; width:100%; height:70px; border-radius:10px; background:#003E85; font-family:'GmarketSansMedium'; font-size:24px; color:#fff; transition:.3s}
.btnWrap > a:last-child {background:#CE397A; margin-left:30px}
.btnWrap > a > i {font-size:12px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; color:#003E85; flex-shrink:0}
.btnWrap > a:last-child > i {color:#CE397A}
.btnWrap > a:hover {-webkit-transform:scale(1.05,1.05); -ms-transform:scale(1.05,1.05); transform:scale(1.05,1.05)}
.popupZone {margin-top:30px; display:flex; justify-content:center}
.popupZone .bx-wrapper {box-shadow:none; border:none; background:none}
.popupSlider .slide {display:flex !important}

.btnWrap2 {display:none; align-items:center; justify-content:space-between; padding:20px 15px}
.btnWrap2 > a {display:flex; align-items:center; justify-content:space-between; padding:0 30px 0 35px; width:100%; height:70px; border-radius:10px; background:#003E85; font-family:'GmarketSansMedium'; font-size:24px; color:#fff; transition:.3s}
.btnWrap2 > a:last-child {background:#CE397A; margin-left:30px}
.btnWrap2 > a > i {font-size:12px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; color:#003E85; flex-shrink:0}
.btnWrap2 > a:last-child > i {color:#CE397A}
.btnWrap2 > a:hover {-webkit-transform:scale(1.05,1.05); -ms-transform:scale(1.05,1.05); transform:scale(1.05,1.05)}


.conRight {flex-shrink:0; width:470px; margin-top:-35px; margin-left:31px}
.ban2 {margin-top:30px}
.ban2 > a {display:flex; align-items:center; justify-content:space-between; border-radius:10px; background:#36c2bf; width:100%; height:142px; padding:15px 15px 15px 30px; transition:.3s}
.ban2 > a img {border:1px solid #fff}
.ban2 > a > div > h3 {font-family:'GmarketSansMedium'; font-size:24px; color:#fff}
.ban2 > a > div > h2 {font-family:'GmarketSansBold'; font-size:32px; color:#fff}
.ban2 > a > div > h2 > span {font-family:'GmarketSansMedium'}
.ban2 > a > div > h2 > i {font-size:30px; margin-left:7px; margin-top:-4px}
.ban2 > a > div > h4 {font-size:14px; font-weight:400; color:#fff; margin-top:5px}
.ban2 > a:hover {-webkit-transform:scale(1.05,1.05); -ms-transform:scale(1.05,1.05); transform:scale(1.05,1.05)}

/* majorFooter */
.majorFooter {background:url('../images/majorWrapBg.png') #F5E8EE left calc(50% - 60px) bottom no-repeat}
.majorFooter > .inner {max-width:1234px; margin:0 auto; padding:34px 15px}
.majorWrap {display:flex; justify-content:space-between}
.majorWrap .majorLeft {max-width:525px; width:100%}
.majorWrap .majorRight {max-width:525px; width:100%}
.majorWrap h3 {font-family:'GmarketSansMedium'; font-size:30px; color:#231F20; letter-spacing:-0.5px; margin-bottom:20px}
.majorWrap h3 span {font-size:16px}
.majorBtnWrap {margin:0 -5px}
.majorBtn {display:inline-flex; align-items:center; justify-content:space-between; max-width:166px; width:100%; height:47px; font-size:14px; font-weight:500; color:#231F20; background:#fff; padding:0 14px; transition:.3s; letter-spacing:-0.75px; margin:5px}
.majorBtn:hover {background:#003E85; color:#fff}
.majorBtn2 {display:inline-flex; align-items:center; justify-content:space-between; max-width:160px; width:100%; height:47px; font-size:14px; font-weight:500; color:#231F20; background:#fff; padding:0 14px; transition:.3s; letter-spacing:-1px; margin:5px}
.majorBtn2:hover {background:#003E85; color:#fff}
.majorBtn span {color:#A71532; font-size:11px}

/* footer */
#footerWrap {background:#575757}
footer {max-width:1234px; margin:0 auto; padding:35px 15px; box-sizing:border-box; overflow:hidden; word-break:keep-all; position:relative; display:flex}
footer h5 {margin-right:75px}
footer address {font-size:14px; font-style:400; color:rgba(255,255,255,0.8)}
footer address span {padding:0 10px}
footer p.copy {font-size:13px; color:#fff; letter-spacing:0; font-weight:400; color:rgba(255,255,255,0.8)}
.webwatch {position:absolute; right:0; top:35px}


/* popupPre */
#popupPre {background:rgba(0,0,0,0.9); position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999; text-align:center; cursor:pointer; display:none}
#popupPre > div {max-width:752px; margin:330px auto 0 auto; position:relative}
#popupPre > div a.pre_close {position:absolute; top:20px; right:20px}
#popupPre2 {background:rgba(0,0,0,0.9); position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999; text-align:center; cursor:pointer; display:none}
#popupPre2 > div {max-width:752px; margin:330px auto 0 auto; position:relative}
#popupPre2 > div a.pre_close2 {position:absolute; top:20px; right:20px}

@media screen and (max-width:1300px) {
	header {height:420px}
	.headerTextWrap > h1 {padding-top:60px}
	.headerTextWrap > h3 {margin-top:45px}
	.headerImg {top:auto; bottom:-71px; right:0px; max-width:900px}
	.headerImg > img {max-width:100%}
	.conLeft {width:60%}
	.conRight {flex-shrink:1; width:40%}
}

@media screen and (max-width:1024px) {
	header {overflow:hidden; height:500px}
	.headerTextWrap > h1 {padding-top:25px}
	.headerTextWrap {margin-left:0; max-width:100%}
	.headerTextWrap > h2 {margin-top:20px; font-size:54px}
	.headerTextWrap > h3 {margin-top:15px}
	.headerImg {max-width:100%; right:auto; background:url('../images/headerImg.png') left calc(50% - 90px) bottom no-repeat; width:100%; height:360px; background-size:690px}
	.headerImg > img {position:relative; display:none}
	.headerTextWrap .btnWrap {display:none}
	.btnWrap2 {display:flex}
	.conWrap {flex-wrap:wrap}
	.conLeft {width:100%}
	.conRight {width:100%; margin-top:30px; margin-left:0px}
	.majorFooter {background-position:left calc(50% - 130px) bottom}
}

@media screen and (max-width:900px) {
	.headerTextWrap > h1 {padding-top:40px; max-width:230px; text-align:center; margin:0 auto}
	.majorFooter {background-image:none}
}

@media screen and (max-width:768px) {	
	.majorWrap {flex-wrap:wrap}
	.majorWrap .majorLeft {max-width:100%}
	.majorWrap .majorRight {max-width:100%; margin-top:30px}
	.majorWrap h3 {margin-bottom:10px}
	footer {padding:20px 15px; text-align:center}
	footer h5 {display:none}
	.webwatch {position:relative; right:0; bottom:0; top:10px}
	
}

@media screen and (max-width:700px) {
	.containerMain2 > .inner {flex-wrap:wrap}
	.containerMain2-left {margin-bottom:30px}
	.containerMain2-left, .containerMain2-right {width:100% !important}
}
@media screen and (max-width:640px) {
	.btnWrap > a {padding:0 20px; height:80px; font-size:22px}
	.btnWrap2 > a {padding:0 20px; height:80px; font-size:22px}
	.popupZone, .conRight, .ban2 {margin-top:20px}
	footer {flex-wrap:wrap; justify-content:center}
}

@media screen and (max-width:520px) {
	header {height:450px}
	.headerImg {background:url('../images/headerImg.png') left calc(50% - 70px) bottom no-repeat; background-size:550px}
}
@media screen and (max-width:425px) {
	.btnWrap > a {padding:0 10px; height:70px; font-size:20px}
	.btnWrap2 > a {padding:0 10px; height:70px; font-size:20px}
	.headerImg {background-size:520px}
}

@media screen and (max-width:380px) {
	.ban2 > a {padding:15px}
	.majorBtn, .majorBtn2 {max-width:100%}
}