*, ::after, ::before{
    /* box-sizing:unset; */
}
:root{
    --smartphone-color:#d71010;
    --tablet-color:#0546ec;
    --smartwatch-color:orangered;
    --news-color:#03a9f4;
    --review-color:#ffc107;
    --video-subcolor:#cc0000;
    --video-color:#ff8282;
    --video-color:#ffbfbf;
    --brand-color:#27a82d;
}
body{
    margin:0;
    padding:0;
    background:#fdf9ee;
    background: url(bg-top.png) no-repeat;
    background-size: 100%;
    /* --bgli : #c3c3c3;
    --bgli: #858585; */
}
.header-wrapper {
    background: transparent;
    border:0;
    box-shadow: none;
}
p{
    line-height: 1.3;
}
.text-right{text-align: right !important;}
.text-left{text-align: left !important;}
.text-center{text-align: center !important;}

.top-banner{
    /* position: sticky; */
    top: 0;
    /* background: #fdfdfd;  */
    z-index: 0;
    padding: 70px 0;
    text-align: center;
    margin-top:1px;

    display:none;
}
.logo-hof2022{
    display: block;
    position: absolute;
    width: 200px;
    height: 60px;

    display:none;
}
.logo-hof2022 img{
    width:100%;
    height:auto;
}
.top-head{
    position: relative;
    text-align:center;
    padding:100px 0 20px;
    padding: 20px 0 50px;

    background: url(bg-top-left.png) top left no-repeat, url(bg-top-right.png) top right no-repeat;
    background-size: 300px;
}
.top-head:before{
    /* content:""; */
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(//www.siamphone.com/images/infographic/top-infoleft.png) no-repeat top left, url(//www.siamphone.com/images/infographic/top-inforight.png) no-repeat top right;
}
.top-head h1{
    color:#c00;
    font-size:85px;
    font-weight: 600;
    font-family:'Roboto',"Kanit", sans-serif;
    line-height: 120px;
    margin: 0 auto 80px;
    margin: 0 auto 0;
}
.top-head h1 b{

}
.top-head h1 span{
    
    font-size:100px;
}
.top-head h1 img{
    width:100%;
    max-width:1000px;
    height:auto;
    margin-bottom:100px;
}
.top-head h2{
    width: 1200px;
    margin: 0 auto;
    font-family: "Kanit";
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
}
.top-head h3{
    font-weight: 300;
    font-family: 'Kanit';
    display: inline-block;
    padding: 10px 25px 11px;
    border-radius: 3px;
    margin: 0 0 50px 0;
    color: #1b1b1b;
    font-size: 26px;
    border: 1px solid #000;
}
.topchart{
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #000;
    font-weight: 600;
    font-size: 18px;
    display: inline-block;
    clear: both;
    overflow: hidden;
    padding: 5px 20px;
    margin: 0 0 50px 0;
    color: #e7e7e7;
    font-family: 'Kanit';
    background-image: linear-gradient(currentColor 1px, transparent 1px),linear-gradient(to right, currentColor 1px, transparent 1px);
    background-size: 6px 6px;

    display: none;
}
.topchart span{
    color:#000000;
}
.boy01{
    width: 80px;
    height: 140px;
    position: absolute;
    background: url(//www.siamphone.com/images/top100/boy01.png) no-repeat;
    background-size: 100%;
    z-index: 999;
    top: 2%;
    left: 17%;
}

.top100_detail {
    font-size: 12px;
    text-align: left;
    margin: 0 0 0 40px;
    display: block;
}


#back-top {position:fixed;bottom:35px;right:35px;z-index:999;}
#back-top a{display:block;text-align:center;font:11px/100% Arial, Helvetica, sans-serif;text-transform:uppercase;text-decoration:none;color:#bbb;-webkit-transition:1s;-moz-transition:1s;transition:1s;}
#back-top a:hover{color:#000;}
#back-top span{width:50px;height:50px;display:block;margin-bottom:7px;background:#ffffffd1 url(//www.siamphone.com/images/ar-top.png) no-repeat center center;background-size:25px;-webkit-transition:1s;-moz-transition:1s;transition:1s;opacity:0.8;border-radius:11px;border: 1px solid #000;}


.footer{width:1040px;margin:0 auto}
div#footer{width: 100%;padding:20px 10% 15px;background: #000;color: #ebebeb;margin:0;}
div#footer_copyright{padding:0;width:100%;font:10px/30px Arial;}
#footer_copyright .siamphone_logo{float: left;margin:-1px 6px 0;background: url(https://www.siamphone.com/images/siamphone_logo_wh.png) no-repeat;background-position: center 0;background-size: 50px;height:16px;width: 50px;}
#footer_copyright .siamphone_logo img{vertical-align: baseline;}
#footer_copyright i.copysign{font-size:12px;float:left;font-family:Arial;margin-right:3px;font-style:normal}
#footer_copyright p.right_reserved_text{float:left;margin:0}
#footer_copyright p.social_network{float:right;margin:0 10px}
#footer_copyright p.social_network a{color:#ebebeb;margin:0 1px;text-decoration: none;}

#wrapper-bestofyear, #wrapper-tablet, #wrapper-brand, #wrapper-watch , #wrapper-news , #wrapper-review ,#wrapper-video{
    padding: 80px 0;
    position: relative;
}
#wrapper-bestofyear .container, 
#wrapper-tablet .container, #wrapper-brand .container,#wrapper-watch .container, #wrapper-news .container, #wrapper-review .container, #wrapper-video .container{
    max-width:1000px;
}

#wrapper-bestofyear{
    /* background: url(bg-top.png) no-repeat,  url(bg-top-left.png) top left no-repeat, url(bg-top-right2.png) top right no-repeat; */
    background: url(bg-top-left2.png) top left no-repeat, url(bg-top-right2.png) top right no-repeat;
    background-size:300px;
    background-color: #f6ede7;
}
#wrapper-bestofyear h3{
    text-align:left;
}
#wrapper-tablet {
    background: url(bg-top-left2.png) top left no-repeat, url(bg-top-right2.png) top right no-repeat;
    background-size:300px;
    background-color: #e9d3c2;
    background-color: #f0e1d5;
   
    /* background-image: url(images/snowdrop.png), url(images/snow3.png), url(images/snow2.png);
    -webkit-animation: snow 60s linear infinite;
    -moz-animation: snow 60s linear infinite;
    -ms-animation: snow 60s linear infinite;
    animation: snow 60s linear infinite; */
}
/*Keyframes*/
@keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
	}
	
	@-moz-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
	}
	
	@-webkit-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	 50% {}
	 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
	}
	
	@-ms-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
	}
	


