html, body{width:100%; height:100%; min-width:auto;}
body{background-color:#fff; font-family:'Microsoft Yahei';}
body.landing{overflow:hidden;}
.hide{display:none !important;}

/* RESTRICTED PAGE */
.restricted-wrap{display:none; position:relative; width:100%; height:100%; background:#1a1a1a; padding:20px; font-size:18px; color:#ccc; text-align:center; line-height:29px; box-sizing:border-box;}
.restricted-wrap.show{display:table;}
.restricted-content{display:table-cell; vertical-align:middle;}
.restricted-content img{display:block; margin:0 auto; width:40%; margin-bottom:30px;}
.restricted-content img.mobile-logo{width:85%; margin-bottom:50px;}
.restricted-content h3{margin-bottom:6px; color:#fdd367;}
.restricted-content p{color:#fff;}
.restricted-content span{font-size:16px;}
/* END: RESTRICTED PAGE */

/* LANDING */
.landing-wrap{position:fixed; top:0; width:100%; height:100%; background:#22211c; overflow:hidden; z-index:-1;}
.landing-wrap.loaded{z-index:1001;}
.landing-wrap .introduce{position:absolute; bottom:22%; left:0; width:400px; height:210px; padding-left:140px; color:#b3b3b3; font-size:18px; letter-spacing:2px;}
.landing-wrap .introduce .yellow-bar{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto 0; width:90px; height:0; background:#fdd367; -webkit-animation:introYellowBar 0.3s linear 0.2s forwards; -moz-animation:introYellowBar 0.3s linear 0.2s forwards; animation:introYellowBar 0.3s linear 0.2s forwards;}
.landing-wrap .introduce p{width:0; height:32px; color:#fff; font-size:28px; line-height:29px; overflow:hidden; -webkit-animation:introTitle 0.5s linear 0.4s forwards; -moz-animation:introTitle 0.5s linear 0.4s forwards; animation:introTitle 0.5s linear 0.4s forwards;}
.landing-wrap .introduce img{width:0; display:block; height:80px; margin:15px 0px 16px -6px; -webkit-animation:introLogo 0.3s linear 0.8s forwards; -moz-animation:introLogo 0.3s linear 0.8s forwards; animation:introLogo 0.3s linear 0.8s forwards;}
.landing-wrap .introduce span{display:block; width:0; height:27px; overflow:hidden; -webkit-animation:introSubtitle 0.3s linear 1.2s forwards; -moz-animation:introSubtitle 0.3s linear 1.2s forwards; animation:introSubtitle 0.3s linear 1.2s forwards;}
.landing-wrap .introduce label{display:block; width:0; height:22px; color:#fff; overflow:hidden; -webkit-animation:introTitle 0.4s linear 0.4s forwards; -moz-animation:introTitle 0.4s linear 0.4s forwards; animation:introTitle 0.4s linear 0.4s forwards; letter-spacing:0; font-size:14px;}
.landing-wrap .introduce label:last-of-type{color:#b3b3b3; -webkit-animation:introSubtitle 0.5s linear 1.2s forwards; -moz-animation:introSubtitle 0.5s linear 1.2s forwards; animation:introSubtitle 0.5s linear 1.2s forwards;}

.landing-wrap .enter-button{position:absolute; left:0; right:0; bottom:-60px; width:240px; height:48px; color:#fff; font-size:18px; text-align:center; line-height:48px; font-weight:bold; margin:25px auto 0; overflow:hidden; cursor:pointer; background-color:#333333; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; -webkit-animation:landingEnter 0.3s linear 1.4s forwards; -moz-animation:landingEnter 0.3s linear 1.4s forwards; animation:landingEnter 0.3s linear 1.4s forwards;}
.landing-wrap .enter-button div{position:absolute; background-color:#ffffff; transform:matrix(1, 0, 0, 1, 0, 0); -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.landing-wrap .enter-button .bm-left{width:2px; height:100%; top:0; left:0;}
.landing-wrap .enter-button .bm-top{ width:100%; height:2px; top:0; left:0;}
.landing-wrap .enter-button .bm-right{width:2px; height:100%; top:0; right:0;}
.landing-wrap .enter-button .bm-bottom{width:100%; height:2px; bottom:0; left:0;}
.landing-wrap .enter-button:hover{background-color:rgba(255,255,255,0.2);}
.landing-wrap .enter-button:hover .bm-left{transform: translate(0%, 100%) matrix(1, 0, 0, 1, 0, 0);}
.landing-wrap .enter-button:hover .bm-top{transform: translate(-100%, 0%) matrix(1, 0, 0, 1, 0, 0);}
.landing-wrap .enter-button:hover .bm-right{transform: translate(0%, -100%) matrix(1, 0, 0, 1, 0, 0);}
.landing-wrap .enter-button:hover .bm-bottom{transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);}

.p-top_mvLink{position:absolute; top:0; left:0; bottom:auto; right:auto; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0);}
.p-top_bg_mv,.p-top_mvLink{margin-top:-45px;}
/* END: LANDING */

.content-wrap{background-color:#fff; margin:0 auto; min-width:1300px; min-height:100%; position:absolute; top:0; left:0; width:100%; height:100%; z-index:30; visibility:visible; clip-path:polygon(55% 0%, 45% 100%, 45% 100%, 55% 0%); -webkit-transition:all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition:all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1); transition:all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);}
.content-wrap.loaded{clip-path:polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);}
.header{width:100%; height:95px; background-color:#fff; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;} 
.header.fixed{position:fixed; top:0; background-color:#1a1a1a; z-index:9999;}
.header .header-top{max-width:1300px; margin:0 auto; border-bottom:1px solid #000;}
.header img{margin:16px 0 0 20px;}
.header .logo{position:relative; float:left; display:inline; margin:2px 0 0 17px; cursor:pointer;}
.header .logo a{position:absolute; width:100%; height:100%;}
.content{position:relative; width:1300px; padding:20px 0; margin:0 auto;}
.content.fixed{margin-top:208px;}

.lang-section{height:95px; display:flex; align-items:center;}
.lang-section a{font-size:14px; color:#000; margin-right:20px;}
.header.fixed .lang-section a{color:#fff;}

.search-wrap{width:223px; height:31px; display:flex; align-items:center; background:url(../images/search_bar.png) center no-repeat; background-size:contain; margin:33px 20px 0 0;}
.search-wrap input[type="text"]{width:171px; padding:4px 10px; background:none; border:none; border-radius:0; color:#888;}
.search-wrap input[type="text"]::-webkit-input-placeholder{color:#999;}
.search-wrap input[type="text"]::-moz-placeholder{color:#999;}
.search-wrap .search-arrow{width:38px; height:31px;}

.search-null{display:none; margin:20px 0 0 25px; font-size:16px;}
.search-null p{padding-left:20px; margin-bottom:20px; line-height:24px;}
.search-null .title{padding-left:15px; color:#d8b548; border-left:5px solid #d8b548;}
.search-null span{font-weight:bold;}

.color-filter{position:relative; margin-bottom:15px; border-top:2px solid #1a1a1a; font-size:15px;}
.color-filter .filter-wrap{position:relative;}
.color-filter .filter-wrap .color-title{position:absolute; top:-15px; left:70px; background-color:#fff; color:#d8b548; padding:0 20px; font-size:18px;}
.color-filter .filter-wrap > ul{padding-left:147px; margin-top:1px; padding-bottom:1px; border-bottom:2px solid #1a1a1a;}
.color-filter .filter-wrap > ul li{float:left; display:inline; width:100px; height:49px; margin-left:5px; line-height:49px; text-align:center; cursor:pointer; color:#1a1a1a; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.color-filter .filter-wrap > ul li:first-of-type{margin-left:0;}
.color-filter .filter-wrap > ul li:hover,.color-filter .filter-wrap > ul li.current{background:#d8b548; color:#fff;}
.color-filter .filter-wrap > ul li.recommend{background-image:url(../images/hot.gif); background-repeat:no-repeat; background-position:70px 6px; -webkit-animation:recommendMenu 2s linear infinite;}
.color-filter .filter-wrap > ul li.recommend:hover,.color-filter .filter-wrap > ul li.recommend.current{background-color:transparent; color:#d8b548;}

.color-drop{background:#333; width:100%; max-height:130px; margin-top:-2px; overflow:hidden;}
.color-drop ul{display:none; -webkit-animation:colorSubmenu 0.3s linear forwards; height:0; overflow:hidden;}
.color-drop ul.current{display:block;}
.color-drop ul li{float:left; display:inline; width:130px; padding:32px 0 28px; text-align:center; color:#b3b3b3; border-bottom:4px solid #333; cursor:pointer; -webkit-transition:border 0.3s; -moz-transition:border 0.3s; transition:border 0.3s;}
.color-drop ul.four-col li{width:325px;}
.color-drop ul.six-col li{width:216px;}
.color-drop ul.seven-col li{width:185px;}
.color-drop ul.eight-col li{width:162px;}
.color-drop li p{border-right:1px dashed #888; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.color-drop li.last p{border-right:none;}
.color-drop li img{display:block; position:relative; top:0; margin:0 auto 8px; -webkit-transition:top 0.2s; -moz-transition:top 0.2s; transition:top 0.2s;}
.color-drop li span{position:relative; top:0; -webkit-transition:top 0.2s; -moz-transition:top 0.2s; transition:top 0.2s;}
.color-drop li:hover,.color-drop li.current{color:#fff; border-bottom:4px solid #d8b548;}
.color-drop li:hover img,.color-drop li.current img{top:-3px;}
.color-drop li:hover span,.color-drop li.current span{top:-3px;}


.category-selection{position:relative; display:flex; align-items:center; justify-content:center; padding:0 5px; margin-bottom:40px;}
.category-selection:before{content:''; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background:#000; width:1px; height:100%;}
.category-selection > a{width:290px; height:50px; line-height:49px; margin:0 25px; background:url(../images/btn_category_normal.png) no-repeat center; background-size:contain; color:#000; text-align:center; font-size:18px; transition:all 0.3s; cursor:pointer;}
.category-selection > a:hover, .category-selection > a.current{background-image:url(../images/btn_category_hover.png); color:#fff;}

.loading-spinner{display:none; position:fixed; top:0; left:50%; width:1300px; height:100%; margin:95px 0 0 -650px; background:#fff url(../images/loading.gif) no-repeat center center; z-index:8888; opacity:0.75;}

.template-showcase[data-showcase="web"]{display:flex; align-items:center; flex-wrap:wrap; margin:0 auto;}
.template-showcase[data-showcase="web"] li{position:relative; width:18%; margin:0 13px 30px; overflow:hidden; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.template-showcase[data-showcase="web"] li.even-col{background-image:url(../images/bg_gold.png);}
.template-showcase[data-showcase="web"] li .thumbnail{position:relative; width:100%; margin:0 auto; border-radius:4px; overflow:hidden;}
.template-showcase[data-showcase="web"] li .thumbnail img{display:block; width:100%; height:100%; -webkit-transition:transform 0.2s; -moz-transition:transform 0.2s; transition:transform 0.2s;}
.template-showcase[data-showcase="web"] li:hover .thumbnail img{-webkit-transform:scale(1.1); -moz-transform:scale(1.1); transform:scale(1.1);}
.template-showcase[data-showcase="web"] .details-wrap{position:relative; margin:5px auto 0; color:#000; font-size:13px; text-align:center;}
.template-showcase[data-showcase="web"] .details-wrap img{position:absolute; top:-22px; left:10px; z-index:1000;}
.template-showcase[data-showcase="web"] .details-wrap h4{position:absolute; top:47px; left:19px; color:#222; font-size:14px; font-weight:normal;}
.template-showcase[data-showcase="web"] .details-wrap span{display:block; color:#999;}
.template-showcase[data-showcase="web"] .details-wrap h3{margin-bottom:8px; font-size:15px; font-weight:normal;}
.template-showcase[data-showcase="web"] .details-wrap .theme-tags a{cursor:pointer;}
.template-showcase[data-showcase="web"] .details-wrap .theme-tags a:hover{color:#d8b548;}

.template-showcase[data-showcase="web"] li:hover .hover-details{opacity:1;}
.template-showcase[data-showcase="web"] li .hover-details{opacity:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; font-size:14px; background:rgba(26,26,26,0.75); z-index:999; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.template-showcase[data-showcase="web"] li .hover-details a{float:left; display:inline; width:50px; height:50px; background:url(../images/icon_link.png) no-repeat; cursor:pointer;}
.template-showcase[data-showcase="web"] li .hover-details a:hover{background-image:url(../images/icon_link_hover.png);}
.template-showcase[data-showcase="web"] li .hover-details a.preview{background-image:url(../images/icon_zoom.png);}
.template-showcase[data-showcase="web"] li .hover-details a.preview:hover{background-image:url(../images/icon_zoom_hover.png);}
.template-showcase[data-showcase="web"] li .hover-details a:not(:last-of-type){margin-right:15px;}

.preview-wrap{position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:none;}
.preview-wrap .preview-overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:#1a1a1a; opacity:0.75;}
.preview-wrap .preview-img{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; border:10px solid #000; border-radius:8px; min-width:20%; max-width:80%; max-height:90%;}
.preview-wrap .preview-close{width:46px; height:46px; background:url(../images/icon_close.png) no-repeat;}
.preview-wrap .button, .preview-wrap .preview-content i{display:none;}

.section-wrap{display:none;}
.section-wrap.show{display:block;}
.mobile-wrap{padding:0 20px;}
.mobile-wrap .mobile-category{display:flex; justify-content:center; align-items:center; margin-bottom:20px;}
.mobile-wrap .mobile-category a{width:130px; height:48px; background:url(../images/btn_subcategory_normal.png) no-repeat center; background-size:contain; margin:0 15px; font-size:16px; line-height:43px; text-align:center; color:#000; cursor:pointer;}
.mobile-wrap .mobile-category a.current{background-image:url(../images/btn_subcategory_hover.png); color:#ffd540;}
.langEn .mobile-wrap .mobile-category a{width:160px; height:48px; background:url(../images/btn_subcategory_long_normal.png) no-repeat center; background-size:contain; margin:0 15px; font-size:14px; line-height:43px; text-align:center; color:#000; cursor:pointer;}
.langEn .mobile-wrap .mobile-category a.current{background-image:url(../images/btn_subcategory_long_hover.png); color:#ffd540;}
.mobile-wrap > p{margin-bottom:15px;}
.mobile-wrap > p > img{height:35px;}
.mobile-wrap .template-slider{margin-bottom:40px; padding:0 25px;}
.mobile-wrap .template-slider .slick-track{margin-left:0;}
.mobile-wrap .template-slider .slick-slide{position:relative; margin:0 20px;}
.mobile-wrap .template-slider .labelMark{position:absolute; bottom:50px; right:17px; width:45%; max-width:100px; height:75px; background:url(../images/label_recommend.png) no-repeat right bottom; background-size:contain; z-index:888;}
.langEn .mobile-wrap .template-slider .labelMark{position:absolute; bottom:50px; right:17px; width:45%; max-width:100px; height:75px; background:url(../images/label_recommend_en.png) no-repeat right bottom; background-size:contain; z-index:888;}
.mobile-wrap .template-slider .labelMark.upgrading{background-image:url(../images/label_upgrading.png);}
.langEn .mobile-wrap .template-slider .labelMark.upgrading{background-image:url(../images/label_upgrading_en.png);}
.mobile-wrap .template-slider .labelMark.esports{background-image:url(../images/label_esports.png);}
.langEn .mobile-wrap .template-slider .labelMark.esports{background-image:url(../images/label_esports_en.png);}
.mobile-wrap .template-slider .labelMark.terminated{background-image:url(../images/label_terminated.png);}
.langEn .mobile-wrap .template-slider .labelMark.terminated{background-image:url(../images/label_terminated_en.png);}
.mobile-wrap .template-slider .labelMark.customize{background-image:url(../images/label_customize.png);}
.langEn .mobile-wrap .template-slider .labelMark.customize{background-image:url(../images/label_customize_en.png);}
.mobile-wrap .template-slider .labelMark.latest{background-image:url(../images/label_latest.png);}
.langEn .mobile-wrap .template-slider .labelMark.latest{background-image:url(../images/label_latest_en.png);}
.mobile-wrap .template-slider .labelMark.asia{background-image:url(../images/label_asia.png);}
.langEn .mobile-wrap .template-slider .labelMark.asia{background-image:url(../images/label_asia_en.png);}
.mobile-wrap .template-slider .thumbnail{position:relative; background:linear-gradient(135deg, #fcb752, #faf180, #fcb752); padding:5px; border-radius:4px; overflow:hidden;}
.mobile-wrap .template-slider .thumbnail img{display:block; width:100%; height:100%; -webkit-transition:transform 0.2s; -moz-transition:transform 0.2s; transition:transform 0.2s;}
.mobile-wrap .template-slider .details-wrap{position:relative; padding:5px 0 0 0; text-align:center; color:#22211c; font-size:13px;}

.mobile-wrap .template-slider .slick-slide:hover .hover-details{opacity:1;}
.mobile-wrap .template-slider .hover-details{opacity:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; font-size:14px; background:rgba(26,26,26,0.75); z-index:999; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.mobile-wrap .template-slider .hover-details a{float:left; display:inline; width:50px; height:50px; background:url(../images/icon_link.png) no-repeat; cursor:pointer;}
.mobile-wrap .template-slider .hover-details a:hover{background-image:url(../images/icon_link_hover.png);}
.mobile-wrap .template-slider .hover-details a.preview{background-image:url(../images/icon_zoom.png);}
.mobile-wrap .template-slider .hover-details a.preview:hover{background-image:url(../images/icon_zoom_hover.png);}
.mobile-wrap .template-slider .hover-details a:not(:last-of-type){margin-right:15px;}

.preview-wrap.mobile{display:flex; align-items:center;}
.preview-wrap.mobile .preview-content{position:relative; height:80%; margin:auto; z-index:100001;}
.preview-wrap.mobile .preview-img{position:relative; display:block; width:auto; min-width:auto; max-width:none; max-height:100%; height:100%; border:none; margin:0 auto;}
.preview-wrap.mobile .button{display:block; position:absolute; bottom:30px; left:0; right:0; margin:auto; width:130px; border:none; border-radius:4px; padding:2px; background:linear-gradient(135deg, #fcb752, #faf180, #fcb752); text-align:center; font-size:14px; box-shadow:0 0 30px #222;}
.preview-wrap.mobile .button p{display:block; background:#22211c; color:#fff; height:34px; line-height:34px; border-radius:4px; }
.preview-wrap.mobile .button a{display:block; background:linear-gradient(135deg, #fcb752, #faf180, #fcb752); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.preview-wrap.mobile .preview-content i{display:block; position:absolute; top:-10px; right:-10px; width:40px; height:40px; background:url(../images/icon_popup_close.png) no-repeat; background-size:40px; cursor:pointer;}

.popular-wrap{margin-bottom:15px;}
.popular-wrap > a{display:inline-block; padding:4px 20px; border:2px solid #d8b548; border-radius:8px; background:#fff; color:#d8b548; font-size:16px; transition:all 0.3s; cursor:pointer;}
.popular-wrap > a:hover{background:#d8b548; color:#fff;}
.popular-wrap .template-group{display:flex; align-items:center; justify-content:center;}
.popular-wrap .template-group .template-showcase{width:auto;}
.popular-wrap .template-group .template-showcase li{margin-right:none;}
.popular-wrap .template-group .template-showcase[data-showcase="web"]{margin:0;}
.popular-wrap .template-group .template-showcase[data-showcase="mobile"]{margin:0;}
.popular-wrap .template-group .template-showcase[data-showcase="mobile"] li{width:75%;}

.side-contact{position:fixed; bottom:100px; z-index:9999;}
.side-contact .con-button{display:block; width:166px; height:144px; background:url(../images/icon_kz_link.png) no-repeat; cursor:pointer; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.langEn .side-contact .con-button{display:block; width:166px; height:144px; background:url(../images/icon_kz_link_en.png) no-repeat; cursor:pointer; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.side-contact .web-button:hover{background-image:url(../images/icon_kz_link_hover.png);}
.langEn .side-contact .web-button:hover{background-image:url(../images/icon_kz_link_hover_en.png);}
.side-contact .skype-button{background-image:url(../images/icon_skype.png); margin-top:20px;}
.langEn .side-contact .skype-button{background-image:url(../images/icon_skype_en.png); margin-top:20px;}
.side-contact .skype-button:hover{background-image:url(../images/icon_skype_hover.png);}
.langEn .side-contact .skype-button:hover{background-image:url(../images/icon_skype_hover_en.png);}
.side-contact .skype-button a{position:absolute; width:166px; height:144px; background:none; padding:0; margin:0; font-size:0;}
.side-contact .skype-button a span{display:none;}

.go-top{position:fixed; right:25px; bottom:20px; display:block; width:49px; height:49px; background:url(../images/icon_top.png) no-repeat; z-index:9999; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.go-top:hover{background-image:url(../images/icon_top_hover.png);}

@-webkit-keyframes introYellowBar {
    0%{height:0;} 100%{height:210px;}
}
@-moz-keyframes introYellowBar {
    0%{height:0;} 100%{height:210px;}
}
@keyframes introYellowBar {
    0%{height:0;} 100%{height:210px;}
}

@-webkit-keyframes introTitle {
    0%{width:0;} 100%{width:400px;}
}
@-moz-keyframes introTitle {
    0%{width:0;} 100%{width:400px;}
}
@keyframes introTitle {
    0%{width:0;} 100%{width:400px;}
}

@-webkit-keyframes introLogo {
    0%{width:0;} 100%{width:403px;}
}
@-moz-keyframes introLogo {
    0%{width:0;} 100%{width:403px;}
}
@keyframes introLogo {
    0%{width:0;} 100%{width:403px;}
}

@-webkit-keyframes introSubtitle {
    0%{width:0;} 100%{width:403px;}
}
@-moz-keyframes introSubtitle {
    0%{width:0;} 100%{width:403px;}
}
@keyframes introSubtitle {
    0%{width:0;} 100%{width:403px;}
}

@-webkit-keyframes colorSubmenu {
    0%{height:0;} 100%{height:403px;}
}
@-moz-keyframes colorSubmenu {
    0%{height:0;} 100%{height:403px;}
}
@keyframes colorSubmenu {
    0%{height:0;} 100%{height:403px;}
}

@-webkit-keyframes landingEnter {
	0%{bottom:-60px;} 100%{bottom:10%;}
}
@-moz-keyframes landingEnter {
	0%{bottom:-60px;} 100%{bottom:10%;}
}
@keyframes landingEnter {
	0%{bottom:-60px;} 100%{bottom:10%;}
}

@keyframes recommendMenu {
  0% {transform:scale(1);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1);}
}

@media screen and (max-width:1400px){
	.side-contact{right:5px !important;}
	.side-contact .con-button{width:135px; height:115px; background-size:135px;}
}

@media screen and (max-width:1320px){
    .content-wrap{min-width:auto;}
    .content{width:100%;}
    .content.fixed{margin-top:260px;}

    .header{height:auto; padding:0 15px; box-sizing:border-box;}
    .header .logo{display:block; float:none; margin:0 auto;}

    .search-wrap{margin:0 auto 20px; float:none;}

    .color-filter .filter-wrap .color-title{left:0; right:0; margin:auto; width:70px; text-align:center;}
    .color-filter .filter-wrap > ul{padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center;}
    .color-filter .filter-wrap > ul li{margin:12px 0; margin-left:0;}
    .color-drop{max-height:100%;}
    .color-drop ul.current{display:flex; flex-wrap:wrap; justify-content:center;}
    .color-drop ul li{width:130px !important;}
    .template-showcase[data-showcase="web"]{justify-content:space-evenly;}
    .template-showcase[data-showcase="web"]:after{content:''; display:none;}

    @-webkit-keyframes colorSubmenu {
        0%{height:0;} 100%{height:100%;}
    }
    @-moz-keyframes colorSubmenu {
        0%{height:0;} 100%{height:100%;}
    }
    @keyframes colorSubmenu {
        0%{height:0;} 100%{height:100%;}
    }
}

@media screen and (max-width:1000px){
	.template-showcase[data-showcase="web"] li{width:28%;}
}

@media screen and (max-width:800px){
	.template-showcase[data-showcase="mobile"] li{width:35%;}
}

@media screen and (max-width:750px){
    .template-showcase[data-showcase="web"] li{width:44%;}
}

@media screen and (max-width:650px){
    .side-contact .con-button{width:90px; height:90px; background-size:90px;}
    .side-contact .skype-button{margin-top:5px;}
    .category-selection > a{font-size:16px;}
}

@media screen and (max-width:550px){
    .landing-wrap .introduce{padding:0; right:0; margin:auto; text-align:center;}
    .landing-wrap .introduce .yellow-bar{display:none;}
    .landing-wrap .introduce p{display:inline-block; width:0;}
	.template-showcase[data-showcase="mobile"] li{width:55%;}
	.category-selection{display:block;}
    .category-selection:before{display:none;}
    .category-selection > a{display:block; margin:0 auto 20px;}
    .mobile-wrap .mobile-category a{min-width:130px;}
}

@media screen and (max-width:470px){
    .template-showcase[data-showcase="web"] li{width:80%;}
    .template-showcase[data-showcase="web"] li .thumbnail{width:273px; height:221px;}
    .template-showcase[data-showcase="web"] li .hover-details{width:273px; height:221px; display:flex; align-items:center; justify-content:space-evenly;}
    .template-showcase[data-showcase="web"] li .hover-details a{margin:0 !important;}
	.template-showcase[data-showcase="mobile"] li{width:65%;}
    .landing-wrap .introduce{width:100%;}
    .landing-wrap .introduce img{height:auto !important; margin:15px auto;}
    .landing-wrap .introduce p{animation-duration:0.3s;}
    .landing-wrap .introduce label, .landing-wrap .introduce span{display:block; margin:0 auto; animation-duration:0.3s;}
    .landing-wrap .introduce label:last-of-type{animation-duration:0.3s;}

    @-webkit-keyframes introLogo {
	    0%{width:0;} 100%{width:95%;}
	}
	@-moz-keyframes introLogo {
	    0%{width:0;} 100%{width:95%;}
	}
	@keyframes introLogo {
	    0%{width:0;} 100%{width:95%;}
	}
	@-webkit-keyframes introTitle {
    	0%{width:0;} 100%{width:100%;}
	}
	@-moz-keyframes introTitle {
	    0%{width:0;} 100%{width:100%;}
	}
	@keyframes introTitle {
	    0%{width:0;} 100%{width:100%;}
	}
	@-webkit-keyframes introSubtitle {
	    0%{width:0;} 100%{width:100%; height:auto;}
	}
	@-moz-keyframes introSubtitle {
	    0%{width:0;} 100%{width:100%; height:auto;}
	}
	@keyframes introSubtitle {
	    0%{width:0;} 100%{width:100%; height:auto;}
	}
}

.langEn .item-cn, .langCn .item-en{display:none;}