@font-face {

     font-family: sfpro_display_bold;

     src: url(../font/SFPRODISPLAYBOLD.OTF);

}

@font-face {

     font-family: sfpro_display_regular;

     src: url(../font/SFPRODISPLAYREGULAR.OTF);

}

   



html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {

  margin: 0;

  padding: 0;

  border: 0;

  font: inherit;

  font-size: 100%;

  vertical-align: baseline;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  text-size-adjust: none;

  text-decoration: none;

  scroll-behavior: smooth;

}

html:root{

     font-size: 1px;

}



footer, header, nav, section, main {

  display: block;

}



body {

     line-height: 1;

     display: flex; 

     justify-content: center;

     background: #2d2d2d;

}



ol, ul {

  list-style: none;

}



blockquote, q {

  quotes: none;

}



blockquote:before, blockquote:after, q:before, q:after {

  content: "";

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



input {

  -webkit-appearance: none;

  border-radius: 0;

  border: none;

}



button {

  border: none;

}



a{ 

     font-family: sfpro_display_bold; 

}





/*### Start Layout Sass ###*/ 

.container {

     display: flex;

     flex-direction: column; 

}



@media (min-width: 320px) {

     .container {

     width: 310px;

     }

}

@media (min-width: 375px) {

     .container {

     width: 370px;

     }

}

@media (min-width: 425px) {

     .container {

     width: 420px;

     }

}

@media (min-width: 576px) {

     .container {

     width: 570px;

     }

}

@media (min-width: 768px) {

     .container {

          width: 748px;

     }

}

@media (min-width: 992px) {

     .container {

          width: 982px;

     }

}

@media (min-width: 1200px) {

     .container {

          width: 1140px;

     }

}

@media (min-width: 1440px) {

     .container {

          width: 1380px;

     }

}

@media (min-width: 1856px) {

     .container {

          width: 1440px;

     }

}

@media (min-width: 2560px) {

     .container {

          width: 1440px;

     }

}





 

#mobile-menu-swicher{

     display: none;

     font-size: 16rem;

     position: absolute;

     top: 0px;

     left: 0px; 

     z-index: 10;

}

#mobile-menu-swicher img{

     width: 100rem;

     z-index: 100;

} 

.mobile-menu{

     display: none;  

     align-items: center;   

     justify-content: center;

     background-color: #B08B3A; 

     width: 100%;

     margin-top: 20rem;

}

.mobile-menu .menu{

     display: flex; 

     align-items: center;  

     flex-direction: row;

}

.mobile-menu .menu li{

     display: flex;

     align-items: center;

     padding: 13rem;

}

.mobile-menu .menu li a{ 

     font-family: sfpro_display_bold;

     color: #fff; 

     font-size: 18rem;

}





.header{

     display: flex;

     flex-direction: row; 

     width: 100%;

     position: relative;

     margin-top: 50rem;

} 

.header .left{

     display: flex;

     flex-direction: row;

     align-items: center;

     width: 50%;

     justify-content: end;

}

.header .left .logo{

     width: 170rem;

     position: absolute;

     top: -28rem;

     left: 0px;

}

.header .right{

     display: flex;

     flex-direction: row;

     width: 50%; 

     justify-content: end;

}





.header .left .touch{

     display: flex;

     flex-direction: row; 

     align-items: center;

     height: 50rem;

     margin-left: 5%;

}

.header .left .touch li{

     display: flex;

     flex-direction: row; 

     align-items: center;

     padding: 13rem;

     margin-left: 15rem;

}

.header .left .touch li a{

     color: #fff;

     margin-left: 10rem;

     font-size: 16rem;

}







.header .right .menu{

     display: flex; 

     align-items: center;  

}

.header .right .menu li{

     display: flex;

     align-items: center;

     padding: 13rem;

}

.header .right .menu li a{ 

     font-family: sfpro_display_bold;

     color: #fff; 

     font-size: 16rem;

}



 

.center{

     display: flex;

     flex-direction: column;

     justify-content: space-between;

}

.center .section{

     display: flex;

     flex-direction: row;

     justify-content: space-between;

     margin-top: 20rem;

}



.center .section .page{

     display: grid;

     font-size: 18rem;

     width: 100%;

}

.center .section .page .e404{ 

     font-size: 22rem;

     margin: 50rem;

     align-self: center;

     justify-self: center;

     font-family: sfpro_display_bold;

     color: #fff;

     min-height: 500rem;

     align-items: center;

     display: flex;

}





.price-table{

     width: 49%;

     background-color: #181818;

     border-radius: 10rem;

}

.price-table img{

     width: 100%;

     border-radius: 10px 10px 0 0;

}

.price-table table{

     font-family: sfpro_display_bold;

     color: #fff;

     padding: 15rem 15rem 0 15rem;

     border-collapse: separate !important; 

     border-spacing: 0 10rem !important;

     width: 100%;

}  

.price-table table tbody  .buy{

     color: #ADFF87;

} 

.price-table table tbody  .sell{

     color: #FF4B4B;

} 

