@charset "UTF-8";

@media(min-width: 1920px) {
    body {
        font-size: 1.3rem;
    }
}

@media(max-width: 1380px) {

    .subtxt span:nth-child(1):before,
    .subtxt span:nth-child(2):after {
        width: 60px;
    }

    .TxtBox .titleBox {
		font-family: 'Noto Sans TC', serif;
		font-weight: 700;
		font-size: 30px;
		color: #2c3034;
	}

	.TxtBox .text .title {
		font-family: 'Noto Serif TC', serif;
		padding-bottom: 15px;
		letter-spacing: 0;
		font-size: 22px;
		color: #222;
	}


	.TxtBox .text p {
		line-height: 1.6rem;	
		margin: 0;
		text-align: justify;
		text-align: distribute;

	}

	.TxtBox .text p span {
		display: block;
		font-size: 14px;
	}

    .subtxt b {
        margin-top: 30%;
        width: 60px;
        height: 60px;
    }
	
	.PAGE05-1 .titleBox, .PAGE05-2 .titleBox, .PAGE07 .titleBox {
		position: absolute;
		top: 0;
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		height: 500px;
		color: #ffffff;
	}
	
	.PAGE05-1 .text p {
		margin-left: 60px;
	}
	
	.PAGE05-1 .text .title {
		color: #ffffff;
	}
	
	.PAGE05-2 .text .title {
		color: #ffffff;
	}
	
	.PAGE07 .text .title {
		color: #ffffff;
	}

    .FOOTER .leftBox,
    .FOOTER .rightBox {
        padding: 0px 5%;
    }

    .subtxt span:nth-child(1):before,
    .subtxt span:nth-child(2):after {
        padding-top: 7%;
    }
}

@media(min-width: 991px) {
    .PAGE07 {
        padding-right: 0;
    }
}

