/*===========================================
Homepage
===========================================*/
#homepage__container{
    height:auto!important;min-height:500px;height:500px;
    background-color:#fff;
}
/*-------------------------------------------
Homepage pic
-------------------------------------------*/
.homepage-pic{
    background-color:#000;
    background-image:url(/images/bg_color.jpg);
    background-position:50% 50%;
    background-size:cover;
    position:relative;
    height:calc(100vh - 320px);
    overflow:hidden;
    /* transition:.3s; */
}
/* Pictures */
.owl-carousel,
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item{
    height:100%;
}
.owl-carousel{
   touch-action:manipulation !important;
}
    .homepage-pic .item{
        position:relative;
        height:100%;
    }
        .homepage-pic .item__inner{
            position:absolute; top:50%; right:70px;
            width:48%;
            height:calc(100% - 80px);
            transform:translateY(-50%);
            /* transition:.3s; */
        }
            .homepage-pic .video__wrap{
                position:absolute; top:50%;
                width:100%;
                height:0;
                transform:translateY(-50%);
                padding-bottom:56.25%;
                overflow:hidden;
                box-shadow:0 8px 20px rgba(0,0,0,.2);
            }
                .homepage-pic .video__wrap iframe{
                    position:absolute !important; top:0; left:0;
                    width:100%;
                    height:100% !important;
                }
            .homepage-pic .pic__img{
                margin:0;
                background-position:50% 50%;
                background-repeat:no-repeat;
                background-size:contain;
                position:absolute;
                width:100%;
                height:100%;
                /* transition:.3s; */
            }
            .homepage-pic a:hover .pic__img{
                opacity:.65;
            }
        .homepage-pic .item__info{
            position:absolute; left:70px; top:50%; z-index:2;
            transform:translateY(-50%);
            width:calc(50% - 180px);
            /* transition:.3s; */
        }
            .homepage-pic .item__title{
                margin:0 0 10px;
                color:#fff;
                font-size:2.25em; line-height:1.3; font-weight:400;
                letter-spacing:2px;
            }
            .homepage-pic .item__desc{
                margin:0 0 10px;
                color:#fff;
                font-size:1.25rem; line-height:1.5;
                letter-spacing:2px;
                opacity:.65;
            }
            .homepage-pic .pic__link{
                padding:1em 2em;
                margin-top:10px;
            }
            .homepage-pic .pic__link[target*='_blank']:after{
                content:"";
                display:inline-block;
                vertical-align:bottom;
                width:18px;
                height:18px;
                background-image:url(/images/icon-open-new.svg?v=20201109);
                background-position:50% 50%;
                background-repeat:no-repeat;
                background-size:cover;
                margin-left:6px;
            }
            .homepage-pic .pic__link[target*='_blank']:hover:after{
                background-image:url(/images/icon-open-new-white.svg);
            }
    /* Nav */
    .owl-nav.disabled{
        display:none;
    }
    /* Dots */
    .owl-dots{
        position:absolute; bottom:15px; left:0;
        width:100%;
        font-size:0; line-height:1;
        text-align:center;
    }
        .owl-dot{
            border:none;
            background:none;
            display:inline-block;
            height:auto;
            margin:0 10px;
            padding:0;
            outline:none;
        }
            .owl-dot span{
                display:inline-block;
                background-color:var(--doctor-primary);
                border-radius:10px;
                width:40px;
                height:8px;
                opacity:.3;
                transition:.2s;
                cursor:pointer;
            }
            .owl-dot.active span{
                opacity:1;
                cursor:default;
            }
