@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css?family=Squada+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=El+Messiri&display=swap');
@import url('https://fonts.googleapis.com/css?family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700;800;900&display=swap');
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
  }
}


@font-face {
  font-family: 'AcerFoco';
  src: url('../fonts/AcerFoco_Bd.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}



/* CSS Document */
::selection {
    background:#ffd800;
    color: #000;
}

.pc2 { display: inherit;}
.mobile2 { display: none;}

.link:hover {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 1;
    transition: opacity 0.35s, -webkit-transform 0.7s;
    transition: opacity 0.35s, transform 0.7s;
    transition: opacity 0.35s, transform 0.7s, -webkit-transform 0.7s;
    will-change: opacity, transform;
    -webkit-filter: brightness(1.08);
    cursor: pointer;
}
.link2:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
    transition: opacity 0.35s, -webkit-transform 0.7s;
    transition: opacity 0.35s, transform 0.7s;
    transition: opacity 0.35s, transform 0.7s, -webkit-transform 0.7s;
    will-change: opacity, transform;
   /* filter: drop-shadow(0px 2px 7px rgba(0, 0, 0, 0.6)); */
    cursor: pointer;
}
.mouse {
    max-width: 30px;
    width: 100%;
    animation: move .9s ease-in-out infinite alternate;
    z-index: 999;
    bottom:-14vw;
    left: 50%;
    position: absolute;
    margin-left: -15px;

}

@-moz-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

@-webkit-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

@-o-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

@keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

body { 
    background-repeat: repeat-y;
    width: 100%;
    position: relative;
    
}
#menu {
        height: 12vw;
}

.bg {background: linear-gradient(to bottom,  #e8f5fd 0%,#00a0e9 100%); }


.foot_bg {

}

.logo {
    width: 100%;
    max-width: 120px;
    position: absolute;
    top: 2vw;
    left: 2vw;
    z-index: 9999;
}


.title {
        width: 100%;
    max-width: 1000px;
    margin: auto;
        position: relative;
}
#home {
   
}


.index_pic {
    position: relative;
    width: 100%;
    max-width: 40vw;
    z-index: 1;
}
.index_pic2 {
    position: absolute;
    top: 3vw;
    z-index: 2;
    width: 100%;
    max-width: 21vw;
    left: 50%;
    margin-left: 1vw;
    
}

.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-inner {position: inherit;}
.rd-navbar-static.rd-navbar--is-stuck{position: inherit;}
.menu{
    padding: 5px;
    width: 130px;
    height: 130px;
 
}
.menu:hover{ }
.menu-1{
    background-image: url(../images/menu-01.svg?v=2);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    display: block;
    margin-bottom: 15px;
    background-position: center center;
    position: relative;
    top: 0
}
.menu-1:hover {background-image: url(../images/menu-01_2.svg?v=2);}

.menu-2{
    background-image: url(../images/menu-02.svg?v=2);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    display: block;
    margin-bottom: 15px;
    background-position: center center;
        position: relative;
    top: 0
}
.menu-2:hover {background-image: url(../images/menu-02_2.svg?v=2);}

.menu-3{
    background-image: url(../images/menu-03.svg?v=2);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    display: block;
    margin-bottom: 15px;
    background-position: center center;
        position: relative;
    top: 0
}
.menu-3:hover {background-image: url(../images/menu-03_2.svg?v=2);}

.menu-4{
     background-image: url(../images/menu-04.svg?v=2);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    display: block;
    margin-bottom: 15px;
    background-position: center center;
        position: relative;
    top: 0
}
.menu-4:hover {background-image: url(../images/menu-04_2.svg?v=2);}

.menu-5{
       background-image: url(../images/menu-05.svg?v=2);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    display: block;
    margin-bottom: 15px;
    background-position: center center;
        position: relative;
    top: 0
}
.menu-5:hover {background-image: url(../images/menu-05_2.svg?v=2);}


.menu-title{
    text-align: center;
    color: #10193d;
}
.menu-title span {display: block;font-size: 12px;line-height: 1; margin-top: 3px;}


.rd-navbar-nav li:nth-child(odd) .rd-navbar-dropdown {
        margin-top: 70px!important;
}

.rd-navbar-nav li:nth-child(even) .rd-navbar-dropdown {
        margin-top: 70px!important;
}

.rd-navbar-dropdown::after {
    content: '';
    background-image: url(../images/sort-up-solid.svg?v=5);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: -12px;
}

.page_box {
 position: relative;
    z-index: 2;
}

/*
*
* Panels Custom
* --------------------------------------------------
*/
.panel {
	margin-bottom: 0;
	box-shadow: none;
	border: none;
	border-radius: 0;
}

.panel-custom {
	padding: 22px 0 20px;
}

@media (min-width: 768px) {
	.panel-custom {
		padding: 35px 0 35px 0;
	}
}

.panel-custom + .panel-custom {
	border-top: 1px solid #ececee;
	margin-top: 0;
}

.panel-custom .panel-custom-title > a {
	display: block;
	position: relative;
	padding-right: 40px;
	color: #fff;
	background: transparent;
	transition: .3s all ease;
        font-size: 24px;
}

.panel-custom .panel-custom-title > a:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	font: 400 24px/24px "Linearicons";
	color: #8fff32;
	transform: translateY(-50%) rotate(0deg);
	transition: .35s all ease-in-out;
}

