@charset "utf-8";
/* CSS Document */
html, body {
	margin: 0px;
	position:relative;
	font-size:16px;
	color:#fff;
	font-family:"Noto Sans TC",\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;
	height:100%;
    margin: auto;
}
body {background-image: url("../img/5sp.jpg");background-size: 100% 100%;}
section { position:relative; margin:auto;}
*{position: relative;box-sizing: border-box;}
.warp { width:100%; height:100%; margin:auto;overflow-x: hidden; }
#section1 .warp,#section2 .warp { overflow: hidden; }
h1{height: 0;margin: 0;}
.font_weight1 { font-weight: 100;}
.font_weight3 { font-weight: 300;}
.font_weight4 { font-weight: 400;}
.font_weight5 { font-weight: 500;}
.font_weight7 { font-weight: 700;}
.font_weight9 { font-weight: 900;}

.section .center { position:absolute; top:50%; left:50%;z-index: 1;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%); /* IE 9 */
-moz-transform:translate(-50%,-50%); /* Firefox */
-webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
-o-transform:translate(-50%,-50%); /* Opera */
}


.logo_tit {max-width: 220px;position: absolute;top: 3%;right: 7%;}
.logo a {display: inline-block;}
body #gotop{width: 3em;height: 3em; display: block;position: fixed;right: 20px;bottom: 20px;cursor: pointer;z-index: 999;}
body #gotop a{color: #fff;position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%); /* IE 9 */
-moz-transform:translate(-50%,-50%); /* Firefox */
-webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
-o-transform:translate(-50%,-50%);
}
.root_menu_closed .icon-bar:first-child {-webkit-transform: translateY(12px)rotate(45deg);-ms-transform: translateY(12px)rotate(45deg);transform: translateY(12px)rotate(45deg);}
.root_menu_closed .icon-bar:nth-child(2) {opacity: 0;}
.root_menu_closed .icon-bar:last-child {-webkit-transform: translateY(-12px)rotate(-45deg);-ms-transform: translateY(-12px)rotate(-45deg);transform: translateY(-12px)rotate(-45deg);}
a { display:block; position:relative;}
a { text-decoration:none; top:0;
transition: all 0.6s;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-o-transition: all 0.6s;
}
a:hover{opacity:0.8;filter:alpha(opacity=80); top:0px;}

.menu { display:block; background-color: #fff;box-shadow: 0 0 15px #bc9e7d;text-align: center;position:fixed; 
	width:100%; z-index:10; display:block;padding: 1.5% 0;
	transition:all 0.4s linear 0s;-moz-transition:all 0.4s linear 0s;-webkit-transition:all 0.4s linear 0s;-o-transition:all 0.4s linear 0s;}
.menu a{ color:#9d6f0c; font-size:1.2vw; font-weight:bold; text-decoration:none;}
.menu a small{ color:#666; font-size:50%;display: block;}
.menu_rotate {transition:all 1s linear 0s;-moz-transition:all 1s linear 0s;-webkit-transition:all 1s linear 0s;-o-transition:all 1s linear 0s;}
.menu_open {z-index:200;display: block;}
.top_menu { top: .5%; right: 1%; position: fixed; z-index: 201; cursor: pointer; font-size: 12px; display: none;background-color: #fff;
    border: solid 3px;
	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;}
.icon-bar { display: block; width: 45px; height: 4px; border-radius: 0; background-color: #ce8c00; margin: 6px;
    -webkit-transition: background-color .35s,-webkit-transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1);
    transition: background-color .35s,transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1);
    -webkit-transform: translateY(0)translateZ(0);    transform: translateY(0)translateZ(0);}


.menu { display:block; transition:all 0.4s linear 0s;-moz-transition:all 0.4s linear 0s;-webkit-transition:all 0.4s linear 0s;-o-transition:all 0.4s linear 0s;}
.root_menu_closed .menu_line_1 {-webkit-transform: translateY(12px)rotate(45deg);-ms-transform: translateY(12px)rotate(45deg);transform: translateY(12px)rotate(45deg);}
.root_menu_closed .menu_line_2 {opacity: 0;}
.root_menu_closed .menu_line_3 {-webkit-transform: translateY(-12px)rotate(-45deg);-ms-transform: translateY(-12px)rotate(-45deg);transform: translateY(-12px)rotate(-45deg);}
	
