@import url("basic.css");



/*-------------------------------------------------
Author : sehyun oh
Create date : 2021. 05. 25.
-------------------------------------------------*/

/* 메인 레이아웃 */
#wrap {position:relative; height:100vh; font-weight:400; word-break:keep-all; word-wrap:break-word; image-rendering:-webkit-optimize-contrast;}
#wrap :before,
#wrap :after {image-rendering:-webkit-optimize-contrast;}

.container {max-width:1220px; margin:0 auto;}
.container:after {clear: both; display: block; content: "";}

#contents {position: relative; line-height: 1;}

/* header */
#header {position:absolute; top:0; left:0; z-index:2; width:100%;}
#header h1 {padding-top:3rem; text-align:center;}
#header h1 .logo {display:inline-block; width:151px; height:47px; background:url(logo.png) no-repeat left top; vertical-align:top;}

/* section01 */
.section01 {position:relative; z-index:1; height:26rem; /*height:24.75rem;*/ padding-top:7rem; background:url(main_bg02.jpg) no-repeat center; background-size:cover; text-align:center;}
.section01:before {content:""; display:inline-block; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background-color:#0089fc; background-image:linear-gradient(-149deg, #0089fc, #00c0de 80%), url(main_bg.png); background-repeat:no-repeat; background-size:cover; opacity:0.95;}
.section01:after {content:""; display:inline-block; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background:url(main_bg.png) no-repeat center; background-size:cover;}
.section01 > .container {position:relative;}
.section01 .txt_wrap {padding-top:1.75rem; border-top:1px solid rgba(255,255,255,0.3);}
.section01 .txt_wrap .top p {font-family:'Nanum Gothic'; font-weight:200; font-size:1.2rem; line-height:1.5; color:#fff;}
.section01 .txt_wrap .top p span {font-weight:700;}
.section01 .txt_wrap .bottom {margin-top:1rem; padding:1.75rem 3rem 0.75rem 3rem; border-radius:1rem; background:rgba(255,255,255,0.2) url(main_pttrn.png) repeat; line-height:1.6;}
.section01 .txt_wrap .bottom > p {font-size:1rem; color:#fff; text-shadow:#00345f 1px 1px 0.25rem;}
.section01 .txt_wrap .bottom > p span {font-weight:700;}
.section01 .txt_wrap .bottom > .time {display:block; max-width:100%; margin:1.0rem auto 0; padding:0.5rem; border-radius:2rem; background:#fff;}
.section01 .txt_wrap .bottom > .time p {font-weight:600; font-size:0.8rem; letter-spacing:-0.01rem; color:#007bc7;}
.section01 .txt_wrap .bottom > .time p.notice {font-size: 1.1rem;font-weight: bold;letter-spacing: 0.5px;}
.section01 .txt_wrap .bottom > p.notify {margin-top: 0.7rem; font-size: 0.85rem; color: #ffff00; position: relative;}
.section01 .btn_link {display:block; overflow:hidden; position:absolute; top:calc(100% + 2.5rem); left:0; right:0; width:20.1rem; height:4.3rem; line-height:4.3rem; margin:0 auto; padding-left:5rem; border-radius:1.3rem; background:#fff url(btn_link_ico.png) no-repeat 1.5rem center; box-shadow:rgba(0,72,117,0.3) 0.15rem 0.15rem 0.75rem; font-family:'Nanum Gothic'; font-weight:700; font-size:1rem; color:#007bc7; text-align:left;}
.section01 .btn_link:before {content:url(btn_link_bg.png); position:absolute; top:0; right:0; width:auto; height:100%;}
.section01 .btn_link i {position:absolute; top:0; bottom:0; right:1.5rem; height:1.4rem; margin:auto 0; font-size:1.4rem; color:#007bc7; -webkit-transition:all 0.1s; -ms-transition:all 0.1s; transition:all 0.1s;}
.section01 .etc_wrap {padding-top:1.3rem; color: white; line-height: 1.5rem;}
.section01 .etc_wrap p {font-size: 1.1rem; font-weight: bold;}
/* section01 : action */
.section01 .btn_link:hover i,
.section01 .btn_link:focus i {right:1rem;}
.section01 .txt_wrap .bottom .link_wrap {overflow:hidden; margin-top:0.7rem; }
.section01 .txt_wrap .bottom .link_wrap a {display:inline-block; position:relative; width:15rem; height:2rem; line-height:1.0rem;  padding-top:0.5rem; outline:0; border-radius:0.8rem; background:#4588b5; font-family:'Nanum Gothic'; font-weight:600; font-size:0.7rem; letter-spacing:-0.01rem; color:#fff;}

.layer_popup {position:absolute; left:30%; top:120px; width:570px; padding:10px; border:1px solid #1f4160; background-color:#fff; border-radius: 10px; z-index:2; display:none;}
.layer_popup .inxBox_main .x_1 {position:absolute; width:40px;height: 40px; right:0px; top:0px; cursor:pointer;}
.layer_popup .inxBox_main .x_1:before, .x_1:after {position: absolute;content:' ';height: 30px; right:17px; top:5px; width: 2px;background-color: #000;}
.layer_popup .inxBox_main .x_1:before {transform: rotate(45deg);}
.layer_popup .inxBox_main .x_1:after {transform: rotate(-45deg);}
.layer_popup .inxBox_main{position: relative; width:calc(100% - 20px); font-family: "Nanum Gothic"; font-size: 14px; color:#333; line-height:180%;  background-color:#fff;  padding:10px;}
.layer_popup .inxBox_main span.txt_18px{font-size: 18px;}
.layer_popup .inxBox_main span.txt_bold{font-family: "Nanum GothicB"; color:#000;}
.layer_popup .inxBox_main span.txt_blue{font-family: "Nanum GothicB"; color:#3c40d1;}
.layer_popup .inxBox_main span.txt_red{font-family: "Nanum GothicB"; color:#df0000;}
.layer_popup .inxBox_main span.txt_orange{font-family: "Nanum GothicB"; color:#c44a01;}
.layer_popup .inxBox_main span.txt_green{font-family: "Nanum GothicB"; color:#1b864d;}
.layer_popup .pop_foot_area {position:relative; width:100%; height:28px; text-align:right; font-size:13px; color:#000; margin-top:20px;}
.layer_popup .pop_foot_area a {display:inline-block; width:90px; height:28px; background-color:#02446f; font-family:'나눔고딕', 'Nanum Gothic', Dotum, arial, sans-serif; font-size: 14px; color:#fff; line-height:200%; text-align:center; font-weight:bold; text-decoration:none; margin-right:18px; cursor:pointer;}




/* section02 */
.section02 {padding:2.3rem 0 1rem; background:#f5f7fa;}
.section02 .box {width:19rem; height:11.45rem; padding:1.0rem; border-radius:1rem; background:#fff; box-shadow:rgba(0,72,117,0.2) 0.15rem 0.15rem 1rem;}
.section02 .box01 {float:left; margin-right:1.2rem; width:20.3rem;}
.section02 .box02 {float:left; margin-right:1.2rem;}
.section02 .box03 {float:right;}
.section02 .box .img {display:inline-block; width:3.25rem; height:3.25rem; margin-right:0.5rem; border-radius:50%; background:#007bc7; box-shadow:rgba(0,72,117,0.2) 0.15rem 0.15rem 0.75rem; vertical-align:middle;}
.section02 .box .img img {width:100%; height:100%;}
.section02 .box .txt {display:inline-block; width:calc(100% - 5.5rem); font-family:'Nanum Gothic'; font-weight:600; font-size:0.9rem; letter-spacing:-0.05rem; line-height:1.6; color:#000; vertical-align:middle;}
.section02 .box .txt span {display:block; margin-top:0.25rem; font-weight:700; font-size:1.1rem;}
.section02 .box .exp_wrap {overflow:hidden; margin-top:0.2rem;}
.section02 .box .exp_wrap .eTxt{background:url(bullet_grayDot.jpg) no-repeat left 0.2rem; font-family:'Nanum Gothic'; font-weight:600; font-size:0.65rem; letter-spacing:-0.01rem; color:#4b4b4b; padding-left:0.4rem; margin-top:0.5rem;}
.section02 .box .exp_wrap .eTxt2{background:url(bullet_grayDot.jpg) no-repeat left 0.4rem; font-family:'Nanum Gothic'; font-weight:600; font-size:0.65rem; letter-spacing:-0.01rem; color:#4b4b4b; padding-left:0.4rem; margin-top:0.5rem; line-height:1.6;}
.section02 .box .link_wrap {overflow:hidden; margin-top:0.7rem; }
.section02 .box .link_wrap a {display:block; position:relative; width:100%; height:3rem; line-height:1.0rem;  padding-top:0.5rem; outline:0; border-radius:0.8rem; background:#77a1bd; font-family:'Nanum Gothic'; font-weight:600; font-size:0.7rem; letter-spacing:-0.01rem; color:#fff;}
.section02 .box .link_wrap a:first-child {float:left;}
.section02 .box .link_wrap a + a {float:right;}
.section02 .box .link_wrap a i {position:absolute; top:0; bottom:0; right:0.9rem; height:1.2rem; margin:auto 0; font-size:1.2rem;}
.section02 .box .link_wrap .txt_wrap {display:inline-table; float:right; width:12.75rem; height:4rem; table-layout:fixed;}
.section02 .box .link_wrap .txt_wrap .inner {display:table-cell; vertical-align:middle;}
.section02 .box .link_wrap .txt_wrap span {display:inline-block; width:3.75rem; height:1.2rem; line-height:1.15rem; margin-bottom:0.35rem; border-radius:1rem; background:#007bc7; font-weight:600; font-size:0.7rem; letter-spacing:-0.03rem; color:#fff; text-align:center;}
.section02 .box .link_wrap .txt_wrap p {font-size:0.7rem; letter-spacing:-0.03rem; line-height:1.3; color:#77a1bd;}
/* section02 : action */
.section02 .box .link_wrap a:hover,
.section02 .box .link_wrap a:focus {background:#4187b6;}

/* section03 */
.section03 {background:#f5f7fa;}
.section03 .txt_wrap {padding-bottom: 1rem; border-top:1px solid rgba(255,255,255,0.3);}
.section03 .txt_wrap .bottom {border-radius:1rem; background:rgba(255,255,255,0.2) url(main_pttrn.png) repeat; line-height:1.6; text-align: center;}
.section03 .txt_wrap .bottom > p {font-size:1rem; color:#000; }

/* footer */
#footer {padding:1.5rem 0 2.5rem; background:#22272d; text-align:center; font-family: "Nanum Gothic"; font-weight:600;}
#footer address {font-size:0.8rem; color:#c5c5c5;}
#footer .copyright {margin-top:0.5rem; font-size:0.7rem; color:#8f969c;}

/* RESPONSIVE */
@media (min-width: 1201px) and (min-height: 1101px){

	/* 메인 레이아웃 */
	.section02 {height:calc(100vh - 34.2rem); padding:0;}
	.section02 > .container {display:table; width:100%; height:100%;}
	.section02 > .container > .inner {display:table-cell; vertical-align:middle;}
}

@media (max-width: 1280px){

	/* 메인 레이아웃 */
	.container {max-width:none; width:96%;}
	.section02 > .container {width:96%;}

	/* section01 */
	.section01 .txt_wrap .bottom {padding-left:6rem; padding-right:6rem;}
	.section01 .txt_wrap .bottom > .time p.notice {font-size: 1.0rem;}
	.section01 .etc_wrap {padding-top:0.5rem;}

	/* section02 */
	/*
	.section02 .box,
	.section02 .box .link_wrap .txt_wrap {width:49%;}
	.section02 .box .link_wrap a {width:48%; padding-left:1.2rem;}
	.section02 .box .link_wrap a i {right:0.7rem;}
	*/
	.section02 {padding:3.6rem 0 2rem;}
	.section02 .box {width:100%; height:auto;}
	.section02 .box + .box {margin-top:1.3rem;}
	.section02 .box01,
	.section02 .box02 {float:none;}
	.section02 .box .link_wrap a {padding-left:0; float:none !important; margin:auto; width:49%; height:3rem; /* line-height:3rem; */}
	.section02 .box .link_wrap .txt_wrap {width:49%; height:3rem;}
}

@media (max-width: 1200px){

	/* section01 */
	.section01 {height:27rem;}
	.section01 .txt_wrap .bottom {padding-left:1rem; padding-right:1rem;}
	.section01 .txt_wrap .bottom > .time p.notice {font-size: 0.9rem;}
	.section01 .btn_link {height:4rem; line-height:4rem;}
	.section01 .etc_wrap {padding-top:1.3rem;}
	.section01 .etc_wrap p {font-size: 0.9rem;}

	/* section02 */
	.section02 {padding:3.6rem 0 2rem;}
	.section02 .box {width:100%; height:auto;}
	.section02 .box + .box {margin-top:1.3rem;}
	.section02 .box01,
	.section02 .box02 {float:none;}
	.section02 .box .link_wrap a {padding-left:0; float:none !important; margin:auto; width:49%; height:3rem; /* line-height:3rem; */}
	.section02 .box .link_wrap .txt_wrap {width:49%; height:3rem;}
}

@media (max-width: 768px){

	/* section01 */
	.section01 {height:28rem;}
	.section01:after {display:none;}
	.section01 .txt_wrap .bottom > p {font-size:0.9rem;}
	.section01 .txt_wrap .bottom > .time p.notice {font-size: 0.75rem;}
	.section01 .etc_wrap {padding-top:0.5rem;}
	.section01 .etc_wrap p {font-size: 0.9rem;}
}

@media (max-width: 600px){

	/* section01 */
	.section01 {height:auto; padding-bottom:1.5rem; /* height:31rem; */}
	.section01 .btn_link {position:relative; top:auto; left:auto; right:auto; width:100%; height:3.5rem; line-height:3.5rem; margin-top:1.5rem; border-radius:0.8rem; background-size:44px;}
	.section01 .etc_wrap {padding-top:1.5rem}
	.section01 .etc_wrap p {font-size: 0.8rem;}

	/* section02 */
	.section02 {padding:1.5rem 0;}
	.section02 .box {padding:1rem;}
	.section02 .box + .box {margin-top:1rem;}
	.section02 .box .link_wrap a {width:100%; height:3.3rem; line-height:1.3rem; border-radius:0.6rem;}
	.section02 .box .link_wrap a:first-child,
	.section02 .box .link_wrap a + a,
	.section02 .box .link_wrap .txt_wrap {float:none;}
	.section02 .box .link_wrap a + a {margin-top:0.5rem;}
	.section02 .box .link_wrap .txt_wrap {width:100%; height:2.3rem; margin-top:0.3rem;}
	.section02 .box .link_wrap .txt_wrap span {margin-bottom:0; vertical-align:middle;}
	.section02 .box .link_wrap .txt_wrap p {display:inline-block; width:calc(100% - 4.4rem); margin-left:0.3rem; vertical-align:middle;}
	.section02 .box .img {width:3rem; height:3rem; margin-right:0.6rem;}
	.section02 .box .txt {width:calc(100% - 4rem);}
	.section01 .txt_wrap .bottom > .time {max-width:none; width:100%; border-radius:0.8rem;}

	/* footer */
	#footer {padding:1.5rem 0;}
}

@media (max-width: 480px){

	/* section01 */
	.section01 .txt_wrap .bottom {padding:1rem 0.7rem;}
	.section01 .btn_link {height:2.8rem; line-height:2.8rem; padding-left:4.3rem; background-size:32px; font-size:0.9rem;}
	.section01 .btn_link i {height:21px; font-size:1.2rem;}
	
	.section01 .etc_wrap p {font-size: medium;}

	.layer_popup {width:93% !important; left:50% !important;  top:350px !important; transform:translate(-50%, -50%);}
	.layer_popup .inxBox_main .x_1 {width:20px !important; height:20px !important;}
	.layer_popup .inxBox_main .x_1:before, .x_1:after { height:20px !important;}
	.layer_popup .inxBox_main { padding:0px !important; width:99% !important;}
	.layer_popup .pop_foot_area {text-align:center !important; width:100% !important;  height:58px !important; }
	.layer_popup .pop_foot_area a {display:block !important;  width:100% !important;padding:0;}
}

@media (max-width: 380px){

	/* section01 */
	.section01 .btn_link {padding-left:3rem; background-position-x:1rem; background-size:25px;}
	.section01 .btn_link i {right:1rem;}
	
	.section01 .etc_wrap p {font-size: medium;}
}