body{background:#f3f3f3; }

#wrap{position:relative; margin:0 auto; width:100%; }
#wrap h2{text-align:center; padding-bottom:10px}

.contents{position:relative; margin:0 auto; width:990px; }
.clear{clear:both}



/* 모바일이동 */
.m_arrow{display:none} 

#header {z-index:1; width: 100%; float: left; position: fixed; overflow: hidden; background: url(../img/r2soft/subtop_bg1.jpg) no-repeat center top;}
#header-inner{width: 100%; height:45px; margin:250px auto 0px auto;z-index:200; background-image: url(../img/r2soft/submenu_bg.jpg); position: relative;transition: margin-top 0.35s;}
#header-inner-nav {width:990px; margin:0 auto; }
#header-inner-nav p {height:45px; width:24.8%; line-height:45px; font-size:16px; text-align:center; text-decoration: none; font-weight: 600; display: block; float:left;
 -webkit-transition: all 0.2s; 
 -moz-transition: all 0.2s; 
 -o-transition: all 0.2s; 
 transition: all 0.2s;   border-left:solid 1px #f3f3f3}
#header-inner-nav p:last-child{border-right:solid 1px #f3f3f3} 
#header-inner-nav p:hover {color:#000; background-color:#f3f3f3; cursor:pointer; }



.menu_sub1_default {background-color:inherit; color:#f3f3f3	; } 
.menu_sub1_selected {background-color: #f3f3f3; color:#e8261a;}
.menu_sub2_default {background-color:inherit; color:#f3f3f3; } 
.menu_sub2_selected {background-color: #f3f3f3;  color: #00f; } 


#section1{width:990px; margin:0 auto; padding-top:125px;}
#section2{width:990px; margin:0 auto; padding-top:125px;position:relative; }
#section3{width:990px; margin:0 auto; padding-top:125px; }
#section4{width:100%; margin:0 auto ; padding-top:125px; position:relative }




/* R2soft */
.overview{margin-top:30px}

.intro{position:relative; width:100%; margin:0 auto}
.intro ul{width:100%; position:relative;}
.intro li{float:left; display:block}
.intro li.L{float:left; width:68%; font-size:15px; line-height:25px;}
.intro li.R{float:right; width:30%; text-align:right;}
.intro:after{content:""; display:block; clear:both}

.M_intro{display:none}

.overview table{border-top:solid 2px #d9372d; font-size:15px; margin-top:20px}
.overview table th{border-bottom:solid 1px #c6c6c6; font-weight:600; color:#000}
.overview table td{border-bottom:solid 1px #c6c6c6; height:54px; vertical-align:middle;}

.R2info{position:relative;margin: 0px 0px 0px 50px; } 
.R2info ul{ }
.R2info li{width:160px;	height: 160px;	border-radius: 80px;	float: left;	margin: 30px 30px;	text-align: center;
	color: #fff;	font-weight: 600;}
.R2info li.a1{background:#e2a633}
.R2info li.a2{background:#46a7be}
.R2info li.a3{background:#325082}
.R2info li.a4{background:#7a7a7a}
.R2info ul:after{content:""; display:block; clear:both}


.R2info p.text1{font-size:16px; padding:45px 0px 5px 0px; border-bottom:solid 2px #FFF;margin:0px 48px}
.R2info p.text2{font-size:35px; padding-top:5px}
.R2info p.text3{font-size:16px; padding:45px 0px 5px 0px; border-bottom:solid 2px #FFF;margin:0px 30px}

.organization{margin-top:30px;}
.M_organization{display:none}

.history1{width:990px; background: url(../img/r2soft/history_dot_01.png) repeat-y 102px top; margin-top:20px;}
.history1 ul{width:100%; padding:10px 0px}
.history1 li{}
.history1 li.L{float:left; width: 108px; background: url(../img/r2soft/history_dot_02.png) no-repeat right 8px;
	font-size: 22px; font-weight: 600; 	color: #cb0000;}
.history1 li.R{width:860px; line-height:24px; float:right; font-size:14px}
.history1 li.R p strong{font-size:15px; font-weight:600;transform : rotate(0.04deg) ; color:#000}

.history1 ul:after{content:""; display:block; clear:both}

/*contact */
.Contact{position:relative;width:990px; margin:0 auto; padding-bottom:3%}
.Contact h2{margin-bottom:20px;}

.contact_info{position:relative; background:#fff; padding:15px 0px 0px 30px; height:90px;}
.contact_info ul{}
.contact_info li{display:block; height:35px; line-height:35px; float:left; margin-right:50px}
.contact_info li.tel{padding: 0px 30px 0px 40px; background: url(../img/contact_icon_01.png) no-repeat left center; }
.contact_info li.fax{padding: 0px 30px 0px 40px; background: url(../img/contact_icon_02.png) no-repeat left center; }
.contact_info li.e-mail{padding: 0px 30px 0px 40px; background: url(../img/contact_icon_03.png) no-repeat left center; }
.contact_info li.address{padding: 0px 30px 0px 40px; background: url(../img/contact_icon_04.png) no-repeat left center; clear:both; }
.contact_info li span{display:none}
.map{margin-top:5px; padding-bottom:3%; height:40vh}





.banner{clear:both; padding:30px}
.banner ul{}
.banner li{width:30%; display:block; float:left; background:#FFF; padding:8px 0px; margin:1%; text-align:center; color:#000; font-size:13px; border-radius:5px}
.banner:after{display:block; clear:both; content:"";}







@media screen and (max-width:990px) {
	
#section1{width:90%;}
#section2{width:90%;}
#section3{width:90%;}
#section4{width:90%;}


#header {z-index:1; width: 100%; float: left; position: fixed; overflow: hidden; background: url(../img/r2soft/subtop_bg1.jpg) no-repeat center; background-size:cover; }
#header-inner{width: 100%; height:45px; margin:300px auto 0px auto;z-index:100; background-image: url(../img/r2soft/submenu_bg.jpg); }

#header-inner-nav {width:90%; margin:0 auto; }
#header-inner-nav p {height:45px; width:24.8%; line-height:45px; font-size:16px; text-align:center; text-decoration: none; font-weight: 600; display: block; float:left;
 -webkit-transition: all 0.2s; 
 -moz-transition: all 0.2s; 
 -o-transition: all 0.2s; 
 transition: all 0.2s; border-left:solid 1px #f3f3f3}
#header-inner-nav p:last-child{border-right:solid 1px #f3f3f3} 
#header-inner-nav p:hover {color:#000; background-color:#f3f3f3; cursor:pointer; }



.intro li.L br{display:none}
.intro li.R{float:right; width:30%; text-align:right;}


.R2info li{width:160px;	height:160px; border-radius:80px; float:left; margin:30px 10px;	text-align:center; color:#fff;	font-weight:600;}

.organization img{width:100%}
/*contact */
.Contact{width:100%;}
.Contact h1{text-align:center; padding:80px 0px 20px 0px}

.contact_info{position:relative; background:#fff; padding:15px 0px 0px 30px; height:90px}
.contact_info ul{}
.contact_info li{display:block; height:28px; line-height:28px; float:left; margin-right:50px}
.contact_info li.tel{padding: 0px 25px 0px 30px; background-size:20px }
.contact_info li.fax{padding: 0px 25px 0px 30px; background-size:20px}
.contact_info li.e-mail{padding: 0px 25px 0px 30px; background-size:20px}
.contact_info li.address{padding: 0px 25px 0px 30px; background-size:20px}

.map img{width:100%;}

.map{margin-top:5px}

.history1{width:100%; background: url(../img/r2soft/history_dot_01.png) repeat-y 90px top; margin-top:20px;}
.history1 ul{width:100%; padding:10px 0px}
.history1 li{}
.history1 li.L{float:left; width: 96px;}
.history1 li.R{width:80%; line-height:24px; float:left; padding-left:10px}


}


@media only screen and (max-width:768px) {
	
	
#header {display:none}
	
#section1{padding-top:50px;}
#section2{padding-top:50px;}
#section3{padding-top:50px;}
#section4{padding-top:50px; min-height:100vh;}

.intro li.R img{width:100%}
.overview table{display:none}
.M_intro{display:block;font-size:14px; margin-top:20px} 
.M_intro ul{}
.M_intro li{clear:both;width:100%; }
.M_intro li p.text1{width:90px; color:#000; font-weight:600; display:block; float:left; padding:5px 0px 5px 10px; background: url(../img/blit_red.jpg) no-repeat 0px 10px; background-size:3px 3px;}
.M_intro li p.text2{display:block; float:left; padding:5px 0px; width:75% }

.R2info{margin:0px }
.R2info li{width:100%;	height:auto; border-radius:0px;	 padding:5px 10px; float:none;	margin:0px;	text-align:left;
	color: #666; font-weight: 500;}


.R2info p.text1{font-size:14px; background: url(../img/blit_red.jpg) no-repeat 0px center; background-size:3px 3px; padding:5px 0px 5px 10px; border-bottom:none; margin:0px; float:left; width:90px; color:#000; font-weight:600 }
.R2info p.text2{font-size:14px; padding:5px 0px; float:left}
.R2info p.text3{font-size:14px; background: url(../img/blit_red.jpg) no-repeat 0px center; background-size:3px 3px; padding:5px 0px 5px 10px; border-bottom:none; margin:0px; float:left; width:90px;  color:#000; font-weight:600}



.R2info li.a1{background:none; padding:0; float:none; clear:both}
.R2info li.a2{background:none; padding:0; float:none; clear:both}
.R2info li.a3{background:none; padding:0; float:none; clear:both}
.R2info li.a4{background:none; padding:0; float:none; clear:both}



.history1{width:100%; background:none;}
.history1 ul{width:100%; padding:10px 0px}
.history1 li{}
.history1 li.L{float:none; width: 100%; background:none; padding-bottom:5px} 
.history1 li.R{width:100%; float:none;padding-left:0; line-height:22px;}
.history1 li.R p{background: url(../img/r2soft/blit1.jpg) no-repeat  left 9px;	padding-left:8px}

.Certification{margin:0px auto; min-height:100%}
.Certification ul{margin-top:0px; width:100%}
.Certification li{font-size:14px;}
.Certification li.L{width: 100%;float:none; height:auto;	border-radius:0px; text-align:left;	color: #000; background-image: none;}	
.Certification li.R{width:*; float:left; margin-left:0px; }
.Certification li.R p{margin-bottom:5px;	background: url(../img/r2soft/blit1.jpg) no-repeat  left center;	padding-left:10px};

.Certification ul:after{display:block; content:""; clear:both}
.Certification p.text1{font-size:16px; padding:0px; border-bottom:none; margin:0px; float:left}
.Certification p.text2{font-size:16px; padding-top:0px; float:left; }
.Certification p.text3{font-size:16px; padding:0px; border-bottom:none; margin:0px; float:left}
.cer01{}
.cer02{padding-top:30px}
.cer03{padding-top:30px}
.cer01 li.R{margin:0px 0px 0px 20px}
.cer02 li.R{margin:0px 0px 0px 20px}
.cer03 li.R{margin:0px 0px 0px 20px}
.cer03 li.R:last-child{margin:0px 0px 0px 148px}

.Certification:after{display:block; content:""; clear:both}

/*contact */
	.
	.contact h1{text-align:center; padding:80px 0px 30px 0px}

	.contact_info{position:relative; background:#fff; padding:15px 0px 0px 30px; height:90px}
	.contact_info ul{}
	.contact_info li{display:block; height:25px; line-height:25px; float:left; margin-right:10px}
	.contact_info li.tel{padding: 0px 25px ; background-size:20px }
	.contact_info li.fax{padding: 0px 25px; background-size:20px  }
	.contact_info li.e-mail{padding: 0px 25px; background-size:20px  }
	.contact_info li.address{padding: 0px 0px 0px 25px;  background-size:20px  }

	.map{margin-top:5px}
	

.banner{clear:both;  padding-top:30px}
.banner ul{}
.banner li{margin:1%; color:#666; font-size:11px; }
.banner p{display:none}

 
 
 /* 모바일이동 */
.m_arrow{display:block; text-align:center; width:100%; padding-top:20px; cursor:pointer}
.m_arrow img{width:42px!important;  height:24px!important}
.m_arrow a{background-color:none}
.m_arrow a:hover{background-color:none}
.m_arrow a:click{background-color:rgba(255, 255, 255, 0)}
.m_arrow_top{text-align:center; }
 
}



@media screen and (max-width:640px) {
	
.intro li.R{display:none}
.intro li.L{width:100%; float:none}

.Certification ul{margin-top:0px; width:100%}
.Certification li{font-size:13px;}
.Certification li.L{height:30px;}	
.Certification li.R{float:none;}

.cer01 li.R{margin:0px 0px 0px 5px;}
.cer02 li.R{margin:0px 0px 0px 5px;}
.cer03 li.R{margin:0px 0px 0px 5px;}

.cer03 li.R:last-child{margin:0px 0px 0px 5px}


.banner li{width:31%; padding:5px 0px; margin:0px 2px 0px 0px; border-radius:0px}




}


@media screen and (max-width:540px) {
.organization{display:none}
.M_organization{display:block;margin-top:30px; }
.M_organization img{width:100%}
}

@media screen and (max-width:480px) {
	
.contact_info{position:relative; background:#fff; padding:15px 0px 0px 15px; height:auto}
	.contact_info ul{}
	.contact_info li{display:block; height:25px; line-height:25px; float:none; margin-right:10px; font-size:13px}
	.contact_info li.tel{padding: 0px 20px ; background-size:15px }
	.contact_info li.fax{padding: 0px 20px; background-size:15px  }
	.contact_info li.e-mail{padding: 0px 20px; background-size:15px  }
	.contact_info li.address{padding: 0px 0px 0px 20px;  background-size:15px; line-height:16px; height:40px;  }

.M_intro li p.text2{display:block; float:left; padding:5px 0px; width:63% }

}

@media screen and (max-width:320px) {

.banner li{width:32%; padding:3px 0px; margin:0px 1px 0px 0px;}
.banner li:nth-child(2) img{width:95%;}
.banner li:nth-child(3) img{width:95%;}
}
/**지도 관련 추가**/
/* roughmap 최상위 컨테이너 */
.root_daum_roughmap {
  width: 100% !important;
}

/* 내부 wrapper (이게 990px 고정 주범) */
/* 카카오 약도 반응형 강제 처리 */
.root_daum_roughmap,
.root_daum_roughmap_landing,
.root_daum_roughmap .wrap_map,
.root_daum_roughmap iframe {
  width: 100% !important;
  max-width: 100% !important;
}
.map_wrap {
  position: relative;
  width: 100%;
  padding-bottom: 36.36%; /* 360 / 990 */
}

.map_wrap .root_daum_roughmap,
.map_wrap .wrap_map,
.map_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 990px) {

  #section4 .root_daum_roughmap,
  #section4 .root_daum_roughmap_landing,
  #section4 .root_daum_roughmap .wrap_map,
  #section4 .root_daum_roughmap iframe {
    width: 100% !important;
    max-width: 100% !important;
  }
/*  #section4 .wrap_map,
  #section4 iframe {
    height: auto !important;
*/  }
  
    /* 비율 트릭 해제 */
  #section4 .map_wrap {
    padding-bottom: 0;
    height: auto;
  }

  /* absolute 해제 */
  #section4 .root_daum_roughmap,
  #section4 .wrap_map,
  #section4 iframe {
    position: relative;
    height: 370px !important; /* 또는 원하는 모바일 높이 */
  }
}
@media (max-width: 768px) {
  .map_wrap {
    padding-bottom: 60%;
  }
}