/* ----------  public css ---------- */
body{ background-color:#fff;}
.container-fluid {max-width: 1600px;}
h1,h2,h3,h4,h5{ font-family:Microsoft YaHei,Arial,Helvetica,sans-serif;}
a, a:focus, a:visited{ outline:none;}

/* ---------- menu ---------- */
.container_wapper {width: 100%;}

.col-custom-1, .col-custom-10, .col-custom-11, .col-custom-2, .col-custom-3, .col-custom-4, .col-custom-5, .col-custom-6, .col-custom-7, .col-custom-8, .col-custom-9{float:left;min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative;}
.table-layout > .col-custom-1, .table-layout > .col-custom-10, .table-layout > .col-custom-11, .table-layout > .col-custom-2, .table-layout > .col-custom-3, .table-layout > .col-custom-4, .table-layout > .col-custom-5, .table-layout > .col-custom-6, .table-layout > .col-custom-7, .table-layout > .col-custom-8, .table-layout > .col-custom-9 {display: table-cell; float: none; table-layout: fixed; vertical-align: middle;}
.col-custom-12{min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative;}
.col-custom-1{ width:8.3333%}
.col-custom-2{ width:16.6667%}
.col-custom-3{ width:25%}
.col-custom-4{ width:33.3333%}
.col-custom-5{ width:41.6667%}
.col-custom-6{ width:50%}
.col-custom-7{ width:58.3333%}
.col-custom-8{ width:66.3337%}
.col-custom-9{ width:75%}
.col-custom-10{ width:83.3333%}
.col-custom-11{ width:91.6667%}
.col-custom-12{ width:100%}

.dis-none{ display:none;}
.dis-inline{ display:inline;}

.btn-type{padding:10px 40px; border-radius:5px; font-size:16px; line-height:20px; display:inline-block; transition:all 0.5s ease 0s;}
.btn-orange{ background-color:#FFAC1A;  color:#fff;}
.btn-orange:hover{ background-color:#ff8636; color:#fff;}

.btn-indigo{ background-color:#54b1c4; color:#fff;}
.btn-indigo:hover{ background-color:#4691a4; color:#fff;}

.btn-white{ background-color:#fff; color:#444444;}
.btn-white:hover{ background-color:#ebebeb; color:#444444;}

.btn-blue, .btn-blue:focus{ border-radius:0; padding:15px 99px 16px;font-size: 24px; border: 4px solid #19a7f8; color:#fff; font-weight:bold; outline:none;}
.btn-blue:hover{ color:#fff;}
.dynamic-bg{ position: relative; background:none; overflow:hidden;}
.dynamic-bg .front{position: relative; z-index:2;}
.dynamic-bg::before, .dynamic-bg::after{bottom: 100%; width: 100%; content: ""; height:100%; left: 0; position: absolute;  z-index:1;}
.dynamic-bg::before{ background:rgba(25, 167, 248, 0.4); transition:all 0.3s ease 0s;}
.dynamic-bg::after{ background:#19a7f8; transition:all 0.4s ease 0.2s;}
.dynamic-bg:hover::before, .dynamic-bg:hover::after{ bottom:0;}


/*  header */
#header{ padding-top:74px; position:relative; padding-bottom:0;}
#header .container-fluid{position:relative;}

#banner_menu { width: 100%; height: 74px; position:fixed; top: 0; border-radius:0; margin:0; border:0; z-index:999; background-color:#9d0d34;}
#banner_menu .nav{ position:relative; left:0; transition:all 0.5s ease 0s;}
#banner_menu ul li a , #banner_menu ul li a:focus { padding: 25px; font-size:18px; line-height:24px; color:#fff;  border-radius:0;  background-color: transparent; transition:all 0.5s ease 0s;}
#banner_menu ul li a:hover, #banner_menu ul li.link-buy a:hover{ background-color:#fff; color: #9d0d34;}
#banner_menu ul li.active a, #banner_menu ul li.active a:hover{ background-color:#fff; color: #9d0d34;}
#banner_menu ul li + li{ margin:0;}
#banner_menu .home{ padding:7px; opacity:0; position:absolute; left:0; top:0; transition:all 0.5s ease 0s; text-decoration:none;}
#banner_menu .home i{ display: block; line-height:60px; width:60px; text-align:center; color:#fff; font-size:35px;}

#banner_menu .header-phone{ position:absolute; right:15px; top:0; padding-left:50px; color:#fff; font-weight:bold; line-height:74px; font-size:30px; font-family:"PT Sans Caption",Helvetica,Arial,sans-serif; transition:all 0.5s ease 0s;}
#banner_menu .header-phone .font-icon{position:absolute; left:0; top:15px; display:block; background-color:rgba(255,255,255,0.25); border-radius:50%; width:44px; height:44px; line-height:47px; text-align:center;}
#banner_menu .header-phone:hover{ color:#19a7f8;}

#banner_menu .col-custom-4{ z-index:1;}
#banner_menu .col-custom-8{ z-index:2;}

#banner_menu.fixedtop .home{ opacity:1; }
#banner_menu.fixedtop .nav{ left:60px;}

#mobile_icon { display:none;}
#mobile_menu {top: 0; width: 200px; height: 100%;background: #fff; position: fixed;z-index:999; right:-250px; overflow: auto; -moz-box-shadow:0 0 10px 0 #888; -webkit-box-shadow:0 0 10px 0 #888; box-shadow:0 0 10px 0 #888; transition:all 0.5s ease 0s;}
#mobile_menu .ico_close{ font-size:30px; color:#ccc; position:absolute; right:15px; top:5px; line-height:40px;}
#mobile_menu .ico_close:hover{color:#ffac1a; }
#mobile_menu ul{ border-top:1px solid #eee; margin-top:50px;}
#mobile_menu ul li{ border-bottom:1px solid #eee;}
#mobile_menu ul li a { text-align: left; color:#54b1c4; border-radius:0; transition:all 0.5s ease 0s; font-size:16px;}
#mobile_menu ul li a i{ margin-right:10px;}
#mobile_menu ul li:hover a { background:#54b1c4;color: #fff;}



/* ---------- content ---------- */
.container_wapper .title{ font-size:55px; margin-bottom:30px; margin-top:0; line-height:60px; font-weight:bold;}
.container_wapper .info{font-size:20px; margin-bottom:20px; line-height:45px;}

/* banner */
.banner-animation{ background:#131218 url(../image/loading.svg) center no-repeat;}
.banner-animation a{ color: #fff; font-size: 40px; font-weight:bold;}
.banner-animation a div{ opacity:0;}
.banner-animation a img{ width:380px;}
.devrama-slider{ z-index:1;}
.slider-progress{ width:100%; position:absolute; left:0; bottom:0; height:5px;}
.slider-progress .bar{ background-color:rgba(0,0,0,0.5)}
.banner-animation .navigation{ position:absolute; bottom:10px; left:0; width:100%;}
.banner-animation .navigation .inner{ text-align:center;}
.banner-animation .navigation .nav-link { display:inline-block; width:16px; height:16px; margin:0 5px; background-color:rgba(255,255,255,0.5); border-radius:50%; cursor:pointer; overflow:hidden; text-indent:-999px;}
.banner-animation .navigation .nav-link:hover{ background-color:rgba(255,255,255,0.8)}
.banner-animation .navigation .nav-link.active{background-color:rgba(255,255,255,1);}

.banner-animation .brace{ padding-left:60px;}
.banner-animation .brace::before{ content:"{"; color:#fff; line-height:260px; font-size:200px; position:absolute; left:-40px; top:0;}

/* feature */
.freessl{ padding-top:100px; padding-bottom:80px; background:#131218 url(../image/bg_1.jpg) center top no-repeat;}
.freessl .title, .freessl .info, .freessl ol li{ color:#fff;}
.freessl ol{ margin:0 0 30px; color:#fff;}
.freessl li{ clear:both; float:left; font-size:20px; line-height:45px; border-bottom:1px solid rgba(255,255,255,0.5);}
.freessl .btn-blue{ margin-top:40px;}

/* contrast */
.contrast{padding-top:100px; padding-bottom:80px; }
.contrast .title{ color:#151515; text-align:center; margin-bottom:30px; padding-bottom:30px; position:relative;}
.contrast .title span{ display:inline-block; padding:0 30px; background-color:#fff; position:relative; z-index:1;}
.box-wrap{ margin:0 15px; overflow:hidden; position:relative;}

.contrast .title::before{ display:block; content:""; top:40px; border-color:#3e8c36; border-width:4px 4px 0; border-style:solid; bottom: 0; left: 15%; position: absolute; right: 15%; display:block;}

.box-wrap .group{ height:360px; position:relative; overflow:hidden; }
.box-wrap .group .front{ position:relative;  padding:40px 30px; text-align:center; z-index:2;}
.box-wrap .group .contrast-icon{ font-size:100px; opacity: 0.3; color:#fff; line-height:120px; margin-bottom:20px; position:relative; -webkit-transform: rotate(-360deg) scale(0.3); transform: rotate(-360deg) scale(0.5); transition: all 0.5s ease 0s;}
.box-wrap.display-type .contrast-icon{opacity: 1; transform: rotate(0deg) scale(1); -webkit-transform: rotate(0deg) scale(1);}
.box-wrap .group h4{font-size: 24px; color:#fff; line-height: 38px; font-weight:bold;}
.box-wrap .group .mask{ margin-top:10px; font-size:18px; line-height:30px; color:#fff;}
.box-wrap .group::before, .box-wrap .group::after{bottom: 100%; width: 100%; content: ""; height:100%; left: 0; position: absolute;  z-index:1;}
.box-wrap .group::before{ background:rgba(62, 140, 54, 0.7); transition:all 0.3s ease 0s;}
.box-wrap .group::after{ background:#3e8c36; transition:all 0.4s ease 0.2s;}
.box-wrap .group:hover::before, .box-wrap .group:hover::after{ bottom:0;}
.box-wrap .col-sm-4:first-child .group{ background-color:#c0d322}
.box-wrap .col-sm-4:nth-child(2) .group{ background-color:#92ba19}
.box-wrap .col-sm-4:last-child .group{ background-color:#5da13c}


/* faq */
.faq{ background-color:#0f6494; padding-top:100px; padding-bottom:80px; overflow:hidden;}
.faq .title{ color:#fff; text-align:center; margin-bottom:40px; position:relative;}
.faq .title span{ display:inline-block; padding:0 30px; background-color:#0f6494; position:relative; z-index:1;}
.faq-group{ position:relative; padding-bottom:40px;}
.faq-group::before{ display:block; content:""; top:40px; border-color:rgba(0,0,0,0.3); border-width:4px; border-style:solid; bottom: 0; left: 15%; position: absolute; right: 15%; display:block;}
.event_box_wap{ position:relative; margin:0; padding:0; list-style:none;}
.event_box_wap li + li{ margin-top:30px; }
.event_box_wap li .question{ position:relative; margin-bottom:10px; line-height:30px; font-size:18px; font-weight:bold; padding-left:40px; color:#fff;}
.event_box_wap li .question .number{ display:block; font-family:"Arial Black", Gadget, sans-serif; width:30px; height:30px; line-height:30px; background-color:#fff; text-align:center; color:#19a7f8; border-radius:50%; position:absolute; left:0; top:0;}
.event_box_wap li .answer{ padding:10px; background-color:rgba(255,255,255,0.15); font-size:16px; color:#fff;}


/* buynow */
.buynow{  padding-top:100px; padding-bottom:50px; background: url(../image/bg_2.jpg) top center no-repeat; background-size:cover; background-attachment:fixed;}
.buynow .title{ text-align:center; color:#fff;}
.buynow .info{ font-weight:bold; font-family:Microsoft YaHei,Arial,Helvetica,sans-serif; margin-bottom:10px;}
.buynow .btn-blue{ margin-top:20px; color:#fff;}
.buy-form{ font-size:18px; color:#fff; width:800px; margin: 0 auto;}
.radio-group, .checkbox-group{ line-height:30px; display:inline-block; cursor:pointer; padding-left:30px; position:relative; margin-right:10px; margin-bottom:0;}
.radio-group input, .checkbox-group input{ display:none;}
.radio-group::before{ width:24px; height:24px; border-radius:50%; border:3px solid #fff; content:""; display:block; position:absolute; left:0; top:3px;}
.checkbox-group::before{ width:24px; height:24px; border-radius:3px; border:3px solid #fff; content:""; display:block; position:absolute; left:0; top:3px;}

.radio-group.active::after{ width:12px; height:12px; border-radius:50%; content:""; display:block; position:absolute; left:6px; top:9px; background-color:#fff;}
.checkbox-group.active::after{ width:12px; height:12px; border-radius:1px; content:""; display:block; position:absolute; left:6px; top:9px; background-color:#fff;}

.form-group::before, .form-group::after{ content:""; display:table; width:100%; height:0; clear:both;}


.buy-form .form-control{ border:3px solid #fff; color:#fff; line-height:26px; padding:10px 30px;  font-size:20px; font-weight:bold; height:50px; border-radius:0; background:none;}
.form-control.error{ border-color:#ed5466;}
label.error{ font-size:14px; padding:3px 10px; line-height:20px; margin-top:5px; display:inline-block; background-color:rgba(255,255,255,0.2); color:#ed5466; border-radius:3px;}
.field-text{ position:absolute; left:25px; top:10px; line-height:30px; color:#fff; font-size:20px; font-weight:bold; opacity:0.7; transition:all 0.4s ease 0s;}
.field-text.fadeout{ top:-30px; opacity:0;}

.terms{ border:3px solid #fff; padding:15px; overflow-x:hidden; overflow-y:auto; height:200px; line-height:30px; margin-bottom:15px; text-align:left;}

/* footer */
#footer{ background-color:#151515; padding:50px 0 60px; text-align:center; color:#fff;}
#footer a{ color:#19a7f8;}
#footer p{ line-height:24px; text-align:center; font-size:16px;}
#footer span + span{ padding-left:15px;}

@media (min-width: 1900px) {
	.banner-animation a{ font-size: 60px;}
	.banner-animation a img{ width:auto;}
}

@media (min-width: 1420px) and (max-width: 1899px){
	.banner-animation a img{ width:450px;}
}

@media (min-width: 768px) and (max-width: 991px) {
	#banner_menu ul li a{ font-size:16px; padding-left:15px;padding-right:15px;}
	#banner_menu .header-phone{font-size: 20px;}
	
	.container_wapper .title{ font-size:40px; line-height:50px;}
	.container_wapper .info{ font-size:16px; line-height:36px;}
	
	.banner-animation a{ font-size: 24px;}
	.banner-animation a img{ width:300px;}
	.banner-animation .brace::before{  line-height:150px; font-size:150px; left:-20px;}
	
	.box-wrap .group{ height:300px;}
	.box-wrap .group .contrast-icon{ margin-bottom:10px;}
	.box-wrap .group .front{ padding:20px;}
	.box-wrap .group h4{line-height: 30px; font-size: 20px; margin-top:0;}
	.box-wrap .group .mask{ font-size:14px; line-height:24px;}
	
	.event_box_wap li .question{ font-size:15px; line-height: 24px; padding-left:32px;}
	.event_box_wap li .question .number{ width:24px; height:24px; line-height:24px;}
	.event_box_wap li .answer{ font-size:14px;}
	
	.buy-form{ width:640px;}
}

@media (max-width: 767px) {
	#header{ padding-top:50px;}
	#banner_menu{ height:50px;}
	#banner_menu .home{ opacity:1; padding: 5px;}
	#banner_menu .home i{line-height:40px; width:40px;}
	#banner_menu .header-phone{font-size: 16px; padding-left:40px; line-height:50px;}
	#banner_menu .header-phone .font-icon{ height: 30px; line-height: 32px; top: 10px; width: 30px;}
	
	#mobile_icon{ display:block; position:absolute; left:50px; color:#fff; top:5px; width:40px; height:40px; text-align:center;}
	#mobile_icon span, #mobile_icon::before, #mobile_icon::after{left:4px; position:absolute;  height:4px; width:32px; border-radius:2px; background-color:#fff; transition:all 0.5s ease 0s;}
	#mobile_icon span{ top:18px;}
	#mobile_icon::before{ content:""; top:8px; }
	#mobile_icon::after{ content:""; top:28px; }
	
	#banner_menu.open #mobile_icon span{ left:50%; width:0;}
	#banner_menu.open #mobile_icon::before{ transform:rotate(45deg); top: 18px;}
	#banner_menu.open #mobile_icon::after{transform:rotate(-45deg);  top: 18px;}
	
	#mobile_icon:hover, #mobile_icon:focus{ text-decoration:none;}
	
	#banner_menu .nav{ position:fixed; width:270px; left:-300px; top:50px; bottom:0; background-color:#9d0d34; transition:all 0.5s ease 0s;}
	#banner_menu.open .nav, #banner_menu.fixedtop .nav{ left:0;}
	#banner_menu .nav li{ float:inherit; clear:both; margin-bottom:3px;}
	#banner_menu ul li a, #banner_menu ul li a:focus{padding:10px 25px; font-size:16px;}
	
	.banner-animation a{ font-size: 14px; font-weight:normal}
	.banner-animation a img{ width:200px;}
	.banner-animation .navigation .nav-link{ width:10px; height:10px;}
	.banner-animation .brace{ padding-left:30px;}
	.banner-animation .brace::before{  line-height:90px; font-size:80px; left:-10px;}
	
	.btn-blue, .btn-blue:focus{ padding:10px 50px; font-size:20px; display:block; width:100%;}
	.container_wapper .title{font-size: 30px; line-height:50px;}
	.container_wapper .info{ font-size:16px; line-height:30px;}
	
	.freessl{ padding-top:40px; padding-bottom:40px;}
	.freessl .title{ text-align:center;}
	.freessl li{ font-size:16px; line-height:36px;}
	
	.contrast{ padding-top:40px; padding-bottom:40px;}
	.container_wapper .title{ padding-bottom:0;}
	.contrast .title::before{ display:none;}
	.box-wrap .group{ height:auto;}
	.box-wrap .col-sm-4 +  .col-sm-4{ margin-top:20px;}
	.box-wrap .group .contrast-icon{ opacity:1; transform:none; font-size: 60px;}
	
	.faq{ padding-top:40px; padding-bottom:40px;}
	.faq .title{ margin-bottom:20px;}
	.faq-group::before{ display:none;}
	
	.buynow{padding-top:40px; padding-bottom:40px;}
	.buy-form{ width:100%; margin:0;}
	.radio-group, .checkbox-group{ font-size:16px;}
	.radio-group + .radio-group{ margin-top:10px;}
	.buy-form .col-sm-6 + .col-sm-6{margin-top:10px;}
	.terms{ font-size:16px;}

	#footer .xs-block{  display:block;}
	#footer span + span{ padding:0;}
}

@media (max-width: 479px) {
	.banner-animation a img{ width:120px;}
}