@charset "UTF-8";

/* 헤더 */
header { background: #59baf1; }
header ul { display: flex; justify-content: flex-end; align-items: center; gap: 30px; padding: 30px 70px; }
header .logo { margin-right: auto; }
header ul li { color: #fff; }
header ul li:hover { color: #18437b; }
header.rol { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: rgba(89,186,241,0.7); backdrop-filter: blur(10px); }
@media (max-width:991px) {
    header ul { gap: 10px; padding: 10px 15px; }
    header .logo { width: 120px; }
}

/* 상단 */
.top { background: url(/img/top_bg.jpg) 0 100% no-repeat, #59baf1; }
.top .top_in { display: flex; }
.top .r_con { width: 50%; }
.top .l_con { width: 50%; padding: 5% 0 15% 5%; }
.top .l_con img { width: auto; max-width: 100%; }
.top .l_con h2 { font-size: 5em; color: #fff; }
.top .l_con span { display: block; padding: 3% 0; }
.top .l_con p { font-size: 1.5em; color: #fff; }
.top .l_con .btn_box { display: flex; justify-content: flex-start; gap: 10px; width: 100%; padding-top: 2%; }
.top .l_con .btn_box a { padding: 7px 30px; font-size: 1.2em; color: #fff; border: 1px solid #fff; border-radius: 50px; }
.top .l_con .btn_box a:hover { border: 1px solid #18437b; background: #18437b; }
@media (max-width:767px) {
    .top .top_in { flex-wrap: wrap; }
    .top .l_con h2 { font-size: 3em; }
    .top .r_con { width: 100%; padding: 5% 0 0 0; }
    .top .l_con { width: 100%; padding: 5% 10px 20% 10px; }
    .top .l_con span { padding: 3% 0 10% 0; }
    .top .l_con .btn_box { padding-top: 10%; }
}

/* 공동 */
.in_box { display: flex; align-items: center; gap: 20px; }
    .in_box .img_box { position: relative; width: 55%; }
    .in_box .img_box .icon { position: absolute; }

.in_box .tt_box { width: 45%; }
    .in_box .tt_box span { color: #59baf1; }
    .in_box .tt_box h2 { padding: 20px 0 50px 0; font-size: 3.5em; font-weight: 800; }
    .in_box .tt_box p { line-height: 1.5em; color: #888a92; }
@media (max-width:991px) {
    .in_box .img_box .icon { max-width: 150px; }
}
@media (max-width:767px) {
    .in_box { flex-wrap: wrap; }
    .in_box .img_box { width: 100%; order: 1; }
    .in_box .tt_box { width: 100%; padding: 0 20px; order: 2; }
    .in_box .tt_box h2 { padding: 10px 0 20px 0; font-size: 2em; }
    .in_box .img_box .icon { max-width: 90px; }
}

.box01 { padding: 10% 0; }
    .box01 .icon { top: -5%; right: 10%; }
@media (max-width:767px) {
    .box01 .icon { top: 0; right: 0; }
}
.box02 { padding: 10% 0; background: #e9f4fc; }
   .box02 .icon { right: -20px; bottom: -40px; }
@media (max-width:767px) {
    .box02 .icon { right: -10px; bottom: -20px; }
}

.box03 { padding: 10% 0; }
    .box03 .icon { left: -30px; top: 30px; }
@media (max-width:767px) {
    .box03 .icon { left: 0; top: 0; }
}

.box04 { padding: 10% 0; background: #e9f4fc; }
    .box04 .icon { right: -0; top: -50px; }
@media (max-width:767px) {
    .box04 .icon { right: 0; top: 0; }
}

.box05 { padding: 10% 0; }
    .box05 .icon { right: -20px; bottom: -20px; }
@media (max-width:767px) {
    .box05 .icon { right: 0; bottom: -20px; }
}

.box06 { padding: 15% 0 7% 0; text-align: center; color: #fff; background: url(/img/box06_bg.png) no-repeat; background-size: cover; }
    .box06 h2 { font-size: 3.5em; font-weight: 800; }
    .box06 h3 { padding: 20px 0 7% 0; font-size: 2em; }

.box06 ul { display: flex; align-items: stretch; justify-content: center; max-width: 882px; margin: 0 auto; }
    .box06 ul li:nth-child(1) { width: 45%; }
    .box06 ul li:nth-child(2) { width: 10%; }
    .box06 ul li:nth-child(3) { width: 45%; }

.box06 .bg { border: 3px dashed rgba(255,255,255,0.5); border-radius: 50px; }
    .box06 .bg li { padding: 39px 10px; }
    .box06 .bg li:nth-child(2) { font-size: 1.6em; border: 3px dashed rgba(255,255,255,0.5); border-radius: 50px; }

.box06 .tt { padding: 30px 0 0 0; line-height: 1.5em; }
@media (max-width:767px) {
    .box06 { padding: 110px 0 30px 0; }
    .box06 h2 { font-size: 2em; }
    .box06 h3 { padding: 10px 0 20px 0; font-size: 1.5em; line-height: 1.5em; }
    .box06 ul { font-size: 1.2rem; line-height: 1.5em; }
    .box06 .bg li:nth-child(2) { padding: 44px 0; }
}

.form_box { padding: 5% 10px; background: #2c2d33; }
    .form_box .tt_box { text-align: center; color: #fff; }
    .form_box .tt_box h2 { font-size: 3em; font-weight: 800; }
    .form_box .tt_box p { font-size: 1.5em; } 
.form_box .con { max-width: 600px; margin: 0 auto; }
    .form_box .con td { padding: 40px 0 0 0; }
    .form_box .con td:nth-child(2) { padding: 40px 0 0 10px; color: #fff; }
    .form_box .con span { display: block; padding: 0 0 10px 0; color: #fff; }
    .form_box .con label { float: left; margin-top: 20px; color: #fff; }
    .form_box .con .more_btn { margin-top: 20px; padding: 0; float: right; text-decoration: underline; color: #fff; cursor: pointer; }

.form_box .btn_box { padding: 60px 0 0 0; }
    .form_box .btn_box * { font-size: 1.2em; color: #fff; border: 0; border-radius: 100px; background: #59baf1; }
@media (max-width:767px) {
    .form_box { padding: 10% 10px; }
    .form_box .tt_box h2 { padding: 0 0 10px 0; font-size: 2em; }
    .form_box .tt_box p { font-size: 1.2em; } 
    .form_box .con td { padding: 10px 0 0 0; }
    .form_box .btn_box { padding: 20px 0 0 0; }
}

/*하단*/
footer { padding: 0 0 5% 0; text-align: center; color: #b3b6c0; background: #2c2d33; }
    footer > div { max-width: 1300px; margin: 0 auto; padding: 0 10px; border-top: 1px solid #b3b6c0; }
    footer h6 { padding: 40px 0 20px 0; font-size: 1.2em; font-weight: 500; }
    footer p { font-size: 14px; }
@media (max-width:767px) {
    footer h6 { padding: 20px 0 10px 0; }
    footer p { font-size: 12px; }
}

/*팝업창*/
.pc_popup{ font-size:12px; z-index: 20 !important; }
.pc_popup input{ width: 15px; height: 15px; display: inline-block; vertical-align: middle; margin:0; padding:0; }
.pc_popup label{ display: inline-block; vertical-align: middle; margin:0; padding:0; }
.pc_popup .close{ font-size:1em; margin-left:5px; font-weight: 500; text-shadow:none;opacity: 1; display: inline-block; vertical-align: middle; height: 27px; }
.pc_popup p{ margin:0; padding:0; }
.pc_popup .modal-content{ border:0; border-radius: 0; box-shadow:none; -webkit-box-shadow:none; }
.pc_popup .modal-footer{ border:0; padding: 5px 10px; }
.mobile_popup{display:none;}

@media (max-width: 767px){
	.pc_popup {display:none;}
	.mobile_popup{ display:block; z-index: 20 !important;}
	.mobile_popup { top:49px; left:0; right:0; display:block; font-size:12px; }
	.mobile_popup .vertical-alignment-helper{ max-width:320px; margin:0 auto; }
	.mobile_popup p{ margin:0; padding:0; }
	.mobile_popup p img{ width: 100% !important; height: auto !important; }
	.mobile_popup .modal-content{ border:0; box-shadow:none; -webkit-box-shadow:none; }
	.mobile_popup .modal-footer{ border:0; background: #fff; }
	.mobile_popup input{ width: 15px; height: 15px; display: inline-block; vertical-align: middle; margin:0; padding:0; }
	.mobile_popup label{ display: inline-block; vertical-align: middle; font-weight:300; font-family: "Nanum", sans-serif; margin:0; padding:0; }
	.mobile_popup .close{ font-family: "Nanum", sans-serif; font-size:1em; margin-left:5px; font-weight: 500; text-shadow:none;opacity: 1; display: inline-block; vertical-align: middle; height: 20px;}
}