@import url("basic.css");

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

/* 메인 레이아웃 */
#wrap {position:relative; height:100%; 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:1200px; 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:26.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:'SCDream'; 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:1.75rem; padding:1.75rem 12rem 1.5rem 12rem; 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:480px; margin:1.2rem 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 .btn_link {display:block; overflow:hidden; position:absolute; top:calc(100% + 2.5rem); left:0; right:calc(50%); 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:'SCDream'; 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 : action */
.section01 .btn_link:hover i,
.section01 .btn_link:focus i {right:1rem;}


.section01 .btn_link_right {display:block; overflow:hidden; position:absolute; top:calc(100% + 2.5rem); left:calc(50%); 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:'SCDream'; font-weight:700; font-size:1rem; color:#007bc7; text-align:left;}
.section01 .btn_link_right:before {content:url(btn_link_bg.png); position:absolute; top:0; right:0; width:auto; height:100%;}
.section01 .btn_link_right 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 : action */
.section01 .btn_link_right:hover i,
.section01 .btn_link_right:focus i {right:1rem;}

/* section02 */
.section02 {padding:5.6rem 0 4.75rem; background:#f5f7fa;}
.section02 .box {width:29.3rem; padding:1.5rem; border-radius:1rem; background:#fff; box-shadow:rgba(0,72,117,0.2) 0.15rem 0.15rem 1rem;}
.section02 .box01 {float:left;}
.section02 .box02 {float:right;}
.section02 .box .img {display:inline-block; width:3.25rem; height:3.25rem; margin-right:1rem; 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:'SCDream'; font-weight:600; font-size:0.9rem; letter-spacing:-0.01rem; line-height:1.2; color:#000; vertical-align:middle;}
.section02 .box .txt span {display:block; margin-top:0.25rem; font-weight:700; font-size:1.1rem;}
.section02 .box .link_wrap {overflow:hidden; margin-top:1.2rem;}
.section02 .box .link_wrap a {display:block; position:relative; width:12.75rem; height:4rem; line-height:4rem; padding-left:1.5rem; outline:0; border-radius:0.8rem; background:#77a1bd; font-family:'SCDream'; font-weight:600; font-size:0.8rem; 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;}

/* footer */
#footer {padding:2rem 0 2.75rem; background:#22272d; text-align:center;}
#footer address {font-size:0.8rem; color:#c5c5c5;}
#footer .copyright {margin-top:0.5rem; font-size:0.7rem; color:#8f969c;}

.redInfo {color: red;}
/* 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:8rem; padding-right:8rem;}

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

@media (max-width: 1200px){

	/* section01 */
	.section01 .txt_wrap .bottom {padding-left:1rem; padding-right:1rem;}
	.section01 .btn_link {height:4rem; line-height:4rem;}
	.section01 .btn_link_right {height:4rem; line-height:4rem;}

	/* 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 {width:49%; height:3rem; line-height:3rem;}
	.section02 .box .link_wrap .txt_wrap {width:49%; height:3rem;}
}

@media (max-width: 840px /* ipad 768px*/){
	/* section01 */
	.section01:after {display:none;}
	.section01 .txt_wrap .bottom > p {font-size:0.9rem;}

	    /* section01 */
	.section01 {height:auto; padding-bottom:1.5rem;}
    .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 .btn_link_right {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;}
}

@media (max-width: 600px){
    /* section01 */
	.section01 {height:auto; padding-bottom:1.5rem;}
	.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 .btn_link_right {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;}

	/* section02 */
	.section02 {padding:1.5rem 0;}
	.section02 .box {padding:1rem;}
	.section02 .box + .box {margin-top:1rem;}
	.section02 .box .link_wrap a {width:100%; height:2.3rem; line-height:2.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 .btn_link_right {height:2.8rem; line-height:2.8rem; padding-left:4.3rem; background-size:32px; font-size:0.9rem;}
    .section01 .btn_link_right i {height:21px; font-size:1.2rem;}
}

@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 .btn_link_right {padding-left:3rem; background-position-x:1rem; background-size:25px;}
    .section01 .btn_link_right i {right:1rem;}
}