@-ms-viewport,
@viewport {
	width: device-width;
}

@media screen and (min-width: 1680px) {
    /*憒���靝蝙�鍂��銋贝�𣇉�堒祝摨� >= 1680px嚗�����滩�匧�仿�躰ㄐ�� CSS��*/
    .main > .hd .deco1 {width: 200px;}
    .main .content .section_1 {min-height: 350px;}
    .main .content .section_2 {min-height: 450px;}
    .selectionList .sec > .wrap .content {min-height: 400px;}
    .selectionList .sec_2 {background-size: 250px;}

    
}

@media screen and (min-width: 1281px) {
    .selectionList .col-l {float: left; width: 50%; padding: 0 5% 5%;}
    .selectionList .col-r {float: right; width: 50%;}
}

@media screen and (max-width: 1280px) {
    /*憒���靝蝙�鍂��銋贝�𣇉�堒祝摨� <= 1280px嚗�����滩�匧�仿�躰ㄐ�� CSS��*/
    .page5 .main {background-position: center top;}
    .menu li a { background-size: 100px;}
    .main .section.section_1:before{background: url(../images/deco_1.png) no-repeat right /80%;}
}

@media screen and (max-width: 1024px) {
    /*憒���靝蝙�鍂��銋贝�𣇉�堒祝摨� <= 1024px嚗�����滩�匧�仿�躰ㄐ�� CSS��*/
    /*.wrapper > .header .mainGraphic { padding: 23% 0 0 6%;}*/
    .wrapper > .header .mainGraphic {padding: 10% 0 0 6%;  background-position: center bottom; height: 100%;}
    .wrapper > .header .mainGraphic .title_1 { width: 50%; }
    .wrapper > .header .mainGraphic .title_2 { right: 2%; bottom: -25px; width: 56%; /*margin-bottom: -200px;*/}
    .main .section.section_1 .intro{padding-bottom:30%;}

    .siteMap ul li { margin: 0 0 2%; width: 100%;}

    .menu ul {top: 37px;}
    .menu li a { font-size: 110%; text-align: left; height: 50px; line-height: 50px;}
    a.homer { background: #E95546;} 
    .mainNav > .wrap { position: relative; height: 100%;}
    .menu { display: none;position: relative; background-color: #ea7426; text-align: left;}
    .responsive-menu { 
        display: block; 
        height: 100%;
        padding: 0;
        text-indent: -9999px;
        text-align: left;
        /*overflow: hidden;*/
        white-space: nowrap;
        position: relative;
    }
    i.fa.fa-reorder {
        display: block;
        width: 50px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: url(../images/mainNav_trigger.png) no-repeat center;
        background-size: 50%;
    }
    .mainNav {margin: 0; background: none; bottom: auto; height: 50px;}
    .menu li {display: block; margin: 0; width: 100%;}
    .menu li a { background-size: 65px;}
    .menu li a:hover,
    .menu li:hover>a {  }
    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }
    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }
    .menu ul ul {left: 0; transform: initial;}
    .menu li>ul ul:hover { transform: initial;}
    .menu li a:hover:before, .menu li:hover>a:before, .menu li a.current:before {display: none;}

    .wrapper > .header .logo { width: 180px; top: 7px; z-index: 99999; position: fixed;}
    /*.upperNav {display: none;}*/
    .innerPage .upperNav {display: block;}
    .wrapper > .header .upperNav .wrap .col {display: none;}
    .wrapper > .header .upperNav .wrap .col.relatedPage {display: block;}
    .wrapper > .header { border-top: none; z-index: 9;}
    .wrapper > .header .logo h3 a {  background: url(../images/logo_w.png) no-repeat 0 0;  background-size: 100%;}

    .menu li.device {display: block;}
    /*.menu li.device:nth-child(10), .menu li.device:nth-child(11), .menu li.device:nth-child(12) { display: none;}*/

    /*.innerPage .mainNav {top: 0px;}*/
    /*.innerPage .upperNav {display: block;}*/

    /*.innerPage .header .upperNav .col.language {display: none;}*/
    .innerPage .wrapper > .header {height: 53px;}
    .innerPage .wrapper > .header .logo {top: 5px;}

    .footer .socialMedia { display: block;}

    .index .relatedPage {margin-top: 5%;}

    .page7 .main {background-position: left top;}
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    /*憒���靝蝙�鍂��銋贝�𣇉�堒祝摨虫�𧢲䲰 768px ~ 979px嚗�����滩�匧�仿�躰ㄐ�� CSS��*/
    .mainWrap { width: 768px; }
    

}

