@charset "utf-8";

/*공통*/
.flex-wrap{ flex-wrap: wrap;}
.p-margin p{ margin: 0 0 20px 0;}
.photo-style{overflow:hidden;position:relative;display:block;width:100%;height:0;padding-top:  106%;}
.photo-style>span{display:block; position:absolute; left:50%; top:0; width:100%; height:100%; text-align:center;transform: translateX(-50%);}
.photo-style>span>img{height:100%; width: 100%;}
.img-border-radius{ border-radius: 10px ; overflow: hidden; line-height: 0;}
.img-border-radius img{ max-width: 100%;}



/*인사말*/
.greeting{ border-radius: 20px; background-color:#40543e ; background-image: url(../../../images/site/nsurotc/content/insimal-bg.jpg); background-repeat: no-repeat; 
	color: #fff; position: relative;  padding: 50px 30px 100px 400px; margin: 90px 0 30px 0;}
.greeting::after{ content: ""; width: 322px; height:314px; display: block; position: absolute; left: 30px; bottom: 0; background-repeat: no-repeat; }
.greeting .title{ font-size: 50px; line-height: 1.4; margin: 0 0 10px 0;}
.greeting .name{ position: absolute; right: 0; bottom: 0; background-color: #fff; padding: 10px 40px; border-top-left-radius: 20px; color: #000;}
.greeting .name em{ font-size: 20px; font-style: normal; color: #344931; font-weight: 500;}

@media screen and (max-width:767px){
	.greeting{padding: 30px 20px 80px 160px; margin: 0px 0 30px 0;}
	.greeting::after{ background-size:161px auto ; background-position: 0 bottom; left: 15px;}
	.greeting .title{ font-size: 24px;}
	.greeting .name em{ font-size: 18px;}
}


/*연혁*/
#historys,
#historys .photos,
#historys .txts,
#historys .txts > ol,
#historys .txts .li_wr .years,
#historys .txts .li_wr ol li
{transition:all 0.3s ease; -wekbit-transition:all 0.3s ease;}
#historys{position:relative; box-sizing:border-box;}
#historys:after{content:""; display:block; clear:both;} 
#historys .txts{position:relative; width:100%; padding-left:50px; box-sizing:border-box;}
#historys:before{content:""; position:absolute; top:4px; left:16px; height:100%; border-left:1px solid #e0e0e0;}
#historys .txts .li_wr{position:relative; width:100%; display: flex; margin: 0 0 50px 0;}
#historys .txts .li_wr:after{content:""; display:block; position:absolute; top:4px; left:-43px; width:19px; height:19px; background-image: url(../../../images/site/kor/content/history_ico.png); background-repeat:no-repeat; background-position:left top;}
#historys .txts .li_wr .years{display:block; margin-bottom:16px; font-weight:600; font-size:30px; color:#084897; margin-right: 50px;}
#historys .txts .li_wr ul li{font-size:15px; color:#666; box-sizing:border-box; margin: 0 0 10px 0;}
@media screen and (max-width:767px){
	#historys .txts .li_wr{ flex-direction: column; margin: 0 0 26px 0;}
	#historys .txts .li_wr .years{ font-size: 20px;}
}


/*학군당장*/
.photo-list { margin: 0 -10px;}
.photo-list li{  width: calc((100%/4) - 20px); margin: 0 10px 20px; border-radius: 10px; border: 1px solid #dedede; overflow: hidden; box-sizing: border-box; position: relative; }
.photo-list li p{ text-align: center; padding: 20px 0; font-size: 18px; font-weight: 500;}
.photo-list.photo-list-col5 li{  width: calc((100%/5) - 20px)}
.photo-list.photo-list-col2 li{  width: calc((100%/2) - 20px)}

.photo-list[data-img-box="2"] .photo-style {padding-top:125%;} /* 2024.03.22 추가 작업 */

@media screen and (max-width:767px){
	.photo-list li{  width: calc((100%/3) - 20px)}
	.photo-list.photo-list-col5 li{  width: calc((100%/3) - 20px)}
	.photo-list li p{font-size: 16px;padding: 14px 0;}
}
@media screen and (max-width:600px){
	.photo-list li{  width: calc((100%/2) - 20px)}
	.photo-list.photo-list-col5 li{  width: calc((100%/2) - 20px)}
	.photo-list.photo-list-col2 li{  width: calc((100%/1) - 20px)}
}


/*about rotc*/
.about-rotc .photo-style{ width:  229px;}
.about-rotc .photo-style em{ position: absolute; top: 0; left: 0; background-color: #084897; color: #fff; z-index: 10;  line-height: 46px; width: 46px; text-align: center; font-style: normal; font-weight: 600;}
.about-rotc .d-flex .definition{ padding: 20px; font-size: 17px; background-image: url(../../../images/site/nsurotc/content/aboutrotc-bglogo.png); background-repeat: no-repeat ; 
	background-position: right -90px bottom -15px;}

/*군복지혜택*/
.benefit-list li{ position: relative; padding:16px 20px 16px 140px; display: flex; align-items: center; }
.benefit-list li::before{ content: ""; width: 145px; height: 100%; background-position: center center; background-repeat: no-repeat; display: block; 
	position: absolute; left: 0; top:0}
.benefit-list p.d-flex{ flex-direction: column;  align-items: flex-start;  text-align: left;justify-content: center;}
.benefit-list.photo-list li p,
.benefit-list.photo-list p span.blue{ font-size: 16px;}
.benefit-list.photo-list p span:not(.blue){  font-weight: 400;}
.benefit-list.photo-list p strong{ font-size: 20px; display: block; margin: 10px 0 6px 0;}
.benefit-list li.benefit-ico01::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico01.gif)}
.benefit-list li.benefit-ico02::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico02.gif)}
.benefit-list li.benefit-ico03::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico03.gif)}
.benefit-list li.benefit-ico04::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico04.gif)}
.benefit-list li.benefit-ico05::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico05.gif)}
.benefit-list li.benefit-ico06::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico06.gif)}
.benefit-list li.benefit-ico07::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico07.gif)}
.benefit-list li.benefit-ico08::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico08.gif)}
.benefit-list li.benefit-ico09::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico09.gif)}
.benefit-list li.benefit-ico10::before{background-image: url(../../../images/site/nsurotc/content/benefit-ico10.gif)}
@media screen and (max-width:767px){
	.benefit-list li{padding:10px 20px 10px 90px; }
	.benefit-list li::before{ width: 50px; background-size: contain; left: 20px;}
	.benefit-list.photo-list p strong{ font-size: 18px;}
	.benefit-list.photo-list li p,
  .benefit-list.photo-list p span.blue{ font-size: 14px;}
}



