@charset "utf-8";
/* CSS Document */


body{
	padding: 0;margin: 0;
}
.fc_red{ color: #d34747; }
.fc_ora{ color: #ff9742; }
.fc_yel{ color: #ffdd42; }
.fc_gre{ color: #559334; }
.fc_blu{ color: #348f93; }
.fc_ind{ color: #0a2854; }
.fc_pur{ color: #402a64; }
.fc_sp1{ color: #4e4a54; }
.fc_sp2{ color: #978153; }
.fc_sp3{ color: #523819; }
.fw_900{font-weight: 900;}
.fw_500{font-weight: 500;}
.fw_300{font-weight: 300;}
.fs_120{font-size: 1.2em;}
.fs_150{font-size: 1.5em;}
.fs_200{font-size: 2em;}
.lih_200{line-height:2em;}
.lih_250{line-height:2.5em;}
.lih_300{line-height:3em;}

/*------動畫區-------*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite{
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}
.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

    @-webkit-keyframes swing{
        20%{
            -webkit-transform:rotate(15deg);
            transform:rotate(15deg);
        }
        40%{
            -webkit-transform:rotate(-10deg);
            transform:rotate(-10deg);
        }
        60%{
            -webkit-transform:rotate(5deg);
            transform:rotate(5deg);
        }
        80%{
            -webkit-transform:rotate(-5deg);
            transform:rotate(-5deg);
        }
        to{
            -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
        }
    }

    @keyframes swing{
        20%{
            -webkit-transform:rotate(15deg);
            transform:rotate(15deg);
        }
        40%{
            -webkit-transform:rotate(-10deg);
            transform:rotate(-10deg);
        }
        60%{
            -webkit-transform:rotate(5deg);
            transform:rotate(5deg);
        }
        80%{
            -webkit-transform:rotate(-5deg);
            transform:rotate(-5deg);
        }
        to{
            -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
        }
    }

    .swing{
        -webkit-transform-origin:top center;
        transform-origin:top center;
        -webkit-animation-name:swing;
        animation-name:swing;
    }

    @-webkit-keyframes rubberBand{
        0%{
            -webkit-transform:scaleX(1);
            transform:scaleX(1);
        }
        50%{
            -webkit-transform:scale3d(.95,.95,1);
            transform:scale3d(.95,.95,1);
        }
        to{
            -webkit-transform:scaleX(1);
            transform:scaleX(1);
        }
    }

    @keyframes rubberBand{
        0%{
            -webkit-transform:scaleX(1);
            transform:scaleX(1);
        }
        50%{
            -webkit-transform:scale3d(.95,.95,1);
            transform:scale3d(.95,.95,1);
        }
        to{
            -webkit-transform:scaleX(1);
            transform:scaleX(1);
        }
    }

    .rubberBand{
        -webkit-animation-name:rubberBand;
        animation-name:rubberBand;
    }

    @-moz-keyframes PooPoo {
      0% { transform: translateX(10px); }
      100% {  transform: translateX(-20px);}
    }
    @-webkit-keyframes PooPoo {
      0% { transform: translateX(10px); }
      100% {  transform: translateX(-20px);}
    }
    @-o-keyframes PooPoo {
      0% { transform: translateX(10px); }
      100% {  transform: translateX(-20px);}
    }

    @keyframes PooPoo {
      0% { transform: translateX(10px); }
      100% {  transform: translateX(-20px);}
    }

    @-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);  }
    }
/*------動畫區/END-------*/
.web_wrap{font-family: "微軟正黑體",Arial, Helvetica, sans-serif !important;}
#web_container{
    background-color: #dee5b2;
    padding: 15px 0 30px 0;
    background-image: url(bg_top.png),url(bg_bottom.png),url(bg_bg_cis.png);
    background-position: top,bottom,center -9%;
    background-repeat: no-repeat,repeat-y,repeat;
    background-size: 220%,76%,29%;
}
.header_acc{ 
	width: 100%;
    max-width: 1920px;
    height: auto;
	padding-bottom: 36.4583%;/*--1920/700--*/
	background-image: url("top_bg.jpg");
	background-size: 100%;
    margin: 0 auto;
    position: relative;
    /*--overflow: hidden;--*/
	background-repeat: no-repeat
}
.header_acc span{
    position: absolute; 
     width: 33%;
    max-width: 550px;
    height: 0;
    padding-bottom: 33%;
    right: 33%;
    top:50px;
    background-image: url(top_font.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
}
.header_acc span h2{text-indent: -9999px;}

.header_acc ul{
    position: absolute; 
    width: 90%;
    right: 5%;
    bottom: -50px;
    z-index: 10;
    text-align: center;
}
.header_acc li.kv_bnt{
    display: inline-block;
    width: 20%;
    margin: 0 2%;
}
.header_acc .kv_bnt img{
    width: 100%;
}
.main_acc{

}
    .acc_box{
        width: 100%;
        max-width: 1200px;
        margin: 150px auto;
        box-shadow: 0 0 0 5px #439160;
        background-color: #fff;
        padding: 6em 0em;
        position: relative;
        border-radius: 8em 8em 0 0;
    }
        .about_box{

        }
        .tour_box{
            margin-bottom: 0;
        }
            .acc_box .tit{
                    width: 40%;
                    height: 0;
                    padding-bottom: 8.666%;
                    text-align: center;
                    text-indent: -9999px;
                    background-size: 100%;
                    position: absolute;
                    top: -3em;
                    right: 30%;
                    pointer-events: none;
            }
            .acc_box .about_tit{
                background-image: url(Acc_tit1.png);
            }
            .about_box .txt{}
            .about_box .txt p{
                font-size: 1.5em;
                width: 80%;
                margin: 50px auto;
                line-height: 1.8em;
                text-align: justify;
            }
            .about_box .txt ol{ list-style: none;text-align: center; }
            .about_box .txt ol li{
                display: inline-block;
                width: 20%;
                margin: 1%;
            }
            .about_box li img{ width: 100%; }

            .acc_box .tour_tit{
                background-image: url(Acc_tit2.png);
            }
/*--TAB--*/
.tour_box ul,.tour_box li {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }
    .abgne_tab {
        /*--clear: left;--*/
        width: 100%;
        margin:0;
    }
    ul.tabs {
        width: 100%;
        text-align: center;
    }
    ul.tabs li {
        /*--float: left;--*/
        display: inline-block;
        line-height:4em;
        margin: 0 0.5em;

    }
    ul.tabs li a {
        display: block;
        padding: 0 20px;
        color: #000;
        text-decoration: none;
        font-size: 2em;
        font-weight: 800;
    }
    ul.tabs li a:hover {
        background: #ccc;
    }
    ul.tabs li.active  {
        background: #fff;
        border-bottom: 6px solid #ff7607;
    }
    ul.tabs li.active a:hover {
        background: #fff;
        transition: .3s;
    }
    div.tab_container {
    }
    div.tab_container .tab_content {
        padding: 50px;
    }
    /*----*/
    .tab_content li{
        width: 30%;
        margin: 1%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
    }
    .tab_content .tour_pic{

    }
    .tab_content .tour_pic img{
        width: 100%;
    }
    .tab_content .tour_list{
        

    }
    .tab_content .tour_list a{
        display: inline-block;
        background-color: #2e6599;
        color: #fff;
        line-height: 3em;
        padding: 0em 2em;
        font-size: 18px;
        text-decoration: none;
        border-radius: 1.5em;
        font-weight: 600;
        margin: 1%;

    }
    .tab_content .tour_list a:hover{
        background-color: #57a3eb;
        transition: .3s;
    }
/*---------------------------------------2020/08/11新增項-------------------------------------------------------------*/
#web_container .navigation{}
#web_container .navigation .line_link{
    position: fixed;
    right: 10px;
    top: 60px;
    width: 10%;
    min-width: 100px;
    z-index: 100;
}
#web_container .navigation .line_link:hover{
    /*opacity: 0.8;*/
    transition: .3s;
    animation-iteration-count: infinite;
    animation-name: tada;
    animation-duration: 1s;
    animation-fill-mode: both;
}
#web_container .navigation .line_link img{
    width: 100%;
}
#web_container .navigation nav{}
#web_container .navigation nav.side-menu{
	position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-73px);
    z-index: 99;
}
#web_container .navigation nav.side-menu ul{list-style: none;}
#web_container .navigation nav.side-menu ul li.hidden {display: none;}
#web_container .navigation nav.side-menu ul li {text-align: right;margin: 10px 0; display: block;}

#web_container .navigation nav.side-menu ul li a {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	text-decoration: none;
}
#web_container .side-menu ul li a span {
    display: inline-block;
}
#web_container .side-menu ul li a span.menu-title {
    color: #fff;
    position: relative;
    margin-right:5px;
    text-transform: uppercase;
    font-size: 15px;
    background-color:#20a19e;
    padding: 3px 10px;
    font-weight: 600;
    border-radius: 3px;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity: 0;
}

#web_container .side-menu ul li a span.dot {
    position: relative;
    background-color: #a0e4c8;
    border: 1px solid #1da09e;
    border-radius: 2em;
    height: 10px;
    width: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#web_container .side-menu ul li a:hover span.menu-title { opacity: 1;}
#web_container .side-menu ul li a:hover span.dot {transform: scale(1.8);}
/*----------------------------------------------------------------------------------------------------*/


@-moz-keyframes PooPoo {
  0% { transform: translateX(10px); }
  100% {  transform: translateX(-20px);}
}
@-webkit-keyframes PooPoo {
  0% { transform: translateX(10px); }
  100% {  transform: translateX(-20px);}
}
@-o-keyframes PooPoo {
  0% { transform: translateX(10px); }
  100% {  transform: translateX(-20px);}
}

@keyframes PooPoo {
  0% { transform: translateX(10px); }
  100% {  transform: translateX(-20px);}
}
.PooPoo{
        -webkit-animation-name:PooPoo;
        animation-name:PooPoo;
    }


@-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);  }
}
.move{
        -webkit-animation-name:move;
        animation-name:move;
    }

