@charset "UTF-8";
/*
 2025-11-19
*/

@media only screen and (min-width: 1921px) {

    #rightbtn #preregister {
        width: calc(134/1920*100vw);
        height: calc(140/1920*100vw);
        top: calc(-153/1920*100vw);
    }

    #topswiper .top_swiper img {
        width: 100%;
        height: auto;
    }

    section#kv {
        height: calc(1110/1920*100vw);
    }

    /* 20220616 */
    .back {
        line-height: calc(35/1920*100vw);
    }
    /* 20220616 */

    /*MAIN IMAGES*/
    .img2,
    #qr:after {
        background-size: calc(1089/1920*100vw) auto !important;
    }

    html:lang(zh-hant) #kv .slogan,
    html:lang(zh-hans) #kv .slogan {
        display: block;
        width: calc(56/1920*100vw);
        height: calc(416/1920*100vw);
        left: calc(23/1920*100vw);
        top: 4%;
    }

    #kv .title {
        width: calc(1033/1920*100vw);
        height: calc(378/1920*100vw);
        background-position: calc(-56/1920*100vw) 0 !important;
    }

    #kv .play {
        width: calc(123/1920*100vw);
        height: calc(123/1920*100vw);
    }

    /*MAIN IMAGES*/
    #kv .play:before,
    #kv .play:after,
    .img {
        background-size: calc(719/1920*100vw) auto !important;
    }

    #kv .play:before {
        background-position: 0 calc(-66/1920*100vw) !important;
    }

    #kv .play:after {
        width: calc(29/1920*100vw);
        height: calc(34/1920*100vw);
        background-position: calc(-370/1920*100vw) calc(-66/1920*100vw) !important;
    }

    #menu {
        width: calc(719/1920*100vw);
        height: calc(66/1920*100vw);
    }

    #menu span {
        width: calc(26/1920*100vw);
        height: calc(26/1920*100vw);
        background-position: calc(-378/1920*100vw) calc(-141/1920*100vw) !important;
    }

    #menu li {
        width: calc(68/1920*100vw);
        height: calc(18/1920*100vw);
        margin-left: calc(73/1920*100vw);
    }
    #menu li.page1 {
        background-position: calc(-56/1920*100vw) calc(-378/1920*100vw) !important;
    }
    #menu li.page2 {
        background-position: calc(-124/1920*100vw) calc(-378/1920*100vw) !important;
    }
    #menu li.page3 {
        background-position: calc(-192/1920*100vw) calc(-378/1920*100vw) !important;
    }
    #menu li.page4 {
        background-position: calc(-260/1920*100vw) calc(-378/1920*100vw) !important;
    }

    #menu li:before {
        width: calc(68/1920*100vw);
    }

    #menu li.page1.active {
        background-position: calc(-56/1920*100vw) calc(-396/1920*100vw) !important;
    }
    #menu li.page2.active {
        background-position: calc(-124/1920*100vw) calc(-396/1920*100vw) !important;
    }
    #menu li.page3.active {
        background-position: calc(-192/1920*100vw) calc(-396/1920*100vw) !important;
    }
    #menu li.page4.active {
        background-position: calc(-260/1920*100vw) calc(-396/1920*100vw) !important;
    }
    html:lang(th) #menu li.page1 {
        background-position: calc(-255/1920*100vw) calc(-379/1920*100vw) !important;
    }
    html:lang(th) #menu li.page2 {
        background-position: calc(-323/1920*100vw) calc(-379/1920*100vw) !important;
    }
    html:lang(th) #menu li.page3 {
        background-position: calc(-391/1920*100vw) calc(-379/1920*100vw) !important;
    }
    html:lang(th) #menu li.page4 {
        background-position: calc(-459/1920*100vw) calc(-379/1920*100vw) !important;
    }
    html:lang(th) #menu li.page1.active {
        background-position: calc(-255/1920*100vw) calc(-397/1920*100vw) !important;
    }
    html:lang(th) #menu li.page2.active {
        background-position: calc(-323/1920*100vw) calc(-397/1920*100vw) !important;
    }
    html:lang(th) #menu li.page3.active {
        background-position: calc(-391/1920*100vw) calc(-397/1920*100vw) !important;
    }
    html:lang(th) #menu li.page4.active {
        background-position: calc(-459/1920*100vw) calc(-397/1920*100vw) !important;
    }

    #sns li {
        width: calc(28/1920*100vw);
        height: calc(28/1920*100vw);
        background-position: calc(-294/1920*100vw) calc(-141/1920*100vw) !important;
        margin-bottom: calc(30/1920*100vw);
    }
    #sns li.baha {
        background-position: calc(-322/1920*100vw) calc(-141/1920*100vw) !important;
    }
    #sns li.yt {
        background-position: calc(-350/1920*100vw) calc(-141/1920*100vw) !important;
    }

    #qr {
        width: calc(76/1920*100vw);
        height: calc(75/1920*100vw);
        background-position: calc(-294/1920*100vw) calc(-66/1920*100vw) !important;
    }
    html:lang(zh-hant) #qr:after,
    html:lang(zh-hans) #qr:after {
        width: calc(61/1920*100vw);
        height: calc(14/1920*100vw);
        background-position: calc(-328/1920*100vw) calc(-378/1920*100vw) !important;
    }
    html:lang(en) #qr:after {
        width: calc(72/1920*100vw);
        height: calc(25/1920*100vw);
        background-position: calc(-329/1920*100vw) calc(-423/1920*100vw) !important;
    }
    html:lang(th) #qr:after {
        width: calc(63/1920*100vw);
        height: calc(33/1920*100vw);
        background-position: calc(-255/1920*100vw) calc(-418/1920*100vw) !important;
    }

    #lang {
        width: calc(102/1920*100vw);
        height: calc(28/1920*100vw);
        background-position: calc(-328/1920*100vw) calc(-392/1920*100vw) !important;
    }
    html:lang(th) #lang {
        background-position: 0 calc(-378/1920*100vw) !important;
    }

    #langopen {
        line-height: calc(28/1920*100vw);
        font-size: 0.79vw;
    }

    #kv .apps li {
        width: calc(171/1920*100vw);
        height: calc(53/1920*100vw);
        background-position: calc(-123/1920*100vw) calc(-66/1920*100vw) !important;
    }
    #kv .apps li.ios {
        background-position: calc(-123/1920*100vw) calc(-119/1920*100vw) !important;
        margin-left: calc(20/1920*100vw);
    }

    section#news {
        height: calc(641/1920*100vw);
        margin-top: calc(-25/1920*100vw);
    }

    #news .banner {
        width: calc(626/1920*100vw);
        height: calc(373/1920*100vw);
        margin-right: calc(12/1920*100vw);
    }

    #news .list {
        width: calc(764/1920*100vw);
        height: calc(373/1920*100vw);
    }

    #news .bn_swiper {
        height: calc(328/1920*100vw);
    }



    #news .bn_nav li {
        width: calc(46/1920*100vw);
        height: calc(45/1920*100vw);
        background-position: calc(-399/1920*100vw) calc(-66/1920*100vw) !important;
    }

    #news .bn_title {
        font-size: 0.89vw;
        padding-left: calc(18/1920*100vw);
        line-height: calc(45/1920*100vw);
    }

    #progress {
        height: calc(3/1920*100vw);
    }

    .tabs {
        height: calc(17/1920*100vw);
    }
    html:lang(th) .tabs {
        height: calc(23/1920*100vw);
    }
    .tabs .nav {
        height: calc(2/1920*100vw);
    }
    html:lang(zh-hant) .tabs .nav,
    html:lang(zh-hans) .tabs .nav {
        width: calc(60/1920*100vw);
    }
    html:lang(en) .tabs .nav {
        width: calc(80/1920*100vw);
    }
    html:lang(th) .tabs .nav {
        width: calc(71/1920*100vw);
    }

    html:lang(zh-hant) .tabs li,
    html:lang(zh-hans) .tabs li {
        width: calc(34/1920*100vw);
        height: calc(17/1920*100vw);
        margin: 0 calc(25/1920*100vw);
    }
    html:lang(en) .tabs li {
        width: calc(53/1920*100vw);
        height: calc(17/1920*100vw);
        margin: 0 calc(16/1920*100vw);
    }
    html:lang(th) .tabs li {
        width: calc(63/1920*100vw);
        height: calc(23/1920*100vw);
        margin: 0 calc(16/1920*100vw);
    }

    #news .tabs.t1 .nav {
        left: 0;
    }
    html:lang(zh-hant) #news .tabs.t2 .nav,
    html:lang(zh-hans) #news .tabs.t2 .nav {
        left: 12.2%;
    }
    html:lang(zh-hant) #news .tabs.t3 .nav,
    html:lang(zh-hans) #news .tabs.t3 .nav {
        left: 24%;
    }
    html:lang(zh-hant) #news .tabs.t4 .nav,
    html:lang(zh-hans) #news .tabs.t4 .nav {
        left: 36%;
    }
    html:lang(en) #news .tabs.t2 .nav {
        left: 12%;
    }
    html:lang(en) #news .tabs.t3 .nav {
        left: 24%;
    }
    html:lang(en) #news .tabs.t4 .nav {
        left: 36.5%;
    }
    html:lang(th) #news .tabs.t2 .nav {
        left: 13.3%;
    }
    html:lang(th) #news .tabs.t3 .nav {
        left: 26.8%;
    }
    html:lang(th) #news .tabs.t4 .nav {
        left: 40.4%;
    }

    html:lang(zh-hant) .tabs .tab1.active,
    html:lang(zh-hans) .tabs .tab1.active {
        background-position: calc(-430/1920*100vw) calc(-378/1920*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab2.active,
    html:lang(zh-hans) .tabs .tab2.active {
        background-position: calc(-464/1920*100vw) calc(-378/1920*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab3.active,
    html:lang(zh-hans) .tabs .tab3.active {
        background-position: calc(-498/1920*100vw) calc(-378/1920*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab4.active,
    html:lang(zh-hans) .tabs .tab4.active {
        background-position: calc(-532/1920*100vw) calc(-378/1920*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab1,
    html:lang(zh-hans) .tabs .tab1 {
        margin-left: 2%;
        background-position: calc(-430/1920*100vw) calc(-395/1920*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab2,
    html:lang(zh-hans) .tabs .tab2 {
        background-position: calc(-464/1920*100vw) calc(-395/1920*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab3,
    html:lang(zh-hans) .tabs .tab3 {
        background-position: calc(-498/1920*100vw) calc(-395/1920*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab4,
    html:lang(zh-hans) .tabs .tab4 {
        background-position: calc(-532/1920*100vw) calc(-395/1920*100vw) !important;
    }
    html:lang(en) .tabs .tab1.active {
        background-position: calc(-56/1920*100vw) calc(-416/1920*100vw) !important;
    }
    html:lang(en) .tabs .tab2.active {
        background-position: calc(-109/1920*100vw) calc(-416/1920*100vw) !important;
    }
    html:lang(en) .tabs .tab3.active {
        background-position: calc(-162/1920*100vw) calc(-416/1920*100vw) !important;
    }
    html:lang(en) .tabs .tab4.active {
        background-position: calc(-214/1920*100vw) calc(-416/1920*100vw) !important;
    }
    html:lang(en) .tabs .tab1 {
        margin-left: 2%;
        background-position: calc(-56/1920*100vw) calc(-434/1920*100vw) !important;
    }
    html:lang(en) .tabs .tab2 {
        background-position: calc(-109/1920*100vw) calc(-434/1920*100vw) !important;
    }
    html:lang(en) .tabs .tab3 {
        background-position: calc(-162/1920*100vw) calc(-434/1920*100vw) !important;
    }
    html:lang(en) .tabs .tab4 {
        background-position: calc(-214/1920*100vw) calc(-434/1920*100vw) !important;
    }
    html:lang(th) .tabs .tab1.active {
        background-position: 0 calc(-406/1920*100vw) !important;
    }
    html:lang(th) .tabs .tab2.active {
        background-position: calc(-63/1920*100vw) calc(-406/1920*100vw) !important;
    }
    html:lang(th) .tabs .tab3.active {
        background-position: calc(-126/1920*100vw) calc(-406/1920*100vw) !important;
    }
    html:lang(th) .tabs .tab4.active {
        background-position: calc(-189/1920*100vw) calc(-406/1920*100vw) !important;
    }
    html:lang(th) .tabs .tab1 {
        margin-left: 0.2%;
        background-position: 0 calc(-429/1920*100vw) !important;
    }
    html:lang(th) .tabs .tab2 {
        background-position: calc(-63/1920*100vw) calc(-429/1920*100vw) !important;
    }
    html:lang(th) .tabs .tab3 {
        background-position: calc(-126/1920*100vw) calc(-429/1920*100vw) !important;
    }
    html:lang(th) .tabs .tab4 {
        background-position: calc(-189/1920*100vw) calc(-429/1920*100vw) !important;
    }

    #news .more {
        width: calc(20/1920*100vw);
        height: calc(21/1920*100vw);
        background-position: calc(-370/1920*100vw) calc(-100/1920*100vw) !important;
    }

    .newslist li {
        font-size: 0.89vw;
        line-height: calc(52/1920*100vw);
        height: calc(52/1920*100vw);
    }

    .newslist span {
        font-size: 0.75vw;
    }

    #feature .title {
        width: calc(233/1920*100vw);
        height: calc(58/1920*100vw);
        background-position: calc(-566/1920*100vw) calc(-378/1920*100vw) !important;
    }

    .line {
        width: calc(1400/1920*100vw);
        height: calc(8/1920*100vw);
    }

    #feature .ft_swiperbox {
        width: calc(1400/1920*100vw);
    }

    #feature .ft_swiper {
        width: calc(1400/1920*100vw);
        height: calc(647/1920*100vw);
    }

    #feature .preview {
        width: calc(1400/1920*100vw);
        height: calc(210/1920*100vw);
    }

    #feature .ft-box {
        height: calc(123/1920*100vw);
    }

    #feature .ft-class {
        width: calc(267/1920*100vw);
        height: calc(123/1920*100vw);
        margin-right: calc(15/1920*100vw);
    }

    #feature .ftprogress {
        height: calc(2/1920*100vw);
        bottom: calc(-2/1920*100vw);
    }

    .info {
        font-size: 0.75vw;
        line-height: calc(18/1920*100vw);
    }

    #feature .logo,
    #morenews .logo,
    #article .logo {
        width: calc(275/1920*100vw);
        height: calc(131/1920*100vw);
        margin-right: calc(45/1920*100vw);
    }
    html:lang(zh-hant) #feature .logo,
    html:lang(zh-hant) #morenews .logo,
    html:lang(zh-hant) #article .logo {
        width: calc(390/1920*100vw);
    }

    html:lang(en) .system {
        width: calc(320/1920*100vw);
    }
    html:lang(zh-hant) .system {
        width: calc(412/1920*100vw);
    }
    html:lang(zh-hans) .system {
        width: calc(260/1920*100vw);
    }
    html:lang(th) .system {
        width: calc(320/1920*100vw);
    }

    html:lang(en) .system .matter {
        width: calc(130/1920*100vw);
    }
    html:lang(zh-hant) .system .matter,
    html:lang(zh-hans) .system .matter {
        width: calc(68/1920*100vw);
    }
    html:lang(th) .system .matter {
        width: calc(130/1920*100vw);
        font-weight: normal;
        font-size: 0.78vw;
    }

    .system li:nth-last-child(1) {
        margin-top: calc(5/1920*100vw);
    }

    .links {
        margin-top: calc(36/1920*100vw);
    }

    .links span {
        margin: 0 calc(15/1920*100vw);
    }

    .grading ul {
        width: calc(550/1920*100vw);
        height: calc(56/1920*100vw);
        margin-top: calc(30/1920*100vw);
    }

    .grading li {
        width: calc(480/1920*100vw);
        padding-left: calc(70/1920*100vw);
    }

    section#footer {
        height: calc(323/1920*100vw);
        margin-top: calc(-27/1920*100vw);
        font-size: 0.78vw;
        padding-top: calc(92/1920*100vw);
        line-height: calc(24/1920*100vw);
    }

    #footer .crlogo {
        width: calc(200/1920*100vw);
        height: calc(88/1920*100vw);
        margin-top: calc(32/1920*100vw);
    }

    #morenews .title {
        width: calc(233/1920*100vw);
        height: calc(58/1920*100vw);
        background-position: calc(-800/1920*100vw) calc(-379/1920*100vw);
    }

    #morenews .newslistbox {
        width: calc(1400/1920*100vw);
        height: calc(701/1920*100vw);
    }

    #morenews .pagenav {
        height: calc(70/1920*100vw);
    }

    #morenews .pagenav ul {
        font-size: 0.7vw;
    }

    #morenews .prev,
    #morenews .next {
        width: calc(10/1920*100vw);
        height: calc(16/1920*100vw);
        background-position: calc(-446/1920*100vw) calc(-67/1920*100vw);
    }

    #morenews .pages {
        width: calc(135/1920*100vw);
        line-height: calc(18/1920*100vw);
    }

    #morenews .pagenav .now {
        font-size: 0.9vw;
    }

    #article .articletitle {
        font-size: 2.28vw;
        padding: calc(70/1920*100vw) 0;
    }

    #article .articletitle p {
        max-width: calc(1400/1920*100vw);
    }

    #article .articlebox {
        max-width: calc(1400/1920*100vw);
        min-height: calc(700/1920*100vw);
        padding-bottom: calc(32/1920*100vw);
    }

    #article .time ,.back {
        font-size: 0.95vw;
        padding: calc(20/1920*100vw) 0;
        margin: 0 calc(32/1920*100vw);
    }

    #article .articlein {
        margin: calc(32/1920*100vw) calc(32/1920*100vw);
        font-size: 0.95vw;
        line-height: calc(26/1920*100vw);
    }

    #article .info {
        margin-top: calc(70/1920*100vw);
        padding-bottom: calc(78/1920*100vw);
    }

    html:lang(zh-hant) #morenews .tabs .nav,
    html:lang(zh-hans) #morenews .tabs .nav {
        width: calc(84/1920*100vw);
    }
    html:lang(en) #morenews .tabs .nav {
        width: calc(103/1920*100vw);
    }

    #morenews .tabs.t1 .nav {
        left: 0;
    }
    html:lang(zh-hant) #morenews .tabs.t2 .nav,
    html:lang(zh-hans) #morenews .tabs.t2 .nav {
        left: 6.5%;
    }
    html:lang(zh-hant) #morenews .tabs.t3 .nav,
    html:lang(zh-hans) #morenews .tabs.t3 .nav {
        left: 12.7%;
    }
    html:lang(zh-hant) #morenews .tabs.t4 .nav,
    html:lang(zh-hans) #morenews .tabs.t4 .nav {
        left: 19%;
    }
    html:lang(en) #morenews .tabs.t2 .nav {
        left: 6.4%;
    }
    html:lang(en) #morenews .tabs.t3 .nav {
        left: 12.8%;
    }
    html:lang(en) #morenews .tabs.t4 .nav {
        left: 19.3%;
    }
    html:lang(th) #morenews .tabs.t2 .nav {
        left: 7.2%;
    }
    html:lang(th) #morenews .tabs.t3 .nav {
        left: 14.3%;
    }
    html:lang(th) #morenews .tabs.t4 .nav {
        left: 21.4%;
    }

    #article .time span {
        margin-left: calc(10/1920*100vw);
    }

    #article .share_fb,
    #article .share_line {
        width: calc(35/1920*100vw);
        height: calc(35/1920*100vw);
        margin: 0 calc(2/1920*100vw);
    }

    #article .share_fb {
        background-position: calc(-457/1920*100vw) calc(-67/1920*100vw);
    }

    #article .share_line {
        background-position: calc(-495/1920*100vw) calc(-67/1920*100vw);
    }

    #videobox > div {
        width: calc(800/1920*100vw);
        height: calc(464/1920*100vw);
    }

    #videobox .videoiframe {
        max-width: calc(800/1920*100vw);
    }

    #videobox .close {
        width: calc(55/1920*100vw);
        height: calc(55/1920*100vw);
        right: calc(-57/1920*100vw);
    }

    #videobox .close div {
        width: calc(34/1920*100vw);
        height: calc(31/1920*100vw);
        background-position: calc(-406/1920*100vw) calc(-113/1920*100vw);
    }

    #loading .loading_gif {
        width: calc(156/1920*100vw) !important;
        height: calc(180/1920*100vw) !important;
    }

}


