@charset "utf-8";
/*
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Modak&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('bootstrap-icons.css');


html {width: 100%; height: 100%; line-height: 1.8em; font-size: 16px; line-height: 1.6em; font-weight: 300;}
body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Lora', 'Noto Serif TC', Microsoft JhengHei; font-weight: normal; }
body.index { overflow: hidden; }
img { border: 0; vertical-align: middle; max-width: 100%; height: auto;}
a { text-decoration: none;}
h1, h2, h3, h4, h5, p { clear: both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */ 
input { vertical-align:middle; font-family:'Lora' ,'Noto Serif TC',Microsoft JhengHei; border: 0;}
select, textarea {  font-family:'Lora' , 'Noto Serif TC' , Microsoft JhengHei;}


/**---------------- padding and border no width ---------------------**/
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}


/**----所有連結漸變---**/
a {transition: all 0.3s ease;}


/* bannerscollection_zoominout 黑色遮罩 */
.index-banner { position: relative; z-index: 1;  }
.bannerscollection_zoominout:after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.2); z-index: 50; pointer-events: none;  }

/* 手機選單 */
.burger { width: 40px; height: 40px; cursor: pointer; position: absolute; right:20px; top: 25px; z-index: 9999; transform: rotate(-90deg); transition: all 0.3s ease; display: none;}
header.down .burger { top: 15px; }
.burger:hover {  transform: rotate(0deg); }
.burger.index { display: block; }
.burger:before, .burger:after { content: ''; display: block; height: 4px; border-radius: 99em; background-color: rgba(31, 39, 87, 0.9); transition: all 0.3s ease; } 
.burger span { display: block; width: 100%; height: 4px; border-radius: 99em; background-color: rgba(31, 39, 87, 0.9); margin: 10px 0; transition: all 0.3s ease;}
.burger:before { width: 55%;  }
.burger:after { width: 55%; margin-left: 45%; }
.burger:hover:before, .burger:hover:after { width: 100%; margin-left: 0; }

.burger.index:before, 
.burger.index:after,
.burger.index span { display: block; background-color: rgba(255, 255, 255, 0.9); }

