@charset "UTF-8";
/*===========================================
Homepage
===========================================*/
body{
    background-color:#fff;
}
.homeBackground{
    position:absolute; top:0; left:0; z-index:-1;
    width:100%;
    transform:translateZ(0);
}
    .videoContainer{
        position:relative;
        overflow:hidden;
    }
        .videoContainer:before{
            content:"";
            display:block;
            background-color:rgba(242,220,197,.4);
            position:absolute; top:0; left:0; z-index:1;
            width:100%; height:100%;
        }
        .videoBg{
            position:relative; z-index:0;
            width:100%; height:auto;
            transform:translateZ(0);
            vertical-align:top;
        }
        .videoContainer:after{
            content:"";
            display:block;
            position:absolute; bottom:0; left:0; z-index:2;
            width:100%; height:100%;
            background: rgba(255,255,255,0);
            background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(40%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
            background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
            background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
        }
@media screen and (max-width:992px){
    #homepageContainer{
        padding-top:60px;
    }
        .videoContainer{
            height:450px;
            background:url(/media/video-screen.jpg?v=20190731) no-repeat 50% 50%;
            background-size:cover;
        }
            .videoBg{
                display:none;
            }
}

/*-------------------------------------------
first
-------------------------------------------*/
.firstWrap{
    position:relative;
    min-height:800px;
    padding:80px 0;
}
    .sideContainer{
        position:relative; z-index:1;
        float:right;
        width:37.5%;
        padding-right:30px;
    }
    .newsContainer{
        position:relative; z-index:1;
        float:left;
        width:47.5%;
        padding-left:30px;
    }
    .firstWrap:before{
        content:"";
        display:block;
        position:absolute; bottom:0; left:0; z-index:0;
        width:100%; height:100%;
        background: rgba(255,255,255,0);
        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(40%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
    }
    .firstWrap:after{ /* E-Learning's bgcolor */
        content:"";
        display:block;
        border-radius:3px; border-top-right-radius:0; border-bottom-right-radius:0;
        position:absolute; top:400px; left:calc(50% + 190px); right:0; z-index:0;
        height:230px;
        background-color:rgba(242,220,197,.5);
    }
@media screen and (max-width:1200px){
    .firstWrap:after{
        left:calc(62.5% + 40px);
    }
}
@media screen and (max-width:1024px){
    .sideContainer{
        width:45%;
    }
}
@media screen and (max-width:992px){
    .firstWrap{
        padding-top:40px;
    }
        .sideContainer{
            width:100%;
            padding:0 30px;
        }
        .newsContainer{
            width:100%;
            padding:0 30px;
        }
        .firstWrap:after{
            top:40px; left:60px;
            height:0;
            padding-bottom:56.25%;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .sideContainer{
        padding:0 24px;
    }
    .newsContainer{
        padding:0 24px;
    }
}

/*-------------------------------------------
common
-------------------------------------------*/
.homeTitle{
    position:relative; z-index:2;
    margin:0;
    color:#000;
    font-size:2.75rem; font-weight:400; line-height:1;
}
.btnMore{
    background-image:url(../images/icon-btn_arrow-white.png);
    background-position:right 25px center;
    background-repeat:no-repeat;
    background-size:40px 10px;
    width:auto;
    padding:15px 25px; padding-right:75px;
    -webkit-transition:background-position .3s;transition:background-position .3s;
}
.btnMore:hover{
    background-position:right 15px center;
}
@media screen and (max-width:1024px){
    .homeTitle{
        font-size:2.25rem;
    }
}

/*-------------------------------------------
member
-------------------------------------------*/
.memberContent{
    position:relative;
    margin-top:-20px;
}
    .memberTitle{
        position:absolute; top:0; z-index:2;
        margin-top:-.5em;
    }
    .memberBlock{
        position:relative;
        background-color:rgba(255,255,255,.4);
        margin-top:20px;
        padding:35px;
        border-radius:3px;
        box-shadow:0 1px 1px rgba(0,0,0,.1);
    }
        .memberBlock input{
            width:100%;
        }
        .memberBlock .validate{
            position:absolute; right:11px;
            margin-top:2px;
            height:34px;
            overflow:hidden;
        }
        .memberBlock .btnMemberLogin{
            background-image:url(../images/icon-btn_arrow-white.png);
            background-position:right 25px center;
            background-repeat:no-repeat;
            background-size:40px 10px;
            width:auto;
            padding-right:75px;
            position:absolute; left:35px; bottom:-20px;
        }
        .memberBlock .btnMemberLogin:hover{
            background-position:right 15px center;
        }
        .memberNotice{
            font-size:.875rem; line-height:1.5;
            color:#000;
        }
        .youCan{
            padding-top:10px;
        }
            .memberBlock .memberName a{
                color:#000;
            }
            .youCan ul{
                list-style:none;
                margin:0;
                padding:0;
            }
                .youCan ul li{
                    float:left;
                    width:50%;
                    padding:3px 5px;
                    line-height:1.2;
                }
                    .youCan ul li .btn{
                        width:100%;
                    }
@media screen and (max-width:992px){
    .memberContent{
        display:none;
    }
}

/*-------------------------------------------
eLearn
-------------------------------------------*/
.eLearnContent{
    margin-top:80px;
}
    .elearnCover{
        position:relative;
        height:0;
        padding-bottom:56.25%;
        border-radius:3px;
        background-position:50% 50%;
        background-repeat:no-repeat;
        background-size:cover;
        overflow:hidden;
        margin-top:20px;
    }
        .elearnCover:before{
            content:"";
            display:block;
            background-color:rgba(0,0,0,.4);
            position:absolute; left:0; top:0;
            width:100%; height:100%;
            transition:.3s;
        }
        .elearnTitle{
            margin:0;
            position:absolute; bottom:0; z-index:3;
            width:100%;
            padding:10px 15px;
            color:white;
            line-height:1.4; font-weight:400;
        }
        .elearnCover:after{
            content:"";
            display:block;
            width:100%; height:100%;
            background-image:url(../images/icon-play_arrow-white.svg);
            background-position:50% 50%;
            background-repeat:no-repeat;
            background-size:70px 70px;
            position:absolute; left:0; top:0; z-index:1;
            transition:.3s;
        }
        .elearnLink:hover .elearnCover:before{
            background-color:rgba(0,0,0,.7);
        }
        .elearnLink:hover .elearnCover:after{
            transform:scale(1.25);
        }
        .btnLearn .btnMore{
            margin-top:15px;
            background-image:url(../images/icon-open_in_new-white.svg);
            background-size:24px 24px;
            padding-right:55px;
        }
@media screen and (max-width:992px){
    .eLearnContent{
        margin-top:0;
    }
}

/*-------------------------------------------
news
-------------------------------------------*/
.newsContent{
    position:relative;
}
    .newsTypeTabs{
        position:absolute; top:5px; left:200px; z-index:5;
        font-size:.875rem; line-height:1;
    }
        .newsTypeLink{
            display:inline-block;
            color:#000;
            padding:10px 0;
            margin:0 10px;
            border-bottom:2px solid transparent;
            -webkit-transition:.2s;transition:.2s;
        }
        .newsTypeLink:hover{
            color:#004fa0;
            border-bottom:2px solid #004fa0;
        }
        .newsTypeLink.active{
            color:#000;
            border-bottom:2px solid #004fa0;
        }
    .newsTabContent{
        position:relative;
    }
        .newsList{
            list-style:none;
            margin:0;
            padding:20px 0 0;
            opacity:0;
            position:absolute; top:0; z-index:-1;
            width:100%;
            transition:.3s;
            pointer-events:none;
        }
        .newsList.active{
            position:relative; z-index:5;
            opacity:1;
            pointer-events:auto;
        }
            .newsItem{
                position:relative;
                padding-top:10px; padding-left:40px;
            }
                .newsLink{
                    display:block;
                    background-color:rgba(255,255,255,.4);
                    padding:20px; padding-left:28px;
                    border-radius:3px;
                    color:#000;
                    line-height:1.4;
                    box-shadow:0 1px 3px rgba(0,0,0,.1);
                    transition:.2s;
                }
                .sticky .newsLink{
                    color:#d32a2a;
                }
                .newsLink:hover{
                    background-color:rgba(255,255,255,1);
                    color:#004fa0;
                    box-shadow:0 3px 8px rgba(0,0,0,.2);
                }
                    .newsDate{
                        color:#000;
                        font-size:.85rem; line-height:1;
                    }
                        .newsDate .newsDay{
                            font-size:3rem; font-weight:400; line-height:1;
                            transform:skewX(-10deg);
                            position:absolute; left:0;
                            margin-top:-2px;
                        }
                    .newsTitle{
                        margin:8px 0 0;
                    }
    .btnMoreNews{
        margin-top:15px;
    }
@media screen and (max-width:1024px){
    .newsTypeTabs{
        top:-2px; left:155px;
    }
        .newsTypeLink{
            margin:0 5px;
        }
}
@media screen and (max-width:992px){
    .newsContent{
        margin-top:80px;
    }
        .newsTypeTabs{
            left:175px;
        }
            .newsTypeLink{
                margin:0 10px;
            }
        .newsItem{
            padding-bottom:5px;
        }
            .newsLink{
                padding:10px 20px;
                background-color:#fffaf7;
                box-shadow:0 2px 5px rgba(0,0,0,.15);
            }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .newsTypeTabs{
        position:static;
        margin-top:15px;
    }
}

/*-------------------------------------------
events
-------------------------------------------*/
.eventsWrap{
    position:relative;
    background-color:#fff;
    min-height:470px;
    padding-top:30px; padding-bottom:85px;
}
    .eventsWrap:before{
        content:"";
        display:block;
        background-color:#f2dcc5;
        border-radius:3px; border-top-left-radius:0; border-bottom-left-radius:0;
        position:absolute; top:30px; left:0;
        width:calc((100% - 1200px) / 2 + (1200px * .90833));
        height:300px;
    }
        .eventsContent{
            position:relative; z-index:1;
            padding:0 30px;
        }
            .eventsTitle{
                top:-.5em;
            }
            .eventItem{
                padding:30px 8px;
            }
                .eventLink{
                    display:block;
                    /* background-color:#fdf4ee; */
                    background-color:#fff;
                    min-height:250px;
                    padding:0 20px 20px;
                    border-radius:3px;
                    color:#000;
                    line-height:1.4;
                    box-shadow:0 1px 3px rgba(0,0,0,.1);
                    transition:.3s;
                }
                .eventLink:hover{
                    /* background-color:rgba(255,255,255,1); */
                    color:#004fa0;
                    box-shadow:0 3px 8px rgba(0,0,0,.2);
                }
                    .eventHost .eventLink:before{
                        content:"";
                        display:inline-block;
                        width:24px; height:24px;
                        background:url(../images/icon-gest.png?v=20190730) no-repeat;
                        background-size:24px 24px;
                        position:absolute; left:18px; 
                        margin-top:10px;
                    }
                    .eventDate{
                        display:block;
                        background-color:rgba(242,220,197,.5);
                        padding:28px 0 15px;
                        color:#000;
                        font-weight:700; line-height:1;
                        text-align:center;
                        margin:0 -20px;
                        transition:.3s;
                    }
                        .eventDate .eventDay{
                            font-size:3.8rem; font-weight:400; line-height:1;
                            transform:skewX(-10deg);
                            position:absolute; top:0; left:0;
                            width:100%;
                        }
                    .eventLink:hover .eventDate{
                        background-color:rgba(242,220,197,1);
                    }
                    .eventTitle{
                        margin:15px 0;
                        line-height:1.4;
                    }
                    .eventPlace,
                    .eventOrganizer,
                    .eventScore{
                        color:#666;
                        font-size:.85rem; line-height:18px;
                        background-position:0 0;
                        background-repeat:no-repeat;
                        background-size:18px 18px;
                        padding-left:24px;
                        margin-bottom:5px;
                        word-break:break-word;
                    }
                    .eventPlace{
                        background-image:url(../images/icon-loaction.svg);
                    }
                    .eventOrganizer{
                        background-image:url(../images/icon-organizer.svg);
                    }
                    .eventScore{
                        padding-left:0;
                        color:#000;
                    }
                        .eventScore strong{
                            color:#ff9600;
                        }
                .swiper-button-prev,
                .swiper-button-next{
                    background:none;
                }
@media screen and (max-width:1200px){
    .eventsWrap:before{
        width:calc(100% * .90833);
    }
}
@media screen and (max-width:992px){
    .eventsWrap{
        padding-top:20px;
    }
        .eventsWrap:before{
            top:20px;
        }
        .eventLink{
            background:#fff;
            box-shadow:0 2px 5px rgba(0,0,0,.15);
        }
            .eventDate{
                background-color:rgba(242,220,197,.5);
            }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .eventsWrap:before{
        width:86%; height:56%;
    }
    .eventsContent{
        padding:0;
    }
        .eventsTitle{
            padding:0 24px;
        }
        .eventItem{
            width:70%;
        }
        .btnMoreEvents{
            padding-left:24px;
        }
}

/*-------------------------------------------
gallery
-------------------------------------------*/
.galleryWrap{
    position:relative;
    background-color:#fff;
    min-height:360px;
    padding-bottom:85px;
}
    .galleryWrap:before{
        content:"";
        display:block;
        background-color:#f2dcc5;
        border-radius:3px; border-top-right-radius:0; border-bottom-right-radius:0;
        position:absolute; top:0; right:0;
        width:calc((100% - 1200px) / 2 + (1200px * .90833));
        height:330px;
    }
        .galleryContent{
            position:relative; z-index:1;
            padding:55px 30px 0;
        }
            .galleryPhoto{
                width:43.33333%;
            }
            .galleryPhoto.photoStraight{
                width:20%;
                margin-top:-2px;
            }
                .galleryPhoto figure{
                    margin:0;
                    height:0;
                    padding-bottom:66.734%;
                    border-radius:3px;
                    background-repeat:no-repeat;
                    background-position:50% 50%;
                    background-size:cover;
                }
                .galleryPhoto.photoStraight figure{
                    padding-bottom:150%;
                }
            .galleryInfo{
                position:absolute; top:55px; left:43.33333%; right:0;
                padding:0 30px 0 40px;
            }
            .galleryInfo.photoStraight{
                left:calc(20% + 20px);
            }
                .galleryTitle{
                    margin:0;
                    padding-top:.5em;
                    line-height:1.2;
                    transition:.3s;
                }
                .photoStraight .galleryTitle{
                    padding-top:0;
                }
                .galleryDate{
                    display:block;
                    background:url(../images/icon-event.svg) no-repeat 0 50%;
                    background-size:18px 18px;
                    padding-left:24px;
                    margin-top:5px;
                }
            .btnMoreGallery{
                position:absolute; top:175px; left:40px;
            }
@media screen and (max-width:1200px){
    .galleryWrap:before{
        width:calc(100% * .90833);
    }
        .galleryTitle{
            font-size:2.5rem;
        }
}
@media screen and (max-width:1024px){
    .galleryWrap:before{
        height:72%;
    }
        .galleryTitle{
            font-size:2.25rem;
            padding-top:0;
        }
        .btnMoreGallery{
            top:145px;
        }
}
@media screen and (max-width:992px){
    .galleryWrap:before{
        height:80%;
    }
}
@media screen and (max-width:667px){/* i6,i7,i8 Landscape */
    .galleryTitle{
        font-size:2rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .galleryWrap:before{
        width:86%; height:46%;
    }
    .galleryContent{
        padding:30px 24px 0;
    }
        .galleryPhoto{
            width:100%;
        }
        .galleryPhoto.photoStraight{
            width:62.5%;
            margin:-10px auto 0;
        }
        .galleryInfo{
            position:static;
            padding:20px 0 0;
        }
            .galleryTitle{
                font-size:1.5rem;
            }
            .btnMoreGallery{
                position:static;
                margin-top:15px;
            }
}