@charset "utf-8";

.br{display: block;}
.tabSet ul.tabs{margin-bottom:40px}
.tabSet ul.tabs li{
		float:left;
        width:calc((47.6% - 20px)/2);
        background-color:#c9caca;
        margin-right:20px;
        border-radius:10px;
        overflow: hidden;
        text-align: center;
        color:#4c4948;
        font-size:1.28rem
    }
/*.tabSet ul.tabs li:nth-child(2){margin-right:0}    */
.tabSet ul.tabs li a{
            display:block;
            padding:5px 0;
            cursor:pointer 
		}
.tabSet ul.tabs li a.on{
			background:coral;
			color:#fff
		}
.tabSet ul.tabs:after{content: '';display: block;clear:both;}
        
.panels{
	background:#fff;
    min-height:180px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3) inset;
    border-radius:20px;
    padding-bottom :40px;
}
.panels .noel{
    padding: 40px; font-size: 0.9rem;
}
/*.panels .noel img{width: 300px;}*/
.panels:after{content:'';display: block;clear:both}
.panel{
    position: relative;
	padding:50px 30px 10px;
	font-size:14px;
	color:#4d4d4d;
    display:none;
}
.panel:before{content: '';display: block;width:3px;height:calc(100% - 30px);
            background-color:#000;
            position: absolute;top:40px;left:calc(50% - 2px);} 
.panel:after{content: '';display: block;clear: both;}

.history li{width:calc(50% - 20px);/*height:200px;*/position: relative;    clear: both;}

/*.history li:before{content: '';display: block;width:100%;height:15px;
                   background-image:url(../images_sub/icon_set2.png);
                   background-repeat: no-repeat; }*/
