/*
	store all page related styles. used on both frontend & backend
*/
/* ----- general ----- */
img{
	max-width:100%;
}
.clickable{
	cursor:pointer;
}
/* ----- element related ----- */
.cms-element-bg{
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.cms-anchor{
	position:relative;
	top:-100px;
}
/* ----- container related ----- */
.cms-container{
	
}
.cms-container>.cms-container-inside{
	display:flex;
	flex-wrap: nowrap;
	max-width:1100px;
	margin:0 auto;
	padding-top:50px;
	padding-bottom:50px;
	width:100%;
}
.cms-container-item{
	width:100%;
}
/* ----- block related ----- */
.cms-block{
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
}
.cms-block .cms-block-inside{
	margin:0 10px;
}
.cms-block .block-title{
	font-size: 1.2em;
	font-weight:bold;
}
.cms-image{
	text-align:center;
}
.cms-image img{
	max-width:100%;
}
.cms-yt-player{
	position:relative;
	padding-bottom: 60%;
	height: 0;
	background-color: #000;
}
.cms-yt-player>iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.cms-video>video{
	width:100%;
}
/* ----- block 3 related ----- */
.cms-block[data-block-type="3"] .text-item{
	padding-right:15px;
}
.cms-block[data-block-type="3"] .image-item{
	float:right;
}
/* ----- block 4 related ----- */
.cms-block[data-block-type="4"] .text-item{
	padding-left:15px;
}
/* ----- block 5 related ----- */
.cms-block[data-block-type="5"] .text-item{
	margin-top: 15px;
}
/* ----- block 6 related ----- */
.cms-block[data-block-type="6"] .swiper-wrapper{
	align-items: center;
}
/* ----- form related ----- */
.cms-form{
	padding:20px 0;
}
.cms-form-item{
	padding:20px;
}
.cms-form-item .item-title{
	float:left;
	width:30%;
}
.cms-form-item .item-title .require-mark{
	margin-left: 5px;
	color: red;
}
.cms-form-item .item-input{
	float:right;
	width:70%;
}
.cms-form-item .item-input .form-control{
	border-radius:0;
}
.cms-form-item .item-input textarea{
	height:100px;
	min-height:40px;
	resize:vertical;
}
.cms-form-item .item-input .input-options{
	margin-bottom:10px;
}
.cms-form-item .item-input .input-options input[type="radio"]{
	vertical-align: middle;
	margin: 0;
}
.cms-form-item .item-input .input-options .option-text{
	display: inline-block;
	margin-left: 5px;
}
.cms-form-submit{
	display: block;
	margin: 20px auto 0 auto;
	padding: 10px 40px;
	border: 1px solid #AAA;
	background: none;
}
.cms-form-item .captcha .captcha-img{
	margin-top: 10px;
	margin-right: 10px;
}
.cms-form-item .captcha a{
	outline:none;
}
/* ----- custom style ---------------------------------------------------------------------- */
.cms-block .block-title{
	color:#C84462;
	font-size: 2.57em;
	padding:10px 0;
	font-weight:normal;
}
.cms-block .block-content{
	color:#6a6a6a;
	font-size: 1.14em;
}
.cms-block[data-block-type="7"] .cms-block-inside{
	max-width:700px;
	margin: 0 auto;
}
/* home service item */
.cms-block.home-service-item .cms-block-inside{
	height: 0;
	padding-top: 145%;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}
.cms-block.home-service-item .cms-block-inside .image-item{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	z-index: 1;
}
.cms-block.home-service-item .cms-block-inside .image-item img{
	width:100%;
}
.cms-block.home-service-item .cms-block-inside .text-item{
	position: absolute;
	top: 58%;
	left: 0;
	right: 0;
	bottom: auto;
	z-index: 3;
	height: 100%;
	margin-top: 0;
	transition: background-color 0.2s;
}
.cms-block.home-service-item .cms-block-inside .text-item img{
	max-width:30%;
}
.cms-block.home-service-item .cms-block-inside svg{
	position: absolute;
	bottom: 42%;
	left: 0;
	right: 0;
	top: auto;
	z-index: 2;
	width: 100%;
	fill: currentColor;
	transition: color 0.2s;
}

/* media block fading border */
.cms-block[data-block-type="5"].fading-border .svg-wrapper{
	position:relative;
	width:100%;
	height:0;
}
.cms-block[data-block-type="5"].fading-border .svg-wrapper svg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:20px;
}

