@charset "utf-8";

/*default setting start*/
* {
    /* outline: 1px solid red !important; */
}

body,
html {
    margin: 0px;
    padding: 0px;
    position: relative;
}


img {
    max-width: 100%;
    border: none;
}

img.full {
    width: 100%;
}

body {
    font-family: PingFang SC, Microsoft JhengHei, "微軟正黑體", arial, "新細明體", sans-serif;
    font-size: 16px;
    color: #000;
    background-color: #fff;
}

body.noscroll,
body.noscrollcert {
    overflow: hidden;
    height: 100%;
    margin: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p {
    font-size: 16px;
    line-height: 24px;
}

.tr-ef {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

ul {
    margin: 0;
    padding: 0;
}

img {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

select {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: none;
}

select::-ms-expand {
    display: none;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
}

a,
a:hover,
a:active,
a:focus {
    color: #4e4e4e;
    outline: 0;
}

a:focus {
    text-decoration: none;
}

button {
    outline: none;
}

.container-fluid {
    padding: 0;
    background-color: transparent;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
}

.bgf {
    background-size: 100%;
    background-repeat: no-repeat;
}

.abs {
    position: absolute;
}

.main_contain {
    overflow: hidden;
}

.hide {
    display: none !important;
}


.open {
    display: block !important;
}

.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.swiper-button-prev,
.swiper-button-next {
    background-image: none;
    width: 100px;
    height: 100px;
    z-index: 15;
    margin: 0;
    transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    outline: none;
}

.swiper-button-prev {
    left: 20px;
    right: auto;
}

.swiper-button-next {
    right: 20px;
    left: auto;
}

.bgc {
    background-color: #f1ebe5;
}

/*default setting end*/

/*---Header---*/
.header {
    width: 100%;
    min-height: 80px;
    background-color: #000;
    position: fixed;
    top: 0;
    z-index: 9;
    border-bottom: 8px solid #c92b52;
    font-family: cwTeXMing;
}

@font-face {
    font-family: cwTeXMing;
    src: local("cwTeXMing"),
        url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
}

.header .container {
    height: 100%;
    position: relative;
    max-width: 1700px;
    margin: 0 auto;
}

.logo {
    position: absolute;
    left: 30px;
    top: 18px;
    z-index: 1;
}

.footer {
    margin-top: 0%;
    padding-top: 23%;
    background-image: url(../images/mq_footer.png);
    position: relative;
}

.footer_link {
    display: block;
    width: 3%;
    height: 13%;
    top: 64%;
    left: 41.5%;
    cursor: pointer;
}

.footer_link:nth-child(2) {
    left: 46%;
}

.footer_link:nth-child(3) {
    left: 50.5%;
}

.footer_link:nth-child(4) {
    left: 54.5%;
}

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    left: 0;
    top: 0;
    z-index: 999999;
}

#loading .text {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -32px;
    text-align: center;
    font-weight: bold;
    line-height: 24px;
}

#loading img {
    max-width: 150px;
    margin-bottom: 5px;
}

/* fixed icon */
.fixed_icon {
    position: fixed;
    right: 4%;
    bottom: 2%;
    background-image: url(../images/mq_fixed_icon.gif);
    width: 10.75%;
    padding-top: 11%;
    z-index: 999;
    cursor: pointer;
}

/*b1*/
.b1 {
    position: relative;
    padding-top: 42%;
    background-image: url(../images/mq_b1_bg.jpg);
}

.b1_light {
    background-image: url(../images/mq_b1_light.png);
    width: 68.68%;
    height: 152.98%;
    left: 32%;
    top: 0;
}

.b1_light.pc-show {
    animation: b1_shine 1s linear 1s infinite alternate;
    -webkit-animation: b1_shine 1s linear 1s infinite alternate;
}


