:root{
	--red: #AE4443;
	--brown: #7D5032;
	--yellow: #FFCD2A;
	--yellow-light: #FBF5B2;
	--f-c: "colossalis";
	--f-a: "aurora";
	
}
html, body {font-size:16px;font-family: Verdana,Geneva,sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family:var(--f-a);font-weight:normal;}

/* .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after, .hamburger.is-active .hamburger-inner::after {background-color:#FFF;} */
.boundary {max-width:1200px;width:96%;}

.top .t-hotline { background-color:var(--yellow-light); color:var(--brown); height:50px; }
.top .t-hotline .boundary {height:100%; line-height:50px;}
.top .t-hotline a {color:inherit; background-color:var(--yellow); padding: 0 10px; line-height:34px; font-family: var(--f-c); border:2px solid var(--brown); border-radius:10px; display:inline-block; box-sizing:border-box;}
.top .t-hotline a:hover {background-color:var(--red); color:#FFF;}
.top .t-hotline a i {margin-right:10px; font-size:1.5em;}
.top .t-menu {background: url(../images/gradiant-bg.jpg) top left no-repeat; background-size:100% 100%; height:50px;border:2px solid var(--yellow); border-left:unset; border-right:unset; line-height:50px; }
.top .t-menu .boundary { position:relative; }
.top .tm-content { background-color: var(--yellow-light); margin:0; padding:0px; position:absolute; top:calc(100% + 2px); left:0; width:100%; height:auto; z-index:999; display:none; box-sizing:border-box; border:2px solid var(--yellow); list-style-type:none; }
.top .tm-content.active {display:block;}
.top .tm-content li {padding-left:10px;color:var(--red);}
.top .tm-content li.active {background-color:var(--yellow); }
.top .tm-content li a {font-family:var(--f-c); color:inherit; text-transform:uppercase; }
.top .tm-logo {position:absolute;right:0;top:-25px;height:100px; z-index:1000;}
.top .tm-logo img {height:100%;width:auto;}

.banner {position:relative;width:100%;height:auto;}
.banner:before{content:"";display:block;width:100%;}
.banner:before, .banner #banners .square-image:before {padding-top:35%;}
.banner #banners {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.banner .owl-carousel .owl-prev, .banner .owl-carousel .owl-next {position:absolute; top:50%; left:0; font-size:3em!important; color:#FFF!important;transform:translateY(-60%); }
.banner .owl-carousel .owl-next {left:unset;right:0;}

.topic-title { font-size:1.8em;color:#FFF; background:var(--red) url(../images/title-bg.jpg) top left no-repeat; background-size:100% 100%; text-transform:uppercase; height:47px; line-height:47px; padding:0 40px; display:inline-block; font-weight:normal; position:relative; }
.topic-title:before, .topic-title:after { content:""; display:block; position:absolute; bottom:calc(100% + 1px); left:0; background-color:var(--red); width:100%; height:2px; }
.topic-title:after {bottom:-4px;}
.topic-title a {color:inherit;}

.more-bt {background-color:var(--red);color:#FFF;padding:3px 10px;border-radius:5px;display:inline-block;}
.more-bt:hover {background-color:var(--yellow);color:var(--red);}

.introduction {margin:4.8em 0; }
.introduction .boundary { padding:1em 1em 2em; border:5px solid var(--red); background: var(--yellow-light) url(../images/pattern-bg.png) top left; }
.introduction .boundary img {width:100%; height:auto;}
.introduction .boundary .i-content { color:var(--red); font-size:1.5em; margin-bottom:10px; }
.introduction .boundary .i-content img {width:70%; height:auto; margin:0 auto 1em;display:block;}

.production {background-color:var(--yellow); box-shadow:0 0 5px #333; padding-top:1em; }
.production .boundary { text-align:center; }

.products {background-color:var(--yellow); padding: 1em 0; box-shadow: 0 0 5px #333; }
.products .boundary {text-align:center;}
.products .product {padding:1.5em 0;}
.products .product:hover .p-image{border-color:#F00;}
.products .p-image { background-color:var(--yellow-light); border:5px solid var(--red); position:relative; width:90%; height:auto; box-sizing:border-box; margin:4em auto 0; }
.products .p-image:before {content:""; padding-top:100%; display:block;}
.products .p-image .square-image { position:absolute; bottom:0; left: -10%; width:120%;}
.products .p-info h3 { font-family:var(--f-c); color:var(--brown); margin-bottom:0.5em; font-weight:normal; font-size:1.5em; }
.products .p-info h3 a {color:inherit;}
.products .p-info h3:hover a{color:var(--red);}
.products .p-info .p-bt { font-size:0.9em; color:var(--red); background-color:var(--yellow-light); display:inline-block; border-radius:5px; padding: 3px 10px; }
.products .p-info .p-bt:hover {background-color:var(--red); color:#FFF;}

.news {margin:4em 0;}
.news .boundary {text-align:center;}
.news .n-item .square-image { border:5px solid var(--red); width:90%; margin: 0 auto; box-sizing:border-box; }
.news .n-item .square-image:before {padding-top:52.3%;}
.news .n-item .n-title { color:#000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-top:10px; }
.news .n-item:hover .square-image {border-color:#F00;}
.news .n-item:hover .n-title {color:var(--red);}
.news .owl-carousel {width:96%;margin:0 auto;}
.news .owl-carousel .owl-prev, .news .owl-carousel .owl-next {position:absolute; top:20%; left: -10px; font-size:4em!important; color:var(--red)!important;}
.news .owl-carousel .owl-next { left:unset; right:-10px; }

.breadcrumb li a:hover {color:var(--red);}

.main-content .boundary {text-align:left;width:96%;max-width:1000px;box-shadow:0 0 3px #333;margin-top:10px;padding:0;}
.main-content .breadcrumb {width:96%;max-width:1000px;text-align:left;margin:30px auto 0;}
.main-content .mc-title {background-color:var(--red);color:#FFF;padding:10px;line-height:1.2em;font-size:1.5em;margin:0 0 30px;}
.main-content .mc-content {padding:0 10px;margin-bottom:20px;}
.main-content .mc-content img {max-width:100%;height:auto;}
.main-content .mc-content ul, .main-content .mc-content ol {margin:0;padding:0;list-style-position:inside;}
.main-content .mc-content h1, .main-content .mc-content h2 {color:var(--red);}
.main-content .mc-content h3 {color:var(--red-light);}
.main-content .mc-content blockquote {text-align:left;background-color:var(--red-ex-light);border:1px solid var(--red);padding:10px;width:auto;max-width:96%;margin:1em 0;}
.main-content hr {border:0;height:0.5px;background-color:#000;}
.main-content .mc-others {padding:0 10px 20px;border-top:1px solid #DDD;margin-top:50px;}
.main-content .mc-others h4 {margin:1em 0;}
.main-content .mc-others ul {list-style-position:inside;padding:0;margin:0;}
.main-content .mc-others ul li {margin-bottom:10px;}
.main-content .mc-others ul li a {color:#000;}
.main-content .mc-others ul li a:hover {color:var(--red);}

.footer {background-color:var(--yellow-light); padding-top:2em; color:var(--red);margin-top:60px;}
.footer a {color:inherit;}
.footer a:hover {color:#333;}
.footer .boundary {padding-bottom:1em;}
.footer h2 {font-family:var(--f-c);  text-transform:uppercase; font-weight:normal;}
.footer .f-logo h2 {margin-top:0.5em; }
.footer .f-contact {text-align:left;width:96%;margin:0 auto; line-height:1.5em;}
.footer .f-ocop {margin:1em auto;}
.footer .f-menu {padding:0 2%;}
.footer .f-menu .col { text-align:left; }
.footer .f-menu ul {list-style-type:none; margin:0; padding:0;}
.footer .f-menu ul li {line-height:1.8em;}
.footer .f-menu ul li a {display:inline-block;text-transform:lowercase;}
.footer .f-menu ul li a:first-letter {text-transform:uppercase;}
.footer .f-copy { background:var(--red) url(../images/gradiant-bg.jpg) top left no-repeat; background-size:100% 100%; color:#FFF; font-size:0.9em; padding:5px 2%;}
.footer .f-copy a {color:inherit;}

@media (min-width: 576px){
	.banner .owl-carousel .owl-prev, .banner .owl-carousel .owl-next {font-size:5em!important;}
	
	.news .n-item .square-image { width:98%; }
	.news .owl-carousel .owl-prev { left:-25px; }
	.news .owl-carousel .owl-next { right:-25px; }
}

@media (min-width:768px){
	.introduction .boundary .col.min-hide {display:none!important;}
	
	
	.news {margin:5em 0;}
	
	.footer > .boundary > .table > .col:first-child {text-align:left;}
	.footer .f-logo img {display:inline-block; vertical-align:middle; }
	.footer .f-logo h2 {display:inline-block; text-align:left; margin-left:20px; vertical-align:middle; }
	.footer .f-contact {margin-top:2em;}
}

@media (min-width:992px){
		
	.top .t-hotline a, .top .tm-content {margin-left:2em;}
	.top .hamburger {display:none;}
	.top .tm-content {position:relative; display:inline-block!important; top:unset;left:unset; width:auto; border:unset; background:unset; }
	.top .tm-content li {display:inline-block; padding:0 10px; color:#FFF; font-size:1.1em; height:50px; line-height:50px; }
	.top .tm-content li:hover {background-color:var(--yellow); }
	
	.introduction .boundary .col.min-hide {display:table-cell!important;}
	.introduction .boundary img {margin-top:2em; max-width:300px;}
	.introduction .boundary .i-content {padding:10px;}
	.introduction .boundary .i-content img  {display:none;}
	
	.news {margin:6em 0;}
	
	.products {padding-bottom:0;}
	.products .product {padding:0;}
	.products .p-image { width:30%; display:inline-block; margin:2em 0 -1em;}
	.products .p-info {display:inline-block; width:70%; text-align:left; padding: 0 20px; box-sizing:border-box;}
	.products .p-image {vertical-align:bottom;}
	.products .p-info {vertical-align:middle;margin-bottom:10px;}
	
	.main-content .mc-content {padding:0 20px;}
	.main-content .mc-others {padding:0 20px 30px;}
	
	.footer .f-logo {margin-bottom:1em;}
	.footer .f-logo img {width:25%;height:auto;}
	.footer .f-logo h2 {margin:0 0 0 20px;}
	.footer .f-contact {margin-top:0;}
	.footer .f-menu {padding-top:1.5em;}
}

@media (min-width:1200px){
	.top .t-hotline a, .top .tm-content {margin-left:4em;}
	.top .tm-logo {height:134px; top:-42px; }
	
	.products .product {padding:0;}
	.products .p-image { width:40%;margin-top:3em;}
	.products .p-info {width:60%;}
	
	.footer .f-menu {padding-top:2em;}
}