@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Chonburi');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&subset=chinese-traditional,japanese');

/*header*/
.topphone{display:inline-block; background:#000; color:#fff; border-radius:2em; padding:0.2em 1em; animation-name:action4; animation-duration:2s; animation-iteration-count: infinite;}
#header{padding:3em 0 1.5em 0; transition:.3s;}
#header.top{position:fixed; top:0; padding:1.2em 0 0.1em 0; z-index:200; background:#fff; transition:.3s; box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.nav a{font-size:18px; color:#333333;}
.nav span{color:#CCC; display:inline-block;}
/*fefaultimg*/
#defaultimg{color:#fff; line-height:200%; font-size:20px; transition:.5s; animation-fill-mode: forwards; animation-name: imganime; animation-duration: 1s; animation-timing-function: ease-out; text-shadow:0 0 10px rgba(0,0,0,0.8);}
#defaultimg h2{font-size:200%;}
#defaultimg .page{height:70vh; border-left:2em solid #fff; border-right:2em solid #fff; transition:.5s; }
#defaultimg .page.noborder{border-left:none; border-right:none; transition:.5s;}
#defaultimg .page div{position:absolute; text-align:right;}
#defaultimg .page div.center{width:94%; text-align:center; left:3%; top:10%;}
#defaultimg .page div.center h2{width:5.5em; height:5.5em; background:#3fb2be; display:inline-block; border-radius:100%; padding-top:1.5em; border:1px dashed #fff; margin-bottom:0;  animation-name:h2anime; animation-duration:.5s; animation-timing-function: ease-out; animation-delay:.5s;  opacity:0; animation-fill-mode: forwards;}
#defaultimg .page .tel a{background:rgba(195,13,35,0.9); color:#fff; padding:1em; display:inline-block;}

@keyframes imganime {
  0% { opacity:0; border-left:50vw solid #fff; border-right:50vw solid #fff;}
  100% { opacity:1; border-left:0 solid #fff; border-right:0 solid #fff; width:100%;}
}
@keyframes h2anime {
  0% {opacity:0; transform:rotateZ(180deg);}
  100% {opacity:1;  transform:rotateZ(0deg);}
}
/*default use*/
.d1{text-align:center; padding:0 0 8em 0; background:url(images/bg-ball2.png); background-position:0; background-attachment:fixed; transition:.3s;}
.d1.scroll{backgound-position:100px;  transition:.3s;}
.d1 .tit, .d3 .tit, .d4 .tit, .normal .tit, .plans .tit{font-size:48px; color:#c30d23; font-family: 'Noto Sans TC', sans-serif; font-weight:300; text-align:center; margin-bottom:0.5em; line-height:1.3em;}
.d1 .tit span, .d3 .tit span, .d4 .tit span, .normal .tit span{display:block; font-family: 'Quicksand', sans-serif; color:#ccc; font-size:18px;}
.subtit{color:#000; font-size:26px; font-weight:normal; line-height:1.5em; position:relative; padding-left:0.5em; padding-right:0.5em; display:inline-block;}
.subtit::before{content:""; width:0.5em; height:110%; position:absolute; left:0; top:0; border-top:1px solid #000; border-left:1px solid #000; border-bottom:1px solid #000;}
.subtit::after{content:""; width:0.5em; height:110%; position:absolute; right:0; top:0; border-top:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000;}
.subtit.color{color:#2fbecf; font-size:28px; font-weight:bold; line-height:1.5em; position:relative; padding-left:0.5em; padding-right:0.5em; display:inline-block;}
.subtit.color::before{content:""; width:0.5em; height:110%; position:absolute; left:0; top:0; border-top:1px solid #999; border-left:1px solid #999; border-bottom:1px solid #999;}
.subtit.color::after{content:""; width:0.5em; height:110%; position:absolute; right:0; top:0; border-top:1px solid #999; border-right:1px solid #999; border-bottom:1px solid #999;}

.d1 .page p{padding:1em 2em; text-align:left; color:#666;}
.d2{text-align:center; background:#efefef; padding:0 0 8em 0;}
.d2 .col-3{padding:1em 1em;}
.d2 .frm{background:#595e64; color:#fff; cursor:pointer;}

.d2 h4.subject{display:block; background:#30363d; margin:-3em 0 0 0; padding:1.5em 0; border-bottom:3px solid #fff; transition:.3s;}
.d2 h4.subject mark{font-size:20px; text-align:center; display:block; background:none; color:#fff;}
.d2 .frm:hover h4.subject{background:#cf602f;}
.d2 h4.subject img{margin-top:-6em;}
.d2 a.more{width:3em; height:3em; color:#cf602f; background:#30363d; display:inline-block; text-align:center; border-radius:100%; padding-top:1em; margin-top:-4em;}
.d2 p{padding:1em 3em; line-height:180%; text-align:left;}
.d2 a.btn{border-radius:0.5em; background:#cf602f; color:#fff; padding:0.3em; display:block; text-align:center;}
.d2 a.btn span{font-size:200%;}
.d2 .frm:hover a.btn{background:#3fb2be;}
.d3{text-align:center; background:linear-gradient(#fff 80%,#ccc);}
.d3 .tit{margin-top:-0.55em;}
.d3 .tit span::before{content:"our works"; width:6em; height:6em; background:linear-gradient(#333 50%,rgba(0,0,0,0) 50%); display:inline-block; position:absolute; border-radius:100%; left:50%; transform:translate(-50%,-1.5em); z-index:0; padding-top:0em;}
.d3 .col-3{padding:1em;}
.d3 .frm{overflow:hidden; position:relative; cursor:pointer; transition:.5s;}
.d3 .col-3 .mask{position:absolute; width:100%; height:100%; background:#c30d23; color:#fff; transition:.3s; opacity:0; padding:1em 0 1em 1em; text-align:left;}
.d3 .col-3 .mask h4{font-size:20px; font-weight:normal; font-family:'Noto Sans TC', sans-serif; border-bottom:1px solid #fff;  transition:.5s; transform:translateX(5em); margin-top:0;}
.d3 .col-3 .mask h4 i{font-size:14px; margin:1em;}
.d3 .frm:hover{box-shadow:0 5px 25px rgba(0,0,0,0.3);}
.d3 .frm:hover .mask{opacity:1;}
.d3 .frm:hover h4{transform:translateX(0);}
.d3 a.more{background:#cf602f; color:#fff; display:inline-block; padding:0.8em 3em; font-size:26px; position:relative;}
.d3 a.more::before{content:""; width:104%; height:104%; border:1px solid #cf602f; display:inline-block; position:absolute; top:4%; left:2%; transition:.3s;}
.d3 a.more:hover::before{content:""; width:104%; height:106%; border:1px solid #c30d23; display:inline-block; position:absolute; top:-3px; left:-2%;}
.d3 a.more:hover{background:#c30d23;}
.d4{background:url(images/d4-bg.jpg) no-repeat center; background-attachment:fixed; padding:2em 0;}
.d4 .col-9{background:rgba(0,0,0,0.7); padding:1em 1em 1em 3em; color:#fff;}
.d4 .tit{margin-bottom:0; margin-top:0;}
.d4 .col-6{padding:1em;}
.d4 a.btn{background:#cf602f; border:none; padding:0.8em 2em;}
.d4 a.btn:hover{background:#c30d23;}
.d4 .msg{padding:0.5em 0;}
.d4 .msg h4{margin:0;}
.d4 section{width:calc(100% - 85px); float:right; line-height:160%;}
.d4 img{width:80px; height:auto; float:left;}
.d4 a{color:#cf602f;}
/*plans*/
.plans{padding:40px 0 100px 0; text-align: center; background:#c30d23;}
.plans .tit{color:#fff;}
.plans .col-3{padding:1em 1em;}
.plans .frm{border-radius:1em; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.2); padding:1em .3em;}
.plans .frm{text-align:center;}
.plans mark{background:none; color:#cf602f;}
.plans .btn{color:#fff;}
/*gallery*/
.gallery{padding-bottom:4em; padding-top:3em;}
.gallery .col-3{padding:0.5em 1em;}
.gallery .col-3 .frm{padding:0.5em; overflow:hidden; cursor:pointer;}
.gallery .col-3 .frm > div{overflow:hidden; line-height:0; margin:0; background:#000;}
.gallery .frm img{transition:.5s; }
.gallery .frm h4{font-size:20px; font-weight:normal; margin:0 0 0 10px; padding:1em 0.5em 1em 0.5em; color:#666; position:relative;  transition:.3s;}
.gallery .frm h4 i{font-size:14px; color:#CCC; margin-left:0.5em;}
.gallery .frm h4::before{content:""; width:8px; height:8px; background:#ccc; display:inline-block; transition:.5s; position:absolute; left:-10px; top:0;}
.gallery .frm:hover{box-shadow:0 10px 20px rgba(0,0,0,0.3);}
.gallery .frm:hover h4::before{width:8px; display:inline-block; transition:.5s; background:#3fb2be; height:100%;}
.gallery .frm:hover h4{background:#3fb2be; color:#fff; padding:1em 0.5em 1em 0.3em;}
.gallery .frm:hover img{transform:scale(1.1,1.1);}
/*normal contact*/
.normal .contact{padding:1em;}
.normal .contact > div{background:#efefef; padding:2em;}
.normal, .gallery{background:linear-gradient(#fff, #efefef) ;}
.normal::before{content:""; width:100%; height:100%; background:url(images/bg-ball2.png) no-repeat bottom center; background-attachment:fixed; position:absolute;}
.advantage{list-style:none; margin:00; padding:0; text-align:center;}
.advantage li{height:auto; display:inline-block; margin:0; padding:1em; float:left; font-weight:bold; font-size:18px; color:#2C383A;}
.advantage li span{font-size:16px;}
.advantage li p{text-align:left; font-weight:normal; font-size:16px; color:#666;}
.item{padding:8px; background:#efefef; color:#333; margin:1em 0; text-align:left;}
.item > div{height:auto; padding:1em 0.3em; border:.5px solid #efefef; background:#fff; font-weight:bold; color:#444F55;}
.item > div > i{color:#C00; font-size:24px; margin-right:0.5em;}
.item .col-7{font-weight:normal; font-size:16px; color:#369; text-align:center;}
.how .col-12 p{border-radius:1em; padding:0.8em 1.5em; background:#666; color:#fff; display:inline-block; box-shadow:0 5px 15px rgba(0,0,0,0.6);}
.how .col-12 p::before{content:""; width:10px; height:10px; display:inline-block; background:#fff; border-radius:100%; border:3px solid #666; margin-left:-2em;}
.notice{padding:2em 0;}
.notice .col-12{margin:0.5em 0; border-radius:0.5em; overflow:hidden;}
.notice .col-9{background:rgba(255,255,255,0.6);}
.notice .col-3{text-align:center; color:#fff; font-size:22px; font-weight:500; font-family:'Noto Sans TC', sans-serif; line-height:2em;}
.notice ul{list-style:none; margin:0; padding:0;}
.notice ul li{margin:0.1em 0; padding:0.2em 1em; border-bottom:1px dotted #fff;}
.notice ul li::before{content:""; width:10px; height:10px; display:inline-block; background:#fff; border-radius:100%; border:3px solid #C00; margin-right:1em; }
/*service*/
.service{background:#333; padding:2em; color:#fff;}
.service a.more{color:#fff; background:#C00; padding:1em 2em; display:inline-block;}
.service a.more:hover{background:#F60;}
.service a.more2{color:#CCC; padding:0.5em 2em; display:inline-block; border:1px solid #CCC;}
.service a.more2:hover{ color:#F90; border:1px solid #F90;}
/*process*/
.process h4{width:6em; height:6em; border-radius:99em; display:inline-block; font-size:16px; padding-top:0.5em;}
.process span{font-size:18px; color:rgba(255,255,255,0.7); font-style:italic;}

/*footer*/
#footer{background:#000; color:#fff; padding:0 0 1em 0; font-size:14px; line-height:180%; z-index:10;}
#footer a{color:#fff;}
#footer a:hover{text-decoration:underline;}
#footer .col-5{text-align:left; padding-top:1em;}
#footer .col-7{text-align:right; padding-top:1em;}

@media screen and (max-width:767px) {/*mobile*/
/*nav*/
#header{padding:0;}
.nav a:hover{background:#333; color:#fff;}
.topphone{position:fixed; bottom:0; width:100%; height:auto; border-radius:0; z-index:400; text-align:center; padding:0.7em 0; background:linear-gradient(#C30,#333); box-shadow:0 -5px 10px rgba(0,0,0,0.2);}
#defaultimg{background-size:100%;}
#defaultimg .page{min-height:55vh; border-left:none; border-right:none;}

#defaultimg{font-size:16px;}
#defaultimg .page div{right:5%;}
#defaultimg .page div.center{width:90%; text-align:center; left:5%; top:10%;}
.tel{width:100%; text-align:center;}
.d1 .page{padding:0 1em; line-height:220%;}
.d1 h2, .d3 h2{color:#000; font-size:20px; font-weight:normal;}
.d1 .tit, .d3 .tit, .d4 .tit{font-size:40px; color:#cf602f; font-family: 'Noto Sans TC', sans-serif; font-weight:300; margin:1em 0 0 0;}
.d2{padding:0 0 2em 0;}
.d2 .frm{margin-bottom:6em;}
.d2 p{padding:1em 1em; }
.d2 .col-4{padding:1em 0;}
.d3 .tit{margin-top:-0.7em;}
.d3 a.more{padding:0.8em 1em;}
.d4{padding:0;}
.d4 .col-9{padding:1em;}
#footer .col-7{padding-top:2em;}
#footer,#footer .col-5,#footer .col-7{text-align:center;}
.normal .page, .gallery .page{width:90%; padding:1em; background:rgba(255,255,255,0.8);}
.normal .page.position, .gallery .page.position{ opacity:1;}
.gallery .col-3{padding:0.5em 0;}
.normal .contact{padding:0;}
.normal .contact > div{background:#efefef; padding:1em;}
/*fee how*/
.how .col-12{text-align:left;}
.how .col-12 p{width:100%;}
}
@media screen and (min-width:768px) and (max-width:1199px){/*pad*/
/*nav*/
.topphone{position:fixed; top:0; right:0; border-radius:0 0 1em 1em; padding:0em 0.5em; line-height:140%; z-index:200;}
.nav{width:75%; text-align:right;}
.nav a{padding:0.5em;}
.d1 .page{padding:0 1em; line-height:220%;}
.d2 .col-4{padding:1em;}
.d2 p{padding:1em 1em;}
.d4{padding:0;}
#defaultimg .page{height:60vh;}
#defaultimg .page div{right:5%;}
.gallery .col-3{padding:0.5em;}
.normal .page, .gallery .page{width:90%; padding:1em; background:rgba(255,255,255,0.8);}
.normal .page.position, .gallery .page.position{ opacity:1;}
}
@media screen and (min-width:900px) and (max-width:1199px){/*desktop*/
/*nav*/
.nav a{padding:0.5em 2em;}
.topphone{position:fixed; top:0; right:0; border-radius:0 0 1.5em 1.5em; padding:0em 0.5em; z-index:200;}
#defaultimg .page{height:70vh;}
#defaultimg .page div{right:5%;}
}
@media screen and (min-width:1200px){/*desktop*/
/*header*/
#header .page, #defaultimg .page{width:100%; padding:0 2em;}
/*nav*/
.nav a{padding:1em 0.7em 0 0.7em; position:relative;}
.nav a:hover{color:#d13a00;}
.nav a::before{content:""; width:1px; height:5px; border-top:10px solid #000; border-left:10px solid rgba(255,255,255,0);  border-right:10px solid rgba(255,255,255,0); display:inline-block; position:absolute; left:50%; transform:translateX(-50%); top:-10px; opacity:0; transition:.3s;}
.nav a:hover::before{opacity:1; top:0;}

.d1 .page{padding:0 10em; line-height:220%;}
#defaultimg .page div{right:20%;}
.normal .page, .gallery .page{width:90%; padding:2.5em; transition:1s; opacity:0.6;}
.normal .page.position, .gallery .page.position{transform:translateY(-10em); background:rgba(255,255,255,0.8); opacity:1;}
}