@media screen and (max-width: 979px) {
    /*憒���靝蝙�鍂��銋贝�𣇉�堒祝摨� <= 979px嚗�����滩�匧�仿�躰ㄐ�� CSS��*/
    .selectionList .col-l, .selectionList .col-r {width: 100%; padding: 0 5px;}
    .selectionList .col-l {padding: 5% 0;}

    .footer .col-l, .footer .col-r, .footer .col-r .socialMedia {float: none; margin: 0 auto;width: 100%;}
    .footer .copyR { padding: 10px 0 0 20px; text-align: left; }
    .footer .copyR .Logo90 {right: auto; left: 5px;}
    .footer .col-l { padding: 20px 10px;}
    .footer .col-r { padding: 5px; border-top: 1px solid rgba(0,0,0,.15); clear: both;}
    .footer .copyR {padding-top: 0;}
    .footer .relatedLinks, .footer .relatedLinks li {border: none;}
    .footer .relatedLinks li {padding: 15px 2%;}
}

@media screen and (max-width: 768px) {
    /*憒���靝蝙�鍂��銋贝�𣇉�堒祝摨� <= 768px嚗�����滩�匧�仿�躰ㄐ�� CSS��*/
    .mainWrap { width: auto; padding: 50px 20px;}
    
    .arrowDown {  bottom: 5%;}
    
    .main .section {}

    .wrapper > .header .mainGraphic { padding: 15% 0 0 0; background-position: right bottom;}
    .wrapper > .header .mainGraphic .title_1 {width: 70%; margin: 0 auto; position: absolute; bottom: 5%; left: 50%; margin-left: -35%;}
    .wrapper > .header .mainGraphic .title_2 { width: 70%; margin: 0 auto; position: static;}

    .wrapper > .header .mainGraphic .Video { left: 50%; padding-bottom: 100.25%; width: 144%; margin-left: -72%;}
    .wrapper > .header .mainGraphic .Video iframe { margin-left: -72%; width: 144%;}
    .main .section.section_1:before{background: url(../images/deco_1.png) no-repeat right /55%;margin-bottom: -80px;}
    .main .section.section_1 .intro{padding-bottom:20%;}

    /*.fontSize {right: 10%;}*/

    .selectionList .sec > .wrap .content, .selectionList .sec:nth-child(even) > .wrap .content {padding: 0;}
    .selectionList .sec > .wrap .content .Img {  position: static;  width: 100%;}
    .main .content p {margin-bottom: 7%;}

    .main .content .section_1 .deco2 {right: -110px;}
    .main .content .section_2 .deco1 { left: 50%;}
    .main .content .section_3 .deco2 { left: -100px;}

    /*.PhotoZoomSlider { display: table;}
    .PhotoZoomSlider > .align_center {display: table-cell;}*/

    .selectionList .sec .row .col-l, .selectionList .sec .row .col-r {float: none;}
    .selectionList .sec .row .Img {width: 100%;}


    .content .section .wrap { padding: 0px 17% 60px;}
    
    .page2 .main .content {background-size: 50%;}

    .back-top {bottom: 30px;}

    /*.menu li a:hover, .menu li:hover>a, .menu li.current a { background-size: 65px; padding-left: 55px;}*/

    .sponsors {display: none;}

    .selection > div p { text-align: left;}

    div#thumbs > span {width: 20%; margin: 0 10px;}

    .slick-slider {margin-bottom: 0;}
    .slick-dots {bottom: initial; top: -60px;}
    .slick-dots li {width: 30px; height: 30px;}
    .slick-dots li button:before {font-size: 70px;}
    .slick-prev {left: -8%;}
    .slick-next {right: -8%;}

    .selection .selectionInfo { padding: 0px 0%;}

   /* .main .section_1 .hd h1 span {background: #F5D6C5;}*/
    .main .section.section_2 .content {padding: 0 10%;}



}