@media(max-width: 991px) {
	.bannerArea {
		background-image: url(../images/Grid_BG_m20210401.jpg);
		background-position: center center;
	}
	
	.bannerArea .HomeLogo-1 {
		display: none;
	}
	
	.bannerArea .HomeLogo-2 {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.bannerArea .HomeLogo-2 img {
		width: 100%;
		height: 100%;
	}
	
    .TxtBox {
        padding-right: 0;
        margin-bottom: 2rem;
    }
	
	.TxtBox .titleBox {
		font-family: 'Noto Sans TC', serif;
		font-weight: 600;
		font-size: 12px;
		color: #fff;
		margin-bottom: 1.5rem;
	}
	
	.TxtBox .text .title {
		font-family: 'Noto Serif TC', serif;
		padding-bottom: 15px;
		letter-spacing: 0;
		font-size: 20px;
		line-height: 2rem;
	}

    .TxtBox.TxtBox01 {
        flex-wrap: wrap;
    }

    .TxtBox.TxtBox01 .titleBox {
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        display: block;
        width: 100%;
        margin-bottom: 2rem;
        margin-right: 0;

    }

    .TxtBox.TxtBox02 .text {
        padding-left: 0;
    }
	
	.TxtBox.TxtBox02 .titleBox {
		margin-bottom: 1.5rem;
	}

    .TxtBox.TxtBox02 .text:before {
        position: static;
        top: auto;
        display: block;
        margin-bottom: 1rem;
        width: 100px;
        height: 3px;
    }
	
	.TxtBox .text p {
		margin-top: 0;
		margin-left: 0;
		margin-bottom: 20px;
		font-size: 0.9rem;
		line-height: 1.4rem;
	}
	
	.TxtBox .text p span {
		font-size: 14px;
	}

    .bannerArea .subtxt {
        margin-top: 35vh;
        width: 100%;
        font-size: 1rem;
    }

    .subtxt span:nth-child(1):before,
    .subtxt span:nth-child(2):after {
        padding-top: 5%;
    }

    .subtxt b {
        margin: 0 3px;
        display: inline-block;
        width: 20px;
        height: 20px;
    }

    .subtxt b:nth-child(4) {
        border-width: 2px;
    }
	
	.bannerArea .align-items-center {
		-ms-flex-align: baseline!important;
		align-items: baseline!important;
	}	
	
	.bannerArea .title-1 {
		width: 30px;
		margin-top: 5vh;
		margin-left: 20px;
		margin-right: 20px;
	}

	.bannerArea .title-2 {
		width: 30px;
		margin-top: 5vh;
	}

	.bannerArea .title-3 {
		width: 80px;
		margin-top: -10vh;
		margin-left: 65vw;
	}

	.bannerArea .logo {
		width: 80vw;
		height: 65vh;
	}
	
	.rightBox2{
		height: 65vh;
	}
	

    .PAGE01 {
        padding: 0;
		background-color: #efefef;
        padding-right: 0;
    }
	
	
	.PAGE01 .align-items-center {
		-ms-flex-align: center!important;
		align-items: center!important;
	}
	
	.PAGE01 .titleBox {
		position: inherit;
		top: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		height: auto;
	}
	
	.PAGE01 .text {
		position: inherit;
		top: auto;
		padding-right: 0;
	}

    .PAGE01 .TxtBox {
        padding: 0 7%;
    }
	
	.PAGE01 .innerImg {
		padding-top: 65%;
		height: 0;
	}

    .caseSlick {
        padding: 0 5px;

    }

    .caseSlick .item {
        padding: 0 5px;
    }

    .caseSlick .item .Img .innerImg {
        padding-top: 110%;
        height: 35vh;
    }

    .PAGE02 {
		background-color: #BBB4A0;
		background-image: url(../images/page02_bg_m.jpg);
		background-position: top center;
		background-size: cover;
		background-repeat: no-repeat;
	}

    .PAGE02 .leftBox {
        max-width: 80%;
    }


    .PAGE02 .caption_icon {
        width: 60px;
        height: 60px;
    }
	
	.PAGE02 .align-items-center {
		-ms-flex-align: center!important;
		align-items: center!important;
	}
	
	.PAGE02 .titleBox {
		position: inherit;
		top: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		height: auto;
	}
	
	.PAGE02 .text {
		position: inherit;
		top: auto;
		padding-right: 0;
	}
	
	.PAGE02 .innerImg {
		padding-top: 80%;
		height: 0;
	}
	
	.PAGE03 .align-items-center {
		-ms-flex-align: center!important;
		align-items: center!important;
	}
	
	.PAGE03 .titleBox {
		position: inherit;
		top: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		height: auto;
	}
	
	.PAGE03 .text {
		position: inherit;
		top: auto;
		padding-right: 0;
	}

    .PAGE03 .TxtBox {
        transform: none;
    }

    .PAGE03 .ImgBox h3 {
        font-size: 14px;
        margin-top: 0;
        display: none;
    }

    .PAGE03 .TxtBox .text .title:before {
        display: block;
    }

    .PAGE03 .ImgBox .item {
        padding: 0;
    }
    .PAGE03 .innerImg {
        padding-top: 65%;
        height: 0;
    }
	
	.PAGE03-1 {
		background-color: #ffffff;
		background-image: url(../images/page06_bg_m.jpg);
		background-position: bottom center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.PAGE03-1 .text p {
		width: 58%;
	}
	
	.PAGE03-1 .TxtBox {
		top: -19vh;
		left: 35%;
	}
	
	.PAGE03-2 .slick-dotted.slick-slider {
		margin-bottom: 15vh;
	}
	
	.PAGE03-2 .innerImg {
		height: 35vh;
	}

	.PAGE03-2 .text {
		top: 5vh;
	}

	.PAGE03-2 .text h2 {
		margin-bottom: 15px;    
		font-family: 'Pathway Gothic One', sans-serif;
		font-size: 50px;
		color: #ccc;
	}


    .PAGE04 {
        padding-right: 8%;

        background: -webkit-linear-gradient(top, #cd941a 0%, #cd941a 60%, #ebebeb 60%, #ebebeb 100%);
        background: -o-linear-gradient(top, #cd941a 0%, #cd941a 60%, #ebebeb 60%, #ebebeb 100%);
        background: linear-gradient(top, #cd941a 0%, #cd941a 60%, #ebebeb 60%, #ebebeb 100%);

    }

    .PAGE04 .innerImg {
        padding-top: 65%;
        height: 0;
    }

    .PAGE05 .contentBox {
        padding: 5%;
		top: 8vh;
        left: 0;
        right: auto;
        height: auto;
        width: 60%;
        /*padding-bottom: 0;*/
    }
	
	.PAGE05-1{
		background-image: url(../images/page04_bg_m_20210401.jpg);
		background-color: #878e98;
		background-position: bottom right;
		background-size: auto 100%;
		background-repeat: no-repeat;
	}
	
	.PAGE05-1 .casepanel {
		position: absolute;
		width: 95vw;
		top: 52vh;
		left: 5vw;
	}
	
	.PAGE05-1 .casepanel .col-6 {
		padding-bottom: 15px;
		max-width: 30%;
	}
	
	.PAGE05-1 .align-items-center {
		-ms-flex-align: center!important;
		align-items: center!important;
	}
	
	.PAGE05-1 .titleBox {
		position: inherit;
		top: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		height: auto;
	}
	
	.PAGE05-1 .text {
		position: inherit;
		top: auto;
		padding-right: 0;
	}
	
	.PAGE05-1 .text p {
		width: 48%;
	}
	
	.PAGE05-1 .master-title {
		display: none;
	}
	
	.PAGE05-2 .contentBox{
		padding-right: 5%;
		padding-top: 12vh;
		width: 100%;
		height: 100vh;
		background-color: rgba(107, 149, 29,0.9);
	}
	
	.PAGE05-2 .align-items-center {
		-ms-flex-align: center!important;
		align-items: center!important;
	}
	
	.PAGE05-2 .titleBox {
		position: inherit;
		top: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		height: auto;
	}
	
	.PAGE05-2 .text {
		position: inherit;
		top: auto;
		padding-right: 0;
	}
	
	.PAGE05-2 .innerImg {
		height: 40vh;
	}

	.PAGE05-3{
		background-image: url();
		background-position: top right;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.PAGE05-3 .contentBox{
		background-color: rgba(107, 149, 29,1);
		background-image: url();
		background-position: top right;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.PAGE05-3 .innerImg {
		padding-top: 0;
		height: 35vh;
	}

    .PAGE06 {
        background: #fff;
    }
	
	.PAGE07 .align-items-center {
		-ms-flex-align: center!important;
		align-items: center!important;
	}
	
	.PAGE07 .titleBox {
		position: inherit;
		top: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		height: auto;
		color: #2c3034;
	}
	
	.PAGE07 .text {
		position: inherit;
		top: auto;
		padding-right: 0;
		color: #4f5358;
	}
	
	.PAGE07 .text .title {
		color: #cd941a;
	}
	
	.PAGE05 .contentBox {
		width: 100%;
		top: 8vh;
	}
	
	.PAGE08-1{
		background-image: url(../images/page08_bg_m.jpg);
		background-position: top center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.PAGE08-1 .titleBox {
		position: inherit;
		top: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		height: auto;
	}
	
	.PAGE08-1 .text {
		top: auto;
	}
	
	.PAGE08-1 .ImgBox {
		top: 30vh;
	}
	
	.PAGE08-1 .innerImg {
		padding-top: 0;
		width: 100%;
		height: calc(100vw * 0.666666);
	}
	
	.PAGE08-1 .slick-next, .PAGE08-1 .slick-prev {
		top: 52%;
		width: 70px;
		height: 70px;
	}
	
	.PAGE02 .slick-next, .PAGE02 .slick-prev {
		top: 52%;
		width: 70px;
		height: 70px;
	}
	
	.FOOTER {
		background-image: url(../images/Footer_BG_m-20210405.jpg);
		background-position: center center;
	}

    .FOOTER .btn-group {
		bottom: 34vh;
		left: auto;
		width: 93%;
    }
	
	.FOOTER .marginspace {
		margin-right: 10px;
	}
	
	.FOOTER .info {
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		height: auto;
		margin-bottom: 35px;
	}
	
	.FOOTER .footer-logo {
		position: absolute;
		bottom: 55vh;
		left: 24%;
		--widthA: 1000;
		--widthB: calc(100vw / 1920);
		--widthC: calc(var(--widthB) * var(--widthA));
		width: var(--widthC);
	}
	
	.FOOTER .footer-form {
		display: none;	
	}
	
	.FOOTER .rightBox h5 {
		font-size: 20px;
		margin-top: 40px;
		margin-bottom: 20px;
	}
	
	.FOOTER .footer-title, .FOOTER .footer-map, .FOOTER .footer-info {
		display: none;
	}
	
	.mobile-hide, li.mobile-hide{ display:none;}
	.desktop-hide, li.desktop-hide{ display:block;}
	
	.viewport { background-image: url(''); background-position: bottom center; background-size: auto 100%; }
	
	.fancybox-content{ width: 100vw; max-height: 100vh; padding: 30px; }
	.popupcontent p{
		margin-bottom: 20px;
		font-size: 14px;
	}
}