@charset "utf-8";


/* root */
:root{
	--c-01:#1c2d63;
}

/* common */
.container_title {position:relative; text-align:center;font-size:40rem;line-height:1;letter-spacing:-1.5px;font-weight:800;padding-bottom:30rem;margin:5rem 0 60rem 0;color:#000;}

.tit01 { position: relative; padding-top:20rem; margin: 0 0 40rem;font-size:30rem;font-weight: 600;color: #222;line-height: 1; text-align:center; } 
.tit01:before {content: ""; display:block; margin:10rem auto; width:44rem; height:44rem; background:url("../img/sub/symbol.png") center top no-repeat; background-size:100%;}
.tit02 { display:inline-block; position: relative;margin: 0rem 0 20rem; padding:10rem 40rem; font-size:18rem; background:#29803a; border-radius:50rem;  font-weight: 600;color:#fff;line-height: 1;} 

.subtable { width:100%; margin:20rem 0;border-top:1px solid #333; }
.subtable thead th{background:#fbfbfb; padding:15rem 5rem; border-left:1rem solid #ddd; border-bottom:1rem solid #ddd; color:#666; }
.subtable tbody th {text-align:center; background:#f5f5f5; color:#333;  font-weight:500; padding:15rem 0; width:20%; border:1px solid #ddd;}
.subtable tbody td {word-break: keep-all; font-size:16rem; border-bottom:1px solid #f7f7f7; padding:15rem 5rem; background:#fff; line-height:1.5; color:#35363a; text-align:center; font-weight:400; letter-spacing:-0.03em; border:1px solid #ddd;}
.subtable tbody td.t_left{text-align:left;}

#contents {overflow: hidden;position:relative;padding: 70rem 0;}
#contents p {word-break:keep-all;}

/* 서브비주얼 */
#sub_visual{position:relative;height:615rem;background-color:#000;background-size:cover;background-position:60%;text-align:left;}
#sub_visual h2{font-weight:800; font-size:50rem; color:#fff; animation:up .5s .2s forwards; }
#sub_visual p{color:#0081e9; font-weight:600; position:relative;line-height:1.5;padding-top:250rem; font-size:20rem;letter-spacing:-.5px;}
#sub_visual span{display:block; color:#fff; font-weight:300; position:relative;line-height:1.5;padding: 10rem 0 15rem 0;font-size:20rem;letter-spacing:-.5px;}


/* 서브 상단 이미지 */
#sub_visual.sub10{background-image:url(../img/sub/sub01_top.jpg) }
#sub_visual.sub20{background-image:url(../img/sub/sub02_top.jpg) }
#sub_visual.sub30{background-image:url(../img/sub/sub03_top.jpg) }
#sub_visual.sub40{background-image:url(../img/sub/sub04_top.jpg) }
#sub_visual.sub40{background-image:url(../img/sub/sub04_top.jpg) }
#sub_visual.sub50{background-image:url(../img/sub/sub05_top.jpg) }
.cont-top{margin-bottom:50rem;}
.cont-top > img{width:100%;}
/* snb */
#left_area{}
#snb {position:relative; z-index: 10; margin-top:110rem;}
#snb::before{content:''; position:absolute; top: 0; left: 0; height: 100px; width: 30%; background: #fff;}

.left_snb{position:relative; max-width:  950px; background: #fff; padding-right: 240px; }
.left_snb ul {display: flex; background:#fff;height: 100px;}
.left_snb li {letter-spacing:-.5px; }
.left_snb li:first-child a:after{display:none;}
.left_snb li a{padding:16rem 35rem;font-size:18rem;color:#000;font-weight:500;text-align:center;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;border-top:11rem solid #fff;}
.left_snb li.on a {border-top:11rem solid #0081e9; color:#0081e9; }


/* 
* discription: 사이트 복사시 지우고 사용하는 custom 영역
*/


@media (max-width:860px) {
	#sub_visual{height:250rem; }
	#sub_visual h2{font-size:30rem;}
	#sub_visual p{font-size:16rem; padding-top:130rem;}
	#sub_visual span{display:none;}

	.container_title {font-size:25rem; padding-bottom:0rem;}

}

@media (max-width:540px) {
	body {font-size:14rem}

	#sub_visual h2{font-size:25rem}
	#sub_visual p{font-size:13rem; }

	.tit01{margin:0 0 15rem; font-size:20rem;}
	.tit01:before {width:35rem; height:35rem;}
	.tit01::after {left: 51%;} 
	.tit02{margin:20rem 0 10rem; font-size:17rem}
	.add{margin:-5rem 0 10rem;}
	.cont-box{margin-bottom:30rem}
	
	.subtable thead th,
	.subtable tbody td,
	.subtable tbody th{line-height:1.5; padding:5rem; font-size:12rem;}


}

/*end 사이트 복사시 지우고 사용하는 custom 영역 */


.wid_1200 {width:1200rem; margin:0 auto; position:relative }


@media screen and (max-width: 1200px){
	.wid_1200 {width: 100%;}
}

.message {overflow:hidden;}
.message .message_left {float:left; width: 280rem;}
.message .message_right {float:left; width: calc(100% - 340rem); padding-left: 100rem; padding-top:20rem;}
.message .message_right .mr_top {font-size: 18rem; color: #000; font-weight:500; line-height: 1.5; }

@media screen and (max-width: 950px){
	.message .message_left {float: none; margin: 0 auto;}
	.message .message_right {float: none; width: 100%; padding-left: 0px; padding-top: 30rem;}
}

@media screen and (max-width: 768px){
	.message .message_right .mr_top {font-size: 16rem;}

}

@media screen and (max-width: 500px){
	.message .message_left {width: 100%;}
	.message .message_right .mr_top {font-size: 15rem; line-height:1.7;}
}




.sub-con {margin-bottom:60rem; display:flex; }
.subtit h3 {width:30%; font-size:25rem; margin-left:10rem; font-weight:800;}

@media all and (max-width:767px){
    .subtit h3 {font-size:22rem;}
}


.table_ex { width:100%; border-top:1px solid #0081e9; }
.table_ex thead th{background:#f0f5f8; font-size:17rem; font-weight:700; padding:10rem 5rem; color:#000; border-bottom:1px solid #ddd; }
.table_ex thead th:first-child {border-right:1px solid #ddd; }
.table_ex tbody th {text-align:center; font-size:20rem; color:#333;  font-weight:500; padding:15rem 0; border-bottom:1px solid #ddd;}
.table_ex tbody td:first-child {border-right:1px solid #ddd; text-align:center; width:25%; font-weight:700;}
.table_ex tbody td {padding:10rem 35rem; background:#fff; color:#35363a; text-align:left; font-size:16rem; font-weight:500; letter-spacing:-0.03em; border-bottom:1px solid #ddd;}
.table_ex tbody td.point{background:#2f3195; font-weight:800; color:#fff;}

@media (max-width:540px) {
	.table_ex thead th,
	.table_ex tbody td,
	.table_ex tbody th{line-height:1.5; padding:5rem; font-size:12rem;}
}



.con03 {margin-top:10rem; text-align:center;}
.con03 ul {display: flex; gap: 0px;}
.con03 ul li {width: calc(100% /3 - 0px); margin-left:1rem; background-color: #fff; border: 1px solid #dcdcdc; box-sizing: border-box; text-align: center; padding: 40rem; box-sizing: border-box; position: relative;}
.con03 ul li .arrow {position: absolute; top: 50%; right: 0rem; transform: translate(50%, -50%); width: 50rem; height: 50rem; border-radius: 50%; background-color: #f4f4f4; z-index: 1; display: flex; align-items: center; justify-content: center;}
.con03 ul li .arrow::before {content: url(../img/sub/arrow.png);}
.con03 ul li .icon_box {width: 100%; max-width: 70rem; aspect-ratio: 1/1; border-radius: 50%; margin: auto; position: relative; padding: 20rem; box-sizing: border-box;}
.con03 ul li .icon_box img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: fit-content;}
.con03 ul li .txt_box {margin-top: 10px;}
.con03 ul li .txt_box h6 {font-weight: 500; font-size:18rem; line-height: 1.27em; color: #444;}
.con03 ul li .txt_box dl {padding-top:10rem;}
.con03 ul li .txt_box dl dd {font-size:14rem; font-weight:400; display:block; }

@media all and (max-width:1024px){
    .con03 ul {flex-wrap: wrap; justify-content: center;}
    .con03 ul li {width: calc(33.333% - 16.666px);}
	.con03 ul li:nth-child(3) .arrow {display:none;}
}

@media all and (max-width: 767px) {
    .con03 ul li {width: 100%; margin-bottom:1rem;}
    .con03 ul li .arrow {top: calc(100% + 5px); right: 50%; transform: translate(50%, -50%) rotate(90deg);}
	.con03 ul li:nth-child(3) .arrow {position: absolute; top: calc(100% + 5px); right: 50%; transform: translate(50%, -50%) rotate(90deg); width: 60px; height: 60px; border-radius: 50%; background-color: #f4f4f4; z-index: 1; display: flex; align-items: center; justify-content: center;}
}


.con05 {margin-top:10rem; text-align:center;}
.con05 ul {display: flex; gap: 0px;}
.con05 ul li {width: calc(100% /5 - 0px); margin-left:1rem; background-color: #fff; border: 1px solid #dcdcdc; box-sizing: border-box; text-align: center; padding: 40rem; box-sizing: border-box; position: relative;}
.con05 ul li .arrow {position: absolute; top: 50%; right: 0rem; transform: translate(50%, -50%); width: 50rem; height: 50rem; border-radius: 50%; background-color: #f4f4f4; z-index: 1; display: flex; align-items: center; justify-content: center;}
.con05 ul li .arrow::before {content: url(../img/sub/arrow.png);}
.con05 ul li .icon_box {width: 100%; max-width: 70rem; aspect-ratio: 1/1; border-radius: 50%; margin: auto; position: relative; padding: 20rem; box-sizing: border-box;}
.con05 ul li .icon_box img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: fit-content;}
.con05 ul li .txt_box {margin-top: 10px;}
.con05 ul li .txt_box h6 {font-weight: 500; font-size:18rem; line-height: 1.27em; color: #444;}
.con05 ul li .txt_box dl {padding-top:10rem;}
.con05 ul li .txt_box dl dd {font-size:14rem; font-weight:400; display:block; }

@media all and (max-width:1024px){
    .con05 ul {flex-wrap: wrap; justify-content: center;}
    .con05 ul li {width: calc(33.333% - 16.666px);}
	.con05 ul li:nth-child(3) .arrow {display:none;}
}

@media all and (max-width: 767px) {
    .con05 ul li {width: 100%; margin-bottom:1rem;}
    .con05 ul li .arrow {top: calc(100% + 5px); right: 50%; transform: translate(50%, -50%) rotate(90deg);}
	.con05 ul li:nth-child(3) .arrow {position: absolute; top: calc(100% + 5px); right: 50%; transform: translate(50%, -50%) rotate(90deg); width: 60px; height: 60px; border-radius: 50%; background-color: #f4f4f4; z-index: 1; display: flex; align-items: center; justify-content: center;}
}