@charset "utf-8";

/* 4차메뉴 */
#four_depth_nav{width:100%; }
#four_depth_nav dt{display:none;}
#four_depth_nav dd{width:100%; }
#four_depth_nav dd ul {margin-bottom: 20px; position: relative; display: flex; justify-content: center; text-align: center;}
#four_depth_nav dd ul li{border:1px solid #ddd; background: #fff; color: #Fff;  margin: 0 3px 3px 0; border-radius: 50px; font-weight: 500; transition:all ease-in 0.3s} 
#four_depth_nav dd ul li a{display:block; min-width: 200px; font-size:15px; padding:14px 20px; color:#555; line-height:150%;}

#four_depth_nav dd ul li.on a{color:#fff; font-weight:500;}
#four_depth_nav dd ul li.on{border:1px solid  #18af85;  background: #18af85;}

#four_depth_nav dd ul li:hover{background: #ddd;}
#four_depth_nav dd ul li.on:hover{background: #18af85;}


.sub_con{font-size:17px;color:#222; line-height:1.4; margin:50px 0 ;}
.sub_con p{ word-break:keep-all}
.sub_con b{font-weight:500}

.d_flex_jcl{display:flex; justify-content:left;}
.d_flex_jcsb{display:flex; justify-content:space-between;}

div table.tb01 { width: 100%; border-collapse: collapse; border-bottom: 1px solid #ddd; border-right: 2px solid #fff;  border-top: 2px solid #333;}
div table.tb01 caption{font-size:0; text-indent:-999999999px;}
div table.tb01 th, 
div table.tb01 td {font-size:17px; padding:20px 20px 18px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align:center; vertical-align:middle}
div table.tb01 th { background:#f9f9f9; color: #333; font-weight: 700; letter-spacing:-0.5px; }

div table.tb01 .borR { border-right: 1px solid #ddd !important; }
div table.tb01 .borL { border-left: 1px solid #ddd !important; }
div table.tb01 tbody tr th:last-child { border-right: 0 none; }
div table.tb01 em{color:#ca3d3d; font-style:normal}
.tbl_guide{display:none}

.td_left{text-align:left !important}

.td_right{text-align:right !important}

.td_bg_col{background: #f6fbff;}

.tb_unit{text-align: right;  font-size: 16px;  display: block;  margin-top: -30px;}

h3.h3_tit { font-size:50px; letter-spacing:-1px; display:block;  font-family: 'Gmarket SansB'; font-weight:700; margin-bottom: 10px;}
h4.h4_tit { font-size:30px; letter-spacing:-1px; display:block; margin-bottom: 20px;  font-family: 'Pretendard'; font-weight:700}
h5.h5_tit {font-size: 20px; letter-spacing: -1px; display: block;  margin-bottom: 10px;  font-family: 'Pretendard';  font-weight: 700;  color:#205e9e;}

.c_box { padding:25px 30px; border: 2px solid #e7e9ed; border-radius: 20px; font-size: 17px;}
.c_box_line {padding: 50px 60px; border: 2px solid #e7e9ed; border-radius: 20px; font-size: 17px;}
.c_box.pd_d{padding: 50px 60px;}

.bg_box{ background: #f7f7f7; padding: 20px;   margin-top: 10px;}

.li_st1 > li{position:relative;padding: 0 0 0 16px;margin-bottom: 40px;font-weight: 600;font-size: 18px;border-bottom: 1px dashed #ccc;padding-bottom: 40px;}
.li_st1 > li:before{content:"";width: 6px;height: 6px;display:inline-block;border-radius:50%;background: #186eb8;position:absolute;left: 2px;top: 10px;/* border: 4px solid #ffffff; *//* border-radius: 0 5px 5px 5px; */}
.li_st1 > li:last-child{margin-bottom:0}

.li_st1 strong{position:relative; font-weight:bold; z-index:1; margin-right:5px;}
.li_st1 strong:after {content: ""; width: 100%; height: 13px; display: inline-block; background: #fff5c1; position: absolute; left: 0px; top: 6px; z-index: -1}

.li_st2 li{position:relative;padding: 5px 0 5px 14px;font-size: 16px;font-weight: 500;}
.li_st2 li:before{content:"";width: 4px;height:4px;display:inline-block;background: #8eb0cb;position:absolute;left:0px;top: 12px;}

.li_st3 > li{position:relative;padding: 0 0 0 16px; font-weight:600; margin-bottom: 10px; font-size: 18px;}
.li_st3 > li:before{content:"";width: 6px;height: 6px;display:inline-block;border-radius:50%;background: #186eb8;position:absolute;left: 2px;top: 10px;/* border: 4px solid #ffffff; *//* border-radius: 0 5px 5px 5px; */}
.li_st3 > li:last-child{margin-bottom:0px;}

.li_num li{line-height: 1.5; margin-bottom:5px;}
.li_num .num{background:gray; color:#fff; width:24px; height:24px; border-radius:50%; display:inline-block; text-align: center; font-size: 14px; padding-top: 4px; font-style: normal; position: relative;}

.li_st2.col3{display: flex; justify-content: flex-start;  flex-wrap: wrap;}
.li_st2.col3 li{width:calc(100% / 3);}

.li_st2 li a{transition:all ease-in 0.2s;  text-decoration-thickness: 1px;  text-underline-offset:4px; text-decoration-color: transparent;}
.li_st2 li a:hover{color:#063ab8; text-decoration:underline; text-decoration-color: #063ab8;}

.col_st1{color:#447dad}
.col_st2{color:#d20801}

.down_btn{ background: #424c94; padding: 20px 30px 16px; display: flex ; justify-content: center; align-items: center; max-width: 330px; margin: 0 auto; border-radius: 50px; color: #fff;}

.btn_ndown{ margin: 10px 0 0 14px;  display: inline-block; background: #939393; padding: 6px 30px; color: #fff; font-size: 15px; border-radius: 8px;} 

.btn_fdown{margin-left: 10px; color: #186eb8; text-decoration: underline; font-size: 16px; text-underline-offset: 4px; } 
.btn_fdown:after{content: url('/images/contents/down_icon.png'); display: inline-block; width: 16px; height: 16px; margin-left: 5px; }

.note{ padding: 20px; border: 1px solid #d0dbe6;margin-bottom: 10px; text-align: center; background: #f1f7fc; color: #245189; font-weight: 600; }

/* 센터소개 */
.sub_con{max-width:1440px; margin:50px auto 0; font-family: 'Pretendard';}
	
.intro_w{position:relative;}
.intro_bt{font-family: 'Gmarket SansB'; color:#222; font-size:40px; line-height: 1.3; margin-bottom: 40px; padding-left: 10px;}
.intro_st{font-size:20px; line-height:1.5; color:#222; background:#f6f6f6; padding:70px 700px 70px 70px; word-break: keep-all;}
.intro_img{position:absolute; top:-10px; right:50px; text-align:right}
.name{font-size:28px; margin-top:30px}
.name span{font-size:20px;}


/*찾아오시는길_지도*/
.root_daum_roughmap{width:100%; height:500px; background:gray; border:1px solid #ddd;}
.map_wrap{border-radius:30px; overflow:hidden;}
.map_info{/* background: #ffffff; */padding: 30px 14px;color: #272727;border-radius: 0 0 30px 30px;margin-top: 10px;border-top: 2px solid #186eb8;}
.map_info .tit{font-size: 38px; font-family: 'Gmarket SansB'; margin-bottom:10px;}
.map_info .info{display:flex;align-items: center;margin-top: 19px;}
.map_info .info li{display: flex;margin-right:50px;font-size: 20px;/* line-height: 1.5;align-items: center; */}
.map_info .info li .info_tit{width: 104px;height: 37px;border-radius:30px;background:#323232;font-size: 18px;color: #fff;display:flex;align-items: center;justify-content: center;margin-right: 10px;}
.map_info .info li .info_con{ padding-top:6px}

.map_info_l{flex:0 0 90%; display: flex; align-items: center;}

.map_info .info .cir_ico{background:#fff; width:24px; height:24px; border-radius:50%; display: flex; align-items: center;  justify-content: center; margin-right: 7px;}
.map_info .info .tit{font-weight:500; width:70px;}
.map_info .map_btn{border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; height: 85px; width: 80px;display: flex; justify-content: center; align-items: center;flex: 0 0 10%; flex-wrap:wrap;}
.map_info .map_btn span{display:block; font-size:15px; width:100%; text-align:center;     margin-top: -20px;}



ol.ol_li{list-style: none;  counter-reset: my-counter; padding-left: 0;}
ol.ol_li > li { margin-top:7px; padding-bottom:7px; counter-increment: my-counter;  position: relative; font-size:17px; padding-left:40px; line-height: 1.5;}
ol.ol_li > li:before{content: counter(my-counter); display: inline-block; border-radius: 19%; border: 1px solid #c5c5c5; width: 26px; height: 26px; text-align: center; vertical-align: middle; margin: -1px 5px 0 3px;
			text-indent:-1px; line-height: 1.5em; background-color:#fff; position:absolute; left:0}

ol.ol_li_li{list-style: none;  counter-reset: my-counter; background: #f7f7f7; padding:20px; border-radius:10px; position: relative; }
ol.ol_li_li > li{counter-increment: my-counter;  position: relative; margin-bottom:10px;  font-size:16px; color:#333}
ol.ol_li_li > li:last-child{margin-bottom:0}
ol.ol_li_li > li:before{content: counter(my-counter); display: inline-block;  background: #8f8f8f;color: #fff;border: 0;border-radius: 50%;width: 20px;height: 20px; font-size: 14px; line-height: 20px; margin: 0px 5px; text-align:center}

ol.ol_li > li > ol.ol_li_li{left: -20px;}

ol.ol_li_s2{list-style: none;  counter-reset: my-counter; padding-left: 0;}
ol.ol_li_s2 > li { margin-top:7px; padding-bottom:7px; counter-increment: my-counter;  position: relative; font-size:17px; padding-left:40px; line-height: 1.5;}
ol.ol_li_s2 > li:before{content: counter(my-counter); display: inline-block; border-radius: 19%; width: 26px; height: 26px; text-align: center; vertical-align: middle; margin: -1px 5px 0 3px;    font-size: 17px;
			text-indent:-1px; line-height: 1.5em; background-color:#353d54; position:absolute; left:0; color: #fff;}

ol.ol_li_s2.cen{max-width: 480px;  margin: auto auto;}

ol.ol_li_s2.cen > li:before{top:3px;}

.fs_20{font-size:20px !important}
.fs_23{font-size:23px !important}
.fs_30{font-size:30px !important}
.fs_14{font-size:14px !important}

.bo_v_tit{font-family: 'Gmarket SansM';}

@media all and (max-width:1440px) {
	.sub_con{padding:0 30px;}
}

@media all and (max-width:999px) {
	.sub_con{margin: 30px auto 0;}
	
	.fs_20{font-size:17px;}

	/* .tbl_scroll {overflow-x: scroll;}
	.tbl_scroll table{width:999px !important;} */



	.map_info .tit { font-size: 22px;}
	.map_info .info li span.info_tit {width: 74px; height: 27px; font-size: 15px;}
	.map_info .info li {font-size: 16px;}
	.map_info .info {flex-wrap: wrap; gap: 4px; margin-top: 9px;}
	
	.info_b .tit { font-size: 18px;}
	.info_b .con { font-size: 15px;}
	.fs_20 { font-size: 17px !important;}
	.fs_30 { font-size: 20px !important;}

	div table.tb01 th, 
	div table.tb01 td{font-size:15px; padding: 3px 4px 1px;} 

	.intro_bt {font-size: 20px;  word-break:keep-all;   margin-bottom: 10px;}
	.intro_bt br{display:none;}
	.intro_st {font-size: 16px; padding: 50px;}
	.intro_img{position: relative; }
	.intro_img img{display:none;}
	.name{font-size: 20px;}
	.name span { font-size: 16px;}

	h3.h3_tit {font-size: 20px;}
	h4.h4_tit { font-size: 17px; margin-bottom: 10px;}
	.c_box {padding: 15px 15px; font-size: 15px;}
	ol.ol_li > li {font-size: 15px; padding-left: 33px;}
	ol.ol_li_li > li {font-size: 14px;}

	.map_info .info li .info_tit { width: 64px;  height: 28px; font-size: 14px;}
		
	.c_box.pd_d { padding: 20px;}
	.sub_con p{font-size: 15px; }
	.c_box_line{padding: 20px;}
	.li_st1 > li {  font-size: 16px; margin-bottom: 15px; padding-bottom: 15px;}
	.li_st1 > li:before { top: 6px;}
	.btn_fdown { font-size: 14px;}

	.li_st2 li { padding: 5px 0 5px 11px; font-size: 14px;}

	.li_st3 > li {font-size: 15px;}
	.li_st3 > li:before { top: 6px;}
}

.vision_01{text-align: center;margin-top:105px;}
.vision_01 .vis_wr{position: relative;max-width:900px;margin:0 auto;}
.vision_01 .vis_wr .vis_inner{border:5px solid #394158;position: relative;padding:0 15px;}
.vision_01 .vis_wr .vis_inner strong{ font-family: 'Gmarket SansB'; font-size:50px; font-weight: 700; color:#394158}
.vision_01 .vis_wr .vis_inner strong span{display: block; font-size: 18px; color: #89b5e6;}
.vision_01 .vis_wr .vis_inner:before{content: "";position: absolute;left:50%;top:-5px;width:98%;height:5px;background: #fff;transform: translateX(-50%);}
.vision_01 .vis_wr .vis_inner:after{content: "";position: absolute;left:50%;bottom:-5px;width:98%;height:5px;background: #fff;transform: translateX(-50%);}
.vision_01 .vis_wr .vis_inner p{margin-top:20px;color:#5e5e5e;font-size: 28px; font-weight: 500;}
.vision_01 .vis_wr .vis_inner p em{display: block;font-weight: 300;}
.vision_01 .vis_wr .inner_list{overflow: hidden;}
.vision_01 .vis_wr .inner_list li{float:left;width:33.33%;padding-top:40px;position: relative;}
.vision_01 .vis_wr .inner_list li::before{content: "";position: absolute;left:50%;top:0;width:2px;height:29px;background: #1960b2;margin-left:-1px;}
.vision_01 .vis_wr .inner_list li p em{display: block;}

.vision_02{text-align: center;}
.vision_02 .vis_wr{background: #eef5fd;padding:30px 40px 40px;max-width:90%;margin:0 auto;}
.vision_02 .vis_wr strong{font-family: 'Gmarket SansB'; font-size:50px; font-weight: 700; color:#394158}
.vision_02 .vis_wr strong span{display: block; font-size: 18px; color: #89b5e6;}
.vision_02 .vis_wr ul{display: flex;  justify-content: center;  margin-top:20px;   gap: 50px;}
.vision_02 .vis_wr ul li{width:160px; height:160px; border-radius:50%; display: flex; align-items: center; justify-content: center;background:#fff; font-family: 'Gmarket SansB'; font-size: 34px;}
.vision_02 .vis_wr ul li.bg1{border:2px solid #6575a1; color:#425487;}
.vision_02 .vis_wr ul li.bg2{border:2px solid #b16e9e; color:#8e4a7b;}
.vision_02 .vis_wr ul li.bg3{border:2px solid #65a199; color:#417f77;}
.vision_02 .vis_wr ul li.bg4{border:2px solid #78a165; color:#51793f;}
.vision_02 .vis_wr ul li span{display: table-cell;vertical-align: middle;color:#6f6f6f;font-size: 17px;line-height: 1.5; }
.vision_02 .vis_wr ul li span em{display: block;}

.vision_03{text-align: center; }
.vision_03 .top strong{color:#363e55;font-size:20px; font-weight: bold;}

.vision_03 ul{margin:20px auto 0; display: flex; justify-content: center; gap:80px; max-width: 80%;}
.vision_03 ul li{width: calc(100% / 4);  position: relative;  color: #36446a;  font-size: 22px;}
.vision_03 ul li::after{content: "";position: absolute;left:50%; margin-left:146px; top:65px;width:26px;height:27px;background: url('/images/contents/plus.png') no-repeat;}
.vision_03 ul li:first-child{margin-left:0;}
.vision_03 ul li:last-child::after{display: none;}
.vision_03 ul li .bg{display: inline-block;width:260px;height:170px; border-radius:30px; padding-top:25px;}
.vision_03 ul li .bg.bg01{background:#deebf9; }
.vision_03 ul li .bg.bg02{background:#dbebf0; }
.vision_03 ul li .bg.bg03{background:#dbf0e8; }
.vision_03 ul li .bg.bg04{background:#e1e3e6; }

.vision_03 ul li .bg .icon{display:block;width:43px;height:44px;background:url('/images/contents/intro5_ico.png') no-repeat;margin:0 auto 10px;}
.vision_03 ul li .bg .icon.icon01{background-position:0 0 ;}
.vision_03 ul li .bg .icon.icon02{background-position:-51px 0 ;}
.vision_03 ul li .bg .icon.icon03{background-position:-106px 0 ;}
.vision_03 ul li .bg .icon.icon04{background-position:-158px 0 ;}
.vision_03 ul li .bg strong{display: block;}

.vision_03 ul li .bg em{ color: #735c4f; font-size: 16px; font-weight: bold; font-style: normal;}

.vision_03 ul li .text span{color:#4d4d4d;font-size:16px; line-height: 1.5;}
.vision_03 ul li .text span em{display: block;}
.vision_03 .bottom{background: #f1f1f4;padding:50px 20px;position: relative;padding-left:245px;margin-top:120px;}
.vision_03 .bottom .goal{position: absolute;left:55px;top:50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);padding-top:55px;}
.vision_03 .bottom .goal::before{content: "";position: absolute;left:50%;top:0;margin-left:-16.5px;width:33px;height:33px;background: url(https://www.kopri.re.kr/kopri/images/sub01/sub0102_bottom_icon.png) no-repeat;}
.vision_03 .bottom .goal strong{color:#333b53;font-size:20px;font-weight: bold;position: relative;line-height: 1.25;}
.vision_03 .bottom .goal strong em{display: block;}
.vision_03 .bottom .text{text-align: left;}
.vision_03 .bottom .text ul li{margin:5px 0;font-size:16px;color:#4d4d4d;}

.visiont_txt{font-size:23px; margin-top:10px; line-height:1.5}
.vision_04 .inner{display:flex;flex-wrap:wrap;justify-content:space-between; gap:10px;}
.vision_04 .inner .item{width:100%;margin-bottom:20px;background: #eaebff; position: relative; margin-bottom:20px; padding: 20px 50px 20px 170px;left: 10px;border-radius: 10px;}
.vision_04 .inner .item strong{font-size:22px; width:150px; color:#fdf89c; font-weight:700; background:#353d54; padding: 10px 30px; position: absolute;left: -10px;top: -15px;border-radius: 10px; text-align: center;}
.vision_04 .inner .item em{font-size:24px; font-style: normal;}
.vision_04 .inner .item .list{margin-top:15px;}
.vision_04 .inner .item .list li{margin-top:10px;}
.vision_04 .inner .item .list span{background-color:#515a66;display:inline-block;padding:5px;border-radius:50%;color:#fff;width: 20px;height: 20px;line-height: 10px;text-align: center;}


.sign{font-size:20px; display: flex; justify-content: right;  gap: 10px; align-items: center; font-weight: 600; margin-top:50px}

@media all and (max-width:999px) {
	.vision_01 .vis_wr .vis_inner strong {font-size: 20px;}
	.vision_01 .vis_wr .vis_inner strong span { font-size: 12px;}
	.vision_01 .vis_wr .vis_inner p{ margin-top: 10px; font-size: 16px;}
	.vision_02 .vis_wr strong {font-size: 20px;}
	.vision_02 .vis_wr strong span { font-size: 12px;}
	.vision_02 .vis_wr ul {gap: 10px; flex-wrap: wrap;}
	.vision_02 .vis_wr ul li {width: 90px; height: 90px; font-size: 15px;}
	.vision_03 ul{flex-wrap: wrap;}
	.vision_03 ul li {  font-size: 16px;}
	.vision_03 ul li:after{left:50%; margin-left:125px}

	.vision_04 .inner .item strong{font-size:17px}
	.vision_04 .inner .item em {   font-size: 16px;}
	
	.sign {margin-top:20px}
	.sign img{width:100px;}
}

@media all and (max-width:765px) {
	.vision_03 ul li:after{display:none}

}