.burger.active { transform: rotate(0deg); }
.burger.active:before {  transform: rotate(45deg); margin-top: 18px;  width: 100%; background-color: #ffffff; }
.burger.active:after {  transform: rotate(-45deg); margin-top: -25px; width: 100%; margin-left: 0; background-color: #ffffff;}
.burger.active span { width: 0; }

.mobile-menu { width: 100%; right: -100%;  height: 100vh; background: rgba(31, 39, 87, 0.9); position: absolute;  z-index: 9998; transition: all 0.5s ease;  top: 0; opacity: 0; overflow: hidden; }
.mobile-menu.index { display: block; opacity: 1; }
.mobile-menu>ul { position: relative; top: 50%; transform: translateY(-50%); padding: 0;}
.mobile-menu>ul>li { list-style: none; }
.mobile-menu>ul>li {color: #ffffff; font-size: 30px; font-weight: bold; text-align: center; }
.mobile-menu a { text-decoration: none; color: #ffffff;}
.mobile-menu>ul>li>a { width: 100%; margin: 0 auto; display: block;  text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; overflow: hidden; position: relative; padding: 20px 0; }

/* 變色動態 */
.mobile-menu>ul>li>a { font-weight: 500;  }
.mobile-menu>ul>li>a:hover { color: #ffffff; letter-spacing: 0.1em; }
.mobile-menu--open {  right: 0; opacity: 1;}
.mobile-menu>ul>li span.ch-text { font-size: 12px; font-weight: normal; color: #BFBFBF; }
.mobile-menu>ul>li a:hover { color: #898989; }
.mobile-menu>ul>li a:hover span.ch-text { color:#898989;}
.mobile-menu>ul>li span.ch-text:before { content: "/"; padding: 0 10px; }
.mobile-menu ul.sub { margin:8px 0 20px 0; padding: 0; }
.mobile-menu ul.sub li { position: relative; font-size: 26px; display: inline-block; width: 25%; overflow: hidden;}
.mobile-menu ul.sub li a { color: #CCCCCC; padding: 8px; display: block; max-width: 300px; margin: 0 auto; border-top: 1px #333333 dotted;}
.mobile-menu ul.sub li a:hover { color:#0f0f0f }



/** 首頁 **/
.index-text-m { position: absolute; top: 0; left: 0; bottom: 0; width: 40%; max-width: 400px; min-width: 280px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; z-index: 100; background: rgba(31, 39, 87, 0.9); }
.index-text-m img.index-logo { height: auto; width: calc(100% - 40px); max-width:200px; flex: none; display: block; margin: 0 auto 30px auto;  }
.index-note { color: #ffffff;}

.index-company-info { width: 100%; flex: none; padding: 20px; color: #ffffff; font-size: 14px; }
.index-info {width: auto; flex: none; letter-spacing: 1px; width: 100%; } 
.index-info span { padding: 0 10px 0 0; display: inline-block; word-break: break-all; }
.index-info span.mail { display: block; }
.index-info span a { color: #ffffff; }
.index-info span a:hover { color: #898989; }
.index-copyright { margin-top: 20px; padding-top: 20px; border-top: 1px rgba(255, 255, 255, 0.3) solid; color: #e2e2e2;} 
.index-copyright a { color: #919191; }
.index-copyright a:hover { color: #ffffff; }

.col-mid { display:flex; align-items: center; justify-content: center; }
.col-01 { flex: 1; margin: 10px; }
.index-enter { padding: 15px 0;}

.index-enter a { display: block; text-decoration: none; font-size: 16px; padding: 5px 15px; position: relative; max-width: 150px; margin: 0 auto; color: #ffffff;  text-align: center;  transition: all 0.3s ease 0s; }
.index-enter a::before, .index-enter a:after { content: ''; display: inline-block; width: 30px; height: 1px; position: absolute; top: 50%; background-color: rgba(255,255,255,0.9); transition: all 0.3s ease; }
.index-enter a:hover {   color: #ffffff; max-width: 200px; letter-spacing: 2px; }
.index-enter a:before { left: 0;}
.index-enter a:after { right: 0;}
.index-enter a:hover:before, .index-enter a:hover:after { width: 45px; }


@keyframes fadeOut {
  from {  opacity: 0; }
  to { opacity: 1; }
}

body.index {   animation-duration: 3s;  animation-name: fadeOut; position: relative;}
body {  animation-duration: 2s;  animation-name: fadeOut;}


/** 主框架 **/
.wallper {  width:100%; min-height: 100%; overflow: auto; padding:104px 0 55px 0;}
.wallper02 {  padding:90px 0 0 0; position: relative;}


.page-main {  max-width: 1200px; width: calc(100% - 20px);  margin: 0 auto; padding:20px 0;  position: relative; z-index: 10; }
.main-title {  font-size: 44px; margin: 0; padding: 25px 0 20px 0px; text-align: center; letter-spacing: 2px; line-height: 1em;}
.main-title span { font-size: 16px; color: #696969; }

.page-title { font-size: 20px; font-weight: 300; color: #333333; padding: 0 0 20px 0; position: relative; }
.page-title > div { position: relative; z-index: 10; padding-left: 25px; }
.page-title:before { content: ''; display: block; width: 80px; height: 80px; position: absolute; left: -72px; bottom: 0px; border-radius: 99em; background-image: url(../images/title-icon.svg); 
background-position: center; background-repeat: no-repeat; background-size: cover; }
.page-title span { font-size: 12px; color: #b8b8b8; display: block; line-height: 1em; margin-top: 5px; }
.page-title span:before { content: '/'; padding-right: 0.5em; }

.cover { margin-bottom: 25px; }
.t-center { text-align: center !important; }
.mobile-banner { display: none; }

/*** 頭部 ***/
header {  background: rgba(255,255,255,0); box-shadow: 0 0 10px rgba( 0 0 0 / 0); position: fixed; top:0; width: 100%; z-index: 1000; height: 90px; transition: all 0.3s ease;}
header.down {  background: rgba(255,255,255,1); box-shadow: 0 0 10px rgba( 0 0 0 / 0.1); height: 70px;}
header.index {  background:none; }
header.index .mobile-nav-button { display: block; }
header.index .mobile-nav-button .mobile-nav-button__line {background: rgba(236,236,236,1.00); }
.mobile-nav-button { display: none;}

.top {  max-width: 1200px; margin: 0 auto; position: relative;  height: 100%; }
.top a.logo { position: absolute; top: calc(50% - 21px); left: 20px; display: block; height: 40px; }
.top a.logo img { height: 100%; width: auto; }


/** 內頁選單 **/
.in-head { position: fixed; top: 60px; padding: 10px 0 0 0; width: 100%; text-align: center; z-index: 999; background: rgba(255,255,255,0.9);}

.in-menu ul { margin: 0; padding: 0; list-style: none; text-align: center; }
.in-menu ul li { display: inline-block; position: relative; height: 25px; min-width: 120px; overflow: hidden;  }
.in-menu ul li a { color: #000000; font-size: 16px; display:block; line-height: 25px; padding: 0 10px; text-decoration: none; position: absolute; top: 0; left: 0; width: 100%;}
.in-menu ul li:hover a, .in-menu ul li.active a { color: #8E8E8E; top: -25px;}
.in-menu ul li a span { display: block;}
.in-menu ul li a span.en { font-size: 16px;}
.in-menu ul li span.dot { background: #B7B7B7; display: block; width: 7px; height: 7px; position: absolute; top: 7px; left: -7px; transition: all 0.3s ease 0s;}
.in-menu ul li:hover span.dot, .in-menu ul li.active span.dot { left: 5px; transition: all 0.3s ease 0s;}

.pc-menu { height: 100%; }
.pc-menu ul { list-style: none; margin: 0; padding: 30px 0 0 0; text-align: right; transition: all 0.3s ease; } 
header.down .pc-menu ul { padding-top: 20px; }
.pc-menu ul li { display: inline-block; text-align: center; height: 25px; overflow: hidden; position: relative; margin: 0 10px; }
.pc-menu ul li a { color: #000000; text-align: center; display: block; line-height: 25px; }
.pc-menu ul li:hover a { margin-top: -25px; color:#464646 ; }
.pc-menu ul li a span { display:block; font-size: 16px; line-height: 25px;}
.pc-menu ul li a span.en { font-size: 12px; letter-spacing: 1px; color: #b9b9b9; }
.pc-menu ul li a span.cn { font-weight: 300; }



/* i-about */
.i-about { display: flex; align-items: center; justify-content: center; padding: 120px 20px; min-height: 100%; 
}

.index-about-bg {  background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;  }
.i-about .i-about-cont { color: #333; max-width: 1600px; width: 100%; }
.i-about .i-about-cont h2 { text-align: center; font-size: 40px; letter-spacing: 0.1em;   margin: 0 0 0.3em 0; padding: 0;  z-index: 5; position: relative;  }
.i-about .i-about-cont h2 .red { color: #ff7989; }
.i-about .i-about-cont h2 .pink { color: #ffa8b2; }
.i-about .i-about-cont h3 { text-align: center; font-size: 48px; margin: 0 0 2em 0; padding: 0; z-index: 5; position: relative; line-height: 1.5em; vertical-align: middle; }
.i-about .i-about-cont h4 { text-align: center; font-size: 30px; margin: 0 0 1em 0; padding: 0; font-weight: 500; z-index: 5; position: relative; line-height: 1.5em; }
.i-about .i-about-cont P { max-width: 520px; width: 100%; font-size: 16px; line-height: 1.6em; color: #757575; letter-spacing: 1px; }
.i-about .i-about-cont a { display: block; width: 50px; text-align: center; color: rgba(255, 255, 255, 0.6); margin: 30px auto 0 auto;   }
.i-about .i-about-cont a i { display: block; padding-bottom: 20px; transition: all 0.3s ease;}
.i-about .i-about-cont a:hover i { padding-bottom: 5px; padding-top: 15px; }

.i-about .i-about-cont .about-cont-flex { display: flex; flex-wrap: wrap; padding: 0 0 40px 0; }
.i-about .i-about-cont .about-cont-flex > div { flex: 1; padding: 20px; }
.i-about .i-about-cont .about-cont-flex .photo img { width: 100%; height: auto; }
.i-about .i-about-cont .about-cont-flex .cont h4 span { display: block; color: #cf3f3f; font-size: 24px; }
.i-about .i-about-cont .about-cont-flex .cont { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; }
.i-about .i-about-cont .about-cont-flex .cont h4,
.i-about .i-about-cont .about-cont-flex .cont p { width: 100% ; flex: none; }
.i-about .i-about-cont .full-win-3-power { max-width: 480px; display: block; margin: 20px auto; z-index: 5; position: relative; }

.i-about-box { padding-bottom: 120px; }
.i-about-box h4 { margin: 0 !important; }
.i-about-box .cont { font-size: 16px; color: #c5c5c5; } 

.i-about.i-marketing-bg { background-color: #8d4042; position: relative; background-image: none; }
.i-about.i-marketing-bg:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../images/i-marketing-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;  z-index: 1; opacity: 0.05; }





/** 案件 **/
.project { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; }
.project ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;}
.project ul li { position: relative; width: calc(25% - 20px); margin: 10px; flex: none; box-shadow: 0 0 0 rgba( 0 0 0 / 0); transition: all 0.3s ease;}
.project ul li .photo { width: 100%; height: auto; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s ease; } 
.project ul li .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%;  }
.project ul li a {display: block;} 
.project ul li:hover .photo  { filter: brightness(0.8); }

.project ul li .pro-note h3 { display: block; width: 100%;color: #333333; font-size: 14px; font-weight: 500; }
.project ul li .pro-note .time { font-size: 14px; color:#b0b0b0; }
.project ul li .pro-note p { width:100% ; padding: 0; margin: 0; color: #d8d8d8; display:block; /* 將資料內容分段顯示 */ word-break:break-all; /* 強制文字斷行 */ white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}




/* project-de-box */
.project-de-box .de-title { font-size: 24px; font-weight: 700; text-align: center; padding-bottom: 50px; position: relative; letter-spacing: 0.3em; margin-top: 0; color: #000; }
.project-de-box .de-title:before { content: 'PROFILE'; letter-spacing: 1px; font-size: 12px; font-weight: 300; line-height: 16px; text-align: center; background-color: #b4b4b4; color: #fff; width: 70px; position: absolute; left: calc(50% - 35px); bottom: 20px; z-index: 10; }
.project-de-box .de-title:after { content: ''; width: 0; height: 40px; border-left: 1px #cccccc solid; position: absolute; left: 50%; bottom: -10px; z-index: 1; } 
.project-de-box .de-time { text-align: center; margin: 20px 0; font-size: 18px; color: #808080; position: relative; letter-spacing: 1px; font-weight: 300;}


.project-move { display: flex; margin-top: 30px; justify-content: center;  padding-top: 20px;  border-top: 1px #e6e6e6 dotted; }
.project-move .img-move { max-width: 100px; flex: 1; margin: 0 20px; }
.project-move .img-move a { display: block; font-size: 12px; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; color: #333333;}
/*
.project-move .img-move a:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 30%; background-color: rgba( 255 255 255 / 0.8); transition: all 0.3s ease;}
.project-move .img-move:hover a:before { background-color: rgba( 0 0 0 / 0.05); }
*/
.project-move .img-move a .project-cover { width: 100%; height: 0; padding-bottom: 56%; background-position: center; background-repeat: no-repeat; background-size: cover; filter: brightness(0.5); transition: all 0.3s ease; }
.project-move .img-move:hover a .project-cover { filter: brightness(1); }
.project-move .img-move a .note { display: flex; justify-content: center; align-items: center; width: 100%; padding-top: 10px; font-size: 13px; }


/* sub-nav */
.sub-nav { display: flex; flex-wrap: wrap; padding: 0; justify-content: center;  }
.sub-nav h3 { flex: 1; }
.sub-nav .nav-select-box { max-width: 240px; flex: 1; display: flex; align-items: center; }
.sub-nav .nav-select-box select { width: 100%; flex: none; font-size: 16px; padding: 0.5em 1em; border-radius: 4px; color: #333333; box-shadow: 0 0 10px rgba( 0 0 0 / 0.05) inset; background-color: #ececec; text-align: center; border: 0; }

/** 聯絡我們 **/
.contact {  display: flex; flex-wrap: wrap; padding: 20px 0 70px 0;}
.contact .pro-sep { width: 350px; flex: none; margin-right: 25px; }
.contact .pro-content { flex: 1; }
.contact-process { margin: 20px 0; }
.google-map {  width: 100%; flex: none; height: 300px; margin-bottom: 30px;  }
.google-map iframe { width: 100%; height: 100%; }

.i-contact { display: flex; flex-wrap: wrap; padding: 0 15%; }
.i-contact-info { flex: 1; }

.contact-info { flex: 1; margin-right: 15px; }

.cont-box { color: #555555; font-weight: 300;  line-height: 1.6em; }
.cont-box p { margin: 0 0 25px 0; line-height: 1.8em; text-align: justify; }
.cont-box p.no-indent { text-indent: 0; }
.cont-box a { color: #6f7d8d; word-break: break-all; }

.cont-box .pro-spe { width: 350px; flex: none; margin: 30px 15px 0 15px; }
.cont-box .pro-content { flex: 1; margin: 0 15px; }
.cont-box .pro-content img { margin-bottom: 10px; }

.cont-box h4 { font-size: 20px; font-weight: 300; margin: 0 0 10px 0; padding: 0; color: #333333; text-align: center; }
.contact-title { font-size: 18px; margin: 0 0 30px 0; padding: 0 0 10px 0;  color: #111111; font-weight: normal; position: relative; text-align: center; }
.contact-title:after { content: ''; width: 50px; height: 2px; background-color: #b3b3b3; position: absolute; bottom: 0px; left: calc(50% - 25px); }
.cont-box span { line-height: 1.6em; }


.cart-btn {  padding:10px 0; text-align:center; margin-top:15px; }
.contact-body { padding:0;}
.btn-send { font-size:13px;} 
.form-box input, .form-box img { vertical-align:middle;}
a.btn-send { background: #373737; padding: 7px  20px; text-align:center; font-size:13px; color:#fff; width:100px; margin:2px;}
a.btn-send:hover { background: #504b3d;}
a.btn-reset { background:#6c5418;  padding: 7px 20px; text-align:center; font-size:13px; color:#fff; width:100px; margin:2px;}
a.btn-reset:hover { background:#58430f;}
a.btn-send-over { background: #834c04; padding: 7px  20px; text-align:center; font-size:13px; color:#fff; width:100px; margin:2px; }
a.btn-send-over:hover { background: #673c03;}

.order-numb { color:#FF0004;}
.question-btn { padding: 20px 0;}
.question-btn a { display: block; width: 200px;  margin: 20px 0; color: #C9C9C9; padding: 5px 15px; margin: 0 auto; border: 1px #C9C9C9 solid; text-align: center;}
.question-btn:hover a { color:#767676; border: 1px #767676 solid;}





/** 最新消息 **/
.news-bg { background-size: cover;} 
.news ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;}
.news ul li { position: relative; width: 31.3333%; margin: 1%; flex: none; overflow: hidden; box-shadow: 0 0px 10px rgba( 0 0 0 / 0.05); transition: all 0.3s ease;}
.news ul li:hover {  box-shadow: 0 10px 15px rgba( 0 0 0 / 0.3); }
.news ul li .photo { width: 100%; height: auto; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: none; } 
.news ul li .photo a { display: block; width: 100%; height: 0; padding-bottom: 76%; }
.news ul li a { display: block;} 
.news ul li .pro-note { background-color: rgba(255 255 255 / 0.9); transition: all 0.3s ease 0s; display: flex; flex-wrap: wrap; transition: all 0.5s ease; padding-bottom: 30px; }
.news ul li:hover .pro-note { top: 0; height: 100%;} 
.news ul li .pro-note > div { padding: 10px 20px; position: relative; z-index: 10; width: 100%;}
.news ul li .pro-note h3 { display: block; width: 100%;color: #111111; font-size: 18px; font-weight: 300; margin: 0 0 5px 0; line-height: 1.4em; }
.news ul li div.time { font-size: 12px; flex: none; width: 100%;  color: #6d6d6d; padding: 15px 20px 0px 20px; }
.news ul li .pro-note p { width:100% ; padding: 0; margin: 0; color: #666666; font-size: 14px; font-weight: 300; display:block; }






/** 報章雜誌 **/
.report-bg { background-size: cover;} 
.report {  padding: 20px 0 70px 0; }
.report ul { margin: 0; padding: 0; list-style: none;}
.report ul li { position: relative;  margin:0;  margin-bottom: 20px; width: 100%;}
.report .cover img { width: 100%; height: auto; }
.report ul li a {  padding: 10px; display: flex; flex-wrap: wrap; }
.report ul li a:hover { background: rgba(244,244,244,1.00); padding: 10px; }
.report ul li .photo { width: 350px; flex: none; }
.report ul li .photo img { width: 100%; height: auto;}
.report .pro-note { color: #111111;  flex: 1;  padding-left: 20px; }
.report .pro-note h3 { font-weight: normal; margin:0 0 5px 0; font-size: 18px; font-weight: 700; }
.report .pro-note .time { color: #A8A493;}
.report .pro-note p { color:#575757;}
.report .pro-note .more { float: right; font-size: 12px; line-height: 1.2em; color:#C8C8C8; padding: 3px 7px; border: 1px #C8C8C8 solid;}
.report-de-box h3.de-title { margin: 10px 0 0px 0; font-size: 24px; font-weight: 300; color: #333333; line-height: 1.6em;}
.report-de-box .de-time { font-size: 16px; color: #6a7a8a; margin: 15px 0;}
.report-de-box .de-time:before { content: ''; display: inline-block; width: 30px; height: 1px; background-color: #c4c4c4; margin-right: 10px; vertical-align: middle;  }





/** 關於我們 **/
.about-bg { background: url(../images/banner004.jpg); background-size: cover;} 
.about { display:flex;  }
.about .about-part1 { display: flex; flex-wrap: wrap; }
.about-logo {  width: 60px; flex: none; display: flex; align-items: center; justify-content: center; }
.about-abuot-cont { width: 100%; flex: none;  margin-top: 10px;}
.about-abuot-cont img { margin: 10px 0; }
.left-photo {  text-align: center; padding: 50px 0; vertical-align: middle;}
.about-text { color:#555555; position: relative; margin: 0;}
.about-img { width:40%; height: auto; padding: 50px 0;}
.cont-title { font-size: 20px; line-height: 1.5em; font-weight: normal; margin-top: 0; padding-bottom: 10px; color: #000000; border-bottom: 1px #a5a5a5 dotted; text-align: center;}
.about .cont-box img { max-width: 100%; height: auto;  }



/* bookmark */
.bookmark { text-align:center;  padding:15px 0; margin:15px 0 5px 0; }
.bookmark>span { font-size:16px; color:#333333; display:inline-block;}
.bookmark a { font-size:16px; display:inline-block; border:0; padding:5px 15px; color: #333333; margin:5px; border-radius: 2px; }
.bookmark a:hover { background: #e6e6e6;}
.bookmark select { background:#ffffff; border:1px #a59187 solid; padding:5px 15px; font-size: 16px; color: #81795A; margin:5px;}
.bookmark .portal-pages { text-align:center; margin-top:10px;}
.bookmark .portal-pages span { display:inline-block;  color:#000000; font-size:14px; padding-top:10px; border-top:1px #a59187 solid; min-width:150px;  }

/*** 底部 ***/
footer { background: rgba(0, 0, 0, 0.05); display: flex; flex-wrap: wrap; padding: 30px 10px;  font-size: 12px; font-weight: 300; color: #ffffff;  }
footer .foot-logo { filter: grayscale(1); max-width: 200px; flex: none; padding: 20px 40px; }
footer .foot-logo img { width: 100%; height: auto; }
footer .foot-data { flex: 1; font-size: 14px; line-height: 1.4em; padding: 20px 10px; color: #666666;}
footer .foot-data .foot-service-info { font-size: 1.2em; color: #000000; padding-bottom: 10px; }
footer .foot-info { letter-spacing: 1px; color: #333; padding: 20px 0; text-align: right;} 
footer .foot-info span { padding: 0; display: inline-block; vertical-align: middle; margin: 0 5px 0 0; }
footer .foot-info span a { color: #333333; display: block; font-size: 18px; text-align: center;}
footer .foot-info span a i { display: block; margin-top: 0px;}
footer .foot-copyright { color: #656565; text-align: center;  font-size: 14px; font-weight: 300; } 
footer .foot-copyright a { color: #919191; }
footer .foot-copyright a:hover { color: #ffffff; }

.youtube-box { width: 100%; position: relative; }
.youtube-box:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 56%; }
.youtube-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.bi { display: inline-block; vertical-align: middle; width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.bi.bi-arrow-left-short { margin-right: 5px; margin-top: -5px; }
.bi.bi-arrow-right-short { margin-left: 5px; margin-top: -5px; }



  /* .swiper 套件調整 */

  .banner-box.mb {   display: none; }

  .swiper { width: 100%; }
  .swiper-wrapper { height: auto !important; margin: 0; padding: 0; }  
  .swiper-slide {  text-align: center;  font-size: 18px;  }
  .swiper-slide .swiper-content {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; text-shadow: 0 0 5px rgba( 0 0 0 / 0.1); display: flex; justify-content: center; align-items: center;}

  .swiper-slide .swiper-content .swiper-banner-box { margin-left: 15%; margin-right: 50%; max-height: 650px;  text-align: left; text-shadow: 0 0 5px rgba( 0 0 0 / 0.8); }
  .swiper-slide .swiper-content .swiper-banner-box .title { font-size: 48px; padding-bottom: 20px; line-height: 1.2em; background-color: rgba( 0 0 0 / 0.5); padding: 25px 25px 0px 25px; } 
  .swiper-slide .swiper-content .swiper-banner-box .subtitle { font-size: 18px; padding-bottom: 20px; background-color: rgba( 0 0 0 / 0.5); padding: 10px 25px; } 
  .swiper-slide .swiper-content .swiper-banner-box .text { font-size: 16px;  background-color: rgba( 0 0 0 / 0.5); padding: 10px 25px 25px 25px;} 
  .swiper-slide .swiper-content .swiper-banner-box .text p { margin-top: 0; }

  .swiper-slide img {  display: block;  width: 100%; height: auto;  object-fit: cover;}
  .swiper-button-prev.swiper-button-disabled, 
  .swiper-button-next.swiper-button-disabled {  pointer-events: all !important; }
  .swiper-pagination-bullet {
      width: 20px !important;
      height: 5px !important;
      border-radius: 99em !important;
      background-color: #272727 !important;
      box-shadow: 0 0 5px rgba(0, 0, 0, .3);
      transition: all 0.3s ease;
  }
  .swiper-button-prev, 
  .swiper-button-next { width: 40px !important; height: 40px !important; background-size: cover; color: #ffffff !important; text-shadow: 0 0 10px rgba(0, 0, 0, .1); font-family: bootstrap-icons; top: 42% !important; }
  .swiper-button-next:after {content: '' !important;  }
  .swiper-button-prev:after {content: '' !important;  }
  .swiper-button-next { background-image: url(../images/swipeNextArrow.png); right: 0px !important; }
  .swiper-button-prev {  background-image: url(../images/swipePrevArrow.png);  left: 0px !important; }


/* form */
.contact-form { padding: 20px; max-width: 480px; margin: 0 auto; }

.form .note { font-size:14px;  padding:0 0 10px 100px; position: relative; line-height: 1.2em;}
.form .note:before { content: '*'; display: inline-block; position: absolute; top: 3px; left: 85px;}

.form .form-lis {  display: flex;  flex-wrap: wrap; font-size:14px; line-height:1.2em; margin:0 0 15px 0; overflow: hidden;}
.form .form-lis .title { display:flex; align-items: center; font-size:16px; color:#000000; width:100px; flex: none; padding: 5px 0;}
.form .form-lis .data { background-color: transparent; display:block; padding: 5px; flex: 1; font-size:16px; color: #666; border: 0; border: 0; background-color: #fcfcfc; }
.form .form-lis input.data { background-color: transparent; flex: 1;  padding: 5px; max-width: calc(100% - 100px); font-size:16px; border:0; background-color: #fcfcfc; }
.form .form-lis textarea.data {   padding: 5px; width:100%; font-size:16px;  border:0;  background-color: #fcfcfc; }
.form .form-lis .code {   display:flex; padding:0; flex: 1; font-size:16px; color: #666;  background-color: #fcfcfc; }
.form .form-lis .code img.img-code { height:100%; width:auto; flex: none; margin-left: 10px;}
.form .form-lis .code input { flex: 1;}
.form .form-lis.check-lis { font-size: 16px; color: #949494; align-items: center; background-color: #f7f7f7;  padding: 5px; }
.form .form-lis.check-lis input.checkbox { width: 18px; height: 18px;  display: inline-block; vertical-align: middle; margin-right: 10px; }
.form.member { padding: 15px 20px;}
.form.member .form-lis .title { width: 120px; }
.form.member .form-lis input.data { max-width: calc(100% - 100px); }

.form.delivery-member { padding-left: 20px; }

.form.login { padding: 20px 0; max-width: 480px; margin: 0 auto; }
.form.login .form-lis .data,
.form.login .form-lis input.data, 
.form.login .form-lis textarea.data, 
.form.member .form-lis .data,
.form.member .form-lis input.data,
.form.member .form-lis textarea.data { border-bottom: 1px #b4d6e4 solid; }

.botton-m { display: flex; flex-wrap: wrap; justify-content: center; font-size:16px; margin-top:10px; padding:10px 0 20px 0; }
.botton-m a { display:block; color:#333333; border:0; font-size:16px; padding: 8px 15px; margin: 5px; }
.botton-m a:hover { background: #fafafa; }
.botton-m a:last-child { margin-right: 0; }





/* flex-box  */
.flex-box { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.flex-m-1 { flex: 1; margin: 15px; }
.flex-m-100 { width: calc(100% - 30px); flex: none; margin: 15px; }
.flex-m-50 { width: calc(50% - 30px); flex: none; margin: 15px; }