@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+TC:wght@300;700&family=Noto+Serif+TC:wght@200;500&display=swap');

* { margin: 0; padding: 0; }
*:focus { outline: none; }
body { margin:0;border: #5b3d76 5px solid;border-top: 0;}
body ::selection {background: #dbdbdb;text-shadow: none;}
body::-webkit-scrollbar { width: 7px; }
body::-webkit-scrollbar-track { background: #d0d0d0; }
body::-webkit-scrollbar-thumb { background: #db0e78; }
body::-webkit-scrollbar-thumb:hover { background: #222222; }
header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, font, strong, b, a, i{text-align: left;vertical-align: middle;margin: 0;padding: 0;line-height: 170%;border-width: 0;font-family: 'Noto Sans TC', 'Lato',serif;font-size: 16px;word-wrap: break-word;word-break: break-all;-webkit-transition: all .5s ease-out;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;}
div , ul{
    -webkit-transition: unset;
    -moz-transition: unset;
    -ms-transition: unset;
    -o-transition: unset;
    transition: unset;
}
:before , :after { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; }
ul, ol { list-style: none; }
fieldset { border: 0; }
input,button,select,textarea { outline:none }
img { max-width: 100%; }
a:link , a:visited , a:hover { text-decoration: none; vertical-align: initial; }
* html .clearfix { height: 1%; }

.workframe{width: 1366px;max-width: 95%;margin: 0 auto;position: relative;overflow: hidden;}
 input,.form-change select{
	        appearance: none;
	        -webkit-appearance: none; /*Remove the system default style*/
	        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* Click on the highlighted color*/
	        border-radius: 0;
	   }
/* webSeo */
#webSeo {padding: 5px 0;white-space: nowrap;box-sizing: border-box;display: flex;justify-content: center;}
#webSeo .seo {padding-left: 100%;display: inline-block;font-weight: 100;font-size: 16px;opacity: 1;color: #282828;font-weight: 200;-webkit-animation: marquee 200s linear infinite;animation: marquee 80s linear infinite;color: #ffffff;letter-spacing: 0.10em;}
.web{
    background: #262624;
    overflow: hidden;
    border-top: #f4f4f421 1px solid;
}
.web .workframe{display: flex;justify-content: center;flex-direction: column;}
@-webkit-keyframes marquee { 0% { -webkit-transform:translate(0, 0); } 100% { -webkit-transform:(-100%, 0); } }
@keyframes marquee { 0% { transform:translate(0, 0); } 100% { transform:translate(-100%, 0); } }


/* header */
header {position: absolute;width: 100%;font-size: 0;top: 0;left: 0;z-index: 999;background: white;}
header.headerfixed {background: #fff;box-shadow: 0 0 1px #6a6a6a24;position: fixed;}
header.headerfixed #cis{
    width: 222px;
    margin-right: 25px;
}
header.headerfixed .web{
    opacity: 0;
    display: none;
}
.topmemberbar{
    display: flex;
    justify-content: flex-end;
    padding: 0 253px;
    margin: 0 auto;
    background: #3f3d3a;
}
.topmemberbar a{
    color: #f0f0f0;
    margin: 0 8px;
    font-size: 15px;
}
.topmemberbar a:hover{
    color: white;
}
header .row {width: 160px;display: inline-block;}
header #menuIcon { width: 130px; display: inline-block; text-align: right; color: #000; vertical-align: middle; }
header #menuIcon b {padding: 10px 0;display: inline-block;font-size: 14px;color: #71696f;}
header #menuIcon font {position: relative;margin-left: 10px;width: 25px;height: 25px;display: inline-block;text-align: center;line-height: 23px;color: #555555;vertical-align: middle;}
header #menuIcon span { position: absolute; width: 20px; height: 1px; background: #555555; display: block; top: 5px; left: 3px; }
header #menuIcon span:nth-child(2) { width: 13px; top: 12px; left: 10px; }
header #menuIcon span:nth-child(3) { top: 19px; }
header #menuIcon[data-type="2"] span:nth-child(1) { -webkit-transform: translate3d(0, 7px, 0) rotate(45deg); transform: translate3d(0, 7px, 0) rotate(45deg); transition-delay: 0.1s; }
header #menuIcon[data-type="2"] span:nth-child(2) { width: 0; height: 0; }
header #menuIcon[data-type="2"] span:nth-child(3) { -webkit-transform: translate3d(0, -7px, 0) rotate(-45deg); transform: translate3d(0, -7px, 0) rotate(-45deg); transition-delay: 0.1s; }
header #mbMenu {width: 100%;position: relative;display: flex;justify-content: center;align-items: center;background: #5b3d76;}
header #mbMenu  .workframe{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header #mbMenu .roow p{
    display: flex;
    align-items: center;
    color: #ffffff;
}
header #mbMenu nav {
	background: #5b3d76;
	width: calc(100% - 400px);
}
header #mbMenu .roow{
    /* width: 200px; */
    display: flex;
}
header #mbMenu .roow:first-child{
    display: flex;
    justify-content: flex-start;
}
header #mbMenu .roow:last-child{
    justify-content: flex-end;
}
header #mbMenu nav ul {display: flex;justify-content: center;width: 100%;max-width: 100%;margin: 0 auto;}
header #mbMenu .btnBox a {margin: 0 10px;height: 27px;display: inline-block;line-height: 27px;color: #000;}
header a#lineSh {position: relative;padding: 0 15px;margin: 0;}
header #mbMenu nav ul li { display: inline-block; }
header #mbMenu nav ul li a {margin: 5px 5px;padding: 5px 9px;display: block;color: #ffffff;}
header #mbMenu nav ul li a:hover{
    color: #c3c3c3;
}
header  #cis{
    margin-right: 45px;
    display: flex;
    flex-direction: column;
    order: 1;
    width: 315px;
    padding: 2px 0;
}
header .headsetmid{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: #cbcbcb73 1px solid;
    padding: 5px 0;
}
header .lineGtan{
    order: 2;
    display: flex;
}
header .pcH{
    display: flex;
    align-items: center;
    order: 3;
}
header .pcH .btn, header .mbH .btn{
    margin: 0 9px;
    border-radius: 80px;
    display: flex;
    align-items: center;
}
header .pcH .btn:hover .fa{
    color: #ffffff;
    border: #c7b299 1px solid;
    background: #db0e78;
}
header .pcH .btn b, header .mbH .btn b{
    color: #77727c;
    font-weight: 300;
    font-size: 15px;
    display: flex;
}
header .pcH .btn b{
    margin-left: 5px;
}
header .pcH .btn .fas, header .pcH .btn .far, header .pcH .btn .fa, header .mbH .btn .fa{
	color: #ffffff;
	border: #77727c57 1px solid;
	padding: 10px;
	border-radius: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 9px;
	height: 9px;
	background: #705587;
}
/* hSearch */

