*, ::after, ::before{
    box-sizing:unset;
}

body{
    margin:0;
    padding:0;
    background:#fff8ea url(//www.siamphone.com/images/top100/bg-roadlight.png) no-repeat right bottom;
   
    --bgli: #ffbfbf;
}
.header-wrapper {
    box-shadow: none;
    background: #fff8ea; 
}
p{
    line-height: 1.3;
}


.block-cover{
    position: relative;    
    padding: 10px 10px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    z-index:99;
    box-shadow: 6px 6px 0 #000;
    border: 1px solid #000000;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.block-cover:hover{
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    box-shadow: 10px 10px 0 #000;
    
    z-index:1000;
}
.block-image{
    position: relative;
    width: 30%;
    display: inline-block;
    text-align:center;
}
.block-image img{
    height:85px;
    width:auto;
}
.block-image span{
    position: absolute;
    left: -17px;
    top: -22px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 30px;
    font-size:20px;

    font-weight: bold;
    font-family: 'Roboto';
    color: #000000;
    box-shadow: 1px 4px 0px #000;
    border: 2px solid #000;
    
    color:#fff;
    background: #cc0000 !important;

    /* background-color: hsl(calc(var(--hue)*360/20),90%,65%);
    background-color: hsl(calc(var(--hue)*360/20),70%,40%);
    text-shadow: 1px 2px 0px hsl(calc(var(--hue)*360/20),90%,40%); */
}
.block-detail{
    width: 65%;
    margin-left:5%;
    display: inline-block;
}
.titleModel a{
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    font-family: 'Roboto';
    margin-bottom: 0;
    font-weight: 600;
    text-decoration:none;
    color: #000;
}
.viewModel{
    line-height: 24px;
    height: 18px;
    margin: 0;
    font-weight: 600;
    font-family: 'Roboto';
    font-size: 17px;
    color: #cc0000 !important;
    position: absolute;
    bottom: 15px;

    /* color: hsl(calc(var(--hue)*360/20),70%,40%); */
}
.list-view em {
    font-size: 13px;
    padding-right: 3px;
}
.wrapper-top100{
    position: relative;
    overflow: hidden;
    max-width: 1600px;
    margin: 0 auto;
    width:100%;
}
.viewModel a{
    display:none;
}
ul.top100 li:hover .viewModel a{
    display:block;
}
ul.top100 li:after{
    content: "";
    position: absolute;
    left: -46px;
    z-index: 9;
    bottom: 83px;
    width: 150%;
    height: 3px;
    background:url(//www.siamphone.com/images/top100/line-x-black.png) repeat-x;

    border: 0;
    top: auto;
}


.infoitem{
    width: 80px;
    height: 80px;
    position: absolute;
    opacity: 0.05;
}
.info-item01{
    background:url(//www.siamphone.com/images/infographic/info-item01.png) no-repeat;
    background-size:100%;
    top:23%;
    right:20%;
}
.info-item02{
    background:url(//www.siamphone.com/images/infographic/info-item02.png) no-repeat;
    background-size:80%;
    top:50%;
    left:8%;
}
.info-item03{
    background:url(//www.siamphone.com/images/infographic/info-item03.png) no-repeat;
    background-size:80%;
    top: 70%;
    left: 13%;
}
.info-item04{
    background:url(//www.siamphone.com/images/infographic/info-item04.png) no-repeat;
    background-size: 80%;
    top: 76%;
    right: 13%;
}
.info-item05{
    background:url(//www.siamphone.com/images/infographic/info-item05.png) no-repeat;
    background-size: 70%;
    top: 90%;
    right: 18%;

    display:none;
}
.info-item07{
    background:url(//www.siamphone.com/images/infographic/info-item07.png) no-repeat;
    background-size: 80%;
    top: 87%;
    left: 18%;
}
.info-item08{
    background:url(//www.siamphone.com/images/infographic/info-item08.png) no-repeat;
    background-size: 90%;
    top: 27%;
    left: 15%;
}
.info-item09{
    background:url(//www.siamphone.com/images/infographic/info-item09.png) no-repeat;
    background-size: 80%;
    top: 50%;
    right: 10%;
}
.top-banner{
    /* position: sticky; */
    top: 0;
    /* background: #fdfdfd;  */
    z-index: 0;
    padding: 70px 0;
    text-align: center;
    margin-top:1px;

    display:none;
}

.top-head{
    /* background: url(//www.siamphone.com/images/top100/bg-top5.png) no-repeat top center,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: url(//www.siamphone.com/images/top100/bg-top5.png) no-repeat top center;
    position: relative;
    text-align:center;
    padding:100px 0 20px;
    padding: 100px 0 20px;
}
.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 50px;
}
.top-head h1 b{

}
.top-head h1 span{
    
    font-size:100px;
}
.top-head h1 img{
    width:100%;
    max-width:800px;
    height:auto;
}
.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: 600;
    font-family: 'Kanit';
    background: #e21e2f;
    display: inline-block;
    padding: 7px 25px 9px;
    border-radius: 30px;
    margin: 0 0 50px 0;
    color: #ffffff;
    font-size: 26px;
    border: 3px solid #000;
    
    box-shadow: 0px 10px 0 #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%;

    display:none;
}

.top100_detail {
    font-size: 12px;
    text-align: left;
    margin: 0 0 0 40px;
    display: block;
}
ul.top100 li:last-child{position:relative;}
.fire01{
    position:absolute;
    top:-50px;
}


.cover{
    width:98%;
    overflow:hidden;
    margin:20px auto 100px;
}
.bottom-image{
    width:35%;
    float:left;
    text-align:center;
}
.bottom-image img{
    
}
.bottom-card{
    width:65%;
    float:left;
    font-family:"Kanit",'Roboto';
}
.card{
    background:#fff;
    border-radius: 5px;
    border: 1px solid #222222;
    padding: 2% 2%;
    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(10 * 0.5px) calc(10 * 0.5px);
    color: rgb(66 88 202 / 30%);
}
.card h3{
    text-align: center;
    font-weight: 600;
    color:#222222;
}
.card h4 a{
    font-size: 110px;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #000;
    font-family: 'Roboto';
}

.ticket {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 980px;
    margin:60px auto 30px;
    box-shadow: 16px 17px 0 rgb(0 0 0 / 40%);
    border-radius: 12px 7px;
    }
    .ticket .stub,
    .ticket .check {
    box-sizing: border-box;
    }
    .stub {
    background: #1c1c1c;
    height: 300px;
    width: 250px;
    color: white;
    padding: 20px;
    position: relative;
    border-radius: 8px 0 0 8px;

    text-align:center;
    }
    .stub:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-top: 20px solid #fff8ea;
    border-left: 20px solid #1c1c1c;
    width: 0;
}
.stub:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 20px solid #999898;
    border-left: 20px solid #1c1c1c;
    width: 0;
}
.stub .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
    height: 40px;
    text-transform: uppercase;
}
.stub .top .admit {
    padding: 0 12px 0 30px;
}
.stub .top .line {
    display: block;
    background: #fff;
    height: 40px;
    width: 1px;
    margin: 0 20px;
}
.stub .top .num {
    font-size: 10px;
}
.stub .top .num span {
    color: #e00;
    display: block;
}
.stub .number {
    width: 100%;
    font-size: 150px;
    line-height: 168px;
    text-align: center;    
    color: #e00;
}
.stub .invite {
    position: absolute;
    left: 150px;
    bottom: 45px;
    color: #000;
    width: 20%;
}
.stub .invite:before {
    content: '';
    background: #fff;
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 5px;
}
.stub .viewModel{
    width: 235px;
    left: 0;
    bottom: 30px;
}
.check {
    background: #ffdfdf;
    background:#ffbfbf;
    height: 300px;
    width: 800px;
    padding: 40px;
    position: relative;
    border-radius: 0 8px 8px 0;
    color: #ffffff78;
    background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
    background-position: 0 0,10px 10px;
    background-size: calc(2 * 10px) calc(2 * 10px);
}
.check:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 20px solid #fff8ea;
    border-right: 20px solid #ffdfdf;
    width: 0;
}
.check:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 20px solid #999898;
    border-right: 20px solid #ffdfdf;
    width: 0;
}
.check .big{
    margin: -10px 0 30px;
}
.check .big a{
    font-size: 80px;
    font-weight: 900;
    line-height: 1em;
    font-family: 'Roboto';
    color: #d00;
    text-decoration:none;
}
.check .big a:hover{
    color:#c00;
}
.check .number {
    position: absolute;
    top: 35px;
    right: 25px;
    color: #ef5658;
    font-size: 40px;
}
.check .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-size: 12px;
    margin-top: 20px;
}
.check .info section {
    position: relative;
    padding: 0 30px 0 0;
    color:#000;
}
.check .info section:before {
    content: '';
    background: #d6baba;
    display: block;
    width: 1px;
    height: 42px;
    margin-bottom: 5px;
    border-radius: 30px;
    position: absolute;
    right: 14px;
    top: -3px;
}
.check .info section .title {
    font-size: 12px;
    text-transform: uppercase;
    font-weight:600;
    text-align:center;
}
.top-info{    
    width:48%;
    float:left;
}
.top-detail {
    width:52%;
    float:left;
}  
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;}
.top-detail ul{
    font-family: 'Roboto', "Kanit", sans-serif;
    font-weight: normal;
    line-height: 34px;
    padding: 10px 10px;
    margin: -15px 0 0;
    background: #fff;
    border-radius: 3px;
}
.top-detail ul li{
    list-style-type: none;
    /* background: #ffffff87; */
    margin: 3px 0;
    font-size: 15px;
    padding: 1px 10px;
    border-radius: 6px;
    font-weight: 300;
    /* font-weight: 500; */
    color:#000;
}
.top-detail a{
    background: #e00;
    color: #fff;
    text-decoration: none;
    padding: 6px 5px 8px;
    border-radius: 30px;
    width: 110px;
    display: block;
    text-align: center;
    font-weight: 500;
    position: absolute;
    right: 25px;
    bottom: 30px;
    transition: all 0.3s;
    text-shadow: 1px 1px 0px #b10000;
}
.top-detail a:hover{
    background: #c00;
}

#back-top {position:fixed;bottom:15px;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:#d00 url(//www.siamphone.com/images/arrow_up_wh.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{height:35px;max-width:1500px;width:100%;margin:10px auto 0}
div#footer_copyright{padding:0;width:100%;font:10px/30px Arial;height:30px}
#footer_copyright .siamphone_logo{float: left;margin:-1px 6px 0;background: url(//www.siamphone.com/images/siamphone_logo_2x.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:5px;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:#222}


ul.top100 {
    margin: 0;
    list-style: none;
    padding: 0;
    --hue: 1;
    --unit: 1rem;
}
ul.top100 li {
    --height: 7rem;
    position: relative;
    display: block;
    background-color: hsl(calc(var(--hue)*300/20),90%,65%);
    border-color: hsl(calc(var(--hue)*300/20),90%,65%);

    background-color: hsl(calc(var(--hue)*300/20),50%,65%);
    border-color: hsl(calc(var(--hue)*300/20),50%,65%);
    padding:2rem 1.2rem 2rem 0.8rem;
  
    margin: 2rem 0;


    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(10 * 0.5px) calc(10 * 0.5px);
    color: rgb(255 255 255 / 30%);

    background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
    background-position: 0 0,10px 10px;
    background-size: calc(2 * 10px) calc(2 * 10px);
}
ul.top100 li::before {
    content: "";
    background-color: inherit;
    position: absolute;
    display: block;
    width: var(--unit);
    height: var(--unit);
    top: 100%;
    left: calc(50% - (var(--unit)/2));

    background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
    background-size: calc(10 * 0.5px) calc(10 * 0.5px);
    /* color: rgb(255 255 255 / 30%);
    /* background: var(--bgli) url(images/top100/line-x.png)repeat-x center left; */

    background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
    background-position: 0 0,10px 10px;
    background-size: calc(2 * 10px) calc(2 * 10px);
}

ul.top100 li:last-child::before,
ul.top100 li:last-child::after {
    content: none;
}

ul.top100 li:nth-child(20n+1) .block-image span{
    --hue: 1;
}
ul.top100 li:nth-child(20n+2) .block-image span{
    --hue: 2;
}
ul.top100 li:nth-child(20n+3) .block-image span{
    --hue: 3;
}
ul.top100 li:nth-child(20n+4) .block-image span{
    --hue: 4;
}
ul.top100 li:nth-child(20n+5) .block-image span{
    --hue: 5;
}
ul.top100 li:nth-child(20n+6) .block-image span{
    --hue: 6;
}
ul.top100 li:nth-child(20n+7) .block-image span{
    --hue: 7;
}
ul.top100 li:nth-child(20n+8) .block-image span{
    --hue: 8;
}
ul.top100 li:nth-child(20n+9) .block-image span{
    --hue: 9;
}
ul.top100 li:nth-child(20n+10) .block-image span{
    --hue: 10;
}
ul.top100 li:nth-child(20n+11) .block-image span{
    --hue: 11;
}
ul.top100 li:nth-child(20n+12) .block-image span{
    --hue: 12;
}
ul.top100 li:nth-child(20n+13) .block-image span{
    --hue: 13;
}
ul.top100 li:nth-child(20n+14) .block-image span{
    --hue: 14;
}
ul.top100 li:nth-child(20n+15) .block-image span{
    --hue: 15;
}
ul.top100 li:nth-child(20n+16) .block-image span{
    --hue: 16;
}
ul.top100 li:nth-child(20n+17) .block-image span{
    --hue: 17;
}
ul.top100 li:nth-child(20n+18) .block-image span{
    --hue: 18;
}
ul.top100 li:nth-child(20n+19) .block-image span{
    --hue: 19;
}
ul.top100 li:nth-child(20n+20) .block-image span{
    --hue: 20;
} 




ul.top100 li:nth-child(-n+100) .block-image span{
    --hue: 20;
}
ul.top100 li:nth-child(-n+95) .block-image span{
    --hue: 19;
}
ul.top100 li:nth-child(-n+90) .block-image span{
    --hue: 18;
}
ul.top100 li:nth-child(-n+85) .block-image span{
    --hue: 17;
}
ul.top100 li:nth-child(-n+80) .block-image span{
    --hue: 16;
}
ul.top100 li:nth-child(-n+75) .block-image span{
    --hue: 15;
}
ul.top100 li:nth-child(-n+70) .block-image span{
    --hue: 14;
}
ul.top100 li:nth-child(-n+65) .block-image span{
    --hue: 13;
}
ul.top100 li:nth-child(-n+60) .block-image span{
    --hue: 12;
}
ul.top100 li:nth-child(-n+55) .block-image span{
    --hue: 11;
}
ul.top100 li:nth-child(-n+50) .block-image span{
    --hue: 10;
}
ul.top100 li:nth-child(-n+45) .block-image span{
    --hue: 9;
}
ul.top100 li:nth-child(-n+40) .block-image span{
    --hue: 8;
}
ul.top100 li:nth-child(-n+35) .block-image span{
    --hue: 7;
}
ul.top100 li:nth-child(-n+30) .block-image span{
    --hue: 6;
}
ul.top100 li:nth-child(-n+25) .block-image span{
    --hue: 5;
}
ul.top100 li:nth-child(-n+20) .block-image span{
    --hue: 4;
}
ul.top100 li:nth-child(-n+15) .block-image span{
    --hue: 3;
}
ul.top100 li:nth-child(-n+10) .block-image span{
    --hue: 2;
}
ul.top100 li:nth-child(-n+5) .block-image span{
    --hue: 1;
}  



@media (min-width:992px){
    ul.top100  {
        max-width: 1600px;
        margin: 0 auto;
        width:100%;
    }
    ul.top100 li {
        margin: 3rem 1rem;
        width: calc(20% - 4rem);
        float: left;
        min-height: 7rem;

        background-color:var(--bgli);
    }
    ul.top100 li:hover{

    }
    ul.top100 li:before{
        width: 100%;
        left: 0;
        height: 7rem;
    }
    /* li:after{content:none;} */

    ul.top100 li:nth-child(10n+6),
    ul.top100 li:nth-child(10n+7),
    ul.top100 li:nth-child(10n+8),
    ul.top100 li:nth-child(10n+9){
        float: right;
    }
    ul.top100 li:nth-child(10n+1)::before,
    ul.top100 li:nth-child(10n+2)::before,
    ul.top100 li:nth-child(10n+3)::before, 
    ul.top100 li:nth-child(10n+4)::before{
        top: calc(var(--height)/2 + var(--unit)/2);
        left: 100%;

        left: 100%;
        top: 0;
        width: 2rem;
        height: 100%;

        top:0;

        width: 3rem;
        height: 100%;
        top: 0;
        left: 97%;
    }
    /* li:nth-child(10n+1)::after,
    li:nth-child(10n+2)::after,
    li:nth-child(10n+3)::after,
    li:nth-child(10n+4)::after{
        top: calc(var(--height)/2);
        left: calc(100% + (var(--unit)));
        border: var(--unit) solid transparent;
        border-left-color: inherit;
    } */
    ul.top100 li:nth-child(10n+6)::before,
    ul.top100 li:nth-child(10n+7)::before,
    ul.top100 li:nth-child(10n+8)::before,
    ul.top100 li:nth-child(10n+9)::before {
        top: calc(var(--height)/2 + var(--unit)/2);
        left: -1rem;

        left: -2.5rem;
        height: 100%;
        top: 0;
        width: 2.5rem;

        top:0;
    }
    /* li:nth-child(10n+6)::after,
    li:nth-child(10n+7)::after,
    li:nth-child(10n+8)::after ,
    li:nth-child(10n+9)::after {
        top: calc(var(--height)/2);
        left: -3rem;
        border: var(--unit) solid transparent;
        border-right-color: inherit;
    } */
    ul.top100 li:nth-child(5n)::before{
        left: 1px;
        left:0;
        width: 100%;

        /* background:var(--bgli) url(images/top100/line-y.png)repeat-y center top; */
        /* background: linear-gradient(to bottom, hsl(calc(var(--hue)*300/20),50%,65%) 0%, hsl(calc(var(--hue2x)*300/20),50%,65%) 100%); */
        background:var(--bgli);
    }
    
    /* li:nth-child(5n) .block-cover:before{
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        top: 135%;
        left: auto;
        right: 0;
        background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
        background-size: calc(10 * 0.5px) calc(10 * 0.5px);
        height: 100%;
        right: -7%;
        width: 112%;
    } */
    ul.top100 li:nth-child(10n)::before{
        left:0;
    }
    ul.top100 li:nth-child(5n+1){
    }
    ul.top100 li:nth-child(1):after{
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        border: 0;
        background: #000;
    }

    ul.top100 li:nth-child(5n)::after{
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        top: 175px;
        left: auto;
        right: 1px;
        width: 100%;
        height: 55%;
        border: 0;
        /* background: radial-gradient(currentColor 0.5px, transparent 0.5px); */
        background: var(--bgli);
        background-size: calc(10 * 0.5px) calc(10 * 0.5px);
        /* color: rgb(255 255 255 / 30%); */

        background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
        background-position: 0 0,10px 10px;
        background-size: calc(2 * 10px) calc(2 * 10px);
    }

    ul.top100 li:nth-child(5n+1)::after{
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        top: -75%;
        left: auto;
        right: 50%;
        width: 3px;
        height:95%;
        border: 0;
        
        background:url(//www.siamphone.com/images/top100/line-y-black.png) repeat-y;
    }
    ul.top100 li:nth-child(10n)::after{
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        top: 10px;
        left:0;
        width: 2px;
        height:100%;
        border: 0;
        
        
        top: 175px;
        left: auto;
        right: 1px;
        width: 100%;
        height: 55%;
        border: 0;
         background: radial-gradient(currentColor 0.5px, transparent 0.5px); 
        background-size: calc(10 * 0.5px) calc(10 * 0.5px);
        /* color: rgb(255 255 255 / 30%); */

        background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
        background-position: 0 0,10px 10px;
        background-size: calc(2 * 10px) calc(2 * 10px);
    }
    ul.top100 li:nth-child(10n+1)::after{
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        top: -75%;
        left: 50%;
        width: 3px;
        height: 95%;
        border: 0;
        background:url(//www.siamphone.com/images/top100/line-y-black.png) repeat-y;
    }

    ul.top100 li:last-child::after{
        content:none;
    }
    ul.top100 li:first-child::after{
        content:none;
    }
 
    /* ul.top100 li:nth-child(-n+100){
        --hue: 20;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+95){
        --hue: 19;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+90){
        --hue: 18;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+85){
        --hue: 17;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+80){
        --hue: 16;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+75){
        --hue: 15;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+70){
        --hue: 14;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+65){
        --hue: 13;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+60){
        --hue: 12;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+55){
        --hue: 11;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+50){
        --hue: 10;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+45){
        --hue: 9;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+40){
        --hue: 8;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+35){
        --hue: 7;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+30){
        --hue: 6;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+25){
        --hue: 5;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+20){
        --hue: 4;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+15){
        --hue: 3;
        --hue2x :calc(var(--hue) + 1);
    } */
    ul.top100 li:nth-child(-n+100){
        --hue: 2;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+50){
        --hue: 1;
        --hue2x :calc(var(--hue) + 1);
    }  

    /* border radius */
    ul.top100 li:nth-child(5n){
        border-radius:0 13px 0 0;
    }
    ul.top100 li:nth-child(5n+1){
        border-radius:0 0 13px 0;
    }
    ul.top100 li:nth-child(10n){
        border-radius:13px 0 0 0;
    }
    ul.top100 li:nth-child(10n+1){
        border-radius:0 0 0 13px;
    }
    
    ul.top100 li:nth-child(1){
        border-radius:13px 0 0 13px;
    }
    
    ul.top100 li:last-child{
        border-radius:13px 0 0 13px;
    }

}

@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: 500px;
    }
    .titleModel a{
        font-size:18px;
    }
    .bottom-card{
        width:98%;
    }
    .ticket, .stub .viewModel, .top-info, .check{
        width:100%;
    }
    .stub .top .admit{
        width:100%;
        padding:0;
    }
    .stub .top .line, .stub .top .num, .top-detail ul{
        display:none;
    }
    .check .number, .top-detail a{
        z-index:9;
    }
    .top-detail a{
        width:186px;
    }
    .bottom-image {
        width: 30%;
        position: absolute;
        right: 20px;
        margin-top: 85px;
    }
    .bottom-image img {
        width: 100%;
        height: auto;
    }
    .top100_detail{
        text-align:center;
        margin:0;
    }

    ul.top100 li {
        width: calc(33.33% - 4rem);
        margin: 2rem 0;
        width: 33.33%;
        float: left;
        min-height: 7rem;
        background-color:var(--bgli);
    }
    ul.top100 li::before {
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        width: 30%;
        height: 3rem;
        top: 0;
        left: 0;
        background-color: hsl(calc(var(--hue)*300/20),50%,65%);
        background-color: var(--bgli);
        border-color: hsl(calc(var(--hue)*300/20),50%,65%);
    }
    ul.top100 li::after {
        content: "";
        position: absolute;
        display: block;
        top: 94%;
        left: calc(50% - (var(--unit)/2));
        background: green;
        width: 100%;
        height: 25%;
        height: 63%;
        left: 0;
        background-color: hsl(calc(var(--hue)*300/20),50%,65%);
        background-color: var(--bgli);
        border-color: hsl(calc(var(--hue)*300/20),50%,65%);

        background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
        background-size: calc(10 * 0.5px) calc(10 * 0.5px);
        color: rgb(255 255 255 / 30%);
/* 
        background: linear-gradient(to bottom, hsl(calc(var(--hue)*300/20),50%,65%) 0%, hsl(calc(var(--hue2x)*300/20),50%,65%) 100%);

      */
    background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
    background-position: 0 0,10px 10px;
    background-size: calc(2 * 10px) calc(2 * 10px);
    }
    ul.top100 li:last-child::before,
    ul.top100 li:last-child::after {
        content: none;
    }
    ul.top100 li:nth-child(6n+4),
    ul.top100 li:nth-child(6n+5),
    ul.top100 li:nth-child(6n+6) {
        float: right;
    }
    ul.top100 li:nth-child(6n+1)::before{
        left: 94%;
        width: 13%;
        height: 100%;
        top: 0;
        background: blue;
        background: url(//www.siamphone.com/images/top100/line-x-black.png) repeat-x center;
        z-index: 9;
    }
    
    ul.top100 li:nth-child(6n+2)::before {
        left: 94%;
        width: 13%;
        height: 100%;
        top: 0;
        background: url(//www.siamphone.com/images/top100/line-x-black.png) repeat-x center;
        z-index: 9;
    }
    ul.top100 li:nth-child(6n+6)::before{
        left:50%;
    }
    ul.top100 li:nth-child(6n+1)::after{
        top: auto;
        left: 0;
        bottom: -32px;
        bottom: -32px;
        top: -75%;
        left: auto;
        right: 50%;
        width: 4px;
        height: 95%;
        border: 0;
        background: url(//www.siamphone.com/images/top100/line-y-black.png) repeat-y;
    }
    ul.top100 li:nth-child(6n+2)::after {
        top: auto;
        left: 0;
        bottom: -32px;
        background: #fff8ea;
        height:31px;
    }
    ul.top100 li:nth-child(6n+4)::before{
        top: calc(var(--height)/2 + var(--unit)/2);
        left: -1rem;
        
        background: url(//www.siamphone.com/images/top100/line-x-black.png) repeat-x center;
        z-index: 9;
    }
    ul.top100 li:nth-child(6n+5)::before{
        top: calc(var(--height)/2 + var(--unit)/2);
        left: -1rem;
        
        background: url(//www.siamphone.com/images/top100/line-x-black.png) repeat-x center;
        z-index: 9;
    }
    ul.top100 li:nth-child(6n+4)::after{
        top: -19%;
        left: 0;
        top: auto;
        left: 0;
        bottom: -32px;
        top: -75%;
        left: auto;
        right: 50%;
        width: 4px;
        height: 95%;
        border: 0;
        background: url(//www.siamphone.com/images/top100/line-y-black.png) repeat-y;
    }
    ul.top100 li:nth-child(6n+5)::after{
  
        top: -19%;
        left: 0;
        top: auto;
        left: 0;
        bottom: -32px;
        background: #fff8ea;
        height:31px;
    }
    ul.top100 li:nth-child(1)::after{
        content:none;
    }
    ul.top100 li:nth-child(3n){
        border-radius:0 13px 0 0; 
    }
    ul.top100 li:nth-child(6n+4){
        border-radius:0 0 13px 0; 
    }

    ul.top100 li:nth-child(6n+1){
        border-radius:0 0 0 13px; 
    }    
    ul.top100 li:nth-child(6n+6){
        border-radius:13px 0 0 0;
    }
    ul.top100 li:nth-child(1){
        border-radius:13px 0 0 13px; 
    }
    ul.top100 li:last-child{
        border-radius:13px 0 0 13px; 
        display:none;
    } 
    ul.top100 li:nth-child(99):after{
        content:none;
    } 

/* 
    ul.top100 li:nth-child(-n+100){
        --hue: 34;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+99){
        --hue: 33;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+96){
        --hue: 32;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+93){
        --hue: 31;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+90){
        --hue: 30;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+87){
        --hue: 29;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+84){
        --hue: 28;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+81){
        --hue: 27;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+78){
        --hue: 26;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+75){
        --hue: 25;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+72){
        --hue: 24;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+69){
        --hue: 23;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+66){
        --hue: 22;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+63){
        --hue: 21;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+60){
        --hue: 20;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+57){
        --hue: 19;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+54){
        --hue: 18;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+51){
        --hue: 17;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+48){
        --hue: 16;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+45){
        --hue: 15;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+42){
        --hue: 14;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+39){
        --hue: 13;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+36){
        --hue: 12;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+33){
        --hue: 11;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+30){
        --hue: 10;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+27){
        --hue: 9;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+24){
        --hue: 8;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+21){
        --hue: 7;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+18){
        --hue: 6;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+15){
        --hue: 5;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+12){
        --hue: 4;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+9){
        --hue: 3;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+6){
        --hue: 2;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+3){
        --hue: 1;
        --hue2x :calc(var(--hue) + 1);
    }   */


}
@media (max-width: 768px){
    body{/*background-color: yellow;*/}
    *, ::after, ::before {
         box-sizing: border-box; 
    }
    .wrapper-top100, .top-head h2{
        width:94%;
    }
    .top-head{
        padding: 100px 20px 5%;
        background-size: 150%, 50%, 50%;
    }
    .top-head h1{
        margin-bottom:30px;
    }
    .top-head h3{
        box-shadow: 0px 6px 0 #000;
        font-size: 16px;
        padding: 7px 15px 7px;
        margin-bottom:40px;
    }
    .top-head h2{
        font-size:16px;
        font-weight: 400;
    }
    .top-head h2 span, .top-head h2 br{
        display:none;
    }
    .titleModel a{
        font-size: 16px;
        line-height: 21px;
    }
    .block-image{
        width:35%;
    }
    .block-image img {
        height: 75px;
    }
    .block-image span {
        top: -32px;
        width: 35px;
        height: 35px;
        line-height: 33px;
        font-size: 16px;

        background-color: hsl(calc(var(--hue)*300/20),70%,45%);
        text-shadow:none;
    }
    .viewModel{
        font-size:15px;
        color: hsl(calc(var(--hue)*300/20),70%,45%);
    }

    .bottom-card{
        width:96%;
    }
    .ticket, .stub .top, .stub .viewModel, .top-info{
        width:100%;
    }
    .ticket .stub{
        width:45%;
    }
    .stub .top .admit{
        width:100%;
        padding:0;
    }
    .stub .top .line, .stub .top .num, .check .info, .top-detail ul{
        display:none;
    }
    .check .big{
        margin:30px 0 0;
    }
    .check .big a{
        font-size: 48px;
        line-height: 62px;
    }
    .top-detail a{
        width: 75%;
    }
    .ticket .check{
        width: 60%;
        padding: 40px 20px 40px 30px;
    }
    .bottom-image {
        text-align: center;
        width: 100%;
    }
    .bottom-image img{
        width:100%;
        height:auto;
    }
    #footer_copyright .siamphone_logo{
        margin:2px 6px 0;
    }
    #footer_copyright p.right_reserved_text{
        line-height: 22px;;
    }
    #footer_copyright p.social_network{
        float:none;
        text-align: center;
        clear: both;
    }


    .top100_detail {
        margin: 0;
        text-align: center;
        line-height: 20px;
    }


    ul.top100 li{
        margin: 1rem;
        width: calc(50% - 4rem);

        margin: 1rem 0;
        width: 50%;

        float: left;
        min-height: var(--height);
    }
    /* li:after{content:none;} */

    /* ul.top100 li:nth-child(2n+6),
    ul.top100 li:nth-child(2n+7){
        float: right;
    }
    ul.top100 li:nth-child(2n+1)::before,
    ul.top100 li:nth-child(2n+2)::before{
        top: calc(var(--height)/2 + var(--unit)/2);
        left: 100%;

        left: 100%;
        top: 0;
        width: 2rem;
        height: 100%;

        top:0;
    }
    ul.top100 li:nth-child(2n+6)::before,
    ul.top100 li:nth-child(2n+7)::before {
        top: calc(var(--height)/2 + var(--unit)/2);
        left: -1rem;

        left: -2.5rem;
        height: 100%;
        top: 0;
        width: 2.5rem;

        top:0;
    } */

    
    ul.top100 li::before {
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        width: var(--unit);
        height: var(--unit);
        top: 100%;
        left: calc(50% - (var(--unit)/2));
      }
      ul.top100 li::after {
        content: "";
        position: absolute;
        display: block;
        top: 100%;
        left: calc(50% - (var(--unit)/2));
        background: green;
        width: 100%;
        height: 40%;
        left: 0;
        background-color: hsl(calc(var(--hue)*300/20),50%,65%);
        background-color: var(--bgli);
        border-color: hsl(calc(var(--hue)*300/20),50%,65%);

        background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
        background-size: calc(10 * 0.5px) calc(10 * 0.5px);
        color: rgb(255 255 255 / 30%);

        /* background: linear-gradient(to bottom, hsl(calc(var(--hue)*300/20),50%,65%) 0%, hsl(calc(var(--hue2x)*300/20),50%,65%) 100%); */

        background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
        background-position: 0 0,10px 10px;
        background-size: calc(2 * 10px) calc(2 * 10px);
      }
      ul.top100 li:last-child::before,
      ul.top100 li:last-child::after {
        content: none;
      }


      ul.top100 li {
        margin: 1.6rem 0;
        padding: 2rem 1rem 1rem;
        width: calc(50% - 2rem);
        float: left;
        min-height: var(--height);
        box-sizing: unset;
        background-color:var(--bgli);
    }
    ul.top100 li:nth-child(4n+3),
    ul.top100 li:nth-child(4n+4) {
        float: right;
    }
    ul.top100 li:nth-child(4n+1)::before {
        left: 100%;
        width: 50%;
        height: 100%;
        top: 0;
        background: blue;
        background-color: hsl(calc(var(--hue)*300/20),50%,65%);
        background-color: var(--bgli);
        border-color: hsl(calc(var(--hue)*300/20),50%,65%);
    }
    ul.top100 li:nth-child(4n+1)::after {
        top: calc(var(--height)/2);
        left: calc(100% + (var(--unit)));

        background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
        background-size: calc(10 * 0.5px) calc(10 * 0.5px);
        color: rgb(255 255 255 / 30%);
        top: -20%;
        left: 0;

        background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
        background-position: 0 0,10px 10px;
        background-size: calc(2 * 10px) calc(2 * 10px);
    }
    ul.top100 li:nth-child(4n+3)::before {
        background: orange;
        width: 2.2rem;
        height: 100%;
        top: 0;
        left: -2.2rem;
        background-color: hsl(calc(var(--hue)*300/20),50%,65%);
        background-color: var(--bgli);
        border-color: hsl(calc(var(--hue)*300/20),50%,65%);
    }
    ul.top100 li:nth-child(4n+3)::after {
        top: calc(var(--height)/2);
        left: -3rem;

        background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
        background-size: calc(10 * 0.5px) calc(10 * 0.5px);
        color: rgb(255 255 255 / 30%);
        top: -21%;
        left: 0;

        background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
        background-position: 0 0,10px 10px;
        background-size: calc(2 * 10px) calc(2 * 10px);
        
    }
    ul.top100 li:nth-child(1)::after{
        content:none;
    }
    /* ul.top100 li:nth-child(-n+100){
        --hue: 50;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+98){
        --hue: 49;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+96){
        --hue: 48;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+94){
        --hue: 47;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+92){
        --hue: 46;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+90){
        --hue: 45;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+88){
        --hue: 44;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+86){
        --hue: 43;
        --hue2x :calc(var(--hue) + 1);
    }    
    ul.top100 li:nth-child(-n+84){
        --hue: 42;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+82){
        --hue: 41;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+80){
        --hue: 40;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+78){
        --hue: 39;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+76){
        --hue: 38;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+74){
        --hue: 37;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+72){
        --hue: 36;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+70){
        --hue: 35;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+68){
        --hue: 34;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+66){
        --hue: 33;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+64){
        --hue: 32;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+62){
        --hue: 31;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+60){
        --hue: 30;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+58){
        --hue: 29;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+56){
        --hue: 28;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+54){
        --hue: 27;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+52){
        --hue: 26;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+50){
        --hue: 25;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+48){
        --hue: 24;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+46){
        --hue: 23;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+44){
        --hue: 22;
        --hue2x :calc(var(--hue) + 1);
    }   
    ul.top100 li:nth-child(-n+42){
        --hue: 21;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+40){
        --hue: 20;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+38){
        --hue: 19;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+36){
        --hue: 18;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+34){
        --hue: 17;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+32){
        --hue: 16;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+30){
        --hue: 15;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+28){
        --hue: 14;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+26){
        --hue: 13;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+24){
        --hue: 12;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+22){
        --hue: 11;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+20){
        --hue: 10;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+18){
        --hue: 9;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+16){
        --hue: 8;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+14){
        --hue: 7;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+12){
        --hue: 6;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+10){
        --hue: 5;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+8){
        --hue: 4;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+6){
        --hue: 3;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+4){
        --hue: 2;
        --hue2x :calc(var(--hue) + 1);
    }
    ul.top100 li:nth-child(-n+2){
        --hue: 1;
        --hue2x :calc(var(--hue) + 1);
    }  */


    /* border radius */
    ul.top100 li:nth-child(2n){
        border-radius:0 13px 0 0; 
    }
    ul.top100 li:nth-child(n+4){
        border-radius: 13px 13px 0 0; 
    }
    ul.top100 li:nth-child(2n+3){
        border-radius: 0 13px 0 0; 
    }
    ul.top100 li:nth-child(2n+1){
        border-radius: 0 0 0 13px; 
    }
    ul.top100 li:nth-child(4n+3){
        border-radius:0 0 13px 0; 
    }
    ul.top100 li:nth-child(1){
        border-radius:13px 0 0 13px; 
    }
    ul.top100 li:last-child{
        border-radius:13px 0 0 13px; 
    } 




    
    ul.top100 li:nth-child(-n+100) .block-image span{
        --hue: 50;
    }
    ul.top100 li:nth-child(-n+98) .block-image span{
        --hue: 49;
    }
    ul.top100 li:nth-child(-n+96) .block-image span{
        --hue: 48;
    }
    ul.top100 li:nth-child(-n+94) .block-image span{
        --hue: 47;
    }
    ul.top100 li:nth-child(-n+92) .block-image span{
        --hue: 46;
    }
    ul.top100 li:nth-child(-n+90) .block-image span{
        --hue: 45;
    }
    ul.top100 li:nth-child(-n+88) .block-image span{
        --hue: 44;
    }
    ul.top100 li:nth-child(-n+86) .block-image span{
        --hue: 43;
    }
    ul.top100 li:nth-child(-n+84) .block-image span{
        --hue: 42;
    }
    ul.top100 li:nth-child(-n+82) .block-image span{
        --hue: 41;
    }
    ul.top100 li:nth-child(-n+80) .block-image span{
        --hue: 40;
    }
    ul.top100 li:nth-child(-n+78) .block-image span{
        --hue: 39;
    }
    ul.top100 li:nth-child(-n+76) .block-image span{
        --hue: 38;
    }
    ul.top100 li:nth-child(-n+74) .block-image span{
        --hue: 37;
    }
    ul.top100 li:nth-child(-n+72) .block-image span{
        --hue: 36;
    }
    ul.top100 li:nth-child(-n+70) .block-image span{
        --hue: 35;
    }
    ul.top100 li:nth-child(-n+68) .block-image span{
        --hue: 34;
    }
    ul.top100 li:nth-child(-n+66) .block-image span{
        --hue: 33;
    }
    ul.top100 li:nth-child(-n+64) .block-image span{
        --hue: 32;
    }
    ul.top100 li:nth-child(-n+62) .block-image span{
        --hue: 31;
    }
    ul.top100 li:nth-child(-n+60) .block-image span{
        --hue: 30;
    }
    ul.top100 li:nth-child(-n+58) .block-image span{
        --hue: 29;
    }
    ul.top100 li:nth-child(-n+56) .block-image span{
        --hue: 28;
    }
    ul.top100 li:nth-child(-n+54) .block-image span{
        --hue: 27;
    }
    ul.top100 li:nth-child(-n+52) .block-image span{
        --hue: 26;
    }
    ul.top100 li:nth-child(-n+50) .block-image span{
        --hue: 25;
    }
    ul.top100 li:nth-child(-n+48) .block-image span{
        --hue: 24;
    }
    ul.top100 li:nth-child(-n+46) .block-image span{
        --hue: 23;
    }
    ul.top100 li:nth-child(-n+44) .block-image span{
        --hue: 22;
    }
    ul.top100 li:nth-child(-n+42) .block-image span{
        --hue: 21;
    }
    ul.top100 li:nth-child(-n+40) .block-image span{
        --hue: 20;
    }
    ul.top100 li:nth-child(-n+38) .block-image span{
        --hue: 19;
    }
    ul.top100 li:nth-child(-n+36) .block-image span{
        --hue: 18;
    }
    ul.top100 li:nth-child(-n+34) .block-image span{
        --hue: 17;
    }
    ul.top100 li:nth-child(-n+32) .block-image span{
        --hue: 16;
    }
    ul.top100 li:nth-child(-n+30) .block-image span{
        --hue: 15;
    }
    ul.top100 li:nth-child(-n+28) .block-image span{
        --hue: 14;
    }
    ul.top100 li:nth-child(-n+26) .block-image span{
        --hue: 13;
    }
    ul.top100 li:nth-child(-n+24) .block-image span{
        --hue: 12;
    }
    ul.top100 li:nth-child(-n+22) .block-image span{
        --hue: 11;
    }
    ul.top100 li:nth-child(-n+20) .block-image span{
        --hue: 10;
    }
    ul.top100 li:nth-child(-n+18) .block-image span{
        --hue: 9;
    }
    ul.top100 li:nth-child(-n+16) .block-image span{
        --hue: 8;
    }
    ul.top100 li:nth-child(-n+14) .block-image span{
        --hue: 7;
    }
    ul.top100 li:nth-child(-n+12) .block-image span{
        --hue: 6;
    }
    ul.top100 li:nth-child(-n+10) .block-image span{
        --hue: 5;
    }
    ul.top100 li:nth-child(-n+8) .block-image span{
        --hue: 4;
    }
    ul.top100 li:nth-child(-n+6) .block-image span{
        --hue: 3;
    }
    ul.top100 li:nth-child(-n+4) .block-image span{
        --hue: 2;
    }
    ul.top100 li:nth-child(-n+2) .block-image span{
        --hue: 1;
    }  
    
}