.panel-custom .panel-custom-title > a span {
	padding-left: 8px;
	color: #888;
	font-size: 14px;
}

.panel-custom .panel-custom-title > a.collapsed {
	
}

.panel-custom .panel-custom-title > a.collapsed:before {
	content: '\e936';
	transform: translateY(-50%) rotate(180deg);
}

.panel-custom .panel-custom-title > a:hover {
	text-decoration: none;
	background: transparent;
}

.panel-custom .panel-custom-collapse {
	background: transparent;
}

.panel-custom .panel-custom-collapse .panel-custom-body {
	    background: rgb(255 255 255 / 23%);
    padding: 20px;
    margin-top: 15px;
        border-radius: 15px;
}




@media (min-width: 768px) {
	.panel-custom .panel-custom-collapse .panel-custom-body {
		    /* padding: 30px 30px 22px 0; */
    background: rgb(255 255 255 / 23%);
    padding: 20px;
    margin-top: 15px;
            border-radius: 15px;
	}
}

h3 + .panel-custom-group-wrap {
	margin-top: 30px;
}

.panel-classic .panel-custom-title > a {
	padding-left: 35px;
	padding-right: 0;
}

.panel-classic .panel-custom-title > a:before {
	content: "\e93c";
	top: 47%;
	left: 0;
	right: auto;
	transform: translateY(-50%) rotate(90deg);
	transition: .35s all ease-in-out;
}

.panel-classic .panel-custom-title > a.collapsed:before {
	content: '\e93c';
	transform: translateY(-50%) rotate(0deg);
}

.panel-classic .panel-custom-title > a:hover {
	text-decoration: none;
	background: transparent;
}
.panel-custom-body p {
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
}
.panel-custom-title {
    
}


.comesoon {
    width: 100%;
    background: rgb(255 255 255 / 33%);
    text-align: center;
    padding: 4vw;
    font-size: 45px;
    font-weight: 700;
    color: #fff;
    border-radius: 32px;
    margin: 5vw 0;
    border: 5px #fff dotted;
}

.past_size {
    padding: 88px 75px 20px;
}
.sign_down {
    margin-bottom: 18vw;
}
.qa_down {margin-bottom: 19vw;
}
.foot_logo {width: 300px;bottom: 0;z-index: 1;left: 50%;margin-left: -150px; position: absolute;}
.foot-bg {background-image: url(../images/foot-bg.svg);background-position: bottom center;background-repeat: no-repeat;position: absolute;width: 100%;bottom: 0;left: 0;height: 380px; background-size: cover;}
.rd-navbar-nav {position: relative;}

