.index-title h3{ line-height:30px; color:#333;font-weight: normal;}
.index-title em{ font-size:14px; line-height:30px; color:#666; font-style: normal; display: block; letter-spacing:1px; text-transform: uppercase;}

/*鍏徃绨′粙*/
.index-aboutus{ width: 100%; padding: 60px 0 60px; }
/* 左右兩欄等高彈性排列，圖片垂直居中對齊文字欄 */
.index-aboutus .row{ margin-top: 60px; display:flex; flex-wrap:wrap; align-items:center; }
.index-aboutus .col-md-6 h2{ margin-top: 20px; color:#333;}
.index-aboutus .col-md-6 .index-aboutus-text{ margin-top:40px; font-size:16px; line-height: 30px; padding-right:70px;}
.index-aboutus .col-md-6 .index-aboutus-text h4{ margin:25px 0 10px; color:#3D5FA3; font-size:18px; }
.index-aboutus .col-md-6 img{ max-width: 100%;}

/*============服務項目================*/
.index-service{ width: 100%; padding: 0 0 60px; }
.index-service .row{ margin-top: 60px; }
.index-service .service-item{ text-align:center; background:#fff; border:solid 1px #e5e5e5; padding:25px 10px 20px; -webkit-transition:all .3s ease; transition:all .3s ease; }
.index-service .service-item .service-icon{ width:70px; height:70px; line-height:70px; border-radius:70px; border:solid 1px #3D5FA3; color:#3D5FA3; font-size:30px; text-align:center; margin:0 auto 15px; -webkit-transition:all .3s ease; transition:all .3s ease; }
.index-service .service-item h4{ color:#333; font-size:16px; font-weight:normal; margin:0; -webkit-transition:all .3s ease; transition:all .3s ease; }
.index-service .service-item:hover{ background:#3D5FA3; border-color:#3D5FA3; }
.index-service .service-item:hover .service-icon{ background:#fff; border-color:#fff; }
.index-service .service-item:hover h4{ color:#fff; }

/*============首頁橫幅================*/
.index-banner{ width:100%; overflow:hidden; }
/* 完整展示 banner 原圖（1920x950），不裁切：寬度撐滿、高度按比例 */
.index-banner img{ width:100%; height:auto; display:block; }

/*============生日會表演================*/
/* 內容區到底部間距 = 標題到導航欄間距(80px),不影響 msby 等頁面 */
.contact-us-box.birthday-box, .contact-us-box.clown-box, .contact-us-box.course-box, .contact-us-box.magic-box{ padding: 60px 0 80px; }
.clown-service:first-child .index-title h3, .course-intro:first-child .index-title h3{ margin-top: 0; }
/* 標題與首頁關於我們一致(h3),標題→橫線、橫線→描述、描述→套餐標題間距一致(40px) */
.birthday-title{ border-bottom: 2px solid #bbb; padding: 0 0 40px; }
.birthday-title h3{ line-height:30px; color:#333; font-weight:normal; }
.birthday-title em{ font-size:14px; line-height:30px; color:#666; font-style: normal; display: block; letter-spacing:1px; text-transform: uppercase; }
/* 橫線到描述 = col-md-12 padding-bottom 40px,與標題 padding-bottom 一致 */
.birthday-intro{ font-size:16px; color:#666; line-height:30px; }
.birthday-intro p{ margin: 0 0 8px; }
.birthday-intro p:last-child{ margin-bottom: 0; }

/* 套餐卡片 */
.birthday-packages{ margin-top: 40px; }
.birthday-packages .index-title h3, .birthday-single .index-title h3{ margin-top: 0; }
.birthday-packages .row{ margin-top: 40px; display:flex; flex-wrap:wrap; }
.birthday-packages .row > [class*="col-"]{ display:flex; margin-bottom:40px; }
.package-item{ width:100%; display:flex; flex-direction:column; background:#fff; border:solid 1px #e5e5e5; -webkit-transition:all .3s ease; transition:all .3s ease; }
.package-item .package-head{ background:#f4f4f4; padding:14px 20px; border-bottom:solid 1px #e5e5e5; overflow:hidden; }
.package-item .package-head .package-name{ font-size:18px; color:#333; }
.package-item .package-head .package-price{ float:right; font-size:22px; font-weight:bold; color:#3D5FA3; line-height:25px; }
/* 時鐘圖示對齊下方清單的「>」,分鐘文字與下方清單文字對齊(padding-left 16px) */
.package-item .package-time{ padding:12px 20px 0; font-size:15px; color:#3D5FA3; line-height:30px; }
.package-item .package-time span{ padding-left:16px; }
.package-item .package-list{ list-style:none; margin:0; padding:0 20px 16px; }
.package-item .package-list li{ position:relative; padding-left:16px; font-size:14px; color:#666; line-height:30px; }
.package-item .package-list li:before{ content:"\f105"; font-family:FontAwesome; position:absolute; left:0; top:0; color:#3D5FA3; }
.package-item .package-note{ margin:auto 20px 16px; padding-top:10px; border-top:solid 1px dashed #e5e5e5; font-size:13px; color:#3D5FA3; line-height:30px; }
.package-item:hover{ border-color:#3D5FA3; -webkit-box-shadow:0 5px 15px rgba(61,95,163,.15); box-shadow:0 5px 15px rgba(61,95,163,.15); }
.package-item:hover .package-head{ background:#3D5FA3; }
.package-item:hover .package-head .package-name, .package-item:hover .package-head .package-price{ color:#fff; }

/* 備註 */
.birthday-remark{ background:#f7f8fc; border:solid 1px dashed #3D5FA3; padding:15px 20px; }
.birthday-remark p{ position:relative; padding-left:18px; margin:0 0 6px; font-size:14px; color:#666; line-height:30px; }
.birthday-remark p:before{ content:"\f00c"; font-family:FontAwesome; position:absolute; left:0; top:0; color:#3D5FA3; }
.birthday-remark p:last-child{ margin-bottom:0; }

/* 單項表演卡片 */
.birthday-single{ margin-top: 40px; }
.birthday-single .row{ margin-top: 40px; display:flex; flex-wrap:wrap; }
.birthday-single .row > [class*="col-"]{ display:flex; margin-bottom:40px; }
.single-item{ width:100%; background:#fff; border:solid 1px #e5e5e5; text-align:center; padding:30px 20px; -webkit-transition:all .3s ease; transition:all .3s ease; }
.single-item .single-icon{ width:70px; height:70px; line-height:70px; border-radius:70px; border:solid 1px #3D5FA3; color:#3D5FA3; font-size:30px; margin:0 auto 15px; -webkit-transition:all .3s ease; transition:all .3s ease; }
.single-item h4{ margin:0 0 10px; color:#333; font-size:18px; font-weight:normal; }
/* 價錢分成兩個小卡片 */
.single-price{ display:flex; justify-content:center; margin-bottom:12px; }
.single-price .price-card{ flex:1; max-width:130px; margin:0 5px; background:#f7f8fc; border:solid 1px #e5e5e5; padding:8px 0; }
.single-price .price-card b{ display:block; font-size:16px; color:#3D5FA3; font-weight:bold; line-height:30px; }
.single-price .price-card span{ display:block; font-size:13px; color:#666; line-height:30px; }
.single-item p{ margin:0; font-size:14px; color:#666; line-height:30px; }
.single-item:hover{ background:#3D5FA3; border-color:#3D5FA3; }
.single-item:hover .single-icon{ background:#fff; border-color:#fff; }
.single-item:hover h4, .single-item:hover p{ color:#fff; }
.single-item:hover .single-price .price-card{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.4); }
.single-item:hover .single-price .price-card b, .single-item:hover .single-price .price-card span{ color:#fff; }

/*============生日會圖片展示================*/
.birthday-gallery{ margin-top: 40px; }
.birthday-gallery .index-title h3{ margin-top: 0; }
.birthday-gallery .row{ margin-top: 40px; }
/* 卡片高度與 case 頁面一致(630x480) */
.birthday-gallery .case-item{ height: auto; aspect-ratio: 630 / 480; }
.birthday-gallery .case-item img{ width:100%; height:100%; object-fit:cover; }

/*============小丑表演================*/
.clown-service + .clown-service{ margin-top: 40px; }
.clown-service .index-title h3{ margin-top: 20px; }
.clown-service .clown-desc{ margin-top: 25px; font-size:16px; color:#666; line-height:30px; }
.clown-service .clown-desc p{ margin: 0; }
.clown-service .clown-highlight, .clown-service .clown-forms{ margin-top: 25px; }
.clown-service .clown-highlight h4, .clown-service .clown-forms h4{ margin:0 0 10px; font-size:16px; color:#3D5FA3; font-weight:bold; }
.clown-service .clown-highlight p, .clown-service .clown-forms p{ position:relative; padding-left:18px; margin:0 0 8px; font-size:14px; color:#666; line-height:30px; }
.clown-service .clown-highlight p:before, .clown-service .clown-forms p:before{ content:"\f105"; font-family:FontAwesome; position:absolute; left:0; top:0; color:#3D5FA3; }
.clown-service .clown-highlight p:last-child, .clown-service .clown-forms p:last-child{ margin-bottom:0; }
/* 價格卡片(生日會套餐卡片樣式),置於描述右側,從上到下排列 */
.clown-price{ margin-top: 25px; }
.clown-price .package-item{ margin-bottom: 20px; }
.clown-price .package-item:last-child{ margin-bottom: 0; }
.clown-price .package-item .package-time{ padding:12px 20px 16px; }
/* 圖片網格,卡片高度與 case 頁面一致(630x480) */
.clown-service .clown-gallery{ margin-top: 25px; }
.clown-service .case-item{ height: auto; aspect-ratio: 16 / 9; }
.clown-service .case-item img{ width:100%; height:100%; object-fit:cover; }
/* 奇幻小丑魔術表演:價格卡片移至文字下方橫向排列,圖片移至右側 */
.clown-magic-service .clown-price{ display:flex; }
.clown-magic-service .clown-price .package-item{ width:33.333%; margin-bottom:0; margin-right:20px; }
.clown-magic-service .clown-price .package-item:last-child{ margin-right:0; }
/* 高大吸睛小丑高蹺:同魔術表演佈局,兩張卡片各佔一半,圖片原生直幅不裁切 */
.clown-stilt-service .case-item{ aspect-ratio: 9 / 16; }
.clown-stilt-service .clown-price{ display:flex; }
.clown-stilt-service .clown-price .package-item{ width:calc(50% - 10px); margin-bottom:0; margin-right:20px; }
.clown-stilt-service .clown-price .package-item:last-child{ margin-right:0; }
/* 百變小丑扭氣球:兩張圖片統一高度(3:4) */
.clown-balloon-service .clown-gallery .case-item{ aspect-ratio: 3 / 4; }
/* 吉祥物巡遊表演服務:三張圖片統一高度(2:3) */
.clown-mascot-service .clown-gallery .case-item{ aspect-ratio: 2 / 3; }
@media only screen and (max-width: 750px) {
    .clown-magic-service .clown-price, .clown-stilt-service .clown-price{ display:block; }
    .clown-magic-service .clown-price .package-item, .clown-stilt-service .clown-price .package-item{ width:100%; margin-right:0; margin-bottom:20px; }
    .clown-magic-service .clown-price .package-item:last-child, .clown-stilt-service .clown-price .package-item:last-child{ margin-bottom:0; }
}

/*============興趣班================*/
.course-intro .index-title h3{ margin-top: 20px; }
.course-intro-text{ margin-top: 25px; font-size:16px; color:#666; line-height:30px; }
.course-intro-text p{ margin: 0 0 8px; }
.course-intro-text p:last-child{ margin-bottom: 0; }
/* 課程卡片網格 */
.course-cards{ margin-top: 40px; }
.course-cards .row{ display:flex; flex-wrap:wrap; }
.course-cards .row > [class*="col-"]{ display:flex; margin-bottom:40px; }
.course-card{ width:100%; display:flex; flex-direction:column; background:#fff; border:solid 1px #e5e5e5; border-radius:8px; overflow:hidden; -webkit-transition:all .3s ease; transition:all .3s ease; }
.course-card:hover{ border-color:#3D5FA3; -webkit-box-shadow:0 10px 25px rgba(61,95,163,.18); box-shadow:0 10px 25px rgba(61,95,163,.18); -webkit-transform:translateY(-6px); transform:translateY(-6px); }
.course-card-cover{ position:relative; overflow:hidden; }
.course-card-cover img{ width:100%; aspect-ratio: 630 / 360; object-fit:cover; -webkit-transition:transform .5s ease; transition:transform .5s ease; }
.course-card:hover .course-card-cover img{ -webkit-transform:scale(1.08); transform:scale(1.08); }
.course-card-cover .course-tag{ position:absolute; left:15px; top:15px; background:rgba(61,95,163,.92); color:#fff; font-size:12px; line-height:26px; padding:0 14px; border-radius:13px; }
.course-card-cover.no-image{ background:linear-gradient(135deg,#3D5FA3 0%,#6a8ed0 100%); aspect-ratio: 630 / 360; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; }
.course-card-cover.no-image i{ font-size:72px; color:rgba(255,255,255,.92); }
.course-card-body{ padding:20px 25px 0; -webkit-flex:1; flex:1; }
.course-card-body h4{ margin:0; font-size:20px; color:#333; font-weight:bold; }
.course-card-body em{ display:block; margin-top:2px; font-size:13px; color:#999; font-style:normal; letter-spacing:1px; text-transform:uppercase; }
.course-card-meta{ margin-top:10px; padding-bottom:12px; border-bottom:solid 1px dashed #e5e5e5; font-size:14px; color:#3D5FA3; }
.course-card-meta span{ display:inline-block; margin-right:15px; }
.course-card-meta i{ margin-right:5px; }
.course-card-desc{ margin-top:12px; font-size:14px; color:#666; line-height:30px; }
.course-card-body ul{ list-style:none; margin:8px 0 0; padding:0; }
.course-card-body ul li{ position:relative; padding-left:20px; margin-bottom:4px; font-size:13px; color:#666; line-height:28px; }
.course-card-body ul li:before{ content:"\f00c"; font-family:FontAwesome; position:absolute; left:0; top:0; color:#3D5FA3; }
.course-card-body ul li:last-child{ margin-bottom:0; }
.course-card-foot{ margin-top:auto; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:space-between; justify-content:space-between; padding:15px 25px 20px; }
.course-card-foot .course-price b{ display:block; font-size:22px; color:#3D5FA3; font-weight:bold; line-height:30px; }
.course-card-foot .course-price span{ display:block; font-size:12px; color:#999; line-height:20px; }
.course-card-foot .btn-query{ background:#3D5FA3; color:#fff; border-radius:20px; padding:8px 22px; font-size:14px; line-height:22px; -webkit-transition:all .3s ease; transition:all .3s ease; }
.course-card-foot .btn-query:hover{ background:#2c4a85; color:#fff; }
/* 課堂花絮圖片網格 */
.course-gallery .index-title h3{ margin-top: 0; }
.course-gallery .row{ margin-top: 40px; }
.course-gallery .case-item{ height: auto; aspect-ratio: 630 / 480; }
.course-gallery .case-item img{ width:100%; height:100%; object-fit:cover; }
/* 教學經驗 */
.course-schools{ margin-top: 40px; }
.course-schools .index-title h3{ margin-top: 20px; }
.schools-box{ margin-top: 25px; }
.schools-box > p{ margin:0 0 15px; font-size:16px; color:#666; line-height:30px; }
.schools-list{ list-style:none; margin:0; padding:0; -webkit-column-count:3; column-count:3; -webkit-column-gap:40px; column-gap:40px; }
.schools-list li{ position:relative; padding-left:18px; font-size:14px; color:#666; line-height:30px; }
.schools-list li:before{ content:"\f105"; font-family:FontAwesome; position:absolute; left:0; top:0; color:#3D5FA3; }

/*============魔術表演================*/
/* 卡片沿用課程卡片網格樣式 */
.magic-gallery .index-title h3{ margin-top: 0; }
.magic-gallery .row{ margin-top: 40px; }
.magic-gallery .case-item{ height: auto; aspect-ratio: 630 / 480; }
.magic-gallery .case-item img{ width:100%; height:100%; object-fit:cover; }

/*========宸ョ▼============*/
.title{ border-bottom: 2px solid #bbb; padding:0  0 15px;}
.title h2{ line-height:30px; color:#333;font-weight: normal;}
.title em{ font-size:14px; line-height:30px; color:#666; font-style: normal; display: block; letter-spacing:1px; text-transform: uppercase;}

/*============鑱公鎴戝€�================*/
.contact-us-box{ width: 100%; padding: 60px 0 100px; }
.contact-us-box .col-md-12{padding-bottom: 40px; }
/*============聯絡我們頁面 居中資訊卡================*/
.contact-card-a{ max-width:560px; margin:0 auto; background:#fff; border:solid 1px #e5e5e5; padding:40px 30px; text-align:center; }
.contact-card-a h2{ margin:0 0 20px; color:#3D5FA3; }
.contact-card-a .contact-list-a{ list-style:none; margin:0 auto; padding:0; text-align:left; display:inline-block; }
.contact-card-a .contact-list-a li{ line-height:36px; font-size:16px; color:#666; }
.contact-card-a .contact-list-a li i{ width:30px; height:30px; border:solid 1px #3D5FA3; border-radius:30px; text-align:center; line-height:28px; color:#3D5FA3; margin-right:12px; font-size:15px; }
.contact-btn-a{ display:inline-block; margin-top:30px; background:#3D5FA3; color:#fff; width:220px; height:44px; line-height:44px; text-align:center; -webkit-transition:all .5s ease; transition:all .5s ease; }
.contact-btn-a:hover{ background:#31497e; color:#fff; text-decoration:none; }

/*=============鍙婃檪鏌ヨ==================*/
.contact_title{ text-align: center; padding:60px 20px; border:solid 1px #dce5eb;}

.form-emails{  margin-top: 40px;}
.form-emails .input-group{ padding:11px 0; width: 100%; line-height: 50px;}
.form-emails .input-group .input-group-addon{ width: 180px; background:none; border:none; text-align: left;}
.form-emails .input-group .input-group-addon b{ color: #ff0000; }
.form-emails .input-group .form-input{ width: 380px;}
.form-emails .input-group .form-control{ box-shadow: none;}
.input-text{ line-height:50px;padding:15px;height:50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:none; background: #f4f4f4; border-radius:2px; -webkit-border-radius: 2px; width: 100%;}
.textarea-text{ line-height:22px;padding:15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:none; background: #f4f4f4;  -webkit-border-radius: 2px; width: 100%; min-height: 140px; resize:vertical;}
.input-btn{ line-height:44px; border:none; border-radius:0;  background:#3D5FA3; color: #fff; width:220px; text-align: center; height:44px; margin:30px 180px 120px; display: block;}
.input-btn:hover{ background: #3D5FA3; transition: all .5s ease-out; -webkit-transition: all .5s ease-out;}

/*============妗堜緥灞曠ず===================*/
.case-box .col-md-4{ padding-top:15px;padding-bottom:15px; }
.case-box .case-item{ position: relative; width: 100%; height: 100%; overflow: hidden;}
.case-box .case-item img{ width:100%; -webkit-transition:all .5s ease; transition:all .5s ease;}
.case-box .case-item:hover img{ -webkit-transform: scale(1.1);transform: scale(1.1); }

@media only  screen and (max-width: 750px) {
    /*闂滄柤鎴戝€�*/
    .index-aboutus{ width: 100%; padding: 40px 0 40px; }
    .index-aboutus .row{ margin-top:40px; }
    .index-aboutus .col-md-6 .index-aboutus-text{ margin-top:20px; line-height: 28px; padding-right:0;}

    /*==============鑱公鏂瑰紡================*/
    .form-emails .input-group .input-group-addon{ width:100%; display:block; line-height: 36px; background:none; border:none; text-align: left;}
    .form-emails .input-group .input-group-addon b{ color: #ff0000; }
    .form-emails .input-group .form-input{ width:100%;}
    .input-btn{ width:160px;  height:44px; margin:30px 0 60px;}

    /*============服務項目================*/
    .index-service{ padding: 0 0 40px; }
    .index-service .row{ margin-top:40px; }
    .index-service .service-item{ padding: 20px 5px 15px; margin-bottom:15px; }
    .index-service .service-item .service-icon{ width:55px; height:55px; line-height:55px; font-size:22px; margin-bottom:10px; }
    .index-service .service-item h4{ font-size:13px; }

    /*============生日會表演================*/
    .contact-us-box, .contact-us-box.birthday-box, .contact-us-box.clown-box, .contact-us-box.course-box, .contact-us-box.magic-box{ padding-top: 40px; }
    .birthday-title{ padding: 0 0 40px; }
    .birthday-intro{ font-size:14px; line-height:28px; }
    .birthday-packages, .birthday-single{ margin-top: 30px; }
    .birthday-packages .row, .birthday-single .row{ margin-top: 25px; }
    .birthday-packages .row > [class*="col-"], .birthday-single .row > [class*="col-"]{ width:100%; margin-bottom:20px; }
    .package-item .package-head .package-price{ font-size:18px; }
    .package-item .package-time, .package-item .package-list li, .birthday-remark p, .single-item p{ line-height:28px; }
    .single-price .price-card b, .single-price .price-card span{ line-height:28px; }

    /*============生日會圖片展示================*/
    .birthday-gallery{ margin-top: 30px; }
    .birthday-gallery .row{ margin-top: 25px; }

    /*============小丑表演================*/
    .clown-service + .clown-service{ margin-top: 30px; }
    .clown-price{ margin-top: 20px; }
    .clown-price .package-item{ margin-bottom: 15px; }
    .clown-service .clown-desc{ font-size:14px; line-height:28px; }
    .clown-service .clown-desc, .clown-service .clown-highlight, .clown-service .clown-forms, .clown-service .clown-gallery{ margin-top: 20px; }
    .clown-service .clown-highlight p, .clown-service .clown-forms p{ line-height:28px; }

    /*============興趣班================*/
    .course-intro-text, .schools-box > p{ font-size:14px; line-height:28px; }
    .course-intro-text, .schools-box{ margin-top: 20px; }
    .course-cards{ margin-top: 30px; }
    .course-cards .row > [class*="col-"]{ margin-bottom:20px; }
    .course-card-body{ padding:15px 20px 0; }
    .course-card-desc{ font-size:13px; line-height:28px; }
    .course-card-body ul li{ line-height:26px; }
    .course-card-foot{ padding:12px 20px 16px; }
    .course-card-foot .course-price b{ font-size:18px; }
    .course-gallery .row{ margin-top: 25px; }
    .course-schools{ margin-top: 30px; }
    .schools-list li{ line-height:28px; }
    .schools-list{ -webkit-column-count:1; column-count:1; }

    /*============魔術表演================*/
    .magic-gallery .row{ margin-top: 25px; }

}































































