@charset "UTF-8";

h4 {margin:40rem 0 20rem; font-size:27rem; font-weight:700;}
h4+h5 {margin-top:20rem;}
h5 {margin:40rem 0 15rem 3rem; font-size:24rem; font-weight:600;}
h6 {margin:20rem 0 20rem 3rem; font-size:22rem; font-weight:600; color:#626262;}
h6:before {content:'['; padding-right:5rem;}
h6:after {content:']'; padding-left:5rem;}
@media all and (max-width:480px){
    h4{font-size: 25rem;}
    h5{font-size: 22rem;}
    h6{font-size: 20rem;}
}

.dep_01 {margin:10rem 0 15rem 5rem;}
.dep_01 > li {position:relative; margin:8rem 0; padding:0 0 0 28rem}
.dep_01 > li:before {content:''; position:absolute; top:4rem; left:0; width:16rem; height:16rem; background: url('../img/content/dep_01.png') no-repeat center/contain;}
.dep_02 {margin:5rem 0 10rem 5rem;}
.dep_02 > li {position:relative; margin:5rem 0; padding:0 0 0 17rem}
.dep_02 > li:before {content:''; position:absolute; top:11rem; left:0; width:4px; height:4px; background:#005353; border-radius: 50rem;}
.dep_03 {margin:0 0 10rem 5rem;}
.dep_03 > li {position:relative; padding:5rem 0 0 17rem; font-size:16rem;}
.dep_03 > li:before {content:''; position:absolute; top:18rem; left:0; width:7px; height:1px; background:#3e3e3e;}
.dep_01.none > li {padding-left:0;}
.dep_01.none > li:before {display:none;}
.dep_02.none > li:before {display:none;}

.cont_box{border-radius: 20rem; margin: 40rem 0; border: 4px solid #d8ecec; min-height: 200rem; padding: 40rem 40rem 40rem 190rem; box-shadow: 2px 2px 10px rgba(133,133,133,0.1); background: #fff url('../img/content/box_bg.png') no-repeat left 60rem top 40rem; position: relative; }
.cont_box h4, .cont_box p, .cont_box ul{position: relative; z-index: 2;}
.cont_box h4 {font-family:'BinggraeTaom'; font-weight: 400; margin: 0 0 11rem;}
.cont_box h4 strong {color: #005353;}
.cont_box .dep_01 {margin-top: 0; margin-bottom:0;}
@media all and (max-width:880px){
    .cont_box {padding:30rem 30rem 30rem 150rem; background-size: 80rem; background-position: left 40rem top 40rem;}
    .cont_box h4{font-size: 25rem;}
  }
@media all and (max-width:480px){
    .cont_box {padding:30rem 40rem; background-image: none; min-height: unset;}
  }

.txt_box{background: #fffcf4; border: 1px solid #e8e0c9; border-radius: 10rem; padding: 13rem 20rem; /*text-align: center; */ margin-bottom: 20rem;}
/* .txt_box02{text-align: left;} */

.caution {position:relative; margin:5rem 0 5rem; padding-left:30rem; font-size: 16rem; color: #b9173e;}
.caution:before {content:'!'; position:absolute; top:3rem; left:0; background:#b9173e; color:#fff; font-weight:900; font-size:12rem; padding:0 9rem; border-radius:5rem;}

.file li {display:flex; align-items:center; justify-content:space-between; min-height:68rem; padding:9rem 20rem 9rem 25rem; background:#fff; box-shadow:0 0 7px rgba(0,0,0,0.1); margin:15rem 0; border-radius:10rem;}
.file li p {font-weight:500;}

.text_blank,
.link_btn {display:inline-block; position:relative; padding-right:20rem; color:#2149a6; font-weight: 500; text-decoration: underline;}
.text_blank::before,
.link_btn:before {content:''; position:absolute; bottom:8rem; right:3rem; width:13px; height:13px; background:url('../../common/img/blank.png') no-repeat 100% 0/400% auto;}

.text_blank.down::before{background-image: url('../../common/img/btn_type_bl.png'); background-position:-2px -2px; right: 0; width: 15px; height: 15px;}

.btn_type {display:inline-block; background:#fff; color:#005353; border: 1px solid #005353; border-radius:6rem; padding:6rem 14rem 6rem 18rem; margin:5rem; font-size:16rem; font-weight: 700;}
.btn_type span {display:inline-block; padding-right:24rem; position:relative;}
.btn_type span::before {content:''; position:absolute; top:3rem; right: 0;; width:20rem; height:20rem; background:url('../img/content/btn_type.png') no-repeat; background-position: 0 0;}
.btn_type.view span::before {background-position-x: -40px;}
.btn_type.blank span::before{background-position-x: -20px;}
.btn_type.small{padding: 3rem 10rem 3rem 11rem; border-radius: 50rem; font-size: 15rem;}
.btn_type.small span::before{top: 1rem;}

.dep_02.btn_bf_ul > .btn_bf_li::before{top: 18rem;}
.dep_03.btn_bf_ul > .btn_bf_li::before{top: 23rem;}

.btn_type ~ .caution {margin-left:4rem;}

.tmg {margin:20rem 0 25rem; padding:30rem; border:1px solid #d2d3d9; border-radius:20rem;}
.tmg img {display:block; margin:0 auto;}
.tmg2 {margin:20rem 0 25rem; padding:30rem; background:#f5f5f5;}
.tmg2 img {display:block; margin:0 auto;}
.img_box{padding: 10rem; border: 1px solid #ddd;}

.video_script{max-height: 200rem; width: 100%; border-radius: 6rem; overflow-x: auto;padding: 20rem; border: 1px solid #ddd;}

.cont_top{display: block; text-align: right; }
.cont_top span{display: inline-block; border-radius: 10rem; color: #fff; padding: 4rem 10rem; background: #005353;}

/* 테이블 */
.table {overflow-x:auto; border-top:2px solid #005353; margin:20rem 0 25rem; clear: both;}
.table table {width:100%; text-align:center; margin-left:-1px; line-height:1.6;}
.table table thead th,
.table table tbody th {background: #f5f7f8; border-left:1px solid #d7dee3; border-bottom:1px solid #d7dee3; padding:10rem;}
.table table tbody th {background:#fbfbfb;}
.table table tbody td,
.table table tfoot td { padding:10rem; border-bottom:1px solid #d7dee3; border-left:1px solid #d7dee3;}
.table table tbody td ul {margin-top:0; margin-bottom:0; text-align: left;}
.table table tbody td ul.dep_02 > li:first-child {margin-top:0;}
.table table tbody td ul.dep_02 li:last-child {margin-bottom:0;}
.table table tfoot td {background: #f5f7f8; font-weight:600;}
.table.tdL table tbody td {text-align:left;}
.table_scroll {background:url('../../common/img/scroll.png') no-repeat left center; padding:10rem 0 10rem 70rem; margin:15rem 0 -15rem;}
.table.type2 {border-top:2px solid #323232;}
.table.type2 table thead th,
.table.type2 table tbody th {background:transparent; border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
.table.type2 table thead th {border-bottom:1px solid #323232;}
.table.type2 table tbody th {background:transparent;}
.table.type2 table tbody td {border-bottom:1px solid #ddd; border-left:1px solid #ddd;}

/*청소년안전망*/
.safestep {margin: 50rem 0; display: flex; flex-wrap: wrap;}
.safestep > dl {width: calc((100% - 100rem)/6); position: relative; border-radius: 20rem; margin-bottom: 40rem; padding: 10rem; border: 1px solid #d8ecec;  border-top: 2px solid #005353; background: #ffffff; box-shadow: 2px 2px 10px rgba(133,133,133,0.1);}
.safestep > dl:not(:last-child) {margin-right: 20rem;}
.safestep > dl > * {padding: 10rem 0; text-align: center;}
.safestep > dl > dt {padding-top: 25rem; font-family:'BinggraeTaom'; font-size: 21rem; font-weight: 700; color: #005353;}
.safestep > dl > dt span {position: absolute; top: -25rem; left: 50%; transform: translateX(-50%); font-size: 20rem; display: block; width: 50rem; height: 50rem; background: #d8ecec; border-radius: 50%; line-height: 50rem; text-align: center;}
.safestep > dl > dd {font-size: 16rem; padding-top: 5rem;}
@media all and (max-width: 1388px) {
  .safestep > dl {width: calc((100% - 40rem)/3);}
  .safestep > dl:nth-child(3n) {margin-right: 0;}
}
@media all and (max-width: 813px) {
  .safestep > dl {width: calc((100% - 20rem)/2);}
  .safestep > dl:nth-child(3n) {margin-right: 20rem;}
  .safestep > dl:nth-child(2n) {margin-right: 0;}
}
@media all and (max-width: 530px) {
  .safestep > dl {width: 100%; margin-right: 0 !important;}
}

/*청소년전화 1388*/
.call1388_wrap .cont_box { display:flex;  background:#fff; padding:40rem; }
.call1388_wrap .cont_box .img {margin-right:40rem; }
.call1388 {display: flex; flex-wrap: wrap; justify-content: center;}
.call1388 > dl {width: calc((100% - 40rem)/3); margin-bottom: 30rem;}
.call1388 > dl:not(:last-child) {margin-right: 20rem;}
.call1388 > dl > dt {text-align: center; font-weight: 700; color: #005353; padding: 10rem; background: #d8ecec; border-radius: 20rem;}
.call1388 > dl > dd {text-align: center; padding: 20rem 10rem 10rem 10rem;}
.call1388_wrap .cont1 { display:flex; justify-content:space-between; }
.call1388_wrap .cont1 > * {flex:0 0 calc(50% - 40rem);}
.call1388_wrap .cont1 li strong { display:block; font-size:20rem; margin-bottom:5rem; }
.call1388_wrap .cont1 li::before {content:''; position:absolute; right:-80rem; top:50%; width:80rem; height:1px; border-top:1px dashed #005353; }
.call1388_wrap .cont1 li,
.call1388_wrap .cont1 div { position:relative; border:1px solid #ddd; border-radius:10rem; text-align:center; padding:10rem; margin:20rem 0; }
.call1388_wrap .cont1 div { align-content:center; font-size:20rem; font-weight:600; border:1px solid #a1b7b7; background:#d8ecec; padding:50rem;}

@media all and (max-width: 880px) {
  .call1388_wrap .cont_box {display:block; }
  .call1388_wrap .cont_box .img { margin:0 auto 40rem; text-align:center; }
  .call1388 > dl {width: 100%;}
  .call1388 > dl:not(:last-child) {margin-right: 0;}
  .call1388_wrap .cont1 {display:block;}
  .call1388_wrap .cont1 ul {display:flex; gap:10rem; }
  .call1388_wrap .cont1 li {margin:0; flex:0 0 calc((100% - 20rem)/3); }
  .call1388_wrap .cont1 li::before { top:auto; right:auto; left:50%; bottom:-40rem; width:1px; height:40rem; border-left:1px dashed #005353;  }
  .call1388_wrap .cont1 div { margin:40rem 0 0;}
}

/*조직도*/
.org div {padding: 8rem 14rem; background: #eee; border-radius: 10rem; font-weight: 500; min-width: 100rem;}
.org00 > li {position: relative; padding-bottom: 150rem;}
.org00 > li::after {content: ''; display: block; position: absolute; z-index: -1; width: 1px; height: 574rem; background: #ddd;top: 0; left: 50%; transform: translateX(-50%);}
.org00 > li > div {text-align: center; margin: 20rem auto; width: 150rem; height: 150rem; background: #d8ecec; border-radius: 50%; font-weight: 700; display: flex; justify-content: center; align-items: center;}
.org01 > li > div {text-align: center; margin: 20rem auto; width: 150rem; height: 150rem; border: 10px solid #d8ecec; background: #ffffff; border-radius: 50%; font-weight: 700; display: flex; justify-content: center; align-items: center;}
.org02 {position: relative; margin: 0 auto; padding-bottom: 400rem;}
.org02 > li {position: absolute; text-align: center;}
.org02 > li:nth-child(1) {top: 0; right: 0; width: 50%;}
.org02 > li:nth-child(2) {top: 50rem; left: 50%; transform: translateX(-50%); width: 100%;}
.org02 > li:nth-child(1)::after {content: ''; display: block; position: absolute; width: 50%; height: 1px; background: #ddd; top: 43rem; z-index: -1}
.org02 > li:nth-child(1)::after {left: 0;}
.org02 > li > div {text-align: center; display: inline-block; margin: 20rem auto;}
.org02 > li:nth-child(1) > div {background: #ffffff; border: 1px solid #005353; color: #005353;}
.org02 > li:nth-child(2) > div {background: #005353; color: #ffffff; width: 150rem; }
.org03 {display: flex; flex-wrap: wrap;}
.org03 > li {width: calc(50% - 10rem); text-align: center; position: relative; margin-top: 20rem; margin-right: 20rem;}
.org03 > li:last-child {margin-right: 0;}
.org03 > li::after {content: ''; display: block; width: calc(50% + 10rem); height: 1px; background: #ddd; position: absolute; top: 20rem; z-index:-1;}
.org03 > li:nth-child(1)::after {right: -10rem;}
.org03 > li:nth-child(2)::after {left: -10rem;}
.org03 > li > div {display: inline-block; width: 100%; position: relative; padding:0; background:none; }
.org03 > li > div p { display:inline-block; width:70%; background: #ffa633; padding:8rem 14rem; border-radius:10rem; }
.org04 {display: flex; flex-wrap: wrap;}
.org04 > li {width:100%; text-align: center; margin-right: 10rem;}
.org04 > li:last-child {margin-right: 0;}
.org04 > li > div { display: inline-block; margin: 40rem auto 10rem; border: 1px solid #ffa633; width: 70%; background: #fff;}
.org04 > li > .dep_01 {padding: 10rem 15rem; margin: 0; border-radius: 20rem; border: 1px solid #ffa633;}
.org04 > li > .dep_01 > li {text-align: left;}
.org04 > li > div::after {content: ''; display: block; position: absolute; width: 1px; height: 20rem; background: #ddd; top: 20rem; left: 50%; transform: translateX(-50%);}
.org05 {display: flex; flex-wrap: wrap; justify-content:center;  gap:10rem; }
/* .org05-1 {gap:40rem;} */
.org05 > li > p { background:#fff0dd; border-radius:10rem; padding:10rem 20rem; }
@media all and (max-width: 786px) {
  .org02 {padding-bottom: 700rem;}
  .org04 > li > div {width:100%; }
  .org05 > li { flex:1 1 calc((100% - 20rem)/3); }
  .org05-1 {gap:10rem;}
}
@media all and (max-width: 480px) {
  .org02 {padding-bottom: 1200rem;}
  .org02 > li:nth-child(1) {text-align: right;}
  .org04 > li {width: 100%; margin-right: 0; margin-bottom: 20rem;}
  .org03 > li > div p {width:100%;}
}

.counsel_personal .step { margin-top:30rem; }
.counsel_personal .step ul { display:flex; flex-wrap:wrap; gap:20rem; }
.counsel_personal .step li { position:relative; background:#d8ecec; border-radius:20rem; flex:0 1 calc((100% - 100rem)/6); padding:25rem 20rem 20rem; text-align:center; }
.counsel_personal .step li::before {content:'→'; position:absolute; left:-20rem; top:50%; transform:translateY(-50%); color:#888; }
.counsel_personal .step li:first-of-type::before {display:none;}
.counsel_personal .step li span { position:absolute; left:15rem; top:-15rem; width:30rem; line-height:30rem; font-size:14rem; text-align:center; border-radius:5rem; background:#005353; color:#fff;}
@media all and (max-width:768px){
  .counsel_personal .step li { flex-basis:calc((100% - 40rem)/3); }
}
@media all and (max-width:480px){
  .counsel_personal .step li { flex-basis:calc((100% - 20rem)/2); }
}


.youth_safety_system { display:flex; gap:20rem; }
.youth_safety_system > * {flex:1 1 auto; text-align:center; align-content:center; }
.youth_safety_system .cont1 { display:flex; flex-direction:column; gap:10rem;}
.youth_safety_system .cont1 li { flex:1 1 auto; }
.youth_safety_system .cont1 p { height:100%; background:#d8ecec;border-radius:10rem; align-content:center; font-weight:600; color:#005353; padding:10rem; }
.youth_safety_system .cont2,
.youth_safety_system .cont4 { position:relative; flex-shrink:0; width:20rem; background:#005353; color:#fff; border-radius:10rem; padding:10rem 0; }
.youth_safety_system .cont3 { position:relative; display:grid; flex:0 0 50%; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); gap:10rem; }
.youth_safety_system .cont3 li { background:#fff0dd;border-radius:10rem; align-content:center; padding:10rem; }
.youth_safety_system .cont3 li:nth-of-type(5) { position:relative;  border:1px solid #ffa633; font-weight:600; background:#fff;  }
.youth_safety_system .cont5 { background:#ffa633; color:#fff; border-radius:10rem; font-weight:600;  padding:10rem; }
/* 선 */
.youth_safety_system .cont2::before,
.youth_safety_system .cont4::before {content:'▶'; position:absolute; left:-18rem; top:50%; transform:translateY(-50%);  color:#005353;}
.youth_safety_system .cont4::before {left:auto; right:-18rem; }
.youth_safety_system .cont3::before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/design/counselyouth/img/content/youth_safety_system_bg.jpg') no-repeat center; z-index:-1; opacity:0.2; }
@media all and (max-width:768px){
  .youth_safety_system { flex-direction:column; }
  .youth_safety_system .cont1 {flex-direction:row;}
  .youth_safety_system .cont2,
  .youth_safety_system .cont4 {width:100%;}
  /* 선 */
  .youth_safety_system .cont2::before,
  .youth_safety_system .cont4::before {content:'▼'; left:50%; top:-20rem; transform:translateX(-50%);  color:#005353;}
  .youth_safety_system .cont4::before {top:auto; bottom:-23rem; }
}


.use_guide .step { margin-top:30rem; }
.use_guide .step ul { display:flex; flex-wrap:wrap; gap:20rem; }
.use_guide .step li { position:relative; background:#d8ecec; border-radius:20rem; flex:0 1 calc((100% - 100rem)/4); padding:25rem 20rem 20rem; text-align:center; }
.use_guide .step li::before {content:'→'; position:absolute; left:-20rem; top:50%; transform:translateY(-50%); color:#888; }
.use_guide .step li:first-of-type::before {display:none;}
.use_guide .step li span { position:absolute; left:15rem; top:-15rem; width:30rem; line-height:30rem; font-size:14rem; text-align:center; border-radius:5rem; background:#005353; color:#fff;}
@media all and (max-width:768px){
  .use_guide .step li { flex-basis:calc((100% - 20rem)/2); }
}