@charset "utf-8";

@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

html,body {font-size:20px;	margin:0; padding:0; scroll-behavior: smooth;}
section,article,header,footer,nav,
div,p,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dd,dt,
img,a,
form,input,select,option,fieldset,textarea,button,label,
figure,video {
	margin:0;
	padding:0;
	border:0;
	background-repeat:no-repeat;
	background-position:center;
	background-color:transparent;
	line-height:1;
	text-decoration:none;
	font-family:'Pretendard','맑은 고딕',돋움,'Apple SD Gothic Neo',sans-serif;
	font-weight:500;
	color:#222;
	box-sizing:border-box;
	text-size-adjust:none;
	list-style:none;
	word-break: keep-all;
    letter-spacing: 0;
}
a:link, a:visited,
a:hover, a:focus, a:active {
	text-decoration:none;
}

dl dd a {font-size:inherit; font-weight:inherit; color: inherit;}

table {width:100%; border-spacing:0; border-collapse:collapse;}

/* 폼초기화 */
select,button,input[type=text],input[type=submit],textarea	{
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/* border-radius:0; */
}

select	{	box-sizing:border-box;}
/*크롬사라피*/
@media screen and (-webkit-min-device-pixel-ratio:0){
	select	{	padding-right:22px !important;	background:url(/images/bg_select.svg) no-repeat right center; background-size:contain;}
}
/*파이어폭스*/
@-moz-document url-prefix(){
	select	{	padding-right:22px !important;	background:url(/images/bg_select.svg) no-repeat right center; background-size:contain;}
}

