@font-face {
    font-family: PublicSans-Regular;
    src: url(./fonts/PublicSans-Regular.ttf);
}
@font-face {
    font-family: PublicSans-Light;
    src: url(./fonts/PublicSans-Light.ttf);
}
@font-face {
    font-family: PublicSans-Bold;
    src: url(./fonts/PublicSans-Bold.ttf);
}
@font-face {
    font-family: PublicSans-Thin;
    src: url(./fonts/PublicSans-Thin.ttf);
}

:root{
    --color-pink:#ed207b;
    --color-orange:#f7941d;
    --color-green:#6d8963;
    --color-gray:#555;

}

html,body{ margin: 0; padding: 0; width: 100%; height: 100%;}
body{ font-size: 14px; line-height: 1.4; font-family: "PublicSans-Regular", sans-serif;  overflow-x: hidden; }
ul,li,p,h1,h2,h3,h4,h5,form{ margin: 0; padding: 0;}
a{ text-decoration: none;}
b{ font-weight: bold;}

/* common  */
.container{ max-width: 1400px; margin-left: auto; margin-right: auto;}
.desktop{ display: block;}
.mobile{ display: none;}
.loading{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(255, 255, 255, 0.8); z-index: 100;}
.loading-inner{display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; margin: -60px 0 0 -60px;  position: absolute; left: 50%; top: 50%; background-color: rgb(43, 42, 42); border-radius: 10px;}
.loading-inner i, .loading-inner span{ display: block; text-align: center;}
.loading-inner i.loading-icon{ background-image: url(../image/icon-loading.svg); background-size: cover; width: 30px; height: 30px; margin: 0 auto;}
.loading-inner span{ margin-top: 15px; text-align: center; color: #EEE; font-size: 12px;}

.btn-radius{ display:flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 20px; font-size: 18px; color: #FFF; border: 1px solid #FFF; border-radius: 30px; transition: all 0.5s;}
.btn-radius i{ font-size: 1.4em; font-style: normal;}
.btn-radius i, .btn-radius span{height: 20px; line-height: 22px;}
button.btn-radius i{ line-height: 16px;}
.btn-radius span{line-height: 20px;}

.btn-radius:hover{ opacity: 0.8; }
.btn-radius-gray{ color: #555; border-color: #555;}

/* header  */
.header{ position: absolute; left: 0; top: 0; width: 100%; z-index: 10;}
.header .container{ position: relative; max-width: 1600px;}
.header .container::after{ content: ''; position: absolute; left: 200px; right: 250px; top: 35px; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.header .logo{ position: absolute; left: 0; top: 20px;}
.header .header-right{ position: absolute; top: 0; right: 0; }

.header .social-media{ position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; padding-top: 20px;}
.header .social-media a{ color: #FFF;}
.header .social-media img{ display: block; width: 18px;}
.header .social-media .btn-menu{ display: block; overflow: hidden; width: 60px; text-align: center; height: 26px; line-height:26px; border-radius: 20px; border: 1px solid #FFF;}
.header .lang{ position: relative; top: 2px;}

/* dropdown-menu  */
.dropdown-menu{ 
    visibility: hidden; 
    position: fixed; top: 0; right: 0; 
    width: 100%;
    height: 100vh; 
    background-color: #5a6e52; z-index: 1; 
    opacity: 0;
    transform:translateY(-1em);
    transform-origin: top;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-duration: 0.8s;
    transition-property: opacity, transform;
    display: flex;
    justify-content: center;
}
.dropdown-menu ul{ position: relative; z-index: 2; list-style-type: none;}
.dropdown-menu li{ text-align: center; padding: 25px 0;}
.dropdown-menu a{ font-size: 28px; line-height: 1.2; font-family: PublicSans-Bold; display: block; text-align: center; color: #FFF;}
.dropdown-menu a:hover{ opacity: 0.8;}
.dropdown-menu-main{ position: relative; height: 100%; display: flex; align-items: center; }
.dropdown-menu-bottom{ border-top: 2px solid #EEE; overflow: hidden; text-indent: -1000px; width: 100%; margin-top: 50px; position: absolute; bottom: 10%; }
.header .header-right.active .dropdown-menu{ 
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.header .header-right.active .btn-menu{ text-indent: -999px; background-image: url(../image/icon-close.png); background-repeat: no-repeat; background-position: center center; background-size: auto 50%;}


/* footer  */
.footer{color: var(--color-gray); background-color: #FFF;}
.footer .container{ display: flex; justify-content: space-between; align-items: center; position: relative;  padding: 30px 0; }
.footer .container::before{ content: ''; position: absolute; top: 42px; left: 30%; right: 30%; border-top: 2px solid #999;}

#roll_top {
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;
	background: #5a6e52 url(../image/btn_top.svg) no-repeat center 50%;
	opacity: 0.8;
	cursor: pointer;
}

@media screen and (max-width: 1921px) {
    .dropdown-menu{ width: 500px;}
}

@media screen and (max-width: 1601px) {
    .dropdown-menu{ width: 400px;}
}



@media screen and (max-width: 1601px) {
    .container{ margin-left: 40px; margin-right:40px;}
}

/* for ipad  */
@media screen and (max-width: 1025px) {
    .container{ margin-left: 30px; margin-right:30px;}
    /* header  */
    .logo img{ width: 140px;}
    .header .dropdown-menu{ position: fixed; left: 0; top: 0; height: 100vh;}
    .header .dropdown-menu ul{ padding-top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center;}
    .header-right.active .social-media{ position: fixed; top: 0; right: 20px;}
    .dropdown-menu{ width: 100%;}

    .footer .container::before {
        top: 40px;
        left: 40%;
        right: 40%;
    }

}


/* for ipad mini  */
@media screen and (max-width: 769px) {
    .container {
        margin-left: 20px;
        margin-right: 20px;
    }
    /* .header */
    .header .container::after{left: 90px; right: 150px;}
    .logo img {  width: 80px;}
    .kv-body{ transform: scale(0.9); transform-origin: center center;}
    .kv-bottom { padding: 0; margin-top: 10px;}
    .text-loop1{ left: -10%; top: 65%;}
    
    .loop-holder .loop-holder__text{ font-size: 40px; line-height: 60px;}
    .loop-holder2 .loop-holder__text{ font-size: 70px;}

    /* footer  */
    .footer .container::before{ left: 40%; right: 40%;}
    #roll_top {
        height: 30px;
        width: 30px;
        bottom: 10px;
        right: 10px;

    }
    
}

/* ipad old  */
@media screen and (max-width: 581px) {
    .btn-radius{ font-size: 16px;}

    /* footer  */
    .footer .container::before{display: none;}
    .footer .container{ display: block; text-align: center;}
    .design-by{ border-top: 1px solid #CCC; margin-top: 10px; padding-top: 10px;}

}

/* mobile  */
@media screen and (max-width: 415px) {
    .desktop{ display: none;}
    .mobile{ display: block;}
    .container {
        margin-left: 15px;
        margin-right: 15px;
    }
    /* .header */
    .logo img {  width: 80px;}
    .header .container::after{ display: none;}  
}

body[data-lang="zh"] .btn-radius i{line-height: 16px;}
body[data-lang="zh"] button.btn-radius i{ line-height: 16px;}