.history li:first-child:after{background-color: #f0aa26;}
.history li:after{content: '';display: block;width:18px;height:18px;
                    /*background:url(../images_sub/icon_set2.png) no-repeat 0 -40px;*/
					background-color:#fff;border:3px solid #000;border-radius:50%;
                    position:absolute;z-index:1;
                    top:0; }   
 .history li strong{display:block;font-weight: 700;font-size: 1.5rem;color:#000;
                        line-height: 1em;}
 .history li div{display:block;font-size:0.9rem;transform: translate(0, -5px);line-height: 1.3em;
                 letter-spacing: -2px;word-spacing: 5px;font-weight: 500;}
 .history li div p{margin-bottom:10px;position:relative;}
 .history li div p:before{content:'';display:block;width:7px;height:7px;background-color: #f0aa26;
                         border-radius:50%;position:absolute;top:5px;}
.history li:nth-child(2n-1) div p{padding-right:20px;margin-right:10px;}
.history li:nth-child(2n) div p{padding-left:20px;margin-left:10px;} 
.history li:nth-child(2n-1) div p:before{right:0}
.history li:nth-child(2n) div p:before{left:0} 

.history li:nth-child(2n-1){float:left;text-align: right;}
.history li:nth-child(2n){float:right;text-align: left;}
/*.history li:nth-child(2n):before{background-position:0 0px;} 
.history li:nth-child(2n-1):before{background-position: right -18px;}   */
.history li:nth-child(2n):after{left:-30px}
.history li:nth-child(2n-1):after{right:-28px}

.history li:nth-child(2n) strong{float:left;width:4.5rem;padding-left:5px}
.history li:nth-child(2n) div{float:left;/*width:calc(100% - 5rem - 20px);*/width:calc(100% - 5.5rem);max-width:300px;padding-top:10px;}
.history li:nth-child(2n-1) strong{float:right;width:4.5rem;padding-right:5px}
.history li:nth-child(2n-1) div{float:right;/*width:calc(100% - 5rem - 20px);*/width:calc(100% - 5.5rem);
    max-width:300px;padding-top:10px;}

.history li:last-child{height:auto;}

.ci_image{width:250px;float:left;text-align: center;}    
.ci_image img{width:100%;max-width:250px}
.ci_txt{width:550px;float:right; padding-left: 15px;
    text-align: left;line-height:2em;font-size:1rem}

    .tb1{width:100%;text-align: center;border-top:2px solid #ff571f;
        border-bottom:1px solid #4c4948}
    .tb1 thead{background-color: #efefef;}
    .tb1 th{font-weight: 500;padding:15px 0}
    .tb12{width:100%;text-align: center;border:2px solid #ff571f;}
    .tb12 thead{background-color: #ff571f; }/*#efefef;*/
    .tb12 thead:hover{background-color: #efefef;; }
    .tb12 th{font-weight: 500;padding:15px 0; font-size: 1.2rem;color: #fff;}
    .tb12 th:hover{font-weight: 500;padding:15px 0; font-size: 1.2rem;color: #333;}
    .noel .tb1 th{font-weight: 500;padding:10px 0;font-size: 1rem;}
    .tb1 td{font-weight: 400;padding:15px 0;line-height:2em}
    .noel .tb1 td{font-weight: 400;padding:10px 0;line-height:1.2em}
    .tb1 tr {border-bottom:1px solid #9FA0A0}
    .tb1 tbody tr:last-child{border-bottom:none}
    .tb1 .depart{text-align: left;padding-left:30px}
    .tb1 td.member{padding:0}
    .tb1 .member p {border-bottom:1px solid #c9caca;padding:10px 0}
    .tb1 .member p:last-child{border-bottom:none}


    
    .method_box{display: flex;justify-content: center;padding:30px;}
    .method_box li{width:33.3%;text-align: center;margin:0 20px}
    .method_box li a{display: block;font-size:1.1rem}
	 .method_box li:hover a{/*text-decoration:underline;*/color:#0063c9;font-weight:bold;}
    .method{display: block;width:140px;height:140px;position: relative;
                      background-color:rgba(140,204,209,0.2);border-radius: 50%;
                      margin:0 auto;margin-bottom:20px;transition:background-color 0.5s}
	.method_box li:hover .method{background-color:rgba(140,204,209,0.7);color:#fff}
    .method:before{content: '';display: block;width:100px;height:100px;
                            background:url(../images_sub/icon_set2.png) no-repeat;
                            position:absolute;left:calc(50% - 50px);top:calc(50% - 50px);}
    .method.met01:before{background-position:0 -240px}
    .method_box li:hover .method.met01:before{content:'031.\a 656.\a 1383';white-space:pre;
                                   background:none;font-size:1.3rem;line-height:1.3em;
                                         width:100px;display: block;padding-top:5px;text-align: center;}
    .method.met02:before{background-position:-95px -235px}
    .method.met03:before{background-position:-200px -240px}  
    .method.met04:before{width:110px;background-position:-300px -235px}       

    .method2_box {display: table;}
    .method2_box .method2{display: table-cell;width:140px;vertical-align: middle;}
    .method2_box .method2:hover .method{background-color:rgba(140,204,209,0.7);color:#fff}
    .method2_box .method2 .method{margin-bottom: 0;}
    .method2_box ul{display: table-cell;width:calc(100% - 140px);vertical-align: middle}
    .method2_box:after{content: '';display: block;clear:both}
    .method2_box .link_mark_h:hover{text-decoration:underline;
       color:#0063c9}

    .pop_set{position: fixed;width:100%;top:0;left:0;
            height:100%;background-color:rgba(0,0,0,0.5);
            z-index:999999}
    .pop_set .pop{width:100%;max-width:620px; max-height:100%;overflow:auto;
               background-color:rgba(255,255,255,1);
               position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);
               border-radius:20px;border:5px solid #0063c9;/*padding-bottom:30px*/
              }
    .pop_set .pop:after{content:url(../images_sub/close.png);position:absolute;right:30px;top:30px}
	.pop_set .pop::-webkit-scrollbar {
        width: 5px;
       }
	.pop_set .pop::-webkit-scrollbar-thumb {
        background-color: #fff;border:1px solid #6eb8c3;
  }
	.pop_set .pop::-webkit-scrollbar-track {
    background-color: #fff;
  }
    .pop h5{padding:30px 0px 20px;color:#000;font-size:1.5rem;
	        position: relative;font-family : welltoday-M;font-weight:normal;
			border-bottom:3px solid #0063c9;margin:0 30px;
            }
    .pop h5:after{content:'';display:block;clear:both}
	.pop h5 .big_font{position:relative}
    .pop h5 .big_font:before{content: '';display: block;width:30px;height:30px;
                 background:url(../images_sub/symbol.png) no-repeat center / 100%;
                 position: absolute;right:-60px;/*top:50%;transform:translate(0,-50%)*/  bottom:0px}
    .pop h5 span.small_font{display: block;font-size: 1.1rem;color:#0063c9;margin-bottom:5px}
    .pop > div{padding:30px;line-height:1.58m;}
    .pop div h6{font-size: 1.1rem;position: relative;padding-left:25px;margin-bottom: 10px;margin-top:20px}
    .pop div h6:first-child{margin-top:0}
    .pop div h6:before{content: '';display: block;width:30px;height:30px;
        background:url(../images_sub/icon_set2.png) no-repeat 0 -48px / 300px;
        position:absolute;z-index:1;
        top:-5px; left:0px;
		}  
    .pop div p{line-height:1.8em;padding-left:25px}
    .pop div ul{padding-top:0px;margin-bottom:5px}
    .pop div li{
            position: relative;
            padding-left: 0px;
            margin: 5px 30px;
            line-height:1.5em
    }
    .pop div li:before {
        content: '';
        display: block;
        width: 3px;
        height: 3px;
        background-color: #b5b5b6;
        border-radius: 50%;
        position: absolute;
        left: -10px;
        top: 12px;
    }
    .pop div li::after{content: '';display: block;clear: both;}
    .pop div li p.inline{float:left;width:calc(100% - 60px);line-height:1.5em}
    .pop div li span{display: block;width:2.7rem;float:left;line-height:1.5em;}
    .pop div .inline{display: inline-block;}
    .pop div p.inline {padding-left:0;}
    .pop div li p{padding-left:0}

    .pop div.pop_box{display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;padding:20px 0px}
    .pop_box div{border:2px solid #0063c9; width: 220px;
                 height:calc(3rem + 150px + 4px);border-radius: 20px;padding:0;
                 overflow: hidden;position: relative;
                 background-color:#0063c9;  transition:0.5s }
    .pop_box p.tit{font-style: normal;background-color: #0063c9;display: block;
                 line-height: 2.5rem;height:2.5rem;color:#fff;text-align: center;top:-2px;
                 padding:0
                }
    .pop .pop_box ul{background-color:#fff;width:100%;height:calc(100% - 2.5rem);
                     border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;
                     top:3rem;left:0;padding-top:15px;   }
    .pop .pop_box li {font-size:0.85rem;
        position: relative;
        padding-left: 5px;
        margin: 0px 15px 20px;
        line-height:1.5em;
        font-weight: 500;
    }
    .pop .pop_box li:before {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        background-color: #b5b5b6;
        border-radius: 50%;
        position: absolute;
        left: -5px;
        top: 9px;
    }
    .pop .pop_box:before{content: '';display: block;width:100px;height:20px;
                         background:url(../images_sub/icon_set2.png) -4px -350px;
                         position: absolute;top:100px;left:50%;transform: translate(-50%,0);
                        padding-top:20px;font-size: 0.9rem;z-index:1}
    .pop .pop_box:after{content: '학교폭력 예방 환경 조성';display: block;width:100px;
                    position: absolute;top:120px;left:50%;transform: translate(-50%,0);
                    text-align: center;font-size:0.8rem;font-weight:500;z-index:1}
	.pop .pipe::before{content:'|';display:inline-block;margin-right:5px;margin-left:5px;font-size:1rem;font-weight:700}
	.pop i {font-style:normal}
	.inline{display:flex;}
    .inline h4{}
    .inline p{/*font-size:1.1rem;*/margin-left:30px;}
    .box div{padding-left:50px;margin-bottom:10px;}
    .box_div{padding-left:30px;margin-bottom:50px;}
    .box h5{font-size: 1.27rem;margin-bottom:15px}
    .box h5{position: relative;padding-left:10px;}
    .box h5:before{content: '';display: block;width:5px;height:5px;background-color:#b5b5b6;
                           border-radius:50%;position: absolute;left:-10px;top:11px}
    
    .list_dot  li{position: relative;padding-left:10px;margin:15px 30px 15px 50px;}
    .list_dot li:before{content: '';display: block;width:5px;height:5px;background-color:#b5b5b6;
                           border-radius:50%;position: absolute;left:-10px;top:11px}
    .list_dot2  li{position: relative;padding-left:10px;margin:15px 50px}
    .list_dot2 li:before{content: '';display: block;width:5px;height:5px;background-color:#b5b5b6;
                           border-radius:50%;position: absolute;left:-10px;top:11px}

/*
    .box .list_dot{position: relative;padding-left:10px;margin:15px 50px}
    .box .list_dot:before{content: '';display: block;width:5px;height:5px;background-color:#b5b5b6;
                           border-radius:50%;position: absolute;left:-10px;top:11px}
*/


	.box_shadow{
    background: #fff;
    box-shadow: 0 0 8px rgb(0 0 0 / 30%) inset;
    border-radius: 20px;
    }

#sub01_01 .padding20{padding:50px 30px}
#sub01_01 .box_shadow{padding:50px 30px}
#sub01_01 .box_shadow:after{content:'';display:block;clear:both}
#sub01_02 .subj{font-size: 1.7rem;}
#sub01_02 .content{padding:0 30px;font-size:1.15rem}
#sub01_02 .content p{margin-bottom:20px;line-height:2em}
#sub01_02 .content .footer{margin-top:100px;
                          font-size:1.5rem;text-align: right;position:relative;}  
#sub01_02 .content b{font-weight: 500; color: coral; font-size: 1em;}
#sub01_02 .content .noel img{
/*   width:300px; width: 920px; margin-left: -30px;*/
} 
    #sub01_02 .panels .noelsheet img{margin-top: 50px; width: 300px;}
.footer:after{content:'';display:block;position:absolute;right:0;top:12px;
                             width:30px;height:30px;
							 /*background:url(../images_sub/symbol.png) no-repeat center /100%*/ }    
#sub01_03 .content{padding:0 30px;}
#sub01_03 .cont1{position: relative;display: flex;justify-content: center;
                 flex-direction: column;align-items: center;}

#sub01_03 .line1{color:#fff;width:100%;text-align: center;}
#sub01_03 .line1 button{text-align: center;height:80px;border:none;font-size:1.5rem;font-weight:700;
                       border-radius:10px;position: relative;margin:0 auto 50px;
                    padding:0 10px}
#sub01_03 .line1 span{display: block;font-size:1.1rem;}
#sub01_03 .line1 button:before{content:'';display: block;width:2px;height:50px;background-color: #807f80;
                               position: absolute;left:calc(50% - 1px);bottom:-50px}          
#sub01_03 .cont1 .btn1{width:430px; background-color:#0063c9;}
#sub01_03 .cont1 .btn2{width:430px;background-color:#19b3b0;}
#sub01_03 .cont1 .btn3{width:430px; background-color:#0063c9;}

#sub01_03 .cont1 .btn4_box {display: flex;justify-content: space-between;flex-wrap: nowrap;
                            position:relative;padding-top:50px;width:100%;}
#sub01_03 .cont1 .btn4_box:before{content:'';display: block;width:calc(100% - 250px);
                              height:2px;background-color: #807f80;
                              position: absolute;left:50%;top:0px;transform: translate(-50%,0);}
#sub01_03 .cont1 .btn4_box button{border:none;height:80px;width:250px;background-color:rgba(140,204,209,0.2);
                              border-radius:10px;
                              font-size:1.3rem;font-weight:700;position: relative;
                              cursor: pointer;transition:box-shadow 1s;
                              box-shadow: 0 0px 2px rgba(0,0,0,0);
                              transition: background-color 0.5s, color 0.5s, text-decoration 0.5s;}                              
#sub01_03 .cont1 .btn4_box button:hover{box-shadow: 0 1px 2px rgba(0,0,0,0.3);
                          background-color:#97acd9;color:#fff;text-decoration: underline;}
#sub01_03 .cont1 .btn4_box button:before{content:'';display: block;width:2px;height:50px;background-color: #807f80;
    position: absolute;left:calc(50% - 1px);top:-50px}

#sub01_04 ul{padding:0px 30px 0;display: table;width:100%}
#sub01_04 li:after{content: '';display: block;clear: both;margin-bottom:70px}
#sub01_04 h6{display:table-cell;width:190px;margin-bottom:100px;position: relative;font-size:1.1rem;font-weight:500}
#sub01_04 h6:after{content: '';display: block;width:3px; height:100%;
                  background-color:#0a4abd;border-radius:5px;
                  position: absolute;right:0;top:0}
#sub01_04 h6 span{display: block;font-size:1.7rem;color:#0a4abd;font-weight:500}
#sub01_04 h6 span:before{content:'';display:block;position:absolute;left:-32px;top:6px;
                width:32px;height:32px;
                background:url(../images_sub/icon_set2.png) no-repeat 0 -78px;}
#sub01_04 div{display:table-cell;width:calc(100% - 190px);
              margin-bottom:100px;padding-left:30px;vertical-align: middle;
              font-size:1.1rem}
#sub01_04 div p{line-height: 2em;}



#sub01_05 .cont1{padding:30px;background-color:#efefef;border-radius:20px;margin-bottom:50px}
#sub01_05 .cont1:after{content:'';display: block;clear:both;}
#sub01_05 .cont1 span{display:block}
#sub01_05 .map{width:50%;float:left;}
#sub01_05 ul{width:50%;float:left;padding-left:120px;padding-top:70px}
#sub01_05 ul li{position: relative;line-height:1.7em;margin-bottom:20px}
#sub01_05 ul li:before{content: '';display: block;
                       background-image:url(../images_sub/icon_set2.png);width:80px;height:80px;
                       position: absolute;left:-100px;top:-10px;}
#sub01_05 ul li.li01:before{background-position:-90px -30px}
#sub01_05 ul li.li02:before{background-position:-205px -30px}
#sub01_05 ul li p{margin-bottom:10px;padding-left:10px;}
#sub01_05 ul li p:before{content:'-';display: block;margin-right:10px;
                 font-size:1.5rem;transform: translate(0,3px);
                 position: absolute;left:-10px;}
#sub01_05 .cont2{padding:30px;background-color:rgba(154,211,202,0.25);border-radius:20px;line-height:2em}
#sub01_05 .cont2 .addr{color:#19b3b0;font-size:1.1rem;font-weight:500;}
#sub01_05 .cont2 .tel{font-size:1rem;font-weight:500}
#sub01_05 .cont2 .tel span{display: inline-block;width:220px}

#sub02_01 .subj{margin-bottom:120px}    
#sub02_01 article{margin-bottom:50px}
#sub02_01 .inline p {font-size:1.1rem;padding-top:5px;}
#sub02_01 div.inline p {font-size:1.1rem;padding-top:3px;}

#sub02_01 .list_dot li {font-size:1.1rem}

/*#sub02_02 article{font-size:1.1rem}*/
#sub02_02 .box_shadow{padding:30px;margin-left: 20px;}
#sub02_02 .box_shadow div:last-child{margin-bottom:0;}

#sub02_03 .tb1{font-size:1.1rem}
#sub02_03 .popup_button a{display:inline-block;color:#fff;padding:0 20px;background-color:#6eb8c3;
    border-radius: 10px;}

