.txt-blue {color: #0072bc!important;}

.intro-box{text-align:center;}
.intro-box > p:nth-of-type(1){padding:0 0 10px;font-size:34px;line-height:42px;font-weight:700;}
.intro-box > p:nth-of-type(2){font-size: 26px;line-height: 50px;font-weight: 500;}
.intro-box > p:nth-of-type(2) span{font-weight:700;}
.intro-box > div{position:relative;padding:65px 0 0;}
.intro-box > div:before{content:'';position:absolute;top:37px;left:50%;display:block;width:4px;height:50px;background-color:#f36138;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);}
.intro-box > div .txt-box{position:absolute;left:50%;bottom:0;width:calc(100% - 200px);padding:30px 20px 10px;background-color:#fff;box-sizing:border-box;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);}
.intro-box > div .txt-box p{font-size:16px;line-height:26px;}
.intro-box  .img-box {width:100%; height:auto}

.mid_box { margin:40px 0; padding-bottom:60px;   background: url('../img/content/arrow.gif') no-repeat center bottom;}
.mid_box .color_box  { position:relative; z-index:10; margin:0 auto;  width:641px; height:146px;  word-break:keep-all; }
.mid_box .color_box  p {display:inline-block; position:absolute; top:0;padding:0 40px; width:261px;text-align:center;  }
.mid_box .color_box  p.orange { left:0; padding-top:30px; height:116px; background: url('../img/content/img-color01.png') no-repeat center top;  }
.mid_box .color_box  p.sky {right:0; padding-top:40px; height:106px;  background: url('../img/content/img-color02.png') no-repeat center top;  }
.mid_box .color_box  img.plus {  position:absolute; top:38px;  left:50%; z-index:11; margin-left:-21px;transition: transform 0.35s; } 
.mid_box .color_box  p em { color:#fbfb31;}
.foot_box  {padding:10px; background: url('../img/content/foot-box.gif') repeat;}
.foot_box p { padding:20px; background:#fff; font-size:18px; color:#000; font-weight:600; text-align:center;  }
.foot_box p span { display:block; font-size:12px; color:#7f7f7f;}

.wrap-map { position:relative;padding:30px; border:1px solid #e7e7e7;max-width: 800px;margin: 0 auto;}
.wrap-map .area_group { display:inline-block; float:left; position:relative;width:239px; height:325px; background:url('../images/contents/wrap-map.gif') no-repeat;}
.wrap-map .area_group ul li { display:block;} 
.wrap-map .map_btn { position:absolute; }
.wrap-map .area_1 { left:36px; top:30px;}
.wrap-map .area_2 { right:18px; top:10px;}
.wrap-map .area_3 { left:28px; top:111px;}
.wrap-map .area_4 { left:11px; bottom:10px;}
.wrap-map .area_5 { right:6px; bottom:87px;}
.wrap-map .area_6 { right:23px; bottom:33px;}
.wrap-map .text_group { float:right; width:350px;}
.wrap-map .text_group div {  display:none; padding-top:30px;}
.wrap-map .guide_text { position:absolute; right:0; bottom:30px; padding-right:20px; width:355px;  background: url('../img/content/ico-boxmap.png') no-repeat  right top; background-size: cover;}
.wrap-map .guide_text span{ display:inline-block; padding:15px 50px 15px 15px; background:url('../img/content/ico-map.png') no-repeat right center; text-align:left;color:#fff; word-break:keep-all;}

@media all and (max-width:740px) {
	.mid_box .color_box  { width:100%; height: auto; text-align:center; }
	.mid_box .color_box  p {position:relative; margin:0 auto; width: auto;}
	.mid_box .color_box  img.plus { top:111px;  transform: rotate(90deg); transition: transform 0.35s;  }

	.wrap-map { text-align:center; padding:130px 5% 30px;}
	.wrap-map  .area_group {float:none;}
	.wrap-map  .text_group {float:none;width: auto;}
	.wrap-map  .guide_text {top:20px; left:0; max-width:100%;height:fit-content;width: auto;}
	.wrap-map .text_group div{text-align: left;}
}

@media screen and (max-width:1024px){
	.intro-box > div .txt-box{width:calc(100% - 100px);}
	.intro-box > div .txt-box p br{display:none;}

}
@media screen and (max-width:768px){
	.intro-box > p:nth-of-type(1){padding:0 0 5px;font-size:16px;line-height:26px;}
	.intro-box > p:nth-of-type(2){font-size:20px;line-height:30px;}
	.intro-box > div{padding:20px 0 0;}
	.intro-box > div:before{top:10px;width:2px;height:20px;}
	.intro-box > div .txt-box{position:relative;width:100%;padding:10px 0 0;text-align:left;}
	.intro-box > div .txt-box p{font-size:14px;line-height:24px;}
}

@media screen and (max-width:480px){
	.intro-box > p:nth-of-type(2) br{display:none;}
}