@media only screen and (max-width: 1920px) {

    section#kv {
        height: 1110px;
    }

    html:lang(zh-hant) #kv .slogan,
    html:lang(zh-hans) #kv .slogan {
        display: block;
        width: 56px;
        height: 416px;
        left: 23px;
        top: 40px;
    }

    #kv .title {
        width: 1033px;
        height: 378px;
        background-position: -56px 0 !important;
    }

    #kv .play {
        width: 123px;
        height: 123px;
    }

    #kv .play:before {
        background-position: 0 -66px !important;
    }

    #kv .play:after {
        width: 29px;
        height: 34px;
        background-position: -370px -66px !important;
    }

    #menu {
        width: 719px;
        height: 66px;
    }

    #menu span {
        width: 26px;
        height: 26px;
        background-position: -378px -141px !important;
    }

    #menu li {
        width: 68px;
        height: 18px;
        margin-left: 73px;
    }
    #menu li.page1 {
        background-position: -56px -378px !important;
    }
    #menu li.page2 {
        background-position: -124px -378px !important;
    }
    #menu li.page3 {
        background-position: -192px -378px !important;
    }
    #menu li.page4 {
        background-position: -260px -378px !important;
    }

    #menu li:before {
        width: 68px;
    }

    #menu li.page1.active {
        background-position: -56px -396px !important;
    }
    #menu li.page2.active {
        background-position: -124px -396px !important;
    }
    #menu li.page3.active {
        background-position: -192px -396px !important;
    }
    #menu li.page4.active {
        background-position: -260px -396px !important;
    }
    html:lang(th) #menu li.page1 {
        background-position: -255px -379px !important;
    }
    html:lang(th) #menu li.page2 {
        background-position: -323px -379px !important;
    }
    html:lang(th) #menu li.page3 {
        background-position: -391px -379px !important;
    }
    html:lang(th) #menu li.page4 {
        background-position: -459px -379px !important;
    }
    html:lang(th) #menu li.page1.active {
        background-position: -255px -397px !important;
    }
    html:lang(th) #menu li.page2.active {
        background-position: -323px -397px !important;
    }
    html:lang(th) #menu li.page3.active {
        background-position: -391px -397px !important;
    }
    html:lang(th) #menu li.page4.active {
        background-position: -459px -397px !important;
    }

    #sns li {
        width: 28px;
        height: 28px;
        background-position: -294px -141px !important;
        margin-bottom: 30px;
    }
    #sns li.baha {
        background-position: -322px -141px !important;
    }
    #sns li.yt {
        background-position: -350px -141px !important;
        margin-bottom: unset;
    }

    #qr {
        width: 76px;
        height: 75px;
        background-position: -294px -66px !important;
    }
    html:lang(zh-hant) #qr:after,
    html:lang(zh-hans) #qr:after {
        width: 61px;
        height: 14px;
        background-position: -328px -378px !important;
    }
    html:lang(en) #qr:after {
        width: 72px;
        height: 25px;
        background-position: -329px -423px !important;
    }
    html:lang(th) #qr:after {
        width: 63px;
        height: 33px;
        background-position: -255px -418px !important;
    }

    #lang {
        width: 102px;
        height: 28px;
        background-position: -328px -392px !important;
    }
    html:lang(th) #lang {
        background-position: -0px -378px !important;
    }

    #langopen {
        line-height: 28px;
        font-size: 15px;
    }

    #kv .apps li {
        width: 171px;
        height: 53px;
        background-position: -123px -66px !important;
    }
    #kv .apps li.ios {
        background-position: -123px -119px !important;
        margin-left: 20px;
    }

    section#news {
        height: 641px;
        margin-top: -25px;
    }

    #news .banner {
        width: 626px;
        height: 373px;
        margin-right: 12px;
    }

    #news .list {
        width: 764px;
        height: 373px;
    }

    #news .bn_swiper {
        height: 328px;
    }

    /* #news .bn_swiper img{
        width: auto;
        height: 100%;
    } */

    #news .bn_nav li {
        width: 46px;
        height: 45px;
        background-position: -399px -66px !important;
    }

    #news .bn_title {
        font-size: 17px;
        padding-left: 18px;
        line-height: 45px;
    }

    #progress {
        height: 3px;
    }

    .tabs {
        height: 17px;
    }
    html:lang(th) .tabs {
        height: 23px;
    }
    .tabs .nav {
        height:2px;
    }
    html:lang(zh-hant) .tabs .nav,
    html:lang(zh-hans) .tabs .nav {
        width: 60px;
    }
    html:lang(en) .tabs .nav {
        width: 80px;
    }
    html:lang(th) .tabs .nav {
        width: 71px;
    }

    html:lang(zh-hant) .tabs li,
    html:lang(zh-hans) .tabs li {
        width: 34px;
        height: 17px;
    }
    html:lang(en) .tabs li {
        width: 53px;
        height: 17px;
    }
    html:lang(th) .tabs li {
        width: 63px;
        height: 23px;
    }

    .tabs.t1 .nav {
        left: 0;
    }
    html:lang(zh-hant) .tabs.t2 .nav,
    html:lang(zh-hans) .tabs.t2 .nav {
        left: 86px;
    }
    html:lang(zh-hant) .tabs.t3 .nav,
    html:lang(zh-hans) .tabs.t3 .nav {
        left: 168px;
    }
    html:lang(zh-hant) .tabs.t4 .nav,
    html:lang(zh-hans) .tabs.t4 .nav {
        left: 250px;
    }
    html:lang(en) .tabs.t2 .nav {
        left: 83px;
    }
    html:lang(en) .tabs.t3 .nav {
        left: 168px;
    }
    html:lang(en) .tabs.t4 .nav {
        left: 255px;
    }
    html:lang(th) .tabs.t2 .nav {
        left: 94px;
    }
    html:lang(th) .tabs.t3 .nav {
        left: 189px;
    }
    html:lang(th) .tabs.t4 .nav {
        left: 284px;
    }

    html:lang(zh-hant) .tabs .tab1.active,
    html:lang(zh-hans) .tabs .tab1.active {
        background-position: -430px -378px !important;
    }
    html:lang(zh-hant) .tabs .tab2.active,
    html:lang(zh-hans) .tabs .tab2.active {
        background-position: -464px -378px !important;
    }
    html:lang(zh-hant) .tabs .tab3.active,
    html:lang(zh-hans) .tabs .tab3.active {
        background-position: -498px -378px !important;
    }
    html:lang(zh-hant) .tabs .tab4.active,
    html:lang(zh-hans) .tabs .tab4.active {
        background-position: -532px -378px !important;
    }
    html:lang(zh-hant) .tabs .tab1,
    html:lang(zh-hans) .tabs .tab1 {
        margin-left: 14px;
        background-position: -430px -395px !important;
    }
    html:lang(zh-hant) .tabs .tab2,
    html:lang(zh-hans) .tabs .tab2 {
        background-position: -464px -395px !important;
    }
    html:lang(zh-hant) .tabs .tab3,
    html:lang(zh-hans) .tabs .tab3 {
        background-position: -498px -395px !important;
    }
    html:lang(zh-hant) .tabs .tab4,
    html:lang(zh-hans) .tabs .tab4 {
        background-position: -532px -395px !important;
    }
    html:lang(en) .tabs .tab1.active {
        background-position: -56px -416px !important;
    }
    html:lang(en) .tabs .tab2.active {
        background-position: -109px -416px !important;
    }
    html:lang(en) .tabs .tab3.active {
        background-position: -162px -416px !important;
    }
    html:lang(en) .tabs .tab4.active {
        background-position: -214px -416px !important;
    }
    html:lang(en) .tabs .tab1 {
        margin-left: 14px;
        background-position: -56px -434px !important;
    }
    html:lang(en) .tabs .tab2 {
        background-position: -109px -434px !important;
    }
    html:lang(en) .tabs .tab3 {
        background-position: -162px -434px !important;
    }
    html:lang(en) .tabs .tab4 {
        background-position: -214px -434px !important;
    }
    html:lang(th) .tabs .tab1.active {
        background-position: 0 -406px !important;
    }
    html:lang(th) .tabs .tab2.active {
        background-position: -63px -406px !important;
    }
    html:lang(th) .tabs .tab3.active {
        background-position: -126px -406px !important;
    }
    html:lang(th) .tabs .tab4.active {
        background-position: -189px -406px !important;
    }
    html:lang(th) .tabs .tab1 {
        margin-left: 2px;
        background-position: 0 -429px !important;
    }
    html:lang(th) .tabs .tab2 {
        background-position: -63px -429px !important;
    }
    html:lang(th) .tabs .tab3 {
        background-position: -126px -429px !important;
    }
    html:lang(th) .tabs .tab4 {
        background-position: -189px -429px !important;
    }

    #news .more {
        width: 20px;
        height: 21px;
        background-position: -370px -100px !important;
    }

    .newslist li {
        font-size: 17px;
        line-height: 52px;
        height: 52px;
    }

    .newslist span {
        font-size: 14px;
    }

    #feature .title {
        width: 233px;
        height: 58px;
        background-position: -566px -378px !important;
    }

    .line {
        width: 1400px;
        height: 8px;
    }

    #feature .ft_swiperbox {
        width: 1400px;
    }

    #feature .ft_swiper {
        width: 1400px;
        height: 647px;
    }

    #feature .preview {
        width: 1400px;
        height: 210px;
    }

    #feature .ft-box {
        height: 123px;
    }

    #feature .ft-class {
        width: 267px;
        height: 123px;
        margin-right: 15px;
    }

    #feature .ftprogress {
        height: 2px;
        bottom: -2px;
    }

    .info {
        font-size: 14px;
        line-height: 18px;
    }

    #feature .logo,
    #morenews .logo,
    #article .logo {
        width: 275px;
        height: 131px;
        margin-right: 45px;
    }
    html:lang(zh-hant) #feature .logo,
    html:lang(zh-hant) #morenews .logo,
    html:lang(zh-hant) #article .logo {
        width: 390px;
    }

    html:lang(en) .system {
        width: 320px;
    }
    html:lang(zh-hant) .system {
        width: 412px;
    }
    html:lang(zh-hans) .system {
        width: 260px;
    }
    html:lang(th) .system {
        width: 320px;
    }

    html:lang(en) .system .matter {
        width: 130px;
    }
    html:lang(zh-hant) .system .matter,
    html:lang(zh-hans) .system .matter {
        width: 68px;
    }
    html:lang(th) .system .matter {
        width: 130px;
        font-weight: normal;
        font-size: 15px;
    }

    .system li:nth-last-child(1) {
        margin-top: 5px;
    }

    .links {
        margin-top: 36px;
    }

    .links span {
        margin: 0 15px;
    }

    .grading ul {
        width: 550px;
        height: 56px;
        margin-top: 30px;
    }

    .grading li {
        width: 480px;
        padding-left: 70px;
    }

    section#footer {
        height: 323px;
        margin-top: -27px;
        font-size: 15px;
        padding-top: 92px;
        line-height: 24px;
    }

    #footer .crlogo {
        width: 392px;
        height: 72px;
        margin-top: 32px;
    }

    #morenews .title {
        width: 233px;
        height: 58px;
        background-position: -800px -379px;
    }

    #morenews .newslistbox {
        width: 1400px;
        height: 701px;
    }

    #morenews .pagenav {
        height: 70px;
    }

    #morenews .pagenav ul {
        font-size: 14px;
    }

    #morenews .prev,
    #morenews .next {
        width: 10px;
        height: 16px;
        background-position: -446px -67px;
    }

    #morenews .pages {
        width: 135px;
        line-height: 18px;
    }

    #morenews .pagenav .now {
        font-size: 18px;
    }

    #article .articletitle {
        font-size: 44px;
        padding: 70px 0;
    }

    #article .articletitle p {
        max-width: 1400px;
    }

    #article .articlebox {
        max-width: 1400px;
        min-height: 700px;
        padding-bottom: 32px;
    }

    #article .time,.back {
        font-size: 18px;
        padding: 20px 0;
        margin: 0 32px;
    }

    #article .articlein {
        margin: 32px 32px;
        font-size: 18px;
        line-height: 26px;
    }

    #article .info {
        margin-top: 70px;
        padding-bottom: 78px;
    }

    #article .time span {
        margin-left: 10px;
    }

    #article .share_fb,
    #article .share_line {
        width: 35px;
        height: 35px;
        margin: 0 2px;
    }

    #article .share_fb {
        background-position: -457px -67px;
    }

    #article .share_line {
        background-position: -495px -67px;
    }

    #videobox > div {
        width: 800px;
        height: 464px;
    }

    #videobox .videoiframe {
        max-width: 800px;
    }

    #videobox .close {
        width: 55px;
        height: 55px;
        right: -57px;
    }

    #videobox .close div {
        width: 34px;
        height: 31px;
        background-position: -406px -113px;
    }
}

