@viewport {width: device-width;}

@media screen and (min-width: 1681px) {
    .wrapper > .header .mainGraphic .title_1{width: 40%; right:55%; bottom:5%;}
}

@media screen and (min-width: 1680px) {
    .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: 450px;}
    .selectionList .sec_2 {background-size: 250px;}
    .selectionList .col {width: 33.3333%;}
    .mainGraphic .graphic {width: 35%; padding-top: 40%;}
    #main .section>.wrap {width: 70%;}
}

@media screen and (min-width: 1366px) and (max-width: 1679px) {
    .selectionList .col {width: 33.3333%;}
    .mainGraphic .graphic {width: 37%; padding-top: 43%;}
}

@media screen and (max-width: 1280px) {
    .page5 .main {background-position: center top;}
    .fontSize{display: none;}
    .menu li a {font-size: 115%;}
    .main > .hd h1{background: transparent;}
    .main > .hd h1:after{display: none;}
}
@media screen and (max-width: 1024px) {
	.main .section.section_3 h2{
		font-size: 150%;
		padding-right: 30px;
		}
	.main .section p.location{
		font-size: 90%;
	}
	.map{
		padding-bottom: 50%;
	}
	.back-top{
		visibility: hidden;
	}
	pre{
		font-size: .9rem;
	}
	.copyright{
		padding:0 20px 20px;
	}
	.lou_lable a{
		width: 70%;
		padding: 8px 0;
		display: block;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	.main .section{
		padding: 30px 10%;
	}
	.main .section_4{
		padding: 0 20px;
	}
	.main .section_4 .hd h1{
		font-size: 160%;
	}
	.main .section .hd > .wrap{
		padding-bottom: 10px;
	}
	.main .section_2 .hd h2{
		width: 100%;
		font-size: 130%;
	}
	.collect-title{
		font-size: 140%;
	}
	.collect-title span:before{
		display: none;
	}
	.collect-title span:after{
		display: none;
	}
	.activeimg,.top-img .activeimg span{
		height: 35vh;
	}
	.main .section_2_1 .hd h2 {
background: url('../images/unit-title-bk.png') no-repeat center;
background-size: contain;
		font-size: 120%;
		height: 75px;
		line-height: 65px;
	}
	.main .section.unit01 {
    background: url(../images/unit01bk.png)no-repeat center 0px/130% auto,url(../images/begintexture.png) repeat-y center top/ 100% auto;
		padding-top: 70px;
	}
	.main .section.unit02 {
    background: url(../images/unit02bk.png)no-repeat center 0px/130% auto,url(../images/begintexture.png) repeat-y center top/ 100% auto;
		padding-top: 30px;
	}
	.main .section.unit03 {
    background: url(../images/unit03bk.png)no-repeat center 0px/130% auto,url(../images/begintexture.png) repeat-y center top/ 100% auto;
		padding-top: 30px;
	}
	.collection .row2 a{
		width: 40%;
		    margin-bottom: 25px;
    border-bottom: 1px dotted #b1a163;
    margin: 0 4% 15px;
	}
	.collection .row1 a{
		width: 100%;
		    margin-bottom: 25px;
    border-bottom: 1px dotted #b1a163;
    margin: 0 4% 15px;
	}
	.collection a img{
		width: 80%;
	}
	.main .content .collection a p{
		padding:0;
		background: none;
	}
	.text1_1 {
background: url('../images/title1-1.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.text1_2{
background: url('../images/title1-2.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.text1_3 {
background: url('../images/title1-3.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.text2_1 {
background: url('../images/title2-1.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.text2_2 {
background: url('../images/title2-2.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.text2_3 {
background: url('../images/title2-3.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.text3_1 {
background: url('../images/title3-1.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.text3_2 {
background: url('../images/title3-2.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.text3_3 {
background: url('../images/title3-3.png') no-repeat center top/50% auto;
padding: 60px 0 0px;
	}
	.main .content .article p{
		font-size: 100%;
	}
	.info {
font-size: 90%;
width: 100%;
float: none;
}
	.photo{
		text-align: center;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}
    .sponsors {display: none;}
    /* .menu li.nav5 {width:100%;} */
    .mainGraphic .graphic {bottom: 0;}
    .siteMap ul li { margin: 0 0 2%;}
    .menu ul {top: 37px;}
    .menu li {width: 100%;}
    .menu li.current a {color: #fff;}
    .menu li a { font-size: 110%; text-align: left; height: auto; line-height: 120%; padding: 15px; color: #fff;}
    
    .mainNav > .wrap { position: relative; height: 100%;}
    .menu { display: none; position: relative; background-color: #2b2c1c; text-align: left; box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);}
    .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; top: 0 !important; height: 50px;}
    /* .menu li {display: block; margin: 0;border-right:0px solid rgba(255,255,255,.1);} */
    .menu li {
        display: inline-block; 
        width: 50%;
        margin: 0;
		border-bottom:1px solid #393a29;
		border-right:1px solid #393a29;
	}
    .tableStyle dl dt, .tableStyle dl dd {
   
    white-space:normal;
}
    .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;}


    .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; background:#6B9899}
    .menu li a:hover:after, .menu li:hover>a:after, .menu li.current a:after {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;}

    .selectionList .sec:nth-child(even) h2,
    .selectionList .sec:nth-child(even) h3{ padding-left: 0;}
    .selectionList .sec:nth-child(even) ol{ margin-left: 0;}

    .selectionList .sec h2{width: 100%;margin-bottom: 13px;}
    .selectionList .col-l, .selectionList .col-r {width: 100%; padding: 0 5px;}

    .selectionList .sec > .wrap {margin: 0 auto;padding-bottom: 0;}

    .selectionList .sec > .wrap .content, .selectionList .sec:nth-child(even) > .wrap .content, .content .section .gallery {padding: 0;}
    .selectionList .sec > .wrap .content .Img, .content .section .gallery > .Img {  position: static;  width: 100%;}

    

    /*路線規劃按鈕出現*/
    .footer .relatedLinks{display: block;}
    .footer .relatedLinks li{display: inline-block;float: none;border: none; margin-right: -4px;width: 33.33%;}
    .footer .relatedLinks li.nav_map{display: inline-block;}
}

@media screen and (min-width: 768px) and (max-width: 979px) {.mainWrap { width: 768px; }}

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

    .main .content p {margin-bottom: 5%;}

    .mainGraphic .title .title_mobile{display: block;}

    .footer .col-l, .footer .col-r, .footer .col-r .socialMedia {float: none; margin: 0 auto;width: 100%;}
    .footer .copyR { padding: 10px 0 0 15px; 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%;}
    .main > .deco1 { width: 25%; padding-bottom: 46%;}
    .main > .deco2 { width: 30%; padding-bottom: 13%; left: 5%;}


}

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

    .content .section.SelecttionList .wrap {padding: 0px 5% 60px;}
    .main .content.normal {width: 100%;}

    .fontSize, .index .fontSize {display: none;}
    .mainWrap {width: auto;padding: 50px 20px;}
    .arrowDown {bottom: 5%;}


    .fontSize, .index .fontSize {right: 5%;}

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

    .content .brief > .wrap{padding: 0;width: 90%}
    .main > .hd .wrap,  .listAll > .wrap, .siteMap ul {padding-left: 5%; padding-right: 5%;}
    .selectionList .sec > .wrap{width: 90%;}
    .main .content .section_1 .deco2 {right: -110px;}
    .main .content .section_2 .deco1 {left: 50%;}
    .main .content .section_3 .deco2 {left: -100px;}

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

    .content .section .wrap { padding: 0px 8% 60px;}

    .page2 .main .content {background-size: 50%;}

    .back-top {bottom: 30px;}

    .selectionList .sec > .wrap { width: 90%;}

    .siteMapContainer .brief {display: none;}


    .selectionList .col h2 {
        font-size: 128%;
        padding: 17px 20px 73px 20px;
        min-height: 155px;
    }

    .tableBeautified_1 th, .tableBeautified_1 td{
        font-size: 90%;
        padding: 5px 5px;
    }
}
@media screen and (max-width: 580px){
    .selectionList .col {width: 100%; padding: 0;}
}
@media screen and (max-width: 480px){
    body {
        opacity: 1;
        -webkit-animation: none;
           -moz-animation: none;
            -ms-animation: none;
             -o-animation: none;
                animation: none;
    }
    .fontSize {display: none;}
    .main {  padding: 25% 0 0; background-size: 50%;}
    .index .content .section .wrap, .index .main > .hd .wrap { padding: 0px 5% 25px 5%; }
    .index .main .content .section_1 .wrap p:nth-child(2) {padding: 0;}
    .main > .hd h1 {font-size: 160%;    line-height: 1.3;padding: 0;}
    .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%;}
    .main .content p {margin-bottom: 10%;}
    .main > .hd .wrap {padding-bottom: 30px;text-align: left;}
    .selectionList .sec h2 {font-size: 150%;}
    .listAll > .wrap, .siteMap ul {padding-left: 5%; padding-right: 5%;    }
    .mainGraphic .title .title_mobile{width: 90%;left: 5%;}
    .selectionList, .selectionList .sec_2 {background-image: none;}
    .mainGraphic .graphic { width: 65%; padding-top: 70%;}
    .selectionList .sec > .wrap {margin: 0 auto;}

    .selectionList .sec.clearAll > .wrap .content .Img a { width: 100%;  margin: 0;}
    .selectionList .col h2 {font-size: 140%;}

    .selectionList .sec > .wrap .bothSelection>li>.content .Img{max-width: 100%;}

    .content .section .gallery .detail span {padding: 2px 6px;}

    .main .deco {display: none;}

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

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

    .main {padding-top: 50px;}

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

    .slick-dots {bottom: initial; top: -50px;}
    .slick-dots li {width: 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 {font-size: 90%; font-weight: normal;}

    .relatedPage li.current a.btn {width: 100px;text-indent: -9999px;}
    .sf-menu ul {right: -3px; left: initial !important;}
    .sf-menu ul {right: 0px;}
    .menu li a:hover, .menu li:hover>a, .menu li.current a { background-size: 65px;}

    .tableStyle.table_1{width: 100%;}

}
@media screen and (max-width: 420px){
    
}
@media screen and (max-width: 320px){
    .selectionList .col h2 {
        font-size: 110%;
        min-height: 131px;
    }
}




 

@media screen and (min-width: 1681px) {
    .wrapper > .header .mainGraphic{
        background-position-y: 80%; 
    }


    }
}


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

    }
}


@media screen and (max-width: 1600px) {
    .wrapper > .header .mainGraphic .title_1{
    position: absolute;

    }
}

@media screen and (max-width: 1440px) {
    .wrapper > .header .mainGraphic{background-position-y: 97%; }
	.wrapper > .header .mainGraphic .title_1{width: 47%;}  
}


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

    .wrapper > .header .mainGraphic{background-position-y: 85%;}
    .wrapper > .header .logo {width: 13%; top: 2.5%; left: 2%; }
    .wrapper > .header .upperNav{min-width: 310px;}
    .wrapper > .header .upperNav .wrap {padding: 15px 0;}
    .wrapper > .header .upperNav .wrap .col{padding: 5px 0;}
    .wrapper > .header .upperNav .col.language{padding: 0;}
    .wrapper > .header .upperNav .language a {padding: 10px 13px;}

    .mainNav{height: 75px;}
    .menu li a{height: 75px;}
    .wrapper > .header .mainGraphic .title_1{width: 50%}


}



@media screen and (max-width: 1280px) {
    .wrapper > .header .mainGraphic .title_1{

    }
}
@media screen and (max-width: 1280px)and (min-height: 800px) {
    .wrapper > .header .mainGraphic .title_1{width: 52%;bottom: 13%}
    
    /* .menu{box-shadow: inset 0px 0px 20px -3px rgba(0,0,0,0.3)} */
}

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

}



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

    .wrapper > .header .mainGraphic {
        background: url(../images/mob-banner.jpg) no-repeat ;
        background-position-y: 50px;
        background-size: 100%; 
    }

    .wrapper > .header .mainGraphic .title_1{display: none;}
    .mainNav {height: 50px;}
    .wrapper > .header .logo { width: 180px; top: 7px; z-index: 99999; position: fixed;}

}



@media screen and (max-width: 1024px) and (max-height: 1366px) {

    /*.wrapper > .header .mainGraphic .title_1{
    top: 13%;
    width: 30%;
    left:35%;
    }*/
}

@media screen and (min-width: 1366px) and (min-height: 1024px) {

    .wrapper > .header .mainGraphic {
    background: url(../images/mainGraphicBG.jpg) no-repeat center #92D0D2;
    background-size: contain;
    }

    
    /* .wrapper > .header .mainGraphic .title_1{
    top: 46.5%;
    width: 36.5%;
    left: 12.5%;
    } */
}

@media screen and (min-width: 1680px) {
    .wrapper > .header .mainGraphic { background-size: cover;}

}


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

    .menu li a{height: auto;}
    .main:before{display: none;}

}

@media screen and (max-width: 640px) {
    .wrapper > .header .mainGraphic .title_1 {display: none;}
    
}

@media screen and (max-width: 500px) {
     .wrapper>.header .mainGraphic .title_1{
        position: absolute;
        width:44%;
        left: 28%;
        top: 15%;
     }

    }

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

.main .content  .content .wrap{
    width: 100%;
    padding: 20px 3% 20px 3%;
    text-align: center;
}
.menu li a{height: auto;}

.wrapper > .header .mainGraphic {
        background: url(../images/mainGraphicBG_mobile.jpg) no-repeat center  #2b2c1c ;
        background-position-y: 50%;
        height: 110%;
        background-size: cover; 
    }

.main .content .content .wrap h2{
    font-size: 120%;
}

@media screen and (max-width: 480px) and (max-height: 320px) {
    /*iphone4橫*/

    .wrapper>.header .mainGraphic .title_1 img{
    width:100%;
    height:auto; 
    }    
      .wrapper>.header .mainGraphic .title_1{
        position: absolute;
        width: 12%;
        left: 44%;
        top: 50px;
     }

}