@charset "utf-8";

*
{ font-family:'Noto Sans TC', 'PingFangHK-Regular', '微軟正黑體', Arial, Verdana, Geneva, sans-serif; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400;}

/* Main Setting
***********************/
html, body
{ background:#ffffff; font-size:12px; }
.desbreak
{ display:block; }
.mobbreak
{ display:none; }

strong
{font-weight:700;}


#wrapper
{ position:relative; width:100%;}
.mainContent
{ width:100%; max-width: 1000px; margin:0px auto;}


/* Banner Setting Start
**********************/
.bannerRow
{ position:relative; width:100%; max-width: 1000px;}
.bannerRow img.bg
{ width:100%; height: auto;}


/* introRow Setting Start
**********************/
.introRow
{ padding:110px 0px; background:#fc2a83;}
.introRow .introInner
{ width:90%; margin:0px auto;}
.introRow .introInner .logoCol
{ width:30%; max-width: 260px;}
.introRow .introInner .logoCol img
{ width:100%; max-width: 160px; height: auto;}
.introRow .introInner .sepCol
{ width:5%;}
.introRow .introInner .descCol img
{ width:100%; max-width: 400px; height: auto;}

/* eventDetailsRow Setting Start
**********************/
.eventDetailsRow
{ padding:80px 0px; background:#183641;}
.eventDetailsRow .titRow
{ margin-bottom: 65px;}
.eventDetailsRow .patternCol
{ width:25%;}
.eventDetailsRow .patternCol.left
{ background:url(../images/tit-pattern-left.jpg) no-repeat center; background-size:cover;}
.eventDetailsRow .patternCol.right
{ background:url(../images/tit-pattern-right.jpg) no-repeat center; background-size:cover;}
.eventDetailsRow .patternCol img
{ width:100%; height: auto;}
.eventDetailsRow .titCol img
{ max-width:200px;}
.eventDetailsRow .titCol img
{ width:100%; max-width:175px; height: auto;}
.eventDetailsRow .txtCol p
{ font-size: 16px; line-height: 1.3; color:#fc2a83; text-align: left;}

.eventDetailsRow .eventInner
{ width:82%; margin:0px auto; margin-bottom: 30px;}
.eventDetailsRow .eventInner .sepCol
{ width:4%;}
.eventDetailsRow .eventInner .eventCol
{ width:48%; vertical-align: top;}
.eventDetailsRow .eventInner .eventCol .eventDetailArea
{ background:url(../images/img-details-box-pattern.png) repeat center; background-size:16px auto;}
.eventDetailsRow .eventInner .eventCol .eventDetailArea .contentArea
{ background:url(../images/img-detail-lbox-mid.png) repeat-y center; background-size:100% auto; height:350px;}
.eventDetailsRow .eventInner .eventCol .eventDetailArea .contentArea.right
{ background:url(../images/img-detail-rbox-mid.png) repeat-y center; background-size:100% auto; height:350px;}
.eventDetailsRow .eventInner .eventCol .topBar img,
.eventDetailsRow .eventInner .eventCol .btmBar img
{ width:100%; height: auto;}
.eventDetailsRow .eventInner .eventCol .iconRow
{ text-align: center; margin-bottom: 35px;}
.eventDetailsRow .eventInner .eventCol .iconRow img
{ width:auto; height: 95px;}
.eventDetailsRow .eventInner .eventCol .paraRow
{ width:80%; margin:0px auto;}

.eventDetailsRow .eventInner .eventCol .paraRow span
{ left: -10px; position: relative;}

.eventDetailsRow .eventInner .eventCol .paraRow .sloganL
{ display:block; width:100%; max-width:210px; height: auto; margin-bottom: 15px; margin-left: 0px;}
.eventDetailsRow .eventInner .eventCol .paraRow .sloganR
{ display:block; width:100%; max-width:160px; height: auto; margin-bottom: 15px; margin-left: 0px;}
.eventDetailsRow .eventInner .eventCol .paraRow p
{ color:#2af5fc; font-size:20px; line-height: 1.3; text-align: left; margin-bottom: 15px;}

.eventDetailsRow .eventInner .eventCol .paraRow p:last-child
{ margin-bottom: 0px; font-size:17px; line-height: 1.3; text-align: left;}

.eventDetailsRow .remarksRow
{ width:90%; margin:0px auto;}
.eventDetailsRow .remarksRow p
{ color:#2af5fc; font-size:18px; line-height: 1.3; text-align: center;}

/* btmPattern Setting Start
**********************/
.btmPattern
{ width:100%; height: 25px; background:url(../images/img-btm-pattern.jpg) no-repeat top center; background-size:100% auto; background-color:#cecdcd;}


@media only screen and (max-width: 1000px)
{
/* eventDetailsRow Setting Start
**********************/
.eventDetailsRow
{ padding:80px 0px;}
.eventDetailsRow .titRow
{ margin-bottom: 65px;}
.eventDetailsRow .patternCol
{ width:24%;}
.eventDetailsRow .titCol img
{ max-width:200px;}
.eventDetailsRow .titCol img
{ width:100%; max-width:175px; height: auto;}
.eventDetailsRow .txtCol p
{ font-size: 16px;}
}

@media only screen and (max-width: 768px)
{
/* introRow Setting Start
**********************/
.introRow
{ padding:60px 0px;}
.introRow .introInner .logoCol,
.introRow .introInner .sepCol,
.introRow .introInner .descCol
{ display:block; width:100%; max-width: 100%; text-align: center;}
.introRow .introInner .logoCol
{ margin-bottom: 50px;}
.introRow .introInner .descCol img
{ width:90%; }


/* eventDetailsRow Setting Start
**********************/
.eventDetailsRow .patternCol
{ width:35%;}
.eventDetailsRow .titCol
{ padding:0px 5%;}
.eventDetailsRow .txtCol
{ display:block; width:90%; margin:0px auto; margin-bottom: 35px; text-align: center; }
.eventDetailsRow .txtCol p
{ display:block; width:100%; text-align: center; font-size: 18px;}
.eventDetailsRow .titRow
{ margin-bottom: 10px; }
.eventDetailsRow .titRow .txtCol
{ display:none;}

.eventDetailsRow .eventInner
{ width:350px; margin-bottom: 30px;}
.eventDetailsRow .eventInner .sepCol,
.eventDetailsRow .eventInner .eventCol
{ display:block; width:100%; }
.eventDetailsRow .eventInner .eventCol
{ margin-bottom: 50px;}
.eventDetailsRow .eventInner .eventCol:last-child
{ margin-bottom: 0px;}
.eventDetailsRow .eventInner .eventCol .eventDetailArea
{ max-width:360px; margin:0px auto; }


.eventDetailsRow .eventInner .eventCol .iconRow
{ text-align: center; margin-bottom: 35px;}
.eventDetailsRow .eventInner .eventCol .iconRow img
{ width:auto; height: 90px;}

.eventDetailsRow .eventInner .eventCol .paraRow
{ width:85%; margin:0px auto;}
.eventDetailsRow .eventInner .eventCol .paraRow .sloganL
{ display:block; width:100%; max-width:210px; height: auto; margin-bottom: 15px; margin-left: 0px;}
.eventDetailsRow .eventInner .eventCol .paraRow .sloganR
{ display:block; width:100%; max-width:160px; height: auto; margin-bottom: 15px; margin-left: 0px;}
.eventDetailsRow .eventInner .eventCol .paraRow p
{ color:#2af5fc; font-size:20px; line-height: 1.3; text-align: left; margin-bottom: 15px;}
.eventDetailsRow .eventInner .eventCol .paraRow p:last-child
{ margin-bottom: 0px; font-size:3.75vw;}

.eventDetailsRow .remarksRow p
{ font-size:18px; }

}

@media only screen and (max-width: 450px)
{
.desbreak
{ display:none; }
.mobbreak
{ display:block; }

.introRow
{ padding:12.5vw 0px;}
.introRow .introInner .logoCol img
{width:140px;}

/* eventDetailsRow Setting Start
**********************/
.eventDetailsRow
{ padding:12.5vw 0px;}
.eventDetailsRow .eventInner
{width:80%;}

.eventDetailsRow .patternCol
{ width:25%;}
.eventDetailsRow .titCol
{ padding:0px 5%;}
.eventDetailsRow .titCol img
{ width:80%; }
.eventDetailsRow .txtCol
{ margin-bottom: 6vw; }
.eventDetailsRow .txtCol p
{ font-size: 4vw;}
.eventDetailsRow .titRow
{ margin-bottom: 2.5vw; }
.eventDetailsRow .eventInner .eventCol .iconRow img
{ width:auto; height: 20vw;}
.eventDetailsRow .eventInner .eventCol .paraRow p
{ font-size: 4.5vw; margin-bottom: 2.5vw;}
.eventDetailsRow .eventInner .eventCol .paraRow .sloganL
{ width:80%; max-width: 220px; margin-bottom: 2.5vw;}
.eventDetailsRow .eventInner .eventCol .paraRow .sloganR
{ width:80%; max-width: 180px; margin-bottom: 2.5vw;}
.eventDetailsRow .eventInner .eventCol .eventDetailArea .contentArea
{ height:280px;}
.eventDetailsRow .eventInner .eventCol .eventDetailArea .contentArea.right
{ height:280px;}


.eventDetailsRow .remarksRow p
{ font-size:3.75vw;}

}