.menu:hover .menu-title {color:#00a0e9; }
.menu:hover .menu-1 {background-image: url(../images/menu-01_2.svg?v=2);}
.menu:hover .menu-2 {background-image: url(../images/menu-02_2.svg?v=2);}
.menu:hover .menu-3 {background-image: url(../images/menu-03_2.svg?v=2);}
.menu:hover .menu-4 {background-image: url(../images/menu-04_2.svg?v=2);}
.menu:hover .menu-5 {background-image: url(../images/menu-05_2.svg?v=2);}



.rd-navbar-nav .active .menu-title{color:#7bba45;}
.rd-navbar-nav .active .menu {border-color: #7bba45;}
.rd-navbar-nav .active .menu .menu-1 {background-image: url(../images/menu-01_2.svg?v=2);}
.rd-navbar-nav .active .menu .menu-2 {background-image: url(../images/menu-02_2.svg?v=2);}
.rd-navbar-nav .active .menu .menu-3 {background-image: url(../images/menu-03_2.svg?v=2);}
.rd-navbar-nav .active .menu .menu-4 {background-image: url(../images/menu-04_2.svg?v=2);}
.rd-navbar-nav .active .menu .menu-5 {background-image: url(../images/menu-05_2.svg?v=2);}

.index-box { background: rgb(255 255 255 / 45%);padding: 10px 40px;position: relative;}
.index-pic {width: 100%;max-width: 500px;margin: 10px auto 20px;position: relative;z-index: 1;}
.index-text {text-align: center;font-size: 20px;margin-top: 30px;}
.index-text span {display: inline-block;}
.page-body {padding-bottom: 400px;}
.slider-box {position: fixed; bottom: 40%; z-index: 2; background: #fff; display: block; right: 4px; width: 50px; padding: 15px 8px; border-radius: 30px; box-shadow: 1px 1px 2px rgb(0 0 0 / 46%);}
.link-pic { margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px #cbcbcb solid;}
#ui-to-top {display: none!important;}
.page-title  {width: 100%;max-width: 600px;margin: auto;}
.info-bg {
    background-image: url(../images/info-map-bg.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom;
}
.info-title { width: 100%;max-width: 600px; margin: 15% auto 0px; position: relative; top: 80px;}
.page-top {background: #17bbef; display: block; color: #fff; text-align: center; border-radius: 40px 40px 0 0; width: 100%; max-width: 600px; margin:5% auto 0px;}
.page-top h3 {color: #fff; letter-spacing: 15px;}
.page-title1 {width: 100%;position: relative; margin: 0px 0 30px; padding-top: 50px;}
.foot-body { position: relative; background: #fff; height: 75px;}
.info-icon-1 {position: absolute;left: 0;bottom: -11%;width: 100%;max-width: 20%;}
.info-pic { width: 100%;max-width: 700px;margin: 0 auto 30px;}
.info-text {color: #50504e; text-align: center;}
.info-text span{display: inline-block;}
.info-foot {display: flex; margin: 20px auto 50px; text-align: center; width: 600px; position: relative;}
.pu-logo {}
.pu-link {position: relative;top: 50px;}
.info-icon-2 {position: absolute;right: 0; bottom: 27%; width: 100%; max-width: 19%;}
section {position: relative;}
section .container {z-index: 1;position: relative;}
.page-text-box {color: #50504e;}
.page-title-1 {background: #fff;display: inline-block; padding: 4px 30px; color: #17bbef; font-size: 20px; border-radius: 50px; margin-bottom: 20px; border: 1px #17bbef solid; position: relative;}
.page-title-1::before {content: ''; z-index: -1; width: 100%; display: block; height: 45px; border-radius: 50px; position: absolute; background: #17bbef; bottom: -7px; right: -7px;}
.page-text-1 {}
.page-text-1 ul{padding: revert;margin-bottom: 30px;}
.page-text-1 ul li{list-style: decimal;display: list-item;}
.blue {color: #036eb8;}
.mag-20 {margin-bottom: 20px;}
.red{color: #e0007f;}
.green { color:#7bba45;}
.brown {color: #af8046;}
.org {color: #ea5514!important;}
.yell{color: yellow!important;}
.info-foot-ex {width: 100%; padding-top: 30px;margin-top: 30px; border-top: 3px #50504e dashed; margin-bottom: 50px;}
.info-icon-3 {position: absolute; right: 3%; bottom: 38%; width: 100%; max-width: 24%;}
#event .page-title1 {border-bottom: 2px #ee761c solid;}
#event .page-top {background: #ee761c;}
.event-bg { background-image: url(../images/event-bg.png?v=3); background-repeat: no-repeat; background-position: center top; background-size: 100%; width: 100%; min-height: 60vh; position: relative; }
#event {background-image: url(../images/event-bg2.jpg);background-repeat: repeat; background-position: top center; background-size: 100%;}
.event-icon-1 {position: absolute;top: -5%;width: 100%;max-width: 55%;left: 0;}
.event-icon-2 {position: absolute;top: 0%;width: 100%;max-width: 34%;right: 0;}
.event-title-1 {width: 100%;max-width: 800px;margin:19% auto 0px;}
.event-bg2 {}
.event-stext {text-align: center;line-height: 3; font-weight: 500;}
#event .page-top {margin: 10% auto 0px;}
.event-box {width: 100%;display: flex;max-width: 1200px;margin: 0 auto 30px;gap: 20px;}
.event-time {width: 23%;position: relative;border: 1px #ee761c solid;margin: 10px;display: grid;padding: 5px 20px;align-items: center;}
.event-text-1 {font-weight: 500;width: 90%;}
.event-pic {width: 30%;}
.evnet-title-2 {margin-bottom: 10px;}
.evnet-title-2 span{color: #ee761b;font-size: 30px; font-weight: 600;}
.event-time-1 {color: #ee761c;text-align: center;font-size: 32px;}
.event-time-line {display: block; width: 2px;height: 40px;background: #ee761c; margin: auto;}
.event-icon-3 {position: absolute;left: 0;bottom: -4%; width: 100%;max-width: 22%;}
.event-stext span {display: inline-block;}
.event-pic-1 { width: 100%;max-width: 900px;margin: 10px auto 50px;}
.win {}
.win-ex {text-align: left;background: #ee761c;color: #fff;display: table;padding: 5px 30px;margin: 30px auto 60px;border-radius: 35px;line-height: 1.5;}
.event-icon-4 {position: absolute;right: 0;top: 5%;width: 100%;max-width: 23%;}

#fun .page-title1 {border-bottom: 2px #7bb844 solid;}
#fun .page-top {background: #7bb844;}
#fun {background-image: url(../images/fun-bg2.jpg);background-repeat: repeat; background-position: top center; background-size: 100%;}
.fun-bg {background-image: url(../images/fun-top-bg.svg);background-repeat: no-repeat;background-position: center -60px;background-size: 100%;}
.fun-box-1 {display: inline-flex;gap: 20px;}
.fun-box-1 p {text-align: center;line-height: 3;width: 80%;position: relative;}
.fun-box-1 span {display: inline-block;}
.fun-box-1-pic {width: 100%;max-width: 300px;margin: 0;}
#fun .page-top {margin: 8% auto 0px;}
.fun-title-style {background: #7bb844;color: #fff;display: inline-block;padding: 10px 40px;border-radius: 50px;position: relative;}
.fun-title-style h4{color: #fff;}
.fun-title-style::before {content: '';position: absolute;right: -7px;bottom: -7px;width: 100%;height: 60px;background: #c1dea3;z-index: -1;border-radius: 50px;}
.fun-box-2 {  margin-top: 30px;display: flex;gap: 20px;}
.fun-text-1 { line-height: 3; width: 100%;}
.fun-box-2-pic {}
#fun .page-title-1 {line-height: 1.5;color: #7bb844;border: 1px #7bb844 solid;height: max-content;}
#fun .page-title-1::before {background: #7bb844;}
.fun-text-row { display: flex;gap: 20px; margin: 20px 0;}
.fun-text-row p {display: inline-table;margin: 0;line-height: 2;width: 72%;}
.fun-text-row ul{ padding-left: 15px;width:70%;}
.fun-text-row ul li{list-style: disc;display: list-item;}
.fun-foot-text {padding: 20px 0 20px;width: 100%;color: #ef9300;text-align: center;margin: 40px 0;border-bottom: 1px #ef9300 solid;border-top: 1px #ef9300 solid;}
.fun-foot-text span {display: inline-block; }
.fun-text-row table {width: 100%; max-width: 500px; text-align: center;}
.fun-tag { color: #63499b;position: absolute;left: 41%; top: 0.4%;font-size: 19px;line-height: 1.5;}
.fun-box-3-pic {width: 100%;max-width: 300px;}
.fun-wpic p{width: 80%;}
.fun-box-4-pic {width: 100%;max-width: 300px;position: absolute;right: 0;}
.fun-li-box {  display: grid;grid-template-columns: repeat(5, 1fr);gap: 24px; margin-top: 40px;}
.fun-li {}
.fun-li img {display: block;width: 100%;height: auto;}
.fun-box4 {display: flex;gap: 10px;}
.fun-box4-pic {width: 100%;max-width: 200px;}
.fun-box4-title {color: #8abf1f;font-size: 26px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px #8abf1f solid;}
.fun-box4-text {}
.fun-box4-title div {color: #50504e;font-size: 16px;line-height: 1;padding-bottom: 8px;}
.fun-sbg {background-image: url(../images/fun-bg2.svg?v=2); background-repeat: repeat; background-position: center top; background-size: 100%;}
#sign{background-image: url(../images/sign-bg2.jpg?v=2);background-repeat: repeat; background-position: top center; background-size: 100%;}
.sign-top-bg {background-image: url(../images/sign-top-bg.svg?v=2);background-repeat: no-repeat;background-position: center top;background-size: 100%;}
#sign .page-title1 {border-bottom: 2px #27a1cd solid;}
#sign .page-top {background: #27a1cd;}
.sign-text-row {margin-bottom: 10px; display: flex;gap: 20px;margin-top: 10px;}
.sign-title-1 {width: 10%;background: #1e95d4;color: #fff;text-align: center; height: min-content; padding: 4px 5px; border-radius: 40px; position: relative;}
.sign-text {padding: 3px 10px;width: 90%;border-radius: 20px;position: relative;}
.sign-text ul{padding-left: 20px;}
.sign-text ul li{list-style: decimal;display: list-item;}
.sign-pic { position: absolute;right: 23%; z-index: 2;top: -56%; width: 100%;max-width: 35%;}
.sign-pic2 { position: absolute;right: -2%;z-index: 2;top: -84%;width: 100%;max-width: 25%;}
.sign-sbg {background-image: url(../images/sign-sbg.svg?v=7); background-repeat: repeat; background-position: center top; background-size: 100%;}
.sign-title-1 span {position: absolute;bottom: -30px;left: 20%;color: #27a1cd;}

.qa-top-bg {background-image: url(../images/qa-top-bg.svg?v=5);background-repeat: no-repeat;background-position: center top;background-size: 100%;}
#qa{background-image: url(../images/qa-bg2.jpg);background-repeat: repeat; background-position: top center; background-size: 100%;}
.qa-bg { background-image: url(../images/qa-bg.jpg?v=3); background-repeat: no-repeat; background-position: center top; background-size: 100%; width: 100%; min-height: 60vh; position: relative; }
#qa .page-title1 {border-bottom: 2px #523d2a solid;}
#qa .page-top {background: #523d2a;}
.qa-box {margin-bottom: 40px;position: relative;}
.qa-title { background: #fff;padding: 10px 20px;line-height: 1.5; margin-bottom: 20px; border-radius: 30px; font-size: 20px; border: 2px #523d2a solid;}
.qa-text {padding: 10px 40px;}
.qa-box::before {content: ''; position: absolute; background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); top: 40px; width: 98%; height: 80px; z-index: -1; left: 50%; margin-left: -49%;}
.qa-sbg {background-image: url(../images/qa-sbg.svg?v=4); background-repeat: repeat; background-position: center top; background-size: 100%;}

#app .page-title1 {border-bottom: 2px #b06e41 solid;}
#app .page-top {background: #b06e41;max-width: 70%;}
#app .page-top h3 {letter-spacing: 1px;}
.app-sbg {background-image: url(../images/app-sbg.png?v=3); background-repeat: repeat; background-position: center top; background-size: 100%;}
#app{background-image: url(../images/qa-bg2.jpg);background-repeat: repeat; background-position: top center; background-size: 100%;}
.app-top-bg {background-image: url(../images/app-top-bg.svg?v=5);background-repeat: no-repeat;background-position: center top;background-size: 100%;padding-bottom: 50px;}
.app-body {position: relative;background: #fff; border-radius: 25px;box-shadow: 6px 6px 5px rgb(0 0 0 / 23%);border: 1px #c49c62 solid;}
.app-box-top {margin-bottom: 10px;border: 2px #c49c62 solid;border-radius: 25px;position: relative;top: -1px;left: 1px;}
.app-no {position: absolute;z-index: 2;background: #c49c62;font-size: 42px;border: 2px #fff solid;width: 70px;line-height: 70px;text-align: center;color: #fff;border-radius: 90%;top: -5px;left: -15px;}
.app-box-title { background: #c49c62; display: inline-block;position: relative;width: 100%;max-width: 30%;padding: 8px;border-radius: 50px;color: #fff;font-size: 22px;text-align: center;}
.app-page {display: flex;gap: 20px;justify-content: center;padding: 20px;}
.app-pic {position: relative;}
.app-widht {width: 100%;max-width: 1000px;margin: auto;}
.app-stitle {display: contents;font-size: 20px;}
.app-body2 {position: relative;background: #fff; border-radius: 0px;box-shadow: 6px 6px 5px rgb(0 0 0 / 23%);border: 1px #c49c62 solid;}
.app-box-top2 {}
.app-box-title2 {background: #c49c62; display: inline-block; position: relative; width: 100%; max-width: 100%; padding: 8px; border-radius: 30px; color: #fff; font-size: 18px; text-align: center; left: 20px;top: -1px;}
.app-no2 {position: absolute;z-index: 2; background: #c49c62;font-size: 42px;border: 2px #fff solid;width: 70px;line-height: 70px; text-align: center; color: #fff; border-radius: 90%; top: -12px;left: -20px;}
.app-foot {margin-top: 10px;background: #fff;padding: 20px;line-height: 1.5;min-height: 130px; border-radius: 0 0 20px 20px; border: 1px #35b597 solid; box-shadow: 6px 6px 5px rgb(0 0 0 / 23%);}
.color-g{color: #74c6be;}
.color-ge {color: #838684;}
.app-box3 {position: relative;border: 1px #c49c62 solid; padding: 15px; background: #fff;border-radius: 18px;}
.app-box3-pic {}
.app-box3-2 {padding: 26px 20px; background: #fff;border-radius: 18px;margin-top: 15px;line-height: 1.5;position: relative;border: 1px #c49c62 solid;}
.app-box3::before{content: '';position: absolute; background: #c49c62; width: 100%; height: 100%; bottom: -8px; left: 8px; z-index: -1; border-radius: 15px;}
.app-box3-2::before{content: '';position: absolute; background: #c49c62; width: 100%; height: 100%; bottom: -8px; left: 8px; z-index: -1; border-radius: 15px;}
.app-ex {position: absolute;width: 100%;max-width: 40%;right: -26%;top: 5%;z-index: 1;}
.app-widht2 {max-width: 100%;}
.app-icon {position: absolute;width: 100%;max-width: 45%;right: -32%;z-index: 2; top: 46%;}
.app-icon2 {position: absolute;width: 100%;max-width: 7%; left: 34px; z-index: 3;bottom: -10%;}
.justify-content-lg-center {justify-content: center !important; }

#eco {background-image: url(../images/eco-bg2.jpg);background-repeat: repeat; background-position: top center; background-size: 100%;}
.eco-bg {background-image: url(../images/eco-top-bg.svg);background-repeat: no-repeat;background-position: center -10px;background-size: 100%;padding-top: 1px;}
#eco .event-title-1 {margin: 8% auto 0px;}
#eco .page-top {background: #9a6524;}
#eco .page-title1 {border-bottom: 2px #9a6524 solid;}
.eco-sbg {background-image: url(../images/eco-sbg.svg); background-repeat: repeat; background-position: center top; background-size: 100%;}
#eco .fun-title-style { background: #9a6524;}
#eco .fun-title-style::before {background: #ccbba3;}
#eco .page-title-1 {line-height: 1.5;color: #9a6524; border: 1px #9a6524 solid;height: max-content;}
#eco .page-title-1::before {background: #9a6524;}
.coffee {color: #9a6524;}
#eco .fun-text-row ul {width: 71%;}
.fun-text-row .coffee {position: relative;top: 5px;}
.eco-box-stitle {color: #9a6524;display: block;}
.eco-box-stext {padding-left: 4%;margin-bottom: 12px;}
.eco-left {padding-left: 0%;display: block; margin-bottom: 30px;}
.eco-box2 {width: 76%;}
.eco-box2 ul {width: 100%!important;}
.eco-box2 ul li{margin-left: 8%;}
.coffee2 {color: #9a6524;}
.eco-box-1-pic {position: absolute;bottom: -2%;right: 0;width: 100%; max-width: 28%;}
.eco-box3-title {color: #9a6524;width: 100%;border: 1px #9a6524 solid;text-align: center;display: block;max-width: 145px;border-radius: 50px;line-height: 2.4;margin-top: 30px;}
#eco .fun-text-row ul li ul {display: inline-grid;}
.eco-body2 {position: relative;width: 100%;}
.eco-box-3-pic {position: absolute;top: 0; right: 0; width: 100%; max-width: 30%;}
.width60 {width: 63%;}

.app-link {position: absolute; width: 55%;height: 22%; display: block; z-index: 2; bottom: 0;}
.win-stext {color: red;font-size: 13px;text-align: center;}
#fun table {width: 85%;position: relative; left: 14%;}
#fun table tr{border: 1px #7bb844 solid;}
#fun table tr:first-child {background: #7bb844;color: #fff;}
#fun table tr td{ padding: 8px;}
#fun table tr td span {display: inline-block;}
.tr-color {background: #cadeb8;}

.table-none{left: 0!important;}
.table-none tr{border: none!important;}
.table-none tr:first-child{background: none!important;color: #50504e!important; border: none!important;}
.table-none tr td{padding: inherit!important;}
.info-car {width: 100%;max-width: 600px;}

.icon-01 {display: inline-block;width: 100%;max-width: 30px;margin: 0 7px;}
.qrcode-icon {position: absolute;width: 100%;max-width: 24%; top: 0; right: 0;}
.fun-tag2 {color: #63499b;position:relative;font-size: 18px;line-height: 1.5;text-align: left;bottom: 0; left: 0;}
.fun-tag3 {color: #63499b;font-size: 18px;line-height: 1.5;text-align: center; display: block;}
.big-size {font-size: calc(1em + 15px);line-height: 1.5;font-weight: bold;}
.big-size span {font-size: 40px;line-height: 1;}
.inline-block span {display: inline-block;}
#qa .flex {display: flex;gap: 25px;}
.acer-slogo {width: 100%;max-width: 300px;margin: 10px 0 20px;}
.violet {color: #63499b;}
.eco-pic5 { width: 100%;position: absolute; max-width: 240px;top: 0;right: 5%;}
.cloud-1 {position: absolute;width: 100%; max-width: 17%; top: 16%;left: 6%;}
.cloud-2 { position: absolute;bottom: 0; right: 9%;width: 100%;max-width: 15%;}
.info-stext {text-align: center;font-size: 14px;}
.page-title-box {position: relative;background-image: url(../images/title-bar-bg.svg);background-repeat: repeat-x;background-size: contain;width: 100%;display: block;height: 70px;text-align: center;max-width: 400px;margin: auto;}
.page-title-box::after { position: absolute;content: ''; background-image: url(../images/title-bar-1.svg); left: -36px; top: 0; width: 38px; z-index: 1; height: 70px; background-size: contain;background-repeat: no-repeat;}
.page-title-box::before {position: absolute;content: '';background-image: url(../images/title-bar-2.svg); right: -36px; top: 0; width: 36px; z-index: 1; height: 70px;background-size: contain; background-repeat: no-repeat;}
.page-title-box h3 {padding-top: 7px;}
.title-1 {font-size: 22px;font-weight: 500;background: #10193d;color: #fff;text-align: center;display: inline-block;padding: 3px 50px;margin-bottom: 20px;}
.text {display: block;}
.text ul {padding: revert;}
.text ul li{list-style: decimal;display: list-item;}
.stext {font-size: 12px;}
.title-body {position: relative;display: flex; gap: 20px;align-items: center;margin-top: 50px;}
.title-icon-1 {width: 45px;}
.title-tit {}
.title-bar1 {background-image: url(../images/icon-3.svg); background-repeat: no-repeat; background-size: contain; text-align: center; background-position: center center; width: 100%; max-width: 200px; color: #fff; font-size: 22px;}
.title-bar1 span{}
.title-bar-text {color: #e60012;font-size: 22px;}
.title-body2 {display: flex;gap: 10px;align-items: center;padding-left: 70px;margin-top: 10px;}
.title-bar2 {background-image: url(../images/icon-4.svg); background-repeat: no-repeat; background-size: contain; text-align: center; background-position: center center; width: 100%; max-width: 140px; color: #fff; font-size: 20px;}
.team-text-1 {}
.team-text-1 ul{padding: 18px;}
.team-text-1 ul li{list-style: decimal;display: list-item;}
.team-foot-bg {background-image: url(../images/team-foot-bg.svg);background-repeat: no-repeat; background-size: 100%; background-position: left bottom; padding-bottom: 41%; position: relative;}
.foot-text-1 {text-align: center;color: #fff;position: absolute; bottom: 10px; width: 100%;}

#family .title-bar1 {background-image: url(../images/icon-6.svg)!important;}
#family .title-bar2 {background-image: url(../images/icon-7.svg)!important;}
.team-foot {padding-bottom: 150px;}
.game-top-text {text-align: center;line-height: 2;padding-top: 50px;padding-bottom: 40px;}
.game-top-text span {display: inline-block;}
.game-box {}
.game-box-text {line-height: 1.7;text-align: justify;}
.fantasy-title-1 {background-image: url(../images/fantasy-icon1.svg);background-repeat: no-repeat; background-size: contain; text-align: center; background-position: center center; width: 100%; max-width: 200px; color: #fff; font-size: 25px;}
.fantasy-text {text-align: justify;}
.fantasy-title-2 {background: #006934;color: #fff;text-align: center;display: inline-block;padding: 2px 30px;border-radius: 30px;margin: 30px 0 0;}
#fantasy .title-bar2 {background-image: url(../images/icon-7.svg)!important;}
.fantasy-title-3 {background-image: url(../images/fantasy-icon2.svg);background-repeat: no-repeat; background-size: contain;text-align: center;background-position: center center; width: 100%; color: #fff;font-size: 25px; height: 80px;margin-bottom: 20px; line-height: 80px;}
iframe { width: 100%; height: 750px;}
.title-body3 {display: flex;gap: 10px;margin-bottom: 30px;}






@media only screen and (max-width: 1680px) {


	
}


@media only screen and (max-width: 1536px) {

    
}
    
    
    
@media only screen and (max-width: 1440px) {

    
}


@media only screen and (max-width: 1366px) {
.info-title {max-width: 500px;}
    .event-icon-1 {top: -3%;}
    .fun-bg {background-position: center 0px;}

    
}


@media only screen and (max-width: 1280px) {
    .menu-1,.menu-2,.menu-3,.menu-4,.menu-5,.menu-6 {top: -3px;}
    .menu-7 {top: -5px;}
    
    
}


@media only screen and (max-width: 1024px) {

    .title {max-width: 100%;}
    .rd-navbar-fullwidth .rd-navbar-dropdown, .rd-navbar-static .rd-navbar-dropdown {width: 100%;padding: 10px 10px 10px;margin-left: 0%;}
    .info-title {max-width: 400px; }
    .eco-sbg {background: none;}
    .fun-tag {left: 47%;}
    .eco-li2 {width: 130px;}
    .sign-pic {right: 0; top: -20%;}
    .sign-pic2 {right: 0;top: -32%;}
    .page-title-box h3 {padding-top: 15px;}
    

    
}




@media only screen and (max-width: 992px) {

}

/* iphone 12 pro  */
@media only screen and (max-width: 926px) {
.menu {height: 100px;max-width: 100px;position: relative;}
    .menu-1, .menu-2, .menu-3, .menu-4, .menu-5, .menu-6 {top: -16px;margin: 0;}
    .menu-7 {top: -16px;margin: 0;}
    .menu-title { position: absolute;width: 100%;left: 50%;margin-left: -54%;font-size: 14px;top: 86%;}
    .menu-title span {font-size: 10px;}
    .rd-navbar-nav li:nth-child(odd) .rd-navbar-dropdown {margin-top: 50px!important;}
    .rd-navbar-nav li:nth-child(even) .rd-navbar-dropdown {margin-top: 50px!important;}
}


@media only screen and (max-width: 768px) {
	.index_pic {
    left: 0;
    max-width: 80%;
}
    .index_pic2 {
    top: 15vw;
    max-width: 26vw;
    margin-left: 15vw;
}
    .index_pic_bg {background-position: bottom;}
    .logo {max-width: 10vw;}
    .mlogo {position: absolute;top: 12px; width: 60px; left: 50%; margin-left: -30px; }
    .app-no2 {font-size: 26px;width: 60px;line-height: 60px;top: -12px;left: -16px;}
    app-box-title2 {font-size: 16px;left: 11px;top: -4px;}
    .app-ex {right: -22%;}
    #eco .fun-text-row ul {width: 58%;}
    .eco-box2 {width: 58%;}
    .eco-tag2 {left: 31%;}
     .fun-tag {position: relative;left: 0; top: 8px; text-align: left; font-size: 18px;}
    .qrcode-icon {position:relative; }
    
	}







@media only screen and (max-width: 767px) {
  .pc2 { display: none;}
 .mobile2 { display: inherit;}
 .col-xxs-6 {flex: 0 0 50%;max-width: 50%;}
    .rd-navbar-nav::after {display: none;}
    .rd-navbar-nav li:nth-child(odd) .rd-navbar-dropdown {margin-top: 0px!important;}
    .rd-navbar-nav li:nth-child(even) .rd-navbar-dropdown {margin-top: 0px!important;}
    .page-title {padding-top: 50px;}
    .page-title-1 {font-size: 15px;font-weight: 500;}
    .info-foot {display: contents;margin: 0;width: 100%;}
    .pu-link {top: 0;}
    .pu-logo {width: 100%; max-width: 80%; margin: auto;}
    .info-icon-1 {bottom: -15%;max-width: 39%;}
    .info-icon-2 {bottom: 13%;max-width: 31%;}
    .info-icon-3 {bottom: 45%;max-width: 38%;}
    .bg2 {background-image: url(../images/index-mbg.png);}
    #app .page-top {max-width: 94%;}
    #app .page-top h3 span {display: inline-block;}
    .app-icon {display: none;}
 .rd-navbar-dropdown::after {display: none;}
    .fun-text-row p { width: 100%;}
    
    .title-tit {display: inline-block;}
    .title-icon-1 {width: 30px;display: inline-block;position: relative;top: -3px;}
    .title-body2 {padding-left: 0px;}
    .title-body {display: flow-root;}
    .title-bar-text {display: inline-block;}
    .title-bar1 {display: inline-block;}
	
}

@media only screen and (max-width: 766px) {

    .info-title {max-width: 200px;top: 18px;}
    .page-top {max-width: 90%;}
    .slider-box {bottom: 2%;}
    
}



/* iphone 8 w */
@media only screen and (max-width: 667px) {

}



@media only screen and (max-width: 480px) {

    .show_text {font-size: 13px;}
    .foot-bg { background-size: 200%;}
    .event-box {display: grid; gap: 10px;margin-bottom: 60px;}
    .event-time {width: 100%;display: inline-flex;margin: 0;}
    .event-text-1 {width: 100%;order: 2;}
    .event-pic {width: 100%;max-width: 90%;margin: 10px auto;order: 1;}
    .event-time-1 {width: 100%;}
    .event-time-line {width: 80px;height: 2px;}
    .page-top h3 {letter-spacing: 5px;}
    .evnet-title-2 span {font-size: 22px;}
    .event-icon-4 {top: 15%; z-index: -1;}
    .event-icon-1 {top: -20px; max-width: 61%;}
    .event-icon-2 {top: 30px;}
    .fun-box-1 {display: block;}
    .fun-box-1 p {width: 100%;}
    .fun-box-1-pic {margin: 20px auto;}
    .fun-text-1 {line-height: 2;}
    .fun-text-row p {display: block;}
    .fun-text-row {display: block;}
    #fun .page-title-1::before {height: 30px;}
   
    .fun-text-row ul {width: 100%;}
    .fun-box-4-pic {max-width: 100%; position: relative;}
    .fun-li-box {grid-template-columns: repeat(2, 1fr);}
    .fun-box4-pic {max-width: 140px;}
    .fun-box-1 p {line-height: 2;}
    .event-stext {line-height: 2;}
    .sign-text-row {display: block;}
    .sign-title-1 {width: 120px;padding: 4px 5px;margin-bottom: 5px;}
    .sign-text {width: 100%;margin-bottom: 20px;}
    .sign-pic ,.sign-pic2 {right: 0;max-width: 100%;position: relative;}
    .app-page {display: block;}
    .app-pic {margin-bottom: 20px;}
    .app-stitle {display: block;font-size: 16px;text-align: center;margin-top: 10px;}
    .app-box-title {max-width: 100%;padding: 3px;border-radius: 21px;font-size: 20px;}
    .app-no {width: 60px; line-height: 60px; font-size: 26px; top: -10px; }
    .app-foot {min-height: auto;}
    .app-box-title2 {padding: 6px;left: 4px;top: -12px;}
    .app-no2 {top: -19px;}
    .app-ex {right: 2%;max-width: 24%;top: 6.7%;}
    .app-icon2 {max-width: 17%;left: 42%;bottom: -5%;}
    .sign-title-1 span {bottom: 0;left: 100%;width: 150px;}
    .page-title-1::before {height: 33px;}
    #eco .fun-text-row ul {width: 100%;}
    .eco-box2 {width: 100%;}
    #eco .fun-box-2 {display: block;}
    .eco-box-3-pic {position: relative;max-width: 100%;}
    .width60 {width: 100%;}
    .eco-box-4-pic {position: relative;bottom: 0%;max-width: 100%;}
    .eco-pic2 {position: relative;max-width: 100%;top: 0;}
    .eco-pic4 {position: relative;max-width: 100%;}
    .eco-tag2 {top: 1%;left: 56%;}
    .info-icon-1 ,.info-icon-2 ,.info-icon-3 {display: none;}
    .event-icon-3,.event-icon-4 {display: none;}
    .fun-sbg ,.eco-sbg ,.sign-sbg ,.qa-sbg, .app-sbg {background: none;}
    #app .page-top h3 span {font-size: 14px;letter-spacing: 0px;}
    
    .index-text {font-size: 16px;}
    .eco-drow {display: block;}
    .eco-win1000 {position: relative;right: 0;top: 0;max-width: 100%;}
    .eco-ptitle-1 {font-size: 16px;}
    .eco-foot-title {font-size: 18px;}
    .fun-title-style::before {height: 48px;} 
    .fun-title-style {padding: 10px 20px;}
    .eco-box-1-pic {position: relative;bottom: 0;right: 0; max-width: 100%;}
    .page-body {padding-bottom: 200px;}
    #index .foot_logo {bottom: 6px;}
    .fun-box-2 {display: block;}
    .fun-tag {font-size: 16px;}
    #fun table {width: 100%;left: 0;}
    #eco .fun-title-style span {font-size: 12px;}
    .eco-li-box {display: block!important;}
    .eco-box3-title-hight {font-size: 20px;width: 100%;padding: 4px;}
    .qrcode-icon {max-width: 100%;}
    .fun-tag2 {position: relative;font-size: 16px;}
    .fun-tag3 { font-size: 16px;}
    .fun-box4-title {font-size: 22px;}
    .qa-title { font-size: 16px;}
    .eco-pic5 { width: 100%;position: relative; max-width: 100%;top: 0;right: 0;}
    .cloud-1 {max-width: 40%;top: 16%;left: 0;}
    .cloud-2 {right: 0;max-width: 30%;}
    .page-title-box {height: 48px; max-width: 250px;}
    .page-title-box::before {right: -28px;height: 48px;}
    .page-title-box::after {left: -15px;height: 48px;}
    .page-title-box h3 {padding-top: 8px;}
    .page-title1 {margin: 0px 0 30px;padding-top: 70px;}
    .title-1 {font-size: 16px;padding: 3px 20px;}
    .foot-text-1 {font-size: 12px;}
    
    .title-bar2 {font-size: 16px;}
    .title-bar1 {font-size: 18px;}
    .game-top-text {padding-top: 70px;padding-bottom: 20px;font-size: 16px;}
    .fantasy-title-1 {max-width: 155px;font-size: 20px;}
    .fantasy-title-3 {font-size: 22px;height: 70px;line-height: 70px;}
    
    
    
    

	}



@media only screen and (max-width: 428px) {
   .index_pic2 {
    top: 52vw;
    max-width: 46vw;
    margin-left: 0vw;
}

    .foot_logo {
    width: 240px;
    margin-left: -120px;
}
        
    

	}



@media only screen and (max-width: 414px) {
  
	}


@media only screen and (max-width: 390px) {

}

@media only screen and (max-width: 375px) {

  
	}


@media only screen and (max-width: 360px) {

}