@import url("common.css");

#visual{position:relative; width:100%; height:663px; overflow:hidden;}
    
#visual .visual_txt {position:absolute; top:210px; left:50%; z-index:9999; margin-left:-350px; text-align:center;}
#visual .visual_txt p.green { font-size:19px; letter-spacing:-0.5pt; color:#e73221; position:relative; opacity:0; top:-50px; }
#visual .visual_txt h2 { font-size:62px; font-family: 'Raleway', sans-serif; font-style:italic; color:#fff; font-weight:800; letter-spacing:0.2pt; padding:30px 0; position:relative; opacity:0; top:-50px;}
#visual .visual_txt span { display:block; font-size:17px; letter-spacing:-0.5pt; color:#fff; line-height:27px; position:relative; opacity:0; top:-50px;}

    .jssorb05 {position: absolute; bottom:30px; left:50%; margin-left:-5px;  z-index:999; width:100px !important;}
    .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {position: relative !important;  width: 15px;  height: 15px; background-color:rgba(255,255,255,0.5); cursor:pointer; margin:0 9px 0 0; padding:0; float:left; left:0px !important; border-radius:15px; }
    .jssorb05 div {  }
    .jssorb05 .av:hover { background-color:#e73221; width:15px !important;  height: 15px !important; margin-top:0px !important;}
    .jssorb05 .av { background-color:#e73221; width:15px !important; height: 15px !important; margin-top:0px !important;}

#main_cont { position:relative; margin:0 auto; width:1200px; }

#main_cont .cont1 { padding:25px 0 67px 0;}
#main_cont .cont1 h2 { text-align:center; font-size:30px; line-height:40px; color:#333333; font-weight:bold; }
#main_cont .cont1 h3 { text-align:center; font-size:18px; line-height:30px; color:#676767; font-weight:normal; padding-bottom:50px; }
#main_cont .cont1 ul {overflow:hidden; height:400px;}
#main_cont .cont1 ul li {float:left; width:284px; height:284px; text-align:center; margin-right:21px; position:relative;}
#main_cont .cont1 ul li img {position:absolute; top:0; left:0; transition:transform 0.5s; transform:scale(1)}
#main_cont .cont1 ul li:hover img { transition:transform 0.5s; transform:scale(1);}
#main_cont .cont1 ul li:last-child {margin:0;}
#main_cont .cont1 ul li .abs{position:absolute; width:100%; z-index:9999;}
#main_cont .cont1 ul li a:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:1px solid rgba(255,255,255,.4);transition:border-width .3s; z-index:99}
#main_cont .cont1 ul li a:hover:before{border-width:20px; border-radius: 284px;}
#main_cont .cont1 ul li h3 { font-size:23px; letter-spacing:0.2pt; color:#272727; font-weight:300;  font-family: 'Raleway', sans-serif; padding:10px 0 10px 0; }

#section {width:100%;}
#main_banner {
	width:100%;
	height:510px;
	background:url(../images/main_section_bg.png) no-repeat 50% 10%;
    background-position: center;
	}
.main_banner_bg {
	position:absolute;
}
.main_banner {
	width:1200px;
	margin:0 auto;
}
.main_banner_txt1 {text-align:center; padding:90px 0 0 0;font-size:40px; font-weight:bold; color:#ffffff; text-shadow:1px 1px 3px #000;}
.main_banner_txt2 {text-align:center; font-size:18px; font-weight:normal; line-height:32px; color:#ffffff;}

.main_banner_2 {width:980px; margin:0 auto; position:relative;}
.main_banner_2 ul {padding-top:44px;}
.main_banner_2 ul li { width:228px; height:177px; border:1px solid #ffffff; border-radius: 30px; margin-right:20px; float:left; text-align:center;}
.main_banner_2 ul li:last-child {margin-right:0px;}
.main_banner_2 ul li img {padding-top:33px;}
.main_banner_2 ul li a:before{content:"";position:absolute; transition:border-width .3s; z-index:99}
.main_banner_2 ul li a:hover:before{ background:#f9f3f3;}
.main_banner_2 ul li h3 { font-size:20px; letter-spacing:0.2pt; color:#ffffff; font-weight:bold;  font-family: 'Raleway', sans-serif; padding:20px 0 10px 0; }


#main_visual {
	clear:both;
	width:284px;
	height:284px;
	margin:0 auto;
	}
#main_visual ul{height:284px !important;}
	#main_visual  li{}