.price-table table tbody td{

     border-bottom: 1px dashed #fff;

     font-size: 22rem;

     padding: 15rem 0rem 15rem 5rem;

     font-family: sfpro_display_regular; 

     width: 33.3%;

} 

.price-table table  th{

     border-bottom: 1px dashed #fff; 

     padding-bottom: 20rem;

} 

.price-table table thead th{

     text-align: left;

     font-size: 25rem;

     padding-left: 20rem;

     width: 33.3%;

} 

.price-table .scroller{

     overflow-y: scroll;

     height: 500rem;

}

.price-table .scroller table{

     padding-top: 0px;

}



.price-table .scroller::-webkit-scrollbar {

     width: 1em;

}

.price-table .scroller::-webkit-scrollbar-track {

     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

}

.price-table .scroller::-webkit-scrollbar-thumb {

     background-color: darkgrey;

     outline: 1px solid slategrey;

}





.calculator{

     display: flex;

     flex-direction: column;

     width: 100%; 

}

.calculator h2{

     font-size: 18rem;

     font-family: sfpro_display_bold; 

     background-color: #181818;

     width: 200rem;

     text-align: center;

     padding: 10rem;

     border-radius: 10px 10px 0px 0px;

     color: #fff;

}

.calculator .wrap{

     display: flex;

     flex-direction: row;

     background-color: #181818;

     border-radius: 0px 10px 10px 10px;

} 

.calculator .wrap .left{

     display: flex;

     flex-direction: row;

     width: 50%;

} 

.calculator .wrap .left .amount{

     display: flex;

     flex-direction: column; 

     width: 50%;

     padding: 16rem;

} 

.calculator .wrap .left .product{

     display: flex;

     flex-direction: column; 

     width: 50%;

     padding: 16rem;

} 

.calculator .wrap .left label{

     font-size: 18rem;

     font-family: sfpro_display_regular;

     color: #fff;

     margin-bottom: 5rem;

} 

.calculator .wrap .left input,.calculator .wrap .left select{

     padding: 10rem;

     font-size: 18rem;

     font-family: sfpro_display_regular;

} 

.calculator .wrap .right{

     display: flex;

     flex-direction: row;

     width: 50%;

     justify-content: center;

} 



.calculator .wrap .right .buy,

.calculator .wrap .right .sell{

     display: flex;

     flex-direction: column; 

     width: 50%;

     justify-content: center;

     align-items: center;

} 

.calculator .wrap .right span{

     font-size: 20rem;

     font-family: sfpro_display_regular;   

     color: #fff;

     margin-bottom: 5rem;

}   

.calculator .wrap .right .sell{

     background-color: #FF4B4B;

     border-radius: 0 10px 10px 0;

}   

.calculator .wrap .right .buy{

     background-color: #70C04B; 

}   



.welcome-message{

    padding: 10px;

    color: #fff;

    background: #00000026;

    border-radius: 10px;

}

.welcome-message h1{

    font-size: 20rem;

    font-family: sfpro_display_regular;   

    margin: 5px 0 10px 0;

}

.welcome-message p{

    font-size: 16rem;

    font-family: sfpro_display_regular;   

    line-height: 20px;

}



.trend{

     display: flex;

     width: 100%;

     height: 700rem;

}

.trend iframe{

     border-radius: 10px;

}





.footer{

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #181818;

    padding: 20rem;

    border-radius: 10px;

    margin: 20rem 0 20rem 0;

} 

.footer span:last-child{

     margin-left: 5rem;

} 

.footer span:first-child::after{

     content: " -";

} 

.footer span{

     font-size: 16rem;

     font-family: sfpro_display_regular;  

     color: #fff;

}

.footer span a{

     font-size: 16rem;

     font-family: sfpro_display_regular;  

     color: #fff;

     border-bottom: 1px solid #ddd;

}

.footer .apps{

    display: flex;

    margin-left: 10px;

}

.footer .apps li{ 

    margin-left: 10px;

}



.blog{

     display: flex; 

     flex-direction: column;

}

.blog .items{

     display: flex;

     flex-direction: row;

     justify-content: space-between;

     flex-wrap: wrap;

     width: 100%;

}

.blog .item{

     display: flex;

     flex-direction: column; 

     width: 49%; 

     margin-bottom: 10rem;

}

.blog .item img{

     width: 100%;

}

.blog .item h2{

     font-size: 18rem; 

     font-family: sfpro_display_bold;  

     letter-spacing: 0.4px;

     padding: 10rem;

     background-color: #1818187a;

     text-align: center;

     line-height: 25rem;

     height: 50rem;  

     display: flex;

     justify-content: center;

     align-items: center;

}

.blog .item h2 a{ 

     color: #fff; 

}

.blog .item h2 a:hover{ 

     text-decoration: underline;

}



.blog .detail{

     display: flex;

     flex-direction: column;

}

.blog .detail img{

     width: 100%;

}