@media only screen and (max-width: 1800px) {

    section#kv {
        height: calc(1110/1800*100vw);
    }

    html:lang(zh-hant) #kv .slogan,
    html:lang(zh-hans) #kv .slogan {
        width: calc(56/1800*100vw);
        height: calc(416/1800*100vw);
        left: calc(23/1800*100vw);
        top: 4%;
        background-size: calc(1089/1800*100vw) auto !important;
    }

    #kv .title {
        width: calc(1033/1800*100vw);
        height: calc(378/1800*100vw);
        background-position: calc(-56/1800*100vw) 0 !important;
        background-size: calc(1089/1800*100vw) auto !important;
    }

}

@media only screen and (max-width: 1600px) {

    #news .banner {
        width: calc(626/1600*100vw);
        height: calc(373/1600*100vw);
        margin-right: calc(12/1600*100vw);
    }

    #news .list {
        width: calc(764/1600*100vw);
        height: calc(373/1600*100vw);
    }

    #news .bn_swiper {
        height: calc(328/1600*100vw);
    }

    #news .bn_nav li {
        width: calc(46/1600*100vw);
        height: calc(45/1600*100vw);
        background-position: calc(-399/1600*100vw) calc(-66/1600*100vw) !important;
        background-size: calc(719/1600*100vw) auto !important;
    }

    #news .bn_title {
        font-size: 1.06vw;
        padding-left: calc(18/1600*100vw);
        line-height: calc(45/1600*100vw);
    }

    .tabs {
        height: calc(17/1600*100vw);
    }
    html:lang(th) .tabs {
        height: calc(23/1600*100vw);
    }

    .newslist li {
        font-size: 1.06vw;
        line-height: calc(52/1600*100vw);
        height: calc(52/1600*100vw);
    }

    .newslist span {
        font-size: 0.89vw;
    }

    #feature .title {
        width: calc(233/1600*100vw);
        height: calc(58/1600*100vw);
        background-position: calc(-566/1600*100vw) calc(-378/1600*100vw) !important;
        background-size: calc(1089/1600*100vw) auto !important;
    }

    .line {
        width: calc(1400/1600*100vw);
        height: calc(8/1600*100vw);
    }

    #feature .ft_swiperbox {
        width: calc(1400/1600*100vw);
    }

    #feature .ft_swiper {
        width: calc(1400/1600*100vw);
        height: calc(647/1600*100vw);
    }

    #feature .preview {
        width: calc(1400/1600*100vw);
        height: calc(210/1600*100vw);
    }

    #feature .ft-box {
        height: calc(123/1600*100vw);
    }

    #feature .ft-class {
        width: calc(267/1600*100vw);
        height: calc(123/1600*100vw);
        margin-right: calc(15/1600*100vw);
    }

    #morenews .title {
        width: calc(233/1600*100vw);
        height: calc(58/1600*100vw);
        background-position: calc(-800/1600*100vw) calc(-379/1600*100vw);
        background-size: calc(1089/1600*100vw) auto !important;
    }

    #morenews .newslistbox {
        width: calc(1400/1600*100vw);
        height: calc(701/1600*100vw);
    }

    #morenews .pagenav {
        height: calc(70/1600*100vw);
    }

    #morenews .pagenav ul {
        font-size: 0.85vw;
    }

    #morenews .prev,
    #morenews .next {
        width: calc(10/1600*100vw);
        height: calc(16/1600*100vw);
        background-position: calc(-446/1600*100vw) calc(-67/1600*100vw);
        background-size: calc(719/1600*100vw) auto !important;
    }

    #morenews .pages {
        width: calc(135/1600*100vw);
        line-height: calc(18/1600*100vw);
    }

    #morenews .pagenav .now {
        font-size: 1.15vw;
    }

    #article .articletitle {
        font-size: 2.75vw;
        padding: calc(70/1600*100vw) 0;
    }

    #article .articletitle p {
        max-width: calc(1400/1600*100vw);
    }

    #article .articlebox {
        max-width: calc(1400/1600*100vw);
        min-height: calc(700/1600*100vw);
        padding-bottom: calc(32/1600*100vw);
    }

    #article .time ,.back{
        font-size: 1.1vw;
        padding: calc(20/1600*100vw) 0;
        margin: 0 calc(32/1600*100vw);
    }

    #article .articlein {
        margin: calc(32/1600*100vw) calc(32/1600*100vw);
        font-size: 1.1vw;
        line-height: calc(26/1600*100vw);
    }

    #article .info {
        margin-top: calc(70/1600*100vw);
        padding-bottom: calc(78/1600*100vw);
    }


}

