@charset "utf-8";


/****** visualRolling ******/
.visualRolling {position: relative; width:100%;} 
.visualRolling:after{content:"";clear:both;	display:block;}
.visualRolling .arrow a {display:block; position:absolute; width:49px; height:49px; background:url('../images/main/arr_big.png') no-repeat 0 0;}
.visualRolling .arrow a span {position:absolute; top:-5000px; left:-5000px; width:0; height:0; font-size:0; line-height:0; overflow:hidden;}
.visualRolling .arrow .next {top:50%; left:10px; background-position:0 0; z-index:4;}
.visualRolling .arrow a.next:hover {background-position:0 -68px;}
.visualRolling .arrow .prev {top:50%; right:10px; background-position:-68px 0; z-index:4;}
.visualRolling .arrow a.prev:hover {background-position:-68px -68px;}
.visualRolling .event_pic {position:relative; width:100%; height:680px; overflow:hidden; }
.visualRolling .event_pic ul {position:relative; height:680px; background:#e6e7eb; }
.visualRolling .event_pic li {position:relative; text-align:center;height:680px; background:#e6e7eb;}
.visualRolling .event_pic li.pic{background-position:50% 0; background-repeat:none;background-size: cover;}
.visualRolling .event_pic li a{ display:block; height:100%; }
.visualRolling .rolling_btn {width: 100%;position: absolute;bottom: 90px;z-index:5;}
.visualRolling .rolling_btn ul{position: relative;margin: 0 auto;width: 1080px;overflow: hidden; padding: 0 10px}
.visualRolling .rolling_btn li { display:inline-block; margin:0 3px; list-style:none; cursor:pointer;}
.visualRolling .rolling_btn li a { padding:0px}
.event_pic ul li .txt{display:block;box-sizing:border-box;margin:0 auto;width: 1080px;padding: 150px 0 0 10px;position:relative;text-align: left;z-index: 2;}
.event_pic ul li:nth-child(2) .txt{ padding-top:185px;}
.event_pic ul li:nth-child(3) .txt{ padding-top:200px; text-shadow: 0px 0px 2px rgba(250,245,230,1)}
.event_pic ul li .txt dt,
.event_pic ul li .txt dd{color: #2e3235;}
.event_pic ul li .txt dt{font-size: 60px;line-height: 1.1em;font-weight:500;margin-bottom: 20px; letter-spacing: -0.05em;}
.event_pic ul li .txt dt span{font-weight:100;font-size:0.6em;color:rgba(46,51,55,.8);display:block;letter-spacing: -0.04em;; line-height:1.6;}
.event_pic ul li .txt dt em{ display:block;}
.event_pic ul li .txt dd{font-size: 1.1em;line-height: 1.6;color:#656565;}
.event_pic ul li .txt dd em{ display:block;}
.event_pic ul li .txt dd .bn{font-size: 1.07em;text-align:center;color:#3b3b3b;display:block;border:2px solid #3b3b3b;padding:10px;width:205px;margin-top:30px;}

/****** mainCon ******/
.mainCon{padding:0; position:relative; box-sizing:border-box;}

/****** section ******/
.section {padding:0; position:relative; margin:0 auto; box-sizing:border-box; overflow:inherit; border-bottom:0;}
.section .inner{ position:relative; margin:0 auto; width:1080px;}
.section div{vertical-align:top;}
.section .main_tit01{ text-align:center; font-size:38px; color:#1c1c1c; position:relative; margin-bottom:20px; line-height:1em;}
.section .main_tit01:before,
.section .main_tit01:after{content:''; display:block; width:300px; height:50px; position: absolute; top:0; left:0; }
.section .main_tit01:before{ background:url('../images/main/bg_main_tit01_1.png') left 0 top 15px no-repeat;}
.section .main_tit01:after{ background:url('../images/main/bg_main_tit01_2.png') right 0 top 15px no-repeat; right:0; left:inherit;}
.section .main_tit02{ font-size:27px; color:#fff; font-weight:400; margin-bottom:20px; line-height:1em; }
.section .main_tit02:after{ content:''; display:block; background:#fff; width:30px; height:2px; margin:15px 0 20px 0;}
.section .main_tit02 strong{ font-weight:700;}
.section p{ line-height:1.4; text-align:left;color:#fff;}
.section em{ display:block;}

/****** section01 ******/
.section01 .inner { margin:-50px auto 0 auto; z-index: 10;}
.section01 .inner > div{ position:relative; float:left; box-sizing:border-box; height:230px; overflow:hidden;}
.section01 .inner > div > a{ overflow:hidden; display:block; height:100%; padding:30px 20px;}
.section01 div.col1{ width:230px;}
.section01 div.col2{ width:390px;}
.section01 div.col3{ width:620px;}
.section01 div.col2.box07{ width:460px;}
.section01 .inner > div.box05 , .section01 .inner > div.box06, .section01 .inner > div.box07{height:335px;}
.section01 .inner > div.box08, .section01 .inner > div.box09, .section01 .inner > div.box10{height:350px; margin-bottom:100px;}
.box01 .main_tit02, .box05 .main_tit02, .box06 .main_tit02, .box07 .main_tit02{ font-size:33px;}


.section01 .inner > div.box01 > a {  padding:25px 20px 0 25px;}
.section .box01 .main_tit02 {margin-bottom: 0px;}
.section .main_tit02:after {margin: 7px 0 15px 0;}
.section .box01 .btn{ display: none !important}
.section .box01 img{ max-width: 100%;}

.box01{ background:#f49800 }
.box02{ background:#b5b3b4;}
.box03{ background:#24a69a;}
.box04{ background:#a59d9a url('../images/main/bg_shop.jpg') no-repeat left -120px bottom -69px; background-size:155%; }
.box05{ background:#45b0b3;}
.box06{ background:#20364b url('../images/main/bg_rnd.jpg') no-repeat center 100%;}
.box07{ background:#5c9dbc url('../images/main/bg_success.png') no-repeat right 20px bottom 20px;}
.box08{ background:#080806 url('../images/main/bg_mv.png') no-repeat 100% 100%;}
.box09{ background:#a59d9a;}
.box10{ background:#777777;}

.section01 .btn{  display: inline-block; cursor:pointer; padding:8px 25px; border:1px solid rgba(255,255,255,0.6); color:#fff; font-size: 0.94em; position:absolute; bottom:20px; left:20px;transition-duration: 0.3s;}
.section01 .btnGrp{position: absolute;overflow:inherit;margin:inherit;bottom:15px;}
.section01 .btnGrp .btn{float:left;position:relative;left:0;bottom:0;}
.section01 .btnGrp .btn.down{padding-right:50px;background:url('https://www.hesol365.com/images/main/ico_down.png') no-repeat center right 20px;}
.section01 .btnGrp .btn:nth-child(2){ float:right; margin-left:22px;}
.section01 .btn:hover{ background-color:#fff !important; color:#333;}
.section01 .btn.down:hover{ background-image:url('../images/main/ico_down_gray.png')}
.box02 .btn, .box03 .btn, .box04 .btn, .box06 .btn{ display:none;}


.box04 .ico{ display:block; margin:0 auto; text-align:center;}
.box05 .icoBox { margin-top:20px;}
.box05 .icoBox li { display:block; float:left; margin-right:15px; width:93px; height:93px; border-radius:50%; background:#29999d url('../images/main/ico_pro.png') no-repeat center 20px; box-sizing:border-box; padding:63px 0 0 0; text-align:center; color:#fff; font-size: 0.9em;}
.box05 .icoBox li:nth-child(2) { background-position-y:-85px;}

.mvBox{ cursor:pointer;}
.mvBox h3{ text-align:center; padding-top:100px;}
.mvBox h3:after{ display:none;}

/****** section02 ******/
.section02{ width:100%; height:460px; overflow:hidden; background:#f7f7f7 url('../images/main/bg_con02.jpg') 50% 50% no-repeat; background-size:cover;text-align:center; padding-top:200px; }
.section02 p{ font-size:30px;  line-height:1.2;text-shadow:0px 0px 5px rgba(255,255,255,0.5); font-weight:700; color:#333; display:inline-block; background-color:rgba(255,255,255,.5); padding:5px 10px}
.section02 em{ display:block;}

/****** section03 ******/ 
.section03{ background:#fff; overflow:hidden;}
.section03 .inner{overflow:hidden; padding:90px 0 80px 0;}
.proBox{ padding-top:45px;}
.proBox li{ display:block; width:24.9%; float:left; box-sizing:border-box; margin-right:1px;}
.proBox li a{display:block; background: #777 url('../images/main/pro_ico01.png') no-repeat right 30px bottom 30px; min-height:270px; padding:30px; box-sizing:border-box; transition-duration: 0.3s;}
.proBox li:nth-child(1) a{ background-image: url('../images/main/pro_ico01.png');}
.proBox li:nth-child(2) a{ background-image: url('../images/main/pro_ico02.png');}
.proBox li:nth-child(3) a{ background-image: url('../images/main/pro_ico03.png');}
.proBox li:nth-child(4) a{ background-image: url('../images/main/pro_ico04.png');}
.proBox li:last-child { float:right; margin-right:0;}
.proBox li:last-child a{ background-color:#a59d9a;}
.proBox li a .tit{ font-size:22px; margin-bottom:22px; line-height:1em; font-weight: 100}
.proBox li a .tit strong {font-weight: 500}
.proBox li a .txt{ font-size: .95em;}
.proBox li a:hover{ background-color:#4cc3c7;}

@media screen and (max-width:1024px) {
	
	/****** visualRolling ******/
	.visualRolling .event_pic,
	.visualRolling .event_pic ul,
	.visualRolling .event_pic li{ height:550px;}
	.visualRolling .event_pic li.pic{background-position:50% 0;}
	.event_pic ul li .txt,
	.event_pic ul li:nth-child(2) .txt,
	.event_pic ul li:nth-child(3) .txt{ width:auto; max-width:815px; padding:135px 10px;}
	.event_pic ul li .txt dt{ font-size:45px;}
	.event_pic ul li .txt dd{ font-size:16px;}
	.event_pic ul li .txt dd .bn{ width:175px; font-size: 1em; padding:8px; margin-top:25px;}
	.visualRolling .rolling_btn{ bottom:50px;}
	.visualRolling .rolling_btn ul{ max-width:815px; width:auto;}
	.visualRolling .arrow .prev,
	.visualRolling .arrow .next{ top:50%;}
	
	/****** mainCon ******/
	.mainCon{ margin-bottom:40px}
	
	/****** section ******/	
	.section .inner{ width:100%; max-width:815px; margin:30px auto 40px auto; overflow:hidden;}	
	.section,
	.inner{ width:100%; }
	.section p{ }
	.section em{ display:inline;}
	
	.section .main_tit01{font-size: 2.35em;margin-bottom:15px;display: block;margin: 0 auto 15px auto;width: 390px;}
	.section .main_tit01:before{left: -80%;}
	.section .main_tit01:after{right: -80%;}
	.section .main_tit02{font-size: 20px;font-weight:700;letter-spacing:-0.05em;margin-bottom:inherit;}
	.section .main_tit02:after{margin: 10px 0 15px 0;}
	
	/****** section01 ******/
	.section01 { overflow:hidden; margin:0;}
	.section01 div.col1{ width:20% !important;}
	.section01 div.col2{ width:40% !important;}
	.section01 div.col3{ width:60% !important;}
	.section01 .inner > div{ height:200px;}
	.section01 .inner > div > a, .box01{}
	.section01 .inner > div.box05 , .section01 .inner > div.box06, .section01 .inner > div.box07{height:240px;}
	.section01 .inner > div.box08, .section01 .inner > div.box09, .section01 .inner > div.box10{height:220px; margin-bottom:0;}	
	.box01{ background-image:none;}
	.box04{ background-size: cover; background-position-x: center;}
	.box04 .ico img{ width:60px;}
	.box05 .icoBox{ margin-top:15px; text-align:center; display: none}
	.box05 .icoBox li{ display:inline-block; width: 45%;height: 40px;border-radius: 10px;padding: 13px 20px;text-align: right; background-position:15px 10px; background-size:30px; float:none; margin-right:5px;}
	.box05 .icoBox li:nth-child(2) { background-position-y:-60px;}
	.box07{ background-position:center 105px; background-image:url('https://www.hesol365.com/images/main/bg_success_m.png'); background-size:88%;}	
	.section01 .btn{ padding:5px 10px;}
	.section01 .btnGrp .btn.down{ padding-right:30px; background-position-x:92%;}
	.section01 .btnGrp .btn{margin-right: 5px;}
	.section01 .btnGrp .btn:nth-child(2){ margin-left:0; margin-right:0;}
	.section01 .btn{display:inline-block !important;}
	
	
	/****** section02 ******/
	.section02 { height:350px; padding-top:170px}
	.section02 p { font-size:25px}
	
	/****** section03 ******/
	.section03{ padding:0;}
	.section03 .inner{padding:0;margin-top:40px;margin-bottom: 0;}
	.proBox{ padding-top: 35px;}
	.proBox li{ width:25%; margin-right:0; }
	.proBox li a {border-right:1px solid #fff; padding:25px; background-position: right 25px bottom 25px; background-size:80px;}
	.proBox li:last-child a { border-right:0;}
	.proBox li a .tit{ font-size:22px; line-height:1.3em; margin-bottom:16px;}
	.proBox li a .tit strong{ display:block;}
	.proBox li a .txt{ }

}


@media screen and (max-width:640px) {
	#container{ margin-bottom:0;}
	
	/****** visualRolling ******/
	.visualRolling .event_pic,
	.visualRolling .event_pic ul,
	.visualRolling .event_pic li{ height:400px;}
	.visualRolling .event_pic li.pic{background-position: 50% 0; max-width:inherit;}
	.visualRolling .arrow .next,
	.visualRolling .arrow .prev	{ top:35%;}
	.event_pic ul li .txt{ width:auto; padding:85px 15px 0; }
	.event_pic ul li:nth-child(2) .txt,
	.event_pic ul li:nth-child(3) .txt{ width:auto; padding:150px 15px 0; }
	.event_pic ul li .txt dt{ font-size: 2.35em; margin-bottom:20px;}
	.event_pic ul li .txt dt em{ display:block;}
	.event_pic ul li .txt dt:after{ margin:30px auto 0 auto;}
	.event_pic ul li .txt dd{ }
	.event_pic ul li .txt dd .bn{ font-size: 0.87em; padding:6px; width:140px; margin-top:18px;}
	.visualRolling .rolling_btn{ bottom:30px;}
	.visualRolling .rolling_btn ul{max-width:inherit; padding:0 30px;}
	
	/****** mainCon ******/
	.mainCon{margin-bottom: 0;}
	
	/****** section ******/	
	.section .inner{max-width:inherit;margin: 0 auto;padding: 20px 15px 35px 15px;}
	.section p{ }
	
	.section .main_tit01{font-size: 28px;letter-spacing: -0.03em;margin-bottom:10px;width: 310px;}	
	.section .main_tit01:before{top: -5px;left: -100%;}
	.section .main_tit01:after{top: -5px; right: -100%;}
	.section .main_tit02{font-size: 20px;}
	.section .main_tit02:after{margin: 8px 0 13px 0;width: 25px;}
	
	.section01 .btn{padding: 3px 5px;letter-spacing: -0.03em;}
	.section01 .btnGrp{clear: both;text-align: left;}
	.section01 .btnGrp .btn,
	.section01 .btnGrp .btn:nth-child(2){float:none;margin-top: 5px;}
	
	/****** section01 ******/	
	.section01 .inner > div > a,
	.section01 .inner > div.box01 > a {  padding:20px 20px 0 20px;}
	.section .box01 .btn{ display: block !important}
	
	.section01 .inner > div{ width:50% !important; height:200px !important;}	
	.box05 .icoBox{ float:right;}
	.box05 .icoBox li{display:block;float:left;margin:0 0 0 5px;width:60px;height:60px;border-radius:50%;padding:33px 0 10px 0;text-align:center;background-size:25px;background-position: 17px 12px;font-size:11.5px;}
	.box05 .icoBox li:nth-child(2) {background-position-y: -47px;}
	.box07{background-position: 15px 85px; background-size: 80%;}
	
	/****** section02 ******/	
	.section02 { height:250px; padding-top:100px;}
	.section02 p{ font-size:23px;}
	
	/****** section03 ******/
	.section03 .inner{padding-top: 40px;margin-bottom:0;}
	.proBox{ padding-top: 20px;}
	.proBox li{ width:50%; border-bottom:1px solid #fff;}
	.proBox li:nth-child(2){ float:right;}
	.proBox li:nth-child(2) a{ border-right:0;}
	.proBox li a{ padding:20px 20px 0 20px; min-height:inherit; height:200px; background-position: right 20px bottom 20px; background-size:65px;}	
	.proBox li a .tit{ font-size:20px; margin-bottom:10px;}
	.proBox li a .tit strong{ display:block;}
	.proBox li a .txt{ }
}

@media screen and (max-width:480px) {
	/****** visualRolling ******/
	.visualRolling .event_pic,
	.visualRolling .event_pic ul,
	.visualRolling .event_pic li{ height:280px; text-align: left}
	.visualRolling .event_pic li.pic{background-position: 50% 0; max-width:inherit;background-position-x: right 200px;}
	.visualRolling .arrow {display: none}
	.visualRolling .arrow .next,
	.visualRolling .arrow .prev	{ top:40%; }
	.event_pic ul li .txt,
	.event_pic ul li:nth-child(2) .txt,
	.event_pic ul li:nth-child(3) .txt{ padding:0; width: inherit;display: inline-block;}
	.event_pic ul li .txt{ margin: 60px 0 0 15px;}
	.event_pic ul li:nth-child(2) .txt{ margin: 70px 0 0 15px;}
	.event_pic ul li:nth-child(3) .txt{ margin: 70px 0 0 15px;}
	.event_pic ul li .txt dt{ font-size:25px; margin-bottom:15px;}
	.event_pic ul li .txt dt em{ display:block;}
	.event_pic ul li .txt dd{ font-size: 0.95em;}
	.event_pic ul li .txt dd .bn{ font-size: 0.8em; padding:5px; width:120px; margin-top:15px;}
	.visualRolling .rolling_btn{ bottom:20px;}
	.visualRolling .rolling_btn ul{max-width:inherit; padding:0 15px;}
	.visualRolling .rolling_btn li{ margin:0;}
	.visualRolling .rolling_btn li a{ width:12px; display:block;}
	.visualRolling .rolling_btn li a img{ width:100%;}

	/****** section ******/	

	.section .main_tit02{}
	.section .main_tit02:after{margin: 8px 0 13px 0;width: 25px;}
	.section .main_tit01{font-size: 22px;margin-bottom:5px;width: 285px;}
	.section .main_tit01:before{top: -6px;left: -108%;}
	.section .main_tit01:after{top: -6px;right: -108%;}
	
	.section .inner{max-width:inherit;margin: 0 auto;padding: 15px 10px 30px 10px;}
	.section01 .inner > div{ height:180px !important;}
	.section01 .inner > div > a, .box01{ }
	.section01 .btn{ left:15px; bottom:15px;}
	.section01 .btnGrp .btn.down{ padding-right:25px; background-position-x:95%; letter-spacing:-0.05em;}
	

	.box05 .icoBox {margin-top: 0;float: none;/* position: absolute; *//* right: 15px; *//* bottom: 22%; */display: none;}
	.box05 .icoBox li{width: 40px;height: 40px;padding: 0;font-size:0px;background-position: 7px 11px;margin: 0 5px 0 0;}
	
	.section02{ height:220px;}
	.section02 p{ font-size: 25px; text-align: center}
	
	.section03 .inner{padding-top: 35px;}
	.proBox{ padding-top:15px;}

}
@media screen and (max-width:360px) {
	
	.section02 { padding-top: 70px;}
	.section03 p.col_g2 { margin: 0 15% }
	.proBox li a{  padding: 20px 10px 10px 10px; min-height: 220px;  background-position: center bottom 15px;}
	.box06, .box07 { background-image:none}
	
}