.blog .detail h1{

     font-size: 22rem; 

     font-family: sfpro_display_bold;  

     letter-spacing: 0.4px;

     padding: 10rem 0 10rem 10rem; 

     text-align: left;

     line-height: 25rem; 

     color: #fff;

     border-left: 10px solid #181818;

     margin: 20rem 0 20rem 0;

     background-color: #00000021;

} 

.blog .detail p{

     font-size: 18px;

     color: #fff;

     font-family: sfpro_display_regular; 

     letter-spacing: 0.5px;

     line-height: 30rem;

}



.pagination{

     display: flex;

     flex-direction: row;

     justify-content: center;

     margin-top: 10rem;

}

.pagination li{

     font-size: 20rem;

     background-color: #1818187a;

     padding: 10rem;

     color: #fff;

     font-family: sfpro_display_bold;  

     margin-right: 10rem;

}

.pagination li a{ 

     color: #fff;

     font-family: sfpro_display_bold;  

}





.touch-channels{

     display: flex;

     flex-direction: column;

     width: 100%;

}

.touch-channels iframe{

     width: 100%;

     height: 300rem;

}

.touch-channels .channels{

     display: flex;

     flex-direction: row;

     justify-content: space-between;

     margin-top: 20rem;

     background-color: #18181877;

}

.touch-channels .channels li{

     font-size: 18px; 

     color: #fff;

     font-family: sfpro_display_regular; 

     padding: 10rem; 

     width: 25%;

     text-align: center;

     display: flex;

     align-items: center;

     justify-content: center;

     line-height: 30rem;

     box-sizing: border-box;

}

.touch-channels .channels li:first-child{

     width: 40%;

}

.touch-channels .channels li img{

     margin-right: 10rem;

}



@media (max-width: 768px) {

     html:root{

          font-size: 0.8px!important;

     }

     /*.header .right{

          display: none;

     }

     .header .left{

          width: 90%;

     }

     .header{

          justify-content: end;

     }*/

     /*.header{

          flex-direction: column;

     }

     .header .left,.header .right{

          flex-direction: column;

     }*/ 

     .header{

          align-items: end;

          margin-top: 70rem;

     }  

     .header .left{

          width: 100%;

     }

     .header .left .logo{

          width: 120rem!important;

          top: 10rem;

     }

     .header .right{

          display: none; 

     }

     .mobile-menu{

          display: flex; 

     } 

     .section{

          flex-direction: column!important;

     }

     .price-table{

          width: 100%;

          margin-bottom: 20rem;

     }

     .calculator .wrap{

          flex-direction: column;

     }

     .calculator .wrap .left,.calculator .wrap .right{

          width: 100%; 

     }

     .calculator .wrap .sell{

          border-radius: 0 0 10rem 0!important;

          height: 70rem;

     }

     .calculator .wrap .buy{

          border-radius: 0 0 0 10rem!important;

          height: 70rem;

     }



     .calculator .wrap .amount,.calculator .wrap .product{

          padding: 0%!important; 

     }



     .calculator .wrap input,.calculator .wrap select{

          margin: 10rem; 

     }

     .calculator .wrap label{

          margin: 10rem; 

     }

     .trend{

          height: 400rem;

     } 





     /* BLOG */

     .blog .item{

          width: 100%;

     }



     .touch-channels .channels{

          flex-direction: column;

          flex-wrap: wrap;

     }

     .touch-channels .channels li{

          width: 100%!important; 

          margin-bottom: 10rem;

     }



     .footer span,.footer span a{

          font-size: 15rem;

     }

     .price-table table tbody td{

      font-size: 25rem;

  }

}

@media (max-width: 425px) {

     html:root{

          font-size: 0.8px!important;

     }  

     .footer span,.footer span a{

          font-size: 15rem;

     }

     .header .right{

          display: none; 

     }

     .footer{

        flex-direction: column;

     }

     .footer .apps{

        margin-top: 10px;

     }

     #mobile-menu-swicher{

          display: block; 

     } 

     .mobile-menu{

          display: flex; 

     } 

     .price-table table tbody td{

         font-size: 25rem;

     }

}

@media (max-width: 320px) {

     html:root{

          font-size: 0.7px!important;

     }  

     .header .right{

          display: none; 

     }

     .footer span,.footer span a{

          font-size: 15rem;

     } 

     .footer{

        flex-direction: column;

     }

     .footer .apps{

        margin-top: 10px;

     }

     #mobile-menu-swicher{

          display: block; 

     }  

}

 





#haso10,#haso11,#haso12,#haso20,#haso21{

     display: none;

}





/*

#mobile-menu-swicher{

     display: none;

     font-size: 16rem;

     position: absolute;

     top: 15px;

     left: 0px; 

     z-index: 10;

}

#mobile-menu-swicher img{

     width: 80rem;

     transform: rotate(45deg);

} 

.mobile-menu{

     position: absolute;

     left: 0px;

     display: flex; 

     align-items: center;   

     justify-content: center;

     background-color: #B08B3A;

     z-index: 8;

     height: 79rem;

     width: 100%;

}*/