#Seach{
    display: flex;
    align-items: center;
}
#goSearch .fa{
    color: #77727c;
}

header form input[name="word"]{
    color: #767676;
    border-bottom: #a9a9a98c 1px solid;
    font-size: 14px;
    letter-spacing: 0.15em;
}
header form[name="hSearch"] {position: absolute;background: #494b4c;box-shadow: 0 0 20px rgb(82 82 82 / 12%);border-radius: 5px;top: 50px;right: 335px;top: -100%;opacity: 0;-webkit-transition-duration: .3s;-moz-transition-duration: .3s;-ms-transition-duration: .3st;-o-transition-duration: .3s;transition-duration: .3s;}
header form[name="hSearch"] input { margin: 5px 0; padding: 5px 20px; background: transparent; color: #fff; }
header form[name="hSearch"]:before { position: absolute; width: 1px; height: 25px; background: #a2a2a2; display: inline-block; right: 59px; top: calc((100% - 25px) / 2); content: ""; }
header form[name="hSearch"] a { padding: 0 20px; display: inline-block; color: #a2a2a2; }
header form#hSearch {opacity: 1;top: 153px;right: 335px;}
#banner{
    position: relative;
    margin-top: 132px;
}
#pagenation{position: relative;width: 100%;}
#pagenation ul{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
#pagenation ul li{
    margin: 2px;
}


#pagenation ul li.active a{
    background: #d03987;
}
#pagenation ul li a{
    padding: 2px 7px;
    background: #444343;
    color: white;
    font-size: 14px;
}
footer{
	position:relative;
}
footer #notice{
    /* background: #dedede; */
    padding: 15px 0;
    border-top: #d1d1d17a 1px solid;
}
footer #notice .N_title{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
footer #notice .N_title h2{
    font-size: 45px;
}
footer #notice  p{
    text-align: center;
    color: #444343;
    font-size: 17px;
}
footer #notice .text_red{
    color: #d03987;
    font-weight: 500;
}
footer #notice .N_title img{
    width: 100px;
}

footer #f_link{
    background: #d03987;
    padding: 20px 0;
}
footer #f_link h2{
    color: white;
    text-align: center;
    font-size: 27px;
}
footer #f_link p{
    text-align: center;
    color: white;
}
footer #f_link nav{
    margin: 20px 0;
}
footer #f_link nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
footer #f_link nav ul a{
    color: white;
    padding: 10px 15px;
}