@-webkit-keyframes tada{
        0%{
            -webkit-transform:scaleX(1);
            transform:scaleX(1);
        }
        10%,20%{
            -webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);
            transform:scale3d(.9,.9,.9) rotate(-3deg);
        }
        30%,50%,70%,90%{
            -webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);
            transform:scale3d(1.1,1.1,1.1) rotate(3deg);
        }
        40%,60%,80%{
            -webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);
            transform:scale3d(1.1,1.1,1.1) rotate(-3deg);
        }
        to{
            -webkit-transform:scaleX(1);transform:scaleX(1);
        }
    }

    @keyframes tada{
        0%{
            -webkit-transform:scaleX(1);
            transform:scaleX(1);
        }
        10%,20%{
            -webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);
            transform:scale3d(.9,.9,.9) rotate(-3deg);
        }
        30%,50%,70%,90%{
            -webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);
            transform:scale3d(1.1,1.1,1.1) rotate(3deg);
        }
        40%,60%,80%{
            -webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);
            transform:scale3d(1.1,1.1,1.1) rotate(-3deg);
        }
        to{
            -webkit-transform:scaleX(1);
            transform:scaleX(1);
        }
    }

    .tada{
        -webkit-animation-name:tada;
        animation-name:tada;
    }

/*----------------------------------(web/tabe01)--------------------------------------------*/
/*----------------------喜鴻購物BNT/start-----------------------------*/
            .note{padding: 50px;}

            #selection_ben ol.bestselection_bnt{
                width: 100%;
                text-align: center;
                list-style: none;
                margin: 0;padding: 0;
            }
            #selection_ben ol.bestselection_bnt li {
                display: block;
                vertical-align: top;
                width: 90%;
                margin: 0 auto;
                font-size: 18px;
                color: #111;
            }
            #selection_ben ol.bestselection_bnt span{
                margin: 0 0 2em 0;
                display: block;

            }       
        
            #selection_ben ol.bestselection_bnt p{
                font-size: 2.5em;
                line-height: 1.2em;
                font-weight: 800;
                position: relative;
                display: inline-block;
                z-index: 2;
                margin: 0.2em;
            }
            #selection_ben ol.bestselection_bnt p::before{
                content: "";
                position: absolute;
                width: 100%;
                height: 110%;
                bottom: 0;
                left: 0;
                display: block;
                z-index: -1;
                right: 2em;
                background-color: #fef102;
            }
            #selection_ben ol.bestselection_bnt img{
                display: inline-block;
                width: 68%;
                margin: 0 auto;
                border-radius: 20px;
                box-shadow:0 0 0 10px #439160;
                position: relative;
                border: none;
            }
            #selection_ben ol.bestselection_bnt img:hover{
                opacity: 0.8;
                transition: .3s;
            }
            @media screen and (max-width: 700px){
                .note{padding: 2em 0em;padding-top: 0;}
                #selection_ben ol.bestselection_bnt{}
                #selection_ben ol.bestselection_bnt span{}
                #selection_ben ol.bestselection_bnt p{font-size: 24px;}
                #selection_ben ol.bestselection_bnt p::before{}
                #selection_ben ol.bestselection_bnt img {
                display: inline-block;
                width: 95%;
                margin: 0 auto;
                border-radius: 1em;
                box-shadow: 0 0 0 5px #439160;
                position: relative;
                }
                #cis-onsale .tourarea-links ol.bestselection_bnt img:hover{}
            }
            @media screen and (max-width: 500px){
                .note{}
                #selection_ben >ol.bestselection_bnt {padding: 2em 0;}
                #selection_ben ol.bestselection_bnt{}
                #selection_ben ol.bestselection_bnt span{}
                #selection_ben ol.bestselection_bnt p{}
                #selection_ben ol.bestselection_bnt p::before{}
                #selection_ben ol.bestselection_bnt img {}
                #selection_ben ol.bestselection_bnt img:hover{}
            }