#sub02_04 .compan{background-color:rgba(114,113,113,0.11);padding:40px 25px;
                  display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;border-radius:15px;}
#sub02_04 .compan > div{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;
                      border-radius:15px;text-align: center;font-size:0.8rem;padding-top:10px;padding-bottom:10px}
#sub02_04 .compan div.compan_d1{width:15%;min-width:87px;color:#fff;font-weight: 500;
                              align-items:center;}
#sub02_04 .compan .process1{background-color:#19b3b0;}
#sub02_04 .compan .process1 p::before{content: '';display: block;width:75px;height:75px;
                  border-radius: 50%;margin:0 auto;
                  background:url(../images_sub/icon_set2.png) -18px -420px #fff}
#sub02_04 .compan .process2 div {background:url(../images_sub/back_arrow_pc.png) center/contain no-repeat;
                  width:130px;height:110px;font-size:0.75rem;display: flex;align-items: center;justify-content: left;}   
#sub02_04 .compan .process2 div p{display:block;width:100px;margin-left:7px;text-align: center;}
#sub02_04 .compan .process2 div span.process_tit{display: block;
                                  color:#0063c9;font-weight: 500;font-size:0.9rem} 

#sub02_04 .compan .process3{background-color:#0063c9;z-index:1;position:relative}
#sub02_04 .compan .process3 p::before{content: '';display: block;width:75px;height:75px;
                                    border-radius: 50%;margin:0 auto;
                                    background:url(../images_sub/icon_set2.png) -107px -420px #fff}