@keyframes b1_shine {
    from {
        left: 32%;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes b1_shine {
    from {
        left: 32%;
    }

    to {
        opacity: 0;
    }
}


.b1_txt_1 {
    top: 19.85%;
    left: 58.12%;
    width: 32.74%;
    height: 39%;
    background-image: url(../images/mq_b1_txt_1.png);
    z-index: 1;
}

.b1_img_1 {
    top: 40.94%;
    left: 57.17%;
    height: 21.71%;
    width: 0;
    background-image: url(../images/mq_b1_img_1.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.b1_img_1.aos-animate {
    width: 29.01%;
}

.b1_img_2 {
    top: 68.24%;
    left: 62.01%;
    width: 22.28%;
    height: 37.84%;
    background-image: url(../images/mq_b1_img_2.png);
    z-index: 3;
}

/*b2*/
.b2 {
    position: relative;
    background-color: #f1ebe5;
}

.b2_block {
    width: 89.6%;
    padding-top: 20.97%;
    margin: -3.15% auto;
    background-color: #fff;
    z-index: 2;
    position: relative;
}

.b2_txt_1 {
    bottom: 7.52%;
    left: 5.57%;
    width: 62.29%;
    height: 19.3%;
    background-image: url(../images/mq_b2_txt_1.png);

}

.b2_swiper {
    width: 100%;
    padding-top: 42.03%;
    position: relative;
    margin-top: -3.15%;
}

.b2_swiper img {
    width: 100%;
}

.b2_swiper .swiper-wrapper {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.b2_swiper .swiper-slide {
    position: relative;
}

.b2_swiper .yt-link::after {
    width: 7%;
    padding-top: 7%;
    background: center no-repeat url(../images/mq_play_icon.png);
    background-size: contain;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    animation: shine 1s linear infinite alternate;
    -webkit-animation: shine 1s linear infinite alternate;
}

@keyframes shine {
    to {
        opacity: 0.1;
    }
}

@-webkit-keyframes shine {
    to {
        opacity: 0.1;
    }
}

/*b3*/
.b3 {
    position: relative;
    width: 88.8%;
    margin: -3.15% auto 3.15%;
    z-index: 1;
    max-width: 1706px;
}

.b3_txt_1 {
    top: 14.68%;
    left: 19.28%;
    width: 34.76%;
    height: 7.86%;
    background-image: url(../images/mq_b3_txt_1.png);

}

.b3_txt_2 {
    top: 20.75%;
    left: 17%;
    width: 55.39%;
    height: 4.82%;
    background-image: url(../images/mq_b3_txt_2.png);

}

.b3_bg {
    margin: auto;
}

.b3_swiper {
    bottom: 10.5%;
    width: calc(36.45% - 1px);
    height: 58.3%;
    left: 44%;
}

.b3_wrap {
    width: 45.6%;
    max-width: 100%;
    position: relative;
}

.b3_item {
    position: absolute;
    right: 0px;
    /* bottom: 30px; */
    /* width: 36.42%;
    height: 57.97%; */
    width: 100%;
    height: 100%;
    background-position: right;
    background-size: auto 100%;
    overflow: hidden;
}

.b3_item div {
    position: absolute;
    width: 37.2%;
    right: 0;
    top: 0;
    overflow: hidden;
    text-align: right;
}

.b3_item_1 {
    background-image: url(../images/mq_b3_swipe_1.png);
}

.b3_item_2 {
    background-image: url(../images/mq_b3_swipe_2.png);
    background-size: 100%;
}

.b3_item_3 {
    background-image: url(../images/mq_b3_swipe_3.png);
}

.b3_swiper.aos-animate .swiper-slide-active img {
    -webkit-animation: zoom 1.5s linear alternate;
    animation: zoom 1.5s linear alternate;
}

.b3_swiper img:hover {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
}

@keyframes zoom {

    50% {
        transform: scale(1.1);
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
    }

    to {
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);

    }
}

@-webkit-keyframes zoom {
    50% {
        transform: scale(1.1);
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
    }

    to {
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);

    }
}

.b3_img_1 {
    top: 32.49%;
    left: 31.09%;
    width: 26.45%;
    height: 33.02%;
    background-image: url(../images/mq_b3_img_1.png);
    z-index: 20;
}

.b3-button-prev {
    left: 12%;
    top: 54%;
}

.b3-button-next {
    right: 12%;
    top: 54%;
}

/*b4*/
.b4 {
    position: relative;
    max-width: 1920px;
    margin: auto;
}

.b4_bg {
    width: 100%;
    padding-top: 131.53%;
    background-image: url(../images/mq_b4_bg.png);
}

.b4_txt_1 {
    top: 2.16%;
    left: 28.9%;
    width: 44.61%;
    height: 4.32%;
    background-image: url(../images/mq_b4_txt_1_0917.png);
}

.b4_txt_2 {
    top: 4.02%;
    left: 25.64%;
    width: 51.87%;
    height: 3.36%;
    background-image: url(../images/mq_b4_txt_2.png);
}

.b4_step {
    width: 88.8%;
    top: 42.8%;
}

.pop_trigger {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
}

.b4_step_2 .pop_trigger {
    padding: 2% 10% 5%;
}

.pop_trigger div {
    flex: 1;
    margin: 3% 2%;
    cursor: pointer;
}

.b4_plus_1 {
    width: 100%;
    background-image: url(../images/mq_b4_plus_1.png);
    height: 6%;
    top: 23.5%;
}

.b4_plus_1::before {
    content: '';
    display: block;
    width: 4%;
    position: absolute;
    height: 100%;
    left: 12%;
    top: 0;
    background-color: #fff;
    opacity: 0;
    animation-name: plus_shine, plus_order;
    animation-duration: 1s, 8s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
}

@keyframes plus_shine {

    to {
        opacity: 0.9;
    }
}

@-webkit-keyframes plus_shine {

    to {
        opacity: 0.9;
    }
}

@keyframes plus_order {

    0%,
    24.9999% {
        left: 12%;
    }

    25%,
    49.9999% {
        left: 38.5%;
    }

    50%,
    74.9999% {
        left: 65.7%;
    }

    75%,
    99.999% {
        left: 94.5%;
    }

    100% {
        left: 12%;
    }
}

@-webkit-keyframes plus_order {

    0%,
    24.9999% {
        left: 12%;
    }

    25%,
    49.9999% {
        left: 38.5%;
    }

    50%,
    74.9999% {
        left: 65.7%;
    }

    75%,
    99.999% {
        left: 94.5%;
    }

    100% {
        left: 12%;
    }
}

.b4_step_2 {
    width: 88.8%;
    margin: -3.15% auto 0;
    position: relative;
}

.b4_plus_2::before {
    content: '';
    display: block;
    width: 4%;
    position: absolute;
    height: 100%;
    left: 29%;
    top: 0;
    background-color: #fff;
    /* border: 1px solid black; */
    opacity: 0;
    animation-name: plus_shine, plus_order2;
    animation-duration: 1s, 6s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
}

.b4_plus_2 {
    width: 100%;
    background-image: url(../images/mq_b4_plus_2.png);
    height: 6%;
    top: 20.5%;
}

@keyframes plus_order2 {

    0%,
    33.329999% {
        left: 29%;
    }

    33.3333%,
    66.6599% {
        left: 52.2%;
    }

    66.7%,
    99.9999% {
        left: 83.2%;
    }

    100% {
        left: 29%;
    }
}

@-webkit-keyframes plus_order2 {

    0%,
    33.329999% {
        left: 29%;
    }

    33.3333%,
    66.6599% {
        left: 52.2%;
    }

    66.7%,
    99.9999% {
        left: 83.2%;
    }

    100% {
        left: 29%;
    }
}

.b4_pop {
    z-index: -1;
    position: fixed;
    opacity: 0;
    width: 70%;
    width: 81%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.b4_pop.show {
    opacity: 1;
    z-index: 1000;
}

.b4_pop .swiper-slide {
    opacity: 0 !important;
}

.b4_pop .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}

.b4_pop_item {
    width: 100%;
    padding-top: 59.34%;
}

.b4_pop_1_swiper,
.b4_pop_2_swiper {
    /* height: 10vh; */
}

.b4_pop1_1 {
    background-image: url(../images/mq_b4_pop1_1.png);
}

.b4_pop1_2 {
    background-image: url(../images/mq_b4_pop1_2.png);
}

.b4_pop1_3 {
    background-image: url(../images/mq_b4_pop1_3_0819.png);
}

.b4_pop1_4 {
    background-image: url(../images/mq_b4_pop1_4.png);
}

.b4_pop2_1 {
    background-image: url(../images/mq_b4_pop2_1.png);
}

.b4_pop2_2 {
    background-image: url(../images/mq_b4_pop2_2.png);
}

.b4_pop2_3 {
    background-image: url(../images/mq_b4_pop2_3.png);
}

.pop_close {
    width: 6%;
    height: 10%;
    top: 7%;
    left: 87%;
    z-index: 10;
    cursor: pointer;
}

.b4-pop-pagination {
    left: 90% !important;
    z-index: 1;
    width: 20px !important;
    height: auto;
    bottom: auto !important;
}

.b4-pop-pagination>span {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 0;
    margin: 0 0 30px !important;
    cursor: pointer;
    background-color: #fff;
    opacity: 1;
}

.b4-pop-pagination>span:last-child {
    margin-bottom: 0px !important;
}

.b4-pop-pagination>span.swiper-pagination-bullet-active {
    background-color: #000 !important;
}

/*b5*/
.b5 {
    position: relative;
    padding-top: 7.88%;
    padding-bottom: 9.45%;
    max-width: 1920px;
    margin: auto;
}

.b5_line {
    background-image: url(../images/mq_b5_line.png);
    width: 100%;
    top: 9.5%;
    padding-top: 9.19%;
    z-index: 5;
}

.b5_line_2 {
    top: 74.5%;
    z-index: 5;
    pointer-events: none;
}

.b5_txt_1 {
    top: 6.19%;
    left: 29.95%;
    width: 28.95%;
    height: 9.44%;
    padding-top: 6.41%;
    background-image: url(../images/mq_b5_txt_1.png);
    z-index: 5;
}

.b5_txt_2 {
    top: 10.44%;
    left: 37.83%;
    width: 25.22%;
    height: 6.19%;
    background-image: url(../images/mq_b5_txt_2.png);
    z-index: 5;
}

.b5_txt_3 {
    top: 6.5%;
    left: 65.69%;
    width: 23.17%;
    height: 6.57%;
    background-image: url(../images/mq_b5_txt_3.png);
    z-index: 5;
}

.b5_txt_4 {
    top: 56.46%;
    left: 8.78%;
    width: 26.33%;
    height: 6.19%;
    background-image: url(../images/mq_b5_txt_4.png);
    z-index: 10;
}

.b5_img_1 {
    top: 6.19%;
    left: 0%;
    width: 46.66%;
    height: 74.71%;
    background-image: url(../images/mq_b5_img_1_0819.png);
    z-index: 5;
}

.b5_cover {
    width: 7.5%;
    height: 2.5%;
    left: 21%;
    top: 18%;
    z-index: 5;
}

.b5_light {
    top: 52.45%;
    left: 27.12%;
    width: 6.41%;
    height: 9.51%;
    background-image: url(../images/mq_b5_light.png);
    z-index: 7;
    animation: shine 1s linear infinite alternate;
    -webkit-animation: shine 1s linear infinite alternate;
}

.b5_swipe_item {
    padding-top: 50%;
}

.b5_swipe_1 {
    background-image: url(../images/mq_b5_swipe_1_0819.png);
}

.b5_swipe_2 {
    background-image: url(../images/mq_b5_swipe_2_0819.png);
}

.b5_swipe_3 {
    background-image: url(../images/mq_b5_swipe_3_0819.png);
}

.b5_swipe_4 {
    background-image: url(../images/mq_b5_swipe_4_0819.png);
}

.b5_swiper .swiper-slide.swiper-slide-active .b5_swipe_item {
    -webkit-animation: b5_zoom 1.5s linear alternate;
    animation: b5_zoom 1.5s linear alternate;
}

@keyframes b5_zoom {

    50% {
        transform: scale(1.02);
        -moz-transform: scale(1.02);
        -webkit-transform: scale(1.02);
        -o-transform: scale(1.02);
    }

    to {
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);

    }
}

@-webkit-keyframes b5_zoom {
    50% {
        transform: scale(1.02);
        -moz-transform: scale(1.02);
        -webkit-transform: scale(1.02);
        -o-transform: scale(1.02);
    }

    to {
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);

    }
}

.b5 .swiper-button-prev,
.b5 .swiper-button-next {
    height: 140px;
    width: 140px;
}

.b5-pagination {
    width: 100%;
    ;
    padding-top: 9%;
}

.b5 .b5-pagination>span {
    width: 11.82%;
    height: 180px;
    position: absolute;
    z-index: 5;
    opacity: 1;
    background-color: #f1ebe5;
    border-radius: 0;
    top: 10%;
    background-size: 100.45%;
    background-position: top;
    transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    background-repeat: no-repeat;
    outline: 0;
}

.b5 .b5-pagination>span:nth-child(1) {
    left: 31.48%;
    background-image: url(../images/mq_b5_lip_1.png);
    background-size: 100.7%;
}

.b5 .b5-pagination>span:nth-child(2) {
    left: 46.4%;
    background-image: url(../images/mq_b5_lip_2.png);
    top: -4%;
}

.b5 .b5-pagination>span:nth-child(3) {
    left: 61.64%;
    background-image: url(../images/mq_b5_lip_3.png);
    top: -21%;
}

.b5 .b5-pagination>span:nth-child(4) {
    left: 76.2%;
    background-image: url(../images/mq_b5_lip_4.png);
    top: -35%;
}

.b5 .swiper-pagination-bullet-active {
    transform: translate(0%, -21%);
    -moz-transform: translate(0%, -21%);
    -webkit-transform: translate(0%, -21%);
    -o-transform: translate(0%, -21%);
}

/*b6*/
.b6 {
    margin: -8% auto 0;
    z-index: 5;
    position: relative;
    max-width: 1706px;
    pointer-events: none;
}

.b6_txt_1 {
    top: 12.28%;
    left: 23.28%;
    width: 48.08%;
    height: 3.12%;
    background-image: url(../images/mq_b6_txt_1.png);
    z-index: 5;
}

.b6_txt_2 {
    top: 14.77%;
    left: 17.87%;
    width: 63.11%;
    height: 1.96%;
    background-image: url(../images/mq_b6_txt_2.png);
    z-index: 5;
}

.b6_bg {
    margin: auto;
    width: 88.8%;
    padding-top: 126.67%;
    background-image: url(../images/mq_b6_bg_0821.png);
}

.b6_yt_swiper {
    /* top: 23.85%; */
    top: 23.3%;
    left: 13.77%;
    width: 35.89%;
    height: 21.64%;
    cursor: pointer;
    pointer-events: all;
}

.b6_cover {
    background-color: #f0eae4;
    /* top: 34.4%; */
    top: 33.8%;
    left: 12.3%;
    width: 29.89%;
    height: 11.1%;
}

.b6_black {
    background-color: #000;
    /* top: 45.3%; */
    top: 44.8%;
    left: 12.3%;
    width: 29.6%;
    height: 1.4%;
    z-index: 1;
    /* width: 0; */
}


.b6_black.run {
    /* animation: bg_run 3.3s infinite ease-out;
    -webkit-animation: bg_run 3.3s infinite ease-out; */
}

@keyframes bg_run {
    from {
        width: 0;
    }

    80%,
    to {
        width: 29.6%;
    }
}

@-webkit-keyframes bg_run {
    from {
        width: 0;
    }

    80%,
    to {
        width: 29.6%;
    }
}


.b6_yt {
    height: 100%;
    width: 100%;
    pointer-events: all;
}

.b6_yt_1 {
    background-image: url(../images/mq_b6_yt_1.png);
}

.b6_yt_2 {
    background-image: url(../images/mq_b6_yt_2.png);
}

.b6_yt_3 {
    background-image: url(../images/mq_b6_yt_3.png);
}

.b6_yt_4 {
    background-image: url(../images/mq_b6_yt_4.png);
}

.b6_yt_5 {
    background-image: url(../images/mq_b6_yt_5_0821.png);
}

.b6-yt-pagination {
    overflow: auto;
    top: 23.5%;
    left: 54.6%;
    width: 33.47%;
    height: 25.35%;
    display: flex;
    flex-wrap: wrap;
    padding: 2.19% 1.7%;
    pointer-events: all;
}

.b6-yt-pagination::-webkit-scrollbar {
    width: 9px;
    background-color: #fff;
}

.b6-yt-pagination::-webkit-scrollbar-track {
    background-color: #fff;
    margin: 8%;
}

.b6-yt-pagination::-webkit-scrollbar-thumb {
    border-left: 9px solid #f0eae4;
    background-color: #fff;
    border-radius: 9px;
}

.b6-yt-pagination>span {
    width: 100%;
    padding-top: 26%;
    height: 0;
    border-radius: 0;
    background-color: #fff;
    background-position: left;
    background-repeat: no-repeat;
    opacity: 1;
    background-size: contain;
    outline: 0;
}

.b6-yt-pagination>span+span {
    margin-top: 8.1%;
}

.b6-yt-pagination>span:nth-child(1) {
    background-image: url(../images/mq_b6_yt_list_1.png);
}

.b6-yt-pagination>span:nth-child(2) {
    background-image: url(../images/mq_b6_yt_list_2.png);
}

.b6-yt-pagination>span:nth-child(3) {
    background-image: url(../images/mq_b6_yt_list_3.png);
}

.b6-yt-pagination>span:nth-child(4) {
    background-image: url(../images/mq_b6_yt_list_4.png);
}

.b6-yt-pagination>span:nth-child(5) {
    background-image: url(../images/mq_b6_yt_list_5_0821.png);
}


.b6-yt-pagination>span.swiper-pagination-bullet-active {
    order: -5;
}

.b6-yt-pagination>span:nth-child(n+2).swiper-pagination-bullet-active {
    margin: 0 0 8.1%;
}

.b6_ig_bg {
    padding-top: 39.82%;
    background-image: url(../images/mq_b6_ig_bg.png);
    width: 88.8%;
    max-width: 1706px;
    top: 61.35%;
    left: 50%;
    transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
}

.b6_ig_swiper {
    height: 28.5%;
    background-image: url(../images/mq_b6_ig_bg.png);
    width: 88.8%;
    max-width: 1706px;
    top: 61.35%;
    right: 0;
    left: 0;
    pointer-events: all;
}

.b6_ig_wrap {
    padding-top: 1%;
}

.b6_ig_swiper .swiper-slide {
    display: flex;
    flex-wrap: wrap;
}

.b6_ig_swiper a {
    /* width: 38.5%; */
    width: 34.5%;
    height: 43%;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.b6_ig_swiper a:hover::after {
    position: absolute;
    background-image: url(../images/mq_b6_ig_hover.png);
    background-color: rgba(255, 246, 237, .75);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 33.5%;
    display: block;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.b6_ig_1 {
    justify-content: flex-end;
}

.b6_ig_1 a {
    margin: 0 2.2% 0 2.8%;
}

.b6_ig_1 a:nth-child(1) {
    visibility: hidden;
}

.b6_ig_1 a:nth-child(n+3),
.b6_ig_2 a:nth-child(3) {
    margin-top: 3.5%;
}

.b6_ig_2 a {
    margin: 0 3% 0 2%;
}

.b6_ig_swiper a img {
    width: 100%;
}

.b6 .official {
    margin-left: 2.2%;
    margin-top: 3%;
}

.b6-ig-pagination {
    display: none;
}

/* b7 */
.b7 {
    position: relative;
    padding-top: 60.06%;

}

.b7 a {
    cursor: pointer;
    display: block;
    z-index: 5;
}

.b7_hint_arrow {
    background-image: url(../images/mq_b7_drag.png);
    top: 0;
    left: 16.87%;
    width: 65.83%;
    padding-top: 47.65%;
}

.b7_hint_finger {
    background-image: url(../images/mq_b7_finger.png);
    top: 34.33%;
    left: 61.87%;
    width: 6.74%;
    padding-top: 6.6%;
    animation: drag 2s infinite;
}

@keyframes drag {
    from {
        left: 61.87%;
    }

    to {
        left: 28%;
    }
}

.b7_item+span {
    display: block;
    position: absolute;
    padding-top: 48%;
    width: 52%;
    top: 0;
    left: 0px;
    overflow: hidden;
}

.b7_item+span::before {
    position: absolute;
    display: block;
    content: "";
    right: -120%;
    bottom: 110%;
    background-image: url(../images/mq_b7_light.png);
    background-size: 120% 110%;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -o-transition: all 2s linear;
    width: 110%;
    height: 110%;
}

.b7_item+span.shine::before {
    right: 120%;
    bottom: -110%;
}

.b7_txt_1 {
    top: 9.77%;
    left: 10.72%;
    width: 76.88%;
    height: 7.32%;
    background-image: url(../images/mq_b7_txt_1.png);
}

.b7_txt_2 {
    top: 15.33%;
    left: 17.66%;
    width: 56.44%;
    height: 4.59%;
    background-image: url(../images/mq_b7_txt_2.png);
}

.b7_anchor {
    top: 23.05%;
}

.b7_img {
    top: 23.05%;
    width: 77.19%;
    padding-top: 37.05%;
    left: 50%;
    transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    display: none;
}

.b7_intro {
    display: block;
    background-image: url(../images/mq_b7_intro.jpg);
}

.b7_intro a {
    width: 43%;
    left: 55%;
    padding-top: 7%;
    top: 83%;
}

.b7_choose {
    background-image: url(../images/mq_b7_choose.jpg);
}

.b7_choose a {
    width: 43%;
    left: 55%;
    padding-top: 15%;
    top: 24%;
}

.b7_choose a:hover,
.b7_choose a:active {
    border: 1px solid #a6a29e;
}

#b7_choose_b {
    top: 61%;
}

.b7_a_1 {
    background-image: url(../images/mq_b7_a_1.jpg);
}

.b7_a_1 a {
    background-image: url(../images/mq_b7_a_1_item.png);
    top: 25.33%;
    left: 68.87%;
    width: 9.05%;
    padding-top: 22.53%;
}

.b7_a_2 {
    background-image: url(../images/mq_b7_a_2.jpg);
}

.b7_a_2 a {
    background-image: url(../images/mq_b7_a_2_item.png);
    top: 26.33%;
    left: 64.1%;
    width: 24.57%;
    padding-top: 19.88%;
}

.b7_a_finish {
    background-image: url(../images/mq_b7_a_finish.jpg);
}

.b7_finish {
    width: 43%;
    left: 55%;
    padding-top: 7%;
    top: 83%;
}

.b7_b_1 {
    background-image: url(../images/mq_b7_b_1.jpg);
}

.b7_b_1 a,
.b7_b_3 a {
    background-image: url(../images/mq_b7_b_1_item.png);
    top: 20.33%;
    left: 72%;
    width: 6.81%;
    padding-top: 22.26%;
}

.b7_b_2 {
    background-image: url(../images/mq_b7_b_2_0822.jpg);
}

.b7_b_2 a {
    background-image: url(../images/mq_b7_a_2_item.png);
    top: 26.33%;
    left: 64.1%;
    width: 24.57%;
    padding-top: 19.88%;
}

.b7_b_3 {
    background-image: url(../images/mq_b7_b_3.jpg);
}

.b7_b_finish {
    background-image: url(../images/mq_b7_b_finish.jpg);
}



/* b8 */
.b8 {
    display: none;
}

.b8 .title {
    width: 47.71%;
    margin: 0 auto 40px;
    text-align: center;
}

.counter_choose {
    position: relative;
}

#map_loading {
    position: absolute;
    width: 15.5%;
    height: 48%;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.7);
    left: 26.2%;
    top: -7%;
}

