@font-face { font-family:"MiSans Medium"; src:url("../../../../static/css/font/MiSans/MiSans-Medium.woff2")}
@font-face { font-family:"MiSans Regular"; src:url("../../../../static/css/font/MiSans/MiSans-Regular.woff2")}
@font-face { font-family:"MiSans Light"; src:url("../../../../static/css/font/MiSans/MiSans-Light.woff2")}
@font-face { font-family:"MiSans Semibold"; src:url("../../../../static/css/font/MiSans/MiSans-Semibold.woff2")}
@font-face { font-family:"MiSans Heavy"; src:url("../../../../static/css/font/MiSans/MiSans-Heavy.woff2")}

.generic{ width:100%; float:left; position:relative; overflow:hidden}
.generic .box{ width:430px; position:relative; left:50%; margin:0 0 0 -215px}
.generic .tit_box{ width:100%; float:left; position:relative; margin-top:70px; z-index:10}
.generic .t_1{ width:100%; float:left; position:relative; overflow:hidden; font-size:32px; color: #222; line-height:40px; padding-bottom:14px; font-family:"MiSans Medium"; opacity:0}
.generic .t_1 .co_1{ color: #70b428}
.generic .t_2{ width:100%; float:left; position:relative; overflow:hidden; font-size: 24px; line-height:28px; color: rgba(1,1,1,0.8); font-family:"MiSans Light"; opacity:0}
.generic .img_box{ width:430px; float:left; position:absolute; top:0; left:0}
.generic .img_box img{ max-width:100%}

.main_1{ height:666px}
.main_1 .tit_box{ text-align: center}
.main_1 .t_1{ padding-bottom: 9px}
.main_1 .img_box{ height:666px}

.main_2{ width: calc(100% - 40px); height:575px; padding: 0 20px}
.main_2 .tit_box{ margin: 56px 0 13px; text-align: center; opacity:1}
.main_2 .t_1{ font-size: 22px; line-height: 28px}
.main_2 .imgs_l{ width: calc(50% - 4px); float: left}
.main_2 .imgs_r{ width: calc(50% - 4px); float: right}
.main_2 .imgs{ width: 100%; float: left; border-radius: 8px; overflow: hidden; margin-bottom: 8px}
.main_2 .imgs img{ width: 191px; float: left; position: relative}
.main_2 .img_1{ height: 178px; opacity: 0}
.main_2 .img_2{ height: 119px; opacity: 0}
.main_2 .img_3{ height: 90px; opacity: 0}
.main_2 .img_4{ height: 119px; opacity: 0}
.main_2 .img_5{ height: 90px; opacity: 0}
.main_2 .img_6{ height: 119px; opacity: 0}

.main_3{ height:660px}
.main_3 .box{ height:660px}
.main_3 .tit_box{ width:100%; margin-top:477px; text-align: center}
.main_3 .tit_box .if{ width: 100%; height: 40px; float: left; text-align: center; padding-bottom: 27px; opacity: 0}
.main_3 .tit_box .if img{ width:78px}
.main_3 .t_1{ padding-bottom: 11px}
.main_3 .img_box{ height: 660px}
.main_3 .color{ width: 13px; float: left; position: absolute; left: 125px; top: 294px; font-size: 13px; line-height: 14px; font-family:"MiSans Light"; z-index: 2; opacity: 0}
.main_3 .color_2{ left: 287px; top: 371px}
.main_3 .color .ra{ width: 7px; height: 7px; float: left; background-color: #2F3232; border-radius: 50px; margin:0 0 4px 3px}
.main_3 .color .ra .sra{ width: 4px; height: 4px; float: left; background-color: #EDF9FC; border-radius: 50px; margin: 1px 0 0 1px}
.main_3 .color_2 .ra .sra{ margin: 1px 0 0 2px}

.main_4{ height:685px}
.main_4 .box{ height:685px}
.main_4 .tit_box{ width:100%; margin-top:69px; text-align: center}
.main_4 .t_1{ font-size: 40px}
.main_4 .img_box{ height: 685px}

.main_5{ height:805px}
.main_5 .box{ height:805px}
.main_5 .tit_box{ width:calc(100% - 72px); margin:69px 36px 0}
.main_5 .t_2{ font-size: 20px}
.main_5 .t_3{ float:left; font-size:8px; line-height:20px; color: rgba(1,1,1,0.5); position: absolute; left: 36px; bottom: 8px; z-index: 1}
.main_5 .img_box{ height: 805px}

.main_6{ width: calc(100% - 64px); padding: 0 32px 66px}
.main_6 .tit_box{ margin:68px 0 11px}
.main_6 .tit_box_2{ margin:61px 0 21px}
.main_6 .t_3{ width: 100%; float:left; font-size:8px; line-height:20px; color: rgba(1,1,1,0.5)}
.main_6 .imgs{ width: 100%; float: left; border-radius: 8px; overflow: hidden; margin-bottom: 6px}
.main_6 .imgs img{ max-width: 100%}

.main_7{ height:653px}
.main_7 .box{ height:653px}
.main_7 .tit_box{ margin-top: 74px; text-align: center}
.main_7 .t_2{ font-size: 20px; margin-top: 4px}
.main_7 .img_box{ height: 653px}

.main_8{ height:740px}
.main_8 .box{ height:740px}
.main_8 .tit_box{ margin-top: 75px; text-align: center}
.main_8 .t_2{ font-size: 20px; margin-top: -6px}
.main_8 .img_box{ height: 740px}
.main_8 ul{ width:80%; float:left; position: relative; margin:40px 0 0 10%}
.main_8 li{ width:calc(33.33% - 42px); float:left; text-align: left; padding-left:42px; font-size: 20px; color: #222; overflow: hidden; line-height:38px; font-family:"MiSans Light"; background:url(../../images/accessories/rope2-Go/8_1.png) no-repeat 0 0; background-size: 40px 300px; opacity:0}
.main_8 .ic_2{ background-position:0 -100px}
.main_8 .ic_3{ background-position:0 -200px}

.main_9{ height:626px}
.main_9 .box{ height:626px}
.main_9 .tit_box{ margin-top: 79px; text-align: center}
.main_9 .t_1{ line-height: 50px; opacity: 1}
.main_9 .t_1 span{ width: 100%; float: left; opacity: 0}
.main_9 .ff_ml{ font-family:"MiSans Light"}
.main_9 .img_box{ height: 626px}

.main_10{ height:648px}
.main_10 .box{ height:648px}
.main_10 .tit_box{ margin-top: 82px; text-align: center}
.main_10 .t_2{ font-size: 20px; line-height: 20px}
.main_10 .img_box{ height: 648px}

.main_11{ width: calc(100% - 64px); padding: 0 32px 48px}
.main_11 .tit_box{ margin:74px 0 11px}
.main_11 .tit_box_2{ margin:69px 0 17px}
.main_11 .t_2{ font-size: 20px}
.main_11 .imgs{ width: 100%; float: left; border-radius: 8px; overflow: hidden; margin-bottom: 6px}
.main_11 .imgs img{ max-width: 100%}

.main_12{ width: calc(100% - 64px); padding: 0 32px 48px; background-color: #F6F6F6}
.main_12 .tit_box{ margin:45px 0 11px}
.main_12 .imgs{ width: 100%; float: left; overflow: hidden; margin-bottom: 6px}
.main_12 .imgs img{ max-width: 100%}


@media only screen and (max-width : 375px){
	.main_8 li{ width:calc(33.33% - 42px); font-size: 16px}
}

@media only screen and (max-width : 340px){
	.main_8 ul{ width:90%; margin:40px 0 0 5%}
}