#wrapper-brand{
    background: url(bg-top-left2.png) top left no-repeat, url(bg-top-right2.png) top right no-repeat;
    background-size:300px;
    background-color: #e6d9cc;
    /* background-image: url(images/snowdrop.png), url(images/snow3.png), url(images/snow2.png);
    -webkit-animation: snow 60s linear infinite;
    -moz-animation: snow 60s linear infinite;
    -ms-animation: snow 60s linear infinite;
    animation: snow 60s linear infinite; */
}
#wrapper-watch{
    background: url(bg-top-left2.png) top left no-repeat, url(bg-top-right2.png) top right no-repeat;
    background-size:300px;
    background-color: #d8bea9;
    background-color: #f8dfcb;
    /* background: #887593; */

    /* background-image: url(images/snowdrop.png), url(images/snow3.png), url(images/snow2.png);
    -webkit-animation: snow 60s linear infinite;
    -moz-animation: snow 60s linear infinite;
    -ms-animation: snow 60s linear infinite;
    animation: snow 60s linear infinite; */
}
#wrapper-news{
    background-color: #e6d9cc;
    background:#fce4c7 url(images/bg-news2.png) no-repeat;
    background-position: 17% 15%;
}
#wrapper-news .swiper-wrapper{
    height:auto;
    padding-bottom: 50px;
    padding-top:50px;
}
#wrapper-review{
    background: url(bg-top-left2.png) top left no-repeat, url(bg-top-right2.png) top right no-repeat;
    background-size:300px;
    background-color: #d8bea9;
    background-color: #fce4c7;
}
#wrapper-video{
    /* background: url(bg-top-left2.png) top left no-repeat, url(bg-top-right2.png) top right no-repeat;
    background-size:300px;
    background-color: #e6d9cc; */
    background-color: #fff4f4;
}