.counter_select {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* width: 1300px; */
    /* min-width: 1200px; */
    list-style: none;
    margin: 0 auto 30px;
}

.counter_select li {
    float: left;
    /* height: 70px; */
    border: 1px solid #494645;
    /* line-height: 70px; */
    text-align: center;
    margin: 0 0 0 15px;
    font-weight: bold;
    font-size: 1.85vw;
    color: #000;
    outline: none;
    border-radius: 40px;
}

li.counter {
    border: 0;
    margin: 0 10px 0 0px;
    font-size: 2.14vw;
}

.find_counter {
    width: 18.91%;
    cursor: pointer;
}

.find_counter img {
    width: 7%;
    margin-right: 15px;
    margin-top: -4px;
    vertical-align: middle;
}

.find_counter span {
    letter-spacing: 4px;
    display: inline-block;
    margin-top: 2px;
}


.select {
    width: 360px;
    width: 18.91%;
}

.counter_select select {
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 0 70px 0 60px;
    border: 0;
    outline: none;
    background: url(../images/mq_form_select_area.png) right 18% center no-repeat;
    background-size: 18px;
    letter-spacing: 4px;
}

.counter_select select option {
    font-size: 1.85vw;
}

.tips {
    width: 570px;
    width: 25.95%;
    min-width: 400px;
    margin: 40px auto;
}