/*========= input ===========*/
.unit {position: absolute; right:0.5rem; top:50%; transform:translateY(-50%); font-size: 0.75rem;}
.ip_comm	{display:block; width:100%; height:2.4rem; padding:0 0.75rem; border:0; background-color:transparent; border-radius:0.2rem; font-size:0.8rem; box-sizing:border-box; outline:none;}
.ip_comm:focus	{background-color: #ffffee;}
.ip_comm.tel	{float:left; width:30%;}
.ip_comm.tel+.bar	{float:left; width:5%; text-align:center; line-height:2.4rem; }
.set_tel	{overflow:hidden;}
select.ip_comm	{padding-right:0;}
textarea.ip_comm	{height:12.7rem; padding:0.5rem; line-height:1.5;}
.set_agree {display:flex; align-items: center; justify-content: flex-start;}
.set_agree label,
.set_agree a {font-size: 0.75rem; margin-left:0.25rem; color: #888;}
.btn_sm	{display:flex; align-items: center; justify-content: center; text-align: center; width:8rem; height:3rem; background-color: var(--color-1); border-radius:0.25rem; font-size: 0.9rem; font-weight: 700; color:#fff; box-shadow: 0.25rem 0.25rem 0.75rem rgba(0,0,0,0.3)}


.center	{width:1280px; margin:0 auto;}
@media screen and (max-width:1280px) {
    .center	{width:94%; padding:0%;} 
}


.clear::after	{content:""; display:block; clear:both;}
.hidden {position:absolute; left:-100%; top:0%; overflow:hidden; width:0; height:0; font-size:0; text-indent:-9999%; line-height:0;}

.btn_nav {position: relative; display:flex; align-items: center ;justify-content:center; width:30px; cursor: pointer}
.on .btn_nav {position:fixed;right:15px; top:15px; z-index: 110}
.btn_hbg {position: relative; display:flex; flex-direction: column; justify-content: space-between; width:100%; height:19px;}
.btn_hbg div,
.btn_hbg:before,
.btn_hbg:after {content:""; position:relative; display:block; width:100%; height:2px; background-color:#444; transition:all 0.3s}
.on .btn_hbg div {background-color:transparent;}
.on .btn_hbg:before {top:50%; transform:rotate(45deg);}
.on .btn_hbg:after {top:calc(-50% + 1px); transform:rotate(-45deg);}


:root{
    
    --color-1:#0055a7;
    --color-2:#002970;
    --color-3:#f7fbff;
    
    --color-win:#0078d4;
    --color-and:#34a853;
    --color-apl:#000;
    
    --kakao-y:#ffe600;
    --kakao-b:#3b1e1e;
    --naver-g:#39ab37;
    --fb-b:#445e98;
    
    --radius-s:0.5rem;
    --radius-m:1rem;
    --radius-l:2.5rem;
}





#wrapper { width:100%; background-color: #fff;}


/*========= header ===========*/

#header {position: fixed; left:0; top:0; width:100%;  z-index: 200; background-color: rgba(255,255,255,0.6);}

#header .hd_top {padding:10px 0; background-color: #eee;}
#header .hd_top .center {display:flex; align-items: center; justify-content: flex-start}
#header .hd_top dt,
#header .hd_top dd {font-size:1.5rem; color: #888; font-weight: 300;}
#header .hd_top dt {margin-right:0.5rem; font-weight: 500;}

#header .hd_btm {padding:0.4rem 0;}
#header .hd_btm.center {display:flex; align-items: center; justify-content: space-between;}
#header .hd_btm .logo img {width:auto; height:3rem; margin-bottom:0.25rem;}
/*#header .hd_btm .logo img {width:auto; height:3rem; margin-bottom:0.25rem;}*/
#header .hd_btm .logo div {font-size: 1.2rem; font-weight:400;}


#header nav {display:flex; align-items: center; justify-content: flex-end}
#header nav a {display: inline-block; margin-left:50px; font-size:1.1rem; }

.btn_nav {display: none;}



/*========= main ===========*/
.main > section {padding:120px 0}

.main_title {font-family: 'GmarketSans'; line-height:1.2; font-size: 1.8rem; font-weight: 700;}
.main_title span {color: var(--color-1);}


.cont {display:flex; align-items: flex-start; justify-content: space-between;}
.cont .main_title {width: 14rem;}
.cont article {width: 50rem;}


/*========= main1 ===========*/
.main .main1 {position: relative; overflow:hidden; background-color: #f8e3dd; padding-top:11rem; height:100vh; }
.main1 h2 {font-size: 2.5rem; line-height:1.3; font-family: 'GmarketSans'; font-weight: 500; color: var(--color-1);}
.main1 h2:nth-child(3) {color: var(--color-2);}
.main1 h3 {margin-top:1rem; font-size:1.3rem; color: #555;}

.main1 .background {position: absolute; left:0; top:0; width:100%; height:100%;}

@keyframes cloud {
    0% {margin-top:-2.5rem;}
    50% {margin-top:0.5rem;}
    100% {margin-top:-0.5rem;}
}@keyframes cloud2 {
    0% {margin-top:-1.5rem;}
    50% {margin-top:0rem;}
    100% {margin-top:-0.5rem;}
}
@keyframes crt {
    0% {margin-top:-2rem;}
    50% {margin-top:0.25rem;}
    100% {margin-top:0rem;}
}
@keyframes wind {
    0% {transform:translateX(0)}    
    99% {transform: translateX(-50vw)}    
    100% { transform:translateX(50vw)} 
}

.wrap_cloud {position: absolute; animation-duration:15s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function:linear }
.wrap_cloud .cloud { animation-name:cloud; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function:ease-in-out }
.wrap_cloud:nth-child(2n) { animation-name:cloud2;}
.wrap_cloud .crt { animation-name:crt; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function:ease-in-out }
.wrap_cloud {}
.wrap_cloud:nth-child(1) {left:10%; top:10%;  }
.wrap_cloud:nth-child(2) {left:45%; top:75%;  }
.wrap_cloud:nth-child(3) {left:90%; top:20%;  }
.wrap_cloud:nth-child(4) {left:10%; top:20%;  }
.wrap_cloud:nth-child(5) {left:85%; top:90%; }
.wrap_cloud:nth-child(6) {left:56%; top:55%; }
.wrap_cloud:nth-child(7) {left:30%; top:60%; }
.wrap_cloud:nth-child(8) {left:5%; top:70%; }
.wrap_cloud:nth-child(9) {left:45%; top:10%; }

.wrap_cloud:nth-child(1) .cloud {animation-duration:2.2s;}
.wrap_cloud:nth-child(2) .cloud {animation-duration:1.2s;}
.wrap_cloud:nth-child(3) .cloud {animation-duration:2s;}
.wrap_cloud:nth-child(4) .cloud {animation-duration:1.8s;}
.wrap_cloud:nth-child(5) .cloud {animation-duration:1.9s;}
.wrap_cloud:nth-child(6) .cloud {animation-duration:1.1s;}
.wrap_cloud:nth-child(7) .cloud {animation-duration:1.5s;}
.wrap_cloud:nth-child(8) .cloud {animation-duration:2.3s;}
.wrap_cloud:nth-child(9) .cloud {animation-duration:2.1s;}

.crt {position: absolute; }
.wrap_cloud:nth-child(6) .crt {left:10%; bottom:50%; animation-duration:1.1s;}
.wrap_cloud:nth-child(7) .crt {left:30%; bottom:50%; animation-duration:1.5s;}
.wrap_cloud:nth-child(8) .crt {left:40%; bottom:40%; animation-duration:2.3s;}
.wrap_cloud:nth-child(9) .crt {left:30%; bottom:30%; animation-duration:2.1s;}


/*========= main2 ===========*/
@keyframes pig {
    0% {transform:translateY(0rem)}
    70% {transform:translateY(-10%)}
    80% {transform:translateY(-90%)}
    100% {transform:translateY(0rem)}
}
.main2 {display:flex; flex-direction: column; justify-content: center; background-color: var(--color-3);}
.main2 article {position: relative; }
.main2 figure {position: absolute; right:-1.5rem; bottom:-1.5rem;}
.main2 figure img {margin:0 -0.5rem; animation-name:pig; animation-iteration-count: infinite; animation-timing-function:ease-in-out }
.main2 figure img:nth-child(1) {animation-delay:0.2s; animation-duration: 3s; }
.main2 figure img:nth-child(2) {animation-delay:0.4s; animation-duration: 2s; }
.main2 figure img:nth-child(3) {animation-delay:0.6s; animation-duration: 2.5s; }


.tbl {background-color: #fff;}
.tbl th,
.tbl td {min-height:3.5rem; padding:1rem; line-height:1.5; word-break: keep-all}
.tbl th {width: 25%; text-align: center; font-weight: 600;}
.tbl td {color: #444;}
.tbl td.paper {padding-right:15.5rem;}

.tbl tr:nth-child(2n-1) th,
.tbl tr:nth-child(2n-1) td {background-color: #e8f0f8;}

/* main_mobile */
.main_mobile {display:flex; flex-direction: column; justify-content: center;}
.main_mobile .center {display:flex; align-items: center; justify-content: center}
.main_mobile article,
.main_mobile figure {width: 20rem;}
.main_mobile figure {text-align: center;}
.main_mobile .main_title {font-family: 'GmarketSans'; font-size: 2rem;}
.main_mobile p {margin-top:0.5rem; font-size: 1.1rem; line-height:1.5; color: #555;}

.main4.main_mobile .center {flex-direction: row-reverse;}



/* main5 */
.main5 {display:flex; flex-direction: column; justify-content: center; background-color: var(--color-3);}
.main5 .apply {width:40rem;}
.main5 .apply ul {position: relative;}
.main5 .apply li {width: 19rem; margin-bottom:1.5rem;}
.main5 .apply li.set_memo {position: absolute; right:0; top:0;}
.main5 .apply li label {display: block; margin-bottom:0.4rem; font-size: 0.75rem; color: #555;}
.main5 .apply li fieldset {position: relative; overflow:hidden; border-radius:0.25rem; border:0.05rem solid #ddd; background-color: #fff;}
.main5 .apply .set_btn {display:flex; align-items: center; justify-content: space-between;}

#main6 { background-color: #fff;}

/* footer */
#footer {padding:2.5rem 0; background-color: #001427;}
#footer h2 {margin-bottom:0.9rem; font-size: 0.9rem; font-weight: 700; color: #eee;}
#footer ul {margin-bottom:2rem;}
#footer ul:last-child {margin-bottom:0rem;}
#footer li {position: relative; margin-bottom:0.5rem; padding-left:0.75rem; font-size: 0.75rem; font-weight:300; line-height:1.4; color:#fff;}
#footer li:last-child {margin-bottom:0;}
#footer li::before {content:"-"; position: absolute; left:0; top:0;}
/*#footer .info {margin-bottom:2rem}*/
#footer .info li {position: static; padding:0;}
#footer .info li strong {font-weight: 600;}

#footer table {margin-bottom:40px;}
#footer table th,
#footer table td {padding:15px 15px; border:1px solid #fff; line-height:1.4; font-size: 14px; font-weight: 300; color: #fff;}
#footer table th {font-weight: 500;}

/* quick */
#quick {overflow:hidden; position: fixed; right:20px; bottom:20px; z-index: 98; border-radius:10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);}
#quick a {display:flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 70px; height: 80px; background-color: #222; border-bottom:1px solid rgba(255,255,255,0.2); font-size: 13px; font-weight: 400; color: #fff; transition:0.5s;}
#quick a:last-child {border-bottom:0; background-color:var(--kakao-y); color:var(--kakao-b)}
#quick a:hover {background-color: var(--color-2);}
#quick a:last-child:hover { background-color:var(--kakao-y); color:var(--kakao-b)}
#quick a img {display:block; margin:0 auto; margin-bottom:10px; width:auto; height:30px;}
/*
#quick a:nth-child(1) i {color: #f5989d;}
#quick a:nth-child(2) i {color: #6dcff6;}
#quick a:nth-child(3) i {color: #fff600;}
*/

/* sub */

/*========= header ===========*/

.sub #header {position: static; background-color: rgba(255,255,255,0.6);}

#contents.sub {padding:80px 0 150px 0; background-color: var(--color-3);}





/* 애니메이션 */

@keyframes up {
   100% {bottom:0; opacity:1}
}
@keyframes down {
   100% {top:0; opacity:1}
}
@keyframes left {
   100% {right:0; opacity:1}
}
@keyframes right {
   100% {left:0; opacity:1}
}
@keyframes fade {
   100% {opacity:1}
}

.ani {position: relative; opacity:0;}
.ani.btn_comm {position: absolute;}
.ani.up {bottom:-5rem;}
.ani.down {top:-5rem;}
.ani.left {right:-5rem;}
.ani.right {left:-5rem;}

.active .ani,
.active.ani { animation-duration: 1s; animation-fill-mode:forwards;}
.active .ani.up,
.active.ani.up {animation-name:up}
.active .ani.down,
.active.ani.down {animation-name:down}
.active .ani.left,
.active.ani.left {animation-name:left}
.active .ani.right,
.active.ani.right {animation-name:right}
.active .ani.fade,
.active.ani.fade {animation-name:fade}

.ani:nth-of-type(1) { animation-delay:0.1s;}
.ani:nth-of-type(2) { animation-delay:0.3s;}
.ani:nth-of-type(3) { animation-delay:0.5s;}
.ani:nth-of-type(4) { animation-delay:0.7s;}
.ani:nth-of-type(5) { animation-delay:0.9s;}
.ani:nth-of-type(6) { animation-delay:1.1s;}
.ani:nth-of-type(7) { animation-delay:1.3s;}
.ani:nth-of-type(8) { animation-delay:1.5s;}
.ani:nth-of-type(9) { animation-delay:1.7s;}
.ani:nth-of-type(10) { animation-delay:1.9s;}
.ani:nth-of-type(11) { animation-delay:2.1s;}
.ani:nth-of-type(12) { animation-delay:2.3s;}
.ani:nth-of-type(13) { animation-delay:2.5s;}
.ani:nth-of-type(14) { animation-delay:2.7s;}
.ani:nth-of-type(15) { animation-delay:2.9s;}
.ani:nth-of-type(16) { animation-delay:3.1s;}
.ani:nth-of-type(17) { animation-delay:3.3s;}
.ani:nth-of-type(18) { animation-delay:3.5s;}
.ani:nth-of-type(19) { animation-delay:3.7s;}
.ani:nth-of-type(20) { animation-delay:3.9s;}




.sub_list  {}
.sub_list::after  {content:""; display: block; clear: both;}
.sub_list li {position: relative; float:left; width:calc((100% - 3.75rem) / 4); margin-right:1.25rem; margin-bottom:3.125rem;}
.sub_list li:nth-of-type(4n) {margin-right:0; }
.sub_list li a { display:block; }
.sub_list li input {position: absolute; left:0.3125rem; top:0.3125rem; z-index: 1;}
.sub_list li .tit {margin-top: 1.5625rem; text-align: center; font-size:1.067rem; font-weight: 600; }
.sub_list li .date {margin-top:0.75rem; font-size:0.867rem; color: #888;}
.sub_list li .img_cont {}
.sub_list li .img_cont img {display: block; width:100%; height: auto;}



.ok {padding:2.5rem 0 5rem 0; text-align: center;}
.ok > div {width:100%; max-width:30rem; margin:0 auto; margin-bottom:2.5rem; background-color: #fff; text-align: center; box-shadow: 0.25rem 0.25rem 0.75rem rgba(0,0,0,0.2)}
.ok .done {padding:4rem 2rem;}
.ok figure {margin-bottom:1rem; font-size: 3rem; color:var(--color-1)}
.ok h2 {font-size: 1.3rem; font-weight: 700; color: #000;}
.ok dl {margin-top:1.5rem; text-align: center;}
.ok dl dt {width:fit-content;margin:0 auto; padding:0.4rem 0.75rem; border-radius:5rem; background-color: #555; font-size: 0.7rem; color: #fff;}
.ok dl dd {margin-top:0.5rem; line-height:1.4; font-size: 0.8rem; color: #555;}
.ok .cs {display:flex; align-items: center; justify-content: center; padding:1.25rem; background-color: var(--color-1);}
.ok .cs h3,
.ok .cs a {color: #fff;}
.ok .cs h3 {margin-right:0.5rem; font-size: 0.8rem; }
.ok .cs a {font-size: 1rem; font-weight: 600; }
.ok .btn_main {font-size: 0.75rem;  text-decoration: underline}




/* 모달팝업 */
#modal-content {display:none;width:600px;max-width:90%;height:500px;box-shadow:0 5px 15px rgba(0, 0, 0, 0.5);background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 0;outline: 0 none}
#modal-content .modal-header {height:20px;border-bottom:1px solid #e5e5e5;padding:15px}
#modal-content .modal-header h4 {margin:0;font:bold 1.125rem 'Malgun Gothic';color:#5d5d5d}
#modal-content .modal-body {padding:15px}
#modal-content .modal-body .b-iframe {width:570px;max-width:100%;height:430px}
#modal-content .b-close{float:right;font:bold 21px Arial;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content .b-close:hover, #modal-content .b-close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}
p.modal-frame-content{width:550px;max-width:100%;height:400px;padding-right:5px;overflow-x:hidden;overflow-y:auto;font:normal 12px 'Malgun Gothic';color:#555;line-height:1.65em}
/*.popbtn {text-decoration:none;cursor:pointer;margin:0 5px}*/
.b-modal __b-popup1__ {max-width:100%}
#modal-content .modal-header,#modal-content .modal-body{box-sizing:content-box !important}

#modal-content2 {display:none; width:400px; height:560px; background:rgba(54,54,54,0.9); border-radius:4px; border:0px;}
#modal-content2 .modal-header {position:relative; height:28px;}
#modal-content2 .modal-body2 {padding:0;}
#modal-content2 .b-close{position:absolute;top:0;right:16px;font-size:2.5rem;font-weight:900;font-family:Tahoma;color:#fff;opacity:.5;filter:alpha(opacity=50);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content2 .b-close:hover, #modal-content .b-close:focus{cursor:pointer;opacity:1;filter:alpha(opacity=100)}
#modal-content2 .modal-body2 .b-iframe {width:400px;height:560px;}