.menu_closed_txt {
    display: inline-block;
}
.menu_closed_txt {
    margin: 8% auto 0;
    color: #fff;
}
a img { border:none;}
.is-selected { }

	.menu_ds{width: 10%;display: block;height: auto;left: auto;right: 0;bottom: 5%; z-index: 5;position: fixed;text-align: center;}
	.menu_ds a{width: 100%;margin:0;text-align: center;color: #fff;font-size: 120%;}
	.menu_ds a img {width: 100%; margin-top:.6em;}

footer { text-align:center; color:#725213; padding: 1vw;background:url() center top no-repeat #deb04d;z-index: 1;}

.img_bg img.pc { display:block;}
.pc { display:block;}
.pc2 { display: inline-block;}
.img_bg img.sp { display: none;}
.sp { display: none;}
.sp2 { display: none;}

/*------------------step3-----------------------*/
.cf{width: 100%;margin: auto;border: 8px solid #fc9d03;z-index: 1;display: block;border-bottom-color: #fec801;border-left-color: #fec801;}
/*RWD Youtube 以及 Vimeo*/
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}


.bg_color { background-color:#FFF; border-top:solid 4px; overflow:hidden; margin-top: 4%;
box-shadow: 5px 5px 16px rgba(0, 0, 0, 0.2); 
-webkit-box-shadow: 5px 5px 16px rgba(0, 0, 0, 0.2); 
-moz-box-shadow: 5px 5px 16px rgba(0, 0, 0, 0.2); 
}
/*loading ===============*/
    .loading{}
        .loadingloading{
            background: #080e34 /*url(../img_12/common/bg_lightblueCarben.jpg)*/ repeat; background-position:center;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: fixed;
            text-align:center;
            z-index: 200;}
        .loading_logo{    
            width: 500px;
            height: 117px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -121px;}
        .loading_bar{
            height: 231px;
            width: 320px;
            background: /*url(../img_12/common/loadingbg.png)*/ no-repeat scroll left top rgba(0, 0, 0, 0);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -160px;
            margin-top: -115.5px;}
        .loader{
            width:1%;
            height:100%;
            background:/*url(../img_12/common/loading.png)*/ no-repeat left top;}
        .load_status{
            width: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -51px;
            margin-top: 106px;
            color: #fff;
            font-family: Arial;
            font-size: 17px;
            text-align: center;}
        .temp{
            width:4px;
            height:4px;
            overflow:hidden;
            position: absolute;
            left:-50%;
            top:-50%;}
        .temp img{
            width:4px;
            height:4px;}

@media screen and (min-width: 200px) and (max-width: 960px){
	
.img_bg img.pc { display: none;}
.pc { display: none;}
.pc2 { display: none;}
.img_bg img.sp { display:block;}
.sp { display:block;}
.sp2 { display: inline-block;}

.root_menu_closed .icon-bar:last-child {
    -webkit-transform: translateY(-8px)rotate(-45deg);
    -ms-transform: translateY(-8px)rotate(-45deg);
    transform: translateY(-8px)rotate(-45deg);
}
.nav_icon img { margin: 0 3vw;}
body {font-size: 3.4vw;}
.logo { width: 12vw; height: auto;}

.th3{ padding:5vw 0;}
.tp1 { display:block; width:66%;}
.tp2 {width: 22vw;}
.tp3 { margin-top: 6px; width: 25%;}

			img{width: 100%;}
			.kv_txt{width: 100%;}
			.characteristic {width:100%;margin: auto;}
			.title {width: 90%;font-size: 220%;padding: 88px 0px 85px 0;top: -40px;margin-bottom: -40px;}
			.kv .th3 {width: 100%;}
			.pro_li {width: calc(80% / 1);float: inherit;margin: 0 auto 3%;}
	
			.menu_ds{width: 100%; position: fixed;top: inherit; bottom: 0;z-index: 10;display: block!important;opacity: 1!important;}
			.menu_ds a{float: left;width: 50%;}
			.menu_ds a img{width: 100%;}
		}/**/

/*20200224*/
		.img_bg img{width: 100%;left: inherit; display: block;}
		#section1 .img_bg img{width: 100%;left: inherit;}
		.nav_icon{display: inline-block;}
		.nav_icon a{width: 22%;display: inline-block;margin: 0 3%;}
		.nav_icon a img{width: 100%;}
		.menu .logo {width: 17%;}
.menu .logo img:nth-child(1){width: 36%;
    position: absolute;
    top: 0%;
    left: -42%;
    margin-top: -15%;}
.menu .logo img{width: 60%;margin-left: 35%;}
.menu .cd-vertical-nav {width: 65%;}
.menu .nav_icon {width: 12%;}
.menu ul{list-style: none;padding: 0;margin: 0;}
.menu li,.menu div{ display:inline-block;}
.menu li{padding: 0 2%;}
.menu li:first-child::before{content:'';width: 0px;}
.menu li::before{content:'';width: 1px; height: 100%;background-color: #eee;display: block;position: absolute; left: 0;box-shadow: 0 0 1px #bfbfbf;}
		.txt1{color: #e5ac24;font-size: 240%;font-weight: bold;text-align: center;margin-top: -3%;width: 100%;}
		
		.secret_top{box-shadow: 0px 0 30px rgba(0, 0, 0, .4);z-index: 1;}
		.box{position: absolute;z-index: 1;}
		.box01{margin-left: -29%;margin-top: -7%;}
		.box02{margin-left: -25%;margin-top: 7%;}
		.box03{margin-left: 32%;margin-top: -7%;}
		.box04{margin-left: 27%;margin-top: 7%;}
		.story1,.story2{width: 100%; height: 100%; overflow: hidden;}
		
		.story2 > div{width: 60%;}
		.story2 .box01{margin-left: -15%;margin-top: -10%;}
		.story2 .box02{margin-left: -16%;margin-top: 9%;}
		.story2 .box03{margin-left: 47%;margin-top: -10%;}
		.story2 .box04{margin-left: 48%;margin-top: 9%;}

		.pro_abc_box0{overflow: hidden;}
		.pro_abc_box{width: 100%;height: 100%;overflow: hidden;max-width: 1401px;}
		.pro_abc{width: 23%;}
		.pro_abc img{width: 100%;}
		.pro_a{margin: 24% 12%;}
		.pro_b{margin: 11% 64%;}
		.pro_c{margin: 31% 64%;}
		.txt_box_top{position: absolute;width: 100%;}
		.txt_box{position: relative;z-index: 1;font-size: 110%;color: #000;}
		.txt_box1{width: 37%;padding-left: 11%;padding-top: 8%;background: url("../img/pro_abc1.gif")right top no-repeat, url("../img/pro_abc1.png")right top no-repeat;background-size: 33%;}
		.txt_box2{width: 90%;padding-left: 51%;padding-top: 42%;}
		.txt_box strong{font-size: 193%;padding-bottom: .2em;display: block;}
		.txt_box1 strong{color: #fe7c00;}
		.txt_box2 strong{color: #01a06d;}
		.txt_box2 .txtt{margin: -2%;background-color: #01a06a;}
		.txtt{position: absolute;background-color: #fe7c00;border-radius: 1em;margin: -4%;color: #fff;display: block;padding: .2em 1em;font-size: 130%;font-weight: bold;}
		.txtt::after{content: '';display: inline-block;background: url("../img/txtt_d1.png")center;background-size: 100%;padding: 6px;position: absolute;left: 20%;top: 99%;}
		.txt_box2 .txtt::after{content: '';display: inline-block;background: url("../img/txtt_d2.png")center;background-size: 100%;}
		.pro_23{position: absolute;z-index: 2;left: 0;right: 0;margin: auto;width: 78%;top: 28%;max-width: 1200px;}
		.pro_23_top{margin-top: -5%}
	
		.pro_2{font-size: 110%;color: #000;border: solid 6px #ffd104;border-radius: 1em;background-color: #fff;padding:2% 4%;text-align: center;}
		.pro_2_box{width: 46%;display: inline-block;text-align: left;vertical-align: middle;}
		.pro_2 strong{display: block;color: #1a79bb;font-size: 200%;}
		.pro_2 .left img{width: 84%;}
		.pro_2 .right{padding-left: 9%;}
		.pro_2 .right strong{margin:.2em; font-size: 110%;background-color: #fe7c00;display: inline-block;border-radius: 1em;color: #fff;padding: .2em 1em;}
		.pro_2 .right strong:nth-child(3){background-color: #fe9d02;}
		.pro_2 .right strong:nth-child(5){background-color: #01a06d;}
		.pro_2 .right::before{content:'';width: 1px; height: 100%;background-color: #eee;display: block;position: absolute; left: 0;box-shadow: 0 0 1px #bfbfbf;}
		.pro_2 .right img{width: 35%;float: right;margin: 8% -4%;}
		.pro_2 .right strong small{
		    width: 8em;
    display: block;
    height: 0.8em;}
		.pro_2 .right strong span{
	-moz-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
    position: absolute;
    top: -4px;
    width: 200px;
    left: -30px;}
		#section4{z-index: 1;}
		.cf_box{position: absolute;z-index: 1;width: 72%;left: 0;right: 0; bottom: 7%;margin: auto; padding-bottom: 6%;max-width: 880px;}
		.slick-dots {bottom: -60px;-moz-transform: scale(2);-webkit-transform: scale(2);-o-transform: scale(2);-ms-transform: scale(2);transform: scale(2);}
			
.txt_box1 p{max-width: 25em;}
.txt_box1 {width: 71%;border: solid 4px #fdb800;background-color: #ffffc4;border-radius: 1em;left: -3%;padding: 6% 0em 2em 11%;box-shadow: 5px 5px 0 #fee69a;}
.txt_box2 {width: 86%;border: solid 4px #01a269;background-color: #f2ffeb;border-radius: 1em;box-shadow: -5px 5px 0 #d8e9af;padding: 1em;right: -16%;top: 40%;margin: 9% 0;}
			
.pro_3_tit{vertical-align: top;}	
.pro_3_box .pro_3_tit {border: solid 8px #01a06a;margin: 4% 0%;width:calc(50% - 6px);display: inline-block;border-radius: 1em;background-color: #fff;color: #000;}
.pro_3_box .right{border: solid 8px #ff8328;}

	
.tit_bg {background-color: #01a06a;color: #fff;}
.right .tit_bg {background-color: #ff8328;}
.tit_bg a::after{content: '▾';position: absolute;font-size: 140%;margin: -.3em .3em;}
.tit_bg a.op::after{content: '▴';}
.tit_bg a{border: solid 2px #fff;border-radius: 1em;display: inline-block;padding: .2em 2em .2em 1em;right: 5%;position: absolute; top: .1em;box-shadow: 3px 6px 5px 0px rgba(0, 0, 0, .4);
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%); 
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,rgba(255,255,255,0.15) 30%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%); 
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,rgba(255,255,255,0.15) 30%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.tit_bg a:hover{cursor: pointer;opacity: 1;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.tit_bg::before{content: '';display: inline-block;background: url("../img/pro3_icon1.png")center;background-size: 100%;padding: 1.6em;position: absolute;left: 1em;}
.right .tit_bg::before{background: url("../img/pro3_icon2.png")center;background-size: 100%;}
.tit_bg strong{font-size: 120%;padding-left:5.4em;display: block;padding-bottom: .4em;}
.tit_bg strong::before{content: '';display:block;position: absolute;width: 2px;height: 90%;background-color: #fff;margin: 0 -1em;border-radius: 4px;}
			.pro_3_tit p{margin:1em .8em;line-height: 1.8;min-height: 11em;}
			.pro_3_tit p.op{display: none;}
			.pro_3_tit p span{width: 4.4em;background-color: #298c5a;display: inline-block;text-align: center;color: #fff;margin-right: .4em;line-height: 1.6;} 	
			.tit_pic{font-size: 160%; color: #01a269;text-align: center;padding-bottom: 1em;position: absolute;}
			.tit_pic strong{font-size: 140%;display: block;padding-bottom: 0;margin-bottom: -.4em;}
			.tit_pic small{font-size: 50%;}
			.tit_pic img{width: 80%;}
				.txtt_box{padding: 7% 13% 0% 34%;}
/*				.txtt_box p{max-width: 27em;}*/
.slick-dots li {margin: 0;}
.slick-prev {left: 35%;}
.slick-next {right: 35%;}
.slick-prev, .slick-next {font-size: 0;line-height: 1;width: 40px;height: 40px;top: 109.5%;z-index: 1;}
.slick-next:before {content: '';background-image: url(../img/arrows_r.png);opacity: 1;}
.slick-prev:before {content: '';background-image: url(../img/arrows_l.png);opacity: 1;}
.slick-next:before,	.slick-prev:before {background-size: cover;background-repeat: no-repeat; padding:28% 50%;}
		.video-container{background-position: center; background-size: cover;}
		.player{background-image: url(https://i.ytimg.com/vi/r852wGG-nN8/maxresdefault.jpg);}
		.player1{background-image: url("https://i.ytimg.com/vi/Vb3J8ZOsjE4/maxresdefault.jpg");}

			.story02_top{z-index: 2;}
			.story02_pic{width: 28%;margin: auto;z-index: 1;}
			.story02_pic img{width: 100%;}
				.box .center div{font-size: 180%;font-weight: bold;color: #e6a919;word-break: keep-all;word-wrap: normal;text-align: center;}
				.box01 .center div{left: 17%;}
				.box02 .center div{left: 20%;}
				.box03 .center div{left: -24%;margin-top: -10%;}
				.box04 .center div{left: -24%;}
		.pro_abc .center{text-align: center;opacity: 0;}
		.pro_abc .center div{font-size: 280%;font-weight: bold;margin: -37% -29%;position: absolute;top: 0;right: 0;
		text-shadow: 4px 4px 0 #019a42, -4px -4px 0 #019a42, -4px 4px 0 #019a42, 4px -4px 0 #019a42;}
		.pro_abc .center p{left: 18%;font-size: 106%;}
		.pro_abc .center strong{font-size: 150%;display: block;}
		.pro_abc .center small{display: block;font-size: 70%;}
		.pro_abc .center small::after{content: '';display:block;background-color: #fff; width: 100%;height: 1px;margin: .6em 0;}
		
		#story1.st_fixed{position: fixed;top: 0;width: 100%;}
		.story2_top{display: none;}
		.story2_top.st_fixed{display: block;}
.story2_note{z-index: 1;position: absolute;bottom: 0;right: 0;color: #777;font-size: 80%;margin: .5em;}
	.story02_picth{position: absolute; top: -200px;text-align: center;}
	sup{font-size: 60%;top: .4em;}

.kv_note{	position: absolute;
	top: 84%;
    left: -16%;
    font-size: 12px;
    color: #6b6b6b;
	width: 160%;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
	z-index: 1;
    }

/*--------------------------------------------------------------------------------------------------------*/

		@media screen and (min-width: 200px) and (max-width: 960px){
			
			
.nav_icon a {
    width: 22%;
    display: inline-block;
    margin: 0 1%;}
.kv_note{    position: absolute;
	top: 85%;
	left: auto;
    bottom: 0em;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    margin: 0 -24%;
	font-size: 2.5vw;
	padding-top: 5%;}
.top_menu { display:block}
.menu {padding: 1.8% 0;height: 48px;width: 100%;text-align: right;min-height: 12vw;}
.menu_open { display:block; z-index: 11;}
.menu a { font-size: 200%;}
.cd-dot { display: inline-block; border-right: solid 0; height: 0; margin: 0;}
 .menu li {
    display: block;
    border-bottom: dashed 1px rgba(5, 34, 69, 0.4);
    width: 60%;
    margin: auto;
    padding: 6% 0 4%;
    text-align: center;}
.menu li .cd-dot{ display:none;}
.menu .cd-vertical-nav{display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(255, 255, 255, 1);z-index: 1;}
.menu .logo {width: 46%;left: 0;top: 0;position: absolute;}
.menu .logo img:nth-child(1) {left: -37%;margin-top: 0;}
.menu .logo img {margin-left: 50%;margin-top: 7%;}
.menu .nav_icon {width: 30%;right: 80px;top: 4px;}
.cd-vertical-nav.open{display: block;}
.menu li::before{display: none;}
			.txt1 {font-size: 190%;margin-top: 0%;}
			.story1 .center,.story2 .center{position:absolute; top:inherit; left:inherit;
transform:translate(0%,0%);
-ms-transform:translate(0%,0%);
-moz-transform:translate(0%,0%);
-webkit-transform:translate(0%,0%);
-o-transform:translate(0%,0%);
			}	
		.story1 .box{width: 54%;}
			
		.box01{margin-left: -10%;margin-top: -47%;}
		.box02{margin-left: -3%;margin-top: -25%;}
		.box03{margin-left: -11%;margin-top: -0%;}
		.box04{margin-left: -6%;margin-top: 23%;}
		.story2 .box{width: 180%;}
		.story2 .box01{margin-left: -42%;margin-top: -40%;z-index: 1;}
		.story2 .box02{margin-left: -42%;margin-top: -10%;z-index: 2;}
		.story2 .box03{margin-left: -42%;margin-top: 30%;z-index: 3;}
		.story2 .box04{margin-left: -42%;margin-top: 65%;z-index: 4;}


			.pro_23{width: 96%;z-index: 2;top: 19%;position: relative;}
			.pro_23_top{padding-top: 42%}
/*			.pro_2{margin-top: 43%;}*/
			.pro_2_box{width: 100%;}
			.pro_2 .right::before{content:'';width: 100%; height: 1px;top: -4%;}
			.pro_2 .right {padding: 2%;margin-top: 4%;}
			.pro_2_box.left{text-align: center;}

			.pro_3_box .pro_3_tit {width: calc(100% - 6px);}
.txtt{margin: -8%;}

/*.txt_box1 p{width: 21em;}*/
.txt_box1 {width: 100%;padding: 16% 1em 3% 11%;}
.txt_box2 {width: 100%;padding: 1em 1.4em;right: -3%;top: 40%;margin:11% 0;}
.tit_pic{font-size: 160%;position: relative;margin: -5% 0 -12% 6%;}
.tit_pic img{width: 40%;left: 12%;margin: 3% 0 -4%;}
.txtt_box{padding: 0;}
.txt_box2 .txtt {margin: -4% 0;}
.cf_box{width: 100%;padding-bottom: 12%;}
.slick-prev {left: 20%;}
.slick-next {right: 20%;}
.slick-prev, .slick-next {font-size: 0;line-height: 1;width: 33px;height: 60px;top: 120%;z-index: 1;}
.slick-next:before,	.slick-prev:before {padding:20% 50%;}
.img_bg_absolute{position: absolute;top: 0;}
.pro_abc {
    width: 43%;
}
.pro_a {
    margin: 35% 1%;
}
.pro_b {
    margin: 70% 11%;
}
.pro_c {
    margin: 106% 2%;
}
.tit_bg::before {
	padding: 2em;
    left: .6em;
    top: .2em;
}
.tit_pic_left{
	float: left;
    margin-top: 6%;
}
.tit_bg strong {
    font-size: 160%;
    padding-left: 4em;
}
.tit_bg a {
	right: 0%;}

			footer{padding: 2vw; padding-bottom: 60px;}
			.section .story02_pic{position: absolute;width: 60%;top: 17%; z-index: 1;}
.pro_2 strong {
    font-size: 160%;margin-top: .8em;
}
				.box .center div{font-size: 110%; margin: 30%;}
				.box01 .center div{margin-top: 16%;}
				.box02 .center div{left: 30%;}
				.box03 .center div{left: 4%;margin-top: 24%;}
				.box04 .center div{left: 10%;margin-top: 37%;}
.pro_3_tit p{display: none;}	
.pro_3_tit p.op{display: block;}	
.story02_picth {top: -130px;}
}/**/
/*---------------------------------------------------------------*/
@media screen and (min-width: 961px) and (max-width: 1600px){
.img_bg img{width: 140%;left: -20%;}
}/**/
/*---------------------------------------------------------------*/
@media screen and (min-width: 1201px) and (max-width: 1300px){
.txt_box2{margin: 8% 0;}
}/**/
/*---------------------------------------------------------------*/
@media screen and (min-width: 1001px) and (max-width: 1200px){
.txt_box2{margin: 4% 0;}
}/**/
/*---------------------------------------------------------------*/
@media screen and (min-width: 961px) and (max-width: 1100px){
	.pro_23_top{margin-top: 0;}
}/**/
/*---------------------------------------------------------------*/
@media screen and (min-width: 1600px) and (max-width: 3000px){
.cf_box{width: 100%;padding-bottom: 0%;}
.pro_abc_box {
    max-width: 1300px;
}
.txt_box1 {
    width: 65%;
    padding: 6% 24em 2em 11%;
}
.txt_box2 {
    width: 72%;
    right: -30%;
    margin: 6% 0;
	padding: 1em;
}
		.story2 .box01{margin-left: -11%;margin-top: -5%;}
		.story2 .box02{margin-left: -12%;margin-top: 7%;}
		.story2 .box03{margin-left: 42%;margin-top: -5%;}
		.story2 .box04{margin-left: 43%;margin-top: 7%;}
.pro_23_top {margin-top: -7%;}
	.story02_pic{width: 19vw;}
	
}/**/
.box p {
    width: 50%;
    display: inline-block;
    background-color: #fffff2;
    color: #767671;
    border-radius: 1.4em;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
    padding: 1em 1.4em;
}
.box p span {
    position: absolute;
    display: inline-block;
    background-color: #fa9124;
    color: #ffffff;
    margin: -11% -12%;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
    border-radius: 50%;
    width: 4em;
    height: 4em;
    padding-top: .6em;
    text-shadow: 0px 0px 4px rgb(157, 81, 30);
	box-shadow: 0px 0px 7px #cfa15c;
	z-index: 1;
}
.box p span.span2 {
    padding-top: 1.4em;
}
.box p span::after {content: '';display: block;position: absolute;z-index: 1;
		}
.box p strong::after {content: '';display: block;width: 100%; height: 1px;background-color:#fee49c; margin-top: .4em;}
.box p strong {
    text-align: center;
    display: block;
    font-size: 130%;
    color: #fa9b3b;
    padding-bottom: .4em;
}
		.story02_pict,.story_st{position: absolute;top: 0;z-index: 1;width: 100%;}
		.story02_pic1{top: 15%;left: 90%;}
		.story02_pic2{top: 35%;left: 100%;}
		.story02_pic3{top: 80%;left: 25%;}
/**/
.story02_pic1 .star {width: 18%;}
.star {position: absolute;width: 8%;
animation:myfirst .6s;
-moz-animation:myfirst .6s;
-webkit-animation:myfirst .6s;
-o-animation:myfirst .6s;
animation-direction:alternate;
-webkit-animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite; 
}
@keyframes myfirst
{
0%   {-webkit-transform: scale(.8);transform: scale(.8);}
100%   {-webkit-transform: scale(1);transform: scale(1);}
}

@-moz-keyframes myfirst
{
0%   {-webkit-transform: scale(.8);transform: scale(.8);}
100%   {-webkit-transform: scale(1);transform: scale(1);}
}

@-webkit-keyframes myfirst
{
0%   {-webkit-transform: scale(.8);transform: scale(.8);}
100%   {-webkit-transform: scale(1);transform: scale(1);}
}

@-o-keyframes myfirst
{
0%   {-webkit-transform: scale(.8);transform: scale(.8);}
100%   {-webkit-transform: scale(1);transform: scale(1);}
}
/**/
		.kv1,.sp6,.sp7{position: absolute;z-index: 1;overflow: hidden;left: 0;right: 0;}
		.kv .img_bg{overflow: hidden;}
/*20200224*/