@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/***********************************
        CUSTOM
***********************************/
.container{
    max-width:1240px;
    width:100%;
    margin:auto;
}
.svg-icon{
    display:inline-block;
    margin-right:7px;
    vertical-align:middle;
}


/***********************************
        header section footer
***********************************/

header{
    position:relative;
    z-index:99;
    padding:15px 0;
    box-shadow:0 1px 6px #ddd;
}
h1.logo{
    text-align:center;
}
h1.logo img{
    vertical-align:middle;
}
h1.logo a{
    font-family: 'yg-jalnan' !important;
}
h1.logo a strong{
    color:#006dbb;
    font-size:34px;
}
section{
    background:#f5f5f5;
}
section .main{
    position:relative;
    background-image:url(../img/main-bg3.png); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
section .main:before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(8,20,29,0.6);
}
footer{
    border-top:1px solid #ddd;
    padding:20px 0;
}
.footer-col span.foot-address{
    display:inline-block;
    vertical-align:middle;
    color:#666;
    position:absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
}

.footer-col .foot-tel{
    text-align:right;
}
.footer-col .foot-tel p{
    font-size:18px;
    font-weight:500;
    color:#666;
}
.footer-col .foot-tel a{
    display:inline-block;
    color:#80c034;
    font-size:24px;
    font-weight:700;
}

/***********************************
        header section footer
***********************************/


/***********************************
        main content
***********************************/


@media (min-width:991px){
    .flip-card{
        perspective: 1000px;
    }
    .flip-card-inner{
        transition: transform 0.6s ease-in;
        transform-style: preserve-3d;
    }
    .flip-card-front:hover, .flip-card-back:hover{
        -webkit-transition:0.55s ease-in;
        -moz-transition:0.55s ease-in;
        transition:0.55s ease-in;
    }
    .flip-card-front, .flip-card-back{
        -ms-transition:0.55s ease-in;
    }
    .flip-card-front{
        -moz-backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
    }
    .flip-card-back{
        z-index:1;
        transform:rotateY(180deg);
    }
    .flip-card:hover .flip-card-inner{
        transform: rotateY(180deg);
    }
    .flip-card:hover .flip-card-back{
        z-index:3;
    }
}


.info{
    padding:55px 0;
}
.info .info-box{
    position:relative;
    margin:10px;
    float:left;
}
.info .info-large-box{
    width:calc(40% - 20px);
}
.info .info-box-basic{
    width:calc(60% - 20px);
}
.info .info-large-box .card-box{
    height:490px;
}
.info .info-box .info-box-inner{
    margin-top:20px;
    padding:16px 0;
    box-sizing:border-box;
    border-radius:15px;
    overflow:hidden;
    text-align:center;
    background:#fff;
    border:1px solid #ccc;
}
.info-large-box .card-box .card-box-front{
    padding:120px 30px;
}
.info-large-box .card-box .card-box-front .card-box-img{
    max-width:250px;
}
.info .info-box .info-box-inner .info-box-txt a{
    display:block;
    font-size: 30px;
    color: #666;
}
.info .info-box .info-box-inner .info-box-txt a span{
    display:inline-block;
    max-width:70px;
    vertical-align:middle;
    margin-right:15px;
}
.info .info-box .info-box-inner .info-box-txt a span img{
    max-width:100%;
}


.card-box{
    position:relative;
    border-radius:5px;
    width:100%;
    height:300px;
}
.card-box .card-box-inner{
    position:relative;
    height:100%;
}
.card-box .card-box-front, .card-box-back{
    position:absolute;
    width:100%;
    height:100%;
    padding:30px;
    box-sizing:border-box;
    border-radius:15px;
    overflow:hidden;
}
.card-box .card-box-front{
    background:#fff;
    border:1px solid #ccc;
    box-sizing:border-box;    
    z-index:2;
    padding:50px 30px;
}
.card-box .card-box-front .card-box-img{
    position:relative;
    border-radius:50%;
    max-width:180px;
    margin:0 auto 40px;
}
.card-box .card-box-front .card-box-img:before{
    content:"";
    display:block;
    padding-top:65%;
}
.card-box .card-box-front .card-box-img img{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    max-width:100%;
    height:auto;
    max-height:100%;
}
.card-box-txt{
    text-align:center;
}
.card-box-txt p{
    font-size:30px;
    color:#666;
    font-weight:500;
}
.card-box1 .card-box-txt p{
    color:#006dbb;
}
.card-box2 .card-box-txt p{
    color:#01b4e2;
}
.card-box3 .card-box-txt p{
    color:#84c23a;
}
.card-box4 .card-box-txt p{
    color:#f18b1e;
}
.card-box5 .card-box-txt p{
    color:#e00012;
    /* color:#069288; */
}

