@charset "utf-8";
/* CSS Document */
* {
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font-family: '微軟正黑體';
}
.pure-g [class*='pure-u'],
.pure-g {
    font-family: '微軟正黑體';
    letter-spacing: 0px;
}
body {
    margin: 0;
    font-size: 16px;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}
#tinymce {
    background: none;
}
#container {
    width: 100%;
    margin: 0 auto;
}
.main_container {
    width: 100%;
}
.main_container>div {
    width: 100%;
    margin: 0 auto;
}
.nodata {
    text-align: center;
    color: #2f2f2f;
    font-size: 1em;
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
.nodata span {
    padding: 5em;
    width: 100%;
}
.fade_btn {
    background-color: white;
    position: fixed;
    z-index: 100;
    text-align: center;
    cursor: pointer;
}
.fade_btn span {
    font-size: 12px;
    padding: 5px 7px 0 7px;
    display: block;
    writing-mode: vertical-rl;
}
@media screen and (max-width: 768px) {
    .fade_btn {
        display: none !important;
    }
}
main {
    width: 100%;
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden;
}
div.mainbox {
    width: calc(100% - 288px);
    min-height: 100vh;
    margin: 0;
    vertical-align: top;
    order: 1;
    overflow: hidden;
}
/*header*/
header {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 288px;
    padding: 0;
    z-index: 999;
    top: 0;
    order: 0;
    vertical-align: top;
    margin: 0;
    position: relative;
    background-color: #cbebf8;
}
.headerbox {
    margin: 0 auto;
    -webkit-animation: eimg 0.5s linear;
    -moz-animation: eimg 0.5s linear;
    animation: eimg 0.5s linear;
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    -moz-align-content: flex-start;
    -ms-align-content: flex-start;
    -o-align-content: flex-start;
    align-content: flex-start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    position: fixed;
    width: 288px;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
}
/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
    width: 7px;
}
/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
    background: #dddddd;
}
/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 15px;
}
/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
    background: #014099;
}
.hlogo {
    padding: 30px 0;
    position: relative;
    width: 100%;
    vertical-align: top;
    text-align: center;
    background-color: #fff;
}
header .hlogo img {
    display: inline-block;
    /* width: 227px; */
}
/*Banner*/
.bannerbox {
    width: 100%;
    margin: 0 auto;
    -webkit-animation: eimg 0.6s linear;
    -moz-animation: eimg 0.6s linear;
    -ms-animation: eimg 0.6s linear;
    -o-animation: eimg 0.6s linear;
    animation: eimg 0.6s linear;
}
#banner {
    position: relative;
    overflow: hidden;
    z-index: 99;
}
#banner .img {
    white-space: nowrap;
    position: absolute;
}
#banner .img img {
    vertical-align: top;
}
#banner_control {
    position: absolute;
    bottom: 26px;
    width: 100%;
    text-align: center;
    z-index: 100;
}
#banner_control img {
    width: 20px;
}
#banner #banner_control span {
    cursor: pointer;
    padding: 0 2px;
}
#banner #banner_control span img:nth-child(2) {
    display: none;
}
#banner #banner_control span img:nth-child(1) {
    display: inline-block;
}
#banner #banner_control span:hover img:nth-child(1),
#banner #banner_control span.now img:nth-child(1) {
    display: none;
}
#banner #banner_control span:hover img:nth-child(2),
#banner #banner_control span.now img:nth-child(2) {
    display: inline-block;
}
/*Banner End*/
/*menu*/
header .navbox {
    width: 100%;
    vertical-align: top;
}
header .navbox form {
    padding: 6px 0px 20px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
header .navbox form>input[type='text'] {
    margin-right: 10px;
}
header .navbox form>input[type='submit'] {
    background: #b28247;
    border: none;
    padding: 2px 10px;
    color: #fff;
    letter-spacing: 1px;
}
header .navbox form>span {
    display: block;
    width: 100%;
    position: absolute;
    left: 22px;
    top: 35px;
}
header .hnav .mul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-align-items: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 30px 0;
}
header .hnav .mul>li {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
}
header .hnav .mul li a>b {
    display: block;
    font-weight: normal;
    vertical-align: top;
    position: relative;
    letter-spacing: 1.5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-align: left;
}
header .hnav .mul li a>b span:nth-child(1) {
    background-color: #1d9bf0;
    padding: 6px 15px;
    display: inline-block;
    border-radius: 25px;
    color: #fff;
}
header .hnav .mul li a>b span:nth-child(2) {
    color: #1d9bf0;
    letter-spacing: 0;
    font-size: 14px;
    display: block;
}
.hnav .mli>a {
    padding: 10px 0 10px 42px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: start;
    -ms-align-items: start;
    align-items: flex-start;
    color: #fff;
    z-index: 999;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    transition: 0.3s;
}
.hnav .mli>a:hover {
    background-color: #fff;
    transition: 0.3s;
}
.hnav .mli>a:hover b {
    transform: translateX(10px);
}
.hnav .mli .sul {
    position: absolute;
    z-index: 998;
    width: 100%;
    display: none;
    cursor: pointer;
    top: 0;
    left: 100%;
    background-color: #fff;
    padding: 5px 0;
}
.hnav .mli:hover .sul {
    display: block;
}
.hnav .mli .sul:hover::before {
    background-color: rgba(255, 255, 255, 0.6);
    content: '';
    left: -100%;
    top: 0;
    position: absolute;
    width: 100%;
    height: 56px;
}
.hnav .sli {
    width: 100%;
}
.hnav .sli a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px 20px;
    font-size: 18px;
    letter-spacing: 1px;
    color: #333;
}
.hnav .sli a:hover {
    background-color: #f3f3f3;
}
/*title*/
.title {
    text-align: center;
    width: 100%;
    display: block;
    margin: 25px 0;
    padding: 0px;
}
/*more*/
.more a {
    position: relative;
    width: 91px;
    height: 67px;
    display: inline-block;
    margin: 0 auto;
    background-image: url('../images/website_image/more.png');
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.more {
    text-align: center;
    width: 100%;
    margin: 0;
}
.more a:hover {
    background-image: url('../images/website_image/more_hover.png');
}
.more a>span {
    display: none;
}
/*top*/
.fixbox {
    position: fixed;
    right: 24px;
    bottom: 10px;
    z-index: 9999;
}
#gotop {
    display: none;
    cursor: pointer;
}
#gotop img {
    width: 57px;
    height: auto;
}
/*cart*/
.cartbox {
    width: 55px;
    text-align: center;
    margin-bottom: 10px;
}
.cartbox img {
    width: 53px;
}
.cartbox span {
    position: absolute;
    top: 45px;
    right: 0px;
    display: inline-block;
    background-color: #faedcb;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    color: #ffb800;
}
/*按鈕*/
.member_button {
    background: #4b4b4b;
    color: #fff;
    width: 300px;
    margin: 1em auto;
    text-decoration: none;
    font-size: 1.5em;
    line-height: 1em;
    display: block;
    padding: 0.5em;
    border: none;
}
.member_button:hover {
    background: #da4e40;
}
a.btn {
    background: #4b4b4b;
    color: #fff;
    width: 300px;
    margin: 1em auto;
    text-decoration: none;
    font-size: 1.5em;
    font-family: '微軟正黑體';
    text-align: center;
    display: block;
    line-height: 2em;
}
a.btn:hover {
    background: #da4e40;
}
a.btn_fb {
    background: #1d438e;
    color: #fff;
    width: 300px;
    margin: 1em auto;
    text-decoration: none;
    font-size: 1.5em;
    display: block;
    line-height: 2em;
}
a.btn_fb:hover {
    background: #13213b;
}
/*返回*/
.back a {
    position: relative;
    width: 90px;
    height: 67px;
    display: inline-block;
    margin: 0 auto;
    background-image: url('../images/website_image/back.png');
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.back {
    text-align: center;
    width: 100%;
    margin: 0;
}
.back a:hover {
    background-image: url('../images/website_image/back_hover.png');
}
.back a>span {
    display: none;
}
/*頁碼*/
.page {
    text-align: center;
    margin: 50px 0px;
    font-size: 16px;
    width: 100%;
}
.page ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.page ul li {
    display: inline-block;
    margin: 0 1px;
}
.page ul li.page_icon {
    margin: 0 18px 0 0;
}
.page ul li.page_icon.page_icon2 {
    margin: 0 0 0 18px;
}
.page ul li a {
    text-align: center;
    display: block;
    color: #a86c02;
    font-weight: bolder;
    padding: 0 1px;
    line-height: 25px;
    min-width: 25px;
    min-height: 25px;
    border-radius: 50%;
}
.page ul li .select,
.page ul li a:hover {
    background-color: #ffb900;
}
.page ul li a img {
    width: 27px;
    position: relative;
    top: -2px;
    vertical-align: middle;
}
/*footer*/
footer {
    position: relative;
    overflow: hidden;
}
footer .foot_topimg {
    width: 100%;
    margin-bottom: -4px;
}
footer .foot_topimg img {
    width: 100%;
}
.footer_box {
    width: 100%;
    margin: 0;
    padding: 2px 0 0;
    background-color: #f0f0f0;
}
.foot_main_in {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}
.foot_left {
    width: 100%;
    text-align: left;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 5% 0;
}
.foot_cont {
    width: 100%;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
}
.foot_logo {
    /* width: 150px; */
    width: 100%;
    padding: 10px;
    /* background-color: #fff; */
    text-align: center;
}
.foot_link {
    width: 100%;
    text-align: center;
}
.foot_link a {
    margin: 21px 8px 19px;
    display: inline-block;
}
.foot_link a:hover img {
    -webkit-animation: tada 1s;
    -moz-animation: tada 1s;
    animation: tada 1s;
}
.foot_txt {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #333;
    font-size: 14px;
    line-height: 1.7em;
    letter-spacing: 1px;
    margin-top: 15px;
}
.foot_txt .footer_flex {
    margin: 0 auto;
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.foot_txt .footer_p {
    width: 300px;
    padding: 5px 10px;
    text-align: left;
    border-bottom: 1px solid #d1d1d1;
}
.foot_txt a {
    color: #333;
}
.foot_txt a:hover {
    color: #0004a0;
}
.foot_cont p {
    margin: 0;
}
.foot_bottom {
    width: 100%;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
}
.footer_line {
    text-align: center;
}
.footer_line img {
    background-color: #b1b1b1;
    padding: 5px;
    width: 45px;
    border-radius: 10px;
    margin-top: 10px;
    transition: 0.3s;
}
.footer_line img:hover {
    background-color: #00b900;
    transition: 0.3s;
}
.aside_line img {
    width: 57px;
    padding: 10px;
    border-radius: 50%;
    background-color: #00b900;
    margin-bottom: 10px;
}
address,
address a {
    color: #333;
    font-size: 12px;
    line-height: 1.8em;
    font-style: normal;
    background-color: #333;
    color: #fff;
    padding: 5px 0;
}
/*about*/
.home_about {
    width: 100%;
    background-image: url('../images/website_image/bg_fruit.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    padding-bottom: 0.9%;
}
.about_txt {
    width: 100%;
    padding: 0 8.5% 0 10%;
    text-align: left;
    font-size: 16px;
    line-height: 2em;
    color: #807467;
}
.about_txt p {
    margin: 2em 0;
}
/*product*/
.search {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 20px;
    margin-top: 1.7%;
}
.home_pro.iproduct_box {
    margin: 7.4% 0 11.8%;
}
.iproduct_box {
    width: 100%;
}
.iproduct {
    text-align: center;
    width: 100%;
    padding: 0 8.5% 0 10%;
}
.ipbox {
    margin: 0;
    padding: 0px;
    width: 100%;
    text-align: left;
    overflow: hidden;
}
.ipbox_list {
    display: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.ipbox_top {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    width: 100%;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
.iproduct .ipbox .listbox {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    padding: 0;
}
.iproduct .ipbox .listbox .list {
    width: 30.6%;
    position: relative;
    margin-bottom: 8.2%;
    margin-top: 1.7%;
}
.iproduct .ipbox .listbox .list:not(:nth-child(3n)) {
    margin-right: 4.1%;
}
.iproduct .ipbox .listbox a.list:hover .showbox img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0.7;
}
.iproduct .ipbox .listbox .list .ippic {
    width: 100%;
    position: relative;
}
.ippic_pic_out {
    position: relative;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-flex-pack: center;
    -ms-flex-pack: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-align-items: center;
    -webkit-box-align: center;
    -moz-flex-align: center;
    -ms-flex-align: center;
    -o-flex-align: center;
    align-items: center;
}
.test2 {
    display: block;
    opacity: 1;
    width: 100%;
    margin: 0 auto;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.showbox {
    width: 100%;
    position: relative;
    padding: 0px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-flex-pack: center;
    -ms-flex-pack: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-align-items: center;
    -webkit-box-align: center;
    -moz-flex-align: center;
    -ms-flex-align: center;
    -o-flex-align: center;
    align-items: center;
    overflow: hidden;
}
.iproduct .ipbox .listbox a.list:hover .ipname {
    color: #a76c02;
}
.iproduct .ipbox .listbox .list .ipname {
    color: #000;
    margin: 16px 0 0;
    padding: 13px 0;
    text-align: center;
    display: block;
    overflow: hidden;
    font-size: 17px;
    position: relative;
}
.iproduct .ipbox .listbox .list .ipname::before {
    content: '';
    position: absolute;
    width: 32px;
    height: 4px;
    top: 0;
    left: calc(50% - 16px);
    display: inline-block;
    background-color: #a76c02;
    border-radius: 2px;
}
.ipbox_center {
    width: 100%;
    margin-top: 55px;
}
.ipbox_left {
    width: 220px;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
    display: inline-flex;
    vertical-align: top;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    margin-top: 1.7%;
}
.ipbox_right {
    width: calc(100% - 220px);
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
}
.ipbox_detailbox {
    width: 100%;
}
.ipbox_left #ipul {
    padding: 0px 0;
    margin: 4px 0;
    font-size: 16px;
    line-height: 1.5em;
}
.ipbox_left #ipul>li {
    cursor: pointer;
    padding: 0px 0 0px 42px;
}
.ipbox_left #ipul>li>a {
    color: #a86c02;
    padding: 10px 10px 10px 20px;
    text-align: left;
    position: relative;
    display: inline-block;
}
.ipbox_left #ipul>li>a:hover {
    color: #ffb900;
}
.ipbox_left #ipul>li>a:hover::before {
    content: '+';
    width: 10px;
    height: 10px;
    display: inline-block;
    position: absolute;
    top: 9px;
    left: 0px;
    color: #ffb900;
    font-weight: bolder;
}
.ipbox_left .ititle {
    width: 100%;
}
.ipbox_left .ititle>div {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
.ipbox_left .ititle>div>img {
    width: 142px;
    vertical-align: middle;
    position: relative;
}
.ipbox_bottom {
    margin: 0;
    padding: 0px;
    text-align: center;
    width: 100%;
}
/*home_about*/
.iabout_box {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10.2%;
}
.iaboutmain {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
}
.iaboutmain .iabout_txt {
    position: relative;
    color: #333;
    font-size: 18px;
    line-height: 1.8em;
    letter-spacing: 1px;
    text-align: left;
}
.iaboutmain .iabout_txt p {
    margin: 0 0 1.8em;
}
.iaboutmain .iabout_txt p span {
    color: #ff6600;
}
/**/
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    10%,
    20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}