#sub02_04 .compan .process4 {background-color:#bbcce9;margin-left:-80px;padding-left:30px}
#sub02_04 .compan .process4 ul{text-align: left;font-size:0.9rem;padding:10px;font-weight:500;line-height:2em}
/*#sub02_04 .compan .process5 p{width:80px;height:80px;background-color:#fff;border:3px solid #97acd9;
                            border-radius: 50%;font-weight: 500;font-size:0.9rem;
                            display: flex;align-items: center;justify-content: center;
                            position: relative;}
#sub02_04 .compan .process5 p:before{content: '';display: block;width:40px;border-top:3px dotted #6a5ca6;
                            position: absolute;left:-40px;z-index:-1}*/

#sub02_04 .compan .process5:before,#sub02_04 .compan .process6:before,#sub02_04 .compan .process3:before {
    content: "화살표 오른쪽으로";
    position: absolute;z-index:-1;
    left: -20%;
    top: 50%;
    width: 0px;
    height: 0px;
    font-size: 0px;
    transform: translateY(-50%);
    border-left: 10px solid rgb(0, 0, 0);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }
#sub02_04 .compan .process5{background-color:#00b5ee;position: relative;}
#sub02_04 .compan .process5 p::before{content: '';display: block;width:75px;height:75px;
                  border-radius: 50%;margin:0 auto;
                  background:url(../images_sub/icon_set2.png) -195px -420px #fff}

#sub02_04 .compan .process6{background-color:#0063c9;position: relative;}
#sub02_04 .compan .process6 p::before{content: '';display: block;width:75px;height:75px;
                  border-radius: 50%;margin:0 auto;
                  background:url(../images_sub/symbol.png) no-repeat center 15px/ 80% #fff}

#sub03_01 .box_div{font-size:1.1rem}
#sub03_01 .compan{padding:20px;
                  display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;}
#sub03_01 .compan > div{display: flex;flex-wrap: wrap;align-items: flex-start;
                        justify-content: flex-start;position: relative;
                        border-radius:15px;height:400px;text-align: center;font-size:0.9rem;transition: 0.5s;}
#sub03_01 .compan > div:before{
                        content: "화살표 오른쪽으로";
                        position: absolute;z-index:1;
                        right:-20px;
                        top: 50%;
                        width: 0px;
                        height: 0px;
                        font-size: 0px;
                        border-left: 10px solid rgb(10, 74, 189);
                        border-top: 7px solid transparent;
                        border-bottom: 7px solid transparent;
    }   
#sub03_01 .compan > div:last-child:before{display: none;}
#sub03_01 .compan div.compan_d1{width:10%;min-width:87px;color:#fff;padding-top:20px;font-weight: 500;}
#sub03_01 .compan div.compan_d1 p{width:100%;height:4em; font-size:1.2em;}

#sub03_01 .compan .process1{background-color:#19b3b0;}
#sub03_01 .compan .process3{background-color:rgba(0,99,201,0.7);}
#sub03_01 .compan .process4 {width:calc(100% - 30% - 90px);
                            background: no-repeat center rgba(168,204,255,0.3);position: relative;}
