.GG {display:none;}
*{
    box-sizing:border-box;
    line-height:1.5;
}
body{
    font-size:16px;
    font-family:  sans-serif,"微軟正黑體";
    overflow-x: hidden;
}
.container {
    width:1280px;
    margin:0 auto;
}
.cfix:after {
    content:"";
    display:block;
    clear: both;
}
h1 {
    font-size:2rem;
    line-height:3;
}
h2 {
    font-size:1.6rem;
    line-height:3;
}
h3,h4,h5 {
    font-size:2rem;
    font-weight:bold;
}
a {
    text-decoration: none;
    color:inherit;
}
table th, table td {
    padding:.5em;
    border:1px solid #ccc;
}
.col2 > li {
    width:50%;
    float:left;
}
.col4 > li {
    width:25%;
    float:left;
}
.col6 > li {
    width:16.66%;
    float:left;
}
.col7 > li {
    width:14.28%;
    float:left;
}
.imgBk {
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.lineLimit {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#loading {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(/documents/418719/462064/Preloader_11.gif) center no-repeat #fff;
}
header {
    background: rgba(255,255,255,1); 
    padding:1em 1em 0 1em;
    position: fixed;
    width:100%;
    z-index: 99;
}
header h1.logo {
    display:inline-block;
    line-height: 1;
}
.mainMenu {
    position: absolute;
    right:4em;
    top:3em;
    color:#fff;
}
.mainMenu.mobile {
    right:1em;
    top:1em;
}
.mainMenu > li {
    display:inline-block;
    padding:0 1vw;
    font-size:20px;
    color: #1b8963;
    
}
.mainMenu > li img {
    vertical-align: middle;
    margin-top:-5px;
    margin-right:3px;
}
.mainBanner > img {
    width:100%;
}
.menuBtn {position:absolute;z-index: 101;right: 4px;top: 4px;width: 50px;height: 50px;transition: .3s;}
.menuBtn.active {right:0;top:-8px;}
.menuBtn .icon {    position: absolute;cursor: pointer;width: 25px;height: 25px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;transition: all .3s ease-in-out;}
.menuBtn .icon .top, .menuBtn .icon .mid, .menuBtn .icon .bot {background-color: #1a7d5f;;height: 3.125px;width: 25px;position: absolute;left: 1.25px;overflow: hidden;transition: all .3s ease-in-out;}
.menuBtn .icon .top {top:1.25px;}
.menuBtn .icon .mid {top:10.25px;}
.menuBtn .icon .bot {top:19.25px;}
.menuBtn.active .icon .top {top: 18.25px;transform: rotate(45deg);background-color: #1a7d5f;;}
.menuBtn.active .icon .mid {opacity: 0;transform: rotate(45deg);background-color: #1a7d5f;}
.menuBtn.active .icon .bot {top: 18.25px;transform: rotate(-45deg);background-color: #1a7d5f;}
.mainMenu .menuMask {
    visibility: hidden;
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:80px;
    background:rgba(0,0,0,.8);
    color:#fff;
    transition: .5s;
    opacity: 0;
    z-index:100;
}
.mainMenu .menuList {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-360px;
    background: #fff;
    /*background: #1a7d5f;*/
    transition: .5s;
    padding:0;
    min-width: 180px;
    padding-top:10vh;
}
.menuList > li {
    font-size:1.1rem;
    letter-spacing: .25em;
    text-align:center;
}
.menuList > li a {
    line-height:2;
    display:block;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.menuList > li > a {
    /*background: #0f8963;*/
    padding-top:3px;
    color: #1a7d5f;
}
.menuList .subMenu {
}
.menuList .subMenu > li {
    font-size:.7em;
    text-align:left;
    color:#ccc;
}
.menuList .subMenu > li a {
    padding:.5em 2rem;
    color:#333;
}
.menuBtn.active ~ .menuMask {
    visibility: visible;
    opacity: 1;
}
.menuBtn.active ~ .menuMask .menuList {
    left:0;
}

.mainMenu.mobile .menuList > li > a > img {
    width:38px;
    margin-right:12px;
    top:5px;
    position: relative;
}
.mainMenu.mobile .menuList > li > a {
    padding:10px 0 6px 0;
}
section:not(.portlet) {
    padding:1.5em 0
}
section h2 {
}
section h2 > span {
}
section h2 img {
    vertical-align: bottom
}
.levelEx > li {
    margin:1em;
}
.levelEx > li img {
    display:inline-block;
    vertical-align: middle;
    margin-left:1em;
}
.levelEx > li div.text {
    display:inline-block;
    vertical-align: middle;
    font-size:32px;
    line-height: 1;
    font-weight:bold;
    letter-spacing: .1em;
    padding-left:.5em;
}
section h3 {
    color:#0f8963;
}
section img {
    max-width:100%;
}
.sph3 {
    position:relative;
    margin-top:1.5em;
}
.sph3 > span {
    position:absolute;
    border-bottom:1px solid #0f8963;
    top:6px;
    left:56px;
    padding:0 .3em;
}
.note_pickupPrice {
    font-size:26px;
}
.note_pickupPrice > li {
    text-indent: -5em;
    padding-left:4em;
    margin-bottom:.5em;
    padding-right:3em;
}
.note_pickupPrice > li:nth-of-type(2) {
    text-indent: -6em;
    padding-left:5em;
}
.precautionList {
    font-size:26px
}
.precautionList > li {
    margin-bottom:1em;
    text-indent: -.8em;
    padding-left:.8em;
    font-weight:bold;
    color:#444;
}
.textLink {
    color:#0f8963;
}
.reserveWay {
    background: #f2f9f7;
    /*margin: 0em -1em 0em -1em;*/
    padding: 1em;
    border-radius: 24px;
}
.reserveWay > img {
    display:inline-block;
    vertical-align: middle;
}
.reserveWay > div.text {
    display:inline-block;
    vertical-align: middle;
    font-size:25px;
    line-height: 1;
    font-weight:bold;
    letter-spacing: .1em;
    padding-left:.5em;
}
.reserveList {
    font-size:24px;
}
.reserveList > li {
    line-height: 2;
    margin:.5em 0;
    text-indent: -.8em;
    padding-left:2em;
    
}
.blackLink {
    background: #009FAF;
    padding:0 .5em;
    margin:0 .5em;
    color:#fff;
    border-radius: 7px;
    
}
.qaList > li {
    margin:.3em 0;
    padding:1em 2em .5em 2em;
    border-radius: 24px
}
.qaList > li:nth-of-type(2n - 1) {
    background: #ECF6F7;
}
.qaList > li > p {
    margin:.3em 0;
    font-size:20px;
    
}
.qaList .index {
    font-size:28px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 60px;
    text-align: center;
}
.qaList .text {
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 70px);
    margin-top:-3px;
    padding-left:.5em;
}
.questP .index {
    background: #0f8963;
    color:#fff;
}
.answerP .index {
    color:#0F8963;
    border:1px solid #0F8963;
    background: #fff;
}
.questP .text {
    color:#0F8963;
    font-weight:bold;
    font-size:22px;
}
.answerP .text {
    
}

footer {
    background: #fff;
    padding:1em;
    margin-top:2em;
}
/*#0f8963*/

.logoForMobile {
    display:none;
}
.mainMenu.mobile {
    display:none;
}
main {
    padding-top:110px
}
.funcList {
    padding:1em 8em;
}
.funcList > li {
    text-align:center;
    width:25%;
    float:left;
}
.funcList > li .imgBk {
    width:142px;
    height:155px;
    background-position: center center;
    margin: auto;
}
.funcList > li:nth-of-type(1):hover .imgBk {
    background-image:url(/documents/418719/462064/viiicon01b.png) !important;
}
.funcList > li:nth-of-type(2):hover .imgBk {
    background-image:url(/documents/418719/462064/viiicon02b.png) !important;
}
.funcList > li:nth-of-type(3):hover .imgBk {
    background-image:url(/documents/418719/462064/viiicon03b.png) !important;
}
.funcList > li:nth-of-type(4):hover .imgBk {
    background-image:url(/documents/418719/462064/viiicon04b.png) !important;
}
.phoneCloud {
    background-image: url(/documents/418719/462064/vii_bk_00.png);
    background-size: cover
}
.phoneBox {
    width:55%;
    float:left;
    position: relative
}
.phoneNote {
    width:45%;
    float:left;
    padding-top:6em
}
.phoneBox .phonePop {
    display:block;
    position: absolute;
    top:50%;
    left: 50%;
    width:0;
    height:0;
    transition: .8s;
}
.phonePop.active {
    width:100%;
    height:auto;
    left:0;
    top:0;
}
.appDownload {
    background-image: url(/documents/418719/462064/vii_bk_01.png);
    padding-top:3em;
}
.downloadLink {
    padding:2em;
}
.downloadLink > li {
    width:50%;
    float:left;
    text-align:center;
    padding:1em;
}
.downloadLink > li img {
    max-width:100%;
}
#homeVideo {
    width:100%;
}

.h2title {
    text-align: center;
    padding:1em 0;
}
.textLink {
    background: #0F8963;
    color:#fff;
    padding:6px 15px;
    border-radius: 20px;
    word-break: keep-all;
}
.mainBanner {
    position: relative;
}
.mainBanner .popBox {
    position: absolute;
    top:15vw;
    left:4vw;
    width:40%;    
}
.mainBanner .popTitle {
    max-width: 100%;
}
.mainBanner .popLink {
    max-width: 40% !important;
    opacity: .9;
}
.myTube {
    width:80%;
}
section.video .container {
    text-align:center;
}
@media all and (min-width:769px) {
    .mainBanner .mobile {
        display:none;
    }
    .mainBanner .popLink:hover {
        opacity: 1;
    }
}
@media all and (max-width:1200px) {
    .mainMenu > li {
        display:inline-block;
        padding:0 1vw;
        font-size:15px;
    }
    .logoForPc {
        width:80%
    }
    .container {
        width:100%;
    }
}
@media all and (max-width:1200px) {
}
@media all and (max-width:990px) {
    .logoForPc {
        display:none;
    }
    .logoForMobile {
        display:inline-block;
    }
    .mainMenu > li img {
        width:32px;
    }
    .mainMenu > li {
        padding:0 3px
    }
    .funcList {
        padding:1em;
    }
}
@media all and (max-width:768px) {
    .mainBanner .popBox {
        top:12vw;
        width:60%;
    }
    .mainBanner .popTitle {
        margin-bottom:1em;
    }
    .mainBanner .popLink {
        max-width: 60%;
        opacity: 1;
    }
    .mainBanner .pc {
        display:none;
    }
    .mainMenu.pc {
        display:none;
    }
    .mainMenu.mobile {
        display:block;
    }
    .logoForMobile {
        width:240px;
    }
    header {
    }
    .funcList > li {
        width:50%;
        padding-top:2em;
    }
    .phoneNote {
        padding-top:3em;
    }
    .qaList > li > p {
        margin:1em 0
    }
}
@media all and (max-width:767px) {
    
}
@media all and (max-width:480px) {
    .phoneBox {
        width:100%;
    }
    .phoneNote {
        width:100%;
    }
    .downloadLink > li {
        width:100%;
    }
}