.tips img {
    display: block;
}

#map_choose_container {
    display: none;
}

.map {
    max-width: 1200px;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.map>div {
    float: left;
}

.google_map {
    width: 65%;
    height: 950px;
    background: #ccc;
    border: 2px solid #9d9d9d;
    border-right-width: 0;
}

.counter_list {
    width: 35%;
    height: 950px;
    border: 2px solid #9d9d9d;
}

.list_title {
    width: 100%;
    font-size: 24px;
    background-color: #9d9d9d;
    text-align: center;
    padding: 19px 15px;
    font-weight: bold;
    color: #000;
    position: relative;
}

.counter_ul {
    height: 950px;
    overflow-y: auto;
}

.counter_ul::-webkit-scrollbar {
    width: 5px;
    border-left: 5px solid #9d9d9e;
}

.counter_ul::-webkit-scrollbar-track {
    background-color: #fff;
}

.counter_ul::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-left: 5px solid #707070;
}

.counter_ul li {
    padding: 0 35px;
}

.counter_ul label {
    position: relative;
    display: block;
    padding: 40px 0 25px 77px;
    border-bottom: 1px solid #c9c9c9;
    cursor: pointer;
}

.counter_ul input[type=radio] {
    display: none;
}

.counter_ul label span {
    position: absolute;
    width: 35px;
    height: 35px;
    border: 2px solid #bfbfbf;
    left: 0;
    top: 44px;
}

.counter_ul input[type=radio]:checked+label span {
    background: url(../images/mq_check_icon.png) center center no-repeat;
    background-size: 80%;
}

.c_name {
    margin-bottom: 10px;
    color: #000;
}

.c_phone,
.c_address,
.s_tel,
.s_addr {
    position: relative;
    padding-left: 34px;
    font-size: 14px;
    margin-bottom: 3px;
    color: #000;
}

.c_name {
    font-size: 22px;
    font-weight: bold;
}

.c_address {
    margin-bottom: 12px;
}

.s_tel,
.s_addr {
    font-size: 1.15vw;
}

.s_tel {
    margin-right: 20px;
}

.c_phone:before,
.c_address:before,
.s_tel:before,
.s_addr:before {
    content: '';
    width: 13px;
    height: 20px;
    position: absolute;
    left: 4px;
    top: 3px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.s_tel:before,
.s_addr:before {
    width: 20px;
    height: 28px;
}

.c_phone:before,
.s_tel:before {
    background-image: url(../images/mq_phone_icon.png);
}

.s_tel:before {
    background-image: url(../images/mq_phone_icon.png);
}

.c_address:before {
    background-image: url(../images/mq_location_icon.png);
}

.s_addr:before {
    background-image: url(../images/mq_location_icon.png);
}

.counter_ok {
    width: 450px;
    margin: 0 auto 50px;
    cursor: pointer;
}

.counter_ok.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
}

.form_page {
    position: relative;
    display: none;
    margin: 0 0 30px;
}

.form_header,
.form_inner,
.success-page {
    max-width: 790px;
    margin: 0 auto;
    width: 50%;
}

.s_title {
    font-size: 1.7vw;
    font-weight: bold;
    margin-bottom: 14px;
}

.input_row {
    position: relative;
    max-width: 790px;
    padding-left: 155px;
    margin-bottom: 15px;
}

.input_row span {
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.7vw;
    line-height: 60px;
}

.success-page .input_row span {
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 24px;
    line-height: 35px;
}

.form_body,
.success-page {
    padding-top: 25px;
}

.form-input {
    width: 100%;
    display: block;
    border: 2px solid #707070;
    padding: 5px 15px;
    font-size: 1.4vw;
    color: #1e1e1e;
    background-color: transparent;
    outline: none;
    height: 60px;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    opacity: 0.4;
}

::-moz-placeholder {
    /* Firefox 19+ */
    opacity: 0.4;
}

:-ms-input-placeholder {
    /* IE 10+ */
    opacity: 0.4;
}

:-moz-placeholder {
    /* Firefox 18- */
    opacity: 0.4;
}

.checkbuy .star {
    margin-right: 5px;
    font-size: 32px;
}

.form-checkbox-input {
    max-width: 790px;
    margin: 45px auto 0px;
    font-size: 24px;
}

.form-checkbox-input label {
    padding-left: 30px;
    position: relative;
    font-weight: bold;
    cursor: pointer;
    margin: 0 20px 0 0;
    color: #000;
}

.checkbox-label a {
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid #707070;
}

.checkbox-label:before {
    content: '';
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    left: 0px;
    top: 5px;
    /* background: #fff; */
    border: 2px solid #000;
}

.form-checkbox-input input:checked+.checkbox-label:after {
    content: '';
    display: block;
    position: absolute;
    left: 4px;
    top: 8px;
    color: #d8b658;
    width: 16px;
    height: 20px;
    background-image: url(../images/mq_check_icon.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.form-checkbox-input input:checked+.checkbox-label.check_gray:after {
    background-image: url(../images/mq_check_icon_gray.png);
}

.checkbuy {
    font-weight: bold;
    margin-top: 25px;
}

.checkbuy span {
    margin-right: 31px;
}

.notice {
    font-size: 14px;
    color: #e94686;
}

.send-btn,
.back-btn {
    /* width: 490px; */
    width: 25.74%;
    min-width: 400px;
    cursor: pointer;
    border: none;
    padding: 0;
    background-color: transparent;
}

.form-btn-box {
    /* width: 990px; */
    margin: 30px auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.back-btn {
    margin-right: 10px;
}

.is-end {
    color: #000;
    text-align: center;
    font-size: 14px;
    padding: 10px 15px;
}

.d_info {
    min-height: 35px;
    font-size: 20px;
    line-height: 35px;
    padding-left: 5px
}

.notice_content {
    width: 62.5%;
    padding-top: 26%;
    background-image: url(../images/mq_notice.png);
    margin: 3% auto 2%;
    display: none;
}

.pop-up {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    overflow: auto;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
}

.pop-window {
    width: 31%;
    max-width: 768px;
    height: auto;
    position: relative;
    margin: 0 auto;
    top: 5%;
}

.pop-container {
    padding-top: 64%;
    position: relative;
    margin-bottom: 5%;
}

.pop-container p {
    min-height: 72px;
    margin-bottom: 34px;
}

.pop-close {
    width: 5%;
    padding-top: 5%;
    position: absolute;
    right: 17px;
    top: 18px;
    cursor: pointer;
}

.pop-close:before,
.pop-close:after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #000;
    left: 0;
    top: 50%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.pop-close:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.pop-success {
    font-size: 28px;
    margin: 40px 0 25px;
}

.pop-sel {
    width: 64.4%;
    position: absolute;
    top: 85.5%;
    left: 26.3%;
    padding-top: 7.3%;
}

.pop-sel select {
    width: 37%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    outline: 0;
    padding-left: 5%;
    font-size: 18px;
    line-height: 100%;
    color: #c2c2c2;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

.pop-sel select option {
    color: #000;
}

.resend-btn,
.line-cert {
    cursor: pointer;
    border: none;
    padding: 0;
    background-color: transparent;
    outline: none;
    margin: 0;
    position: absolute;
}

.resend-btn:hover,
.resend-btn:focus {
    outline: 0 !important;
}

.pop-up.limited .pop-container {
    background-image: url(../images/mq_thx.jpg);
    padding-top: 170%;
}

.pop-up.limited .pop-close:before,
.pop-up.limited .pop-close:after {
    background: none;
}

.pop-up.limited .resend-btn {
    width: 88%;
    padding-top: 9%;
    top: 55.2%;
    left: 5.8%;
}

.pop-up.limited .line-cert {
    width: 65%;
    padding-top: 9%;
    top: 91.3%;
    left: 25.8%;
}

#month {
    width: 31%;
    left: 38%;
}

#day {
    width: 31%;
    left: 69%;
}


#target-1 {
    position: absolute;
    top: 23.5%;
}

@media (min-width:1921px) {
    .counter_select li {
        font-size: 35px;
    }

    li.counter {
        font-size: 40px;
    }
}

@media (min-width:769px) {

    body,
    html {
        min-width: 1200px;
    }

    body {
        padding-top: 80px;
    }

    .container-fluid {
        min-width: 1300px;
    }

    .m-show {
        display: none !important;
    }

    /*---Header---*/
    .overlay {
        max-width: 1700px;
        padding: 0 0 0 30px;
        margin: 0 auto;
    }

    .menu-nav {
        text-align: right;
    }

    .menu-nav ul {
        padding-top: 26px;
        padding-right: 30px;
        display: inline-block;
    }

    .menu-nav li {
        float: left;
        margin: 0 0 0 30px;
        font-size: 18px;
    }

    .menu-nav a {
        color: #fff;
        text-decoration: none;
    }

    .counter_select li {
        padding: .45% 0;
    }
}

@media (max-width:1366px) {
    /* .counter_select li {
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
    }

    li.counter {
        border: 0;
        margin: 0 10px 0 0px;
    } */

    .counter_select select {
        padding: 0 66px 0 53px;
    }

    .s_title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 14px;
    }

    .s_tel,
    .s_addr {
        font-size: 18px;
    }

    .s_tel:before,
    .s_addr:before {
        width: 18px;
        height: 28px;
    }

    .input_row span {
        font-size: 24px;
    }

    .form-checkbox-input,
    .form-input {
        font-size: 22px;
    }

    .form-input {
        height: 50px;
        padding: 3px 15px;
    }

    .input_row span {
        line-height: 50px;
    }

    .input_row {
        padding-left: 130px;
    }

    .checkbuy .star {
        font-size: 32px;
    }
}

