@font-face {
  font-family: 'Microsoft JhengHei';
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: bold;
  src: local(MS Gothic), local(Yu Gothic), local(PMingLiU);
}

@keyframes sloganWipe {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0% 0;
	}
}

@keyframes arrow_anim {
	0% {
        opacity: 1;
	    transform: translateX(0%);
	}
	100% {
        opacity: 0;
	    transform: translateX(70%);
	}
}

.editor a {
	display: inline-block;
}

.editor * {
    font-family: "Arial", 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC', STHeitiTC, 新細明體, 'PMingLiU';
}

.editor p, .editor div, .editor a, .editor li, .editor td, .editor th, .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6 { margin:0px; padding:0px; color:#272727; font-size: 17px; line-height: 24px; font-weight: 400; letter-spacing: 0px; word-wrap: break-word; white-space: normal; }

.editor > *:first-child, .editor .title1.topmargin:first-child, .editor .title_cap:first-child {
	margin-top: 0px !important;
}

.editor ul, .editor ol { margin: 0; }

.editor ul, .editor ol { padding-left: 25px; }

.editor img { border:none; }

.editor a, .editor a:link, .editor a:active, .editor a:visited { color:#000000; font-size: inherit; }

.editor a:hover { color:#000000; }

.editor table.table-border, .editor table.table-border td, .editor table.table-border th { 
	border-collapse: collapse; 
	border: 1px solid #000000;
}

.editor td, .editor th { padding:3px; }

hr {
	margin: 34px 0 26px;
    background: rgba(51, 36, 24, 0.3);
    color: rgba(51, 36, 24, 0.3);
	border:none;
	height:1px;
 }

.editor .underline, .editor .underline * { text-decoration:underline; }

.editor table, .editor img { max-width: 100%; height: auto; }

img.img-wipe {
    border: 1px dashed transparent; 
}

.editor:after {
	clear: both;
    display: block;
    content: " ";
}

.editor .table-responsive-wrapper {
	width: 100%;
}

.editor .table-responsive-wrapper .table-responsive {

}

.editor .text-right {
	float: left;
	margin-right: 20px;
}

.editor .text-left {
	float: right;
	margin-left: 10px;
}

.editor .round-border {
	border: 1px solid #DBDBDB;
	border-radius: 10px;
}

.editor .round {
	border-radius: 10px;
}

/* ==========================================================================
   Staggered Icon List Layout Styles (Flat CSS for CMS rendering)
   ========================================================================== */
.staggered-row {
    display: flex !important;
    align-items: flex-start !important; /* Aligns the top of the icon with the title */
    width: 65% !important; /* Updated to 65% width on large desktop screens */
    margin-bottom: 80px !important; /* Precise vertical margin between rows */
    gap: 40px !important; /* Standardized gap between icon and text */
    box-sizing: border-box !important;
}

/* Left-Aligned (Row 1 & 3): Aligned left, empty 35% space is pushed to the right */
.staggered-row.left-row {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Right-Aligned (Row 2 & 4): Aligned right, empty 35% space is pushed to the left */
.staggered-row.right-row {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.staggered-row .col-icon {
    width: 140px !important; /* Standardized icon column width on desktop */
    flex-shrink: 0 !important; /* Prevents the image column from shrinking */
    text-align: center !important;
    box-sizing: border-box !important;
}

.staggered-row .col-icon img {
    display: block !important;
    /* width: 100% !important; */
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.staggered-row .col-text {
    flex-grow: 1 !important; /* Let text expand to occupy the remaining space */
    width: auto !important; /* Overrides the global 49% layout width */
    text-align: left !important;
    box-sizing: border-box !important;
}

.staggered-row .col-text .title2 {
    line-height: 40px !important;
    margin-bottom: 12px !important;
}

.staggered-row .col-text p {
    margin-bottom: 15px !important;
}

.staggered-row .col-text ul {
    margin-top: 10px !important;
}

/* Laptop & Tablet Responsive Adjustments (768px to 1199px)
   Increases the row width to 85% as the screen gets narrower to prevent 
   wasted empty side space and keep columns from squishing. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    #content .staggered-row {
        width: 85% !important; /* Expands to 85% for laptop/tablet screens */
        margin-bottom: 60px !important; /* Slightly tighter vertical spacing */
        gap: 30px !important; /* Slightly tighter icon-to-text gap */
    }
    
    #content .staggered-row .col-icon {
        width: 110px !important; /* Slightly smaller icon to save space */
        margin-right: 30px !important;
    }
}

/* Mobile Responsive Styles (Compact List Layout - FRONTEND ONLY)
   Bypasses CMS editor rendering so desktop staggered margins are fully 
   viewable and editable inside TinyMCE's narrow 626px iframe */
@media screen and (max-width: 767px) {
    #content .staggered-row { /* Scoped to #content so it only triggers on the live frontend */
        display: flex !important; 
        flex-direction: row !important;
        width: 100% !important; /* Spans full container width on mobile */
        margin-bottom: 40px !important; /* Responsive spacing between rows on mobile */
        gap: 15px !important; /* Tightened gap between icon and text */
    }

    #content .staggered-row.left-row, 
    #content .staggered-row.right-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #content .staggered-row .col-icon {
        width: 60px !important; /* Scales down the icon column to a compact 60px */
        margin-right: 15px !important; /* Adds a tight gap on the right */
        flex-shrink: 0 !important;
    }

    #content .staggered-row .col-icon img {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    #content .staggered-row .col-text {
        width: calc(100% - 75px) !important; /* Fills the rest of the mobile screen */
        text-align: left !important;
    }

    #content .staggered-row .col-text .title2 {
        font-size: 18px !important; /* Scale heading down slightly for mobile */
        line-height: 24px !important;
        margin-bottom: 8px !important;
    }

    #content .staggered-row .col-text p, 
    #content .staggered-row .col-text ul li {
        font-size: 15px !important;
        line-height: 21px !important;
    }
}

