html {
    overflow-x: hidden !important;
}

html,
body {
    font-size: 10px;
    font-family: "myriad pro", Arial;
}

ul,
li {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
p {
    padding: 0;
    margin: 0;
}

.eleafcontent {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

.eleafcontent .container.container-eleaf {
    width: 88vw;
}

@media (max-width: 767px) {
    .eleafcontent .container.container-eleaf {
        width: 95vw;
    }
}

@media (min-width: 1921px) {
    html,
    body {
        font-size: 13px !important;
    }
    .container {
        width: 1800px;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    html,
    body {
        font-size: 12px !important;
    }
}

@media (min-width: 1367px) and (max-width: 1599px) {
    html,
    body {
        font-size: 10px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    html,
    body {
        font-size: 9px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    html,
    body {
        font-size: 8px !important;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    html,
    body {
        font-size: 8px !important;
    }
}

@media (max-width: 640px) {
    html,
    body {
        font-size: 7px !important;
    }
}

.eleaf_title {
    color: #fff;
    font-size: calc(1.2vw + 15px);
    line-height: 1.2;
    display: block;
    padding-bottom: calc(0.5vw + 0.8rem);
}

.eleaf_title_small {
    color: #fff;
    font-size: calc(0.8vw + 15px);
    line-height: 1.2;
    display: block;
}

.eleaf_font {
    font-size: calc(0.52vw + 12px);
    line-height: 1.4;
    color: #ffffff;
    word-wrap: break-word;
}

.eleaf_font_small {
    font-size: calc(0.4vw + 10px);
    line-height: 1.2;
    color: #ffffff;
}

.upp {
    text-transform: uppercase;
}

.italic {
    font-style: italic;
}

.txtBold {
    font-weight: bold;
}

.nowrap {
    white-space: nowrap;
}

.ac {
    text-align: center;
}

.al {
    text-align: left;
}

.ar {
    text-align: right;
}

.child-same-height {
    display: flex;
}

@media (max-width: 767px) {
    .child-same-height {
        display: block;
    }
}

.valign-center {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    flex-direction: column;
}

.ac>img {
    margin-left: auto;
    margin-right: auto;
}

.white {
    color: white;
}

.black {
    color: #000000;
}

.no-padding {
    padding: 0;
}

.no-padding img {
    width: 100%;
}

.width100 {
    width: 100%;
}

.img-hidden,
.img-hidden img {
    height: 0;
    opacity: 0;
}

.flex {
    display: flex;
}

.iorelite_01 {
    position: relative;
    height: 50vw;
    width: 100%;
    background-color: #efefef;
}

.iorelite_01_title {
    width: 50vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 25%;
    opacity: 0;
}

.iorelite_01>img {
    width: 22vw;
    position: absolute;
    left: 65.4vw;
    top: 23.4vw;
    transform-origin: center;
    opacity: 0;
    transition: all 1s;
}

.iorelite_01_1 {
    z-index: 4;
}

.iorelite_01_2 {
    z-index: 3;
}

.iorelite_01_3 {
    z-index: 2;
}

.iorelite_01_4 {
    z-index: 1;
}

.iorelite_01_5 {
    width: 100%;
    opacity: 0;
    transform: translateY(-40px);
}

.iorelite_01_1 {
    transform: rotate(-140deg) translate(40vw, -20.5vw);
}

.iorelite_01.active .iorelite_01_title {
    opacity: 1;
    width: 25vw;
    left: 19%;
    transition: width 2s 1.5s, left 2s 1.5s;
}

.iorelite_01.active .iorelite_01_5 {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 2s 3s, transform 0.5s 3s;
    transition-timing-function: ease-out;
}

.iorelite_01.active .iorelite_01_1 {
    transform: none;
    opacity: 1;
    transition: transform 1.5s 1.5s, opacity 0.5s 1.5s;
}

.iorelite_01.active .iorelite_01_2 {
    transform: rotate(-20deg) translate(-1vw, -10.5vw);
    opacity: 1;
    transition: transform 1s 2.8s, opacity 0.3s 2.8s;
}

.iorelite_01.active .iorelite_01_3 {
    transform: rotate(-48deg) translate(5vw, -21vw);
    opacity: 1;
    transition: transform 1.2s 2.8s, opacity 0.3s 2.8s;
}

.iorelite_01.active .iorelite_01_4 {
    transform: rotate(-90deg) translate(19vw, -26vw);
    opacity: 1;
    transition: transform 1.3s 2.8s, opacity 0.3s 2.8s;
}

.iorelite_02 {
    position: relative;
    width: 100%;
}

.iorelite_02 .content-item {
    position: relative;
    width: 100vw;
    height: 50vw;
    background: url(2_01.jpg) no-repeat center;
    background-size: cover;
}

.iorelite_02 .content-item .content-item-above {
    position: absolute;
    top: 0;
    height: 100%;
    right: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    -webkit-transition: width 0.1s;
    transition: width 0.1s;
}

.iorelite_02 .content-item .content-item-above .bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100%;
    background: url(2_02.jpg) no-repeat center;
    background-size: cover;
}

.iorelite_02_1 {
    position: absolute;
    bottom: 10%;
    width: 100%;
}

.iorelite_03 {
    position: relative;
    padding: calc(4vw + 3rem) 0 calc(3vw + 2rem);
}

.iorelite_03_1 {
    width: 60vw;
    margin-left: 27vw;
}

.iorelite_03_2 {
    position: absolute;
    width: calc(20.4vw + 255px);
    right: 52%;
    top: 45%;
    margin-top: calc(-1.2vw - 15px);
}

.iorelite_puffs {
    width: 100%;
    background: linear-gradient(to bottom, #4f4f4f, #000000);
    padding: calc(3vw + 4rem) 0;
}

.iorelite_puffs .container.container-eleaf {
    width: 78.6vw;
}

.iorelite_puffs_left {
    width: 36.1vw;
    transform: translateX(23vw);
    transition: transform 0.1s;
}

.iorelite_puffs_right {
    width: 40.5vw;
    margin-left: 2vw;
}

.iorelite_puffs p {
    padding-bottom: calc(1vw + 2rem);
}

.iorelite_puffs-2 {
    position: relative;
    width: 100%;
}

.iorelite_puffs-2 div {
    position: absolute;
    width: 0;
    height: 27.6vw;
    top: 0;
    left: 0;
    transition: all 3s;
    overflow: hidden;
}

.iorelite_puffs .iorelite_puffs-2 div.img_3 {
    width: 36.1vw;
    opacity: 0;
    transform: translateY(2rem);
    transition: all 0.1s;
}

.iorelite_puffs.iorelite_puffs-active .iorelite_puffs-2 div.img_3 {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s 2s;
}

.iorelite_puffs.iorelite_puffs-active .iorelite_puffs-2 div.img_4 {
    transition: all 3s;
}

.iorelite_puffs-2 img {
    width: 36.1vw;
    max-width: 36.1vw!important;
    height: 27.6vw;
}

.iorelite_puffs.iorelite_puffs-active .iorelite_puffs-2 div.img_2,
.iorelite_puffs.iorelite_puffs-active .iorelite_puffs-2 div.img_4 {
    width: 36.1vw;
    position: absolute;
}

.iorelite_puffs.iorelite_puffs-active .iorelite_puffs_left {
    transform: translateX(0);
    transition: transform 0.6s 3s ease;
}

.iorelite_puffs_right img {
    opacity: 0;
    transition: opacity 0.1s;
}

.iorelite_puffs.iorelite_puffs-active .iorelite_puffs_right img {
    opacity: 1;
    transition: opacity 1s 3.5s;
}

.iorelite_04 {
    position: relative;
    background: url(4_bg.jpg) no-repeat center center;
    background-size: cover;
    padding: calc(2vw + 2rem) 0 calc(4vw + 3rem);
}

.iorelite_04 img {
    width: 60%;
    margin-left: 15%;
}

.iorelite_04_2 {
    position: absolute;
    bottom: calc(4vw + 3rem);
    left: 52%;
    width: calc(14.4vw + 180px);
}

.iorelite_05 {
    position: relative;
    overflow: hidden;
}

.iorelite_05_2 {
    position: absolute;
    width: calc(20.4vw + 255px);
    right: 52%;
    top: 45%;
    margin-top: calc(-1.2vw - 15px);
}

.iorelite_06 {
    width: 100%;
    background: linear-gradient(135deg, #a5a2cf 10%, #9fd8ed 29%, #e8f1f7 70%, #91d3f1 90%);
    height: 50vw;
    position: relative;
}

.iorelite_06_1 {
    position: absolute;
    height: 100%;
    overflow: hidden;
    left: 45%;
    width: 50%;
}

.iorelite_06_2 {
    position: absolute;
    width: 27.6vw;
    bottom: 0;
    left: 0;
    z-index: 2;
    will-change: transform;
    transition: transform 3s;
}

.iorelite_06_3 {
    position: absolute;
    width: 17vw;
    bottom: 15%;
    left: 23vw;
    z-index: 1;
    will-change: transform;
    transition: transform 3s;
}

.iorelite_06_4 {
    position: absolute;
    width: calc(13.2vw + 165px);
    right: 52%;
    top: 45%;
    margin-top: calc(-1.2vw - 15px);
}

.iorelite_07 {
    width: 100%;
    background: linear-gradient(-35deg, #ffffff 35%, #c4fff7 100%);
    position: relative;
}

.iorelite_08 {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.iorelite_08_1 {
    width: 100%;
}

.iorelite_08_2 {
    position: absolute;
    width: calc(13.2vw + 165px);
    right: 58%;
    top: 45%;
    margin-top: calc(-1.2vw - 15px);
}

.iorelite_09 {
    width: 100%;
    padding: calc(4vw + 3rem) 0;
    background-color: #fcfdfd;
}

.iorelite_09_1 {
    border-radius: 10px;
    box-shadow: 0 0 5px #ccc;
    cursor: pointer;
    will-change: transform;
    transition: transform 0.2s;
}

.iorelite_09_1:hover {
    transform: translateY(-5px);
    transition: transform 0.5s;
}

.col-iorelite_09 {
    padding: 10px 4px;
    width: 20%;
}

.iorelite_09 p {
    padding-bottom: calc(3vw + 2rem);
}

.iorelite_10 {
    position: relative;
    width: 100%;
    height: 50vw;
    background-color: #daefe8;
}

.iorelite_10_1,
.iorelite_10_3 {
    position: absolute;
    width: 29.948vw;
    top: 20vw;
    left: 38%;
    will-change: transform;
    transition: transform 0.5s;
}

.iorelite_10_2 {
    position: absolute;
    width: 29.948vw;
    top: 20vw;
    left: 31.8%;
    will-change: transform;
    transition: transform 0.5s;
}

.iorelite_10_txt {
    width: 60vw;
    height: calc(3vw + 40px);
    margin: auto;
    overflow: hidden;
    text-align: center;
    position: absolute;
    left: 20vw;
    top: 30vw;
    transition: width 0.5s;
}

.iorelite_10_txt p,
.iorelite_10_txt p {
    white-space: nowrap;
    width: 60vw;
    position: absolute;
    left: 0;
}

.iorelite_10_biaozhu {
    position: absolute;
    height: 0;
    overflow: hidden;
    transition: height 0.2s 0s;
}

.iorelite_10_biaozhu_1 {
    position: absolute;
    height: 13.2vw;
    width: 100%;
    top: 0;
    left: 0;
    border-left: solid 1px #747474;
}

.iorelite_10_biaozhu_2 {
    position: absolute;
    bottom: 0;
    left: 5px;
}

.iorelite_10_6 {
    width: 20vw;
    top: 25.5vw;
    left: 28.5%;
}

.iorelite_10_7 {
    width: 20vw;
    top: 23vw;
    left: 34.5%;
}

.iorelite_10_8 {
    width: 20vw;
    top: 25.5vw;
    left: 48%;
}

.iorelite_10_9 {
    width: 20vw;
    top: 22.5vw;
    left: auto;
    right: 29%;
}

.iorelite_10_10 {
    width: 20vw;
    top: 24.5vw;
    left: auto;
    right: 26.1%;
}

.iorelite_10_9 .iorelite_10_biaozhu_1,
.iorelite_10_10 .iorelite_10_biaozhu_1 {
    border-left: solid 0px #747474;
    border-right: solid 1px #747474;
}

.iorelite_10_9 .iorelite_10_biaozhu_2,
.iorelite_10_10 .iorelite_10_biaozhu_2 {
    left: auto;
    right: 5px;
}

.iorelite_10_7 .iorelite_10_biaozhu_1 {
    height: 15.7vw;
}

.iorelite_10_9 .iorelite_10_biaozhu_1 {
    height: 12.4vw;
}

.iorelite_10_10 .iorelite_10_biaozhu_1 {
    height: 14.2vw;
}

.iorelite_10.biaozhu .iorelite_10_6 {
    height: 13.2vw;
    transition: height 0.3s 0s;
}

.iorelite_10.biaozhu .iorelite_10_7 {
    height: 15.7vw;
    transition: height 0.3s 0.3s;
}

.iorelite_10.biaozhu .iorelite_10_8 {
    height: 13.2vw;
    transition: height 0.3s 0.6s;
}

.iorelite_10.biaozhu .iorelite_10_9 {
    height: 12.4vw;
    transition: height 0.3s 0.9s;
}

.iorelite_10.biaozhu .iorelite_10_10 {
    height: 14.2vw;
    transition: height 0.3s 1.2s;
}

.iorelite_11_1 {
    text-align: left;
}

.iorelite_11 {
    width: 100%;
    padding: calc(4vw + 3rem) 0;
    background-color: #ffffff;
}

.iorelite_11_1 p {
    padding-bottom: 3rem;
}

.iorelite_10 p span,
.iorelite_11 p span {
    font-size: 10px;
}

@media (max-width: 1199px) {
    .iorelite_03_2 {
        width: 45%;
    }
    .iorelite_05_2 {
        width: 45%;
    }
    .iorelite_10 {
        height: 70vw;
    }
    .iorelite_10_1,
    .iorelite_10_3 {
        width: 50vw;
        top: 15vw;
        left: 30%;
    }
    .iorelite_10_2 {
        width: 50vw;
        top: 15vw;
        left: 18%;
    }
    .iorelite_10_6 {
        width: 20vw;
        top: 24vw;
        left: 12%;
    }
    .iorelite_10_7 {
        width: 30vw;
        top: 24vw;
        left: 25%;
    }
    .iorelite_10_8 {
        width: 40vw;
        top: 24vw;
        left: 48%;
    }
    .iorelite_10_9 {
        width: 30vw;
        top: 22.5vw;
        left: auto;
        right: 16%;
    }
    .iorelite_10_10 {
        width: 40vw;
        top: 23.5vw;
        left: auto;
        right: 11%;
    }
    .iorelite_10_biaozhu_1 {
        position: absolute;
        height: 30vw;
    }
    .iorelite_10.biaozhu .iorelite_10_6 {
        height: 30vw;
    }
    .iorelite_10.biaozhu .iorelite_10_7 {
        height: 30vw;
    }
    .iorelite_10.biaozhu .iorelite_10_8 {
        height: 30vw;
    }
    .iorelite_10_10 .iorelite_10_biaozhu_1 {
        height: 40vw;
    }
    .iorelite_10_9 .iorelite_10_biaozhu_1 {
        height: 16vw;
    }
    .iorelite_10.biaozhu .iorelite_10_9 {
        height: 16vw;
    }
    .iorelite_10.biaozhu .iorelite_10_10 {
        height: 40vw;
    }
}

@media (max-width: 767px) {
    .iorelite_01 {
        height: 60vw;
        transform: scale(1.2);
        transform-origin: top center;
        overflow: hidden;
    }
    .iorelite_01.active .iorelite_01_title {
        width: 32vw;
        left: 14%;
    }
    .iorelite_02 .content-item {
        height: 90vw;
    }
    .iorelite_03_1 {
        width: 100vw;
        margin-left: 0;
    }
    .iorelite_03_2 {
        width: 80%;
        position: relative;
        right: 0;
        margin-left: 10%;
        top: auto;
        margin-top: 1rem;
    }
    .iorelite_04 img {
        width: 100%;
        margin-left: 0;
    }
    .iorelite_04_2 {
        position: relative;
        bottom: auto;
        left: 10%;
        width: 80%;
        margin-top: 5%;
    }
    .iorelite_05_1 {
        width: 120%;
        max-width: 120%!important;
        margin-left: 0;
    }
    .iorelite_05_2 {
        width: 50%;
        right: 45%;
        top: 30%;
    }
    .iorelite_06 {
        height: 60vw;
    }
    .iorelite_06_2 {
        width: 32vw;
    }
    .iorelite_06_3 {
        width: 23vw;
        left: 28vw;
    }
    .iorelite_06_4 {
        position: absolute;
        width: 50%;
        right: auto;
        left: 5%;
        top: 20%;
        margin-top: 0;
    }
    .iorelite_07_1 {
        padding: 0;
        margin-left: -8%;
    }
    .iorelite_07_2 {
        position: absolute;
        width: 55%;
        padding: 0;
        left: 40%;
        top: 20%;
    }
    .iorelite_08_1 {
        width: 120%;
        max-width: 120%!important;
        margin-left: 0;
    }
    .iorelite_08_2 {
        position: absolute;
        width: 50%;
        right: 45%;
        top: 20%;
        margin-top: 0;
    }
    .iorelite_11_1 h2,
    .iorelite_11_1 p {
        text-align: center;
    }
    .iorelite_puffs .container.container-eleaf {
        width: 90%;
    }
    .iorelite_puffs_left {
        width: 100%;
        transform: none;
    }
    .iorelite_puffs_right {
        width: 100%;
        margin-left: 0;
    }
    .iorelite_puffs-2 div {
        width: 100%;
        height: auto;
    }
    .iorelite_puffs .iorelite_puffs-2 div.img_3 {
        width: 100%;
        opacity: 1;
        transform: none;
    }
    .iorelite_puffs-2 img {
        width: 100%;
        max-width: 100%!important;
        height: auto;
    }
    .iorelite_puffs_right img {
        opacity: 1;
    }
}