/*@media screen and (max-device-width: 480px) {*/
@media screen and (max-width: 480px){
    /*憒���靝蝙�鍂��銋贝�萘蔭撖砍漲 <= 480px嚗�����滩�匧�仿�躰ㄐ�� CSS��*/
    /*.arrowDown {display: none;}*/
    body {
        opacity: 1;
        -webkit-animation: none;
           -moz-animation: none;
            -ms-animation: none;
             -o-animation: none;
                animation: none;
    }
    .mainNav {}
    .wrapper > .header {/*height: 65%; border-bottom: 5px solid #7d0000;*/}
    .wrapper > .header .mainGraphic { padding: 30% 0 0 0; }
    
    .fontSize {display: none;}
    .main { }
    /*.main .deco {display: none;}*/
    .main > .hd .wrap { padding: 0px 5% 25px 5%; }
    .content .section .wrap { padding: 20px 5%;}
    .main .content .section h4 {font-size: 200%;}
    .main .content .section_2 { min-height: initial;}
    .main .content .section_2 .wrap {padding-left: 5%;}

    .innerPage .main > .hd .wrap {padding-bottom: 30px;}

    /*.wrapper > .header .logo {width: 55%;}*/
    .wrapper > .header .mainGraphic .title_1{width: 85%;left: 40%;}
    .main .section.section_1 .intro{padding-bottom:45%;}


    

    .content .brief > .wrap {  padding: 0 5% 60px 5%;}
    .selectionList .sec > .wrap {  padding: 60px 5%;}

    

    .selectionList .sec.clearAll > .wrap .content .Img a { width: 100%;  margin: 0;}

    .selectionList .sec h2 {margin-bottom: 20px;font-size:150%;}

    .siteMap ul { padding: 0 5% 60px 5%;}

    .wrapper > .header .mainGraphic .title_2 { width: 85%;}

    /*.back-top {display: none !important;}*/

    .main .content .section_3 > .wrap { padding-bottom: 50px;}

    .innerPage .main {padding-top: 140px;}

    .page3 .main .content:before {display: none;}

    .slick-dots {top: -15px;}


    .page5 .main { background-position: center 25px; }
    .page5 .main:after { top: 10%;}
    .page5 .main .content  {padding-bottom: 0;}

    .page6 .main .content:before {display: none;}

    .page7 .main { background-size: 100px;}
    .page7 .main:after { top: 65px;}
    .page7 .main .content { background-size: 55%;}
    .page7 .main .content:before { width: 45%; height: 0; padding-top: 60%; background-size: 100%;}
    .page7 .section_1 {padding-bottom: 50px;}


    .listAll dt, .listAll dd.uniCode {width: 100%; float: none; }
    .listAll dt {padding: 0; margin-bottom: 10px;}
    .listAll dd.uniCode p {text-align: left; margin: 0;}

    .menu li a { /*height: 38px; line-height: 38px; font-size: 90%;*/ font-weight: 100;}

    .relatedPage li.current a.btn {width: 100px;text-indent: -9999px;}
    .relatedPage li.current a.btn:after {
        position: absolute;
        left: 40px;
        top: 0px;
        content: "�𦒘�硋祐";
        color: #fff;
        width: 50px;
        text-indent: 0;
    }
    .sf-menu ul {right: -3px; left: initial !important;}
    .innerPage .sf-menu ul {right: 0px;;}

    .menu li a:hover, .menu li:hover>a, .menu li.current a { /*background-size: 65px; padding-left: 55px;*/}

    .footer .relatedLinks li {width: 33.33333%; min-height: 180px;}

    div#thumbs > span {width: 40%;}

    .main .section .deco1 {width: 80%; padding-top: 60%;}

    .main .section .hd {margin-bottom: 50px;}
    .main .section .hd > .wrap {}
    .main .section .hd h1 {font-size: 220%;}

    .main .section.section_2 .content {padding: 0 2%;}

    .main .section .hd h1:before { width: 300px; margin-left: -150px;}

    /*table*/
   .tableStyle dl {display: block; /*border-bottom: 1px solid #C3B7A7;*/margin: 10px 0;}
   
    .tableStyle.table_1 dt, .tableStyle.table_1 dd {
        width: 100%; 
        display: block; 
        border-bottom: none; 
        padding: 10px;
        padding-left: 125px;
        position: relative;
    }
    .tableStyle.table_1 dt {display: none;color:#cd3518;}
    .tableStyle.table_1 dl dt {color:#cd3518;}
    .tableStyle.table_1 dd:before {
        position: absolute;
        display: block;
        left: 10px;
        top: 10px;
        color: #000;
    }
    .tableStyle.table_1 dd:nth-child(1):before {content: "��苷誨";}
    .tableStyle.table_1 dd:nth-child(2):before {content: "雿𡏭��";}
    .tableStyle.table_1 dd:nth-child(3):before {content: "�����";}
    .tableStyle.table_1 dd:nth-child(4):before {content: "敶Ｗ��";}
    .tableStyle.table_1 dd:nth-child(5):before {content: "�𧋦撟�撠箏站";}

    .tableStyle.table_1 dl dt:nth-child(1), .tableStyle.table_1 dl dd:nth-child(1) {width: 100%;text-align: left;}
    .tableStyle.table_1 dl dt:nth-child(2), .tableStyle.table_1 dl dd:nth-child(2) {width: 100%;text-align: left;}
    .tableStyle.table_1 dl dt:nth-child(3), .tableStyle.table_1 dl dd:nth-child(3) {width: 100%; text-align: left;}
    .tableStyle.table_1 dl dt:nth-child(4), .tableStyle.table_1 dl dd:nth-child(4) {width: 100%;text-align: left;}
    .tableStyle.table_1 dl dt:nth-child(5), .tableStyle.table_1 dl dd:nth-child(5) {width: 100%;text-align: left;}

}