.editor .w-85 {
	width: 85%;
	margin-left: auto !important;
	margin-right: auto !important;
}

.editor .w-80 {
	width: 80%;
	margin-left: auto !important;
	margin-right: auto !important;
}

.editor .w-70 {
	width: 70%;
	margin-left: auto !important;
	margin-right: auto !important;
}

.editor .w-65 {
	width: 65%;
	margin-left: auto !important;
	margin-right: auto !important;
}

.editor .two-col,
.editor .three-col,
.editor .four-col {
	font-size: 0;
	white-space: nowrap;
}

.editor .two-col .col,
.editor .three-col .col,
.editor .four-col .col {
	display: inline-block;
	vertical-align: top;
	white-space: normal;
}


.editor .two-col .col {
	width: 49%;
}

.editor .three-col .col {
	width: 32%;
}

.editor .four-col .col {
	width: 23.5%;
}

.editor .four-col-special{
	width: 100%;
	display: flex;
}

.editor .four-col-special .col-group{
	display: flex;
	width: 50%;
	border-bottom: 2px solid rgba(112, 112, 112, 0.3);
	padding: 22px 0;
}

.editor .four-col-special.no_line .col-group{
	border: 0px;
}

.editor .four-col-special .col-group .col{
	
}

.editor .four-col-special .col-group .col:nth-child(odd){
	width: 65%;
}
.editor .four-col-special .col-group .col:nth-child(even){
	width: 35%;
}

.editor .two-col .col + .col,
.editor .three-col .col + .col,
.editor .four-col .col + .col {
	margin-left: 2%;
}

.editor .two-col.nogap .col + .col,
.editor .three-col.nogap .col + .col,
.editor .four-col.nogap .col + .col {
	margin-left: 0px;
}

.editor .nogap td{
	padding: 3px 20px;
}

.editor .three-col.special{
	position: relative;
    padding: 50px 0;
    margin: 50px 0;
}

.editor .three-col.special::before {
	content:"";
	display: block;
	position: absolute;
	width: 35px;
	height: 35px;
	right: 0;
	top: 0;
	border-right: 3px solid rgba(184, 94, 23, 1);
	border-top: 3px solid rgba(184, 94, 23, 1);
}

.editor .three-col.special::after {
	content:"";
	display: block;
	position: absolute;
	width: 35px;
	height: 35px;
	left: 0;
	bottom: 0;
	border-left: 3px solid rgba(184, 94, 23, 1);
	border-bottom: 3px solid rgba(184, 94, 23, 1);
}

.editor .three-col.special .col{
	position: relative;
	padding: 0 20px;
}

.editor .three-col.special .col + .col::before {
	content:"";
	display: block;
	position: absolute;
	width: 8px;
	height: 8px;
	left: -16px;
	top: 8px;
	border-radius: 4px;
	background-color: rgba(184, 94, 23, 1);
}

.editor .four-col.special .col + .col{
	margin-left: 0px;
}

.editor .weight300{
	font-weight: 300;
}
.editor .weight500{
	font-weight: 500;
}
.editor .weight600{
	font-weight: 600;
}
.editor .weight700{
	font-weight: 700;
}
.editor .weight900{
	font-weight: 900;
}


.editor ul.ul-custom1{
	padding-left: 0;
    margin-top: 7px;
	list-style-type: none;

}
.editor ul.ul-custom1 li {
	position: relative;
	padding-left: 15px;
}
.editor ul.ul-custom1 li+li{
    margin-top: -1px;
}

.editor ul.ul-custom1 li:before {
	content: '';
	position: absolute;
    top: 8px;
    left: -1px;
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background-color: rgba(184, 94, 23, 1);
}

.editor ul.ul-custom1.square li:before {
	border-radius: 0px;
	width: 5px;
	height: 5px;
}