#sub03_01 .compan .process4:after{content:url(../images_sub/sub03_02_back-g.png);position:absolute;top:50%;left:50%;
         transform:translate(-50%,-50%);opacity:0.7}/*filter:grayscale(100%);*/
#sub03_01 .compan .process6{background-color:#bbcce9;position: relative;}
#sub03_01 .compan div.compan_d1.process6 p{height:1em; font-size:1.3em;}

#sub03_01 .compan div.compan_d1 p.border{width:75px;height:75px;border:3px solid #9ad3ca;border-radius:50%;
                            font-size:0;background-color:#fff;color:transparent;
                            display: flex;align-items: center;justify-content: center;
                            margin:0 auto}

#sub03_01 .compan div.compan_d1 p.border.process1_1{
                       background:url(../images_sub/icon_set2.png) -25px -497px #fff;
                       }
#sub03_01 .compan div.compan_d1 p.border.process1_2{
                        background:url(../images_sub/icon_set2.png) -123px -497px #fff;
                        }   
#sub03_01 .compan div.compan_d1 p.border.process2_1{
                            background:url(../images_sub/icon_set2.png) -220px -497px #fff;
                            border-color:#0063c9
                            }   
#sub03_01 .compan div.compan_d1 p.border.process2_2{
                                background:url(../images_sub/icon_set2.png) -318px -497px #fff;
                                border-color:#0063c9
                                }                             
#sub03_01 .compan div.compan_d1 p.border.process3_1,#sub03_01 .compan div.compan_d1 p.border.process3_2,#sub03_01 .compan div.compan_d1 p.border.process3_3{color:#3e3a3a;font-size:0.9rem}
#sub03_01 .compan div.compan_d1 p.border.process3_1{border-color:#00b4ed}
#sub03_01 .compan div.compan_d1 p.border.process3_2{border-color:#19b3b0}
#sub03_01 .compan div.compan_d1 p.border.process3_3{border-color:#0063c9}

#sub03_01 .compan .process4 p{position: absolute;width:140px;/*height:60px;*/z-index:9;
                           padding:5px 0;
                           background-color:rgba(255,255,255,0.8);
                           border-radius:10px;
                           box-shadow:0 0 5px rgba(0,0,0,0.4);
                           transition: 0.5s;
                           font-size:0.75rem;font-weight:500;line-height:1.1em;}
#sub03_01 .compan .process4 .process_tit{display: block;
    color:#0063c9;font-weight: 500;font-size:0.9rem;line-height:1.5em;} 
#sub03_01 .compan .process4 .process4_1{left:13%;top:30px}
#sub03_01 .compan .process4 .process4_2{right:13%;top:30px}
#sub03_01 .compan .process4 .process4_3{left:3%;top:125px}
#sub03_01 .compan .process4 .process4_4{right:3%;top:125px}
#sub03_01 .compan .process4 .process4_5{left:5%;top:225px}
#sub03_01 .compan .process4 .process4_6{right:5%;top:225px}
#sub03_01 .compan .process4 .process4_7{left:50%;transform:translateX(-50%);bottom:30px}


#sub03_02 .content{padding:0 30px;}
#sub03_02 .cont1{position: relative;display: flex;justify-content: center;
                 flex-direction: column;align-items: center;}

#sub03_02 .line1{color:#fff;font-size:1.3rem;font-weight:500;width:100%;text-align: center;}
#sub03_02 .line1 button{text-align: center;height:70px;border:none;font-size:1.5rem;font-weight:700;
                       border-radius:10px;position: relative;margin:0 auto 150px;
                    padding:0 10px}
#sub03_02 .line1 span{display: block;font-size:1.1rem;}
#sub03_02 .line1 button:before{content:'';display: block;width:2px;height:150px;background-color: #807f80;
                               position: absolute;left:calc(50% - 1px);bottom:-150px}  
#sub03_02 .line1.last_line1 button{margin-bottom:75px}
#sub03_02 .line1.last_line1 button:before {height:75px;bottom:-75px}      
#sub03_02 .cont1 .btn1{width:430px; background-color:#0063c9;}
#sub03_02 .cont1 .btn2{width:430px;background-color:#19b3b0;}
#sub03_02 .cont1 .btn3{width:430px; background-color:#0063c9;line-height:70px;border:3px solid #0063c9;
                      transition:background-color 0.5s,color 0.5s; }
#sub03_02 .cont1 .btn3:hover{background-color:#fff;color:#0063c9;text-decoration:underline}

#sub03_02 .cont1 .btn4_box {display: flex;justify-content: space-between;flex-wrap: nowrap;
                            position:relative;padding-top:50px;width:100%;}
#sub03_02 .cont1 .btn4_box:before{content:'';display: block;width:calc(100% - 170px);
                              height:2px;background-color: #807f80;
                              position: absolute;left:50%;top:0px;transform: translate(-50%,0);}
#sub03_02 .cont1 .btn4_box button{border:none;height:2.5rem;width:170px;border:3px solid #8cccd1;
                              border-radius:10px;color:#fff;
                              font-size:1.2rem;font-weight:700;position: relative;background-color:#8cccd1;
                              }                              
/*#sub03_02 .cont1 .btn4_box button:hover{box-shadow: 0 1px 2px rgba(0,0,0,0.3);}*/
#sub03_02 .cont1 .btn4_box button:before{content:'';display: block;width:2px;height:50px;
                    background-color: #807f80;
                    position: absolute;left:calc(50% - 1px);top:-52px}

#sub03_02 .cont1 .btn5_box {display: flex;justify-content: space-between;flex-wrap: nowrap;
                        position:absolute;top:120px;width:70%;left:15%;}
#sub03_02 .cont1 .btn5_box:before{content:'';display: block;width:calc(50% - 170px);
                          height:2px;background-color: #807f80;
                          position: absolute;left:170px;top:50%;transition:background-color 0.5s;color:0.5s}
#sub03_02 .cont1 .btn5_box button{border:none;height:3rem;width:170px;line-height:3rem;
                          border-radius:10px;color:#fff;
                          font-size:1.3rem;font-weight:700;position: relative;background-color:#97acd9;border:3px solid #97acd9;
						  transition:background-color 0.5s,color 0.5s;
                          }    