/* ===== responsive =============================================================================================== */
@media screen and (max-width: 991px) {
	.cms-container>.cms-container-inside{
		display:block;
	}
	.cms-container-item{
		width:100% !important;
	}
	/* ----- block 3 related ----- */
	.cms-block[data-block-type="3"] .text-item{
		padding-right:0;
		margin-top: 15px;
	}
	/* ----- block 4 related ----- */
	.cms-block[data-block-type="4"] .text-item{
		padding-left:0;
		margin-top: 15px;
	}
	/* ----- form related ----- */
	.cms-form-item .item-title,
	.cms-form-item .item-input{
		float:none;
		width:100%;
	}
}



/* ----- layout style ----- */


.cms-container > .cms-container-inside { padding-top: 20px; padding-bottom: 20px; }
.cms-container.full-width > .cms-container-inside { max-width: none; padding: 0; }

@media (min-width: 1200px) {
    .cms-container > .cms-container-inside { padding-top: 50px; padding-bottom: 50px; }
}
    
.cms-block.cms-slider-full { max-width: none; }
.cms-block.cms-slider-full .cms-block-inside { margin: 0; }

@media (max-width: 768px) {
    .cms-block.cms-slider-full { padding-top: 30px; }
}


.swiper-button-disabled { display: none; }
.swiper-button-prev,
.swiper-button-next { outline: none; }



.imagefill img { display: block; max-width: none; }



.show-2-slider { position: relative; }
.show-2-slider .swiper-wrapper { align-items: flex-start !important; }
.show-2-slider .swiper-wrapper .swiper-slide { padding: 25px; box-sizing: border-box; }
.show-2-slider .swiper-wrapper .swiper-slide .cms-block-item .block-title,
.show-2-slider .swiper-wrapper .swiper-slide .cms-block-item .block-content { padding: 0 25px; box-sizing: border-box; }
.show-2-slider .swiper-wrapper .swiper-slide .cms-block-item .cms-image > img { width: 100%; }



