@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:#7bba45;
    color: #fff;
}

.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-image: url(../images/index-bg.png?v=2);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 100%;
    min-height: 140vh;
    position: relative;

    
}
.bg2 {
     background-image: url(../images/index-bg2.png?v=2);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    width: 100%;
    min-height: 60vh;
    position: relative; 
}


.foot_bg {

}

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


.title {
        width: 100%;
    max-width: 1000px;
    margin: auto;
        position: relative;
    left: -30px;
}
#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;
    background: #fff;
    border-radius: 90%;
    border: 2px #717071 solid;
    width: 100px;
    height: 100px;
 
}
.menu:hover{ border: 2px #7bba45 solid;}
.menu-1{
    background-image: url(../images/menu-01.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 85px;
    display: block;
    margin-bottom: 25px;
    background-position: center center;
    position: relative;
    top: 0
}
.menu-1:hover {background-image: url(../images/menu-01_2.svg);}

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

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

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

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

.menu-6{
     background-image: url(../images/menu-06.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 85px;
    display: block;
    margin-bottom: 25px;
    background-position: center center;
        position: relative;
    top: 0
}
.menu-6:hover {background-image: url(../images/menu-06_2.svg);}

.menu-7{
          background-image: url(../images/menu-07.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 85px;
    display: block;
    margin-bottom: 25px;
    background-position: center center;
        position: relative;
    top: 0
}
.menu-7:hover {background-image: url(../images/menu-07_2.svg);}

.menu-8{}
.menu-8:hover {}

.menu-title{
    text-align: center;
    color: #717071;
}
.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-01.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;}
.rd-navbar-nav::after {content: '';position: absolute;top: 58%; width: 90%; z-index: -1; height: 3px; background: #7bba45; left: 50%; text-align: center; margin-left: -45%;}

.menu:hover .menu-title {color:#7bba45; }
.menu:hover .menu-1 {background-image: url(../images/menu-01_2.svg);}
.menu:hover .menu-2 {background-image: url(../images/menu-02_2.svg);}
.menu:hover .menu-3 {background-image: url(../images/menu-03_2.svg);}
.menu:hover .menu-4 {background-image: url(../images/menu-04_2.svg);}
.menu:hover .menu-5 {background-image: url(../images/menu-05_2.svg);}
.menu:hover .menu-6 {background-image: url(../images/menu-06_2.svg);}
.menu:hover .menu-7 {background-image: url(../images/menu-07_2.svg);}


.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);}
.rd-navbar-nav .active .menu .menu-2 {background-image: url(../images/menu-02_2.svg);}
.rd-navbar-nav .active .menu .menu-3 {background-image: url(../images/menu-03_2.svg);}
.rd-navbar-nav .active .menu .menu-4 {background-image: url(../images/menu-04_2.svg);}
.rd-navbar-nav .active .menu .menu-5 {background-image: url(../images/menu-05_2.svg);}
.rd-navbar-nav .active .menu .menu-6 {background-image: url(../images/menu-06_2.svg);}
.rd-navbar-nav .active .menu .menu-7 {background-image: url(../images/menu-07_2.svg);}
.index-box {}
.index-pic {width: 100%;max-width: 500px;margin: 10px auto 50px;}
.index-text {text-align: center;font-size: 20px;}
.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-bg.png?v=2);background-repeat: no-repeat; background-size: 100%; background-position: center top;}
.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: 24% auto 0px;}
.page-top h3 {color: #fff; letter-spacing: 15px;}
.page-title1 {width: 100%;position: relative;border-bottom: 2px #18bbef solid;margin-bottom: 30px;}
#info {background-image: url(../images/info-bg3.jpg);background-repeat: repeat; background-position: top center; background-size: 100%;}
.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;}
.info-bg3 {background-image: url(../images/info-bg2.png?v=2);background-repeat: no-repeat; background-size: 100%; background-position: center top;}
.blue {color: #2ca3dd;}
.mag-20 {margin-bottom: 20px;}
.red{color: #e0007f;}
.green { color:#7bba45;}
.brown {color: #af8046;}
.org {color: #ef7e1e!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: 40px;}
.sign-title-1 {width: 15%; background: #27a1cd; color: #fff; text-align: center; height: min-content; padding: 10px 5px; border-radius: 40px;position: relative;}
.sign-text {background: #fff; padding:10px 25px;width: 85%;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.png?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: auto;}
#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%;}
.eco-top {top: 38%;}
.eco-box-4-pic {position: absolute;width: 100%;right: 0;bottom:25%;max-width: 50%;}
.eco-ptitle-1 {color: #9a6524;text-align: center; border: 2px #9a6524 solid; width: 100%; max-width: 600px; margin: 80px auto 30px; border-radius: 50px; font-size: 20px;}
.eco-pic { width: 100%;max-width: 800px; margin: auto;}
.eco-foot-title {color: #9a6524;font-size: 22px;margin-top: 40px;line-height: 1.5;}
.eco-foot-box {margin-top: 20px;border-top: 2px #50504e dashed;}
.eco-pic2 { position: absolute;width: 100%;max-width: 36%;top: 20%;right: 0;}
.eco-drow { display: flex;position: relative;}
.eco-pic3 {position: absolute;width: 100%;max-width: 30%;right: 0; top: 15%;}
.eco-win1000 {position: absolute;right: -50%; top: -50%; width: 100%; max-width: 45%;}
.eco-tag2 {color: #e65513;position: absolute;top: 20px; left: 20%;}
.eco-img {width: 100%;display: block;max-width: 300px; margin: auto;}
.eco-pic4 {position: absolute;width: 100%;max-width: 33%;right: 0;bottom: 0;}
.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;}
.eco-box-stitle span{background: #a36112;padding: 0px 8px;display: inline-block;color: #ffdd12;}
#eco .fun-title-style span {font-size: 20px;}
.eco-li2 {width: 98px;}
.eco-li-text {}
.eco-li-box {display: flex!important;}
.eco-box-hight {}
.eco-box3-title-hight {
font-size: 22px;
    background: #e79127;
    display: block;
    width: 20%;
    line-height: 1.5;
    padding: 6px;
    text-align: center;
    border-radius: 50px;
    color: #ffeb01;
    /* border: 3px #d18220 solid; */
    margin-top: 40px;
}
.eco-ul-ul {padding-left: 7%;}
.eco-ul-ul li{list-style: disc;display: list-item;}
.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%;}
@supports (-webkit-touch-callout: none){     /* 大概等同 Chrome */
  .app-sbg{
    background-size:200%;   /* 先讓光柵化大 2 倍 */
    transform:scale(.5);    /* 再縮回原來大小 */
    transform-origin:0 0;
  }
}





@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;}
    .menu {height: 90px;max-width: 90px;}
    
}


@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%;}
    

    
}




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

}

/* iphone 12 pro  */
@media only screen and (max-width: 926px) {
.menu {height: 65px;max-width: 65px;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: 12px; top: 107%;}
    .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%;}

	
}

@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: 308%;}
    .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: 40px;}
    .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;}
    .title { left: -8px;}
    .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;}
    

	}



@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) {

}