@charset "UTF-8";

section {
    padding: 0 8%;
}

/*---------------------
    BANNER AREA
---------------------*/
.bannerArea {
	position: relative;
	background-color: #fff;
	background-image: url(../images/Header_BG-20210324.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}

.bannerArea .fp-tableCell {
	vertical-align: top;
}

.bannerArea .HomeLogo-1 {
}

.bannerArea .HomeLogo-2 {
	display: none;
}

.bannerArea .title-1 {
	position: absolute;
	top: 0;
	left: -7.2vw;
	--widthA: 370;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.bannerArea .title-2 {
	position: absolute;
	top: 10vh;
	right: 20vw;
	--widthA: 680;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.bannerArea .title-3 {
	position: absolute;
	top: 88vh;
	right: 20vw;
    --widthA: 680;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.object {
  animation: MoveUpDown 1.5s linear infinite;
}

@keyframes MoveUpDown {
  0%, 100% {
    top: 88vh;
  }
  50% {
    top: 90vh;
  }
}

.bannerArea .logo {
    height: 80vh;
}

.bannerArea .rightBox {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

}

.rightBox2{
    height: 80vh;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.subtxt:after {
    content: '';

}

.subtxt span {
    display: block;
    color: #fff;
    text-align: center;
    letter-spacing: 5px;
}

.subtxt span:nth-child(1):before,
.subtxt span:nth-child(2):after {
    content: '';
    display: block;
    border: 1px solid #fff;
    /*padding-top:15%;*/
    border-bottom: none;
    width: 70px;
    height: 35px;
    margin: 15px auto;
}

.subtxt span:nth-child(2):after {
    transform: rotate(180deg);
}

.subtxt span:nth-child(2) {
    margin-bottom: 3rem;
}

.subtxt b {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: 45%;
    /*max-height: 35px;*/
    box-sizing: border-box;
}

.subtxt b:nth-child(3) {
    background-color: #ef9b00;
}

.subtxt b:nth-child(4) {
    border: 5px solid #c65200;
}

.subtxt b:nth-child(5) {
    background-color: #f6c726;

}

.TxtBox .titleBox {
    font-family: 'Noto Sans TC', serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.7rem;
	color: #fff;
}

.TxtBox .text .title {
    font-family: 'Noto Serif TC', serif;
    padding-bottom: 30px;
    letter-spacing: 0.2rem;
	font-size: 32px;
	color: #222;
	line-height: 3rem;
}


.TxtBox .text p {
    margin: 0;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.8rem;    
    text-align: justify;
    text-align: distribute;

}

.TxtBox .text p span {
    display: block;
}


/*.----------------
   TxtBox.TxtBox01
---------------- */


.TxtBox.TxtBox01 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: flex-end;
}

.TxtBox.TxtBox01 .titleBox {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;

    display: inline-block;
    margin: 0;
    margin-right: 2rem;
}




.TxtBox.TxtBox02 .titleBox {
    margin-bottom: 3rem;
}

.TxtBox.TxtBox02 .text {
    padding-left: 4.5rem;
}

/*---------------------
        PAGE01
---------------------*/


.PAGE01 {
    background-color: #efefef;
	background-image: url(../images/page01_bg.jpg);
	background-position: right;
	background-size: auto 100%;
	background-repeat: no-repeat;
    padding-right: 5%;
}

.PAGE01 .TxtBox02 {
    padding-right: 5%;
}

.PAGE01 .align-items-center {
    -ms-flex-align: baseline!important;
    align-items: baseline!important;
}

.PAGE01 .titleBox {
	position: absolute;
	top: 0;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	height: 500px;
}

.PAGE01 .text {
	position: absolute;
	top: 55vh;
	padding-right: 5%;
}

.PAGE01 .innerImg {
    padding-top: 0;
    height: 70vh;
}


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

.PAGE02 .TxtBox {
    /*padding-bottom: 3rem;*/
    /*transform: translateX(-48px);*/
}

.PAGE02 .caseSlick .item {
    padding-left: 20px;
}

.PAGE02 .align-items-center {
    -ms-flex-align: baseline!important;
    align-items: baseline!important;
}

.PAGE02 .titleBox {
	position: absolute;
	top: 20vh;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
}

.PAGE02 .text {
	position: absolute;
	top: 19vh;
	padding-right: 8rem;
}

.PAGE02 .innerImg {
    padding-top: 0;
    height: 70vh;
}


/*---------------------
        PAGE03
---------------------*/

.PAGE03 {
    background-color: #efefef;
	background-image: url(../images/page08_bg.jpg);
	background-position: top right;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.PAGE03 .align-items-center {
    -ms-flex-align: baseline!important;
    align-items: baseline!important;
}

.PAGE03 .titleBox {
	position: absolute;
	top: 20vh;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	height: 500px;
}

.PAGE03 .text {
	position: absolute;
	top: 20vh;
	padding-right: 15%;
}

.PAGE03 .innerImg {
   top: -40px;
	padding-top: 0;
    height: 90vh;
}

.PAGE03-1 {
    background-color: #ffffff;
	background-image: url(../images/page06_bg20210324.jpg);
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
}

.PAGE03-1 .TxtBox {
	top: 28vh; left: 2vw;
}

.PAGE03-1 .titleBox {
	color: #888;
}

.PAGE03-1 .innerImg {
	margin-left: -2vw;
}

.PAGE03-2 {
    background-color: #ffffff;
	background-image: url(../images/page06_bg.jpg);
	background-position: top right;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.PAGE03-2 .innerImg {
	height: 75vh;
}

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

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


/*---------------------
        PAGE04
---------------------*/

.PAGE04 {
    padding-right: 0;
    background: -webkit-linear-gradient(left, #cd941a  0%, #cd941a  60%, #ebebeb 60%, #ebebeb 100%);
    background: -o-linear-gradient(left, #cd941a  0%, #cd941a  60%, #ebebeb 60%, #ebebeb 100%);
    background: linear-gradient(left, #cd941a  0%, #cd941a  60%, #ebebeb 60%, #ebebeb 100%);

}

.PAGE04 .innerImg {
    padding-top: 0;
    height: 70vh;
}

/*---------------------
        PAGE05
---------------------*/

.PAGE05 {
    padding: 0;
    background: -webkit-linear-gradient(left, #e3e3e3 0%, #e3e3e3 60%, #fff 60%, #fff 100%);
    background: -o-linear-gradient(left, #e3e3e3 0%, #e3e3e3 60%, #fff 60%, #fff 100%);
    background: linear-gradient(left, #e3e3e3 0%, #dadada 60%, #fff 60%, #fff 100%);
}


.PAGE05 .contentBox {
    background-color: #cd941a;
    color: #fff;
    position: absolute;
    top: 20vh;
    right: 0;
    width: 70%;
    height: 80vh;
    padding-left: 8%;
    padding-top: 5vh;
    /*padding-bottom: 5%;*/
}

.PAGE05 .contentBox:before {
    content: '';
    position: absolute;
    right: 100%;
    padding-top: 60%;
    width: 100%;
    bottom: 0;
    background-image: url(../images/page03_bg.jpg);
    background-repeat: no-repeat;
    background-position: right;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    pointer-events: none;
}

.PAGE05 .contentBox .sign {
    width: 40%;
    max-width: 200px;
    padding-top: 10%;

}

.PAGE05 .innerImg {
    padding-top: 0;
	width: 220px;
    height: 190px;
}

.PAGE05 .caption_icon {
    background-color: #343a40;
}

.PAGE05-1{
    background-image: url(../images/page04_bg20210324.jpg);
	background-color: #878e98;
	background-position: bottom right;
	background-size: auto 100%;
	background-repeat: no-repeat;
}

.PAGE05-1 .master-title {
	position: absolute;
	top: 80vh;
	right: 0;
	--widthA: 1800;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.PAGE05-1 .casepanel {
	position: absolute;
	width: 50vw;
	top: 43vh;
	left: -3vw;
}

.PAGE05-1 .contentBox{
    width: 45vw;
	top: 9vh;
    right: auto;
    left: 0;
    padding-right: 2%;
    background-color: rgba(0, 0, 0, 0);
}
.PAGE05-1 .contentBox:before {
    display: none;
}

.PAGE05-1 .align-items-center {
    -ms-flex-align: baseline!important;
    align-items: baseline!important;
}

.PAGE05-1 .titleBox {
	position: absolute;
	top: 0;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	color: #BABABA;
}

.PAGE05-1 .text {
	position: absolute;
	top: -10px;
	padding-right: 5%;
}

.PAGE05-1 .text p {
	margin-top: 0;
	margin-left: 0;
	color: #222;
}

.PAGE05-2{
	background-image: url(../images/page03_bg.jpg);
	background-position: top right;
	background-size: cover;
	background-repeat: no-repeat;
}

.PAGE05-2 .contentBox{
    padding-right: 5%;
	width: 100%;
	height: 100vh;
	background-color: rgba(107, 149, 29,0.9);
}

.PAGE05-2 .align-items-center {
    -ms-flex-align: baseline!important;
    align-items: baseline!important;
}

.PAGE05-2 .titleBox {
	position: absolute;
	top: 0;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	height: 500px;
	color: #ffffff;
}

.PAGE05-2 .text {
	position: absolute;
	top: 50vh;
	padding-right: 5%;
	color: #e8ffbc;
}


.PAGE05-1 .text .title {
	margin-left: 0;
	color: #222;
}

.PAGE05-2 .text .title {
	color: #ffffff;
}

.PAGE05-2 .innerImg {
    padding-top: 0;
    height: 70vh;
}

.PAGE05-2-1{
	background-image: url(../images/page03-1_bg.jpg);
	background-position: top right;
	background-size: cover;
	background-repeat: no-repeat;
}

.PAGE05-3{
	background-image: url(../images/Grid_Line.svg);
	background-position: top right;
	background-size: cover;
	background-repeat: no-repeat;
}

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

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

.PAGE08-1{
    background-image: url(../images/page08_bg20210324.jpg);
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

.PAGE08-1 .master-title {
	position: absolute;
	top: 5vh;
	right: 2vw;
	--widthA: 105;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.PAGE08-1 .contentBox{
    width: 100vw;
	height: 70vh;
	padding-left: 4%;
    padding-top: 10vh;
    right: 0;
    left: auto;
    padding-right: 4%;
    background-color: rgba(0, 0, 0, 0);
}
.PAGE08-1 .contentBox:before {
    display: none;
}

.PAGE08-1 .align-items-center {
    -ms-flex-align: baseline!important;
    align-items: baseline!important;
}

.PAGE08-1 .ImgBox {
	top: -30vh;
}

.PAGE08-1 .slick-next, .slick-prev {
    top: 55%;
    width: 70px;
    height: 70px;
}

.PAGE08-1 .innerImg {
	padding-top: 0;
    width: 100%;
    height: calc(64vw * 0.666666);
}

.PAGE08-1 .titleBox {
	position: absolute;
	top: 0;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	height: 500px;
	color: #fff;
}

.PAGE08-1 .text {
	position: absolute;
	top: 0;
	padding-right: 5%;
}

.PAGE08-1 .text p {
	margin-top: 0;
	margin-left: 0;
	color: #222;
}

.PAGE08-1 .text .title {
	margin-top: -10px;
	margin-left: 0;
	color: #222;
}


/*---------------------
        PAGE06
---------------------*/


.PAGE06 {
    background: -webkit-linear-gradient(left, #fff 0%, #fff 60%, #cd941a 60%, #cd941a 100%);
    background: -o-linear-gradient(left, #fff 0%, #fff 60%, #cd941a 60%, #cd941a 100%);
    background: linear-gradient(left, #fff 0%, #fff 60%, #cd941a 60%, #cd941a 100%);
}

.PAGE06 .productImg .innerImg {
    padding-top: 0;
    height: 70vh;

}


/*---------------------
        PAGE07
---------------------*/


.PAGE07 {
    background: -webkit-linear-gradient(left, #cd941a 0%, #cd941a 47%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0) 100%);
    background: -o-linear-gradient(left, #cd941a 0%, #cd941a 47%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(left, #cd941a 0%, #cd941a 47%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0) 100%);
}

.PAGE07:before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
    background-image: url(../images/page07_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}


.PAGE07 .TxtBox.TxtBox01 .titleBox {
    white-space: nowrap;

}

.PAGE07 .leftBox .TxtBox.TxtBox01 {
    width: 100%;
}

.PAGE07 .titleBox {
	position: absolute;
	top: 0;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	height: 500px;
	color: #ffffff;
}

.PAGE07 .text {
	position: absolute;
	top: 55vh;
	padding-right: 5%;
	color: #e8ffbc;
}

.PAGE07 .text .title {
	color: #ffffff;
}

.PAGE07 .subtxt {
    text-align: center;
}

.PAGE07 .subtxt span {
    display: block;
    color: #fff;
    text-align: center;
    letter-spacing: 5px;
	margin-bottom: 10px;
}

.PAGE07 .subtxt span:nth-child(1):before {
    content: '';
    display: block;
    border: 1px solid rgba(255,255,255,0.35);
    /* padding-top: 15%; */
    border-bottom: none;
    width: 0;
    height: 10vh;
    margin: 30px auto;
}

.PAGE07 .subtxt span:nth-child(2):after {
    content: '';
    display: block;
    border: 1px solid rgba(255,255,255,0.35);
    /* padding-top: 15%; */
    border-bottom: none;
    width: 0;
    height: 25vh;
    margin: 30px auto;
}

.PAGE07 .caption_icon {

    width: 50px;
    height: 50px;
    background-color: #cd941a;
    transition: all 0.5s;
    margin: 0 auto;
}

.PAGE07 a:hover {
    color: #26282c;
}

.PAGE07 a:hover .caption_icon {
    background-color: #333;
    transition: all 0.5s;

}

.PAGE07 .caption_icon:before,
.PAGE07 .caption_icon:after {
    height: 3px;
    background: #fff;
}

.PAGE07 .rightBox {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    min-height: 70vh;
    align-items: center;
}

.FOOTER {
	position: relative;
    background-color: #fff;
	background-image: url(../images/Footer_BG-20210324.jpg);
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

.FOOTER .fp-tableCell{
	vertical-align: bottom;
}

.FOOTER .leftBox,
.FOOTER .rightBox {
    padding: 0 7%;
    text-align: center;
}

.FOOTER .leftBox {
    border-right: 1px solid #cd941a;
}

.FOOTER .logoBox {
    padding: 0 15%;
    margin-bottom: 1.5rem;
}

.FOOTER .info {
    -webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	height: 350px;
	font-family: 'Noto Sans TC', serif;
	font-weight: 700;
	font-size: 36px;
	color: #2c3034;
}

.FOOTER .info span {
	display: block;
}

.FOOTER .map {
	padding: 5px;
    background-color: #fff;
}

.FOOTER .map img {
    width: 100%;
}

.FOOTER .rightBox h5 {
    font-family: 'Noto Sans TC', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 48px;
	color: #2c3034;
}

.FOOTER .rightBox h6 {
    text-align: left;
    font-size: 14px;
}

.FOOTER .info hr {
	margin:10px 0;
	border-color: #fff;
}

.FOOTER .footer-title {
	position: absolute;
	bottom: 40.55vh;
	left: 27.4%;
	--widthA: 361;
	--widthB: calc(100vw / 830);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.FOOTER .footer-map {
	position: absolute;
	bottom: 34vh;
	left: 0;
    --widthA: 500;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.FOOTER .footer-logo {
	position: absolute;
	bottom: 50vh;
	left: 75px;
    width: 420px;
}

.FOOTER .btn-group {
	position: absolute;
	bottom: 20vh;
	left: 2.2vw;
    --widthA: 600;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.FOOTER .marginspace {
	margin-right: 15px;
}

.FOOTER .footer-info {
	position: absolute;
	bottom: 6vh;
	left: -5vw;
    --widthA: 1840;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

.FOOTER .footer-form {
	position: absolute;
	bottom: 25vh;
	left: 50vw;
    --widthA: 750;
	--widthB: calc(100vw / 1920);
	--widthC: calc(var(--widthB) * var(--widthA));
    width: var(--widthC);
}

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
  padding: 10px;
}

.FOOTER .btn {
	position: absolute;
	right: 0;
	bottom: 0;
    width: 30%;
	height: 70px;
    /*font-size: 10px;*/
}

.FOOTER .btn.btn-dark {
	background-color: #4d8055;
}

.FOOTER .btn+.btn {
    border-left: 1px solid #efefef;
}

.desktop-hide, li.desktop-hide{ display:none;}

.viewport { background-image: url('../images/viewport-20210311.jpg'); background-position: bottom center; background-size: 100% auto; }

form a {
	color: #cfad7c;
	font-weight: 500;
}

form a:hover {
	color: #cfad7c;
	text-decoration: underline;
}

form a:active {
	color: #cfad7c;
}


/*---popup-----*/
.fancybox-content{ width: 90vw; }
.fancybox-button{
    border: 1px solid #222;
    margin: 20px;
    color: #222;
}
.fancybox-button svg,
.popupcontent,
.popupcontent h3 { color: #222; }
.popupcontent h3{
	text-align: center;
	margin-bottom: 30px;
}
.popupcontent p{
	margin-bottom: 20px;
	font-size: 16px;
}