#sub03_02 .cont1 .btn5_box button:hover{background-color:#fff;color:#97acd9;text-decoration:underline}
#sub03_02 .cont1 .btn6_box {display: flex;justify-content: space-between;flex-wrap: nowrap;
                            position:absolute;top:340px;width:70%;left:15%;}
#sub03_02 .cont1 .btn6_box:before{content:'';display: block;width:calc(100% - 340px);
                              height:2px;background-color: #807f80;
                              position: absolute;left:170px;top:50%;}
#sub03_02 .cont1 .btn6_box button{line-height:3rem;width:170px;height:3rem;
                              border-radius:10px;color:#fff;
                              font-size:1.3rem;font-weight:700;position: relative;
                              background-color:#97acd9;border:3px solid #97acd9;transition:background-color 0.5s,color 0.5s;
                              }    
#sub03_02 .cont1 button a{display: block;line-height:inherit}
#sub03_02 .cont1 .btn6_box button:hover{background-color:#fff;color:#97acd9;text-decoration:underline}
                              }   

.sub03_02 .pop h5 {padding:30px 30px}
.sub03_02 .pop_box > div {
    border: 2px solid #0063c9;
    width: 220px;
    height: calc(3rem + 100px + 4px);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
    background-color: #0063c9;
    transition: 0.5s;
}
.sub03_02  .pop .pop_box li {
    text-align: center;
    margin: 0px 0px 10px;
}

.sub03_02 .pop div li:before {display: none;}
.sub03_02 .pop .pop_box:before {top:60px}
.sub03_02 .pop .pop_box:after {content: '지역사회 청소년안전망 구축';top:80px}
.sub03_02 .box_arr{background-color:transparent;width:100%;border:none;
                           display: flex;justify-content: center;}
.sub03_02  .box_arr .arr{display: block;width:50%;}
.sub03_02  .box_arr .arr:before{content:'';display:block;width:15px;height:45px;
    background:url(../images_sub/icon_set2.png) -85px -245px / 300px;
    /*position: absolute;top:-10px;transform: translate(-7px,0);
   padding-top:0px;font-size: 0.9rem;*/}
.sub03_02 .box_arr .arr:first-child:before{float:left;   
    margin-left:100px;}
    .sub03_02 .box_arr .arr:last-child:before{float:right;   
        margin-right:100px;}