@media (max-width:1299px) {
    .container-fluid {
        min-width: auto;
    }
}

@media (min-width:769px) and (max-width:1200px) {
    .counter_select li {
        font-size: 22px;
        /* height: 60px;
        line-height: 60px; */
    }


    li.counter {
        font-size: 24px;
    }

    .find_counter span {
        margin-top: 0px;
    }

    /* .header {
        min-width: 0;
    }

    .menu-nav ul {
        padding-right: 0;
    }

    .menu-nav li {
        margin: 0 15px;
    }

    .logo {
        max-width: 170px;
        left: 20px;
    } */
}

@media (max-width:1200px) {
    body {
        padding-top: 63px;
    }

    .menu-item img.pc-show {
        display: none !important;
    }

    .menu-item img.m-show {
        display: block !important;
    }

    .container-half {
        float: none !important;
        margin-left: auto;
        margin-right: auto;
    }

    /*---Header---*/
    .header-menu {
        width: 35px;
        height: auto;
        padding-top: 28px;
        position: absolute;
        top: 24px;
        right: 20px;
        z-index: 999;
        opacity: 1;
        cursor: pointer;
    }

    .header-menu span {
        display: block;
        position: absolute;
        height: 1px;
        width: 100%;
        background: #fff;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    .header-menu span:nth-child(1) {
        top: 0px;
    }

    .header-menu span:nth-child(2) {
        top: 50%;
    }

    .header-menu span:nth-child(3) {
        top: 97.68%;
    }

    .header-menu.open span:nth-child(1) {
        top: 50%;
        background: #000;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .header-menu.open span:nth-child(2) {
        width: 0%;
        left: 50%;
        opacity: 0;
    }

    .header-menu.open span:nth-child(3) {
        top: 50%;
        background: #000;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .overlay-hugeinc {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
        transition: opacity 0.5s, visibility 0s 0.5s;
    }

    .overlay-hugeinc.open {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }

    .overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(255, 255, 255, 0.88);
    }

    .overlay nav {
        height: 70%;
        font-size: 34px;
    }

    .overlay-hugeinc nav {
        -webkit-perspective: 1200px;
        perspective: 1200px;
    }

    .overlay nav {
        text-align: center;
        position: relative;
        top: 50%;
        height: 75%;
        font-size: 54px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .overlay-hugeinc nav ul {
        opacity: 0.4;
        -webkit-transform: translateY(-25%) rotateX(35deg);
        transform: translateY(-25%) rotateX(35deg);
        -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
        transition: transform 0.5s, opacity 0.5s;
    }

    .overlay-hugeinc.open nav ul {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    .overlay-hugeinc.close nav ul {
        -webkit-transform: translateY(25%) rotateX(-35deg);
        transform: translateY(25%) rotateX(-35deg);
    }

    .overlay ul {
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0 auto;
        display: inline-block;
        height: 100%;
        position: relative;
    }

    .overlay ul li {
        min-height: 34px;
    }

    .overlay ul li {
        display: block;
        height: 20%;
        height: calc(100% / 6);
        /* min-height: 63px; */
    }

    .overlay ul li a {
        /* display: block; */
        display: flex;
        justify-content: center;
        height: 100%;
        font-size: 4vw;
        font-weight: normal;
        color: #000;
        text-align: center;
        text-decoration: none;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
    }

    .overlay ul li a img {
        align-self: center;
    }

    .overlay ul li a:hover {
        text-decoration: none;
    }

    .menu-nav li {
        float: none;
        margin: 0 0 0 0px;
        font-size: 20px;
    }

    .overlay {
        padding: 0;
    }

    .header {
        width: 100%;
        z-index: 999;
        top: 0;
        min-width: 100%;
        min-height: 0;
        border-bottom: 6px solid #da004e;
    }

    .mobile-header {
        position: relative;
        z-index: 999;
        padding: 18px 0 12px;
    }

    .logo {
        width: 40%;
        max-width: 194px;
        display: block;
        left: 15px;
        top: 15px;
        position: static;
        margin-left: 5px;
    }
}

@media (max-width:1440px) and (min-width:1201px) {
    .menu-item img {
        height: 17px;
    }
}

@media (max-width:768px) {

    .pc-show {
        display: none !important;
    }

    .m-show {
        display: block !important;
    }

    .container-half {
        float: none !important;
        margin-left: auto;
        margin-right: auto;
    }

    .footer {
        padding-top: 43%;
        background-image: url(../images/mq_footer_mb.png);
        margin-top: 5%;
    }

    .footer_link {
        display: block;
        width: 12%;
        height: 27%;
        top: 42%;
        left: 14.5%;
        cursor: pointer;
    }

    .footer_link:nth-child(2) {
        left: 34%;
    }

    .footer_link:nth-child(3) {
        left: 53.5%;
    }

    .footer_link:nth-child(4) {
        left: 74%;
    }

    .custom-swipe .swiper-pagination-bullet {
        background: #000;
    }

    .custom-swipe .swiper-pagination-bullet-active {
        background: #db0050;
    }

    .swiper-button-prev {
        left: 0px;
    }

    .swiper-button-next {
        right: 0px;
    }

    /* fixed icon */
    .fixed_icon {
        right: 4%;
        bottom: 2%;
        width: 23.75%;
        padding-top: 24%;
    }

    /*b1*/
    .b1 {
        padding-top: 142.32%;
        background-image: url(../images/mq_b1_bg_mb.jpg);
    }

    .b1_light {
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-image: url(../images/mq_b1_light_mb.png);
    }

    .b1_light.aos-animate {
        left: 100%;
    }

    .b1_txt_1 {
        top: 54.89%;
        left: 9.77%;
        width: 81.12%;
        height: 25.62%;
        background-image: url(../images/mq_b1_txt_1_mb.png);
    }

    .b1_img_1 {
        top: 64.47%;
        left: 9.11%;
        height: 15.35%;
        width: 0;
    }

    .b1_img_1.aos-animate {
        width: 71.88%;
    }

    .b1_img_2 {
        top: 83.62%;
        left: 4.82%;
        width: 57.68%;
        height: 28.82%;
        background-image: url(../images/mq_b1_img_2_mb.png);
    }

    /*b2*/

    /*b2*/
    .b2 {
        /* padding-top: 66.93%; */
    }

    .b2_block {
        width: 89.6%;
        padding-top: 66.93%;
        margin: -8.15% auto;
    }

    .b2_txt_1 {
        top: 62.26%;
        left: 8.07%;
        width: 77.73%;
        height: 30.74%;
        background-image: url(../images/mq_b2_txt_1_mb.png);
    }

    .b2_swiper {
        padding-top: 73.83%;
        position: relative;
    }

    .b2_swiper .yt-link::after {
        width: 15.63%;
        padding-top: 15.63%;
    }

    /*b3*/
    .b3 {
        width: 94%;
        margin: 0 auto;
    }

    .b3_txt_1 {
        top: 11.49%;
        left: 9.75%;
        width: 59.89%;
        height: 5.85%;
        background-image: url(../images/mq_b3_txt_1_mb.png);

    }

    .b3_txt_2 {
        top: 15.21%;
        left: -3.2%;
        width: 100.42%;
        height: 4.57%;
        background-image: url(../images/mq_b3_txt_2_mb.png);
    }

    .b3_swiper {
        top: 31.49%;
        right: 5.96%;
        width: 84.9%;
        height: 65%;
        bottom: auto;
        left: auto;
    }

    .b3_wrap {
        width: 45.6%;
        max-width: 100%;
        position: relative;
    }

    .b3_img {
        position: absolute;
        right: 0px;
        bottom: 30px;
    }

    .b3_item {
        background-size: 90% auto;
    }

    .b3_item div {
        width: 36.5%;
        top: 6%;
        overflow: hidden;
    }

    .b3_item_1 {
        background-image: url(../images/mq_b3_swipe_1_mb.png);
    }

    .b3_item_2 {
        background-image: url(../images/mq_b3_swipe_2_mb.png);
        background-size: 100%;
    }

    .b3_item_3 {
        background-image: url(../images/mq_b3_swipe_3_mb.png);
    }

    .b3_item_2 div,
    .b3_item_3 div {
        width: 37.3%;
        top: 0%;
    }

    .b3_img_1 {
        top: 29.26%;
        left: 11.08%;
        width: 47.09%;
        height: 36.17%;
    }

    .b3-button-prev {
        left: -3%;
        top: 45%;
    }

    .b3-button-next {
        right: -3%;
        top: 45%;
    }

    /*b4*/
    .b4 {}

    .b4_bg {
        padding-top: 343.75%;
        background-image: url(../images/mq_b4_bg_mb.jpg);
    }

    .b4_txt_1 {
        top: 3.8%;
        left: 8.2%;
        width: 80.47%;
        height: 1.67%;
        background-image: url(../images/mq_b4_txt_1_mb_0917.png);
    }

    .b4_txt_2 {
        top: 5.02%;
        left: 0%;
        width: 95.31%;
        height: 1.34%;
        background-image: url(../images/mq_b4_txt_2_mb.png);
    }

    .b4_step {
        width: 94.27%;
        top: 46.1%;
        background-image: url(../images/mq_b4_step_bg_mb.jpg);
    }

    .b4-step1-prev,
    .b4-step2-prev {
        left: -3%;
        top: 48%;
        width: 60px;
    }

    .b4-step1-next,
    .b4-step2-next {
        right: -3%;
        top: 48%;
        width: 60px;
    }

    .b4_step_2 {
        width: 94.27%;
        margin: -6.5% auto 0;
        background-image: url(../images/mq_b4_step2_bg_mb.jpg);

    }

    .pop_trigger {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: flex;
        z-index: 5;
    }

    .b4_step_2 .pop_trigger {
        padding: 0;
    }

    .b4_step_2 .trigger_3 {
        margin: 10% 20%;
    }

    .pop_trigger div {
        flex: 1;
        margin: 15% 2%;
        cursor: pointer;
    }

    div.trigger_2 {
        flex: 1.5;
    }

    .b4_pop {
        min-width: auto;
        width: 100%;
        /* top: 100px;
        transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%); */
    }

    .b4_pop_item {
        padding-top: 177.34%;
    }

    .b4_pop1_1 {
        background-image: url(../images/mq_b4_pop1_1_mb.png);
    }

    .b4_pop1_2 {
        background-image: url(../images/mq_b4_pop1_2_mb.png);
    }

    .b4_pop1_3 {
        background-image: url(../images/mq_b4_pop1_3_mb_0819.png);
    }

    .b4_pop1_4 {
        background-image: url(../images/mq_b4_pop1_4_mb.png);
    }

    .b4_pop2_1 {
        background-image: url(../images/mq_b4_pop2_1_mb.png);
    }

    .b4_pop2_2 {
        background-image: url(../images/mq_b4_pop2_2_mb.png);
    }

    .b4_pop2_3 {
        background-image: url(../images/mq_b4_pop2_3_mb.png);
    }

    .pop_close {
        width: 10%;
        height: 7%;
        top: 4%;
        left: 85%;
    }

    .b4-pop-pagination {
        left: 90% !important;
        z-index: 1;
        width: 20px !important;
        height: auto;
        bottom: auto !important;
    }

    .b4-pop-pagination>span {
        width: 20px;
        height: 20px;
        display: block;
        border-radius: 0;
        margin: 0 0 30px !important;
        cursor: pointer;
        background-color: #fff;
        opacity: 1;
    }

    .b4-pop-pagination>span:last-child {
        margin-bottom: 0px !important;
    }

    .b4-pop-pagination>span.swiper-pagination-bullet-active {
        background-color: #000 !important;
    }

    .b4_plus {
        background-image: none;
    }

    .b4_plus_1::before {
        width: 6%;
        left: 29%;
        animation-name: plus_shine, plus_order;
        animation-duration: 1s, 4s;
        animation-iteration-count: infinite, infinite;
        animation-direction: alternate, normal;
    }

    @keyframes plus_order {

        25%,
        49.9999% {
            left: 29%;
        }

        50%,
        99.999% {
            left: 74%;
        }

        100% {
            left: 29%;
        }
    }

    @-webkit-keyframes plus_order {

        25%,
        49.9999% {
            left: 29%;
        }

        50%,
        99.999% {
            left: 74%;
        }

        100% {
            left: 29%;
        }
    }

    .b4_plus_1_2::before {
        animation-name: plus_shine, plus_order1_2;
        animation-duration: 1s, 4s;
        animation-iteration-count: infinite, infinite;
        animation-direction: alternate, normal;
    }

    @keyframes plus_order1_2 {

        25%,
        49.9999% {
            left: 29%;
        }

        50%,
        99.999% {
            left: 85%;
        }

        100% {
            left: 29%;
        }
    }

    @-webkit-keyframes plus_order1_2 {

        25%,
        49.9999% {
            left: 29%;
        }

        50%,
        99.999% {
            left: 85%;
        }

        100% {
            left: 29%;
        }
    }

    .b4_plus_2_1::before {
        animation-name: plus_shine, plus_order2_1;
        animation-duration: 1s, 4s;
        animation-iteration-count: infinite, infinite;
        animation-direction: alternate, normal;
        left: 36%;
    }

    @keyframes plus_order2_1 {

        25%,
        49.9999% {
            left: 36%;
        }

        50%,
        99.999% {
            left: 74.5%;
        }

        100% {
            left: 36%;
        }
    }

    @-webkit-keyframes plus_order2_1 {

        25%,
        49.9999% {
            left: 29%;
        }

        50%,
        99.999% {
            left: 74.5%;
        }

        100% {
            left: 29%;
        }
    }

    .b4_plus_2_2::before {
        animation-name: plus_shine;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        left: 62%;
    }


    /*b5*/
    .b5 {
        padding-top: 34.76%;
        padding-bottom: 23.04%;
    }

    .b5_line {
        top: 11.9%;
    }

    .b5_line_2 {
        top: 90.3%;
    }

    .b5_txt_1 {
        top: 2.52%;
        left: 7.81%;
        width: 52.34%;
        padding-top: 11.72%;
        background-image: url(../images/mq_b5_txt_1_mb.png);

    }

    .b5_txt_2 {
        top: 3.28%;
        left: 26.95%;
        width: 63.28%;
        padding-top: 10.55%;
        background-image: url(../images/mq_b5_txt_2_mb.png);
    }

    .b5_txt_3 {
        top: 6.08%;
        left: 17.58%;
        width: 71.74%;
        padding-top: 14.84%;
        background-image: url(../images/mq_b5_txt_3_mb.png);
    }

    .b5_txt_4 {
        top: 41.7%;
        left: 11.97%;
        width: 65.1%;
        height: 6.19%;
    }

    .b5_img_1 {
        top: 10.12%;
        left: 0%;
        width: 100%;
        height: 39.21%;
        background-image: url(../images/mq_b5_img_1_mb_0819.png);
    }

    .b5_cover {
        width: 17.05%;
        height: 1%;
        left: 62%;
        top: 12.5%;
    }

    .b5_light {
        top: 39.45%;
        left: 57.12%;
        width: 15.02%;
        height: 9.51%;
    }

    .b5_bg {
        padding-top: 102.2%;
        background-image: url(../images/mq_b5_bg_mb.jpg);
    }

    .b5_swipe_item {
        padding-top: 114%;
    }

    .b5_swipe_1 {
        background-image: url(../images/mq_b5_swipe_1_mb_0821.jpg);
    }

    .b5_swipe_2 {
        background-image: url(../images/mq_b5_swipe_2_mb_0821.jpg);
    }

    .b5_swipe_3 {
        background-image: url(../images/mq_b5_swipe_3_mb_0821.jpg);
    }

    .b5_swipe_4 {
        background-image: url(../images/mq_b5_swipe_4_mb_0821.jpg);
    }

    .b5 .swiper-button-prev,
    .b5 .swiper-button-next {
        height: 140px;
        width: 140px;
    }

    .b5-pagination {
        width: 100%;
        ;
        padding-top: 9%;
    }

    .b5 .b5-pagination>span {
        width: 20.18%;
        height: 0;
        padding-top: 22%;
        top: 143%;
        background-size: 100.45%;
        background-position: top;
        background-repeat: no-repeat;
    }

    .b5 .b5-pagination>span:nth-child(1) {
        left: 5.2%;
        background-image: url(../images/mq_b5_lip_1.png);
    }

    .b5 .b5-pagination>span:nth-child(2) {
        left: 28.64%;
        background-image: url(../images/mq_b5_lip_2.png);
        top: 112%;
    }

    .b5 .b5-pagination>span:nth-child(3) {
        left: 52.08%;
        background-image: url(../images/mq_b5_lip_3.png);
        top: 95%;
    }

    .b5 .b5-pagination>span:nth-child(4) {
        left: 75.52%;
        background-image: url(../images/mq_b5_lip_4.png);
        top: 67%;
    }

    .b5 .swiper-pagination-bullet-active {
        transform: translate(0%, -16%);
        -moz-transform: translate(0%, -16%);
        -webkit-transform: translate(0%, -16%);
        -o-transform: translate(0%, -16%);
        transition: all 1s ease;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
    }

    /*b6*/
    .b6 {
        margin: -8% auto 0;
        z-index: 5;
        position: relative;
        max-width: 1706px;
    }

    .b6_txt_1 {
        top: 5.79%;
        left: 6.38%;
        width: 86.72%;
        height: 2.12%;
        background-image: url(../images/mq_b6_txt_1_mb.png);
    }

    .b6_txt_2 {
        top: 7.53%;
        left: 0%;
        width: 96.09%;
        height: 1.82%;
        background-image: url(../images/mq_b6_txt_2_mb.png);
    }

    .b6_bg {
        width: 100%;
        padding-top: 337.11%;
        background-image: url(../images/mq_b6_bg_mb.png);
    }

    .b6_yt_swiper {
        top: 13.79%;
        left: 7.81%;
        width: 85.94%;
        height: 20.63%;
    }

    .b6_black {
        top: 34.41%;
        left: 4.3%;
        height: 1.15%;
        width: 0;
    }

    .b6_black.aos-animate {
        /* width: 68.2%; */
    }

    @keyframes bg_run {
        from {
            width: 0;
        }

        80%,
        to {
            width: 68.2%
        }
    }

    @-webkit-keyframes bg_run {
        from {
            width: 0;
        }

        80%,
        to {
            width: 68.2%
        }
    }

    .b6_yt_1 {
        background-image: url(../images/mq_b6_yt_1_mb.png);
    }

    .b6_yt_2 {
        background-image: url(../images/mq_b6_yt_2_mb.png);
    }

    .b6_yt_3 {
        background-image: url(../images/mq_b6_yt_3_mb.png);
    }

    .b6_yt_4 {
        background-image: url(../images/mq_b6_yt_4_mb.png);
    }

    .b6_yt_5 {
        background-image: url(../images/mq_b6_yt_5_mb_0821.png);
    }

    .b6-yt-pagination {
        top: 40.94%;
        left: 15.63%;
        width: 75.8%;
        height: 22.02%;
        padding: 5.2% 1.65% 5.2% 3.9%;
    }

    .b6-yt-pagination::-webkit-scrollbar {
        width: 9px;
        background-color: #fff;
        margin-right: 5px;
    }

    .b6-yt-pagination::-webkit-scrollbar-track {
        background-color: #fff;
        margin: 8% 3%;
    }

    .b6-yt-pagination::-webkit-scrollbar-thumb {
        border-left: 9px solid #f0eae4;
        background-color: #fff;
        border-radius: 9px;
    }

    .b6-yt-pagination>span {
        width: 100%;
        padding-top: 26%;
        height: 0;
        border-radius: 0;
        background-color: #fff;
        background-position: left;
        background-repeat: no-repeat;
        opacity: 1;
    }

    .b6-yt-pagination>span+span {
        margin-top: 8.1%;
    }

    .b6-yt-pagination>span:nth-child(1) {
        background-image: url(../images/mq_b6_yt_list_1_mb.png);
    }

    .b6-yt-pagination>span:nth-child(2) {
        background-image: url(../images/mq_b6_yt_list_2_mb.png);
    }

    .b6-yt-pagination>span:nth-child(3) {
        background-image: url(../images/mq_b6_yt_list_3_mb.png);
    }

    .b6-yt-pagination>span:nth-child(4) {
        background-image: url(../images/mq_b6_yt_list_4_mb.png);
    }

    .b6-yt-pagination>span:nth-child(5) {
        background-image: url(../images/mq_b6_yt_list_5_mb_0821.png);
    }

    .b6-yt-pagination>span:nth-child(n+2).swiper-pagination-bullet-active {
        margin: 0 0 7.5%;
    }

    .b6_ig_swiper {
        height: 28.5%;
        background-image: none;
        width: 100%;
        top: 65.85%;
    }

    .b6_ig_wrap {
        padding-top: 1%;
    }

    .b6_ig_swiper a {
        width: 40.2%;
        height: 42.5%;
    }

    .b6_ig_1 {
        justify-content: flex-start;
        background-image: url(../images/mq_b6_ig_bg_1_mb.png);
        padding-top: 2.5%;
    }

    .b6_ig_1 a,
    .b6_ig_2 a {
        margin: 0;
    }

    .b6_ig_1 a:nth-child(odd) {
        margin-right: 5.4%;
        margin-left: 6.8%;
    }

    .b6_ig_1 a:nth-child(n+3) {
        margin-top: 3.7%;
    }

    .b6_ig_2 {
        background-image: url(../images/mq_b6_ig_bg_2_mb.png);
    }

    .b6_ig_2 a {
        margin-top: 2.5%;
    }

    .b6_ig_2 a:nth-child(1) {
        position: relative;
        transform: translate(-3.2%, -5%);
        -moz-transform: translate(-3.2%, -5%);
        -webkit-transform: translate(-3.2%, -5%);
        -o-transform: translate(-3.2%, -5%);
    }

    .b6_ig_2 a:nth-child(3) {
        margin-top: 4.5%;
    }

    .b6_ig_2 a:nth-child(odd) {
        margin-right: 5.2%;
        margin-left: 6.8%;
    }

    .b6_ig_swiper a img {
        width: 100%;
    }

    .b6 .official {
        margin-left: 0.2%;
        margin-top: 4.2%;
        height: 41.8%;
    }

    .b6-ig-pagination {
        top: 95.5%;
        left: 50%;
        transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%);
    }

    .b6-ig-pagination span {
        width: 15px;
        height: 15px;
        opacity: 1;
        margin: 0 5px;

    }

    .b6-ig-pagination span.swiper-pagination-bullet {
        background: #f1ebe5;
    }

    .b6-ig-pagination span.swiper-pagination-bullet-active {
        background: #000;
    }

    /* b7 */
    .b7 {
        position: relative;
        padding-top: 215.36%;
    }

    .b7_title_mb {
        position: relative;
        padding-top: 29.94%;
    }

    .b7_txt_1 {
        top: 18.26%;
        left: 4.56%;
        width: 91.41%;
        height: 53.04%;
        background-image: url(../images/mq_b7_txt_1_mb.png);
    }

    .b7_txt_2 {
        top: 66.52%;
        left: 0%;
        width: 94.92%;
        height: 20.43%;
        background-image: url(../images/mq_b7_txt_2_mb.png);
    }

    .b7 a {
        cursor: pointer;
        display: block;
        z-index: 5;
    }

    .b7_hint_arrow {
        background-image: url(../images/mq_b7_drag_mb.png);
        width: 100%;
        top: 34%;
        left: 50%;
        transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        padding-top: 127.65%;
    }

    .b7_hint_finger {
        top: 51.33%;
        left: 39.87%;
        width: 12.74%;
        padding-top: 12.6%;
        z-index: 5;
    }

    @keyframes drag {
        from {
            top: 51.33%;
        }

        to {
            top: 17%;
        }
    }


    .b7_item+span {
        padding-top: 86%;
        width: 100%;
    }

    .b7_anchor {
        top: 0;
    }

    .b7_img {
        transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 215.36%;
    }

    .b7_intro {
        background-image: url(../images/mq_b7_intro_mb.jpg);
    }

    .b7_intro a {
        width: 84%;
        left: 10%;
        padding-top: 10%;
        top: 89%;
    }

    .b7_choose {
        background-image: url(../images/mq_b7_choose_mb.jpg);
    }

    .b7_choose a {
        width: 88%;
        left: 6%;
        padding-top: 25%;
        top: 57%;
    }

    #b7_choose_b {
        top: 74%;
    }

    .b7_a_1 {
        background-image: url(../images/mq_b7_a_1_mb.jpg);
    }

    .b7_a_1 a {
        top: 54.09%;
        left: 37%;
        width: 24.35%;
        height: 27.03%;
    }

    .b7_a_2 {
        background-image: url(../images/mq_b7_a_2_mb.jpg);
    }

    .b7_a_2 a,
    .b7_b_2 a {
        top: 56.5%;
        left: 20%;
        width: 57.81%;
        height: 21.7%;
    }

    .b7_a_finish {
        background-image: url(../images/mq_b7_a_finish_mb.jpg);
    }

    .b7_finish {
        width: 100%;
        left: 0;
        padding-top: 13%;
        top: 84%;
    }

    .b7_b_1 {
        background-image: url(../images/mq_b7_b_1_mb.jpg);
    }

    .b7_b_1 a,
    .b7_b_3 a {
        top: 52.09%;
        left: 39.63%;
        width: 16.02%;
        height: 24.3%;
    }


    .b7_b_2 {
        background-image: url(../images/mq_b7_b_2_mb_0822.jpg);
    }

    .b7_b_3 {
        background-image: url(../images/mq_b7_b_3_mb.jpg);
    }

    .b7_b_finish {
        background-image: url(../images/mq_b7_b_finish_mb.jpg);
    }


    /*b8*/
    .b8 {
        padding: 0 2.7%;
        background-color: #fff;
        background-clip: content-box;
    }

    .b8 .title {
        width: 77.44%;
        margin: 0 auto 7.5%;
    }

    .form-checkbox-input input:checked+.checkbox-label:after {
        content: '';
        display: block;
        position: absolute;
        left: 4px;
        top: 8px;
        color: #d8b658;
        width: 35px;
        height: 34px;
        background-image: url(../images/mq_check_icon_brown.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .counter_ul input[type=radio]:checked+label span {
        background: url(../images/mq_check_icon_brown.png) center center no-repeat;
        background-size: 80%;
    }

    .container.form-container {
        padding: 0 30px;
    }

    .counter_select {
        width: 100%;
        margin-bottom: 0;
    }

    li.counter {
        display: none;
    }

    .find_counter,
    .select {
        width: 90.46875%;
    }

    .checkbox-label:before {
        width: 45px;
        height: 45px;
        border: 2px solid #d8d8d8;
        top: 0;
    }

    .counter_select li {
        float: none;
        margin: 0 auto 15px;
        border: 1px solid #e6e3e3;
        border-radius: 0;
        height: auto;
        line-height: normal;
        font-size: 4vw;
    }

    .find_counter {
        padding: 2% 0;
    }

    .find_counter img {
        width: 18px;
    }

    .counter_select select {
        padding: 1.8% 12% 1.8% 7%;
        background: url(../images/mq_form_select_area.png) right 7% center no-repeat;
        background-size: 12px;
    }

    .tips {
        width: 93.8%;
        max-width: none;
        margin: 6% auto 10%;
        min-width: auto;
    }

    .form_header,
    .form_inner,
    .success-page {
        width: 100%;
    }

    .map {
        width: 100%;
        margin-bottom: 30px;
    }

    #map_choose_container {
        padding-top: 4%;
    }

    .google_map {
        width: 100%;
        height: 300px;
        border: 2px solid #e4d2bd;
    }

    .counter_list {
        width: 100%;
        height: auto;
        border: none;
    }

    .counter_ul {
        height: auto;
        max-height: 350px;
        min-height: 125px;
        padding-bottom: 15px;
        border: 2px solid #e4d2bd;
        border-top: 0;
    }

    .counter_ul label {
        padding: 40px 0 25px 10%;
    }

    .list_title {
        background-color: #f2ebe5;
        color: #e4d2bd;
        font-size: 4vw;
    }

    .counter_ul li {
        padding: 0 15px;
    }

    .c_name,
    .c_phone,
    .c_address,
    .s_tel,
    .s_addr {
        color: #543f26;
    }

    .c_name {
        font-size: 3.9vw;
    }

    .counter_ok {
        width: 90%;
        max-width: 552px;
        margin: 0 auto 50px;
    }

    .s_tel,
    .s_addr {
        display: block;
        margin-bottom: 15px;
    }

    .form_page {
        padding-top: 4%;
    }

    .input_row span {
        position: static;
        display: block;
        font-size: 4.8vw;
        align-self: center;
        margin-right: 15px;
        color: #666666;
        line-height: normal;
    }

    .input_row {
        padding-left: 0;
        max-width: none;
        display: flex;
    }

    .form_body,
    .success-page {
        padding-top: 3%;
    }

    .form-input {
        border: 1px solid #dedada;
        flex: 1;
        height: auto;
        font-size: 3.6vw;
        padding: 1.7% 2.4%;
        line-height: normal;
    }

    .form-checkbox-input label {
        margin-right: 0;
        line-height: 45px;
        font-size: 4.2vw;
        padding-left: 55px;
    }

    #agree+label {
        display: block;
    }

    #once+label {
        display: block;
        margin-top: 20px;
    }

    #agree+.checkbox-label:before,
    #once+.checkbox-label:before {
        top: 3px;
    }

    #agree+.checkbox-label:after,
    #once+.checkbox-label:after {
        top: 10px;
    }

    .form-checkbox-input {
        max-width: none;
        margin: 25px auto 0px;
    }

    .checkbuy {
        margin-top: 10px;
        line-height: 45px;
        font-size: 4.2vw;
    }

    .checkbuy span {
        margin-right: 0;
    }

    .form-btn-box {
        width: 100%;
        margin: 7.5% auto 5%;
        flex-wrap: wrap;
    }

    .s_title {
        font-size: 4.2vw;
    }

    .s_tel:before {
        background-image: url(../images/mq_phone_icon_mb.png);
    }

    .s_addr:before {
        background-image: url(../images/mq_location_icon_mb.png);
    }

    .s_tel,
    .s_addr {
        font-size: 4vw;
    }

    .s_tel:before,
    .s_addr:before {
        width: 4.5%;
        height: 100%;
    }

    .c_phone,
    .c_address,
    .s_tel,
    .s_addr {
        padding-left: 6.5%;
    }

    .send-btn,
    .back-btn {
        width: 92%;
        margin: auto;
        max-width: none;
        min-width: auto;
    }

    .send-btn img,
    .back-btn img {
        margin: auto;
    }

    .send-btn {
        margin-top: 15px;
    }

    .checkbuy label {
        margin-right: 10px;
    }

    .notice_content {
        width: 86.588%;
        padding-top: 139%;
        background-image: url(../images/mq_notice_m.png);
        margin: 4% auto;
    }

    .success-page .input_row span {
        position: static;
        display: block;
        font-size: 4.8vw;
        align-self: center;
        margin-right: 15px;
        color: #666666;
        line-height: normal;
    }

    .success-page .input_row {
        margin-bottom: 15px;
    }

    .success-page .input_row div {
        height: auto;
        font-size: 3.6vw;
        padding: 1.7% 2.4%;
        line-height: normal;
        flex: 1;
    }

    .d_info {
        min-height: 24px;
        line-height: 24px;
        font-size: 18px;
    }

    /*pop*/
    .pop-window {
        width: 95%;
        max-width: 500px;
    }

    #target-1 {
        position: absolute;
        top: 27%;
    }
}