.editor ul.ul-custom2{
	padding-left: 0;
    margin-top: 7px;
	list-style-type: none;

}
.editor ul.ul-custom2 li {
	position: relative;
	padding-left: 15px;
}
.editor ul.ul-custom2 li+li{
    margin-top: -1px;
}

.editor ul.ul-custom2 li:before {
	content: '';
	position: absolute;
    top: 8px;
    left: -1px;
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background-color: #f39046;
}


.editor .title1{
	font-family: Libertinus Sans, 微軟正黑體;
	letter-spacing: 0px;
	color: rgba(184, 94, 23, 1);
	font-weight: bold;
	font-size: 38px !important; /* Standardized desktop font size to match inner banner slogan */
	line-height: 46px !important;
}

.editor .title1.topmargin{
	margin-top: 54px !important;
}
.editor .title2{
	font-family: Libertinus Sans, 微軟正黑體;
	letter-spacing: 0px;
	color: rgba(184, 94, 23, 1);
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
}

.editor .title3{
	letter-spacing: 0px;
	color: rgba(184, 94, 23, 1);
	font-weight: bold;
	font-size: 19px !important; /* Standardized to 20px */
	line-height: 26px !important;
}

.editor .title_cap{
	font-family: Libertinus Sans, 微軟正黑體;
	letter-spacing: 0px;
	color: rgba(184, 94, 23, 1);
	font-weight: bold;
	font-size: 17px;
	line-height: 24px;
}

.editor .subtitle1{
	letter-spacing: 0px;
	color: #005C9A !important;
	font-weight: 600;
	font-size: 21px;
	line-height: 28px;
	margin-bottom: 24px;
}

.editor .subtitle2{
    margin-bottom: 18px;
	font-weight: 600;
}
.editor .table-special1 tr td:nth-child(1){
	width: 80px !important;
	vertical-align: top;
}
.editor .table-special1 tr td:nth-child(2){
	width: calc(100% - 80px) !important;
	padding: 16px 3px;
}


@media screen and (max-width: 768px) {
	
	.editor .w-85 {
		width: 100% !important;
	}

	.editor .w-80 {
		width: 100% !important;
	}

	.editor .three-col.special {
		padding: 30px 0 !important;
		margin: 30px 0 !important;
	}

	.editor .three-col.special .col + .col {
		margin-top: 40px;
	}

	.editor .three-col.special .col + .col::before{
		top: -24px;
		left: 50%;
		transform: translateX(-50%);
	}

	.editor .title1.topmargin{
		margin-top: 24px !important;
	}
	.editor .text-right,
	.editor .text-left {
		float: none;
		display: block;
		margin: 0 auto 20px;
	}

	.editor .two-col,
	.editor .three-col,
	.editor .four-col {
		white-space: normal;
	}

	.editor .two-col .col,
	.editor .three-col .col,
	.editor .four-col .col {
		display: block;
		width: 100%;
	}

	.editor .two-col .col + .col,
	.editor .three-col .col + .col,
	.editor .four-col .col + .col {
		margin-top: 20px;
	}

	.editor .two-col .col + .col,
	.editor .three-col .col + .col,
	.editor .four-col .col + .col {
		margin-left: 0;
	}
	.editor .four-col-special{
		flex-direction: column;
	}

	.editor .four-col-special .col-group{
		width: 100%;
	}

	.editor .four-col.special .col:nth-child(odd){
		display: inline-block;
		margin-top: 10px;
	}

	.editor .four-col.special .col:nth-child(even){
		display: inline-block;
		margin-top: 10px;
	}
	
	.editor .table-responsive-wrapper > tbody > tr + tr{
		border-top: 40px solid transparent;
	}

	.editor p, .editor div, .editor a, .editor li, .editor td, .editor th {
		font-size: 16px !important;
		line-height: 22px !important;
	}

	.editor .title1 {
		font-size: 26px !important; /* Scaled down proportionally to match standard mobile banner */
		line-height: 34px !important;
	}

	.editor .title2 {
		font-size: 19px !important;
		line-height: 24px !important;
	}

	.editor .title3 {
		font-size: 17px !important; /* Responsive standardized title3 size */
		line-height: 22px !important;
	}

	.editor .title_cap {
		font-size: 16px !important;
		line-height: 22px !important;
	}

	.editor .subtitle1 {
		font-size: 19px !important;
		line-height: 24px !important;
	}
}

/* ==========================================================================
   CMS Editor Overrides (Keep at the bottom of editor.css)
   Forces all animated elements to be fully visible and editable in the admin
   ========================================================================== */
.mce-content-body, 
.cke_editable, 
body[id^="tinymce"],
body.cke_editable {
    .editor .title1, 
    .editor .title_cap,
    .editor .title3,
    .editor table.table-special1 tr td,
    .editor p,
    .editor .col {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}