@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    10%,
    20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}
@-webkit-keyframes eimg {
    from {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes eimg {
    from {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@-webkit-keyframes slowtop {
    from {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes slowtop {
    from {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}
@-webkit-keyframes breath {
    25% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    30% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }
    35% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
@keyframes breath {
    25% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    30% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }
    35% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}
/* 游泳協會 */
.padding {
    padding: 0 5%;
    box-sizing: border-box;
}
.margin {
    margin: 70px 0;
}
.swtitle {
    text-align: center;
    color: #333;
    margin-bottom: 50px;
}
.swtitle>p {
    margin: 0;
    font-weight: 600;
    font-size: 36px;
}
.hregister_content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    flex-wrap: wrap;
}
.hregister_content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hregister_first {
    width: calc(33.3% - 5px);
    box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.1);
}
.hregister_list {
    width: calc(66.6% - 5px);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    flex-wrap: wrap;
}
.hregister_box {
    width: calc(50% - 5px);
    box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.1);
}
.hregister_pic {
    height: 30vh;
}
.hregister_txt {
    padding: 15px 25px;
    background-color: #fff;
    color: #333;
}
.hregister_txt>span {
    font-size: 18px;
    font-weight: 600;
}
.hregister_txt>p {
    margin: 0;
    font-size: 14px;
}
.hregister_txt>p span {
    background-color: #0004a0;
    color: #fff;
    padding: 5px 15px;
    display: inline-block;
    margin: 5px 0;
    border-radius: 20px;
}
.register_txt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f3f3f3;
}
.register_txt:last-child {
    margin-bottom: 40px;
}
.register_txt>span {
    display: inline-block;
    padding: 5px 15px;
    color: #fff;
    border-radius: 20px;
    margin-right: 10px;
}
.register_txt:nth-child(1)>span {
    background-color: #014099;
}
.register_txt:nth-child(2)>span {
    background-color: #1877f2;
}
.register_txt:nth-child(3)>span {
    background-color: #1d9bf0;
}
.register_txt:nth-child(4)>span {
    background-color: #333;
}
.register_txt:nth-child(5)>span {
    background-color: #e30500;
}
.register_txt>p {
    margin: 10px 0;
}
.register_doc {
    margin: 25px 0;
}
.register_doc>a {
    font-weight: 600;
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    transition: 0.3s;
}
.register_doc>a:hover {
    color: red;
    transition: 0.3s;
}
.register_doc>a:hover img {
    filter: hue-rotate(90deg);
}
.register_doc>a em {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-right: 5px;
}
.register_doc>a img {
    width: 27px;
    height: 27px;
}
.register_doc>p {
    margin: 5px 0 0 0;
}
.register_button {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.register_button button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    text-align: center;
    margin: 10px 5px 0 5px;
    font-weight: 600;
}
.register_button button a {
    color: #333;
    position: relative;
}
.register_button button:first-child {
    background-color: #ffb1b1;
    margin: 10px 5px 0 0;
}
.register_button button:nth-child(2) {
    background-color: #fffcb1;
}
.register_button button:nth-child(3) {
    background-color: #b1ffd7;
}
.register_button button:last-child a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1em;
    bottom: -30px;
    left: 0;
    color: #000;
    font-size: 15px;
}
.register_button button:nth-child(2) a:before {
    content: "不分齡";
    position: absolute;
    width: 100%;
    height: 1em;
    bottom: -30px;
    left: 0;
    color: #000;
    font-size: 15px;
}
.register_button button:nth-child(4) {
    background-color: #b1f9ff;
}
.register_button button:last-child {
    margin: 10px 0 0 5px;
    background-color: #9dd8ff;
}
.query_content input {
    padding: 5px 15px;
}
.query_formtop {
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    flex-wrap: wrap;
    border: 1px solid #333;
}
.formtop_right {
    width: 50%;
}
.formtop_right_result {
    width: 100%;
}
.formtop_box label {
    padding: 5px 15px;
    width: 170px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    border-color: #333;
    border-style: solid;
    border-width: 0 1px 0 0;
    background-color: #eef6ff;
    flex-wrap: wrap;
}
.formtop_right_result>.formtop_box label {
    width: 200px;
}
.formtop_right_result>.formtop_box span {
    width: calc(100% - 200px);
    padding: 5px 10px;
}
.formtop_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    height: calc(100% / 5);
    border-color: #333;
    border-style: solid;
    border-width: 0 0 1px 0;
}
@media screen and (max-width: 1000px) {
    .query_result .formtop_box {
        height: calc(100% / 8);
    }
}
.formtop_box:last-child {
    border-bottom: none;
}
.formtop_box label span {
    color: red;
}
.formtop_box input {
    width: calc(100% - 170px);
    border: none;
}
.formtop_left {
    width: 50%;
    padding: 20px 25px;
    border-left: 1px solid;
}
.formtop_left p {
    margin-top: 0;
    line-height: 1.8;
}
.formtop_left a {
    background-color: #1877f2;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
}
.query_formbottom {
    border-color: #333;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    position: relative;
}
.query_formbottom p {
    margin: 0;
}
.query_formbottom>p {
    background-color: #0004a0;
    color: #fff;
    text-align: center;
    padding: 10px 15px;
    font-size: 20px;
}
.query_formbottom input[type='file'] {
    display: none;
}
.query_formbottom .file-upload {
    cursor: pointer;
}
.latop_member {
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    border-color: #333;
    border-style: solid;
    border-width: 0 0 1px 0;
}
.latop_member:last-child {
    border: none;
}
.latop_title {
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-content: center;
}
.latop_title>p {
    width: calc(100% / 12);
    text-align: center;
    padding: 5px 15px;
    background-color: #eef6ff;
    border-color: #333;
    border-style: solid;
    border-width: 0 1px 1px 0;
    line-height: 1.8;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    font-size: 16px;
}
.latop_title>p span.limit {
    width: 100%;
    font-size: 12px;
    line-height: 1.5;
    color: red;
}
.latop_title>p:last-child {
    border-width: 0 0 1px 0;
}
.latop_input {
    width: calc(100% / 12);
    text-align: center;
    border-color: #333;
    border-style: solid;
    border-width: 0 1px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
}
.latop_input .highlight {
    padding: 5px 10px;
}
.latop_member_list .latop_input {
    overflow: hidden;
    overflow-x: scroll;
    font-size: 14px;
    transition: 0.3s;
}
.latop_member_list .latop_input:hover {
    overflow: unset;
    overflow-x: unset;
    transition: 0.3s;
}
.latop_member_list .latop_input:hover .highlight {
    position: absolute;
    z-index: 1000;
    width: 200px;
    word-wrap: break-word;
    padding: 14px;
    background-color: white;
    border: 1px solid;
    transition: 0.3s;
}
.latop_member_list .latop_input::-webkit-scrollbar {
    display: none;
}
.latop_input:last-child {
    border: none;
}
.latop_input input,
.latop_input select {
    width: 100%;
    padding: 10px 5px;
    border: none;
    font-size: 18px;
    font-weight: 900;
    background-color: transparent;
}
.latop_price_title {
    border-color: #333;
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    background-color: #0004a0;
    color: #fff;
    padding: 5px 10px;
}
.latop_price_data {
    display: flex;
    justify-content: center;
    font-size: 16px;
}
.latop_price_data p {
    padding: 5px 10px;
    border-width: 1px 1px 1px 1px !important;
}
.choose_pay {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    font-size: 16px;
}
.choose_pay .form-control {
    display: block;
    width: 20%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    /* -webkit-appearance: none;
    -moz-appearance: none;
     appearance: none; */
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.mobile_formbottom {
    display: none;
    border-color: #333;
    border-style: solid;
    border-width: 0 1px 1px 1px;
}
.mobile_formbottom p {
    margin: 0;
}
.mobile_formbottom>p {
    background-color: #0004a0;
    color: #fff;
    text-align: center;
    padding: 5px 15px;
    font-size: 16px;
    position: relative;
    width: 100%;
}
.mobile_formbottom>p>span {
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
}
.mobile_formbottom>p>.delete_btn {
    position: absolute;
    top: 50%;
    left: 10px;
    font-size: 12px;
    transform: translate(0, -50%);
    background-color: #ed3430;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 4px;
}
.mobile_formbottom .latop_title>p {
    width: 100%;
    border: none;
    font-weight: 600;
    border-color: #c5e0ff;
    border-style: solid;
    border-width: 0 0 1px 0;
}
.mobile_formbottom .latop_input {
    width: 100%;
    padding: 10px 15px;
    border: none;
}
.mobile_formbottom .latop_title {
    flex-wrap: wrap;
    border-color: #333;
    border-style: solid;
    border-width: 0 0 1px 0;
}
.mobile_formbottom .latop_input input,
.mobile_formbottom .latop_input select {
    padding: 0;
}
.btn_preview {
    border: none;
    background-color: #00b900;
    word-break: keep-all;
    padding: 5px 10px;
    border-radius: 5px;
}
.btn_preview a {
    color: #fff;
}
.latop_delete_btn {
    width: 40px;
    display: flex;
    font-size: 14px;
    position: absolute;
    word-wrap: break-word;
    align-items: center;
    cursor: pointer;
    left: -45px;
    background-color: #ed3430;
    color: #ffffff;
    padding: 5px 2px;
    border-radius: 4px;
    justify-content: center;
}
.query_buttom {
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    font-size: 18px;
    margin-top: 3%;
    transition: 0.3s;
}
.query_buttom a:hover {
    filter: brightness(1.2);
    transition: 0.3s;
}
.buttom_add a {
    cursor: pointer;
    font-weight: 600;
    color: #429bff;
}
.buttom_check b {
    cursor: pointer;
    padding: 5px 15px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
}
.buttom_check .sub_a {
    cursor: pointer;
    padding: 5px 15px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    border: none;
}
.buttom_check .back_edit {
    cursor: pointer;
    padding: 5px 15px;
    background-color: #f00;
    color: #fff;
    border-radius: 5px;
    border: none;
}
.buttom_check .regist_ready {
    cursor: pointer;
    padding: 5px 15px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    border: none;
}
.apply_content>p {
    margin: 0;
    padding-bottom: 30px;
    border-bottom: 1px solid #f3f3f3;
    line-height: 1.8;
}
.apply_search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.apply_inputlist {
    margin: 15px 0;
}
.apply_input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 15px 0;
}
.apply_input label {
    width: 145px;
    font-weight: 600;
    display: inline-block;
}
.apply_input input {
    width: calc(100% - 160px);
    margin-left: 10px;
    border: none;
    background-color: #eef6ff;
    padding: 2px 15px;
}
.apply_button a {
    width: 80px;
    text-align: center;
    background-color: #0004a0;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    margin-left: 20px;
    transition: 0.3s;
}
.apply_button a:hover {
    background-color: #e30500;
    transition: 0.3s;
}
.apply_button button {
    width: 80px;
    text-align: center;
    background-color: #0004a0;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    margin-left: 20px;
    transition: 0.3s;
    border: none;
}
.apply_button button:hover {
    background-color: #e30500;
    transition: 0.3s;
}
.result_box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
.result_con {
    width: calc(100% / 6);
    position: relative;
    margin-top: 24px;
}
@media screen and (max-width:1200px) {
    .result_con {
        margin-top: 0;
    }
}
.result_con:last-child {
    margin-top: 0;
}
.result_con span.limit {
    display: block;
    text-align: center;
    font-size: 14px;
    color: red;
    margin-bottom: 5px;
    width: 100%;
    white-space: nowrap;
}
.result_con>p {
    margin: 0;
    background-color: #0004a0;
    color: #fff;
    text-align: center;
    padding: 5px 15px;
    border-color: #fff;
    border-style: solid;
    border-width: 0 1px 0 0;
}
.result_con:last-child>p {
    border-width: 0;
}
.result_input {
    border-color: #333;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    min-height: 45px;
}
.result_input>span.limit {
    display: none;
}
.result_input input {
    border: none;
    padding: 5px 10px;
    width: 100%;
    text-align: center;
    font-size: x-small;
}
.result_con:last-child .result_input {
    border-width: 0 1px 1px 1px;
}
.result_input button {
    border: none;
    padding: 5px 15px;
    background-color: #1d9bf0;
    color: #fff;
    text-align: center;
    transition: 0.3s;
    border-radius: 5px;
}
.result_input button a {
    color: #fff;
}
.result_input button:hover {
    filter: brightness(1.2);
    transition: 0.3s;
}
.gift_checkin {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.checkin_qr img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-right: 25px;
}
.gift_checkin>p {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: center;
    margin: 15px 0;
    line-height: 1.8;
}
.gift_checkin>p span {
    background-color: #0004a0;
    padding: 5px 15px;
    border-radius: 20px;
    color: #fff;
    margin-bottom: 10px;
    font-size: 18px;
}
.gift_checkin>p a {
    color: #1877f2;
    transition: 0.3s;
}
.gift_checkin>p a:hover {
    color: #0004a0;
    transition: 0.3s;
}
.gift_pic {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 25px 0;
}
.gift_ico {
    width: 25%;
    padding: 10px;
}
.gift_ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gift_notice {
    padding-top: 25px;
    border-top: 1px solid #f3f3f3;
}
.gift_notice>p {
    margin: 0;
    line-height: 1.8;
    font-weight: 600;
}
.gift_notice>p:first-child {
    margin-bottom: 15px;
}
.gift_notice>p span {
    display: block;
    font-size: 14px;
    color: #e30500;
    font-weight: normal;
}
.event_content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.chip_box {
    margin-bottom: 50px;
}
.chip_box:last-child {
    margin-bottom: 0;
}
.chip_box>p {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}
.chip_listbox {
    position: relative;
    margin-top: 15px;
}
.chip_listbox::after {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #9dd8ff;
    position: absolute;
    top: 0;
    left: 20px;
    z-index: -1;
}
.chip_list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    margin-bottom: 25px;
}
.chip_list:last-child {
    margin-bottom: 0;
}
.chip_list>span {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #9dd8ff;
    color: #fff;
    font-size: 24px;
    font-style: italic;
    font-weight: 600;
    font-family: sans-serif;
    margin-right: 10px;
}
.chip_list>p {
    margin: 0;
    width: calc(100% - 50px);
}
.chip_box:last-child .chip_listbox::after,
.chip_box:last-child .chip_list>span {
    background-color: #ffb1b1;
}
.chip_content {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.chip_intro {
    padding-right: 5%;
}
.chip_pic {
    max-width: 500px;
    margin: 25px 0;
}
.chip_pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.inquiry_formtop {
    border: 1px solid #333;
}
.informtop_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    border-color: #333;
    border-style: solid;
    border-width: 0 0 1px 0;
}
.informtop_box:last-child {
    border-width: 0;
}
.informtop_box p {
    margin: 0;
    padding: 10px 15px;
    font-weight: 600;
    width: 190px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    border-color: #333;
    border-style: solid;
    border-width: 0 1px 0 0;
    background-color: #eef6ff;
}
.informtop_box input,
.informtop_box select {
    width: calc(100% - 200px);
    border: none;
    padding: 5px 15px;
    margin: 5px;
}
.inquiry_formbottom {
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    flex-wrap: wrap;
}
.informbottom_box {
    width: calc(100% / 8);
}
.informbottom_box>p {
    margin: 0;
    text-align: center;
    padding: 5px 15px;
    background-color: #0004a0;
    border-color: #fff;
    color: #fff;
    border-style: solid;
    border-width: 0 1px 0 0;
    line-height: 1.8;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.informbottom_box:last-child>p {
    border-width: 0;
}
.informbottom_box span {
    width: 100%;
    min-height: 30px;
    text-align: center;
    border-color: #333;
    border-style: solid;
    border-width: 0 1px 1px 0;
    height: calc(100% - 40px);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 5px;
    word-break: break-word;
}
.informbottom_box:first-child span {
    border-width: 0 1px 1px 1px;
}
.inquiry_button {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 25px;
}
.inquiry_button button {
    width: 80px;
    text-align: center;
    background-color: #0004a0;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    transition: 0.3s;
    border: none;
}
.inquiry_button button:hover {
    background-color: #e30500;
    transition: 0.3s;
}
.promargin10 {
    margin-bottom: 10px;
}
.promargin {
    margin-bottom: 25px;
}
.promargin50 {
    margin-bottom: 50px;
}
.profile_maintitle p {
    margin: 0 0 25px 0;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #0004a0;
}
.profile_title {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    align-content: center;
    flex-wrap: wrap;
}
.profile_title>span {
    display: inline-block;
    width: 100px;
    background-color: #0004a0;
    border-radius: 20px;
    text-align: center;
    padding: 5px 15px;
    color: #fff;
    margin-bottom: 10px;
    margin-right: 10px;
}
.profile_title>p {
    margin: 0;
    line-height: 1.5;
}
/* .profile_title > p a {
    color: #333;
    text-decoration: underline;
    transition: 0.3s;
}
.profile_title > p a:hover {
    color: #0004a0;
    transition: 0.3s;
} */
.process_list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
    text-align: center;
    border-bottom: 1px solid #f3f3f3;
}
.process_list>span {
    display: inline-block;
    width: 33%;
    padding: 10px 15px;
    border-right: 1px solid #f3f3f3;
}
.process_list>p {
    width: 65%;
    margin: 0;
    padding: 10px 15px;
    text-align: left;
}
.process_list:nth-child(1) p {
    text-align: center;
}
.process_list:nth-child(1) {
    border-top: 3px solid #333;
    border-bottom: 3px solid #333;
    font-weight: 600;
    font-size: 18px;
}
.process_box:last-child .process_list:last-child {
    border-bottom: 3px solid #333;
}
.profile_schedule {
    text-align: center;
    display: block;
    overflow-x: auto;
    width: 100%;
}
.skygyy{
    text-align: left;
    width: 85%;
}
.skygyy>ul{
    padding-left: 60px;
}
.profile_schedule::-webkit-scrollbar {
    height: 3px;
}
.profile_schedule>p {
    margin: 0;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    background-color: #1877f2;
    color: #fff;
}
.profile_schedule>p span {
    font-size: 14px;
    font-weight: normal;
    display: block;
    margin-top: 5px;
}
.profile_schedule table {
    width: 100%;
    white-space: nowrap;
}
.profile_schedule td {
    padding: 10px 15px;
    border: 1px solid #333;
}
.profile_schedule tr:first-child td {
    font-weight: 600;
    background-color: #eef6ff;
}
.profile_ul li {
    margin: 0 0 15px 30px;
}
.profile_ul li>p {
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
}
.profile_ul li>span {
    display: inline-block;
    margin: 5px 0 10px 0;
    line-height: 1.8;
}
.profile_ul li>.li_else {
    margin-bottom: 10px;
    display: inline-block;
}
.profile_ul li>.li_else span {
    font-size: 14px;
    color: red;
}
.profile_ul li>.li_else>p {
    margin: 10px 0;
}
.profile_ul li>.li_else>strong {
    color: red;
}
.profile_ul li>.span_else {
    margin-bottom: -5px;
}
.profile_ul li>.li_else.else2 {
    color: #0004a0;
    margin-left: 50px;
    line-height: 1.5;
}
.profile_ul li ul {
    margin-top: 10px;
}
.profile_ul li ul li p {
    font-weight: normal;
}
.ul_list1 {
    list-style: cjk-ideographic;
}
.ul_list2 {
    list-style: disc;
}
.method_intro {
    margin-bottom: 50px;
}
.method_intro p {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 5px;
}
.method_intro span {
    font-size: 16px;
    color: red;
}
.method_box>span {
    background-color: #0004a0;
    padding: 5px 15px;
    border-radius: 20px;
    color: #fff;
    margin-bottom: 10px;
    font-size: 18px;
}
.method_list {
    margin: 35px 0;
}
.method_content {
    margin: 25px 0;
}
.method_content>p {
    font-weight: 600;
}
.method_step {
    font-size: 24px;
    color: #ccc;
    position: relative;
    display: inline-block;
    font-family: emoji;
}
.method_step::before {
    content: '';
    width: 120%;
    height: 5px;
    background-color: #fff;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, 0);
}
.method_step::after {
    content: '';
    width: 120%;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translate(-50%, 0);
}
.method_arrow {
    position: relative;
    margin: 25px 0;
    width: 20px;
    height: 15px;
}
.method_arrow::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #ccc transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.method_arrow::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #ddd transparent transparent transparent;
    position: absolute;
    top: 5px;
    left: 0;
}
.method_notice {
    padding: 20px 15px;
    background-color: #f1f1f1;
}
.method_notice p:nth-child(2) {
    color: red;
    margin-top: 5px;
}
.ibon {
    margin-top: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.ibon>span {
    margin-right: 5px;
}
.ibon a {
    text-decoration: none;
    padding: 10px 15px;
    background-color: #333;
    color: #FFF;
    transition: 0.3s;
    border-radius: 25px;
    margin: 5px 0;
}
.ibon a:hover {
    background-color: #0004a0;
    transition: 0.3s;
}
.ibon a:hover span {
    display: inline-block;
    transform: rotate(360deg);
    transition: 0.3s;
}
.foreign_input {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 100%);
    z-index: 1;
    min-width: 120%;
    box-shadow: 0px 0px 5px 0px #0004a0b5;
    display: none;
}
.foreign_mobile_input {
    width: 100%;
}
.foreign_box::after {
    content: '';
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
    filter: drop-shadow(0px -3px 2px #0003a050);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 100%);
    z-index: 1;
    display: none;
}
.foreign_mobile {
    flex-direction: column;
}
.foreign_mobile_input {
    width: 100%;
    margin-top: 5px;
    border: 1px solid #ccc !important;
    padding: 5px !important;
}
.foreign_box:hover .foreign_input {
    display: block;
}
.foreign_box:hover::after {
    display: block;
}
@media screen and (max-width: 468px) {
    .method_step {
        font-size: 20px;
    }
    .method_step::before {
        bottom: 2px;
    }
    .method_step::after {
        bottom: 6px;
    }
    .method_intro p,
    .method_box>span {
        font-size: 16px;
    }
    .method_intro span,
    .method_notice,
    .method_content>p {
        font-size: 14px;
    }
    .method_intro {
        margin-bottom: 20px;
    }
    .method_list,
    .method_content,
    .method_arrow {
        margin: 15px 0;
    }
}