@charset "UTF-8";
.keelung-container{ cursor: default; width: 100%; height: auto; position: relative; background: linear-gradient(to bottom, #00adde 20%, #5fe9ff 50%, #bdf5fe 100%);}
.keelung-container .wrapper{ width: 80%; height: 100%; position: relative; display: flex; margin: 0 auto; justify-content:center; flex-direction:column; padding: 0 0 2.5%; overflow: hidden;}
.keelung-container .title-h2{ font-size: 3rem; color: #333; margin:0 auto 30px auto; font-weight: 700; text-align: center; border-bottom: 6px solid #ffc100; display: inline-flex;}

.keelung-container .mobile-show{ display: none;}

.keelung-container .kv-box{ position: relative; width: 100%; height: auto;}

.keelung-container .kv-box .kv-main{ position: absolute; left: 0; top: 0; width: 100%; height: auto;}

.keelung-container .ad-banner{ margin-top: 20px;}


/*QA_start*/
.keelung-container .qa-box{ display: flex; flex-direction: column;}
.qa-content{ width: 100%; padding: 1.5rem; box-sizing: border-box; color: #333;}
.qa-content .container-accordion{ display: inline-flex; flex-direction: column; width: 100%;align-items: center;}
.qa-content .container-accordion a{ text-decoration: underline;}
.qa-content .container-accordion label{ display: block; width: 100%; text-align: left; cursor: pointer; font-size: 1.2rem; color: #333; line-height: 140%;}
.qa-content .container-accordion .red, .qa-content .container-accordion .container-accordion-content.red{ color: #b60152 !important;}
.qa-content .container-accordion .accordion-navigation{ border-bottom: #3333338d 2px solid; width: 100%; text-align: left; margin-bottom: 1rem; margin-top: 0; padding-bottom: 1rem;}
.qa-content .container-accordion .accordion-navigation:last-child{ border-bottom: none !important; padding-bottom: 0; margin-bottom: 0;}
.container-accordion .container-accordion-content{ height: 0px; overflow: hidden; font-size: 1rem; line-height: 140%; transition: 0.3s ease-in !important;}
input[type=radio]:checked+.container-accordion-content{ height: auto; font-size: 1rem; line-height: 140%; margin-left: 0; padding-left:0; padding-bottom: .5rem; padding-top: .5rem;}
input[type=radio]{ display: none;}

@media screen and (max-width: 820px) {
  .qa-content{ margin-bottom: 25px; width: 100%; padding: 0;}
  .qa-content .container-accordion label{font-size: 1rem;}
  input[type=radio]:checked+.container-accordion-content{ font-size: .9rem;}
  .container-accordion .container-accordion-content{ font-size: .9rem;}
}

/*table*/
.table-box{width: 100%; margin: 0; box-sizing: border-box; padding: 1% 0;}
.table-box table{border-top: 0px; width: 100%; border-spacing: 0; margin: 0 auto; border-collapse: separate; border-radius: 0; font-size: 1rem;}

.table-box table tr th{ color: #333; padding: 10px; vertical-align: middle;  text-align: center; font-weight: normal; border-right: 3px solid #fff;}
.table-box table tr th:last-child{ border-right: 3px solid #ffc100;}
.table-box table tr:last-child p img{ width: auto; height: 12px; vertical-align:baseline; margin-right: 2px;}
.table-box table tr th span, .table-content table td span{ display: block;}
.table-box table tr th p{ font-size: 1.4rem; font-weight: 700;}
.table-box table tr th:first-child p{ font-size: 1rem;}
.table-box table tr td{ border-right: solid 3px #ffc100; border-bottom: solid 3px #ffc100; padding: 8px; font-weight: normal;}
.table-box table tr td:first-child{ border-left: 3px solid #ffc100;}
.table-box table tr:last-child td:first-child{ border-left: 0px;}
.table-box table .price{ font-size: 2rem; font-weight: 700; color: #333; line-height: 100%;}
.table-box table .price.push{ font-size: 4rem; font-weight: 700; color: #ff4e10;}
.table-box table .new-box{ display: flex; flex-direction: column; width: 90%; margin: 0 auto; position: relative; align-items: center;}
.table-box table .new-box p{ font-size: 2rem; color: #fff; font-weight: 700;}
.table-box table .new-box .small{ font-size: 16px;}


@media screen and (max-width: 820px) {
.keelung-container .mobile-show{ display: block; font-size: .9rem; text-align: center; margin: 0 auto 10px;}
.table-box{ overflow-x: scroll; overflow-y: hidden;}
.table-box table{ width: 750px;}
.table-box table tr th, .table-box table tr td{ padding: 5px;}
.table-box table tr th p{ font-size: 1.1rem;}
.table-box table tr td p{ font-size: .9rem;}
.table-box table .price{ font-size: 1.5rem; }

.table-box::-webkit-scrollbar-thumb{ background-color: #ffc100 !important; border-radius: 0px; }
.table-box::-webkit-scrollbar{ height: 8px; -webkit-appearance: none;}
.table-box::-webkit-scrollbar-track{ box-shadow:inset 0 0 2px rgba(128, 128, 128, 0.4); -webkit-box-shadow:inset 0 0 2px rgba(128, 128, 128, 0.4);}
.table-box::-webkit-scrollbar:hover{ height: 12px;}

.table-box table tr th p{ font-size: 1rem;}
.table-box table .price{ font-size: 1.2rem;}
.table-box table .price.push{ font-size: 1.8rem;}
.table-box table .new-box p{ font-size: 1.2rem;}
.table-box table .new-box .small{ font-size: 12px;}

.keelung-container .wrapper{ padding: 0 0 10%; width: 90%;}
.keelung-container .sec3 .wrapper{ padding-bottom: 0;}
.keelung-container .ad-banner{ margin-top: 10%;}
}

@media screen and (max-width: 500px) {
.table-box table{ width: 480px;}
}


@media screen and (max-width: 820px) {
    .keelung-container .title-h2{ font-size: 1.8rem; margin-bottom: 20px;}
    .keelung-container .title-h3{ font-size: 1.3rem; margin-bottom: 20px;}
    
}