.sub03_02 div.box3,.sub03_02 div.box4{width:100%;margin-top:10px;
                           border-radius:10px;height:3em;line-height: 3em;padding:0;
                           text-align: center;color:#fff}
.sub03_02 div.box3{background-color: rgba(0,99,201,0.7);}
.sub03_02 div.box4{background-color: #0a4abd;}
.sub03_02 .tb1 {font-size:0.9rem}
.sub03_02 .tb1 thead th{border-right:1px solid #fff;background-color:#dcdddd}
.sub03_02 .tb1 tbody th{background-color:#efefef}
.sub03_02 .tb1 td{text-align: left;padding-left:5px;line-height:1.5em}
.sub03_02 .tb1 li{line-height:1.5em;position: relative;margin:0 10px}
.sub03_02 .tb1 li::after{content: '';display: block;width:3px;height:3px;background-color:#b5b5b6;
    border-radius:50%;position: absolute;left:-5px;top:10px}

@media all and (max-width:1184px) {
         .in{display: inline;}
        /* #sub02_04 .compan .process6:before{left: -13px;}*/
         #sub03_01 .compan > div:before{right:-12px}
    .noel iframe{width:100%; height: 100%;}
}
@media all and (max-width:1140px) {
    .ci_txt {width:calc(100% - 300px)}
    .ci_txt span{content:'';display: block;}
    .ci_txt p{display: inline;}
	#sub01_03 .cont1 .btn4_box:before{width:calc(100% - 200px);}
	#sub01_03 .cont1 .btn4_box button{width:200px;}
}
@media all and (max-width:1070px) {
    .ci_txt i{content:'';display: block;}
    #sub01_05 .content{padding:10 20px;margin:20px} 
}
@media all and (max-width:1024px) {
   /* #sub02_04 .compan .process6:before{left: -15%;}*/
    #sub03_01 .compan > div:before{right:-20px}
    .noel iframe{width:100%; height: 100%;}
}
@media all and (max-width:860px) {
    #sub03_01 .compan > div:before{right:-13px}
}
@media all and (max-width:760px) {
    .br{display: inline;}
    .in{display: inline;}
    .tabSet ul.tabs li{
        margin-bottom:10px;
		width:calc(47% - 5px);margin-right:10px;font-size:1rem}
    .tabSet ul.tabs li:nth-child(2){margin-right:0}
	.tabSet ul.tabs {margin-bottom: 15px;}
    .panel:before{left:20px} 
	 .history li{width:calc(50% - 20px);margin-bottom:20px;position: relative;    clear: both;}
	 .history li strong{margin-bottom:10px;}

	.history li:nth-child(n) strong{float:none;margin-left:10px;}
	.history li:nth-child(n){float:none;text-align: left;width:100%;}
	.history li:nth-child(n):after{left:-18px;top:5px}
    .history li:nth-child(n) div{float:none;width:100%;max-width: 100%;margin-left:20px}
	.history li:nth-child(n) div p{padding-right:0px;margin-right:0px;padding-left:20px;margin-left:10px;}
	.history li:nth-child(n) div p:before{left:0} 

    .ci_image{width:100%;float:none;margin-bottom: 30px;}    
    .ci_txt{width:100%;float:none;
            text-align: left;line-height:2em} 
    .ci_txt span{content:'';display: inline;}
    .ci_txt i{content:'';display: inline;}
    .tb1{font-size:0.8rem;}
    .tb1 th{font-weight: 500;padding: 5px 0;line-height:1.3em}
    .tb1 td{font-weight: 400;padding: 5px 0;line-height:1.2em; font-size: 0.8rem;}
    .tb1 .depart{text-align: left;padding:5px}
    .tb1 .member p {border-bottom:1px solid #c9caca;padding:5px 0}

    .method_box{padding:50px 0px 0;flex-wrap: wrap;}
    .method_box li{width:100%;margin-bottom:30px}
    .method_box li a span{margin-bottom:10px}
    .box div {
        padding-left: 0px;
		margin-bottom:50px
    }

    .popup_button a{border-radius: 5px;line-height:2em}
    .pop div p {
        line-height: 1.5em;
        padding-left: 25px;
    }
   /* .pop h5{background-color:#19b3b0;padding:10px;color:#fff;font-size:1.5rem;
        font-weight:500;position: relative;overflow: hidden;
        }
    .pop h5:after{width:100px;height:100px;
                background:url(../images_sub/icon_set2.png) no-repeat -5px -100px / 350px;
                right:-20px;top:auto;bottom:-10px;opacity: .5;}
    .pop h5 span{display: block;font-size: 1.1rem;} */
    .pop div {
        padding: 10px 10px 20px;
    }
    .pop div.pop_box {
        display: flex;flex-wrap: wrap;flex-direction: column;
        padding: 20px 30px;
    }
    .pop_box div {
        padding:0;margin:0 auto;
        width:80%;min-width:280px;
    }
    .pop_box div:first-child{margin-bottom:100px}
    .pop .pop_box:before{width:20px;height:70px;
        background:url(../images_sub/icon_set2.png) -120px -340px;
        position: absolute;top:50%;left:45%;transform: translate(0,-50%);
       padding-top:0px;font-size: 0.9rem;}
    .pop .pop_box:after{width:130px;top:50%;left:calc(45% + 20px);transform: translate(0,-60%);text-align: left;}
    .pop_box div ul{height:auto}
    .pop div h6 {
        font-size: 1rem;
        position: relative;
        padding-left: 20px;
        margin-bottom: 10px;
        margin-top: 20px;
    }
    .pop div li {
        position: relative;
        padding-left: 10px;
        margin: 0px 0 10px;margin-left:30px;
        line-height: 1.5em;
    }
    .pop div li span {
        display: block;
        width: 60px;
        float: none;
    }
    .pop div li p.inline {
        float: none;
        width: 100%;

    }
    .pop div p.inline {
    		padding-left:20px;
     }
    .pop div .inline {
        display: block;
    }
     .pop .pipe::before{content:'|';display:inline-block;margin-right:5px;margin-left:5px;font-size:0.9rem;font-weight:bold;transform:translate(0,-1px)}  
    .method2_box {display: block;}
    .method2_box .method2{display: block;width:100%;}
    .method2_box .method2 .method{margin-bottom: 0;}
    .method2_box ul{display: block;width:100%;text-align: left;}
    .method2_box .list_dot  li span{display: inline-block;}
    .list_dot  li{position: relative;padding-left:10px;margin:15px 0px; margin-left: 20px;}
    .method2_box .list_dot li:before{display: inline-block;position: relative;left:0;top:-6px;margin-right:5px}
    .method2_box .list_dot2  li span{display: inline-block;}
    .list_dot2 li{position: relative;padding-left:10px;margin:15px 14px;
	word-break: normal;
    word-wrap: normal;}

    
    #sub01_02 .subj{padding:0 20px;font-size:1.3rem}
    #sub01_02 .subj p {
        display: block;
    }
    #sub01_02 .subj p.in{display: inline;}
    #sub01_02 .content{padding:0 20px;font-size:1rem}
    #sub01_02 .content p{margin-bottom:20px;line-height:1.5em}
    #sub01_02 .content .footer{margin-top:100px;
                            font-size:1.1rem;text-align: right;}
/*    #sub01_02 .content img{width: 100%;} */

    #sub01_03 .content{padding:0 20px;}  
    #sub01_03 .line1{font-size:1.1rem;}     
    #sub01_03 .cont1 .btn1{width:90%; }
    #sub01_03 .cont1 .btn2{width:90%;}
    #sub01_03 .cont1 .btn3{width:90%; }   
    #sub01_03 .cont1 .btn4_box button{
        width:30%;font-size:1rem;
        } 
    #sub01_03 .cont1 .btn4_box:before{width:70%;}

    #sub01_04 ul{padding:30px 0 0 ; display: block;width:100%}
    #sub01_04 li:after { margin-bottom: 50px;  }
    #sub01_04 h6{display:block;width:100%;padding-left: 27px; margin-bottom:20px;position: relative;border-bottom:1px solid #0a4abd;  }
    #sub01_04 h6:after{display:none;}
    #sub01_04 h6 span{display: inline-block;margin-right:15px;font-size:1.7rem;color:#0a4abd;font-weight:500}
    #sub01_04 h6 span:before{content:'';display:block;position:absolute;left:0;top:8px;
        width:28px;height:28px;
        background:url(../images_sub/icon_set2.png) no-repeat -2px -66px; 
        background-size:350px;
        }
    #sub01_04 div{display:table-cell;width:calc(100% - 190px);margin-bottom:100px;padding-left:30px;font-size:1rem}
    #sub01_04 div p{line-height: 2em;}

    #sub01_05 .content{padding:10 20px;margin:20px}  

    #sub01_05 .map{width:100%;float:none;}
    #sub01_05 ul{width:100%;float:none;padding-left: 0px; padding-top: 30px;}
    #sub01_05 ul li{position: relative;line-height:1.7em;margin-bottom:20px;
                    padding-top:30px;text-align: left;}
    #sub01_05 ul li:before{position: relative;left: 0;top: 0;margin:0 auto 20px}
    #sub01_05 ul li p{margin-bottom:10px;padding-left:10px;text-align:center}

  #sub01_05 ul li p:before{content:'';/*display: inline-block;transform: translate(0,0);
                     position: relative;left:0;*/}
    #sub01_05 .cont2{text-align: center;}

    #sub02_01 .content.box .inline{display:block;}
    #sub02_01 .inline h4{display: block;}
    #sub02_01 .inline p{display: block;font-size:1.1rem;transform: translate(0,0);}
  
    #sub02_01 .box h5 {margin-left:20px;margin-bottom:5px}                        
    #sub02_01 .box p{}
