@charset "UTF-8";

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

    .area { width: 80%; }
    
    /*page*/
    .main { width: 90%; }
    .nav li a { font-size: 1.5em; }
    .subnav li a { font-size: 1.125em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
    
    .list-2box { width: 570px; }
    .swiper-container { width: 1140px; }
    .swiper-button-prev { left: 1.3%; }
    .swiper-button-next { right: 1.3%; }    
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
    
    .photo-1a, .photo-3, .txt-3 a, .photo-4, .photo-7 { height: 250px; }
    .photo-1a img, .photo-3 img, .photo-4 img, .photo-7 img { max-height: 240px; }
    .photo-5 { height: 240px; }
    .photo-5 img { max-height: 280px; }
    
    .list-2box { width: 500px; }
    .swiper-container { width: 1000px; }
    .swiper-button-prev { left: 1.3%; }
    .swiper-button-next { right: 1.3%; }
    
    .txt-3 a, .txt-5 a, .list-5b li a { font-size: 1.6em; }
    .list-4 li { width: 22%; margin: 0 1.5%; }
    
    .list-6 ul { width: 1040px; }
    .list-6 li { width: 240px; height: 240px; margin: 0 10px; }    
    
    /*page*/
    .nav li a { height: 55px; line-height: 55px; font-size: 1.3em; }
    .subnav li a { font-size: 1.1em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1366px) {
    
    div[class^="sale"] b { font-size: 1.5em; }
    
    .txt-1a { font-size: 1.125em; }
    
    .list-2box { width: 480px; }
    .swiper-container { width: 960px; }
    .swiper-button-prev { left: 1.3%; }
    .swiper-button-next { right: 1.3%; }
    
    .txt-5 a, .list-5b li a { font-size: 1.5em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
    
    .photo-1a, .photo-3, .txt-3 a, .photo-4, .photo-7 { height: 210px; }
    .photo-1a img, .photo-3 img, .photo-4 img, .photo-7 img { max-height: 200px; }
    .photo-1b { height: 190px; }
    .photo-1b img { max-height: 180px; }
    .photo-5 { height: 210px; }
    .photo-5 img { max-height: 240px; }
    
    .list-2box { width: 460px; }
    .swiper-container { width: 920px; }
    .swiper-button-prev { left: 1.3%; }
    .swiper-button-next { right: 1.3%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 40px; }
    
    .list-4 ul { border-radius: 40px; }
    .list-4 li { width: 30.3333%; margin: 0 1.5%; }
    .list-4 li:nth-child(4) { display: none; }
    
    .txt-5 a, .list-5b li a { font-size: 1.4em; }
    
    .list-6 ul { width: 960px; }
    .list-6 li { width: 220px; height: 220px; margin: 0 10px; }
    
    /*page*/
    .main { width: 95%; }
	.list li { width: 24%; padding: 5px 10px 13px 10px; margin: 0.5%; }    
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1180px) {
    
    .list-6 ul { width: 880px; }
    .list-6 li { width: 200px; height: 200px; margin: 0 10px; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    
    .area { width: 95%; }    
    .title { width: 50%; }    
    .txt-1a { font-size: 1.1em; }
    
    .list-2box { width: 430px; }
    .swiper-container { width: 860px; }
    .swiper-button-prev { left: 1.3%; }
    .swiper-button-next { right: 1.3%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 40px; }
    
    .list-6 ul { width: 960px; }
    .list-6 li { width: 220px; height: 220px; margin: 0 10px; }    
    
    .bn { width: 100%; }    
        
    /*page*/
    .main { width: 100%; }
    .nav li a { width: 19.5%; height: 60px; line-height: 60px; font-size: 1.6em; margin: 0 0.5% 0.5% 0; }
    .subnav li a { font-size: 1.1em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 834px) {
    
    body { background-image: none; }
    .container { padding: 73px 0 0 0; }
    
    #s1, #s2, #s3, #s4, #s5, #s6, #s7 { padding-top: 60px; margin-top: -60px; }
    #r2, #r3, #r4 { padding-top: 73px; margin-top: -73px; }
    
    .area { width: 95%; }
    .kv-pc { display: none; }
    .kv-m { width: 100%; display: block; }   
    .title { width: 90%; margin: 0 auto 1% auto; }
    
    .kv-txt1 { width: 100%; top: 2.5%; left: -1%; }
    .kv-txt2 { width: 40%; top: 28%; left: 29%; }
    .kv-txt3 { width: 14%; top: 23.5%; left: 85.5%; }
    .kv-txt4 { width: 32.3%; top: 70.5%; left: 17.5%; }
    .kv-txt5 { width: 47.3%; top: 45.3%; left: 54.7%; }
    .kv-game { width: 27.5%; top: 73%;  left: 64.5%; }
    
    .s1 { background-size: 100% auto; padding: 6% 0 5% 0; }
    .s2, .s6 { background-size: auto 100%; }
    .s2, .s3, .s4, .s5, .s6 { padding: 5% 0; }
    .s7 { padding: 5% 0 0 0; }
    .s8 { padding: 0 0 5% 0; }
    
    .s1 .title::before, .s1 .title::after, .s2 .title::before, .s3 .title::before, .s3 .title::after,
    .s5 .title::before, .s6 .title::before, .s7 .title::before, .s7 .title-8::before { background-image: none; }
    
    .photo-1a, .photo-3, .photo-4, .photo-7 { height: 260px; }
    .photo-1a img, .photo-3 img, .photo-4 img, .photo-7 img { max-height: 250px; }
    .photo-1b { height: 260px; }
    .photo-1b img { max-height: 250px; }
    .photo-5 { height: 260px; }
    .photo-5 img { max-height: 250px; }
    
    .list-1 li:nth-child(5), .list-5 li:nth-child(5), .list-7 li:nth-child(5) { display: none; }    
    .list-1 ul { padding: 1.5% 0.5%; }
    .list-1 li, .list-1 li:nth-child(6), .list-1 li:nth-child(7), .list-4 li, .list-7 li { width: 48%; margin: 0 1% 1% 1%; }
    .list-1 li:nth-child(8) { width: 98%; margin: 0 1%; display: block; }
    .list-1 li:nth-child(8) img { width: 100%!important; height: auto; }
    
    .photo-1b { float: none; width: 100%; }
    .box-1b { float: none; width: 100%; padding: 4% 5%; display: block; }
    .name-1b { text-align: center; padding: 0; margin: 0 0 3% 0; }
    
    .list-2box { width: 680px; }
    .swiper-container { width: 680px; }
    .swiper-button-prev { left: 1%; }
    .swiper-button-next { right: 1%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 50px; }
    
    .list-3 li, .list-5 li { width: 48%; margin: 0 1% 3% 1%; }
    .txt-3 a { float: none; width: 100%; height: auto; font-size: 1.6em; text-align: center; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; text-orientation: upright; padding: 5px 10px; -webkit-clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%); }
    .txt-3 .icon-right-open-1 { padding: 5px 0 0 0; }
    .box-3 { float: none; width: 100%; }
    .photo-3 { margin: 0 0 3% 0; }
    
    .list-4 { background-image: none; background-color: #0056fb; border-radius: 30px 30px 0 0; padding: 0 1%; }
    .list-4 ul { float: none; width: 100%; background-color: transparent; border-radius: 0; }
    .list-4 li { background-color: #FFF; padding: 2%; }
    .list-4 .title img:nth-child(1) { display: none; }
    .list-4 .title img:nth-child(2), .list-4 li:nth-child(4) { display: block; }
    .list-4 .title { float: none; width: 100%; margin: 0 auto 1% auto; }
    .s4-p { display: none; }
    
    .list-5b { width: 100%; }
    .list-5b li:nth-child(1) { display: block; }
    
    .list-6 ul { width: 740px; padding: 2% 0 1% 0; }
    .list-6 li { width: 350px; height: 350px; margin: 0 10px 5% 10px; }
    
    .list-7 { margin: 0 auto 8% auto; }
    .list-7 li { padding: 0 0 2% 0; }
    
    .bn li:nth-child(1), .bn li:nth-child(2), .bn li:nth-child(3) { width: 98%; margin: 0 1% 1.5% 1%; }
    .bn li:hover, .bn li:focus {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    
    /*page*/
    .main { padding: 73px 0 0 0; }
    
    .nav-area { padding: 1.5% 1% 0.5% 1%; }
    .nav-box { height: auto; margin: 0 auto 1.5% auto; overflow: hidden; }
    .nav { float: left; width: calc(100% - 45px); white-space: nowrap; }
    .nav ul { padding: 0; overflow-x: scroll; overflow-y: hidden; }
    .nav ul::-webkit-scrollbar { display: none; }
    .nav li { width: auto; display: inline-block; margin: 0; }
    .nav li a { width: auto; font-size: 1.7em; height: 60px; line-height: 60px; padding: 0 15px;  }
    
    .nav-more, .nav-up { position: relative; float: left; width: 45px; font-size: 1.8em; text-align: center; box-shadow: -5px 0 5px rgba(0,0,0, 0.4); display: block; z-index: 1; }
    .nav-more { height: 60px; line-height: 60px; color: #0070cf; background-color: #EAEAEA; }
    .nav-up { height: 40px; line-height: 40px; color: #999; background-color: #FFF; }
    .icon-down-open-1::before { margin-right: 0; margin-left: 0; }
    .icon-up-open-1::before { margin-right: 0; margin-left: 0; }
    
    .nav-1 { width: 100%; background-color: #FFF; box-shadow: 0 0 5px rgba(0,0,0, 0.4); padding: 0; margin: 0 auto 3% auto;  z-index: 3; }
    .nav-1 h2 { float: left; width: calc(100% - 45px); font-size: 1.2em; height: 40px; line-height: 40px; color: #999; padding: 0 0 0 2.5%; }
    .nav-1 ul { width: 100%; padding: 4% 0; overflow: hidden; }
    .nav-1 li a { float: left; width: 45%; font-size: 1.3em; font-weight: bolder; text-align: center; color: #FFF; background-color: #0056fb; border-radius: 30px; padding: 3% 2%; margin: 0 2.5% 2% 2.5%; }
    .nav-1 li.on a { color: #FFF; background-color: #f15a29; }    
    
    .subnav-box { width: 100%; padding: 0; margin: 0 auto; display: block; }
    .subnav { width: 100%; white-space: nowrap; }
    .subnav ul { padding: 0; overflow-x: scroll; overflow-y: hidden; }
    .subnav ul::-webkit-scrollbar { display: none; }
    .subnav li { width: auto; margin: 0; display: inline-block; }
    .subnav li a { width: auto; height: auto; font-size: 1.25em; line-height: 1; border-bottom: 0px solid #EBD4B0; border-right: 0px solid #EBD4B0; padding: 12px 10px; }
    
    .hide { display: none; }
    
    .path { padding: 1%; }
    
    .list li { width: 24%; padding: 5px 10px 13px 10px; margin: 0.5%; }    
    .gift { float: none; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    
    .list-2box { width: 600px; }
    .swiper-container { width: 600px; }
    .swiper-button-prev { left: 1%; }
    .swiper-button-next { right: 1%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 50px; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 736px) {
    
    .list-6 ul { width: 680px; padding: 2% 0 1% 0; }
    .list-6 li { width: 320px; height: 320px; margin: 0 10px 5% 10px; }   
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 667px) {
    
    .list-2box { width: 550px; }
    .swiper-container { width: 550px; }
    .swiper-button-prev { left: 0%; }
    .swiper-button-next { right: 0%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 50px; }
    
    .list-6 ul { width: 640px; padding: 2% 0 1% 0; }
    .list-6 li { width: 300px; height: 300px; margin: 0 10px 5% 10px; }

}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 480px) {
    
    .title { margin: 0 auto 2% auto; }
    
    .txt-1a { font-size: 1.2em; }
    
    .list-2box { width: 370px; }
    .swiper-container { width: 370px; }
    .swiper-button-prev { left: 0%; }
    .swiper-button-next { right: 0%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 35px; }
    
    .txt-5 a, .list-5b li a { font-size: 1.5em; }
    .list-5b li { margin: 0 2% 3% 2%; }
    .list-5b li a { padding: 8px 10px; }
    
    .list-6 ul { width: 350px; padding: 2% 0 1% 0; }
    .list-6 li { width: 330px; height: 330px; margin: 0 10px 5% 10px; }
        
    /*page*/
    .nav-area { padding: 2% 2% 0.5% 2%; }
    .nav li a { font-size: 1.5em; height: 60px; line-height: 60px; padding: 0 15px; }
    .nav-more { height: 60px; line-height: 60px; }
    .subnav li a { font-size: 1.1em; padding: 12px 10px; }
    .path { padding: 2% 2% 1% 2%; }
    .list li { width: 46%;	padding: 0 10px 15px 10px; margin: 1.5% 2%; }
    .photo { width: 100%; height: 190px; margin: 0; }
    .photo img { max-height: 180px; }
    .tag-p1 { width: 20%; }
    .tag-p2 { width: 30%; }
    
    /*頁碼*/
    .page { padding: 20px 1% 40px 1%; }
    .page ul { width: 90%; }
    a.page_prev, a.page_next, a.page_prev_off, a.page_next_off { font-size: 0.9em; }
    a.page_prev { background-position: 7% center; }
    a.page_next { background-position: 93% center; }
    .page_number { font-size: 1em; }
	
    /*rule*/
    .gift { float: none; width: 95%; margin: 10px auto; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 430px) {
    
    .photo-1a, .photo-3, .photo-4, .photo-7 { height: 210px; }
    .photo-1a img, .photo-3 img, .photo-4 img, .photo-7 img { max-height: 200px; }
    .photo-1b { height: 210px; }
    .photo-1b img { max-height: 200px; }
    .photo-5 { height: 210px; }
    .photo-5 img { max-height: 200px; }
    
    .txt-1a { font-size: 1.1em; padding: 0 2%; }
    .txt-1b { padding: 1% 3%; }
    
    .list-2box { width: 350px; }
    .swiper-container { width: 350px; }
    .swiper-button-prev { left: 0%; }
    .swiper-button-next { right: 0%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 35px; }
    
    .txt-5 a, .list-5b li a { font-size: 1.3em; }    

}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 414px) {    

    .txt-1a { font-size: 1.1em; padding: 0 3%; }
    .txt-3 a { font-size: 1.4em; }
    
    .list-2box { width: 330px; }
    .swiper-container { width: 330px; }
    .swiper-button-prev { left: 0%; }
    .swiper-button-next { right: 0%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 30px; }

}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 390px) {
    
    .list-2box { width: 310px; }
    .swiper-container { width: 310px; }
    .swiper-button-prev { left: 0%; }
    .swiper-button-next { right: 0%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 30px; }
    
    .txt-5 a, .list-5b li a { font-size: 1.3em; }   
    
    /*page*/
    .nav li a { font-size: 1.3em; height: 50px; line-height: 50px; }
    .nav-more { height: 50px; line-height: 50px; }
    .subnav li a { font-size: 1em; padding: 12px 10px; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 375px) {
    
    .name-1b, .name-3, .name-4, .name-7 { font-size: 1em; }
    
    .txt-1a { font-size: 1em; padding: 0 3%; }
    
    .photo-1a, .photo-3, .photo-4, .photo-7 { height: 200px; }
    .photo-1a img, .photo-3 img, .photo-4 img, .photo-7 img { max-height: 190px; }
    .photo-1b { height: 200px; }
    .photo-1b img { max-height: 190px; }
    .photo-5 { height: 200px; }
    .photo-5 img { max-height: 190px; }
    
    .txt-5 a, .list-5b li a { font-size: 1.2em; }
    
    .list-6 ul { width: 330px; padding: 2% 0 1% 0; }
    .list-6 li { width: 310px; height: 310px; margin: 0 10px 5% 10px; }
        
    /*page*/
    .nav li a { font-size: 1.2em; height: 50px; line-height: 50px; }
    .nav-more { height: 50px; line-height: 50px; }
    .subnav li a { font-size: 1em; padding: 10px; }
    .tag-p1 { width: 23%; }
    .tag-p2 { width: 33%; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 360px) {
    
    .list-2box { width: 290px; }
    .swiper-container { width: 290px; }
    .swiper-button-prev { left: 0%; }
    .swiper-button-next { right: 0%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 30px; }
    
    .txt-5 a, .list-5b li a { font-size: 1.1em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 320px) {
    
    .list-2box { width: 250px; }
    .swiper-container { width: 250px; }
    .swiper-button-prev { left: 0%; }
    .swiper-button-next { right: 0%; }
    .swiper-button-prev, .swiper-button-next { top: 35%; width: 25px; }    
    
    .txt-5 a, .list-5b li a { font-size: 1em; }
    
    .list-6 ul { width: 290px; padding: 2% 0 1% 0; }
    .list-6 li { width: 270px; height: 270px; margin: 0 10px 5% 10px; }
    
    /*page*/
    .path li { font-size: 0.9em; }
        
    /*頁碼*/
    a.page_prev, a.page_next, a.page_prev_off, a.page_next_off { font-size: 0.9em; }
    a.page_prev { background-position: 5% center; }
    a.page_next { background-position: 95% center; }    
    
}