@media only screen and (max-width: 1400px) {

    #kv .play {
        width: calc(123/1400*100vw);
        height: calc(123/1400*100vw);
    }

    #kv .play:before {
        background-position: 0 calc(-66/1400*100vw) !important;
        background-size: calc(719/1400*100vw) auto !important;
    }

    #kv .play:after {
        width: calc(29/1400*100vw);
        height: calc(34/1400*100vw);
        background-position: calc(-370/1400*100vw) calc(-66/1400*100vw) !important;
        background-size: calc(719/1400*100vw) auto !important;
    }

    section#news {
        height: calc(641/1400*100vw);
        margin-top: calc(-25/1400*100vw);
    }

    .info {
        font-size: 1vw;
        line-height: calc(18/1400*100vw);
    }

    #feature .logo,
    #morenews .logo,
    #article .logo {
        width: calc(275/1400*100vw);
        height: calc(131/1400*100vw);
        margin-right: calc(45/1400*100vw);
    }
    html:lang(zh-hant) #feature .logo,
    html:lang(zh-hant) #morenews .logo,
    html:lang(zh-hant) #article .logo {
        width: calc(390/1400*100vw);
    }

    html:lang(en) .system {
        width: calc(320/1400*100vw);
    }
    html:lang(zh-hant) .system {
        width: calc(412/1400*100vw);
    }
    html:lang(zh-hans) .system {
        width: calc(260/1400*100vw);
    }

    html:lang(en) .system .matter {
        width: calc(130/1400*100vw);
    }
    html:lang(zh-hant) .system .matter,
    html:lang(zh-hans) .system .matter {
        width: calc(68/1400*100vw);
    }

    .links {
        margin-top: calc(36/1400*100vw);
    }

    .grading ul {
        width: calc(550/1400*100vw);
        height: calc(56/1400*100vw);
        margin-top: calc(30/1400*100vw);
    }

    .grading li {
        width: calc(480/1400*100vw);
        padding-left: calc(70/1400*100vw);
    }

    section#footer {
        height: calc(323/1400*100vw);
        margin-top: calc(-27/1400*100vw);
        font-size: 1.07vw;
        padding-top: calc(92/1400*100vw);
        line-height: calc(24/1400*100vw);
    }

    #footer .crlogo {
        width: calc(392/1400*100vw);
        height: calc(72/1400*100vw);
        margin-top: calc(32/1400*100vw);
    }

    #topswiper .bn_title {
        font-size: 13px;
    }
    html:lang(th) #topswiper .bn_title {
        font-size: 14px;
    }

    html:lang(th) #news .bn_title {
        font-size: 14px;
    }

    html:lang(th) .newslist li {
        font-size: 15px;
    }

}