/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 사이트맵
	연관단어 : #sitemap

////////////////////////////////////////////////////////////////////////////// */
#sitemap .tmenu_ti{display:none;}
#sitemap hr{display:none;}
#sitemap ul{overflow:hidden; opacity:1 !important; height:auto !important; display:block !important;}
#sitemap ul li,
#sitemap ul li a{box-sizing:border-box;}
#sitemap ul li a:hover{text-decoration:none;}

#sitemap ul li[class*="num"]{display:inline-block; width:33%; vertical-align:top; margin-top:50px;}
#sitemap ul li[class*="num"]:nth-child(1),
#sitemap ul li[class*="num"]:nth-child(2),
#sitemap ul li[class*="num"]:nth-child(3){margin-top:0;}
#sitemap ul li.sub01,
#sitemap ul li.sub02,
#sitemap ul li.sub03{margin-top:0;}
#sitemap ul li[class*="num"]:nth-child(3n+1){padding:0 1.5% 0 0;}
#sitemap ul li[class*="num"]:nth-child(3n+2){padding:0 1.5%;}
#sitemap ul li[class*="num"]:nth-child(3n+3){padding:0 0 0 1.5%;}
#sitemap ul li[class*="num"] > a{display:block; width:100%; height:50px; line-height:50px; padding:0 20px; background-color:#084897;}
#sitemap ul li[class*="num"] > a span{font-size:18px; color:#fff; display:block; text-align:center;}
#sitemap ul li.num7{display:none;}
#sitemap ul li ul li{padding:0; border-bottom:1px solid #dfe1e3;}
#sitemap ul li ul li a{display:block;padding: 13px 0 12px 0;}
#sitemap ul li ul li a span{font-size:17px; color:#084897;}

#sitemap ul li ul li ul{margin-top:0px; border:1px solid #e9e9e9; background:#f9f9f9; border-bottom:0;padding:15px 20px;}
#sitemap ul li ul li ul li{border-bottom:0; padding:0;}
#sitemap ul li ul li ul li a{display:inline-block; position:relative; width:100%; padding:0px 0 0 10px; margin-bottom:0;}
#sitemap ul li ul li ul li a:before{ content: ""; display: block; position: absolute; left: 0;  top: 8px;  width: 4px; height: 4px; background: #4f4f4f;  border-radius: 50%; -webkit-border-radius: 50%;}
#sitemap ul li ul li ul li a:hover{text-decoration:underline;color:#424242;}
#sitemap ul li ul li ul li a span{font-size:14px; color:#5f5f5f;}

#sitemap ul li ul li ul li ul{display:none !important; margin-top:1px; padding-left:10px;}

#sitemap ul li.field_info .control{display:none;}
#sitemap ul li.field_info ul li{width:100% !important;}
#sitemap ul li.field_info ul li ul li ul{display:none !important;}

#sitemap ul li ul li a.new span:after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 10px;
    background: url(../../../images/site/skin/new_blank.gif) no-repeat left top;
    margin-left: 3px;
    margin-top: -1px;
    vertical-align: middle;
}

@media screen and (max-width:1260px) and (min-width:1024px){
	#sitemap ul li[class*="num"]{width:32.9%;}
}
@media screen and (max-width:900px){
	#sitemap ul li[class*="num"]{width:32.9%;}
}
@media screen and (max-width:740px){
	#sitemap ul li[class*="num"]{width:49.5%; margin-top:30px;}
	#sitemap ul li[class*="num"]:nth-child(3){margin-top:30px;}
	#sitemap ul li[class*="num"]:nth-child(odd){padding:0 1.5% 0 0;}
	#sitemap ul li[class*="num"]:nth-child(even){padding:0 0 0 1.5%;}
	#sitemap ul li.sub01,
	#sitemap ul li.sub02{margin-top:0;}
}
@media screen and (max-width:480px){
	#sitemap ul li[class*="num"]{width:100%; margin-top:20px !important; padding:0 !important;}
	#sitemap ul li.sub01{margin-top:0;}
}