.time-line-slider { position: relative; }
.time-line-slider .swiper-pagination { display: none; }
.time-line-slider .swiper-slide > .cms-block-item { margin: auto; padding: 15px; box-sizing: content-box; position: relative; border-width: 3px; border-style: solid; border-color: #000000; }
.time-line-slider .swiper-slide > .cms-block-item .block-frame { position: absolute; left: 50%; transform: translateX(-50%); }
.time-line-slider .swiper-slide:nth-child(even) > .cms-block-item .block-frame-1 { bottom: 100%;
    border-bottom: 20px solid #000000;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: none;
}
.time-line-slider .swiper-slide:nth-child(even) > .cms-block-item .block-frame-2 { bottom: calc(100% - 0.5px);
    border-bottom: 17px solid #ffffff;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: none;
}
.time-line-slider .swiper-slide:nth-child(odd) > .cms-block-item .block-frame-1 { top: 100%;
    border-bottom: none;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000000;
}
.time-line-slider .swiper-slide:nth-child(odd) > .cms-block-item .block-frame-2 { top: calc(100% - 0.5px);
    border-bottom: none;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 17px solid #ffffff;
}

.time-line-slider .swiper-slide > .cms-block-item .block-title { position: absolute; left: 50%; transform: translateX(-50%); }
.time-line-slider .swiper-slide:nth-child(even) > .cms-block-item .block-title { bottom: calc(100% + 100px); }
.time-line-slider .swiper-slide:nth-child(odd) > .cms-block-item .block-title { top: calc(100% + 100px); }
.time-line-slider .swiper-slide > .cms-block-item .slide-img { margin-bottom: 15px; }
.time-line-slider .swiper-slide > .block-bar { display: block; width: 100%; height: 12px; position: absolute; left: 50%; z-index: 1; }
.time-line-slider .swiper-slide:last-child > .block-bar { display: none; }
.time-line-slider .swiper-slide > .block-point { display: block; width: 40px; height: 40px; position: absolute; left: calc(50% - 20px); z-index: 2; border-width: 3px; border-style: solid; border-radius: 50%; }



.gallery-slider .slide-img { display: block; position: relative; }
.gallery-slider .slide-img.imagefill { width: 100%; padding-top: 100%; }



.select-content-section .select-content-controller .swiper-slide { cursor: pointer; }
.select-content-section .select-content-controller > .cms-container-inside > .cms-container-item { position: relative; cursor: pointer; }
.select-content-section .select-content-controller .swiper-slide .arrow,
.select-content-section .select-content-controller > .cms-container-inside > .cms-container-item .arrow { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    border-bottom: none;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #000000;
}
.select-content-section .select-content-controller .swiper-slide.current .arrow,
.select-content-section .select-content-controller > .cms-container-inside > .cms-container-item.current .arrow { display: block; }

.select-content-section .select-content-container > .cms-container-inside > .cms-container-item { position: relative; width: 100%; }
.select-content-section .select-content-container > .cms-container-inside > .cms-container-item > .cms-container { display: none; width: 100%; position: absolute; left: 0; top: 0; }
.select-content-section .select-content-container > .cms-container-inside > .cms-container-item > .cms-container.current { display: block; position: relative; }

.select-content-section .select-content-controller .swiper-pagination { display: none; }
.select-content-section .select-content-controller .swiper-container { padding-bottom: 30px; }

#edit_panel .select-content-section .select-content-container > .cms-container-inside > .cms-container-item > .cms-container { display: block; position: relative; }



/* ----- CSS style ----- */


.img-border-radius-twgh .cms-image { overflow: hidden; background-color: #f9f4d6; border-radius: 10px; }
.img-border-radius-twgh .cms-image img { width: 100%; }


.container-align-items > .cms-container-inside { align-items: center; }


.image-frame-twgh-01 { height: 100%; }
.image-frame-twgh-01 .cms-block-inside { height: 100%; padding-bottom: 30px; box-sizing: border-box; overflow: hidden; background-color: #d9f0c4; border-radius: 25px; box-shadow: 0 5px #65822e; }
.image-frame-twgh-01 .cms-block-inside .text-item { padding: 20px; padding-bottom: 0; box-sizing: border-box; }


.image-button-twgh-01 { padding-bottom: 10px; box-sizing: border-box; position: relative; top: 0; overflow: hidden; border-radius: 15px; box-shadow: 0 5px #427e7e; }
.image-button-twgh-01 a { text-decoration: none; }
.image-button-twgh-01 .cms-block-inside .text-item { margin: 0; padding: 20px; padding-bottom: 0; box-sizing: border-box; }
.image-button-twgh-01:hover { top: 5px; box-shadow: 0 0 #427e7e; transition: top 500ms ease, box-shadow 400ms; }
.image-button-twgh-01 .cms-block-inside { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100%; box-sizing: border-box; position: relative; }

.image-button-twgh-01.shadow-674684 { box-shadow: 0 5px #674684; }
.image-button-twgh-01.shadow-674684:hover { box-shadow: 0 0 #674684; }
.image-button-twgh-01.shadow-3585a5 { box-shadow: 0 5px #3585a5; }
.image-button-twgh-01.shadow-3585a5:hover { box-shadow: 0 0 #3585a5; }
.image-button-twgh-01.shadow-bf3636 { box-shadow: 0 5px #bf3636; }
.image-button-twgh-01.shadow-bf3636:hover { box-shadow: 0 0 #bf3636; }
.image-button-twgh-01.shadow-407f7f { box-shadow: 0 5px #407f7f; }
.image-button-twgh-01.shadow-407f7f:hover { box-shadow: 0 0 #407f7f; }

.image-button-list-twgh .cms-container-item { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }


.image-insidetext-layout-01 { position: relative; }
.image-insidetext-layout-01 .swiper-slide { padding-left: 20px; padding-right: 20px; }

.image-insidetext-layout-01 .image-insidetext-frame { margin: 0; position: relative; overflow: hidden; border-radius: 20px; }
.image-insidetext-layout-01 .image-insidetext-frame .image-item > .cms-resource,
.image-insidetext-layout-01 .image-insidetext-frame .slide-img > .cms-resource { width: 100%; position: absolute; left: 0; top: 0; z-index: 1; }
.image-insidetext-layout-01 .image-insidetext-frame .cms-resource img { width: 100%; }

.image-insidetext-layout-01 .image-insidetext-frame .text-item { width: 100%; margin-top: 0; position: relative; }

.image-insidetext-layout-01 .image-insidetext-frame svg { display: block; position: relative; z-index: 2; }
.image-insidetext-layout-01 .image-insidetext-frame .block-content { display: block; padding: 20px 10px; box-sizing: border-box; position: relative; }
.image-insidetext-layout-01 .image-insidetext-frame .block-content .bg { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }
.image-insidetext-layout-01 .image-insidetext-frame .block-content p { position: relative; z-index: 2; }

@media (min-width: 1200px) {
    .image-insidetext-layout-01 .swiper-slide .image-insidetext-frame svg { padding-top: 50%; }
    .image-insidetext-layout-01 .image-insidetext-frame .text-item { padding-top: 60%; }
}

@media (max-width: 992px) {
    .image-insidetext-layout-01 .swiper-slide .image-insidetext-frame svg { padding-top: 50%; }
}


.width-30 { width: 30%; }
.width-35 { width: 35%; }
.width-40 { width: 40%; }

@media (max-width: 768px) {
    .width-30, .width-35, .width-40 { width: auto; }
}


/* ----- customize style ----- */


html body { font-family: 'Microsoft JhengHei'; }
html[lang="tc"] body { font-family: 'Microsoft JhengHei'; }
table tr td  { padding: 10px 20px; box-sizing: border-box; }

.cms-block .block-content { font-size: 1.28em; line-height: 1.7em; }

.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 30px; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 30px; }


.slider-twgh-01 .swiper-wrapper .swiper-slide .cms-block-item { padding-bottom: 30px; box-sizing: border-box; overflow: hidden; background-color: #b5e098; border-radius: 25px; box-shadow: 0 5px #65822e; }
.slider-twgh-01 .swiper-pagination { display: none; }
.slider-twgh-01 .swiper-button-prev,
.slider-twgh-01 .swiper-button-next { width: 25px; height: 38px; top: 42%; }
.slider-twgh-01 .swiper-button-prev::after,
.slider-twgh-01 .swiper-button-next::after { content: ""; display: block; width: 100%; height: 100%; position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.slider-twgh-01 .swiper-button-prev::after { background-image: url(../images/common/slider-arrow-left.png); }
.slider-twgh-01 .swiper-button-next::after { background-image: url(../images/common/slider-arrow-right.png); }

@media (min-width: 1200px) {
    .slider-twgh-01 .swiper-button-prev { left: -20px; }
    .slider-twgh-01 .swiper-button-next { right: -20px; }
}


@media (max-width: 768px) {
    .slider-twgh-02 .swiper-slide { padding-left: 15%; padding-right: 15%; }
}


.select-content-section .select-content-controller.arrow-twgh-01 .image-button-twgh-01 { margin-bottom: 4px; }
.select-content-section .select-content-controller.arrow-twgh-01 > .cms-container-inside > .cms-container-item .arrow { border-top-color: #427e7e; }
@media (max-width: 991px) {
    .select-content-section .select-content-controller.arrow-twgh-01 .image-button-twgh-01 { margin-bottom: 30px; }
    .select-content-section .select-content-controller.arrow-twgh-01 > .cms-container-inside > .cms-container-item .arrow { display: none; }
}


.event-time-line-01 .swiper-slide > .cms-block-item { background-color: #ffffff; border-radius: 10px; }
.event-time-line-01 .swiper-slide > .cms-block-item .block-title { font-size: 2.2em; }
.event-time-line-01 .swiper-slide > .block-point { background-color: #ffffff; }

@media (min-width: 1200px) {
    .event-time-line-01 .swiper-button-prev { left: -40px; }
    .event-time-line-01 .swiper-button-next { right: -40px; }
}

@media (max-width: 992px) {
    .event-time-line-01 .swiper-button-prev { left: 100px; }
    .event-time-line-01 .swiper-button-next { right: 100px; }
    .event-time-line-01 .swiper-slide > .cms-block-item { width: 84%; }
}


.gallery-slider-twgh-01 .cms-image::after { content: ""; display: block; width: 100%; height: 100%; box-sizing: border-box; position: absolute; left: 0; top: 0; box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.8) inset; }


.paragraph-ul-twgh ul { margin: 0; padding: 0; list-style: none; }
.paragraph-ul-twgh ul > li { margin: 20px 0; padding-left: 40px;
    background-image: url(../images/common/icon-point.png);
    background-repeat: no-repeat; 
    background-position: left top;
}


.page-title-twgh { padding-top: 80px; }

@media (min-width: 768px) {
    .page-title-twgh { padding-top: 50px; }
}

@media (min-width: 1200px) {
    .page-title-twgh { padding-top: 150px; }
    .page-title-twgh .cms-container-inside { padding-bottom: 0px; }
}



/* all detail customize */

.desktop-order-1 { order: 1; }
.desktop-order-2 { order: 2; }

.page-title-01 { margin-bottom: -30px; }

@media (min-width: 1200px) {
    .content-style-01 .block-title { margin-left: 20px; }
    .content-style-01 .block-content { margin-left: 40px; }
}

@media (max-width: 992px) {
    .home-banner .swiper-button-next::after,
    .home-banner .swiper-button-prev::after { font-size: 25px; }
    
    .desktop-order-1,
    .desktop-order-2 { order: none; }
    
    .mobile-width-90 { width: 90%; margin-left: auto; margin-right: auto; }
    
    .page-title-01 { margin-bottom: 0; text-align: center; }
    
    .content-style-01 .block-title { margin-bottom: 30px; text-align: center; }
    .content-style-02 .block-title { margin-bottom: 30px; text-align: center; }
}


/* ----- ----- */