@charset "UTF-8";
.intro {}
.intro_inner {
    max-width: 640px;
}
.intro_title {
    text-align: center;
}
.intro_text {}
.introHr {}
.know {
    margin-bottom: 75px;
}
.know_inner {
    max-width: 980px;
}
.know_box {}
.know_box::before {
    content: "";
    display: block;
    width: 135px;
    height: 100%;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    background: #F8F8F8;
}
.know_title {
    max-width: 430px;
}
.know_text {
    max-width: 430px;
    padding-bottom: 45px;
    position: relative;
    z-index: 2;
}
.know_image {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.know_image > img {}
.charm {
    position: relative;
    z-index: 1;
    margin-bottom: 77px;
}
.charm_image {}
.charm_image > img {}
.charm_box {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    width: 570px;
    padding-top: 82px;
    padding-bottom: 117px;
}
.charm_title {}
.charm_text {
    position: relative;
    z-index: 1;
}
.visible {}
.visible_inner {
    max-width: 904px;
}
.visible_box {
    padding: 40px 80px 70px;
}
.visible_title {
    position: relative;
    z-index: 2;
}
.visible_text {
    position: relative;
    z-index: 2;
}
@media screen and (min-width:1000px) {}
@media screen and (max-width:999px) {
    .intro {}
    .intro_inner {}
    .intro_title {}
    .intro_text {}
    .introHr {}
    .know {}
    .know_inner {}
    .know_box {}
    .know_box::before {
        display: none;
    }
    .know_title {
        max-width: none;
    }
    .know_text {
        max-width: none;
        padding-bottom: 0;
    }
    .know_image {
        position: relative;
        top: 0;
        -webkit-transform: none;
        transform: none;
        margin-top: 25px;
    }
    .know_image > img {}
    .charm {
        margin-bottom: 50px;
    }
    .charm_image {}
    .charm_image > img {}
    .charm_box {
        position: relative;
        top: 0;
        width: 100%;
        padding: 60px;
    }
    .charm_title {}
    .charm_text {}
    .visible {}
    .visible_inner {}
    .visible_box {
        padding: 60px;
    }
    .visible_title {}
    .visible_text {}
}
@media screen and (max-width:699px) {
    .intro {}
    .intro_inner {}
    .intro_title {}
    .intro_text {}
    .introHr {}
    .know {
        margin-bottom: 35px;
    }
    .know_inner {}
    .know_box {}
    .know_box::before {}
    .know_title {}
    .know_text {}
    .know_image {}
    .know_image > img {}
    .charm {
        margin-bottom: 35px;
    }
    .charm_image {}
    .charm_image > img {}
    .charm_box {
        padding: 15px;
    }
    .charm_title {}
    .charm_text {}
    .visible {}
    .visible_inner {}
    .visible_box {
        padding: 15px;
    }
    .visible_title {}
    .visible_text {}
}