#RShop_Box {
    position: fixed;
    right: 11px;
    bottom: 60px;
    border: #444343 1px solid;
}
#RShop_Box #Cart{
    padding: 10px;
    background: #1f1f1f;
    margin: 5px;
    width: 130px;
}
#RShop_Box #Cart h3{
	color:white;
	font-weight:200;
	border-bottom: #ffffff80 1px solid;
	text-align: center;
}
#RShop_Box .msg{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}
#RShop_Box .msg p{
	color:white;
	display: flex;
	align-items: center;
}
#RShop_Box .Rbuy a{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #db0e78;
    padding: 5px 3px;
}
#RShop_Box .Rbuy a:hover{
    background: #b12a2a;
}
#RShop_Box .Rbuy a img{
    width: 28px;
    -webkit-filter: invert(1);
    background: #d3d3d3;
    padding: 6px;
    border-radius: 50px;
}
#RShop_Box .Rbuy a span{
    color: white;
}
#gotop{
    position: fixed;
    bottom: 220px;
    right: 11px;
    width: 156px;
    padding: 2px;
    border: #444343 1px solid;
}
#gotop:hover p{
    background: #ad8482;
}
#gotop p{color:white;padding: 10px;margin: 5px;background: #5b3d76;}
@media screen and (min-width: 1280px) {
	header #menuIcon { display: none; }
}
@media screen and (min-width: 1025px){header #mbMenu{left: 0!important;}}
@media screen and (min-width: 1024px) {
	.mbH{
    display: none;
}
}
@media screen and (min-width: 550px){
	#banner img.mbbanner{
    	display:none;
    }
}
@media screen and (max-width: 1280px) {
	.topmemberbar{
	    padding: 0 5px;
	    width: 100%;
	}
	.topmemberbar a{
    font-size: 13px;
}
	header #mbMenu {overflow-y: scroll;position: fixed;margin-left: 0;padding: 0 5%;width: 90%;height: 0;background: #fff;left: 0;top: 0;z-index: 2;-webkit-transition-duration: .35s;transition-duration: .35s;}
	header #mbMenu::-webkit-scrollbar { width: 5px; }
    header #mbMenu::-webkit-scrollbar-track { background: #d0d0d0;}
    header #mbMenu::-webkit-scrollbar-thumb { background: #a15e60;}
    header #mbMenu::-webkit-scrollbar-thumb:hover { background: #222222; }

	header #mbMenu nav {margin-top: 20px;padding-bottom: 10px;width: 100%;display: flex;flex-direction: column;}
	header #mbMenu nav ul{
        display: flex;
        flex-direction: column;
    }
    header #mbMenu .roow:last-child ,header #mbMenu .roow:first-child{
        justify-content: center;
    }
    header #mbMenu .roow:first-child{
        padding-top: 200px;
    }
    header #mbMenu .roow:last-child{
    	padding-bottom:30px;
    }
    header #mbMenu nav ul li a{
    margin: 3px 0px;
}
	header #mbMenu nav ul li { padding: 0 20px; border-bottom: 1px #e5e5e5 solid; display: block; }
	header a#lineSh { top: 7px; }
	header {background: #fff;box-shadow: 0 0 1px #6a6a6a;display: flex;align-items: center;flex-wrap: wrap;}
	header #cis {width: 135px;order: 1;}
	header.headerfixed #cis{
        /* width: 110px; */
    }
	header .lineGtan{
        order: 2;
    }
    header .pcH{
    	order:3;
    }
	header .headsetmid{
        width: calc(100% - 170px);
        border-bottom: 0;
        padding: 0;
        margin-right: 0;
        display: flex;
        align-items: center;
    }
    header #menuIcon{
    	display: flex;
    	align-items: center;
    	width: 150px;
    	margin-left: 15px;
    	z-index: 99;
    }
    header form[name="hSearch"]{
    	right: 0;
    }
    header form#hSearch{
        right: 3px;
        top: 94px;
    }
    header #mbMenu .workframe{
        display: flex;
        flex-direction: column;
    }
    #banner{
    margin-top: 142px;
}
}