@media only screen and (max-width: 1200px) {

    section#kv {
        height: 740px;
    }

    html:lang(zh-hant) #kv .slogan,
    html:lang(zh-hans) #kv .slogan {
        width: 37px;
        height: 277px;
        left: 15px;
        background-size: 726px !important;
    }

    #open-video {
        width: calc(1240/1100*100vw);
    }

    #kv .play {
        width: 105px;
        height: 105px;
    }

    #kv .play:before {
        background-position: 0 -56.5px !important;
        background-size: 616px !important;
    }

    #kv .play:after {
        width: 25px;
        height: 29px;
        background-position: -316px -57px !important;
        background-size: 616px !important;
    }

    #kv .title {
        width: 688.6px;
        height: 252px;
        background-position: -38px 0 !important;
        background-size: 726px !important;
    }

    #news .bn_title {
        font-size: 12px;
    }

    html:lang(zh-hant) .tabs .nav,
    html:lang(zh-hans) .tabs .nav {
        width: calc(60/1200*100vw);
    }
    html:lang(en) .tabs .nav {
        width: calc(74/1200*100vw);
    }
    html:lang(th) .tabs .nav {
        width: calc(70/1200*100vw);
    }

    html:lang(en) #morenews .tabs .nav {
        width: calc(78/1200*100vw);
    }

    html:lang(zh-hant) .tabs li,
    html:lang(zh-hans) .tabs li {
        width: calc(34/1200*100vw);
        height: calc(17/1200*100vw);
        margin: 0 calc(25/1200*100vw);
        background-size: calc(1089/1200*100vw) auto !important;
    }
    html:lang(en) .tabs li {
        width: calc(53/1200*100vw);
        height: calc(17/1200*100vw);
        margin: 0 calc(16/1200*100vw);
        background-size: calc(1089/1200*100vw) auto !important;
    }
    html:lang(th) .tabs li {
        width: calc(63/1200*100vw);
        height: calc(23/1200*100vw);
        margin: 0 calc(16/1200*100vw);
        background-size: calc(1089/1200*100vw) auto !important;
    }

    .tabs.t1 .nav {
        left: 0;
    }
    html:lang(zh-hant) .tabs.t2 .nav,
    html:lang(zh-hans) .tabs.t2 .nav {
        left: 16%;
    }
    html:lang(zh-hant) .tabs.t3 .nav,
    html:lang(zh-hans) .tabs.t3 .nav {
        left: 32%;
    }
    html:lang(zh-hant) .tabs.t4 .nav,
    html:lang(zh-hans) .tabs.t4 .nav {
        left: 48%;
    }
    html:lang(en) .tabs.t2 .nav {
        left: 15.8%;
    }
    html:lang(en) .tabs.t3 .nav {
        left: 32.2%;
    }
    html:lang(en) .tabs.t4 .nav {
        left: 48.3%;
    }
    html:lang(th) .tabs.t2 .nav {
        left: 17.6%;
    }
    html:lang(th) .tabs.t3 .nav {
        left: 35.8%;
    }
    html:lang(th) .tabs.t4 .nav {
        left: 53.8%;
    }

    html:lang(zh-hant) .tabs .tab1.active,
    html:lang(zh-hans) .tabs .tab1.active {
        background-position: calc(-430/1200*100vw) calc(-378/1200*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab2.active,
    html:lang(zh-hans) .tabs .tab2.active {
        background-position: calc(-464/1200*100vw) calc(-378/1200*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab3.active,
    html:lang(zh-hans) .tabs .tab3.active {
        background-position: calc(-498/1200*100vw) calc(-378/1200*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab4.active,
    html:lang(zh-hans) .tabs .tab4.active {
        background-position: calc(-532/1200*100vw) calc(-378/1200*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab1,
    html:lang(zh-hans) .tabs .tab1 {
        margin-left: calc(14/1200*100vw);
        background-position: calc(-430/1200*100vw) calc(-395/1200*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab2,
    html:lang(zh-hans) .tabs .tab2 {
        background-position: calc(-464/1200*100vw) calc(-395/1200*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab3,
    html:lang(zh-hans) .tabs .tab3 {
        background-position: calc(-498/1200*100vw) calc(-395/1200*100vw) !important;
    }
    html:lang(zh-hant) .tabs .tab4,
    html:lang(zh-hans) .tabs .tab4 {
        background-position: calc(-532/1200*100vw) calc(-395/1200*100vw) !important;
    }
    html:lang(en) .tabs .tab1.active {
        background-position: calc(-56/1200*100vw) calc(-416/1200*100vw) !important;
    }
    html:lang(en) .tabs .tab2.active {
        background-position: calc(-109/1200*100vw) calc(-416/1200*100vw) !important;
    }
    html:lang(en) .tabs .tab3.active {
        background-position: calc(-162/1200*100vw) calc(-416/1200*100vw) !important;
    }
    html:lang(en) .tabs .tab4.active {
        background-position: calc(-214/1200*100vw) calc(-416/1200*100vw) !important;
    }
    html:lang(en) .tabs .tab1 {
        margin-left: 2%;
        background-position: calc(-56/1200*100vw) calc(-434/1200*100vw) !important;
    }
    html:lang(en) .tabs .tab2 {
        background-position: calc(-109/1200*100vw) calc(-434/1200*100vw) !important;
    }
    html:lang(en) .tabs .tab3 {
        background-position: calc(-162/1200*100vw) calc(-434/1200*100vw) !important;
    }
    html:lang(en) .tabs .tab4 {
        background-position: calc(-214/1200*100vw) calc(-434/1200*100vw) !important;
    }

    html:lang(en) #morenews .tabs .tab1 {
        margin-left: 1.3%;
    }

    html:lang(th) .tabs .tab1.active {
        background-position: 0 calc(-406/1200*100vw) !important;
    }
    html:lang(th) .tabs .tab2.active {
        background-position: calc(-63/1200*100vw) calc(-406/1200*100vw) !important;
    }
    html:lang(th) .tabs .tab3.active {
        background-position: calc(-126/1200*100vw) calc(-406/1200*100vw) !important;
    }
    html:lang(th) .tabs .tab4.active {
        background-position: calc(-189/1200*100vw) calc(-406/1200*100vw) !important;
    }
    html:lang(th) .tabs .tab1 {
        margin-left: 0.2%;
        background-position: 0 calc(-429/1200*100vw) !important;
    }
    html:lang(th) .tabs .tab2 {
        background-position: calc(-63/1200*100vw) calc(-429/1200*100vw) !important;
    }
    html:lang(th) .tabs .tab3 {
        background-position: calc(-126/1200*100vw) calc(-429/1200*100vw) !important;
    }
    html:lang(th) .tabs .tab4 {
        background-position: calc(-189/1200*100vw) calc(-429/1200*100vw) !important;
    }

    #news .more {
        width: calc(20/1200*100vw);
        height: calc(21/1200*100vw);
        background-position: calc(-370/1200*100vw) calc(-100/1200*100vw) !important;
        background-size: calc(719/1200*100vw) auto !important;
    }

    .newslist li {
        font-size: 12px;
    }

    .newslist span {
        font-size: 10.5px;
    }

    #feature .title {
        width: 175px;
        height: 44px;
        background-position: -425px -962px !important;
        background-size: 817px !important;
    }

    .info {
        top: 79%;
        font-size: 12px;
        line-height: 15.5px;
    }
    html:lang(zh-hant) .info {
        top: 72%;
    }

    #feature .logo,
    #morenews .logo,
    #article .logo {
        width: 232px;
        height: 112px;
    }
    html:lang(zh-hant) #feature .logo,
    html:lang(zh-hant) #morenews .logo,
    html:lang(zh-hant) #article .logo {
        width: 334px;
    }

    html:lang(en) .system {
        width: 274px;
    }
    html:lang(zh-hant) .system {
        width: 353px;
    }
    html:lang(zh-hans) .system {
        width: 225px;
    }

    html:lang(en) .system .matter {
        width: 111.5px;
    }
    html:lang(zh-hant) .system .matter,
    html:lang(zh-hans) .system .matter {
        width: 58px;
    }

    .grading ul {
        width: 471px;
        height: 48px;
        margin-top: 26px;
    }

    .grading li {
        width: 471px;
        padding-left: 60px;
    }

    section#footer {
        font-size: 12.5px;
        height: 277px;
        line-height: 21px;
        margin-top: -25px;
        padding-top: 78px;
    }

    #footer .crlogo {
        width: 336px;
        height: 62px;
        margin-top: 28px;
    }

    #morenews .info {
        top: 78%;
    }
    html:lang(zh-hant) #morenews .info {
        top: 68%;
    }

    #morenews .pagenav .now {
        font-size: 14px;
    }

    #morenews .pagenav ul {
        font-size: 10px;
    }

    #morenews .prev, #morenews .next {
        height: 12px;
        width: 7.5px;
        background-position: -335px -50px;
        background-size: 540px !important;
    }

    #morenews .pages {
        width: 101px;
        height: 15px;
    }

    #article .articletitle {
        font-size: 33px;
    }

    #article .time ,.back {
        font-size: 13px;
    }

    #article .articlein {
        font-size: 13px;
        line-height: 19.5px;
    }

    #morenews .tabs.t1 .nav {
        left: 0;
    }
    html:lang(zh-hant) #morenews .tabs.t2 .nav,
    html:lang(zh-hans) #morenews .tabs.t2 .nav {
        left: 8.5%;
    }
    html:lang(zh-hant) #morenews .tabs.t3 .nav,
    html:lang(zh-hans) #morenews .tabs.t3 .nav {
        left: 17%;
    }
    html:lang(zh-hant) #morenews .tabs.t4 .nav,
    html:lang(zh-hans) #morenews .tabs.t4 .nav {
        left: 25.5%;
    }
    html:lang(en) #morenews .tabs.t2 .nav {
        left: 8.5%;
    }
    html:lang(en) #morenews .tabs.t3 .nav {
        left: 17%;
    }
    html:lang(en) #morenews .tabs.t4 .nav {
        left: 25.5%;
    }
    html:lang(th) #morenews .tabs.t2 .nav {
        left: 9.4%;
    }
    html:lang(th) #morenews .tabs.t3 .nav {
        left: 19%;
    }
    html:lang(th) #morenews .tabs.t4 .nav {
        left: 28.5%;
    }

}