@media screen and (max-width:1600px) and (max-height:700px){
    .homepage-pic{
        height:calc(100vh - 165px);
    }
}
@media screen and (max-width:1440px){
    .homepage-pic .item__title,
    .homepage-pic .item__desc{
        letter-spacing:0;
    }
    .homepage-pic .item__title{
        font-size:2rem;
    }
    .homepage-pic .item__desc{
        font-size:1.125rem;
    }
}
@media screen and (max-width:1280px){
    .homepage-pic .item__inner{
        right:60px;
    }
    .homepage-pic .item__info{
        left:60px;
    }
        .homepage-pic .item__title{
            font-size:1.875rem;
        }
}
@media screen and (max-width:1024px) and (orientation:portrait){
    .homepage-pic{
        height:430px;
    }
}
@media screen and (max-width:992px){
    .homepage-pic{
        height:300px;
    }
        .homepage-pic .item__inner{
            right:50px;
        }
        .homepage-pic .item__info{
            left:50px;
            width:calc(50% - 140px);
        }
            .homepage-pic .item__title{
                font-size:1.5rem;
                overflow:hidden;
                text-overflow:ellipsis;
                display:-webkit-box;
                -webkit-line-clamp:3;
                -webkit-box-orient:vertical;
            }
            .homepage-pic .item__desc{
                font-size:.875rem;
            }
}
@media screen and (max-width:932px) and (orientation:landscape){
    .homepage-pic{
        height:calc(100vh - 60px);
    }
}
@media screen and (max-height:375px) and (orientation:landscape){
    .homepage-pic{
        height:calc(100vh - 60px);
    }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .homepage-pic .item__inner{
        right:30px;
        width:48%;
    }
    .homepage-pic .item__info{
        left:30px;
        width:calc(50% - 70px);
    }
}
@media screen and (max-width:576px){
    .homepage-pic .item__title{
        font-size:1.125rem;
    }
    .homepage-pic .item__desc{
        font-size:.75rem;
    }
    .homepage-pic .pic__link{
        padding:.75em 1em;
    }
    .owl-dot{
        margin:0 5px;
    }
        .owl-dot span{
            width:8vw;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .homepage-pic{
        height:470px;
    }
        .homepage-pic .item{
            padding:15px;
        }
            .homepage-pic .item__inner{
                position:relative; top:auto; left:auto; right:auto;
                width:auto;
                height:0;
                padding-bottom:56.25%;
                margin-bottom:10px;
                transform:translateY(0%);
            }
                .homepage-pic .video__wrap{
                    top:auto;
                    transform:translateY(0%);
                }
                .homepage-pic .pic__img{
                    background-color:rgba(0,0,0,.1);
                    height:0;
                    padding-bottom:56.25%;
                }
            .homepage-pic .item__info{
                position:static;
                /* top:0%; left:20px; right:20px; */
                transform:translateY(0%);
                width:auto;
            }
                .homepage-pic .item__title{
                    font-size:5.5vw; font-weight:700;
                }
                .homepage-pic .item__desc{
                    font-size:3.5vw;
                    letter-spacing:1px;
                }
                .homepage-pic .pic__link{
                    margin-top:5px;
                    padding:.75em 2em;
                }
}
@media screen and (max-width:375px){/* SE, iX, XS, i11 Pro, i13 Mini, i6, i7, i8 */
    .homepage-pic{
        height:450px;
    }
}
@media screen and (max-width:320px){/* i5 */
    .homepage-pic{
        height:400px;
    }
}

/*-------------------------------------------
Homepage Main
-------------------------------------------*/
.homepage__main{
    background-color:#fff;
    position:relative; z-index:1;
}
    .home__title{
        margin:0 0 30px;
        color:#000;
        font-size:4rem; line-height:1; font-weight:700;
    }
        .home__title small{
            display:block;
            font-size:1rem; font-weight:400;
            opacity:.65;
            margin-top:10px;
        }
        .home__title::after{
            content:"";
            display:block;
            border-bottom:2px solid var(--doctor-primary);
            width:40px;
            margin-top:15px;
        }
    .btn-more{
        font-size:.875rem;
        padding:1em 3em;
    }
@media screen and (max-width:1024px){
    .home__title{
        font-size:3.5rem;
    }
}
@media screen and (max-width:992px){
    .home__title{
        font-size:3rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .home__title{
        font-size:2rem;
    }
        .home__title small{
            font-size:.875rem;
        }
    .btn-more{
        padding:1em 1.5em;
    }
}

/*-------------------------------------------
News
-------------------------------------------*/
.home-news{
    padding:80px 0;
    position:relative;
}
    .home-news__inner{
        display:flex;
    }
        .news__header{
            position:relative;
        }
            .news__header__inner{
                position:sticky; top:20px;
                white-space:nowrap;
            }
                .home-news__category{
                    list-style:none;
                    margin:0 0 20px;
                    padding:0;
                    font-size:.875rem;
                    line-height:1.2;
                }
                    .news__category__item{
                        padding-bottom:10px;
                    }
                        .news__category__link{
                            display:inline-block;
                            background-color:#fff;
                            border:1px solid #e3e3e3;
                            border-radius:30px;
                            color:#333;
                            line-height:1;
                            padding:0.5em 0.75em;
                        }
                        .news__category__link:focus,
                        .news__category__link:hover{
                            color:#0060ff;
                        }
        .news__list{
            list-style:none;
            margin:0;
            padding:0 0 0 60px;
        }
            .news__item{
                position:relative;
                padding:20px 0 20px 310px;
                line-height:24px;
                border-bottom:1px solid #e3e3e3;
            }
            .news__item:last-of-type{
                border-bottom:none;
            }
                .news__time{
                    font-size:.875rem;
                    position:absolute; top:20px; left:0;
                    opacity:.65;
                }
                .news__type{
                    display:inline-block;
                    vertical-align:middle;
                    position:absolute; top:20px; left:115px;
                    padding:5px 6px;
                    border-radius:30px;
                    font-size:.875rem;
                    line-height:1.15;
                    text-align:center;
                    width:150px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
                    .news__type i{
                        display:block;
                        position:absolute; top:0; left:0;
                        width:100%;
                        height:100%;
                        opacity:.08;
                    }
                .news__title{
                    margin:0;
                    font-size:1.125rem; font-weight:400;
                    letter-spacing:.5px;
                }
                .is-sticky .news__title{
                    font-weight:700;
                }
                    .news__title a{
                        display:inline-block;
                        position:relative;
                        color:#000;
                        transition:.3s;
                    }
                    .news__title a:hover{
                        color:#09F;
                    }
                    .is-sticky .news__title a::before{
                        content:"*";
                        color:red;
                        position:absolute; left:-.55em;
                    }
@media screen and (max-width:1024px){
    .home-news{
        padding:60px 0;
    }
        .home-news__inner{
            display:block;
        }
            .news__header{
                margin-bottom:30px;
            }
                .news__header__inner{
                    position:relative; top:auto;
                    display:flex;
                    flex-wrap:wrap;
                    align-items:center;
                }
                    .news__header .home__title{
                        margin-bottom:0;
                    }
                        .news__header .btn-more{
                            position:absolute; right:0; top:20px;
                        }
                    .home-news__category{
                        display:flex;
                        flex-wrap:wrap;
                        margin:20px 0 0;
                    }
                        .news__category__item{
                            padding:3px .5em 3px 0;
                        }
                            .news__category__link{
                                
                            }
            .news__list{
                padding-left:0;
            }
                .news__title{
                    letter-spacing:0px;
                }
}
@media screen and (max-width:768px){
    .home-news{
        padding:50px 0;
    }
        .home-news__category{
            margin:10px 0 0;
            padding:0;
        }
            .news__header .btn-more{
                top:12px;
                transform:translateY(0);
            }
        .news__item{
            padding-left:10px; padding-right:10px;
        }
        .news__item:first-child{
            padding-top:0;
        }
            .news__time{
                position:static;
            }
            .news__type{
                position:relative; top:auto; left:auto;
                margin-left:10px;
                padding-left:10px; padding-right:10px;
                width:auto;
                max-width:calc(100% - 100px);
            }
            .news__title{
                margin-top:8px;
            }
}

/*-------------------------------------------
Quick Links
-------------------------------------------*/
.home-quick-links{
    background:url(/images/bg_color.jpg) no-repeat 50% 50%;
    background-size:cover;
    padding:80px 60px;
    position:relative;
    overflow:hidden;
}
    .home-quick-links::before{
        content:"";
        display:block;
        background-color:#fff;
        opacity:.65;
        position:absolute; top:0; left:0; right:0; bottom:0;
    }
    .quick-links__list{
        list-style:none;
        margin:0 -10px;
        padding:0;
        position:relative; z-index:2;
        display:flex;
        flex-wrap:wrap;
        font-size:1rem;
        line-height:1.2;
    }
        .quick-links__item{
            flex:1 0 auto;
            width:auto;
            align-items:center;
            text-align:center;
            padding:10px;
        }
            .quick-links__link{
                display:block;
                background-color:#fff;
                border-radius:5px;
                padding:15px 20px;
                color:#333;
                transition:.2s;
            }
            .quick-links__link:focus,
            .quick-links__link:hover{
                box-shadow:inset 0 0 0 2px var(--doctor-primary);
                color:#000;
                outline:none;
            }
                .quick-links__icon{
                    display:block;
                    margin:0 auto 10px;
                    /* width:auto; */
                    height:64px;
                    background-image:url(/images/icon-open-new-blue.svg);
                    background-repeat:no-repeat;
                    background-position:50% 50%;
                    background-size:auto 64px;
                }
                .quick-links__icon.is-default{
                    /* background-size:80%; */
                }
@media screen and (max-width:1280px){
    .home-quick-links{
        padding:60px 40px;
    }
}
@media screen and (max-width:1024px){
    .home-quick-links{
        padding:60px 30px;
    }
}
@media screen and (max-width:768px){
    .home-quick-links{
        padding:50px 15px;
    }
        .quick-links__list{
            margin:0;
        }
            .quick-links__item{
                flex-basis:50%;
                text-align:left;
            }
                .quick-links__link{
                    display:flex;
                    align-items:center;
                }
                    .quick-links__icon{
                        display:inline-block;
                        background-size:contain;
                        width:64px;
                        vertical-align:middle;
                        margin:0 10px 0 0;
                    }
}
@media screen and (max-width:576px){
    .quick-links__list{
        margin:0 -5px;
        font-size:.875rem;
    }
        .quick-links__item{
            padding:5px;
        }
            .quick-links__link{
                flex-direction:column;
                padding:10px 8px;
                height:100%;
            }
                .quick-links__icon{
                    display:block;
                    margin:0 auto 6px;
                    aspect-ratio:1;
                    width:50px;
                    height:auto;
                }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .quick-links__icon{
        width:12vw;
    }
}
@media screen and (max-width:390px){/* i12-i13, i12-i13 Pro, i14 , i16e*/
    .quick-links__list{
        margin:0 -10px;
        font-size:4vw;
    }
}

/*-------------------------------------------
Calendar
-------------------------------------------*/
.home-calendar{
    padding:100px 0;
    position:relative; z-index:0;
}
    .home-calendar::after{
        content:"";
        display:block;
        background-color:#fff8e4;
        position:absolute; top:25%; left:30%; right:5%; bottom:5%;
    }
    .home-calendar__inner{
        background-color:#fff;
        border-radius:5px;
        padding:60px; padding-left:0;
        position:relative; z-index:1;
        margin-right:60%;
    }
        .cal__current{
            position:relative;
            margin-bottom:30px;
        }
            .cal__date{
                margin:0;
                color:#000;
                font-size:4rem; font-weight:700;
                line-height:1;
            }
                .cal__year{
                    display:block;
                    color:#999;
                    font-size:1rem; font-weight:400;
                    position:absolute; top:-1em;
                }
                .cal__date::after{
                    content:"";
                    display:block;
                    border-bottom:2px solid var(--doctor-primary);
                    width:40px;
                    margin-top:15px;
                }
            .cal__current .btn-more{
                position:absolute; top:50%; right:0;
                transform:translateY(-50%);
            }
        .cal__table{
            border-collapse:collapse;
        }
            .cal__table thead th{
                font-size:1rem; font-weight:400;
                border-bottom:2px solid #e3e3e3;
            }
                .cal__table thead th .week__text{
                    font-size:.875rem;
                }
            .cal__table thead th:nth-child(1),
            .cal__table thead th:nth-child(7){
                color:FireBrick;
            }
            .cal__table tbody td{
                font-size:1rem; line-height:40px;
                text-align:center;
                position:relative;
                padding:10px 5px 0;
            }
            .cal__table tbody tr td:last-child{
                border-right:none;
            }
                .cal__table .cal__link{
                    display:inline-block;
                }
                    .cal__table .day{
                        display:inline-block;
                        color:#ccc;
                        border-radius:50%;
                        width:40px;
                        position:relative;
                        transition:.3s;
                    }
                    .cal__table .cal__link .day{
                        color:#111;
                        background-color:#f1f1f1;
                    }
                    .cal__table .cal__link:hover .day{
                        color:#fff;
                        background-color:var(--common-black);
                    }
                    .cal__table .today .day{
                        color:#000;
                        font-size:1.5rem; font-weight:700;
                    }
                        .event__count{
                            display:inline-block;
                            background-color:#e60023;
                            border-radius:50%;
                            min-width:18px;
                            height:18px;
                            color:#fff;
                            font-size:.75rem; line-height:18px;
                            text-align:center;
                            position:absolute; top:-6px; right:-6px;
                        }
@media screen and (max-width:1280px){/* Air Mac */
    .cal__table thead th .week__text{
        display:none;
    }
}
@media screen and (max-width:1024px){
    .home-calendar{
        padding:60px 0;
    }
        .cal__date{
            font-size:3.5rem;
        }
        .home-calendar__inner{
            padding:50px 40px;
            margin-right:50%;
        }
}
@media screen and (max-width:992px){
    .home-calendar::after{
        display:none;
    }
    .home-calendar__inner{
        margin-right:0;
    }
}
@media screen and (max-width:576px){
    .home-calendar{
        padding:50px 0 60px;
    }
        .home-calendar__inner{
            padding:30px 20px 50px;
        }
            .cal__current{
                margin-bottom:15px;
            }
            .cal__table tbody td{
                font-size:.875rem;
                line-height:34px;
                padding:10px 2px 0;
            }
                .cal__table .day{
                    width:34px;
                }
                .cal__table .today .day{
                    font-size:1.125rem;
                }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .home-calendar__inner{
        padding:30px 5px 50px;
    }
}

/*-------------------------------------------
Photo
-------------------------------------------*/
.home-photo{
    position:absolute; top:0; left:45%; right:0; z-index:2;
    height:100%;
}
    .home-photo__content{
        position:relative;
        height:100%;
    }
        .home-photo__img{
            position:absolute;
            /* transition:.1s; */
            will-change:transform;
        }
        .home-photo__img:nth-of-type(1){
            width:40%;
            z-index:2; left:50px; top:14%;
        }
        .home-photo__img:nth-of-type(2){
            width:50%;
            z-index:3; right:0; top:45%;
        }
        .home-photo__img:nth-of-type(3){
            width:37%;
            z-index:1; left:10px; top:70%;
        }
            .home-photo__img figure{
                margin:0;
                position:absolute; top:0; left:0;
                width:100%;
                height:0;
                padding-bottom:72%;
                background-position:50% 50%;
                background-repeat:no-repeat;
                background-size:cover;
            }
@media screen and (max-width:1024px){
    .home-photo{
        left:52%;
    }
        .home-photo__img:nth-of-type(1){
            top:13%;
        }
        .home-photo__img:nth-of-type(2){
            top:40%;
        }
        .home-photo__img:nth-of-type(3){
            top:64%;
        }
}
@media screen and (max-width:992px){
    .home-photo{
        position:relative; left:auto; right:auto;
        height:350px;
    }
        .home-photo__img:nth-of-type(1){
            top:0%; left:auto; right:0;
            width:35%;
        }
        .home-photo__img:nth-of-type(2){
            top:25%; left:0; right:auto;
            width:55%;
        }
        .home-photo__img:nth-of-type(3){
            top:75%; left:auto; right:15%;
            width:35%;
        }
        .home-photo::after{
            content:"";
            display:block;
            background-color:#fff8e4;
            position:absolute; top:5%; left:-20px; right:20%; bottom:5%;
        }
}
@media screen and (max-width:576px){
    .home-photo{
        height:300px;
    }
        .home-photo__img:nth-of-type(1){
            top:-12%;
        }
        .home-photo__img:nth-of-type(2){
            top:10%;
        }
        .home-photo__img:nth-of-type(3){
            top:63%;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .home-photo{
        height:240px;
    }
        .home-photo__img:nth-of-type(1){
            top:-10%;
            width:35%;
        }
        .home-photo__img:nth-of-type(2){
            top:20%;
            width:58%;
        }
        .home-photo__img:nth-of-type(3){
            top:75%; right:5%;
            width:40%;
        }
}

/*-------------------------------------------
Event List
-------------------------------------------*/
.home-events{
    padding:100px 0;
    position:relative;
}
    .events__header{
        position:relative; z-index:1;
    }
        .events__header .btn-more{
            position:absolute; top:50%; right:0;
            transform:translateY(-50%);
        }
    .event__list{
        position:relative; z-index:2;
    }
        .event__item{
            position:relative;
        }
            .event__card{
                display:flex;
            }
                .event__cover{
                    position:relative; z-index:1;
                    width:40%;
                    margin:0;
                }
                    .event__cover img{
                        display:block;
                        width:100%;
                        pointer-events:none;
                    }
                .event__content{
                    position:relative; z-index:2;
                    flex:1 1 0;
                    background-color:rgba(255,255,255,.9);
                    backdrop-filter:blur(4px);
                    -webkit-backdrop-filter:blur(4px);
                    border-radius:5px;
                    box-shadow:0 5px 15px rgba(0,0,0,.1);
                    min-height:262px;
                    padding:30px;
                    margin-top:30px; margin-bottom:15px; margin-left:-45px;
                }
                    .event__title{
                        margin:0 0 20px;
                        font-size:1.5rem; font-weight:700;
                        line-height:1.2;
                        position:relative;
                    }
                        .event__title a{
                            color:#000;
                            transition:.2s;
                        }
                        .event__title a:hover{
                            color:#09F;
                        }
                    .event__date{
                        background:url(../images/icon-event.svg) 0 2px no-repeat;
                        background-size:auto 18px;
                        padding-left:24px;
                        color:#000;
                        font-weight:700; line-height:24px;
                        letter-spacing:1px;
                    }
                    .event__info{
                        color:#777;
                        line-height:24px;
                    }
                        .event__info > div{
                            margin-bottom:5px;
                        }
                        .event__info .separate{
                            display:inline-block;
                            color:#ccc;
                            font-family:sans-serif;
                            padding:0 5px;
                        }
                        .event__place{
                            background:url(../images/icon-place.svg) 0 2px no-repeat;
                            background-size:auto 18px;
                            padding-left:24px;
                        }
                        .event__host{
                            background:url(../images/icon-host-organizer.svg) 0 2px no-repeat;
                            background-size:auto 18px;
                            padding-left:24px;
                        }
                        .event__type{
                            background:url(../images/icon-verified.svg) 0 2px no-repeat;
                            background-size:auto 18px;
                            padding-left:24px;
                        }
                            .event__type a{
                                display:inline-block;
                                color:#777;
                            }
                            .event__type a:hover{
                                display:inline-block;
                                color:#09F;
                            }
                            .event__socre{
                                display:inline-block;
                            }
                        .event__apply-info{
                            background:url(../images/icon-info.svg) 0 2px no-repeat;
                            background-size:auto 18px;
                            padding-left:24px;
                        }
        .event__list .owl-dots{
            bottom:-25px;
        }
    .home-events::after{
        content:"";
        display:block;
        background-color:#fff8e4;
        position:absolute; left:0; right:0; bottom:0; z-index:0;
        height:50%;
    }
@media screen and (max-width:1440px){
    .event__card{
        margin:0 20px;
    }
}
@media screen and (max-width:1280px){/* Air Mac */
    .event__title{
        font-size:1.25rem;
    }
}
@media screen and (max-width:1024px){
    .home-events{
        padding:80px 0;
    }
        .event__content{
            padding:30px;
        }
}
@media screen and (max-width:992px){
    .home-events{
        padding:60px 0;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .home-events{
        padding-top:40px; padding-bottom:70px;
    }
        .event__card{
            display:block;
        }
            .event__cover{
                width:80%;
                margin-left:-20px;
            }
            .event__content{
                min-height:240px;
                margin-top:-40px; margin-left:0;
                padding:20px;
            }
                .event__title{
                    font-size:5vw;
                }
                .event__info{
                    font-size:.875rem;
                }
        .home-events::after{
            height:60%;
        }
}

/*-------------------------------------------
Banners
-------------------------------------------*/
.ban{
    background-color:#fff;
    padding:50px 0;
    position:relative; z-index:10;
}
    .ban__list{
        list-style:none;
        margin:0 -20px;
        padding:0;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
    }
        .ban__item{
            width:25%;
            padding:10px 20px;
        }
            .ban__img{
                margin:0 auto;
                text-align:center;
                width:215px;
            }
                .ban__img img{
                    display:inline-block;
                    border-radius:5px;
                    box-shadow:0 3px 8px rgba(0,0,0,.1);
                    width:100%;
                }
@media screen and (max-width:1024px){
    .ban__list{
        margin-left:-15px; margin-right:-15px;
    }
        .ban__item{
            padding-left:15px; padding-right:15px;
        }
            .ban__img{
                width:100%;
            }
}
@media screen and (max-width:820px){
    .ban__list{
        margin-left:0; margin-right:0;
    }
        .ban__item{
            padding-left:10px; padding-right:10px;
        }
}
@media screen and (max-width:768px){
    .ban__item{
        padding-left:8%; padding-right:8%;
        width:50%;
    }
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .ban__item{
        padding-left:5%; padding-right:5%;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .ban{
        padding:30px 0;
    }
        .ban__list{
            margin-left:0; margin-right:0;
        }
            .ban__item{
                width:100%;
                padding-left:0; padding-right:0;
            }
                .ban__img{
                    width:75%;
                }
}