/*----------------------喜鴻購物BNT/end-----------------------------*/
@media screen and (max-width: 1500px) {
    .header_acc span {top: 10px;}

}

@media screen and (max-width: 992px) {

}

@media screen and (max-width: 900px) {
    ul.tabs li a {
    padding: 0;
    font-size: 20px;
    font-weight: 800;
    }
    #web_container {
    padding-top: 50px;
    background-size: 200%,100%,50%;}
    .header_acc ul {bottom: -1em;}
    .acc_box {
    width: 96%;
    margin: 50px auto;
    box-shadow: 0 0 0 3px #439160;
    padding: 3em 0em;
    border-radius: 1em 1em 0 0;}
    .acc_box .tit {
        top: -40px;
        width: 90%;
        max-width: 250px;
        padding-bottom: 19.49%;
        left: 50%;
        transform: translate(-50%,0%);
        background-repeat: no-repeat;
    }
    .about_box .txt p {
    font-size: 1.2em;
    width: 84%;
    margin: 10px auto;
    line-height: 1.8em;
    text-align: justify;
    }
    .about_box .txt ol li {
    display: inline-block;
    width: 43%;
    margin: 2%;
    }
    .tab_content li {
    width: 47%;
    }



}

	
@media screen and (max-width: 768px) {
.about_box .txt ol {
    margin: 0;
    padding: 0;
}
#web_container {padding-bottom: 10px;
}


}
	
@media screen and (max-width: 700px) {

}
@media (max-width: 580px) {

}

@media (max-width: 500px){
.tab_content li { width: 95%;}
}


@media (max-width: 450px) {

}
@media (max-width: 400px) {
}




@media (max-width: 360px) {
}
		
	
	