html, body {
    margin: 0;
    padding: 0;
    font-family: 'Lacquer';
    font-family: Arial, Helvetica, sans-serif;
}
:root {
    --creamyellow: #ffe9ac;
    --red: #ff0000;
    --gold: #ffe9ac;
    --purple: #fe93e4;
    --green: #24ff00;
    --gold: #ffdf08;
    --en:  Arial, Helvetica, sans-serif;
}

#big-frame {
    width: 100%;
    height: 550px;
    margin: 0 auto;
    background: transparent;
    position: relative;
    overflow: hidden;
}
.table {
    display: flex;
    flex-direction: column;
    position: relative;
    width: calc(300px*35/42);
    height: calc(220px*35/42);
}
img[src*="hori"]{
    background: #000;
    position: relative;
    margin-left: -5px;
    width: calc(100% + 10px);
    height: 5px;
    position: absolute;
}
img[src*="vertical"] + img[src*="hori"]{
    bottom: 0;
}
img[src*="vertical"]{
    width: 5px;
    position: absolute;
    left: -7.5px;
    height: 97.5%;
    margin-top: 2.5px;
}
.table img[src*="vertical"]:nth-child(2) {
    right: -5px;
    left: unset;
}
.top-div .title-number {
    margin: 0 1rem;
}
.title-number {
    background: url(image/number.png);
    width: 202px;
    width: 30px;
    height: 30px;
    background-position: 225px 0;
    transform: scale(1.5);
    margin: 0;
}
.number {
    color: #ffec2d;
    font-size: 2rem;
    font-family: sans-serif;
}
.note {
    color: #b6e9f1;
    font-size: 1.25rem;
}
.bottom-div .img-wrapper {
    width: 47%;
    position: relative;
}
.bottom-div .img-wrapper .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.bottom-div .card img[src*="hori"]:first-child + img[src*="vertical"]{
    display: none;
}
.bottom-div .card:nth-child(4n) img[src*="hori"] + img[src*="vertical"]{
    display: block
}
.big {
    font-size: 3.2rem;
}

#P1 p, #P2 p, #P3 p, #P4 p , #P5 p , #P6 p{
    font-family: Microsoft JhengHei;
}
.creamyellow {
    color: var(--creamyellow);
}
.red {
    color: var(--red);
}
.green {
    color: var(--green) !important;
}
.gold {
    color: var(--gold);
}
.purple {
    color: var(--purple);
}
.center {
    display: flex;
    justify-content: center;
}


/* 第1頁 */
#P1 .img {
    background: url(lanImg/en/HAWAII_P1.png) no-repeat center;
	position: fixed;
	left: 0%;
	top: -5%;
    width: 100%;
    height: 100%;
	background-size: 100%;
}
/* 第2頁 */
#P2 .img {
    background: url(lanImg/en/HAWAII_P2.png) no-repeat center; 
	position: fixed;
	left: 0%;
	top: -5%;
    width: 100%;
    height: 100%;
	background-size: 100%;
}
/* 第3頁 */
#P3 .img {
    background: url(lanImg/en/HAWAII_P3.png) no-repeat center; 
	position: fixed;
	left: 0%;
	top: -5%;
    width: 100%;
    height: 100%;
	background-size: 100%;
}
/* 第4頁 */
#P4 .img {
    background: url(lanImg/en/HAWAII_P4.png) no-repeat center; 
	position: fixed;
	left: 0%;
	top: -5%;
    width: 100%;
    height: 100%;
	background-size: 100%;
}


/* 箭頭 */
.arrow {
    outline: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}
/* 下一頁 */
.arrow.next {
    right: 0;
    transform: rotate(180deg) translateY(50%);
}
/* 選頁圓點 */
.dots {
    position: fixed;
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 999;
}
.dot {
    background: url(image/dot.png);
    width: 50px;
    height: 50px;
}
.colorful p {
    color: var(--creamyellow);
    margin: 0;
}

/* 螢幕直立版型 */
@media screen and (orientation: portrait){
    body {
        max-width: 600px;
    }
    #big-frame {
        padding: 0rem 1rem;
        box-sizing: border-box;
        height: unset;
        height: 1010px;
    }
    
	/* 第1頁 */
	#P1 .img {
		background: url(lanImg/en/HAWAIIs_P1.png) no-repeat center;
		position: fixed;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		background-size: 105%;
	}
	/* 第2頁 */
	#P2 .img {
		background: url(lanImg/en/HAWAIIs_P2.png) no-repeat center; 
		position: fixed;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		background-size: 105%;
	}
	/* 第3頁 */
	#P3 .img {
		background: url(lanImg/en/HAWAIIs_P3.png) no-repeat center; 
		position: fixed;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		background-size: 105%;
	}
	/* 第4頁 */
	#P4 .img {
		background: url(lanImg/en/HAWAIIs_P4.png) no-repeat center; 
		position: fixed;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		background-size: 105%;
	}

}



#P3, #P4, #P2, #P1, #P5, #P6 {
    display: none;
}

/* language */
.img-style {
    width: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}


/* classList */
.text-style{
    font-size: 17px !important;
    line-height: unset !important;
    padding: .5rem;
}
.note-style {
    font-size: 1rem !important;
    font-weight: 900 !important;
    width: 90% !important;
    margin: -.15rem auto !important;
}
.dot-active {
    background: url(image/dot-active.png);
}
.slide-active {
    display: block !important;
}

.text-style-v {
    font-size: 32px !important;
    line-height: 32px !important;
}
.scale1 {
    transform: scale(1) !important;
}
.br-height {
    display: block;
    margin: 1rem;
    line-height: 32px;
    content: "";
}
#text-style-p3-chzn {
    font-size: 24px;
    line-height: 25px !important;
    padding: 0;
}


/* 上一頁 */
.arrow-pre-v {
    position: initial;
    top: unset;
    transform: unset !important;
}
/* 下一頁 */
.arrow-next-v {
    position: initial;
    top: unset;
    transform: rotate(180deg) translateY(0) !important;
}