@charset "utf-8";

.show_1_imgbox{ width:100%; height:100%; overflow:hidden}

.skrollr_box{width:100%; height:auto; background:#fff; position:relative; z-index:1; overflow:hidden}
.sk100{ width:100%;}
.sk2100{ width:100%;}
.skrollr_box h1{ font-size:30px; color:#0d5ea3; font-weight: 400; padding-bottom:15px; margin:25px 0px}
.skrollr_box h4{ font-size:20px; color:#0d5ea3; font-weight: 400; padding-bottom:15px; letter-spacing:3px}
.skrollr_box h3{ font-size:30px; color:#a07e21; font-weight: 300; padding-bottom:15px}
.royoleen  .skrollr_box h1{ font-size:30px;padding-bottom:0px;}
.royoleen .skrollr_box h4{ font-size:20px; font-weight:normal; padding-bottom:15px; letter-spacing:0px}


.royolex2{ position:absolute; top:-100%; left:20%; z-index:1; width:90%; max-width:711px}

.snrbox{position:relative; z-index:1}
.banner-m,.banner-hx{ width:100%; height:auto; position:relative; overflow:hidden}
.banner-m img,.banner-hx img{ width:100%}
.banner-hx{ position:relative; z-index:1}
.banner-m .bannertext{top:50%}
.touch_banner2{ background:#fff; position:fixed; top:0; left:0; z-index:-1;}

#wapshop { display:none}

.skrollr_box a{ color:#006eb9;}
.skrollr_box .sy_f_bq a{ color:#777;}

.skrollr_box a i{ margin-left:5px;transition: all 0.3s ease-out 0s;}
.skrollr_box a:hover i{ margin-left:10px;transition: all 0.3s ease-out 0s;}

.royolexbox{ background:url(../images/hdiv.png) no-repeat 0px 0px; background-size:100%; height:480px; text-align:center;}
.royolexbox img{ margin:auto}
.royolexbox .rx_logo{ padding-top:190px}

.royoleen .royolexbox{ height:520px;}

.royoleen .royolexbox .rx_logo {
    padding-top: 160px;
}

.rk_w1260{ width:100%; margin:auto; position:absolute; top:0; left:0; height:100%;}
.rk_w1260 .wbox{ width:90%; max-width:1260px; margin:auto;}
.bg_ccc{ background-color:#eee;}
.g_tb90{ padding:90px 0px}
.g_tb20{ padding:20px 0px}
.rk_text h2{ font-size:30px; color:#fff; font-weight: 400; padding-bottom:30px}
.rk_text p{ font-size:16px; color:#696969; line-height:30px; padding-bottom:30px}
.rk_text a{ margin-top:20px;}

.cor_b{ color:#2f568a}
.cor_0{ color:#000}
.cor_0 h2{ color:#000}
.cor_0 p{ color:#666}
.cor_f{ color:#fff}
.cor_f p{ color:#fff}
.gp_tbpw90{ padding:90px 0px;}
.gp_tbpw90 .rk_w1260 .wbox .rk_text p{ padding-bottom:0px}
 
.text-c{ position:absolute; left:0; width:100%; text-align:center;font-size:42px; color:#fff; font-weight: 400; padding-bottom:30px}

.clear-b{ clear:both; float:inherit;padding-top:0;}
.sj_por{ position:relative;}
.sj_por h2{ color:#000}
.sj_por p{ color:#666}

.rk_icon{ padding-top:30px;}
.rk_icon div{ display:inline-block; float:left\9; margin-right:13px; text-align:center}
.rk_icon div i{ display:inline-block; width:80px; height:81px; border:1px solid #9b9c9c; border-radius:80px; overflow:hidden; background:url(../images/icon.png) no-repeat}
.rk_icon div p{ font-size:12px}

.rk_icon div.rkicon_1 i{ background-position:0px 0px}
.rk_icon div.rkicon_2 i{ background-position:0px -81px}
.rk_icon div.rkicon_3 i{ background-position:0px -162px}
.rk_icon div.rkicon_4 i{ background-position:0px -243px}
.rk_icon div.rkicon_5 i{ background-position:0px -324px}
.rk_icon div.rkicon_6 i{ background-position:0px -405px}
.rk_icon div.rkicon_7 i{ background-position:0px -486px}
.rk_icon div.rkicon_8 i{ background-position:0px -567px}
.rk_icon div.rkicon_9 i{ background-position:0px -648px}
.rk_icon div.rkicon_10 i{ background-position:0px -729px}
.rk_icon div.rkicon_11 i{ background-position:0px -810px}
.rk_icon div.rkicon_12 i{ background-position:0px -891px}
.rk_icon div.rkicon_13 i{ background-position:0px -972px}
.rk_icon div.rkicon_14 i{ background-position:0px -1053px}
.rk_icon div.rkicon_15 i{ background-position:0px -1134px}
.rk_icon div.rkicon_16 i{ background-position:0px -1215px}

.rk_shijue .rk_text{ padding-top:14%; float:right; margin-right:-5%}
.sk_sound .rk_text{ padding-top:15%;}
.sk_sound .rk_text p{  color:#CCC}
.sk_sound .rk_icon div p{ color:#fff}
.sk_sound .rk_icon div i{ border-color:#fff}

.sk_sheji .rk_text{padding-top:12%; float:right;}
.sk_sheji .rk_text  h2,.sk_OS .rk_text  h2,.sk_jieku .rk_text  h2{ color:#000}

.sk_OS .rk_text{padding-top:16%;}
.sk_jieku .rk_text{padding-top:16%; float:right;}

.sk_video i{ width:100%; height:100%; position:absolute; text-align:center}
.sk_video i img{ margin:auto; width:8%; margin-bottom:15px; margin-top:9%; max-width:169px; opacity:0.6;transition: all 0.3s ease-out 0s;}
.sk_video i img:hover{ opacity:0.9;transition: all 0.3s ease-out 0s;}
.sk_video p{ font-size:18px; color:#fff; opacity:0.5}
.royoleen .sk_video p{ font-size:14px;}

.sk_video ul{ width:100%;}
.sk_video ul li{ width:50%; float:left; position:relative}
.sk_video ul li i img{ width:14%; margin-bottom:15px; margin-top:18%; max-width:169px;}


.sk_3300 .rk_text{ padding-top:22%; float:left}

.design_yidong .rk_text{padding-top:24%; margin-left:-11%}


.icontext li{ display:inline-block; margin:0px 10px; text-align:center}
.icontext li div{ font-weight:300; width:80px; height:80px; line-height:80px; border:1px solid #000; border-radius:80px; overflow:hidden; font-size:25px; margin:auto}

.banvideo{ color:#666}
.banvideo:hover{color:#006eb9}

.bannertext{ width:100%; left:0; text-align:center; color: #FFF; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); position:absolute;top:40%; z-index:4}
.bannertext h2{font-size:48px; font-weight: 300;}
.bannertext p{ font-size:20px}

.banner2box{ background:none}
#t_acf { position:absolute;}
#t_acf h2{ color:#fff}
#t_acf .rk_text{ padding-top:25%}

.iconclass2{ color:#fff;}
.iconclass2 li div{ border-color:#fff}
.iconclass2 li{ margin-left:0; margin-right:20px;}
.iconclass2 li>p{ font-size:14px}

@media screen and (max-width: 1600px){
	.sk_3300 .rk_text{ padding-top:15%;}
	.rk_text{ padding-top:6%;}
	.rk_shijue .rk_text{ padding-top:6%; margin-right:0%}
	.sk_sound .rk_text{ padding-top:8%;}
	.sk_sheji .rk_text{padding-top:8%;}
	.sk_OS .rk_text{padding-top:11%;}
	.sk_jieku .rk_text{padding-top:10%;}
	.clear-b{ clear:both; float:inherit;padding-top:0;}
	.design_yidong .rk_text{ margin-left:-5%; }

}

@media screen and (max-width: 1440px){
	.royolex2{ position:absolute; top:-95%; left:15%; z-index:1; width:90%; max-width:711px}

	.rk_text  h2{ color:#fff; font-weight: 400; padding-bottom:20px}
	.rk_text  p{ font-size:15px; line-height:24px; padding-bottom:20px}
	.rk_text a{ margin-top:20px}
	
	.rk_text{ padding-top:6%;}
	.sk_3300 .rk_text{ padding-top:15%;}
	.rk_shijue .rk_text{ padding-top:6%; margin-right:0%}
	.sk_sound .rk_text{ padding-top:6%;}
	
	.sk_sheji .rk_text{padding-top:5%;}
	.sk_OS .rk_text{padding-top:10%;}
	
	.sk_jieku .rk_text{padding-top:8%;}
	
	.sj_por h2{ color:#000}
	.sj_por p{ color:#000}
	.cor_0{ color:#000}
	.cor_0 h2{ color:#000}
	.cor_0 p{ color:#666}
	.clear-b{ clear:both; float:inherit; padding-top:0;}
	.text-c{ font-weight: 400;font-size:38px;}
	
	.design_yidong .rk_text{ margin-left:-3%;padding-top:18%; }
}
@media screen and (max-width: 1366px){

	.royolex2{ position:absolute; top:-95%; left:5%; z-index:1; width:90%; max-width:711px}

}
@media screen and (max-width: 1024px){
	
	.royolex2{ position:absolute; top:-80%; left:3%; z-index:1; width:60%; max-width:711px}

	
	.rk_text  h2{ font-size:28px; color:#fff; font-weight: 400; padding-bottom:10px}
	.rk_text  p{ font-size:15px;  line-height:20px; padding-bottom:10px}
	.rk_text a{ margin-top:10px}
	
	.royoleen h2{ font-size:24px;}
	.royoleen .rk_text  p{ font-size:12px;}
	
	.royolexbox{ margin-top:-13%}
	
	.rk_text{ padding-top:6%;}
	.sk_3300 .rk_text{ padding-top:12%;}
	.rk_shijue .rk_text{ padding-top:5%; margin-right:-5%}
	.sk_sound .rk_text{ padding-top:4%;}
	
	.sk_sheji .rk_text{padding-top:5%;}
	.sk_OS .rk_text{padding-top:10%;}
	.royoleen .sk_OS .rk_text{padding-top:5%;}
	
	.sk_jieku .rk_text{padding-top:8%;margin-right:-5%}
	#show_pro{ margin-top:18%}
	
	.sj_por h2{ color:#000}
	.sj_por p{ color:#000}
	.cor_0{ color:#000}
	.cor_0 h2{ color:#000}
	.cor_0 p{ color:#666}
	.clear-b{ clear:both; float:inherit;padding-top:0;}
	.text-c{ font-weight: 400;font-size:28px;}
	
	.design_yidong .rk_text{padding-top:18%;}
	.royoleen .design_yidong .rk_text{padding-top:12%;}
	
	.bannertext{ position:absolute;top:30%;}
}
@media screen and (max-width: 980px){
	
	.royolex2{ position:absolute; top:-70%; left:15%; z-index:1; width:60%; max-width:711px}
	.royoleen .royolex2{ position:absolute; top:-30%; left:15%; z-index:1; width:60%; max-width:711px}
	
	 html,body{ width:100%; height:auto;}
	.skrollr_box{ width:100%; overflow:hidden}

	.sk100{ width:150%; margin-left:-40%}
	.sk2100{ width:150%; margin-left:-25%}
	
	.skrollr_box h1{ font-size:32px; color:#0d5ea3; font-weight: 400; padding-bottom:15px; margin:10px 0px; margin-bottom:0px}
	.skrollr_box h4{ font-size:20px; color:#0d5ea3; font-weight: 400; padding-bottom:15px; letter-spacing:0px}
	.royoleen  .skrollr_box h1{ font-size:24px;padding-bottom:0px; width:90%; margin:auto}
	.royoleen .skrollr_box h4{ font-size:14px; font-weight:normal; padding-bottom:15px; letter-spacing:0px; width:90%; margin:auto}
	
	#show_b_1{ margin-top:-55px; position:relative;}
	.royolexbox{ height:250px; margin-top:0px; position:relative; z-index:2; height:auto}
	.royolexbox .rx_logo{ padding-top:100px}
	
/*	.skrollr_box{ position:static}
*/	
	.rk_w1260{ width:100%; margin:auto; position:relative; top:0; left:0; height:100%;}
	.rk_w1260 .wbox{ width:90%; max-width:1260px; margin:auto;}
	.rk_text{ padding-top:22%; float:left}
	.rk_text  h2{ font-size:22px; color:#333; font-weight: 400; padding-bottom:10px}
	.rk_text  p{ font-size:14px; line-height:inherit; font-size:14px; padding-bottom:30px}
	.rk_text a{ margin-top:20px}
	
	.rk_icon{ padding-top:30px; width:100%; margin-left:0; text-align:center}

	.sk_3300 .rk_text{ padding-top:30px; padding-bottom:40px}
	.rk_shijue .rk_text{ padding-top:30px; padding-bottom:40px; margin-right:0%; float:left; margin-left:0px}
	
	.sk_sound .rk_text{ padding-top:30px; padding-bottom:40px}
	.sk_sound .rk_text p{  color:#696969}
	.sk_sound .rk_icon div p{ color:#696969}
	.sk_sound .rk_icon div i{ border-color:#696969; background-color:#ccc; border-color:#ccc}
	
	.sk_sheji .rk_text{padding-top:30px; padding-bottom:40px}
	.sk_OS .rk_text,.royoleen .sk_OS .rk_text{padding-top:30px; padding-bottom:40px}
	
	.sk_jieku{ position:static}
	.sk_jieku .rk_text{padding-top:30px; padding-bottom:40px; margin-right:0%}
	
	
	#show_pro{ margin-top:0%}
	.royoleen #show_pro{ margin-top:15%}
	
	.sk_video{ overflow:hidden; position:relative}
	.sk_video .sk100{ width:150%; margin-left:-20%}
	.sk_video i{ width:100%; height:100%; position:absolute; text-align:center; }
	.sk_video i img{ margin:auto; width:15%; margin-bottom:15px; margin-top:9%; max-width:169px; opacity:0.3;transition: all 0.3s ease-out 0s;}
	.sk_video i img:hover{ opacity:0.6;transition: all 0.3s ease-out 0s;}
	
	.sk_video ul{ width:100%;}
	.sk_video ul li{ width:100%; float:left; position:relative}
	.sk_video ul li i img{ width:22%; margin-bottom:15px; margin-top:25%; max-width:169px;}

	.rk_shijue .sk100,.sk_sheji .sk100,.sk_jieku .sk100{ margin-left:-5%}
	#show_pro .sk100{ margin-left:-25%}
	
	.clear-b{ clear:both; float:inherit;padding-top:0;}
	.sj_por h2{ color:#000}
	.sj_por p{ color:#666}
	.cor_0{ color:#000}
	.cor_0 h2{ color:#000}
	.cor_0 p{ color:#666}
	.text-c{ font-weight:400; font-size:26px;}
	
	.design_yidong .sk100{ margin-left:-55%; font-size:400%}
	.design_yidong .rk_text,.royoleen .design_yidong .rk_text{ width:100%; padding-top:12%; margin:0;}
	
	
	.bannertext{ position:absolute;top:32%;}
	.bannertext h2{font-size:2.2em; font-weight: 300;}
	.icontext li{ margin:0 5px; margin-bottom:10px}
	
	.gp_tbpw90{ padding:30px 0px;}
	.banner-m .bannertext h2{ font-size:20px}
	
	.bannertexten p { font-size: 16px; width:90%; margin:auto}
	.banner-m .bannertexten  h2{ font-size:16px}

	
	.banner2box{ background:#fff}
	
	#t_acf .rk_text{ float:none; padding-top:25%}
	
	#waptud{ padding:40px 0px 40px 0px}
	
	#wapshop { display:block}
	
	.aC{ text-align:left}
	
	.iconclass2{ color:#9b9c9c; text-align:center}
	.iconclass2 li div{ border-color:#9b9c9c}
	.iconclass2 li{ margin-left:0; margin-right:20px;}
	.iconclass2 li>p{ font-size:14px; margin-top:3px}
	
	.cor_f{ color:#666}
	.cor_f h2{ color:#000}
	.cor_f p{ color:#666}
	
	.royoleen .royolexbox p{ width:90%; margin:auto}
	
	.royolecn .bannertext,.royoleen .bannertext{top:20%;}
}