@media screen and (max-width: 1024px){
	header{
    position: fixed;
}
	header #cis{
        width: 200px;
        margin: 0 50px;
    }
    header .lineGtan{margin-left: 35px;}
    header .pcH{
    	display:none;
    }
    header .headsetmid{
        display: flex;
        justify-content: flex-start;
        order: 1;
    }
    header #menuIcon{
        order: 2;
    }
    header #mbMenu .roow .mbH{
        display: flex;
        /* padding-bottom: 50px; */
        height: 100px;
    }
    header #mbMenu .roow{
        width: 100%;
        justify-content: center;
    }
    header #mbMenu .btnBox a{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        height: auto;
    }
	
    #banner{
	    margin-top: 121px;
	}
	header #mbMenu{height: calc(100vh - 120px)!important;z-index: -1;/* width: 100%; */}
}
@media screen and (max-width: 980px){
	footer #notice p{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;



        font-size: 16px;
        word-break: normal;
        word-break: keep-all;
        width: 100%;
    }
    footer #notice .N_title img{
    width: 55px;
}
	#RShop_Box{
        bottom: 0;
        right: auto;
        left: 0;
        width: calc(100% - 50px);
        margin: 0;
        padding: 0;
        border: unset;
        z-index: 98989;
    }
    #RShop_Box #Cart{
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    #RShop_Box #Cart h3{
        width: calc(26% - 1px);
        border-bottom: unset;
        display: flex;
        justify-content: center;
        border-right: #ffffff85 1px solid;
        font-size: 14px;
    }
    #RShop_Box .msg{
        padding: 0;
        width: 34%;
        display: flex;
        justify-content: center;
    }
    #RShop_Box .msg p.left{
        margin-right: 15px;
    }
    #RShop_Box .msg p , #RShop_Box .msg span{
    font-size: 14px;
}
    #RShop_Box .Rbuy{
        width: 40%;
        display: flex;
        flex-direction: column;
    }
    #RShop_Box .Rbuy a{
        padding: 3px 0;
    }
    #RShop_Box .Rbuy a img{
        width: 18px;
        padding: 5px;
    }
    #RShop_Box .Rbuy a span{
        font-size: 14px;
        letter-spacing: 0.15em;
    }
    #gotop{
        border: unset;
        padding: 0.955px 0;
        right: 0;
        width: 50px;
        bottom: 0;
        z-index: 98989;
        background: #2c2c2c;
    }
    #gotop p{
        padding: 5px 0;
        margin: 0;
        background: #2c2c2c;
        font-size: 13px;
    }
    footer #f_link p{
        font-size: 12px;
        padding-bottom: 40px;
        letter-spacing: 0.05em;
    }
    footer #f_link nav ul{
        display: flex;
        justify-content: flex-start;
        padding: 5px 10px;
    }
    footer #f_link nav ul a{
        padding: 5px 8px;
        font-size: 15px;
    }
}
@media screen and (max-width: 780px){
	header .headsetmid{
        width: calc(100% - 70px);
    }
    header #cis{
        width: 230px;
    }
	header form input[name="word"]{
        width: 180px;
    }
    header #menuIcon b{
    	display:none;
    }
    header #menuIcon{
        display: flex;
        justify-content: flex-end;
        width: 50px;
    }
    header #menuIcon font{
    	margin-right:10px;
    }
    #banner{
    margin-top: 114px;
}
    .web{
    	order:3;
    	z-index: -3;
    }
    #webSeo{
        padding: 5px 0;
    }
    #webSeo .seo{
        font-size: 12px;
    }
    footer #notice .N_title h2{
        font-size: 29px;
    }
}
@media screen and (max-width: 550px){
	body{
	    border: none;
	}
	#banner{
	    margin-top: 140px;
	}
	header #mbMenu .roow:first-child{
    padding-top: 126px;
}
	header #mbMenu .roow p{
    color: #444444;
}
	header #mbMenu{height: calc(100vh - 120px)!important;z-index: -1;/* width: 100%; */}
	#banner img{
        height: auto;
        object-fit: cover;
        object-position: 50%;
        width: 100%;
    }
    #banner img.pcbanner{
    	display:none;
    }
    header form input[name="word"]{
        width: 152px;
        font-size: 12px;
    }
    header #cis{
        width: 100%;
        margin: 0 12px;
        position: fixed;
        top: 15px;
        left: 2px;
    }
	header #cis img{
    width: 239px;
}
    #goSearch .fa{
        font-size: 12px;
    }
    header .lineGtan{
        margin-right: 5px;
        flex: 1;
        display: flex;
        justify-content: flex-end;
        margin-left: 0;
        width: 100%;
    }

    header #menuIcon{
        width: 26px;
        position: fixed;
        right: 30px;
        top: 25px;
        z-index: 9;
    }
    header #menuIcon font{
        margin-right: 5px;
        width: 10px;
    }
    header #menuIcon span{
        width: 15px;
    }
    header #menuIcon span:nth-child(2){
        width: 10px;
        left: 7px;
    }
    header .headsetmid{
        width: calc(100% - 23px);
        display: flex;
        flex-direction: column;
    }
	header{
    padding-top: 75px;
    padding-bottom: 0;
    z-index: 222;
}
    header.headerfixed #cis{
        /* width: 90px; */
    }
    header #mbMenu nav{
        margin-top: 3px;
    }
   
	   
  
}