@media only screen and (max-width: 1100px) {

    #kv .videobox {
        height: calc(740/1100*100vw);
    }

    #videobox > div {
        width: calc(800/1100*100vw);
        height: calc(464/1100*100vw);
    }

    #videobox .videoiframe {
        max-width: calc(800/1100*100vw);
    }

    #videobox .close {
        width: calc(55/1100*100vw);
        height: calc(55/1100*100vw);
        right: calc(-57/1100*100vw);
    }

    #videobox .close div {
        width: calc(34/1100*100vw);
        height: calc(31/1100*100vw);
        background-position: calc(-406/1100*100vw) calc(-113/1100*100vw);
        background-size: calc(719/1100*100vw);
    }

    #topswiper {
        height: 380px;
    }
    #topswiper .top_swiper {
        width: 2020px;
    }
    #topswiper .swiper-slide {
        height: 354.5px;
    }
    #topswiper .bn_title {
        width: 678px;
        line-height: 26px;
    }
    #topswiper .bn_title p {
        padding-left: 12px;
    }

}

@media only screen and (max-width: 800px) {

    /* 20220616 */
    .back {
        line-height: calc(45/800*100vw);
    }

    /* 20220616 */



    #kv .play:before,
    #kv .play:after,
    .img {
        background: url('../images/allmain_m.png');
        background-size: calc(431/800*100vw) auto !important;
    }
    html:lang(zh-hant) .img2,
    html:lang(zh-hant) #qr:after {
        background: url('../images/main_m.png');
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(zh-hans) .img2,
    html:lang(zh-hans) #qr:after {
        background: url('../images/main_m_sc.png');
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .img2,
    html:lang(en) #qr:after {
        background: url('../images/main_m_en.png');
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .img2,
    html:lang(th) #qr:after {
        background: url('../images/main_m_th.png');
        background-size: calc(877/800*100vw) auto !important;
    }

    section#kv {
        height: calc(1589/800*100vw);
        background: url('../images/kv_bg_m.jpg') no-repeat;
        background-size: cover;
    }

    #kv .videobox {
        display: none;
    }

    .fixed {
        display: none;
    }

    #kv .menu_m {
        display: block;
        width: calc(68/800*100vw);
        height: calc(68/800*100vw);
        cursor: pointer;
        left: calc(29/800*100vw);
        top: calc(26/800*100vw);
    }

    .lang_m {
        display: block;
        width: calc(217/800*100vw);
        height: calc(52/800*100vw);
        cursor: pointer;
        right: 0;
        top: 0;
        background-position: calc(-81/800*100vw) calc(-342/800*100vw) !important;
        position: absolute;
        z-index: 1;
        -webkit-transition: none;
        transition: none;
    }

    html:lang(zh-hant) #kv .slogan,
    html:lang(zh-hans) #kv .slogan {
        width: calc(80/800*100vw);
        height: calc(606/800*100vw);
        right: calc(20/800*100vw);
        top: calc(100/800*100vw);
        left: auto;
        background-size: calc(877/800*100vw) auto !important;
    }

    #kv .title {
        width: calc(796/800*100vw);
        height: calc(340/800*100vw);
        background-position: calc(-71/800*100vw) 0 !important;
        top: 62%;
        background-size: calc(877/800*100vw) auto !important;
    }

    #kv .play {
        width: calc(174/800*100vw);
        height: calc(174/800*100vw);
        top: 52%;
    }

    #kv .play:before {
        background-position: 0 calc(-68/800*100vw) !important;
    }

    #kv .play:after {
        width: calc(48/800*100vw);
        height: calc(48/800*100vw);
        background-position: calc(-283/800*100vw) 0 !important;
    }

    #kv .apps li {
        width: calc(248/800*100vw);
        height: calc(77/800*100vw);
        background-position: calc(-174/800*100vw) calc(-68/800*100vw) !important;
    }

    #kv .apps li.ios {
        background-position: calc(-174/800*100vw) calc(-145/800*100vw) !important;
        margin-left: calc(20/800*100vw);
    }

    #kv .chara_m {
        display: block;
    }

    #kv .chara2 {
        position: absolute;
        background: url('../images/chara2.png') no-repeat;
        background-size: contain;
        width: calc(800/800*100vw);
        height: calc(1371/800*100vw);
        top: calc(35/800*100vw);
        opacity: 0;
    }
    #kv .chara1 {
        position: absolute;
        background: url('../images/chara1.png') no-repeat;
        background-size: contain;
        width: calc(753/800*100vw);
        height: calc(1248/800*100vw);
        top: calc(337/800*100vw);
        left: calc(50/800*100vw);
        opacity: 0;
    }

    section#news {
        height: calc(1245/800*100vw);
        margin-top: calc(-50/800*100vw);
    }

    #news .newsbox {
        top: 51.5%;
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);
    }

    #news .banner {
        display: block;
        margin: 0 auto;
        width: calc(681/800*100vw);
        height: calc(424/800*100vw);
    }

    #news .list {
        display: block;
        margin: 0 auto;
        width: calc(681/800*100vw);
        height: calc(498/800*100vw);
        margin-top: calc(20/800*100vw);
    }

    #news .bn_swiper {
        height: calc(357/800*100vw);
    }

    #news .bn_title {
        font-size: 3.25vw;
        line-height: calc(67/800*100vw);
        padding-left: calc(20/800*100vw);
        width: 74%;
    }

    #news .bn_nav li {
        width: calc(69/800*100vw);
        height: calc(67/800*100vw);
        background-position: calc(-332/800*100vw) 0 !important;
        background-size: calc(431/800*100vw) auto !important;
    }

    #news .more {
        width: calc(31/800*100vw);
        height: calc(33/800*100vw);
        background-position: calc(-402/800*100vw) 0 !important;
        background-size: calc(431/800*100vw) auto !important;
    }

    .tabs {
        height: calc(31/800*100vw);
    }
    html:lang(th) .tabs {
        height: calc(36/800*100vw);
    }

    html:lang(zh-hant) .tabs li,
    html:lang(zh-hans) .tabs li {
        width: calc(58/800*100vw);
        height: calc(31/800*100vw);
        margin: 0 calc(30/800*100vw);
    }
    html:lang(en) .tabs li {
        width: calc(87/800*100vw);
        height: calc(31/800*100vw);
        margin: 0 calc(10/800*100vw);
    }
    html:lang(th) .tabs li {
        width: calc(98/800*100vw);
        height: calc(36/800*100vw);
        margin: 0 calc(10/800*100vw);
    }

    html:lang(zh-hant) .tabs .tab1,
    html:lang(zh-hans) .tabs .tab1 {
        margin-left: calc(4/800*100vw);
        background-position: calc(-298/800*100vw) calc(-340/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(zh-hant) .tabs .tab2,
    html:lang(zh-hans) .tabs .tab2 {
        background-position: calc(-356/800*100vw) calc(-340/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(zh-hant) .tabs .tab3,
    html:lang(zh-hans) .tabs .tab3 {
        background-position: calc(-414/800*100vw) calc(-340/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(zh-hant) .tabs .tab4,
    html:lang(zh-hans) .tabs .tab4 {
        background-position: calc(-472/800*100vw) calc(-340/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(zh-hant) .tabs .tab1.active,
    html:lang(zh-hans) .tabs .tab1.active {
        background-position: calc(-298/800*100vw) calc(-371/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(zh-hant) .tabs .tab2.active,
    html:lang(zh-hans) .tabs .tab2.active {
        background-position: calc(-356/800*100vw) calc(-371/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(zh-hant) .tabs .tab3.active,
    html:lang(zh-hans) .tabs .tab3.active {
        background-position: calc(-414/800*100vw) calc(-371/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(zh-hant) .tabs .tab4.active,
    html:lang(zh-hans) .tabs .tab4.active {
        background-position: calc(-472/800*100vw) calc(-371/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .tabs .tab1 {
        margin-left: calc(4/800*100vw);
        background-position: calc(-80/800*100vw) calc(-442/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .tabs .tab2 {
        background-position: calc(-167/800*100vw) calc(-442/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .tabs .tab3 {
        background-position: calc(-254/800*100vw) calc(-442/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .tabs .tab4 {
        background-position: calc(-341/800*100vw) calc(-442/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .tabs .tab1.active {
        background-position: calc(-80/800*100vw) calc(-473/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .tabs .tab2.active {
        background-position: calc(-167/800*100vw) calc(-473/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .tabs .tab3.active {
        background-position: calc(-254/800*100vw) calc(-473/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(en) .tabs .tab4.active {
        background-position: calc(-341/800*100vw) calc(-473/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .tabs .tab1 {
        margin-left: 0;
        background-position: calc(-80/800*100vw) calc(-442/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .tabs .tab2 {
        background-position: calc(-178/800*100vw) calc(-442/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .tabs .tab3 {
        background-position: calc(-276/800*100vw) calc(-442/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .tabs .tab4 {
        background-position: calc(-374/800*100vw) calc(-442/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .tabs .tab1.active {
        background-position: calc(-80/800*100vw) calc(-478/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .tabs .tab2.active {
        background-position: calc(-178/800*100vw) calc(-478/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .tabs .tab3.active {
        background-position: calc(-276/800*100vw) calc(-478/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }
    html:lang(th) .tabs .tab4.active {
        background-position: calc(-374/800*100vw) calc(-478/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }

    html:lang(zh-hant) .tabs .nav,
    html:lang(zh-hans) .tabs .nav {
        width: calc(62/800*100vw);
    }
    html:lang(en) .tabs .nav {
        width: calc(92/800*100vw);
    }
    html:lang(th) .tabs .nav {
        width: calc(96/800*100vw);
    }

    html:lang(en) #morenews .tabs .nav {
        width: calc(100/800*100vw);
    }

    .tabs.t1 .nav {
        left: 0;
    }
    html:lang(zh-hant) .tabs.t2 .nav,
    html:lang(zh-hans) .tabs.t2 .nav {
        left: 19%;
    }
    html:lang(zh-hant) .tabs.t3 .nav,
    html:lang(zh-hans) .tabs.t3 .nav {
        left: 37.5%;
    }
    html:lang(zh-hant) .tabs.t4 .nav,
    html:lang(zh-hans) .tabs.t4 .nav {
        left: 57%;
    }
    html:lang(en) .tabs.t2 .nav {
        left: 17.2%;
    }
    html:lang(en) .tabs.t3 .nav {
        left: 34.3%;
    }
    html:lang(en) .tabs.t4 .nav {
        left: 51.5%;
    }
    html:lang(th) .tabs.t2 .nav {
        left: 18.8%;
    }
    html:lang(th) .tabs.t3 .nav {
        left: 37.5%;
    }
    html:lang(th) .tabs.t4 .nav {
        left: 56.8%;
    }


    .newslist {
        margin: 3% 3% 0 4.5%;
    }

    .newslist li {
        font-size: 2.75vw;
        line-height: calc(75/800*100vw);
        height: calc(75/800*100vw);
    }
    html:lang(th) .newslist li {
        font-size: 3.2vw;
    }

    .newslist span {
        font-size: 2.1vw;
    }

    section#feature {
        height: calc(1550/800*100vw);
    }
    html:lang(zh-hant) section#feature {
        height: calc(1723/800*100vw);
    }

    section#feature > div {
        position: absolute;
    }

    #feature .title {
        width: calc(270/800*100vw);
        height: calc(67/800*100vw);
        background-position: calc(-530/800*100vw) calc(-340/800*100vw) !important;
        background-size: calc(877/800*100vw) auto !important;
    }

    #feature .line {
        display: none;
    }

    #feature .ft_swiperbox {
        display: none;
    }

    #feature .ft_swiperbox_m {
        display: block;
        top: 14%;
    }

    #feature .ft_preview {
        width: calc(800/800*100vw);
        height: calc(599/800*100vw);d
    }

    #feature .ft_swiperbg {
        background: url('../images/bg.jpg');
        width: 100%;
        height: calc(302/800*100vw);
        margin-top: 4%;
        position: relative;
    }

    #feature .ft_swiper_m {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        height: calc(227/800*100vw);
        width: calc(958/800*100vw);
        position: absolute;
    }

    #feature .ft_swiper_m .swiper-slide {
        width: calc(301/800*100vw);
        height: calc(227/800*100vw);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }

    .info {
        top: 82%;
        font-size: 2.25vw;
        line-height: calc(20/800*100vw);
    }
    html:lang(zh-hant) .info {
        top: 75%;
    }
    #feature .info {
        margin-top: 0;
        padding-bottom: 0;
    }

    #feature .logo,
    #morenews .logo,
    #article .logo {
        display: none;
    }

    .sns_m {
        display: block;
    }

    .sns_m li {
        cursor: pointer;
        width: calc(42/800*100vw);
        height: calc(42/800*100vw);
        background-position: 0 calc(-242/800*100vw) !important;
        display: inline-block;
    }

    .sns_m li.baha {
        background-position: calc(-42/800*100vw) calc(-242/800*100vw) !important;
        margin: 0 8%;
    }
    .sns_m li.yt {
        background-position: calc(-85/800*100vw) calc(-242/800*100vw) !important;
        margin-left: 8%;
    }
    html:lang(zh-hant) .sns_m li.yt {
        margin-left: auto;
    }

    .systembox {
        margin-top: 5%;
        -webkit-box-pack: unset;
        -webkit-justify-content: unset;
        -moz-box-pack: unset;
        -ms-flex-pack: unset;
        justify-content: unset;
        -webkit-box-align: unset;
        -webkit-align-items: unset;
        -moz-box-align: unset;
        -ms-flex-align: unset;
        align-items: unset;
        display: block;
    }

    .system {
        width: auto !important;
        text-align: center;
    }
    html:lang(zh-hant) .system {
        width: auto !important;
        text-align: left;
    }

    html:lang(en) .system .matter {
        width: calc(174/800*100vw);
    }
    html:lang(zh-hant) .system .matter,
    html:lang(zh-hans) .system .matter {
        width: calc(88/800*100vw);
    }
    html:lang(th) .system .matter {
        width: calc(200/800*100vw);
        font-size: 2.48vw;
    }

    .links {
        margin-top: 5%;
    }

    .grading ul {
        width: calc(690/800*100vw);
        height: calc(56/800*100vw);
        margin-top: 5%;
    }

    .grading li {
        width: calc(620/800*100vw);
        padding-left: calc(70/800*100vw);
    }

    section#footer {
        height: calc(250/800*100vw);
        font-size: 1.88vw;
        line-height: calc(23/800*100vw);
        margin-top: calc(-14/800*100vw);
        padding-top: 6.5%;
    }

    #footer .crlogo {
        width: calc(392/800*100vw);
        height: calc(72/800*100vw);
        margin-top: 4.5%;
    }

    #leftmenu {
        position: fixed;
        width: calc(517/800*100vw);
        height: 100%;
        top: 0;
        left: 0;
        background: url('../images/bg.jpg');
        z-index: 5;
        -webkit-box-shadow: 0 0 12vw 8vw #000;
        box-shadow: 0 0 12vw 8vw #000;
    }

    .leftmenu_in {
        -webkit-animation: leftmenu_in .4s forwards;
        animation: leftmenu_in .4s forwards;
    }

    .leftmenu_out {
        -webkit-animation: leftmenu_out .4s forwards;
        animation: leftmenu_out .4s forwards;
    }

    @-webkit-keyframes leftmenu_in {
        from {-webkit-transform: translate(-100%,0);transform: translate(-100%,0)}
        to {-webkit-transform: translate(0,0);transform: translate(0,0)}
    }

    @keyframes leftmenu_in {
        from {-webkit-transform: translate(-100%,0);transform: translate(-100%,0)}
        to {-webkit-transform: translate(0,0);transform: translate(0,0)}
    }

    @-webkit-keyframes leftmenu_out {
        from {-webkit-transform: translate(0,0);transform: translate(0,0)}
        to {-webkit-transform: translate(-150%,0);transform: translate(-150%,0)}
    }

    @keyframes leftmenu_out {
        from {-webkit-transform: translate(0,0);transform: translate(0,0)}
        to {-webkit-transform: translate(-150%,0);transform: translate(-150%,0)}
    }

    #leftmenu .close {
        width: calc(47/800*100vw);
        height: calc(43/800*100vw);
        background-position: calc(-128/800*100vw) calc(-242/800*100vw) !important;
        position: absolute;
        right: 6%;
        top: 3.5%;
        cursor: pointer;
    }

    #leftmenu .logo {
        width: calc(235/800*100vw);
        height: calc(113/800*100vw);
        position: relative;
        margin-left: 30%;
        margin-top: 28%;
    }
    html:lang(zh-hant) #leftmenu .logo {
        width: calc(339/800*100vw);
        margin-left: 17%;
    }

    #leftmenu .pages {
        position: relative;
        margin-left: 38%;
        margin-top: 19%;
    }

    #leftmenu .pages li {
        width: calc(132/800*100vw);
        height: calc(32/800*100vw);
        margin: 43% 0;
        cursor: pointer;
        position: relative;
    }

    #leftmenu .pages li a {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    #leftmenu .page1 {
        background-position: calc(-80/800*100vw) calc(-407/800*100vw) !important;
    }
    #leftmenu .page2 {
        background-position: calc(-212/800*100vw) calc(-407/800*100vw) !important;
    }
    #leftmenu .page3 {
        background-position: calc(-344/800*100vw) calc(-407/800*100vw) !important;
    }
    #leftmenu .page4 {
        background-position: calc(-476/800*100vw) calc(-407/800*100vw) !important;
    }

    #leftmenu .sns_m {
        text-align: center;
        opacity: 0.6;
    }

    #leftmenu .sns_m li {
        cursor: pointer;
        width: calc(42/800*100vw);
        height: calc(42/800*100vw);
        background-position: 0 calc(-242/800*100vw) !important;
        display: inline-block;
    }

    #leftmenu .sns_m li.baha {
        background-position: calc(-42/800*100vw) calc(-242/800*100vw) !important;
        margin: 0 8%;
    }
    #leftmenu .sns_m li.yt {
        background-position: calc(-85/800*100vw) calc(-242/800*100vw) !important;
        margin-left: 8%;
    }
    html:lang(zh-hant) #leftmenu .sns_m li.yt {
        margin-left: auto;
    }

    #langopen.m {
        margin-top: 6.5%;
        position: absolute;
        right: 0;
        width: calc(170/800*100vw);
        z-index: 1;
        line-height: calc(60/800*100vw);
        font-size: 2.9vw;
        background: #2a2a2a;
        color: #c2b28b;
    }

    #langopen.m p {
        background: url('../images/bg.jpg');
    }

    #langopen.m.open {
        display: block;
    }

    #topswiper {
        height: calc(469/800*100vw);
    }

    #topswiper .top_swiper {
        width: 100%;
    }

    #topswiper .swiper-slide {
        width: 100%;
        height: calc(419/800*100vw);
        -webkit-filter: none;
        filter: none;
    }

    #topswiper .bn_title {
        width: 100%;
        font-size: 2.75vw;
        line-height: calc(50/800*100vw);
    }
    html:lang(th) #topswiper .bn_title {
        font-size: 3vw;
    }

    #topswiper .bn_title p {
        padding: 0 calc(20/800*100vw);
    }

    #morenews {
        height: calc(1520/800*100vw);
    }
    html:lang(zh-hant) #morenews {
        height: calc(1700/800*100vw);
    }

    #morenews > div {
        position: absolute;
    }

    #morenews .title {
        width: calc(252/800*100vw);
        height: calc(67/800*100vw);
        background-position: calc(-625/800*100vw) calc(-420/800*100vw);
        background-size: calc(905/800*100vw) !important;
    }

    #morenews .newsbox {
        top: 13%;
    }

    #morenews .tabs {
        padding: 5% 0 2% 0;
        margin: 0 4%;
    }

    #morenews .newslistbox {
        width: calc(681/800*100vw);
        height: calc(932/800*100vw);
    }

    #morenews .newslist {
        margin: 3% 4.5% 0 4.5%;
    }

    #morenews .pagenav {
        height: calc(78/800*100vw);
        /* 20220616 */
        margin: 0 4.5%;
        width: 91%;
    }

    #morenews .pagenav ul {
        font-size: 2vw;
    }

    #morenews .prev, #morenews .next {
        height: calc(27/800*100vw);
        width: calc(16/800*100vw);
        background-position: calc(-175/800*100vw) calc(-243/800*100vw);
        background-size: calc(431/800*100vw) auto !important;
    }

    #morenews .pages {
        height: calc(27/800*100vw);
        line-height: calc(27/800*100vw);
        width: calc(130/800*100vw);
    }

    #morenews .pagenav .now {
        font-size: 2.5vw;
    }

    #morenews .line {
        display: none;
    }

    #morenews .line2 {
        margin-top: 8%;
    }

    #morenews .info {
        top: 82%;
        margin-top: 0;
        padding-bottom: 0;
    }
    html:lang(zh-hant) #morenews .info {
        top: 75%;
    }

    html:lang(th) #morenews .tabs.t2 .nav {
        left: 18.8%;
    }
    html:lang(th) #morenews .tabs.t3 .nav {
        left: 37.5%;
    }
    html:lang(th) #morenews .tabs.t4 .nav {
        left: 56.8%;
    }

    #morenews .sns_m,
    #article .sns_m {
        -webkit-filter: brightness(0.1);
        filter: brightness(0.1);
    }

    #article .articletitle {
        padding: 8% 0;
        font-size: 5vw;
    }

    #article .articletitle .line {
        display: none;
    }

    #article .articlebox {
        width: calc(681/800*100vw);
        padding-bottom: 4%;
    }

    #article .time ,.back{
        font-size: 2.2vw;
        padding: 2% 0;
        margin: 0 3.5%;
    }

    #article .articlein {
        font-size: 2.5vw;
        line-height: calc(28/800*100vw);
        margin: 5% 3.5%;
    }

    #article .info {
        margin-top: 8%;
        padding-bottom: 8%;
    }

    #morenews .tabs.t1 .nav {
        left: 0;
    }
    html:lang(zh-hant) #morenews .tabs.t2 .nav,
    html:lang(zh-hans) #morenews .tabs.t2 .nav {
        left: 19%;
    }
    html:lang(zh-hant) #morenews .tabs.t3 .nav,
    html:lang(zh-hans) #morenews .tabs.t3 .nav {
        left: 37.5%;
    }
    html:lang(zh-hant) #morenews .tabs.t4 .nav,
    html:lang(zh-hans) #morenews .tabs.t4 .nav {
        left: 57%;
    }
    html:lang(en) #morenews .tabs.t2 .nav {
        left: 17.5%;
    }
    html:lang(en) #morenews .tabs.t3 .nav {
        left: 34.4%;
    }
    html:lang(en) #morenews .tabs.t4 .nav {
        left: 51.8%;
    }

    #article .time span {
        margin-left: calc(10/800*100vw);
    }

    #article .share_fb,
    #article .share_line {
        width: calc(45/800*100vw);
        height: calc(45/800*100vw);
        margin: 0 calc(3/800*100vw);
    }

    #article .share_fb {
        background-position: calc(-193/800*100vw) calc(-224/800*100vw);
    }

    #article .share_line {
        background-position: calc(-241/800*100vw) calc(-224/800*100vw);
    }

    #videobox > div {
        width: calc(780/800*100vw);
        height: calc(439/800*100vw);
    }

    #videobox .videoiframe {
        max-width: calc(780/800*100vw);
    }

    #videobox .close {
        width: calc(60/800*100vw);
        height: calc(60/800*100vw);
        right: 0;
        top: calc(-68/800*100vw);
    }

    #videobox .close div {
        width: calc(37/800*100vw);
        height: calc(33/800*100vw);
        background-position: calc(-289/800*100vw) calc(-226/800*100vw);
    }

    #loading .loading_gif {
        width: calc(269/800*100vw) !important;
        height: calc(314/800*100vw) !important;
    }

    .open_videobox {
        display: none;
    }

    /*----0607new----*/
    #kv #preregister {
        display: block;
        width: calc(218/800*100vw);
        height: calc(228/800*100vw);
        position: absolute;
        right: -2%;
        top: 4%;
        animation: pulse 1s infinite;
        cursor: pointer;
    }

    html:lang(zh-hant) #kv .slogan,
    html:lang(zh-hans) #kv .slogan {
        top: 17%;
        left: 3%;
    }

}