/*
    Product : IPA
    Author : Jason
    Date : 2016-10-10
*/
/*
    ============================================================================
    ============================================================================
    ============================================================================
    Pluins
    ============================================================================
    ============================================================================
    ============================================================================
*/
/*
    SlickNav Responsive Mobile Menu v1.0.10
    (c) 2016 Josh Cope
    licensed under MIT
*/
.slicknav_btn, .slicknav_nav .slicknav_item { cursor: pointer }
.slicknav_menu, .slicknav_menu * { box-sizing: border-box }
.slicknav_btn { position: relative; display: block; vertical-align: middle; float: left; padding: .438em .625em; line-height: 1.125em }
.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar { margin-top: .188em }
.slicknav_menu .slicknav_menutxt { display: block; line-height: 1.188em; float: left; color: #fff; font-weight: 700; text-shadow: 0 1px 3px #000 }
.slicknav_menu .slicknav_icon { float: left; width: 1.125em; height: .875em; margin: .188em 0 0 .438em }
.slicknav_menu .slicknav_icon:before { background: 0 0; width: 1.125em; height: .875em; display: block; content: ""; position: absolute }
.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: .125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.25); -moz-box-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(0,0,0,.25) }
.slicknav_menu:after, .slicknav_menu:before { content: " "; display: table }
.slicknav_menu:after { clear: both }
.slicknav_nav li, .slicknav_nav ul { display: block }
.slicknav_nav .slicknav_arrow { font-size: .8em; margin: 0 0 0 .4em; float: right; }
.slicknav_nav .slicknav_item a { display: inline; }
.slicknav_nav .slicknav_row, .slicknav_nav a { display: block }
.slicknav_nav .slicknav_parent-link a { display: inline }
.slicknav_menu { *zoom:1; font-size: 16px; padding:0; }
.slicknav_nav, .slicknav_nav ul { list-style: none; overflow: hidden; padding: 0 }
.slicknav_menu .slicknav_icon-bar { background-color: #fff }
.slicknav_btn { margin: 7px 0 0 10px; border: 1px solid #FFF; text-decoration: none; text-shadow: 0 1px 1px rgba(255,255,255,.75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: transparent; }
.slicknav_nav { clear: both; color: #fff; margin: 0; font-size: .875em }
.slicknav_nav ul { margin: 0 0 0 20px }
.slicknav_nav .slicknav_row, .slicknav_nav a { padding: 5px 10px; margin: 2px 5px }
.slicknav_nav .slicknav_row:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #389fd3; color: #FFF; }
.slicknav_nav a { text-decoration: none; color: #007cc2; }
.slicknav_nav a:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #389fd3; color: #FFF; }
.slicknav_nav .slicknav_txtnode { margin-left: 15px }
.slicknav_nav .slicknav_item a, .slicknav_nav .slicknav_parent-link a { padding: 0; margin: 0; }
.slicknav_brand { float: left; color: #fff; font-size: 18px; line-height: 30px; padding: 7px 12px; height: 44px }
/*
    ============================================================================
    ============================================================================
    ============================================================================
    Initialized
    ============================================================================
    ============================================================================
    ============================================================================
*/
/*
    =====================================================
    BS 5 column fix
    =====================================================
*/
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
.col-xs-5ths { width: 20%; float: left; }

@media (min-width: 768px) {
    .col-sm-5ths { width: 20%; float: left; }
}

@media (min-width: 992px) {
    .col-md-5ths { width: 20%; float: left; }
}

@media (min-width: 1200px) {
    .col-lg-5ths { width: 20%; float: left; }
}
/*
    =====================================================
    Global
    =====================================================
*/
/*
    common
*/
body{ font-family: "Microsoft JhengHei","Helvetica Neue", Helvetica, Arial, sans-serif; }
h1,h2,h3,h4,h5,h6,li,ul,ol,p,figure{ padding: 0; margin: 0; list-style: none; }
a,a:hover,a:focus{ text-decoration: none; outline: none; }
a:hover{ opacity: .9; transition: all .3s; }
/*
    reponsive initialize
*/
.header-res{ display: none; }
.slicknav_menu{ display: none; }
/*
    icons
*/
.icon{ display: inline-block; position: relative; background-size:100% auto; background-repeat: no-repeat; vertical-align: middle; top: -2px; }
.icon-prev{ background-image: url('../images/icon/prev.png'); width: 20px; height: 20px; }
.icon-next{ background-image: url('../images/icon/next.png'); width: 20px; height: 20px; }
.icon-more{ background-image: url('../images/icon/more.png'); width: 20px; height: 20px; }
.icon-link{ background-image: url('../images/icon/link.png'); width: 14px; height: 14px; }
.icon-home{ background-image: url('../images/icon/home.png'); width: 14px; height: 14px; }
.icon-down{ background-image: url('../images/icon/down.png'); width: 18px; height: 18px; }
.icon-pdf{ background-image: url('../images/icon/pdf.png'); width: 32px; height: 32px; }
/*
    titles
*/
/* ---------------- */
.title-gray{ overflow: hidden; padding-bottom: 20px; }
.title-gray h3{ font-size: 24px; color: #434343; line-height: 30px; }
.title-gray .more{ float: right; margin-top: 5px; }
.title-gray .func-roller{ float: right; margin-top: 5px; }
.title-gray .func-roller i{ margin-left: 6px; cursor: pointer; }
/* ---------------- */
.title-main{ background: url('../images/bg-main-title.jpg') no-repeat; height: 120px; }
.title-main span{ display: table-cell; width: 100%; height: 120px; vertical-align: middle; padding: 20px; font-size: 24px; color: #FFF; }
/* ---------------- */
.title-big{ font-size: 36px; color: #5c5c5c; border-bottom: 1px solid #dbdbdb; padding: 15px 0; margin-bottom: 20px;  }
/*
    buttons
*/
.b2t{ width: 40px; height: 40px; background: url('../images/icon/b2t.png') no-repeat; position: fixed; bottom: 190px; cursor: pointer; left: 50%; margin-left: 620px; display: none; }
.btn-down{ border-radius:12px; border: 1px solid #cccccc; padding: 6px 15px; color: #a2a2a2; display: inline-block;  }
.btn-orange , .btn-orange:hover{ background: #ff8400; padding: 6px 20px; color: #FFF; font-size: 18px; border-radius: 10px; }
/*
    containers
*/
.container{ padding: 0; width: 1200px; }
.inner{ width: 1200px; margin: 0 auto; }
.sub-page{ margin-top: 20px; margin-bottom: -20px; background: url('../images/bg-main.png') repeat-y; }
.sidebar{ width: 270px; float: left; }
.main{ width: 930px; float: right; }
.page-main{ width: 850px; margin-left: 80px; padding-bottom: 60px; min-height: 700px; overflow: hidden; }
/*
    lang
*/
.lang{ background: #434343; height: 30px; text-align: right; line-height: 30px; }
.lang ul{ float: right; }
.lang li{ float: left; }
.lang a{ display: block; color: #a2a2a2; padding: 0 10px; font-size: 12px; }
.lang a.active,.lang a:hover{ background: #ffc600; color: #434343; transition: all .3s; }
/*
    header
*/
.header{ height: 80px; background: url('../images/bg-header.png') no-repeat center top; }
.header .logo{ display: block; float: left; margin-top: 8px; background: url('../images/logo.png') no-repeat; width: 192px; height: 64px; }
.header .logo-en{ width: 310px; background-image: url('../images/logo-en.png'); }
.header .logo-pt{ width: 310px; background-image: url('../images/logo-pt.png'); }
/*
    menu
*/
.menu{ float: right; }
.menu li{ float: left; }
.menu a{ display: block; color: #FFF; padding: 0 20px; font-size: 14px; text-align: center; min-width:80px; height: 80px; line-height: 80px;  }
.menu a.active,.menu a:hover{ background: url('../images/menu-active-bg.png') repeat-x; color: #FFF; transition: all .3s; }
/*
    sidebar-nav
*/
.sidebar-nav li{  border-bottom: 1px solid #e6e6e6; }
.sidebar-nav a{ background-position:right center; display: block; width: 100%; height: 74px; color: #676767; font-size: 16px; line-height: 74px; padding: 0 30px; }
.sidebar-nav a.active , .sidebar-nav a:hover{ color: #007cc2; background: url('../images/icon/arrow.png') no-repeat 90% center; }
/*
    flink
*/
.flink{ clear: both; overflow: hidden; border: 1px solid #e4e4e4; padding: 20px; }
.flink .list{ margin: 0; }
.flink .list>div{ padding: 0 6px; text-align: center; line-height: 50px; }
.flink img{ display: inline; }
/*
    footer
*/
.footer{ height: 179px; background: url('../images/bg-footer.jpg') no-repeat; overflow: hidden; margin-top: 20px; }
.footer .inner{ padding-top: 44px; }
.footer p{ text-align: center; color: #cccccc; font-size: 12px; line-height: 24px; }
.footer a{ color: #cccccc; }
/*
    mag-main
*/
.mag-main{ margin-left: 1px; }
/*
    banner-main
*/
.banner-main{ height: 120px; position: relative; overflow: hidden; }
.banner-main .words{ position: absolute; right: 20px; top: 50%; margin-top: -25px; font-size: 48px; height: 50px; line-height: 50px; color: #FFF; }
/*
    page-position
*/
.page-position{ text-align: right; line-height: 30px; margin: 10px; color: #949494; }
.page-position span{ color: #007cc2; }
.page-position em{ margin: 0 6px; }
.page-position a{ color: #949494; }
/*
    pagination
*/
.pagination{ float: right; margin-top: 30px; }
/*
    list-gallery
*/
.list-gallery{ margin: 0 -10px; }
.list-gallery>div{ padding: 0 10px; height: 190px; margin-bottom: 10px; }
.list-gallery p{ color: #737272; padding: 6px 0; }
.list-gallery figure{ position: relative; width: 196px; height: 140px; overflow: hidden; }
.list-gallery .box-video , .list-gallery .box-zoom{opacity: 0;width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.list-gallery .box-video{ background:url('../images/icon/btn-video.png') no-repeat center center; }
.list-gallery .box-zoom{ background:url('../images/icon/btn-zoom.png') no-repeat center center; }
.list-gallery a{ display: block; }
.list-gallery a:hover .box-video , .list-gallery a:hover .box-zoom{ opacity: 1; transition: all .3s; }
.list-gallery a:hover p{ color: #007cc2; }
/*
    list-magazine
*/
.list-magazine .item{ text-align: center; height: 282px; }
.list-magazine figure{ width: 140px; height: 180px; overflow: hidden; margin: 0 auto 10px auto; }
.list-magazine img{ display: inline; }
.list-magazine p{ color: #a2a2a2; margin-bottom: 10px; }
.list-magazine span>i{ margin-right: 6px; }
/*
    list-news
*/
.list-news .item{ clear: both; overflow: hidden; border-bottom: 1px solid #dbdbdb; padding-bottom: 20px; margin-bottom: 20px; }
.list-news figure{ float: left; overflow: hidden; width: 240px; height: 160px; }
.list-news .con{ margin-left: 260px; height: 160px; position: relative; }
.list-news h5{ font-size: 24px; color: #646464; padding-bottom: 20px; padding-top: 10px; }
.list-news .info{ max-height: 74px; overflow: hidden; color: #989898; }
.list-news .date{ position: absolute; right: 15px; bottom: 0; color: #FFF; background: #cfcfcf; display:block; width: 92px; height: 22px; border-radius: 22px; line-height: 22px; text-align: center; }
/*
    list-notice
*/
.list-notice li{ border-bottom: 1px solid #f1f1f1; padding: 15px 15px 15px 30px; background: url('../images/icon/dot.png') no-repeat 10px center; }
.list-notice .date{ color: #a3a3a3; float: right; }
.list-notice a{ color: #717171; font-size: 16px; }
/*
    detail-news
*/
.detail-news{ overflow: hidden; }
.detail-news h2{ color: #5c5c5c; font-size: 24px; line-height: 30px; padding: 20px 0; border-bottom: 1px solid #eaeaea; text-align: center; }
.detail-news .author{ color: #939393; text-align: center; padding: 20px 0; }
.detail-news .author span{ margin: 0 20px; }
.detail-news .content{ padding: 40px 0; }
.detail-news .content img{ max-width: 100%; }
/*
    =====================================================
    Pages
    =====================================================
*/
/*
    HOME
*/
/* ---------------- */
.home-main , .home-sidebar{ margin-top: 20px; }
.home-main{ float: left; width: 830px; }
.home-sidebar{ float: right; width: 370px; }
/* ---------------- */
.home-swiper{ width: 830px; height: 360px; position: relative; overflow: hidden; }
.home-swiper .pic>div{ position: relative; }
.home-swiper .shadow{ position: absolute; width: 100%; height: 100%; background: url('../images/banner-home-shadow.png') no-repeat; left: 0; top: 0; }
.home-swiper .con{ color: #FFF; font-size: 36px; position: absolute; bottom: 60px; right: 60px; }
.home-swiper .swiper-pagination-bullet{ width: 10px; height: 10px; background: #d1cfcd; opacity: 1; }
.home-swiper .swiper-pagination-bullet-active{ background: #169feb; }
/* ---------------- */
.home-gallery{ border: 1px solid #e4e4e4; border-bottom: none; border-top:2px solid #007cc2; height: 280px; padding: 20px; }
.home-gallery .list{ margin: 0 -10px; }
.home-gallery .list>div{ padding: 0 10px; text-align: center; }
.home-gallery figure{ margin-bottom: 10px; width: 182px; height: 120px; overflow: hidden; }
.home-gallery h5{ color: #474747; margin-bottom: 10px; }
.home-gallery .date{ font-size: 12px; color: #b3b3b3; }
.home-gallery .date i{ margin-left: 6px; }
.home-gallery .list a{ display: block; }
/* ---------------- */
.home-mag{ height: 80px; }
/* ---------------- */
.home-notice{ border: 1px solid #e4e4e4; width: 370px; height: 280px; padding: 20px; }
/* ---------------- */
.home-news{ border-right: 1px solid #e4e4e4; width: 370px; height: 280px; padding: 20px; }
/* ---------------- */
.home-list-news .top{ margin-bottom: 10px; overflow: hidden; }
.home-list-news .top figure{ float: left; width: 160px; height: 100px; overflow: hidden; }
.home-list-news .top h5{ padding-left:20px; width: 150px; height: 100px; vertical-align: middle; display: table-cell; line-height: 24px; }
.home-list-news .top a{ color: #868686; display: block; }
.home-list-news ul{ clear: both; }
.home-list-news li{ line-height: 28px; font-size: 12px; background: url('../images/icon/dot.png') no-repeat left center; padding-left: 10px; }
.home-list-news li a{ color: #868686; }
.home-list-news li span{ float: right; color: #868686; }
/*
    CONTACT
*/
.contact .map{ float: left; width: 500px; height: 280px; }
.contact ul{ padding-top: 30px; float: right; min-width: 300px; }
.contact li{ color: #747474; margin-bottom: 30px; }
.contact li a{ color: #747474; }
/*
    APPLY
*/
.apply{ background: url('../images/bg-apply.jpg') no-repeat; width: 850px; height: 500px; margin: 0 auto; position: relative; }
.apply .btn{ width: 208px; position: absolute; top: 360px; margin-left:-104px; left: 50%; padding-left: 0; padding-right: 0; }
.apply .btn i{ margin-right: 10px; top: 0; }
/*
    INFO -> FRAME
*/
.info-frame{ padding: 40px 0; }
.info-frame .item{ text-align: center; margin-bottom: 20px; }
.info-frame h6{ color: #000; font-size: 18px; padding: 15px 0; }
.info-frame p{ color: #000; }
/*
    INFO - RULES
*/
.info-rules{ padding: 40px 0; }
.info-rules h2{ color: #5c5c5c; font-size: 18px; padding-bottom: 30px; text-align: center; }
.info-rules h5{ color: #007cc2; font-size: 16px; font-weight: 700; padding-bottom: 40px; }
.info-rules p{ margin-bottom: 40px; line-height: 30px; }
/*
    ============================================================================
    ============================================================================
    ============================================================================
    For Smart Phone ( Portrait and Landscape )
    ============================================================================
    ============================================================================
    ============================================================================
*/

/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 767px) {
    /*
        reponsive initialize
    */
    .header-res{ display: block; }
    .slicknav_menu{ display: block; }
    /*
        containers
    */
    .container{ padding: 0; width: 100%; }
    .inner{ width: 100%; margin: 0; }
    .sub-page{ margin:0; background:none; }
    .sidebar{ display: none; }
    .main{ width: 100%; float: none; }
    .page-main{ width: 100%; margin:0; padding: 2rem 1rem; min-height: 100%; }
    /*
        buttons
    */
    .b2t{ display: none; }
    /*
        header
    */
    .header{ display: none; }
    /*
        lang
    */
    .lang{ display: none; }
    /*
        header-res
    */
    .header-res{ background: url('../images/bg-header.png') no-repeat center; position: relative; height: 44px; }
    .header-res #menu{ display: none; }
    /*
        logo-res
    */
    .logo-res{ background: url('../images/logo-res.png') no-repeat; width: 180px; height: 38px; position: absolute; left: 50%; margin-left: -90px; top: 2px; }
    /*
        responsive menu
    */
    .slicknav_open{ background: #084999; border-color: #084999; }
    .slicknav_parent.slicknav_open{ background: #e6e6e6;}
    .slicknav_nav{ background: #FFF; position: absolute; top: 44px; left: 0; z-index: 20; width: 100%; border-bottom: 1px solid #e6e6e6; box-shadow: 0 3px 3px rgba(0,0,0,0.1); padding: 6px 0; }
    .slicknav_nav .slicknav_row:hover a{ color: #FFF; }
    /*
        lang-res
    */
    .lang-res{ display: block; width: 44px; height: 44px; position: absolute; right: 0; top: 0; }
    .lang-res>a{ display: block; width: 44px; height: 44px; text-align: center; color: #FFF; }
    .lang-res.dropdown.open>a{ background: url('../images/menu-active-bg.png') repeat-x center; }
    .lang-res>a i{ font-size: 20px; margin-top: 12px; }
    .lang-res .dropdown-menu{ min-width: 120px; border-radius: 0; margin: 0; border: 0; }
    .lang-res .dropdown-menu a{ padding: 10px 15px; }
    .lang-res .dropdown-menu i{ margin-right: 6px; }
    /*
        titles
    */
    .title-gray{ overflow: hidden; padding-bottom: 1rem; }
    .title-gray h3{ font-size: 18px; }
    .title-big{ font-size: 2.4rem; padding: 1rem 0; margin-bottom: 1rem;  }
    /*
        flink
    */
    .flink{ border:0; border-top: 1px solid #e4e4e4; padding: 1rem; }
    .flink .list a{ display: block; }
    /*
        footer
    */
    .footer{ background: url('../images/bg-footer.jpg') no-repeat center bottom; margin-top: 3rem; }
    .footer .inner{ padding: 2.5rem 1rem 0 1rem; }
    /*
        banner-main
    */
    .banner-main{ display: none; }
    /*
        page-position
    */
    .page-position{ text-align: left; margin: 0; }
    /*
        list-gallery
    */
    .list-gallery{ margin: 0 -5px; }
    .list-gallery>div{ padding: 0 5px; height: auto; }
    .list-gallery figure{ width: 100%; height: 120px; margin-bottom: 0.5rem; }
    .list-gallery p{ line-height: 16px; height: 32px; overflow: hidden; padding: 0; }
    /*
        list-news
    */
    .list-news figure{ width: 40%; height: 100px; }
    .list-news .con{ margin-left: 40%; height: 100px; padding-left: 1rem; }
    .list-news h5{ font-size: 1.6rem; font-weight: 700; padding-bottom: 1rem; padding-top: 0; }
    .list-news .info{ max-height: 40px; line-height: 20px; }
    .list-news .date{ right: 1rem; font-size:1.2rem; height:auto; width: auto; padding: 3px 10px; border-radius: 20px; line-height: 14px; }
    /*
        pagination
    */
    .pagination{ float: none; margin-top: 1rem; }
    /*
        detail-news
    */
    .detail-news .content{ padding: 2rem 0; }
    /*
        home-main
    */
    .home-main , .home-sidebar{ margin-top: 0; }
    .home-main{ float: none; width: 100%; }
    .home-sidebar{ float: none; width: 100%; }
    /*
        home-swiper
    */
    .home-swiper{ width: 100%; height: auto; }
    .home-swiper .shadow{ display: none; }
    .home-swiper .con{ font-size: 2rem; bottom: 3rem; right: 2rem; }
    .home-swiper .swiper-pagination-bullets{ bottom:1rem; }
    /*
        home-gallery
    */
    .home-gallery{ height: auto; padding: 1rem; border: 0; }
    .home-gallery .list>div{ margin-bottom: 1rem; }
    .home-gallery figure{width: 100%; height: 120px; }
    /*
        home-mag
    */
    .home-mag{ display: none; }
    /*
        home-notice , home-news
    */
    .home-notice , .home-news{ border: 0; border-top:1px solid #e4e4e4; width: 100%; height: auto; padding: 1rem; }
    /*
        home-list-news
    */
    .home-list-news .top figure{ width: 40%; }
    .home-list-news .top h5{ width: 60%; }
    /*
        APPLY
    */
    .apply{ background-position:center top; width: 100%; height: 500px; margin: 0; }
    .apply .btn{ width: 208px; position: absolute; top: 360px; margin-left:-104px; left: 50%; padding-left: 0; padding-right: 0; }
    .apply .btn i{ margin-right: 10px; top: 0; }
    /*
        CONTACT
    */
    .contact .map{ float: none; width: 100%; height: 280px; }
    .contact ul{ padding-top: 2rem; float: none; width: 100%; }
    /*
        INFO -> FRAME
    */
    .info-frame{ padding: 2rem 0; }
    .info-frame .item{ margin-bottom: 2rem; }
    .info-frame .item:last-child{ margin-bottom: 0; }
    /*
        INFO - RULES
    */
    .info-rules{ padding: 2rem 0; }
    .info-rules h2{ color: #5c5c5c; font-size: 18px; padding-bottom: 30px; text-align: center; }
    .info-rules h5{ color: #007cc2; font-size: 16px; font-weight: 700; padding-bottom: 40px; }
    .info-rules p{ margin-bottom: 40px; line-height: 30px; }
    /*
        list-notice
    */
    .list-notice{ margin-bottom: 2rem; }
    .list-notice li{ padding: 1rem; background:none; }
    .list-notice li:nth-child(even){ background:#f6f6f6; }
    .list-notice .date{ color: #FFF; float: none; background: #c6c6c6; display: block; width: 80px; text-align: center; padding: 3px 10px; border-radius: 20px; font-size: 1.2rem; margin-bottom: 6px; }
}
/*
    ============================================================================
    ============================================================================
    ============================================================================
    For tablets ( Portrait and Landscape )
    ============================================================================
    ============================================================================
    ============================================================================
*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {

}