/*    #sub02_01 .tb1{margin-left:20px;width:calc(100% - 20px)}*/
    
    
    #sub02_02 .box_shadow{padding:23px;}

    #sub02_02 .box h5 {text-align: left;}

    #sub02_04 .compan {
        flex-direction: column;
    }
  #sub02_04 .compan > div {
            height: auto;
            width:100%;
            margin-bottom:10px;
   }
  #sub02_04 .compan div.compan_d1 {
    width: 100%;
    min-width: 100%;
    padding: 10px 0 ;
	justify-content: flex-start;
	box-sizing:border-box;
	
   }
   #sub02_04 .compan .process1 p::before,#sub02_04 .compan .process3 p::before,#sub02_04 .compan .process5 p::before,#sub02_04 .compan .process6 p::before{margin-right:20px;margin-left:0}
   #sub02_04 .compan p{width:260px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:1rem}
    #sub02_04 .compan p span{display:block;width:120px}
   #sub02_04 .compan .process2 div {
    background: url(../images_sub/back_arrow_mo.png) center/contain no-repeat;
    align-items: flex-start;
    justify-content: left;
}
    #sub02_04 .compan .process2 div p {
        width: 100%;
        margin-left: 0px;
        margin-top:20px;
        text-align: center;font-size:0.9rem
    }
	#sub02_04 .compan .process3{
        padding-top:20px;margin-top:20px
    }  
    #sub02_04 .compan .process4 {margin-left:0;margin-top:-30px;padding-top:20px}
	#sub02_04 .compan .process4 ul {line-height:1.5em}
    #sub02_04 .compan .process5{
        padding-top:20px;margin-top:20px
    }    

    #sub02_04 .compan .process6{margin-top:20px}    
    #sub02_04 .compan .process5:before,#sub02_04 .compan .process6:before,#sub02_04 .compan .process3:before {
		content: "화살표 아래쪽으로";
        border-top: 10px solid rgb(127, 142, 154);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        left: 50%;top: -20px;
        transform: translate(-50%,0);
    } 
  
   #sub03_01 .compan {
        flex-direction: column;
    }
  #sub03_01 .compan > div {
            height: auto;
            width:100%;
            margin-bottom:20px;
   }
  #sub03_01 .compan div.compan_d1 {
    width: 100%;
    min-width: 100%;
    padding: 20px 0 ;
   }
   #sub03_01 .compan div.compan_d1 p {
    width: 100%;
    height: 1em;
}
   #sub03_01 .compan > div >p{margin-bottom:10px;}
   #sub03_01 .compan > div:before{
      border-top: 10px solid rgb(10, 74, 189);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      left: 50%;top: auto;bottom:-23px;
      transform: translate(-50%,0);
  } 
#sub03_01 .compan .process4 {width:100%;height:370px}

#sub03_02 .content{padding:0 20px;}  
#sub03_02 .line1{font-size:1.1rem;}     
#sub03_02 .cont1 .btn1{width:90%; }
#sub03_02 .cont1 .btn2{width:90%;}
#sub03_02 .cont1 .btn3{width:90%; }   
#sub03_02 .cont1 .btn4_box button{
    width:20%;font-size:0.8rem;font-weight:500;
    } 
#sub03_02  .cont1 .btn4_box button span{display: block;}    
#sub03_02 .cont1 .btn4_box:before{width:80%;}
#sub03_02 .cont1 .btn5_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: absolute;
    top: 120px;
    width: 170px;
    left: 50%;
    transform: translateX(-50%);
}
#sub03_02 .cont1 .btn5_box:before{display:none}
#sub03_02 .cont1 .btn6_box {
    width: 90%;
    left: 5%;
}
#sub03_02 .cont1 .btn6_box button {
    width: 130px;
    border-radius: 10px;

}
#sub03_02 .cont1 .btn6_box:before {
    content: '';
    display: block;
    width: calc(100% - 200px);
    height: 2px;
    background-color: #807f80;
    position: absolute;
    left: 130px;
    top: 50%; 
}
.sub03_02 .pop h5 {padding:30px 30px}
.sub03_02 div.box3, .sub03_02 div.box4 {
    height: auto;
    line-height: 1.5em;
    padding: 10px 0;
}
.sub03_02 .box_arr .arr {
    display: none
 }
 .sub03_02 .tb1 {font-size:0.8rem}
/*
    #sub01_02 .content .footer:after{content:'';display:block;position:absolute;right:0;top:0px;
                             width:30px;height:30px;
							 background:url(../images_sub/symbol.png) no-repeat center /100% } 
*/
    
    .noel iframe{width:100%; height: 100%;}
    
    
    
    
}
@media all and (max-width:540px) {
    #sub03_01 .compan .process4 {background-size:contain;display: flex;
    justify-content: center;padding-top:20px;
    height:auto}
    #sub03_01 .compan .process4 p{
        position: static;background-color:rgba(255,255,255,0.9);
        margin:10px 10px;}
    #sub03_01 .compan .process4 .process4_7 {
            transform: translateX(0); 
            bottom: 30px;
        }
   #sub03_02 .cont1 .btn4_box button{
            width:20%;font-size:0.7rem;font-weight:500;
     } 
    #sub01_02 .content img{width: 300px; margin-left: 1px;} 
    #sub01_02 .subj a img{width: 100%;} 
/*
    #sub01_02 .content .footer:after{content:'';display:block;position:absolute;right:0;top:0px;
                             width:30px;height:30px;
							 background:url(../images_sub/symbol.png) no-repeat center /100% } 
}*/
    .panels .noel{padding: 15px;}
    .panels .noel img{width: 100%;}
    .noel .tb1 td{font-weight: 400;padding:5px 0;line-height:1.3em}
    .noel .tb1{font-size:0.7rem;}
    .noel .tb1 th{font-weight: 500;padding: 5px 0;line-height:1.3em; font-size: 0.7rem;}
    .noel .tb1 td{font-weight: 400;padding: 5px 0;line-height:1.2em; font-size: 0.7rem;}
    #sub01_02 .panels .noelsheet img{margin-top: 50px; width: 250px;}
    .noel iframe{width:100%; height: 100%;}
}