/* ----------  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;}
a:hover{ text-decoration:none;}

/* ---------- menu ---------- */
.container_wapper {width: 100%;}
.clear{ clear:both; display:block; height:0; float:none;}

.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;}

.btn-reset{ border-radius:0; padding:15px 39px 16px; margin-left:15px; font-size: 20px; border: 4px solid rgba(255,255,255,0.6); background:none; color:#fff; font-weight:bold; outline:none; transition:all 0.4s ease 0.2s;}

.button {padding:5px 25px; font-size:18px; display:inline-block;  line-height:24px; background-color:#19a7f8; color:#fff;  transition:all 0.5s ease 0s; border-radius:5px;}
.button:hover{background-color:#54b1c4;  color:#fff;}

.button_edit{padding:2px 10px 2px 25px; font-weight:bold; display:inline-block; line-height:20px; color:#9d0d34; border-radius:5px; background-color:rgba(255,255,255,0.6);  font-weight:normal; font-size:12px; text-shadow:none; position:relative; margin-top:20px;}
.button_edit::before{ position:absolute; font-size:12px; left:8px; top:3px; line-height:20px;}
.button_edit:hover{ color:#fff; background-color:#333;}


/*  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; 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 a{ text-decoration:none;}
#banner_menu .header-phone .phone{color:#fff;}
#banner_menu .header-phone .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 .header-phon .button_edit{ margin-top:0;}


#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(../images/loading.svg) center center no-repeat;}
.devrama-slider a{ background-repeat:no-repeat; background-position:center center; background-size:cover;}
.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:30px; 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;}

.banner-animation a h3{ margin:0 100px; font-size:40px; font-weight:bold; white-space:nowrap; padding:10px; background-color:rgba(0,0,0,0.3)}
.banner-animation a p{ margin:0 100px; font-size:22px; line-height:40px; padding:10px; background-color:rgba(0,0,0,0.3); max-width:50%;}

/* feature */
.freessl{ padding-top:100px; padding-bottom:80px; background:#131218 url(../images/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;}

.htmledit{ clear:both; overflow:hidden; line-height:150%; }
.htmledit table, .htmledit td,  .htmledit th{ border-collapse:inherit;}
.htmledit ul, .htmledit ol{list-style:inside; margin-left:24px;}
.htmledit ol{ list-style-type:decimal;}
.htmledit ul{ list-style-type:disc;}

.detail .htmledit p{ line-height:180%; margin-bottom:5px;}
.default_p{ line-height:30px; margin-bottom:30px; font-size:18px;}
.default_h4{ clear:both; line-height:20px; margin-bottom:10px; color: #fff; font-size:20px;}
.default_strong{font-size:13px; padding:0 5px;}
.freessl .htmledit{ min-height:400px; color:#fff;}

/* 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:10px; position: absolute; right:10px; 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:0 40px 40px; color:#fff;}
.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: 0; position: absolute; right: 0; 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;}

.detailtitle{ padding:5px 15px; background-color:#19a7f8; color:##19a7f8; border:3px solid rgba(255,255,255,0.3); margin-bottom:15px;line-height:24px; position:relative}
.detailtitle h4{ font-size:20px; font-weight:bold; margin:0; line-height:40px;}
.detailtitle .info{ position:absolute; line-height:30px; right:15px; top:10px; font-size:14px;}

/* ----------  product css  ---------- */
.productlist ul{ margin:-10px; padding:0; list-style:none;}
.productlist li{ width:25%; float:left; padding:10px; box-sizing:border-box;}
.productlist .item{cursor:pointer; border:5px solid #3e8c36; background-color:#3e8c36; -moz-box-shadow:0 0 5px #999;-webkit-box-shadow:0 0 5px #999;-khtml-box-shadow:0 0 5px #999;box-shadow:0 0 5px #999;}
.productlist li p{ display:none;}
.productlist li .photo {  width: 100%;  height: 0; padding-bottom: 100%;  position: relative; overflow: hidden; margin-bottom: 5px;}
.productlist li .photo .image{width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
.productlist li .photo .image span{ display:inline-block; vertical-align:middle; height:100%;}
.productlist li .photo .image img{max-width:100%; max-height:100%; vertical-align:middle;} 
.productlist li .photo .mask{width:100%; height:100%;  text-align:center; background:rgba(0,0,0,0.5);  overflow:hidden; position:absolute; left:0; top:0; z-index:2; opacity: 0;  transition:opacity 0.5s ease 0s;}
.productlist li .photo .mask a{color:#fff; font-size:50px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.productlist li .photo:hover .mask{ opacity:1;}
.productlist li .photo table {clear:both;width:100%;height:100%;table-layout:fixed;position:relative; z-index:1;}
.productlist li .photo table td{margin:0; padding:0;text-align:center;vertical-align:middle;width:100%;height:100%;}
.productlist li .photo table td img{max-width:100%; max-height:100%; }
.productlist li .productname{ line-height:25px; text-align:center; color:#fff; display:block; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;  font-weight:bold; transition:all 0.5s ease 0s;}
.productlist li .productname:hover{ color:#fff; background-color:#1f461b;}

.contrast .button_edit{ background-color:#999; color:#fff;}

/* ----------  popwin ----------  */
.popmask{ position:absolute;background:rgba(0,0,0,0.3);border:none;height: 100%;left: 0; margin: 0;padding: 0;position: fixed;top: 0;width: 100%;z-index:3000; display:none;}
.popwin{left: 50%; margin-left:-410px; padding:10px;position: fixed; top: 50%;z-index:3001; width:800px;background:rgba(0,0,0,0.5); display:none;}
.popwin .hide_box{background-color:#f8f8f8; position:relative; border:1px solid #fff;}
.popwin .hide_box h3{ color:#fff; background:#9d0d34; border-bottom:#eee 5px solid; margin:0 0 10px;font-size:20px; line-height:30px;padding: 2px 20px 2px 10px;}
.hide_box .closebr{display: block; font-size:15px; color:#f0f0f0; height: 16px; line-height:16px; overflow: hidden;position: absolute;right:10px;top:10px;}
.hide_box .closebr:hover{ color:#fff;}

#productdetail{margin-top:-180px;}
#productdetail .popcontent{ clear:both; padding:15px 15px 15px 350px; position:relative; min-height:340px; }
.popcontent .photo{width:300px;height:300px; border:5px solid #eee; position:absolute; left:15px; top:15px; overflow:hidden; background-color:#fff;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;-khtml-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc;}
.popcontent .photo table {clear:both;width:100%;height:100%;table-layout:fixed;}
.popcontent .photo table td{margin:0; padding:0;text-align:center;vertical-align:middle;width:100%;height:100%;}
.popcontent .photo table td img{max-width:100%; max-height:100%;}
.popcontent .productname{line-height:20x; display:block; color:#19a7f8; font-size:20px; }
.popcontent p{ line-height:24px;  padding:10px 0 20px 0; color:#553c21;}


/* buynow */
.buynow{  padding-top:100px; padding-bottom:50px; background: url(../images/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{ color:#fff;}

.buy-form{ font-size:18px; color:#fff; margin-top:30px;}
.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;}

.buynow .htmledit{ color:#fff;}

.googlemap{ height:430px;  width:260px; position:absolute; left:0; top:0;}
.googlemap iframe{ margin:0; padding:0; overflow:hidden;}
#map_canvas{ width:260px; height:400px;}
.maplink{line-height:30px; transition:all 0.5s ease 0s; background-color:rgba(255,255,255,0.8); display:block; text-align:center; font-weight:bold; color:#333;}
.maplink:hover{background-color:#19a7f8; color:#fff;}
.from_post{ padding-left:300px; position:relative; }


.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;}

.from_post ul{ list-style:none; padding:0; margin:0;}
.from_post li {clear: both;  margin-bottom: 20px; float:inherit; margin-left:-15px; margin-right:-15px;}
.from_post li::after{ clear:both; content:""; display:block; float:inherit; }
.from_post .check{ display:inline-block; margin-top:5px; background-color:rgba(0,0,0,0.5); padding:0 10px;}

.buy-form .form-control.terms{ overflow-x:hidden; overflow-y:auto; height:200px; line-height:30px; text-align:left;}

/* footer */
#footer{ background-color:#151515; padding:30px 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;}

.bottomlink{ padding:10px 0 5px 0;}
.bottomlink ul{padding:0 30px; position:relative; left:50%; float:left; list-style:none; margin:0}
.bottomlink li{ float:left; position:relative; margin-right:15px; padding-right:15px; height:16px; margin-bottom:5px; border-right:1px solid #999; right:50%;}
.bottomlink li:last-child{ border:0; padding-right:0; margin-right:0;}
.bottomlink li a{ line-height:14px; padding-bottom:1px; display:inline-block; border-bottom:1px dotted #19a7f8; color:#19a7f8;}
.bottomlink li a:hover{color:#fff; border-color:#fff;}

.copyright{ color:#ccc; line-height:16px; padding:5px 30px; position:relative; text-align:left;}

.copyright .sharelink{ position:absolute; color:#555; right:30px; top:5px; height:16px}
.copyright .sharelink h4{ display:inline-block; line-height:16px; float:left; font-size:14px; margin:0;}
.copyright .sharelink li{ float:left; margin-left:10px; padding-left:22px; background-image:url(../images/shareicon_bg.gif); background-repeat:no-repeat; }
.copyright .sharelink li.icon1{ background-position:0 0;}
.copyright .sharelink li.icon2{ background-position:0 -16px;}
.copyright .sharelink li.icon3{ background-position:0 -32px;}


@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;}
	.btn-blue, .btn-blue:focus{ padding-left:30px; padding-right:30px;}
	
	.productlist li{ width:50%;}
}

@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 .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;}
	
	
	.banner-animation a h3{font-size: 16px; margin:0 10px;}
	.banner-animation a p{font-size: 14px; margin:0 10px; max-width: 60%; line-height:24px;}
	
	.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{ padding-left:20px; padding-right: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;}
	
	.detailtitle .info{ position:inherit; right:auto; top:auto; margin-top:5px;}
	
	/* ----------  popwin ----------  */
	.popwin{margin-left:-40%; top:50px; width:80%; box-sizing: border-box;}
	#productdetail{margin-top:0;}
	#productdetail .popcontent{ padding:15px; position:inherit; height:350px; overflow-y:auto;}
	.popcontent .photo{position: inherit; left:auto; top:auto; width:100%; height:auto; border:0; margin-bottom:10px;}
	.popcontent .brtools{ padding-bottom:20px;}
	
	.googlemap{ position:relative; left:auto; top:auto; width:auto; margin-bottom:30px;}
	.from_post{ padding: 20px 0 0 0;}
	.btn-reset{ width:100%; margin:15px 0 0 0; padding:10px 50px; font-size:20px;}
	
	.bottomlink{ display:none;}
	.copyright{padding:5px 10px; text-align:center; line-height:24px;}
	.copyright .sharelink, .copyright .design{ display:none;}
}

@media (max-width: 480px) {
	.productlist li{ width:100%; float:inherit;}
}