@charset "UTF-8";
[data-aos=fade-left]{transform:translate3d(20px,0,0)}
[data-aos=fade-right]{transform:translate3d(-20px,0,0)}
[data-aos=fade-up]{transform:translate3d(0,20px,0)}
[data-aos=fade-down]{transform:translate3d(0,-20px,0)}

::-moz-selection {
  background:#ff7e00;
  text-shadow: none;
}

::selection {
  background:#ff7e00;
  text-shadow: none;
}

/*價錢、底色*/
:root {
  --price-color:#FF6;
  --menu-color:#1f8177;
}

.wrapper {width:100%;background:url(img/wrapper.jpg) center 60px no-repeat;overflow-x:hidden;position:relative;}

.top {width:100%;height:40px;background:#362E2B;}
.logo {width:112px;height:36px;margin:2px 0 0 5px;float:left;}
.logo img {width:100%;}
.top_right {margin:0 10px 0 0;line-height:40px;color:#FFF;float:right;}
.top_right a ,.top_right a:hover {color:#FFF;}
.main {width:1200px;height:auto;margin:0 auto;/*overflow:hidden;*/position:relative;}
.tablet img {display:block;width:100%;}

.desktop {width:1170px;height:100%;margin:0 auto;position:relative;}
.main_bg {top:0;position:relative;}
.main_bg img {display:block;width:100%;}
#gotop {display:none;padding:20px;right:20px;bottom:20px;color:#000;background:rgba(255 ,255 ,255 ,.6);border-radius:20px;cursor:pointer;z-index:10002;position:fixed;}
#gotop::before {display:block;content:'^';font-size:30px;top:17px;left:10px;position:absolute;}

.fixed_bg {width:95px;height:auto;top:100px;right:10px;position:fixed;z-index:1000;display: none;}
.fixed_right {width:100%;margin:0;padding:5px 0 0;border-left:3px solid #FFF;border-right:3px solid #FFF;background:#f7cdff;list-style-type:none;box-sizing:border-box;}
.fixed_right li {width:100%;font-size:15px;text-align:center;border-top:1px dashed #8827d3;}
.fixed_right li:last-child::after {content:'';display:block;width:100%;border-bottom:1px dashed #8827d3;}
.fixed_right li a {display:block;width:100%;height:auto;line-height:20px;padding:10px 0;color:#8827d3;}
.fixed_right li a:hover {display:block;width:100%;height:auto;line-height:20px;padding:10px 0;color:#FF0;background:#ff2f58;}
.gotop {text-align:center;}
.gotop a {box-sizing:border-box;display:block;width:100%;height:60px;line-height:30px;font-size:16px;color:#8827d3;background:#f7cdff;border-bottom:3px solid #FFF;border-left:3px solid #FFF;border-right:3px solid #FFF;border-radius:0 0 80px 80px;}
.gotop a::before {content:'▲';display:block;height:22px;font-size:22px;}
.gotop a:hover {box-sizing:border-box;display:block;width:100%;height:60px;line-height:30px;color:#FF0;background:#ff2f58;border-bottom:3px solid #FFF;border-left:3px solid #FFF;border-right:3px solid #FFF;border-radius:0 0 80px 80px;}


/* .main {width:1200px;height:auto;} */
.mobile ,.tablet {display:none;width:100%;}
.mobile img {width:100%;}

.t1 ,.t2 ,.p1 {position:absolute;z-index:1000;}
.t1 img ,.t2 img ,.p1 img {width:100%;}
.t1 {width:40.08%;top:15%;left:6.25%;}
.t2 {width:40.08%;top:65%;left:6.25%;}
.p1 {width:38.75%;top:12.5%;left:54.583%;}

.bg1 {background:url(img/bg1.jpg) center 0 repeat-y;}

.slider_bg {margin:0;padding:15px 0;background:#8b06f7;border-radius:0 0 30px 30px;}
.product_bg {margin:0;padding:15px 0;background:#eb82ff;border-radius:0 0 30px 30px;}

/*main_list*/
.main_list_bg {padding:0;}
.main_list {width:1140px;margin:0 auto;padding:0 0.5%;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap;z-index:2;position:relative;}
.main_list_title {width:100%;display:block;margin:0 auto;text-align:center;}
.main_list li {margin:20px 0 0;box-sizing:border-box;overflow:hidden;z-index:10001;position:relative;}
.main_list li a {display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap;z-index:2;position:relative;}
.main_list li:nth-child(even) a {flex-direction:row-reverse;}
.main_list_l {width:45%;position:relative;}
.main_list_r {width:40%;color:#FFF;display:flex;flex-direction:column;justify-content:center;position:relative;}
.main_list_r h2 {font-size:30px;line-height:40px;}
.main_list_name {margin:0 0 20px;padding:0 0 10px;border-bottom:1px dashed #FFF;}
.main_list li img {display:block;width:100%;overflow:hidden;box-sizing:border-box;}
.main_sub_title {line-height:24px;}
.main_list_price {margin:10px 0 0;font-family:'Rubik','Noto Sans TC', sans-serif;color:var(--price-color);line-height:36px;}
.main_list li p {display:inline-block;margin:0 5px 0 0;padding:0 5px;font-size:15px;line-height:25px;background:var(--price-color);border-radius:6px;color:#000;}
.main_list li span::before {content:'$';font-size:25px;color:var(--price-color);}
.main_list li span {font-size:45px;line-height:40px;top:3px;position:relative;}

/*pro_list*/
.pro_list_bg {padding:150px 0 0;}
.pro_list {width:1200px;margin:0 auto;padding:0 0 100px;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap;z-index:2;position:relative;}
.pro_list_title {width:100%;display:block;}
.pro_list_title img {width:75% !important;margin:0 auto;}

.yt {width:100%;padding-bottom:56.25%;position:relative;}
.yt iframe {width:100%;height:100%;top:0;left:0;position:absolute;}

.pro_list li {width:31%;margin:30px 0 0;background:#FFF;border-radius:10px;box-sizing:border-box;overflow:hidden;z-index:10001;position:relative;}
.pro_list li a {display:flex;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;z-index:2;position:relative;}
.pro_list li:nth-child(1) {background:none;}
.pro_list_l {width:60%;position:relative;}
.pro_list_r {width:37%;margin:0 0 0 1%;color:#000;display:flex;flex-direction:column;justify-content:center;position:relative;}
.pro_list_r h2 {font-size:18px;line-height:30px;}
.pro_list_name {height:60px;margin:0 0 5px;line-height:20px;overflow:hidden;}
.pro_list li img {display:block;width:100%;overflow:hidden;box-sizing:border-box;}
.pro_sub_title {line-height:24px;}
.pro_list_price {font-family:'Rubik','Noto Sans TC', sans-serif;color:var(--price-color);line-height:36px;}
.pro_list li p {display:table;margin:0 5px 0 0;padding:0 5px;font-size:15px;line-height:25px;background:var(--price-color);border-radius:6px;color:#FFF;}
.pro_list li span::before {content:'$';font-size:20px;color:var(--price-color);}
.pro_list li span {font-size:30px;line-height:30px;top:3px;position:relative;}


.sub-menu {overflow-x:auto;-webkit-overflow-scrolling:touch;}
.sub-menu ul {width:1200px;margin:0 auto;padding:0;list-style:none;display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap;}
.sub-menu li {width:auto;margin:0 0 20px;padding:2%;background:#51703b;text-align:center;border-radius:30px;box-sizing:border-box;overflow:auto;white-space:nowrap;}
.sub-menu li a {color:#FFF;}
.sub-menu li h3 {margin:0;color:#FFF;border-bottom:1px dotted #FFF;}
.sub-menu::-webkit-scrollbar { width:0;display:none;}


.copyright {font-size:13px;margin:0;padding:0 0 10px;text-align:center;color:#FFF;background:#362E2B;}
.copyright p {width:95%;margin:0 auto;padding:10px 0 0;text-align:center;color:#FFF;}

/*手機版選單*/
.m_menu {width:100%;height:50px;margin:0;padding:0;text-align:center;box-shadow:0 -1px 2px 1px rgba(0%,0%,0%,0.10);bottom:0;position:fixed;z-index:20000;justify-content: center;align-items: center; flex-direction:row;justify-content:space-around;flex-wrap:wrap;
    background: linear-gradient(90deg, rgba(237, 237, 237, 1)0%, rgba(255, 255, 255, 1)50%); 
    background: -moz-linear-gradient(90deg, rgba(237, 237, 237, 1)0%, rgba(255, 255, 255, 1)50%); 
    background: -webkit-linear-gradient(90deg, rgba(237, 237, 237, 1)0%, rgba(255, 255, 255, 1)50%); 
    background: -o-linear-gradient(90deg, rgba(237, 237, 237, 1)0%, rgba(255, 255, 255, 1)50%); }
    .m_menu li {width:calc(100%/4);list-style-type:none;border-right:1px solid #EEE;box-sizing:border-box;font:bold 15px/25px "微軟正黑體", Arial;position:relative;}
    .m_menu li p {color:#999;line-height:15px;margin:0;padding:0;font-size:11px;font-weight:lighter;text-align:center;}
    .m_menu li:last-child {border:0;}
    .m_menu li i {display:block;color:#999;}
    .m_menu li a:hover i ,.m_menu li a:hover p {display:block;color:#ff2f58;}
    .m_menu li a:active i ,.m_menu li a:active p {display:block;color:#ff2f58;}
    .gotop2 {display:none;width:30px;height:30px;line-height:30px;background:rgba(255 ,255 ,255 ,.8);text-align:center;border-radius:15px;box-shadow:1px 1px 2px 1px rgba(20%,20%,40%,0.2);right:10px;bottom:60px;position:fixed;z-index:10001;}
    .gotop2 p {font:10px/20px Arial;cursor:pointer;top:-20px;position:relative;z-index:10005;}
    .gotop2 a {color:#000;font-size:11px;}
    
    @media (min-width: 1081px) {
    .m_menu {display:none;}
    .gotop2 {display:none;}
    }
    
    @media (max-width: 1080px) {
    .fixed_bg {display:none !important;}
    .m_menu {display:flex;}
    .gotop2 {display:block;}
    .copyright {padding:5px 0 60px;background:#362E2B;}
    }
    
@media screen and (max-width: 767px) {
    .menu {width:100%;height:45px;display:grid;/*position:fixed;*/}
    .menu::before {content:"";width:100%;height:45px;}
    .menu a:hover {text-decoration:none;background:none;}
    .menu ul.active {display: none;}
    .menu ul {width:calc(100vw + 45px);height:auto;top:46px;border:none;z-index:10001;/*position:fixed;*/position:inherit;}
    .menu li {display: block;width:100%;height:auto !important;margin:0 !important;color:#FFF;border-bottom:1px solid #888;border-left:0;background:none;}
    .menu li::before {display:none;}
    .menu li a {height:auto;color:#FFF;}
    .menu li a:hover {color:#333;background:#91aac0;}
    .menu ul li a div {display:block;}
    .menu a {display: block;}
    .toggle-nav {width:26px;height:26px;padding:10px;line-height:46px;right:0;position:absolute;}
    .icon-bar {display:block;width:100%;height:2px;margin:5px 0 0;border-radius:1px;background:#FFF;}

    .menu .menu-logo {position: relative;}

    .menu_bg {width:100%;height:auto;background:rgba(21 ,20 ,16 ,.9);}
    .menu_inner {width:100%;height:60px;line-height:40px;margin:0;padding:10px;font-size:30px;text-align:left !important;/*transform:rotate(0)*/;-webkit-writing-mode:inherit;writing-mode:inherit;left:20px;position:inherit;}
    .menu_inner::before {content:"";width:15px;height:2px;background:#FFF;top:25px;left:-25px;position:absolute;}
    a:hover .menu_inner {left:25px;transition: all 0.3s ease-out;}
    .current-active a .menu_inner::before ,a:hover .menu_inner::before {width:20px;background:#333 !important;transition: all 0.3s ease-out;}
    .menu_line {display:none !important;}
    .menu_num {display:none !important;}

    .current-active {background:#91aac0 !important;}

}
.navFixed {position:fixed;margin-top:0;background:#638099;border-bottom:1px solid #999;transition:opacity .5s ease-out;}


@media (max-width:1490px) {
.mobile {display:none;}

}

@media (max-width:1200px) {
.desktop {width:100%;}
.desktop img {width:100%;}
.mobile {display:none;}
.main {width:100%;height:auto;}

.main_list {width:95%;}

.pro_list ,.pro_list1_bg {width:90%;padding:40px 0;}

.sub-menu ul {width:90%;}

.notice {width:90%;}
.notice_title {font-size:40px;}
.notice p {font-size:18px;line-height:30px;}
.notice ul li {margin:0 0 0 20px;padding:0 0 0 10px;font-size:18px;line-height:30px;}

}
  
@media (max-width:959px) {
.mobile {display:none;}
.menu_inner {font-size:15px;}
.m_block {display:block;}
.m_none {display:none;}
.main_title {width:100%;margin:0 auto;}
.main_title img {width:100%;}

.pro_list li {width:46%;}

.notice_title {font-size:40px;}
.notice p {font-size:18px;line-height:30px;}
.notice ul li {margin:0 0 0 25px;padding:0 0 0 10px;font-size:15px;line-height:30px;}
}

@media (max-width:768px) {
.desktop {display:none;}
.mobile {display:block;}
.bgbg2 {padding: 0 0 80px;}

.main_list {width:85%;}
.main_list_l ,.main_list_r {width:100%;}

.t1 {width:76%;top:4%;left:12%;}
.t2 {width:76%;top:32%;left:12%;}
.p1 {width:76%;top:48%;left:12%;}

.pro_list_bg {padding:0;}
.pro_list li {width:96%;}
.pro_list1_bg_l ,.pro_list1_bg_r {width:98%;padding:30px 0 0;}
.pro_list1_title img {width:260px !important;margin:0 auto;}

.pro_list_name ,.pro_list1_name {font-size:13px;}
.pro_list li span ,.pro_list1 li span {font-size:25px;line-height:25px;top:3px;position:relative;}


.notice_bg {margin:0;}
}