/* cynet.tw */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');
.Montserrat-fonts {font-family: 'Montserrat', sans-serif;}
button,input{cursor:pointer}
header { padding-top: 74px }

.owl-nav button {
    bottom: 45%;
    opacity: 0.5;
    width: 46px;
    height: 46px;
    z-index: 100;
    display: block;
    cursor: pointer;
    overflow: hidden;
    text-shadow: none;
    position: absolute;
    font-weight: normal;
    background: #ffffff;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}
.owl-nav:hover button{
    opacity: 0.8;
}
.owl-nav button.owl-prev {
    left: 1%;
}
.owl-nav button.owl-next {
    right: 1%;
}
.owl-nav button span {
    font-size: 36px;
	line-height: 46px;
	font-family: "Poppins", sans-serif;
}
.owl-dots {
    z-index: 101;
    position: absolute;
	bottom: 2%;
	width: 100%;
	text-align:center;
}
.owl-dots button {
    opacity: 0.8;
    width: 5%;
    height: 4px;
	margin: 0 3px;
}
#main .owl-dots {
	bottom: -30px;
}
#main {
	padding: 1.5em 0.5em;
	position: relative;
}
#main-two {
	padding: 1.5em 0;
	position: relative;
}

/*---------- 首頁 ----------*/
.owl-header .owl-dots button { background:#fff!important }
.owl-dots button.active { opacity:1!important }

.home-0 { padding: 0; }
.home-1 , .works { padding: 0 3px 30px 3px; }
.home-2 { padding: 30px 18px 65px 18px; }
.home-2 p span { font-size: 110%; font-weight:700; color:rgba(0,133,178,1) }
.home-3 { padding: 50px 18px; background: rgb(58,58,58);}
.home-3 p span { font-size: 120%; font-weight:700; }
.home-3 p , .home-3 ul li { color: rgb(255, 255, 255);}
.home-3 h2 , .home-3 h3 { color: rgb(255, 255, 255)!important;}
.home-cate { padding: 30px 3px; }

/* Slogan */

.slogan h3 { color: #fff }

.slogan-content { padding: 35px 0 }

h2.slogan-title {
	font-size: 24px;
    display: inline-block;
    margin: 10px 0;
    color: #fff!important;
	font-weight: 600;
}
h1.slogan-title {
	font-size: 30px;
    display: inline-block;
    margin: 10px 0;
    color: #fff!important;
}
.btn-special {
    font-size: 13px;
	background-color: #fafafa;
	color: rgba(255, 141, 0, 1);
    border-radius: 0px !important;
    padding: 13px 20px;
	margin: 6px 3px 3px 3px;
    text-transform: uppercase;
    outline: none;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.pro-more {
    font-size: 13px;
	background-color: #fafafa;
	border:1px solid rgba(255, 141, 0, 1);
	color: rgba(255, 141, 0, 1);
    border-radius: 0px !important;
    padding: 15px 30px;
    text-transform: uppercase;
    outline: none;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.pattern-overlay , .pattern-overlay-2 { 
   padding: 30px 20px;
   background-color:rgb(89,171,2);
}
.pattern-overlay-work { 
   padding: 30px 20px;
   background-color:rgba(0,133,178,1);
}
.pattern-overlay-more { 
   padding: 30px 20px;
   background-color:#eee;
}
.pattern-overlay p , .pattern-overlay-2 p , .pattern-overlay-work p { color: #fff }
.list-unstyled li.one a.one-sub , .list-unstyled li.two a , .list-unstyled li.three a , .list-unstyled li.four a {
  background:rgba(89,171,2,0.1);
  border-left:5px solid rgba(89,171,2,1);
}

#pageSubmenu li a , #pageSubmenu2 li a { 
   background-color:rgba(0,133,178,0.1);
   border-left:5px solid rgba(0,133,178,1);
}

/* main-content */

.main-content { padding: 15px 3px; }

div.content-box { clear: both }

.main-content h3 {
    color: #283043;
    line-height: 32px;
    margin: 0 0 5px;
}

/* .main-content p,
.content p { text-align: left } */

.author-content,
div.content-box.big,
#cn-tabs .service,
.comment-des,
.contact-box {
    border-style: solid;
    border-width: 1px;
    border-color: #d5d5d5;
}

.btn-more { background:rgba(0,133,178,0.9); color:#fff; font-weight:600; display:inline-block; font-size:16px; }
.btn-more:hover , .btn-more:focus { background:rgba(0,133,178,0.6); color:#fff; font-weight:600; }
.btn-green { background:rgba(255, 141, 0, 0.9)!important; }
.btn-green:hover , .btn-green:focus { background:rgba(255, 141, 0, 0.6)!important; }
.btn-good { background:rgba(255, 0, 127, 0.9)!important; }
.btn-good:hover , .btn-good:focus { background:rgba(255, 0, 127, 0.6)!important; }

footer .social li:hover a i { color: #fff }

#footer a { color: #fff; }

.footer-fa { font-weight:700; font-size:150%; }
.footer-fa i { margin-right: 5px; }

.blog img { color:#fff;height:15px;margin-bottom:4px;margin-left:2px;}

/*---------- contact.html ----------*/

.reply label { margin: 0 0 4px }
.reply label span { color: #e24747 }
.reply input , .reply select { margin: 0 0 20px; font-size:0.9rem; }
.reply textarea {
	font-size:0.9rem!important;
    min-width: 97.5%;
    /* min-height: 180px; */
    -webkit-resize: vertical;
    -moz-resize: vertical;
    -webkit-resize: vertical;
    -moz-resize: vertical;
    resize: vertical;
    margin: 0 0 18px;
}
.w100 { width:100%!important }
#submit_btn  { font-size:15px!important }
.btn-color {
    color: #fff !important;
	background-color: rgb(0,133,178) !important;
	font-weight: 600;
}
.btn-color:hover {
    color: #fff !important;
	background-color: rgb(255,102,0) !important;
}

.pro3-img img { margin-top: 20px; margin-bottom: 20px; }

/*---------- SLIDE CAPTION ----------*/
.slide_style_left {
    text-align: left !important;
}
.slide_style_right {
    text-align: right !important;
}
.slide_style_center {
    text-align: center !important;
}

.slide-text {
    position: absolute;
    text-align: left;
}
.slide-bg {
    background:rgba(0,133,178,0.7);
	padding: 16px;
	border-radius: 3px;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.51);
}
.slide-bg2 {
    background:rgba(0,178,0,0.7);
	padding: 16px;
	border-radius: 3px;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.51);
}
.slide-text small {
    color: #ffffff;
}
.slide-text a {
    color: #ffffff;
}
.slide-bg > h1 , .slide-bg2 > h1 {
    padding: 0;
    color: #ffffff;
    letter-spacing: 1px;
    display: block;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.41);
}
.slide-bg > h2 {
    padding: 0;
    color: #ffffff;
    letter-spacing: 1px;
    display: block;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.31);
}
.slide-bg2 > h2 {
    padding: 0;
    color: #ffffff;
    font-size: 30px;
    font-style: normal;
    line-height: 36px;
    letter-spacing: 1px;
    display: block;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.slide-text p {
    padding: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    letter-spacing: 1px;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.slide-text > a.btn-default{
    color: #000;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    margin-right: 10px;
    text-align: center;
    padding: 17px 30px;
    white-space: nowrap;
    letter-spacing: 1px;
    display: inline-block;
    border:2px solid #fff;
    text-transform: uppercase;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a.btn-primary{
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
	margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    padding: 22px 46px;
    white-space: nowrap;
    letter-spacing: 1px;
    background: rgba(224,33,38,1);
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border:2px solid #fff;
	border-radius:36px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a:hover,
.slide-text > a:active {
    color: #ffffff;
    background: rgba(255,128,0,1);
	border:2px solid #fff;
    -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

@media (min-width:1200px) {
    .owl-title-one h1 {
		font-size: 46px;
		font-weight: 600;
		line-height: 60px;
		margin-bottom: 10px;
	}
	.owl-title-one h2 {
		font-size: 22px;
		font-weight: 300;
		line-height: 32px;
		margin-bottom: 12px;
	}
	.owl-title-two h1 {
		font-size: 46px;
		font-weight: 600;
		line-height: 60px;
		margin-bottom: 10px;
	}
	.owl-title-two h2 {
		font-size: 22px;
		font-weight: 300;
		line-height: 32px;
		margin-bottom: 12px;
	}
}
@media (min-width:768px) and (max-width:1199px) {
    .owl-title-one h1 {
		font-size: 40px;
		font-weight: 600;
		line-height: 56px;
		margin-bottom: 10px;
	}
	.owl-title-one h2 {
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
	}
	.owl-title-two h1 {
		font-size: 40px;
		font-weight: 600;
		line-height: 56px;
		margin-bottom: 10px;
	}
	.owl-title-two h2 {
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
	}
}
@media (min-width:768px) {
    .owl-slide-one {
     max-width:340px;left:6%;bottom:10%;
    }
	.owl-slide-two {
	 max-width:340px;right:15%;bottom:10%;
    }
	.owl-slide-three {
     max-width:340px;left:6%;top:26%;
    }
	.owl-slide-four {
     max-width:320px;right:12%;top:6%;
    }
}
@media (max-width:767px) {
	.home-1 {padding-left:0!important;padding-right:0!important;}
	.slide-bg {
		padding: 20px 5px;
	}
	.owl-slide-one {
	 right:1%;
	 top:56%;
	 width:290px;
    }
	.owl-slide-two {
	 right:1%;
	 top:56%;
	 width:290px;
    }
	.owl-slide-three {
	 left:1%;
	 top:13%;
    }
	.owl-slide-four {
     bottom:6%;
    }

	.owl-title-one h1 {
		font-size: 30px;
		font-weight: 600;
		line-height: 42px;
		margin-bottom: 5px;
	}
	.owl-title-one h2 {
		font-size: 17px;
		font-weight: 300;
		line-height: 26px;
	}
	.owl-title-two h1 {
		font-size: 30px;
		font-weight: 600;
		line-height: 42px;
		margin-bottom: 5px;
	}
	.owl-title-two h2 {
		font-size: 20px;
		font-weight: 600;
		line-height: 26px;
	}

	.slide-bg > p {
     font-size: 16px;
    }
	.slide-bg2 > p {
     font-size: 16px;
    }
	.owl-header .owl-nav button.owl-next, .owl-header .owl-nav button.owl-prev {
     display:none;
    }
}

/*
* souvenir
*/

.owl-header .owl-nav button { background: #fff!important;}

/* 電腦右側選單 */
.cell-me a { background:rgba(255,102,0,0.8);color:#fff;position:fixed;z-index:99999;right:8px;bottom:8px;height:46px;width:46px;border-radius:50%;text-align:center;}
.cell-me i { font-size:1.8em;line-height:46px;}
.cell-me a:hover { background:rgba(255,102,0,0.9);color:#fff;}

.cell-me2 img { height:23px;}
.cell-me2 a { position:fixed;z-index:99998;right:7px;bottom:152px;background:rgba(255,0,0,0.8);height:46px;width:46px;line-height:46px;border-radius:50%;text-align:center;}
.cell-me2 img:hover { opacity:0.9;}

.cell-line img { height:49px;width:49px;}
.cell-line a { position:fixed;z-index:99998;right:7px;bottom:57px;}
.cell-line img:hover { opacity:0.9;}

.cell-fb a { background:rgba(66,103,178,0.8);color:#fff;position:fixed;z-index:99999;right:8px;bottom:108px;height:46px;width:46px;border-radius:50%;text-align:center;}
.cell-fb i { font-size:1.8em;line-height:46px;}
.cell-fb a:hover { background:rgba(66,103,178,0.9);color:#fff;}

.link-youtube a { background:rgba(255,0,0,0.8);color:#fff;position:fixed;z-index:99999;right:8px;bottom:159px;height:46px;width:46px;border-radius:50%;text-align:center;}
.link-youtube i { font-size:1.8em;line-height:46px;}
.link-youtube a:hover { background:rgba(255,0,0,0.9);color:#fff;}

/* 手機下方選單 */
.footer-phone {
	position:fixed;
	bottom:0;
	z-index:119;
	width: 100%;
}
.footer-phone ul li {
	width: 25%;
	float: left;
	border-top:1px solid rgba(228,228,228,1);
}
.footer-phone ul li a {
	font-weight: 600;
	text-align: center;
	padding:10px 10px 8px 10px;
	display:block;
	font-size:14px;
}

.footer-phone i { height:28px;font-size:28px; }
.phone-me , .fb-me { background:rgba(255,255,255,0.9);}
.line-me , .youtube-me { background:rgba(235,235,235,0.9);}
.phone-me a , .line-me a , .fb-me a , .youtube-me a { color:#333!important;}
.fb-me i {color:rgb(66,103,178)}
.line-me i {color:rgb(89,171,2)}
.phone-me i {color:rgb(255,102,0)}
.youtube-me i {color:rgb(255,0,0)}

.line-phone { background:rgba(0,185,0,0.8);}
.line-phone:hover { background:rgba(0,185,0,0.9);}

.cell-phone { background:rgba(255,0,0,0.8);}
.cell-phone:hover { background:rgba(255,0,0,0.9);}

.fb-phone { background:rgba(66,103,178,0.8);}
.fb-phone:hover { background:rgba(66,103,178,0.9);}

.footer-phone ul li a , .footer-phone ul li a:active { color:#fff;}

.tel{ font-size:22px;}
.bg-gray {background-color:#F8F8F8;}
.bg-gray2 {background-color:#eee;}
.bg-white {background-color:rgba(255,255,255,0.8)!important;}
.no-padding {padding-left:0!important;padding-right:0!important;}
@media (max-width:767px){
	.breadcrumb-wrapper { background: url(../img/owl/earth_1000.jpg) no-repeat;}
	.breadcrumb-wrapper-about {
      background: url(../img/owl/test2_1000.jpg) no-repeat;
      margin: 0 auto;
      background-position: center center;
      background-size: cover;
	  background-attachment: fixed;
	  width:100%;
}
}
@media (min-width:768px){
	.breadcrumb-wrapper { background: url(../img/owl/earth_1000.jpg) no-repeat;}
	.breadcrumb-wrapper-about {
      background: url(../img/owl/test2_1920.jpg) no-repeat;
      margin: 0 auto;
      background-position: center center;
      background-size: cover;
	  background-attachment: fixed;
	  width:100%;
}
}
.breadcrumb-wrapper h2 , .breadcrumb-wrapper-about h2 {
    display: inline-block;
    padding: 18px 46px;
    border: 2px solid rgba(255,255,255,1);
    border-radius: 3px;
    color: rgba(51,51,51,1);
	background-color: rgba(238,238,238,0.7);
    font-size: 22px;
	font-weight:700;
	margin-top:18vh;
}
.iOS{
	overflow-x: hidden;
	overflow: auto;
	width: 100%;
	height:30vh;
}
.breadcrumb-wrapper {
   background: url(../img/owl/dh_img.jpg) no-repeat;
   background-size: 100%;
	 background-attachment: fixed;
	 height:30vh;
}

@supports (-webkit-overflow-scrolling: touch) and (-webkit-touch-callout: none) {
.breadcrumb-wrapper , .breadcrumb-wrapper-about {
     background-attachment: scroll!important;
}
}

.fancybox-button--play { display:none!important}

/* ==========================================================================
Footer
========================================================================== */
footer {
	padding-top: 45px;
	padding-bottom: 45px;
	background:rgb(89,171,2);
	font-size:16px;
}
footer p ,footer a {color: rgba(255,255,255,1)!important;}
footer a:hover {color: rgba(255,255,255,1)!important;}

@media (min-width:992px){
	footer .col-lg-6:nth-child(1) {
       padding-left:3.5em;
	   padding-right:3em;
    }
    footer .col-lg-6:nth-child(2) {
       padding-left:2em;
	   padding-right:1em;
    }
}

footer i {
    margin-right:6px;
}
footer i.fa-mobile-alt {
    margin-left:4px;
}
footer i.fa-map-marker-alt {
    margin-left:3px;
}
.copy {
	background-color:rgba(89,171,2,0.9);
	padding: 5px 0;
	color: #fff;
	font-size: 0.85em;
}
.copy a {
	color: #fff
}
.copy p {
	margin-top:0.8rem;
}
.footer-info p {
	font-size:16px;
}
.footer-info .tel {
	font-size:20px;
	margin-top:0.3em;
}
.footer-info .tel a {
	font-size:28px;
	line-height:32px;
}
.footer-info .address {
	font-size:22px;
	margin-top:0.5rem;
	margin-bottom:1rem;
	padding-bottom:9px;
	border-bottom:2px solid #fff;
}
.footer-info .address strong {font-size:120%; padding-bottom:8px;}
.footer-info hr {border-top:1px solid #fff!important}
hr {border-top:1px solid #ddd!important}

@media screen and (max-width:991px){
	.footer-menu li{border-bottom:dashed 0px #c7cacc!important;padding:20px 0 0 5px!important;}
	.footer-info {padding-top:20px!important;}
}
@media screen and (max-width:767px){
	footer {
		padding-top:10px;
		padding-bottom:30px;
	}
}

/* ==========================================================================
側邊選單
========================================================================== */
.col-meun {margin-top:75px; margin-bottom:10px;}
.col-meun a {font-size:1.3em; font-weight:600; line-height:1; display:block; color:#fff; padding:16px 0 16px 8px; border-bottom:1px solid #fff;}
.col-meun .col-left:hover , .col-meun .col-sub:hover , .col-here {background-color:rgba(0,0,0,0.3)}
.col-meun a:hover span:nth-child(1) , .col-here span:nth-child(1) {transform: scale(1.3);}
.col-meun .col-left , .col-meun .col-sub { width:100%; padding:0 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) }
.col-meun .col-left span { display:inline-block; font-size:105%;}
.col-meun .col-left span:nth-child(1) { font-size:250%;}
.col-meun .col-left span:nth-child(2) {	text-align:center;padding-left:15px;}
.col-meun .col-left small , .col-meun .col-sub small { font-size:65%;}

.col-meun .col-sub a {padding-left:3px;}
.col-meun .col-link {background-color:rgba(255,255,255,1);margin:15px 8px 5px 8px;padding:3px;width:100%;}
.col-meun .col-link a {color:#333;border:3px solid #333; padding: 16px 0 16px 20px;}
.col-meun .col-link:hover {background-color:rgba(255,255,255,0.9)}
	
/* =============== */

.modal-title {
	color:rgba(0,105,140,1);
	font-size: 1.2rem;
	font-weight:700;
}
.modal-form {
	padding:5px 8px;margin:5px 0 20px;background-color:rgba(89,171,2,1);color:#fff;border-radius:5px;font-size:1.1rem;font-weight:700;
}
.modal-form small {
	font-weight:600!important;
}
#myModal button.close {
    font-size: 2.2rem;
}

.text-red {color:#F00; }

.slogan {
	background:rgba(0,105,140,1);
	color:#fff;
	border-radius:5px;
	float:left;
	margin-top:15px;
	margin-left:10px;
	padding:5px 12px;
	font-size:130%;
	font-weight:700;
}
.top-phone {
	float:right;
	margin-top:15px;
	padding:5px 12px;
}
.top-phone a {
	color:#333;
	font-size:130%;
	font-weight:700;
}

#home-contact {
		padding:0 3px 30px 3px;
	}
@media screen and (max-width: 1280px) {
	/* Header */
	#header {
		background-attachment: scroll,scroll,scroll;
		background-image: url("../img/header/1600.svg"), url("../img/header/overlay.png"), url("../img/header/web-design.jpg");
		background-size: 1600px 230px,auto,cover;
		padding: 6em 0 12em 0;
	}

	#header h1 {
		font-size: 2em;
	}

	#header p {
		font-size: 1.15em;
	}
	/* Footer */
	#footer {
		background-image: url("../img/header/bottom-1600.svg");
		background-size: 1600px 230px;
		margin-top: -170px;
		padding: calc(230px + 4em) 0 4em 0;
	}
}

@media screen and (max-width: 736px) {
    /* Header */
	#header {
		background-image: url("../img/header/1280.svg"), url("../img/header/overlay.png"), url("../img/header/web-design.jpg");
		background-size: 1280px 184px,auto,cover;
		padding: 3em 0 7em 0;
	}

	#header .logo {
		font-size: 1.5em;
	}

	#header h1 {
		font-size: 1.25em;
	}

	#header p {
		font-size: 1em;
	}
	/* Footer */
	#footer {
		background-image: url("../img/header/bottom-1280.svg");
		background-size: 1280px 184px;
		margin-top: -125px;
		padding: calc(184px + 2em) 0 3em 0;
	}			
}

.overlay {
    position: fixed;
	top:0;
    width: 100vw;
    height: 100vh;
    background:rgba(0, 0, 0, 0.5);
    z-index: 298;
    display: none;
}
.overlay.active {
    display: block !important;
}

.top-phone {
	float:right;
	margin-top:15px;
	padding:8px;
}
.top-phone a {
	color:#F00;
	font-size:125%;
	font-weight:700;
	text-align: center;
	display: inline-block;
}
.phone-style {
	margin-top:2px!important;
}
.phone-style span {
	font-size:130%;
	line-height: 1;
}

@media (max-width:991px) {
    .top-phone {
		margin-right:45px;
		font-size: 88%;
	}
}

.noclick {
    pointer-events: none;
}

.main-top h1 {
	display: inline-block;
	background-color: #fff;
	padding: 0 10px;
	font-size: 36px;
	color: rgb(89,171,2);
	font-weight: 700;
}
.main-top h2 {
    border: 1px solid #333;
	border-radius: 26px;
	padding: 30px 20px 20px 20px;
	font-size: 19px;
	font-weight: 700;
}
.main-top .top1 {
	text-align: center;
	position: relative;
	top:30px
}