@media (max-width:600px) {

    .counter_ul label {
        padding: 40px 0 25px 10%;
    }
}

@media (max-width:500px) {
    .header-menu {
        width: 7%;
        padding-top: 5.5%;
        top: 35.5%;
    }

    .pop-sel select {
        font-size: 4vw;
    }

    .overlay ul li a {
        font-size: 8vw;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 60px;
        height: 80px;
    }

    .checkbox-label:before,
    .counter_ul label span {
        width: 25px;
        height: 25px;
    }

    .form-checkbox-input label {
        margin-right: 0;
        line-height: 25px;
        font-size: 4.2vw;
        padding-left: 30px;
    }

    .checkbuy .star {
        margin-right: 12px;
        font-size: 30px;
    }

    .form-checkbox-input input:checked+.checkbox-label:after {
        width: 18px;
        top: 5px;
    }

    #agree+.checkbox-label:after,
    #once+.checkbox-label:after {
        top: 7px;
    }

    .c_phone,
    .c_address,
    .s_tel,
    .s_addr {
        padding-left: 7.5%;
    }
}

@media (max-width:425px) {

    .b4-step1-prev,
    .b4-step2-prev,
    .b4-step1-next,
    .b4-step2-next {
        width: 40px;
    }

    .b4-pop-pagination {
        left: 93% !important;
    }

    .b4-pop-pagination>span {
        width: 15px !important;
        height: 15px !important;
        margin: 0 0 20px !important;
    }

    .counter_ul label {
        padding: 30px 0 20px 16%;
    }

    .counter_ul label span {
        top: 35px;
    }

    .c_phone,
    .c_address,
    .s_tel,
    .s_addr {
        padding-left: 10.5%;
    }
}

@media (max-width:375px) {

    .c_phone,
    .c_address,
    .s_tel,
    .s_addr {
        padding-left: 12.5%;
    }
}

@media (max-width:768px) and (min-height:500px) {
    .menu-container {
        height: auto !important;
    }
}

@media (max-width:768px) and (max-height:500px) {
    .menu-container {
        top: 0;
        height: 100%;
        -webkit-transform: none;
        -ms-transform: none;
        margin-top: 0;
        padding-bottom: 30px;
    }

}