.card-box-back{
    color:#fff;
}
.card-box1 .card-box-back{
    background-color:#006dbb;
}
.card-box2 .card-box-back{
    background-color:#01b4e2;
}
.card-box3 .card-box-back{
    background-color:#84c23a;
}
.card-box4 .card-box-back{
    background-color:#f18b1e;
}
.card-box5 .card-box-back{
    /* background-color:#e00012; */
    background-color: #069288;
}
.card-box-back .card-box-back-tit{
    margin-bottom:15px;
    padding-bottom:10px;
    border-bottom:1px solid #fff;
}
.card-box-back .card-box-back-tit p{
    font-size:24px;
}
.card-box-back ul{
    height:calc(100% - 57px);
    overflow-y:auto;
}
.card-box-back ul li{
    margin-bottom:10px;
}
.card-box-back ul li:last-child{
    margin:0;
}
.card-box-back ul li a{
    color:#fff;
    font-size:18px;
    /* opacity:0.9; */
}

.info-column{
    width:calc(50% - 20px);
    float:left;
    margin:0 10px 20px;
}
.info-column:nth-of-type(3), .info-column:nth-of-type(4){
    margin-bottom:0;
}



@media (max-width:991px){
    h1.logo a{
        font-size:20px;
    }
    h1.logo img{
        display:none;
    }
    .row{
        padding:0 15px;
        box-sizing:border-box;
    }
    .footer-col{
        width:100%;
        float:none;
        text-align:center;
    }
    .footer-col span{
        display:block;
    }
    .footer-col span.foot-address{
        margin:0;
        position:relative;
        top:auto;
        left:auto;
        transform: translate(0);
    }
    .footer-col .foot-tel{
        margin-top:20px;
        text-align:center;
    }


    .info .info-box .info-box-inner{
        margin-top:10px;
        padding:20px 0;
    }
    .info .info-box .info-box-inner .info-box-txt a{
        font-size:20px;
    }
    .card-box .card-box-front{
        display:none;
    }
    .card-box .card-box-back{
        position:relative;
    }
    .info{
        padding:20px 0;
    }
    .info .info-large-box{
        width:100%;
        margin:0 0 10px;
        float:none;
    }
    .info .info-large-box .card-box{
        height:auto;
    }
    .card-box-back .card-box-back-tit p{
        font-size:20px;
    }
    .card-box-back ul li a{
        font-size:16px;
    }
    .card-box .card-box-front, .card-box-back{
        padding:15px;
    }
    .card-box{
        height:auto;
    }
    .info .info-box-basic{
        margin:0;
        width:100%;
        float:none;
    }
    .card-box1 .card-box-back{
        background-image: url(../img/card-img1-1.png);
        background-repeat: no-repeat;
        background-position:right 10px bottom 20px;
        background-size:150px;
    }
    .card-box2 .card-box-back{
        background-image: url(../img/card-img2-1.png);
        background-repeat: no-repeat;
        background-position:right 10px bottom 20px;
        background-size:150px;
    }
    .card-box3 .card-box-back{
        background-image: url(../img/card-img3-4.png);
        background-repeat: no-repeat;
        background-position:right 10px bottom 20px;
        background-size:150px;
    }
    .card-box4 .card-box-back{
        background-image: url(../img/card-img4.png);
        background-repeat: no-repeat;
        background-position:right 10px bottom 20px;
        background-size:150px;
    }
    .card-box5 .card-box-back{
        background-image: url(../img/card-img5-1.png);
        background-repeat: no-repeat;
        background-position:right 10px bottom 20px;
        background-size:150px;
    }
}

@media (max-width:750px){
    .info-column{
        width:100%;
        margin:0 0 10px !important;
    }
    .card-box5 .card-box-back{
        background-image:none;
    }
}