.title-name h3{
    font-family: "Kanit";
    text-align: left;
    font-size: 50px;
    color: #000000;
    margin-bottom: 50px;
    font-weight: 600;
    position: relative;
    padding: 0 0 0 10px;
}
.title-name h3::after {
    /* content: ""; */
    position: absolute;
    left: 4px;
    top: 17px;
    width: 7px;
    height: 32px;
    background: #c00;
    border-radius: 3px;
}
.title-name strong {
    background: #ccc;
    font-size: 12px;
    position: relative;
    z-index: 99;
    padding: 4px 7px 3px 8px;
    color: #fff;
    font-weight: 500;
    font-family: 'Roboto';
    bottom: 5px;
    letter-spacing: 0.5px;
    text-align: center;
    background: linear-gradient(135deg, #2323dd 23%,#000084 100%);
    background: linear-gradient(135deg, #fd3232 23%,#cc0001 100%)
}

#wrapper-bestofyear .title-name strong {
    background: linear-gradient(135deg, #fd3232 23%,#cc0001 100%)
}

.cate-tab{
    margin-bottom: 0;
    white-space: nowrap;
    /* overflow-x: auto;
    overflow-y: hidden; */
    display: block;
    position:relative;
    border-bottom:0;
    text-align: center;
    background: transparent;
    border-bottom: 1px solid #d8bea9;    
}
.cate-tab:before{
    /* content:""; */
    background: #ededed;
    background: #f1f1f1;
    height: 1px;
    width: 70%;
    position: absolute;
    bottom: 2px;
}
.cate-tab::-webkit-scrollbar-track{
	border-radius: 18px;
	background-color: #e8e7e7;
}
.cate-tab::-webkit-scrollbar{
	height: 8px;
	background-color: #F5F5F5;
}
.cate-tab::-webkit-scrollbar-thumb{
	border-radius: 18px;
	background-color: rgba(0,0,0,0.1);
}
.cate-tab li{
    padding:0;
    float: none;
    display: inline-block;
}
.cate-tab li a{
    padding: 5px 20px 5px;
    font-weight: 600;
    font-size: 22px;
    line-height: 34px;
    font-family: "Kanit";
    text-decoration: none;
    color: #000;
    display: block;
}
.cate-tab li a.active{
    position: relative;
    background: #f4ece3;
    color: #000;
    border: 1px solid #d8bea9;
    border-bottom: 0;
}
.cate-tab li a.active:after{
    content: "";
    z-index: 9;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
   
    bottom: -2px;
    border-radius: 30px;
    background: #f4ece3;
}
.fade:not(.show) {
    opacity: 1;
}
.fade {
    opacity: 1;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
.tab-content>.active {
    display: block;
    padding:50px 0 ;
    position:relative;
    /* background-image: linear-gradient(currentColor 1px, transparent 1px),linear-gradient(to right, currentColor 1px, transparent 1px); */
    /* background-size: 25px 25px; */
    background: url(bg-top.png) no-repeat;
    background-size: cover;

    /* color: rgb(255 255 255 / 20%); */
}

.tab-content > [id='tab-01']  {
    /* background-color: var(--smartphone-color); */
}
.cate-tab li:nth-child(1) a.active, .cate-tab li:nth-child(1) a.active:after{
    /* background:var(--smartphone-color); */
}
.tab-content > [id='tab-02']  {
    background-color: var(--tablet-color);
}
.cate-tab li:nth-child(2) a.active, .cate-tab li:nth-child(2) a.active:after{
    background:var(--tablet-color);
}
.tab-content > [id='tab-brand']  {
    background-color:var(--brand-color);
}
.cate-tab li:nth-child(3) a.active, .cate-tab li:nth-child(3) a.active:after{
    background:var(--brand-color);
}
.tab-content > [id='tab-03']  {
    background-color:var(--smartwatch-color);
}
.cate-tab li:nth-child(4) a.active, .cate-tab li:nth-child(4) a.active:after{
    background:var(--smartwatch-color);
}
.tab-content > [id='tab-04']  {
    background-color:var(--news-color);
}
.cate-tab li:nth-child(5) a.active, .cate-tab li:nth-child(5) a.active:after{
    background:var(--news-color);
}
.tab-content > [id='tab-05']  {
    background-color:var(--review-color);
    color: rgb(221 145 0 / 20%);
}
.cate-tab li:nth-child(6) a.active, .cate-tab li:nth-child(6) a.active:after{
    background:var(--review-color);
    color:#000;
}
.tab-content > [id='tab-06']  {
    background-color:var(--video-color);
    color: #ffa4a4;
}
.cate-tab li:nth-child(7) a.active, .cate-tab li:nth-child(7) a.active:after{
    background:var(--video-color);
    color: #cd3838;
}




.tab-content > [id='tab-01']:after{
    /* content:""; */
    /* width:100%; */
    height: 100%;
    /* background-image: url(bg-smartphone.png); */
    
    /* background:url(bg-smartphone-left.png) repeat-y top left, url(bg-smartphone-right.png) repeat-y top right;
    background-size: 25%; */
    /* background-size: contain; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.tab-content > [id='tab-02']:before{
    content:"";
    width:100%;
    height: 100%;
    background-image: url(bg-tablet2.png);
    /* background-size: contain; */
    
    background:url(bg-tablet-left.png) repeat-y top left, url(bg-tablet-right.png) repeat-y top right;
    background-size: 25%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.tab-content > [id='tab-brand']:before{
    content:"";
    width:100%;
    height: 100%;
    background-image: url(bg-video.png);
    background-size: contain;
    
    background:url(bg-brand-left.png) repeat-y top left, url(bg-brand-right.png) repeat-y top right;
    background-size: 25%; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.tab-content > [id='tab-03']:before{
    content:"";
    width:100%;
    height: 100%;
    background-image: url(bg-smartwatch.png);
    background-size: contain;
    
    background:url(bg-smartwatch-left.png) repeat-y top left, url(bg-smartwatch-right.png) repeat-y top right;
    background-size: 25%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.tab-content > [id='tab-04']:before{
    content:"";
    width:100%;
    height: 100%;
    background-image: url(bg-news.png);
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.tab-content > [id='tab-05']:before{
    content:"";
    width:100%;
    height: 100%;
    background-image: url(bg-review.png);
    background-size: contain;
    
    background:url(bg-review-left.png) repeat-y top left, url(bg-review-right.png) repeat-y top right;
    background-size: 25%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.tab-content > [id='tab-06']:before{
    content:"";
    width:100%;
    height: 100%;
    background-image: url(bg-video-left.png),  url(bg-video-right.png);
    background-size: 100%;
    background-position: center left, center right;
    background-repeat: no-repeat;

    background:url(bg-video-left.png) no-repeat center left, url(bg-video-right.png) no-repeat center right;
    background-size: 25%;
    background-attachment: fixed;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.block-smartphone, .block-tablet, .block-smartwatch, .block-review, .block-video{
    /* background-color: #ffffff; */
    border-radius: 13px;
    border: 0px solid #000;
    position: relative;
    margin: 0 0 30px;
}
.cover-top{
    margin: 10px 0 30px;
    position: relative;
}
.cover-top a{
    font-family: 'Roboto';
    text-align: center;
    font-size: 50px;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    margin: 50px 0 0 0;
    display:block;
}
.block-tablet .cover-top a{font-size:42px;}
.block-smartwatch .cover-top a{text-align: right;}
.cover-top .number{
    font-family: "Kanit";
    text-align: right;
    font-size: 22px;
    font-weight: 500;
    color: #c00;
    position: absolute;
    top: -60px;
}
.cover-top .number span{
    display: block;
    background: #c00;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    text-align: center;
    font-size: 24px;
    line-height: 46px;
    font-weight: 600;
    font-family: 'roboto';
    margin: 0;
    border: 2px solid #000;
}

.block-smartphone .cover-top .number{color:var(--smartphone-color);}
.block-smartphone .cover-top .number span{background:var(--smartphone-color);}
.block-tablet .cover-top .number{color:var(--tablet-color);}
.block-tablet .cover-top .number span{background:var(--tablet-color);}
.block-smartwatch .cover-top .number{color:var(--smartwatch-color);}
.block-smartwatch .cover-top .number span{background:var(--smartwatch-color);}
.block-news .cover-top .number{color:var(--news-color);top:-30px;}
.block-news .cover-top .number span{background:var(--news-color);}
.block-review .cover-top .number{color:#0000;top:-35px;right:-5px;font-weight: 600;}
.block-review .cover-top .number span{background:var(--review-color);color:#000;display: inline-block;}


.cover-top .brand {
    position: absolute;
    right: -20px;
    top: -45px;
    width: 60px;
    height: 30px;
}
.block-smartwatch .cover-top .brand{right:0;}
.cover-top .brand a{
    display:block;
    margin:0;
}
.cover-top .brand img{
    width:60px;
    height:auto;
    text-indent: 0;
}
.cover{
    position: relative;
    /* background: url(//www.siamphone.com/images/infographic/top-infoleft.png) no-repeat top left, url(//www.siamphone.com/images/infographic/top-inforight.png) no-repeat top right; */
    background-size: 42%, 43%;
    width: 100%;
}
.cover-img{
    width: 55%;
    margin: 0 auto;
}
.cover-img p{
    overflow: hidden;
    width: 437px;
    height: 430px;
    margin: 0;
}
.cover-img img{
    width:100%;
    height:auto;
    margin-top: -30px;

    border-radius: 2000px;
}
.cover-left{
    position: absolute;
    top: 15%;
    left: 0;
    width: 45%;
    text-align: left;
}
.cover-right{
    position: absolute;
    top: 17%;
    right: 0;
    width: 45%;
    text-align: right;
}
.block-tablet .cover-left{top: 20%;}
.block-tablet .cover-right{top: 20%;}


.cover-detail{
    width: 300px;
    position: absolute;
    right: -30px;
    bottom: -10px;
}
.block-tablet .cover-detail{
    width: 270px;
    right: -40px;
    bottom: -40px;
}
.cover-detail ul{padding:0;margin:0;}
.cover-detail ul li{
    color: #8a8a8a;
    font-family: "Kanit";
    font-weight: 300;
    list-style-type: disc;
    font-size: 14px;
    line-height: 24px;
}
.viewModel{
    margin: 20px 0 20px;
    font-weight: 600;
    font-family: 'Roboto',"Kanit";
    font-size: 40px;
    color: #cc0000;
    text-align: center;
}
.block-smartphone .viewModel{color:var(--smartphone-color);}
.block-tablet .viewModel{color:var(--tablet-color);}
.block-smartwatch .viewModel{color:var(--smartwatch-color);color:#000000;}
.block-news .viewModel{color:var(--news-color);}
.block-review .viewModel{color:var(--review-color);}
.block-video .viewModel{
    color: var(--video-subcolor);
    font-size: 30px;
}

.list-view em {
    font-size: 13px;
    padding-right: 3px;
}
.btn-more{
    text-align: center;
}
.btn-more a{
    color: #fff;
    background: #000000;
    text-decoration: none;
    padding: 12px 20px 14px;
    border-radius: 30px;
    min-width: 200px;
    display: inline-block;
    font-family: "Kanit";
    font-size: 18px;
    transition: all 0.3s;
}
.btn-more a:hover{
    background:var(--smartphone-color);
}
.box {
    background: #fff;
    width: auto;
    border: 1px solid #000;
    padding: 10px 15px;
    text-align: left;
    color: #000;
    font-family: 'Roboto',"Kanit";
    position: relative;
    border-radius: 11px;
    font-weight: 500;
    display: inline-block;
}
.sb5:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 6px solid #000;
    border-right: 8px solid transparent;
    border-top: 7px solid #000;
    border-bottom: 6px solid transparent;
    right: -14px;
    top: 9px;
}
.sb5:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 7px solid #fff;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    border-bottom: 7px solid transparent;
    right: -11px;
    top: 10px;
}
.box1{margin: 0 50px 0 0;}
.box2{margin: 80px 0 50px -10px;}
.box3{margin: 15px 0 0 0;}
.box4{right:10px;}
.box5{margin: 60px 0 70px 0;}
.box6{margin:0 0 0 0;}


.boxbox1{margin: 0 50px 0 0;}
.boxbox2{margin: 80px 0 50px -10px;}
.boxbox3{margin:25px 0 0 0px;}
.boxbox4{right:50px;margin-top: -20px;}
.boxbox5{margin: 60px 0 70px 0;}
.boxbox6{margin:0 0 0 60px;}
/* speech bubble 11 */
.sb11:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-right: 8px solid #000;
    border-left: 8px solid transparent;
    border-top: 8px solid #000;
    border-bottom: 8px solid transparent;
    left: -16px;
    top: 9px;
}
.sb11:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-right: 7px solid #fff;
    border-left: 7px solid transparent;
    border-top: 7px solid #fff;
    border-bottom: 7px solid transparent;
    left: -14px;
    top: 10px;
}


  /* Swiper Slide */
.swiper-button-next, .swiper-button-prev{
	top: auto;
    bottom: 10px;
    width: 30px;
    height: 30px;
    z-index: 99;
	color:transparent;
	border-radius: 30px;
	font-size: 14px;
}
.swiper-button-next{
	left:auto;
	right:0;

	background: url(images/arrow-right.svg) no-repeat;
    background-size: 30px;
	background-position: center;
    width: 30px;
}
.swiper-button-prev{
	left:0;
	right: auto;
	
    width: 30px;
    background: url(images/arrow-left.svg) no-repeat;
	background-position: center;
    background-size: 30px;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: 'next';
    font-size: 23px;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev';
    font-size: 23px;
}
.swiper-pagination-bullet {
    width: 25px;
    height: 25px;
    text-align: center;
    color: #000000;
    opacity: 1;
    background: #ffffff;
    font-family: 'Roboto';
    font-size: 15px;
    line-height: 27px;
    border-radius: 30px;
}

.swiper-pagination-bullet-active {
    color: #fff;
    background: #c00;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    padding-top: 2px;
    vertical-align: bottom;
}
.text-pagination{
	text-align: left;
    font-weight: bold;
    text-indent: 30px;
    position: relative;
    color: #cc0000;
}
.text-pagination svg{
	width:20px;
	height: 28px;
	vertical-align: top;
    margin-right: 5px;
    position: absolute;
    left: 4px;
    top:7px;
    z-index: 2;
	fill:#cc0000;
}
  
em.icon {
    background-image: url(https://www.siamphone.com/style/themes/sp2021/images/spec_icon_function.png);
    background-size: 80px 40px;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 5px 0 0;
    vertical-align: middle;
}
.icon-display {background-position: 0px -20px;}
.icon-cpu{background-position: -40px -80px;}
.icon-os-android{background-position: 0px 0px;}
.icon-camera{background-position: -20px 0px;}
.icon-memory{background-position: -20px -100px;}
.icon-battery{background-position: -40px -100px;}
.icon-os-ipad{background-position: -60px  0px;}


/* smartwatch */
.smartwatchCover{
    position: relative;
    width: 100%;
    display:flex;
    margin: 50px 0;
}
.smartwatchImg{
    width: 45%;
    display: inline-block;
}
.smartwatchImg img{
    width: 100%;
    height:auto;
    padding: 0 50px;
    border: 2px solid #000;
    border-radius: 100%;
}
.smartwatchDetail{
    width: 53%;
    display: inline-block;
    margin: 20px 0 0 4%;
    color:#000;
}
.smartwatchDetail ul{
    margin:0;
    padding:0;
    text-align: center;
}
.smartwatchDetail ul li{
    padding:6px 10px 6px 10px;
    list-style-type: none;
    border: 1px solid var(--smartwatch-color);
    border:1px dashed var(--smartwatch-color);
    border-radius: 15px;
    margin: 0 0 20px;
    font-family: "Kanit";
    font-weight: 300;
    font-size: 18px;
    position: relative;
    display: inline-block;
}
.smartwatchDetail ul li:last-child{
    margin-bottom:0;
}
.smartwatchDetail ul li span{
    display: block;
    font-size: 12px;
}
em.iconWatch{
    background-image: url(https://www.siamphone.com/images/icon/icon-display-circle.svg);
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 0 5px 0 0;
    vertical-align: middle;
    border-radius: 30px;
    background-color: #00baff;
    filter: invert(1);

    position: absolute;
    top: 8px;
    left: -13px;
}

.special_function{
    display: inline;
    vertical-align: middle;
    position: relative;
}
.special_function .block-function{
    min-height: 25px;
    padding: 0;
    text-align: center;
    margin-bottom: 0;
    border-radius: 30px;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
    width: 25px;
    margin-top: 5px;
    background-color: var(--smartwatch-color);
    border: 1px solid var(--smartwatch-color);
    display: inline-block;
    position: relative;
}
.special_function .block-function:hover{

}
.tooltip{
	font-family:'Kanit';
	font-weight:400;
    z-index: 99;
}
.special_function em.icon{
	/* background-image:url(../images/spec_icon_function.png); */
	/* background-size:136px 68px; */
    width: 15px;
    height: 15px;
    display: block;
    margin: 4px auto 0;
    background-position: 0;
    background-size: 15px;
    background-repeat: no-repeat;
}
.special_function em.message-noti{background-image:url(https://www.siamphone.com/images/icon/icon-message-noti.svg);}
.special_function em.call-display{background-image:url(https://www.siamphone.com/images/icon/icon-call-display.svg);}
.special_function em.speaker{background-image:url(https://www.siamphone.com/images/icon/icon-speaker.svg);}
.special_function em.microphone{background-image:url(https://www.siamphone.com/images/icon/icon-microphone.svg);}
.special_function em.compass{background-image:url(https://www.siamphone.com/images/icon/icon-compass.svg);}
.special_function em.waterproof{background-image:url(https://www.siamphone.com/images/icon/icon-waterproof.svg);}
.special_function em.call-sos{background-image:url(https://www.siamphone.com/images/icon/icon-call-sos.svg);}
.special_function em.sos{background-image:url(https://www.siamphone.com/images/icon/icon-sos.svg);}
.special_function em.footprint{background-image:url(https://www.siamphone.com/images/icon/icon-footprint.svg);}
.special_function em.activity-tracker{background-image:url(https://www.siamphone.com/images/icon/icon-activity-tracker.svg);}
.special_function em.fall-detection{background-image:url(https://www.siamphone.com/images/icon/icon-fall-detection.svg);}
.special_function em.heart-rate{background-image:url(https://www.siamphone.com/images/icon/icon-heart-rate.svg);}
.special_function em.sleep-tracker{background-image:url(https://www.siamphone.com/images/icon/icon-sleep-tracker.svg);}
.special_function em.calories{background-image:url(https://www.siamphone.com/images/icon/icon-calories.svg);}
.special_function em.women-health{background-image:url(https://www.siamphone.com/images/icon/icon-women-health.svg);}
.special_function em.gps{background-image:url(https://www.siamphone.com/images/icon/icon-gps.svg);}
.special_function em.music{background-image:url(https://www.siamphone.com/images/icon/icon-music.svg);}
.special_function em.floor-climb{background-image:url(https://www.siamphone.com/images/icon/icon-floor-climb.svg);}
.special_function em.gymkit{background-image:url(https://www.siamphone.com/images/icon/icon-gymkit.png);}
.special_function em.goal{background-image:url(https://www.siamphone.com/images/icon/icon-goal.svg);}
.special_function em.high-altitude{background-image:url(https://www.siamphone.com/images/icon/icon-high-altitude.svg);}
.special_function em.distance{background-image:url(https://www.siamphone.com/images/icon/icon-distance.svg);}
.special_function em.sitting{background-image:url(https://www.siamphone.com/images/icon/icon-sitting.svg);}
.special_function em.eSim{background-image:url(https://www.siamphone.com/images/icon/icon-eSim.svg);}
.special_function em.payment{background-image:url(https://www.siamphone.com/images/icon/icon-payment.svg);}
.special_function em.noti{background-image:url(https://www.siamphone.com/images/icon/icon-noti.svg);}
.special_function em.exercise{background-image:url(https://www.siamphone.com/images/icon/icon-exercise.svg);}
.special_function em.translate{background-image:url(https://www.siamphone.com/images/icon/icon-translate.svg);}
.special_function em.run-list{background-image:url(https://www.siamphone.com/images/icon/icon-run-list.svg);}
.special_function em.oxygen-blood{background-image:url(https://www.siamphone.com/images/icon/icon-oxygen-blood.svg);}
.special_function em.serious-tracking{background-image:url(https://www.siamphone.com/images/icon/icon-serious-tracking.svg);}
.special_function em.calendar{background-image:url(https://www.siamphone.com/images/icon/icon-calendar.svg);}
.special_function em.exercise-list{background-image:url(https://www.siamphone.com/images/icon/icon-exercise-list.svg);}
.special_function em.voice_reply{background-image:url(https://www.siamphone.com/images/icon/icon-voice_reply.svg);}
.special_function em.camera{background-image:url(https://www.siamphone.com/images/icon/icon-camera.svg);}

.special_function .block-function em{filter: invert(1);}

.block-news{
    padding:0 0 1px;
    margin: 0 0 30px;
    border-radius: 13px;
    background: #ffffff;
    position:relative;
}
.block-news h4{
    margin:0;
}
.block-news h4 a{
    font-family: 'Roboto',"Kanit";
    text-align: center;
    margin-left: 120px;
    font-size: 18px;
    line-height: 26px;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    margin: 0;
    display: block;
    text-decoration: none;
    padding: 20px 15px 0;
    min-height:108px;
}
.block-news img{
    width: 100%;
    height: auto;
    border-radius: 13px 13px 0 0;
    padding: 0;
}
.block-news p{
    color: #222;
    font-size: 18px;
    font-family: "Kanit";
    line-height: 30px;
    font-weight: 300;
}
.block-news .news-view{
    text-align: center;
    font-family:'Roboto', sans-serif;
    font-weight: 400;
    padding:0;
    font-size: 14px;
    line-height: 22px;
}
.block-news .news-view i{
    font-size: 14px;
    margin-right: 3px;
}
.block-news .news-view span, .block-review .review-view span{
    display: inline-block;
    font-family: 'Roboto';
    font-weight: 600;
    font-size: 14px;
    color: #c00;
    margin-left:5px;
}
.news-view span, .review-view span{
    font-family: "Kanit";
    display: block;
    font-size: 16px;
}
.block-review .review-view{
    text-align: center;    
    margin: 20px 0;
}
.block-review .review-view span{
    font-size: 18px;
}
.news-top{
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(images/star.png) no-repeat;
    background-size: 100%;
    right: 2%;
    top: 2%;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 50px;
}
.sub_head{
    padding: 0 0 5px;
    margin:20px 0 0;
    color: grey;
    position: relative;
    line-height: 25px;
	overflow:hidden;
	font-size:14px;
	font-weight:300;
    text-align: center;
}
.sub_head p{
    clear: both;
    margin: 7px 0 0;
	line-height:20px;
    font-size: 12px;
}
.sub_head a{
    color: #000000;
    font-size: 12px;
    text-decoration: none;
}
.sub_head em{
    font-size: 14px;
    margin: 0 5px 0 0;
    vertical-align: middle;
    font-weight: 300;
	font-style:normal;
	padding-left:6px;
}
.globalNews, .localNews{
    padding: 0;
    display: inline-block;
    margin-right:5px;
    border-radius: 12px;
}
.globalNews em, .localNews em{
    background-repeat: no-repeat;
    background-size: 17px;
    width: 15px;
    height: 17px;
    background-position: -1px 0;
    margin: 1px 0 0 0;
    vertical-align: text-top;
    display: inline-block;
}
.localNews em {
    background-image: url(https://news.siamphone.com/images/thailand_map.png);
}
.globalNews em {
 background-image: url(https://news.siamphone.com/images/world_map.png);
}
.globalNews a, .localNews a {
    color: #666a6d;
	font-weight:400;
}


/* review */
#tab-05 h3{
    color:#000000;
    margin-bottom:0;
}
.block-review{
    margin: 0 20px 30px;
    background-color: #ffffff;
}
.block-review h4 a{
    font-family: "Kanit";
    text-align: center;
    font-size: 20px;
    line-height: 32px;
    color: #000;
    font-weight: 500;
    display: block;
    text-decoration: none;
    margin: 0 15px 15px;
}
#wrapper-review .swiper-wrapper{
    padding-bottom:50px;
}
#wrapper-review .swiper-slide, #wrapper-review .swiper-wrapper{
    height:auto;
}
.reviewImg{
    margin:50px 0 0;
}
.reviewImg img{
    width: 100%;
    height: auto;
    border-radius: 13px;
    /* border: 1px solid #000;
    padding: 15px; */
}
.reviewSubImg{
    margin:20px 0 0;
}
.reviewSubImg img{
    width: 100%;
    height: auto;
    border:0;
    border-radius: 6px;
}
.block-review p{
    color: #222;
    font-size: 18px;
    font-family: "Kanit";
    line-height: 30px;
    font-weight: 300;
    margin:20px 0 0;
}
.block-review .sub_head p{
    font-size:12px;
    text-align:left;
    padding-left: 8px;
    margin: 0;
}



/* video */
#tab-06 h3{
    margin-bottom:20px;
    /* color:#cd3838;
    font-weight: 500; */
}
#wrapper-video .swiper-wrapper ,#wrapper-video .swiper-slide{
    height:auto;
}
#wrapper-video .swiper-wrapper{
    padding-bottom: 50px;
}
.block-video{
    border:0;
    padding:0;
    margin: 0 15px;
}
.block-video{
    background: transparent;
}
.block-video .cover-top{
    z-index: 10;
}
.block-video .cover-top .number{
    right: 10px;
    top: -18px;
}
.video-block {
    margin-bottom: 70px;
    border-radius: 18px;
    padding: 0;
    /* background-color: #ffffff; */
}
.video-block .video-image{
    position: relative;
    padding: 0;  
    border-bottom: 0;
    /* background: #fff; */
    border-radius: 0;
    
}
.video-block .video-image i{
    background: url(../images/icon-youtube-play.png) no-repeat;
    background-size: 80px;
    background-position: center;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}
.video-block .video-image img{
    width:100%;
    height:auto;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    border-radius: 8px;
}
.video-block .video-image img:hover{
   
}
.video-block .video-image:after{
    /* content: ""; */
    width: 100%;
    /* background:rgba(0,0,0,0.05) linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)10%,rgba(0,0,0,1) 100%); */
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    z-index: 1;
    opacity: 0.3;
}
.video-name{
    font-weight: 300;
    font-size: 16px;
    line-height: 32px;
    overflow: hidden;
    margin: 0;
    font-family: 'Kanit';
    text-align: left;
    border-top: 0;
    /* background: #ffffff; */
    position: relative;
    z-index: 1;
    padding: 15px 0 15px 0;
}
.video-name h4 a{
    font-size: 17px;
    color: #000000;
    text-decoration: none;
    font-weight: 300;
    line-height: 24px;
}
.video-number{
    background: var(--video-subcolor);
    text-align: center;
    color: #fff;
    width: 100px;
    height: 55px;
    margin: 0 auto;
    font-family: "Roboto";
    font-weight: bold;
    font-size: 41px;
    border-radius: 100px 100px 0 0;
    border: 1px solid #000;
    border-bottom: 0;
}
.video-close{
    border: 3px solid #cd3838;
    height: 50px;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    text-align: right;
    padding-right: 20px;
    
    background:#ffffff url(x-close.png) no-repeat;
    background-position: 98%;
    
}
.video-bar{
    background: #ffffff;
    text-align: center;
    padding: 20px 0;
    border-top: 0;
    
    position: relative;
    z-index: 1;
    text-align: center;
}
.video-bar a{
    display: inline-block;
}
.video-bar .tri{
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-left: 30px solid #cd3838;
    border-bottom:18px solid transparent;
    color: transparent;
    text-indent: -999;

    display:block;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
}
.video-bar a:hover .tri{
    border-left: 30px solid #cc0000;
    -moz-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}




/* brand */
.block-brand{
    padding: 30px 20px 50px;
    margin-top: 20px;
}
.brandName{
    width: 125px;
    height: 125px;
    text-align: center;
    /* position: absolute;
    left: 22%;
    top: -134px; */
    background: #fff;
    padding: 20px 20px 21px;
    border: 2px solid #000;
    border-radius: 300px;
    margin: -100px auto 0;
}
.block-brand .cover-top{
    text-align: center;
}
.block-brand .cover-top a{
    font-size: 22px;
    display: block;
    height: 66px;
    margin: 20px 0 0;
}
.cover-top .brandName a{
    margin: 0;
    font-size: 26px;
    height: auto;

    color: #222;
    font-family: 'Roboto',"Kanit";
    font-weight: 500;
    font-size: 26px;
}
.cover-top .brandName img {
    width: 80px;
    height: 40px;
    border-radius: 2px;
}
.block-brand .cover-img{
    width:100%;
}
.block-brand .cover-img p {
    overflow: hidden;
    width: 230px;
    width:100%;
    height: 240px;
}
.block-brand .cover-img img{
    border-radius: 0;
}
.block-brand .viewModel{
    font-size:26px;
}
.block-brand .btn-more a {
    padding: 6px 10px 8px;
    border-radius: 10px;
    min-width: 135px;
}


small{
    color: #222;
    text-align: center;
    font-family: "Kanit";
    font-size: 12px;
    display: block;
}
.btn-siamphone{
    display: block;
    color: #fff;
    background: #000;
    text-align: center;
    width: 200px;
    margin: 20px auto 0;
    padding: 10px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-family: "Kanit";
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    z-index: 9;
    border: 1px solid #fff0;
}
.btn-siamphone:hover{
    background: #c00;
    color:#fff;
    border: 1px solid #fff;
}

.cover-brand{
    border-radius: 23px;
    margin-bottom: 30px;
    padding-top: 0;
    border-radius: 23px;
    margin-bottom: 0;
    margin-top:70px;
}
.brand-list{
    padding-right:0;
}
.brand-list ul{
    padding:0;
}
.brand-list ul li{
    list-style-type: none;
    display: inline-block;
    width: 16.5%;
}
.brand-list ul li a{
    display: block;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}
.brand-list ul li a img{
    width: 90px;
    height: auto;
    padding: 15px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    border-radius: 18px;
    transition: all 0.3s;
}
.brand-list ul li a h4{
    font-size: 16px;
    font-weight: 600;
    font-family: 'Roboto';
    margin-top: 15px;
    display: block;
    line-height: 24px;

    display:none;
}
.brand-list ul li a h4 span{
    display: block;
    font-family: 'Kanit';
    font-weight: 300;
    font-size: 16px;
}
.brand-list ul li a:hover{
    color:#c00;
}
.brand-list ul li a:hover img{
    border: 1px solid #000;
    border-radius: 28px;
}

.brand-list ul li a:hover h4 span {
    font-weight: 500;
}






.popular-item{
    position: relative;
    /* float: left; */
    display:inline-block;
    min-height: 220px;
    padding:10px 15px 15px;
    width: 18.5%;
    margin: 0 0.5% 20px;
    border-radius: 8px;
    text-align:center;
    /* border: 1px solid #000000; */
    transition: all 0.3s ease;
    background: #fff;
}
.popular-item:nth-child(n+3){
    /* border:1px solid #000000; */
}
.popular-number{
    font-weight: 700;
    font-size: 17px;
    background: #000000;
    background: linear-gradient(135deg,  rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgb(254 99 0) 100%);
    padding: 0px 10px;
    display: inline-block;
    border-radius: 5px 5px 0 5px;
    margin: 0;
    position: absolute;
    right: -1px;
    top: -1px;
    width: 25px;
    height: 25px;
    padding: 0;
    font-family: 'Roboto';
    color: #fff;
}
.popular-number:before{
    /* content:""; */
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 15px solid transparent;
    border-top: 10px solid #fe6300;
}
.popular-number:after{
    content:""; 
    position:absolute;
    right: 0;
    bottom: -7px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 0 solid transparent;
    border-top: 8px solid #fe6300;
}
.popular-number.red{
    background: #c00;
}
.popular-number.red:before, .popular-number.red:after{
    border-top: 10px solid #c00;
}
.popular-image{
    border-bottom: 0;
    display: table;
    height: 130px;
    padding: 10px 0 10px;
    overflow: hidden;
    width: 100%;
}
.popular-image img{
    display: block;
    margin: 0 auto;
    max-width: 90px;
    width: auto;
    height: auto;
}



#wrapper-watch .popular-item{
    background: #fff9f6;
}
#wrapper-watch .popular-image{
    position: relative;
}
#wrapper-watch .popular-image img{
    z-index: 2;
    position: relative;
    border-radius: 30px;
}
#wrapper-watch .popular-image:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: block;
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 13px #fff0e6;
    border: 1px solid #ffffff;
}
#wrapper-watch .popular-view .text-view{
    color: #61493b;
}


.popular-name{
    display: table;
    overflow: hidden;
    min-height: 58px;
    padding: 5px 0 5px;
    width: 100%;
    border-top: 0;
    transition: all 0.3s ease;
}
.popular-name a{
    text-decoration: none;
    color: var(--home-body-color);
    height: 39px;
    overflow: hidden;
    font-weight: var(--home-fontweight-600);
    font-size: 16px;
    text-shadow: none;
    text-align: center;
    font-family: 'Roboto';
    font-weight: 600;
    line-height: 24px;
}
.popular-view{
    font-family: 'Roboto';
    font-weight: 600;
    font-size: 14px;
    color: #c00;
}
.popular-view .text-view{
    font-size:12px;
    line-height: 21px;
    font-weight: 400;
    color: #61493b;
    padding-right: 0;
}
.popular-view i{
    font-size:12px;
    margin-right:3px;
}
.popular-first {
    /* border: 1px solid #c00; */
}
.popular-first .popular-view{
    /* font-size: 18px; */
}
.popular-first .popular-view s.popular-view i{
    /* font-size:17px; */
}
.popular-spec .slick-list{
    padding:5px 0 0 !important;
}
.popular-nav{
    width:270px !important;
    position: absolute;
    top: 10px;
    right: 0;
}
.popular-nav .slick-slide{
    width: 20px !important;
    height: 20px !important;
    border-radius: 3px !important;
    margin: 0 3px !important;
    background: #edabab;
    text-align: center;
    font-family: 'Roboto';
    font-weight: 600;
    font-size: 14px;
    color:#ffffff;
}
.popular-nav .slick-slide.slick-current {
    background:#c00;
    color:#fff;
}
.popular-nav .slick-list{padding:0 !important;}
.popular-nav .slick-slider .slick-track{margin:0 !important;}
.slick-prev:before, .slick-next:before {
    color: var(--home-blackwhite-color);
    opacity:0.3;
}


@media (min-width:992px){


}

@media (min-width: 769px) and (max-width: 991px){
    *, ::after, ::before {
        /* box-sizing: border-box;  */
    }
   
   .wrapper-top100, .top-head h2{
        width:94%;
    }
    .top-head h1 img{
        max-width: 700px;
        
        width: 100%;
        margin-left:0;
    }



}
@media (max-width: 768px){
    body{
        /*background-color: yellow;*/
        background: #fdf9ee;
    }
    *, ::after, ::before {
         /* box-sizing: border-box;  */
    }
    .wrapper-top100, .top-head h2{
        width:94%;
    }
    .top-head{
        padding: 50px 20px 5%;
        background-size: 25%, 25%;
        /* background-repeat: repeat-y; */
    }
    .top-head:before{
        background-size: 60%;
    }
    .top-head h1{
        z-index: 1;
        position: relative;
    }
    .top-head h1 img {
        margin-bottom: 50px;
        width: 110%;
        margin-left: -5%;
    }
    .top-head h3{
        font-size: 20px;
        padding: 7px 15px 7px;
        margin-bottom:40px;
    }
    .top-head h3 span{
        display:none;
    }
    .top-head h2{
        font-size:16px;
        font-weight: 400;
        margin-bottom: 20px;
    }
    .top-head h2 span, .top-head h2 br{
        display:none;
    }
    .title-name h3{
        font-size:30px;
    }
    .cate-tab{
        overflow-x: auto;
        overflow-y: hidden;
        display: block;
        width: 100%;
        white-space: nowrap;
    }
    #footer_copyright .footer_cover{
        width: 100%;
        display: block;
        text-align: center;
    }
    #footer_copyright .siamphone_logo{
        margin:0;
        float:none;
        width:100%;
    }
    #footer_copyright p.right_reserved_text{
        line-height: 22px;
        float:none;
        text-align: center;
    }
    #footer_copyright p.social_network{
        float:none;
        text-align: center;
        clear: both;
    }
    h3{
        z-index: 9;
        position: relative;
    }
    .title-name strong{
        display:inline-block;
        margin-top: 20px;
    }
    .block-smartphone, .block-tablet, .block-smartwatch, .block-review, .block-video{
        width:90%;
        margin:0 auto 50px;
        padding:30px 25px 50px;
    }
    .block-review{
        padding:0;
    }
    .block-smartphone .cover-top .number,.block-tablet .cover-top .number,.block-smartwatch .cover-top .number{
        top: -113px;
        display: block;
    }
    .cover-top .number span{
        /* font-size: 40px;
        width: 70px;
        height: 70px;
        line-height: 70px; */
    }
    .cover-top a, .block-tablet .cover-top a{
        font-size: 30px !important;
        margin-left: 0;
        text-align: center;
        line-height: 36px !important;
    }
    .cover-img, .cover-img p{
        width:100%;
        text-align: center;
    }
    .cover-img p{
        height: 350px;
    }
    .cover-img img{border-radius:0;max-width: 300px;}
    .cover-left, .cover-right{
        position: relative;
    }
    .cover-left {
        top: 7%;
        left:0;
        width: 45%;
        text-align: left;
    }
    .cover-right, .block-tablet .cover-right {
        top: 50%;
        right: 0;
        width: 45%;
        text-align: right;
        position:absolute;
    }
    .cover-top .brand{right:0;}
    .box{
        font-size: 14px;
        width: 100%;
    }
    .box2, .boxbox2{margin: 13px 0;}
    .box3, .boxbox3{margin:0;}
    .box4, .boxbox4{right:0;}
    .box5, .boxbox5{margin:15px 0;}
    .boxbox6{margin:0;}
    .viewModel{font-size:30px;}
    .cover-detail{
        margin-top:30px;
        position: relative;
    }

    /* tablet */
    .block-tablet .cover-img p{
        height:280px;
    }
    .block-tablet .cover-detail{
        width:100%;
        bottom: auto;
        position: relative;
        margin-top:30px;
    }
    .block-tablet .cover-right {
        top: 46%;
    }

    .tab-content > [id='tab-01']:before, .tab-content > [id='tab-02']:before, .tab-content > [id='tab-03']:before,  .tab-content > [id='tab-05']:before{
        background-size:50%;
        background-position: -30% 0, 130% 0;
    }

    /* smartwatch */
    .block-smartwatch .cover-top a{
        font-size:25px;
        text-align: center;
    }
    .smartwatchCover{
        display:block;
        margin:0;
    }
    .smartwatchImg, .smartwatchDetail{
        display:block;
        width:100%;
    }
    .smartwatchImg img {
        max-height: 200px;
        max-height: 250px;
        width: auto;
        height: auto;
        margin: 0 auto 25px;
        display: block;
        padding: 10px 50px;
    }
    .smartwatchDetail{margin:0;}
    .smartwatchDetail ul li{text-align:center !important;}
    .special_function{display:block;}


    /*news */
    #wrapper-news .title-name h3{margin-bottom: 0;}
    .block-news{
       
        border-radius: 13px;
    }
    .block-news .cover-top .number, .block-review .cover-top .number{
        top:-125px;
        display: block;
        color: transparent;
    }
    .block-news h4 a, .block-review h4 a{
        font-size: 16px;
        margin: 0;
        display: block;
        text-align: center;
        line-height: 22px;
        font-weight: 500;
    }
    .block-news h4 a{
        padding: 20px 15px 10px;
    }
    .block-news img{
        width:100%;
        height:auto;
    }
    .sub_head {
        margin: 20px 0 10px;
    }

    /* video */    
    .tab-content > [id='tab-06']{padding-top:0;}
    .tab-content > [id='tab-06']:before{
        background-attachment: initial;
        background-size: 60%;
        background-position: -83% 0, 150% 0;
        background-repeat: repeat-y;
    }
    .block-video{padding:30px 0 50px;}
    .video-name h4{line-height: 32px;}
    .video-block .video-image{padding: 0;}


    /* brand */
    .block-brand{    
        width:100%;
        margin: 0 auto 75px;
        padding: 30px 15px 30px;
    }
    .block-brand .cover-img{
        width:100%;
    }
    .block-brand .cover-img p{
        width:100%;
        height:auto;
    }
    .block-brand .cover-img img{
        margin-top:0;
    }
    .block-brand .cover-top{
        margin-bottom:0;
    }
    .block-brand .cover-top a{
        font-size: 20px !important;
        line-height: 28px !important;
        margin:0;
        height: 60px;
        padding-top: 5px;
    }
    .cover-top .brandName a{
        font-size: 18px !important;
        line-height: 32px !important;
        height:auto;
    }
    .cover-top .brandName img {
        width: 60px;
        height: 30px;
    }
    .block-brand .viewModel {
        font-size: 22px;
    }
    .block-brand .btn-more a {
        padding: 6px 10px 8px;
        border-radius: 10px;
        min-width: 135px;
        font-size: 16px;
    }
    .brandName{
        width: 100px;
        height: 100px;
        padding: 11px 0 10px;
        margin: -100px auto 20px;
    }


    .popular-item{
        width:48%;
    }
    .swiper-pagination-bullet {
        width: 20px;
        height: 20px;
        font-size: 14px;
        line-height: 22px;
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap,3px);
    }
    .swiper-pagination-bullet-active {
        font-size: 18px;
        line-height: 18px;
        padding-top: 2px;
    }
}