@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);


/* ---reset.css--- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	font-family:'Century Gothic', 'cwTeXYen', Arial , Heiti TC; 
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
	box-sizing: border-box;
	
}
body {
line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;}
p { font-size:24px;
	}

/* ---reset.css--- */

#WRAPPER{ width:100%; overflow:hidden;  }

/*--PC float------------------------------------------*/
a.back-to-top {opacity: 1; display: none;width: 55px;padding:15px;height: 55px;text-indent: -9999px;position: fixed;z-index: 10000;right: 0px;top: 415px;background: #cccccc url(../images/up-arrow.png) no-repeat center 43%;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;
background-size:45px ;border-radius: 5px 0 0 5px;}
a:hover.back-to-top {background-color: #FFF064;}


#mySidenav a { display:block;position: fixed;right: -224px;transition: 0.3s;padding: 10px ;width: 280px;text-align:left;text-decoration: none;font-size: 20px;color: white;border-radius: 5px 0 0 5px;}

#mySidenav a:hover {right: 0;}
#floatform img{ width:45px;vertical-align:middle;}
#floatform{top: 220px;background-color:#D86A8E;z-index:10000;}
#floatPhone img{ width:45px;vertical-align:middle;}
#floatPhone {top: 285px;background-color: #39A2AE;z-index:10000;}
#floatrFB img{ width:45px;vertical-align:middle;}
#floatrFB {top: 350px;background-color: #425f9c;z-index:10000;}




/*----------------------NAV---------------------------*/
.main_h {position: fixed;top: 0px; max-height: 70px; z-index: 999; width: 100%;padding-top: 25px; background: none; overflow: hidden;
 -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0;top: -100px; padding-bottom: 6px;}

/*--------------KV BANNER ---------------------------*/
#KV-PC-BANNER{ position:relative; width:100%; height:650px; overflow:hidden; margin:0 auto; background:url(../images/KV-bg8888.jpg) no-repeat; background-position:top; background-size: cover; z-index:30;}
.KV-PC-title{  display:block; position:relative; top:80px; left:32%; width:40%; z-index:20;}
.KV-PC-title img{ width:100%;}
.KV-M-title{ display:none; }
/*--------------KV BANNER ---------------------------*/

/*------------CONTENT-When-----------------------*/
#CONTENT-When{ width:100%; height:450px; margin:50px auto; }
.h3-title{ font-size:36px; text-align:center; margin:20px auto;}
.yellowline{ width:100px; height:2px; background-color:#FFFD98; margin:10px auto;}
.CW-group{ width:1200px; margin:40px auto; }
.CWbg01{background:url(../images/C0-pic01.jpg) no-repeat; background-position:center; background-size: cover; }
.CWbg02{background:url(../images/C0-pic02.jpg) no-repeat; background-position:center; background-size: cover; }
.CW-text{ display:block; float:left; width:550px; text-align:center; height:335px; overflow:hidden; margin-left:20px; }/*RWD*/
.CW-text p{ padding:10px; color:#FFF; font-size:24px; line-height:34px;  -webkit-filter: drop-shadow(1px 1px px rgba(0, 0, 0, 0.8));filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.2)); }
.CW-text h4{font-size:36px;font-weight:400; padding:5px 0; color:#FFF;  -webkit-filter: drop-shadow(1px 1px px rgba(0, 0, 0, 0.8));filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.2)); }
.yellowpoint{ margin-top:30px;font-size:100px; font-weight:bold; text-align:center; color:#FFFD98;  -webkit-filter: drop-shadow(1px 1px px rgba(0, 0, 0, 0.2));filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.2));}
.whiteline{ width:65%; height:1px; background-color:#FFF; margin:5px auto;}
/*--CW-text-Mobile-----*/

/*------------CONTENT-When-----------------------*/


/*-----------CONTENT-1 探索色彩-----------*/
#CONTENT-1{ width:100%; height:700px; margin:0 auto;}
#CONTENT-1 .textgroup,#CONTENT-2 .textgroup,#CONTENT-0-4 .textgroup{ display:block; position:relative; width:100%; height:600px; overflow:hidden; margin:0 auto; background:url(../images/C1-titlebg.jpg) no-repeat; background-position:top; background-size: cover; z-index:30;}
.textcontainer{ width:70%; margin:0 auto; height:50px;  background-color:rgba(255,255,255,0.8); text-align:center;}
.textcontainer h4{ margin-top:200px; font-size:36px;font-weight:400; padding:5px 0;}
.blue{ color:#32AFCC;} .red{ color:#FF736C;}
.C1-color,.C2-color{ position:relative;  top:-200px; width:900px; height:270px; background-color:#DD9FB1; padding:30px; z-index:50; margin:0 auto; }
.C1-color h4,.C2-color h4{ padding:15px 0 0; font-size:36px; color:#FFF;font-weight:400; text-align:center; }
.C1-color p,.C2-color p{ display:block;padding:5px 15px; font-size:24px; color:#FFF; font-weight:inherit; line-height:34px; text-align:justify;}

/*------- A探索色彩 ------*/
.CONTENT-1partA{ display:block;width:100%; margin:0 auto;}
.CONTENT-1partA p{ padding:10px 0 0; text-align:center; }
.CONTENT-1partA-M{ display:none;}

.accordion { width: 100%;max-width: 1080px; height: 400px;overflow: hidden; margin: 40px auto;}
.accordion ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0;}
.accordion ul li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 400px;  background-repeat: no-repeat; background-position: center center; transition: all 500ms ease;}
.accordion ul li div { display: block; overflow: hidden; width: 100%;}
.accordion ul li div a { display: block; height:120px;  width: 100%; position: relative;  z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; font-family: Open Sans, sans-serif;transition: all 200ms ease;}
.accordion ul li div a * { opacity: 0; margin: 0; width: 100%;text-overflow: ellipsis; position: relative; z-index: 5;white-space: nowrap; overflow: hidden;  -webkit-transform: translateX(-20px);
 transform: translateX(-20px); -webkit-transition: all 400ms ease;  transition: all 400ms ease;}
.accordion ul li div a h2 { text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 0px; top: 0px;}
.accordion ul li div a p { top: 0px; font-size: 18px; text-align:left; line-height:30px;  padding:10px 0;}
.accordion ul li:nth-child(1) { background-image: url(../images/C1-Acolorpaint01.jpg);}
.accordion ul li:nth-child(2) { background-image: url(../images/C1-Acolorpaint02.jpg);}
.accordion ul li:nth-child(3) { background-image: url(../images/C1-Acolorpaint03.jpg);}
.accordion ul li:nth-child(4) { background-image: url(../images/C1-Acolorpaint04.jpg);}
.accordion ul li:nth-child(5) { background-image: url(../images/C1-Acolorpaint05.jpg);}
.accordion ul li:nth-child(6) { background-image: url(../images/C1-Acolorpaint06.jpg);}
.accordion ul:hover li { width: 8%;}
.accordion ul:hover li:hover { width: 60%;}
.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.8);}
.accordion ul:hover li:hover a * { opacity: 1;-webkit-transform: translateX(0); transform: translateX(0);}
.morebox{ border:1px solid #FFF;}

/*A*/
/*----B---對色彩偏好------*/
.CONTENT-1partB{ display:block;width:100%; margin:0 auto;  }
.CONTENT-1partB-M{ display:none;}
.CONTENT-1partB p,.CONTENT-1partB-M p{ padding:10px 0 0; text-align:center; }
.C1B-group{ width: 1080px; margin:50px auto;}
.C1B-findyourself{ float:left; width:450px; height:600px; background-color:#fff; border-radius:20px; margin:20px 30px;   -webkit-filter: drop-shadow(1px 1px px rgba(0, 0, 0, 0.2));filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.2)); }
.C1B-findyourself h5{ padding:40px 0 20px; font-size:45px;  text-align:center;}
.C1B-findyourself img{ width:100%;}
.C1B-findyourself p{ padding:20px 10px 0; font-size:20px; line-height:30px;  text-align:center;}
.bookingbutton{ background-color:#403F4C;border: none;color: #FFF; padding: 10px 45px; text-align: center; font-size: 20px; margin: 4px 130px;opacity: 1; transition: 0.3s; display: inline-block;
 text-decoration: none; cursor: pointer;}
.bookingbutton a{text-decoration: none;  color: #FFF;}
.bookingbutton:hover {opacity: 0.6;}
.grayline,.skinline,.blueline,.purpleline{ background-color:#DBDDDC; width:85%; height:5px;  margin:10px auto;}
.skinline{background-color:#FDE1A1; }
.blueline{background-color:#1A89A5; }
.purpleline{background-color:#661D68; }
.none{ clear:both;}
/*-----------CONTENT-1 探索色彩-----------*/
/*---------------------CONETNE-2 認識塗料----------------*/
#CONTENT-2{width:100%; height:650px; margin:70px auto; }
#CONTENT-2 .textgroup{  background:url(../images/C2-titlebg.jpg) no-repeat; background-position:center; background-size: cover; }
.C2-color{ background-color:#39A2AE; }

/*-------C2-whatkindofpaint 油漆種類-------------*/

.C2-whatkindofpaint{width:100%; margin:0px auto;}
.C2-kindgroup{ width:970px; margin:0 auto;}
.C2-box{ width:450px; height:300px; float:left; margin:0 auto; padding:0 20px;}
.c2-titlebox{ width:300px; height:45px; background-color:#39A2AE; margin:0 auto;}
.c2-titlebox h4,.C3-group h4{font-size:32px;  font-weight:100; padding:5px 0 0 ; color:#FFF; text-align:center;}
.C2-titleandphoto{ width:100%; padding-top:20px; }
.C2-titleandphoto ul{ width:210px; float:left; list-style-type:decimal; padding-top:20px;}
.C2-titleandphoto li{font-size:20px; line-height:30px; }
.separateline{ display:block; width:1px;background-color:#DBDDDC;  height:300px; float:left; margin:0 30px;  }
.C2-remake{ clear:both; width:100%; height:auto; background-color:#FCFBE0; padding:20px 0;}
.C2-remake p{ width:70%; font-size:20px; margin:0 auto;  line-height:28px; }
.C2-smailtext{font-size:18px;}

/*-------------------------CONTENT-3---------------------*/

#CONTENT-3{width:100%; height:auto; margin:0 auto; padding:20px 0 30px; }
.C3-group{ width:1045px; height:500px; margin:0 auto; background-color:#877496;}
.C3-group h4{ padding-top:40px;}
.C3-basis{ width:100%; padding:10px; margin:0 auto;}
.C3-box{width:500px; height:200px; padding:10px; float:left;}
.C3-photo{ width:175px; height:auto; float:left; padding:0 10px;}
.C3-photo img{ width:100%;}
.C3-text{ width:100%; color:#FFF; }
.C3-text h5{font-size:32px; font-weight:100;  padding-bottom:5px; color:#FFF100; }
.C3-text p{font-size:20px; line-height:24px; text-align:justify;}


/*-------------------------CONTENT-4---------------------*/
#CONTENT-0-4 .textgroup{ height:400px; background:url(../images/C3-titlebg.jpg) no-repeat; background-position:top; background-size: cover; z-index:30;}

#CONTENT-4,CONTENT-5{ margin:50px auto; }
#CONTENT-4 .textgroup,#CONTENT-5 .textgroup ,#FORMFORM .textgroup{ width:1080px; height:100px; margin:0 auto; background:url(../images/C4-titlebg.jpg) no-repeat; background-position:top; background-size: cover; z-index:30;}
#CONTENT-4 h4{ padding-top:40px; font-size:32px; font-weight:100; text-align:center; }
.C4-biggroup{ width:1100px; margin:40px auto;}
.C4-group{ width:275px; height:auto; padding: 0 10px 30px; float:left; }
.C4-title{ width:100%;  height:40px;  padding:5px 10px 0;  text-align:center; background-color:#FFF064;}
.C4-title p{ padding-top:5px;}
.C4-contente { width:100%; height:150px; border:4px solid #FFF064;}
.C4-contente p{ font-size:20px; padding:10px; line-height:30px;}

.C4-servicearea{ clear:both; width:100%; height:45px; margin:0 auto; background-color:#FFF064;}
.C4-servicearea p{ padding:10px 0; text-align:center; }
.C4-1safe{ display:block; width:60%; margin:0 auto;}
.C4-1safe img{ float:left; padding: 0 20px 40px; margin-left:20px;}
.C4-1safe ul{ width:100%; padding:20px 10px 10px; }
.C4-1safe li{font-size:20px; line-height:28px;  padding-bottom:5px;list-style: url(../images/C4-tick-03.png)  none inside; text-align:justify;}

/*--------CONTENT-5 常見問題 ---------------------*/

#CONTENT-5{width:100%; margin:0 auto; padding-bottom:80px;}
#CONTENT-5 .textgroup{ background:url(../images/C5-titlebg.jpg) no-repeat; background-position:center; background-size: cover; z-index:30;}
#CONTENT-5 h4{ padding-top:25px; font-size:32px; font-weight:100; text-align:center; }
.acc-container { width:1080px; margin:30px auto 0 auto; -webkit-border-radius:8px;  -moz-border-radius:8px; -o-border-radius:8px;  border-radius:8px; overflow:hidden;}
.acc-btn {  width:100%; margin:0 auto;padding:20px 25px; cursor:pointer;background:#499BAB; border-bottom:1px solid #326168; color:#FFF;}
.acc-btn h5{ font-size:24px; font-weight:100;}
.acc-content { height:0px; width:100%;  margin:0 auto; overflow:hidden; background:#515151;color:#FFF;}
.acc-content p{font-size:20px; line-height:28px; text-align:justify;}
.acc-content-inner {padding:30px; text-align:justify;}
.open { height: auto;}



/*--------CONTENT-6 諮詢表單 ---------------------*/
#FORMFORM{width:100%; margin:0 auto; padding-bottom:50px; }
#FORMFORM .textgroup{ background:url(../images/C6-titlebg.jpg) no-repeat; background-position:center; background-size: cover; z-index:30;}
#FORMFORM h4{ padding-top:25px; font-size:32px; font-weight:100; text-align:center; }
.FORMgroup{ width:100%; margin:0 auto; padding:20px 0 0px;  }

.message { text-align: center;width: 90%; margin: auto;}
.city-size{ width:180px;}

@media screen and (min-width: 768px) {.message {width: 66%; }}
.message label { font-size: 20px;}
.message .m_subtitle {font-size: 24px;  margin-bottom: 30px; text-align: center;}

@media screen and (min-width: 768px) { .message .m_subtitle { font-size: 22px; }}

@media screen and (min-width: 768px) { .message .m_title { font-size: 40px; }}

.message .m_group { font-size: 0; text-align: left; width: 90%; margin: auto;}

@media screen and (min-width: 768px) {.message .m_group { width: 66%;}}

.message .m_group > div { margin-bottom: 25px;}

.message .m_group .area_box { margin-top: 10px; margin-bottom: 10px; }
.area_box select{ height: 32px; border: 1px solid #a7a7a7; font-size: 17px; font-family:'Century Gothic', 'cwTeXYen', Arial , Heiti TC; }
.message .m_group input[type='text'] { width: 100%; margin-top: 7px; }
.message .m_group .name label, .message .m_group .phone label { display: block;}

@media screen and (min-width: 768px) {
.message .m_group .name, .message .m_group .phone { width: 100%;}}
.message .m_group .name input, .message .m_group .phone input {height: 30px; border: 1px solid #a7a7a7; font-size: 18px;}

@media screen and (min-width: 768px) {
 .message .m_group .name {margin-right: 6%;}}

.message .m_group .county, .message .m_group .region { display: inline-block; width: 50%;}

.message .m_group .region label {margin-right: 6px;}
.privacy{ font-size:28px;} 
.message .m_group .privacy span {color: #D86A8E;}
.message .m_group .privacy a { text-decoration: none; color: #D86A8E; }
.message .m_group .submit {-webkit-box-sizing: border-box;box-sizing: border-box; text-align: center; margin: auto; font-size: 24px;}

@media screen and (min-width: 768px) {
.message .m_group .submit { width: 250px;}}
.submit_box { width: 100%; text-align: center;}
@media screen and (max-width: 480px) {.city-size { width:120px; }
	}
	
@media screen and (max-width: 320px) {.city-size { width:85px; }
	}
	
	/*booking button*/ 
.butbooking{ width:180px; margin:40px auto; }
.btn-btn{ border: none;color:#FFF;  padding: 10px 25px;font-size: 24px; 
  cursor: pointer; margin:0 auto; font-family:'Century Gothic', 'cwTeXYen', Arial , Heiti TC; }
.booking{background-color:#D86A8E; }
.booking:hover {border:2px solid #D86A8E;background-color: #FFF;  text-decoration: none;  color:  #D86A8E;}


}


/*------footer---------------------*/
footer{ margin:0 auto;}
.copyright{ padding-bottom:30px; text-align:center; color:#666; font-size:16px;}
.footer-M{ display:none;}

@media only screen and (max-width:1366px) {

.KV-PC-title{  display:block; position:relative; top:80px; left:28%; width:50%; z-index:20;}
}

@media only screen and (max-width: 1024px) {
	#WRAPPER{ width:100%; overflow:hidden;  }
#KV-PC-BANNER{  height:450px;}
.KV-PC-title{ top:40px; left:25%; width:50%;}
/*C0*/
#CONTENT-When{ width:100%; height:auto; margin:50px auto; }
.CW-group{ width:90%; margin:40px auto; }
.CW-text{ float:none; width:100%; height:335px; margin-left:0px; margin-bottom:10px; }/*RWD*/
/*C1*/
#CONTENT-1,#CONTENT-2{ width:100%; height:auto; padding-bottom:0px; margin:0 auto;}
#CONTENT-1 .textgroup,#CONTENT-2 .textgroup,#CONTENT-0-4 .textgroup{ height:300px; }
.textcontainer{ display:block; width:80%; margin:100px auto; height:auto; }
.textcontainer h4{ margin-top:0px; padding:15px;}
.C1-color,.C2-color{ top:0px; width:100%; height:auto;  padding:10px; z-index:0; }
.C1-color h4,.C2-color h4{padding:15px 0 0; font-weight:400; text-align:center; }
.C1-color p,.C2-color p{ display:none;}
/*C1-B*/

/*C2*/
#CONTENT-2{width:100%; height:auto; margin:70px auto; }
.C2-whatkindofpaint{width:100%; margin:0px auto; padding:0 0 30px; }
.C2-kindgroup{ width:100%;  margin:0 auto; padding:0 0 30px; }
.C2-box{ width:90%; height:300px; float:none; margin:0 auto; padding:0 px;}
.c2-titlebox{ width:80%; height:45px; }
.C2-titleandphoto{ width:50%; padding-top:20px; margin:0 auto; }
.C2-titleandphoto ul{ width:210px; float:left; padding-top:20px;}
.C2-img{ display:block; width:200px; float:left;}
.C2-img img{ width:100%;}

.separateline{ display:none; }
/*C3*/
.C3-group{ width:90%; height:auto; padding-bottom:20px;  }

.C3-basis{ width:100%; padding:10px; margin:0 auto;}
.C3-box{width:100%; height:200px;  float:none}
.C3-photo{ width:175px;height:auto;}
.C3-photo img{ width:100%;}
.C3-text{ width:100%;}


/*C4*/
#CONTENT-0-4 .textgroup{ height:400px;}
#CONTENT-4,CONTENT-5{ margin:50px auto; }
#CONTENT-4 .textgroup,#CONTENT-5 .textgroup ,#FORMFORM .textgroup{ width:100%; height:100px; margin:0 auto;}
#CONTENT-4 h4{ padding-top:40px; }
.C4-biggroup{ width:90%; }
.C4-1safe{ width:90%; }
.C4-1safe img{ float:left; padding: 0 20px 0; margin-left:0px;}
.C4-1safe ul{ width:100%; padding:20px 10px 10px; }
.C4-1safe{ display:none; }
.C4-servicearea{  width:100%; height:auto; }
.C4-servicearea p{ padding:10px; }
/*C5*/
.acc-container { width:90%;}
	}
	
@media only screen and (max-width: 982px) {	
/*C2*/
#CONTENT-2{width:100%; height:auto; margin:70px auto; }
/*C1-風格選單slide show*/

.CONTENT-1partB{ display:none;}
.CONTENT-1partB-M{ display:block;}
.C1B-findyourself{ float:none; width:100%; height:auto; background-color:#fff; border-radius:20px; margin:0px 0; padding-bottom:60px;   -webkit-filter:none;filter:none; }
.C1B-findyourself img{ width:100%; padding:10px;}

.C1B-findyourself p{ padding:20px 10px 0; font-size:20px;  text-align:center;}

.CSSgal {width:100%;position: relative;overflow: hidden;height: 100%; /* Or set a fixed height */}

/* SLIDER */
.CSSgal .slider {height: 100%;white-space: nowrap;font-size: 0;transition: 0.8s;}
/* SLIDES */
.CSSgal .slider > * {margin-top:40px; font-size: 1rem;	display: inline-block;	white-space: normal;vertical-align: top;height: 100%;	width: 100%;background: none 50% no-repeat;background-size: cover;}
/* PREV/NEXT, CONTAINERS & ANCHORS */
.CSSgal .prevNext {	position: absolute;z-index: 1;top: 50%;width: 100%;	height: 0;}
.CSSgal .prevNext > div+div {visibility: hidden; /* Hide all but first P/N container */}
.CSSgal .prevNext a {background:url(../images/arr_l.png) no-repeat;	position: absolute;width:  60px;height:  60px;line-height: 60px; /* If you want to place numbers */
text-align: center;opacity: 0.7;-webkit-transition: 0.3s;transition: 0.3s;-webkit-transform: translateY(-50%);transform: translateY(-50%);left: 0;}
.CSSgal .prevNext a:hover {opacity: 1;}
.CSSgal .prevNext a+a {left: auto;right: 0;background:url(../images/arr_r.png) no-repeat;}

/* NAVIGATION */
.CSSgal .bullets {position: absolute;z-index: 2; bottom: 0;padding: 10px 0;width: 100%;text-align: center;}
.CSSgal .bullets > a {display: inline-block;width:30px;height:30px;	line-height: 30px;text-decoration: none;text-align: center;background: rgba(255, 255, 255, 1);-webkit-transition: 0.3s;
transition: 0.3s;}
.CSSgal .bullets > a+a {background: rgba(255, 255, 255, 0.5); /* Dim all but first */}
.CSSgal .bullets > a:hover {background: rgba(255, 255, 255, 0.7) !important;}

/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal >s:target ~ .bullets >* {      background: rgba(255, 253, 152, 0.5);}
/* ACTIVE */
#s1:target ~ .bullets >*:nth-child(1) {background: rgba(170, 170, 170,   1);}
#s2:target ~ .bullets >*:nth-child(2) {background: rgba(170, 170, 170,   1);}
#s3:target ~ .bullets >*:nth-child(3) {background: rgba(170, 170, 170,   1);}
#s4:target ~ .bullets >*:nth-child(4) {background: rgba(170, 170, 170,   1);}
/* More slides? Add here more rules */

/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal >s:target ~ .prevNext >* {      visibility: hidden;}
/* ACTIVE: */
#s1:target ~ .prevNext >*:nth-child(1) {visibility: visible;}
#s2:target ~ .prevNext >*:nth-child(2) {visibility: visible;}
#s3:target ~ .prevNext >*:nth-child(3) {visibility: visible;}
#s4:target ~ .prevNext >*:nth-child(4) {visibility: visible;}
/* More slides? Add here more rules */

/* SLIDER ANIMATION POSITIONS */

#s1:target ~ .slider {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
#s2:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
#s3:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
#s4:target ~ .slider {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
/* More slides? Add here more rules */


/* YOU'RE THE DESIGNER! 
   ____________________
   All above was mainly to get it working :)
   CSSgal CUSTOM STYLES / OVERRIDES HERE: */

.CSSgal{text-align: center;}
.CSSgal a {border-radius: 50%;margin: 0 3px;color: rgba(0,0,0,0.8);text-decoration: none;}
 
.bookingbutton{color: #FFF; padding:10px;}
.bookingbutton a{ color: #FFF;}


/*C1-B----------------------------*/
.C2-kindgroup{ width:100%;  margin:0 auto;}
.C2-box{ width:90%; height:auto; float:none; margin:0 auto; padding:0 px;}
.c2-titlebox{ width:450px; height:45px; }
.C2-titleandphoto{ width:400px; padding:10px; margin:0 auto; }
.C2-titleandphoto ul{ width:100%; float:none; padding-top:20px;}
.C2-img{ display:none; }
.separateline{ display:none; }	


/**/
.copyright{ text-align:center; color:#666; font-size:16px; padding-bottom:80px;}
/*================mobile footer*=========*/
.footer-M{display:block;width: 100%;height: 70px;background: #35322e;
/*-webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#111));*/
position: fixed;bottom: -5px;z-index:9999999999;
/*box-shadow: 0px -1px 1px #333;*/}
.footer-M ul{display:block;list-style: none;width: 100%;height: 50px;}
.footer-M li{float: left;width: 25%; /*要被分開成 5 個*/height: 60px;padding-top:2px;}
.footer-M li:first-child{border-left:none;}
.footer-M li:last-child{border-right: none;}
.footer-M li a{display:block;width:100%;height:80px;padding-top:45px; /*把文字往下推*/font-size:14px;
	color:#FFF;text-align:center;text-decoration:none;background-repeat:no-repeat;
	background-position:center 5px; /* X置中 Y向下5px*/letter-spacing:1px;
	background-size:35px 35px; /* 把背景圖縮小一半 符合視網膜 2X 解析度*/}

.footer-M li a.m_phone{ background-image:url(../images/phone.png);}
.footer-M li a.m_form{ background-image:url(../images/form.png);}
.footer-M li a.m_fb{ background-image:url(../images/fb.png);}
.footer-M li a.m_line{ background-image:url(../images/line.png);}

}
@media only screen and (max-width: 982px) {
 .main_h {  max-height: 40px;padding-top: 25px; }}
.open-nav {max-height: 400px !important;}
.open-nav .mobile-toggle {transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
.sticky { background-color: #403F4C; opacity: 0.9;top: 0px; border-bottom: 1px solid gainsboro;}
.logo { width: 20px;float: left;display: block; margin-top: 0; margin-bottom: 10px;}

nav {float: right;width: 60%}
@media only screen and (max-width: 982px) {
 nav { width: 100%;}
nav ul {list-style: none;overflow: hidden;text-align: right; float: right;}
}

@media only screen and (max-width: 982px) {
 nav ul {  padding-top: 15px; margin-bottom: 22px;float: left; text-align: center; width: 100%; }}
nav ul li {display: inline-block; margin-left: 20px; line-height: 1.5;}
@media only screen and (max-width: 982px) {nav ul li {width: 100%;padding: 7px 0;margin: 0;}}
nav ul a {color: #FFF;text-transform: uppercase;font-size:1.2em;text-decoration:none;}
nav ul a:hover {color: #FFFD98; border-bottom:2px solid #FFFD98; }
.mobile-toggle { display: none;  cursor: pointer; font-size: 20px; position: absolute; right: 22px;  top: 0; width: 30px; -webkit-transition: all 200ms ease-in;-moz-transition: all 200ms ease-in; transition: all 200ms ease-in;}
@media only screen and (max-width: 982px) { .mobile-toggle { display: block; }}
.mobile-toggle span {width: 30px; height: 4px; margin-bottom: 6px; border-radius: 1000px; background: #FFF; display: block;}
.row {width: 100%; max-width: 940px; margin: 0 auto; position: relative; padding: 0 2%;}
.mouse { display: block; margin: 0 auto; width: 26px;  height: 46px;  border-radius: 13px; border: 2px solid #e8f380; position: absolute; bottom: 40px;  position: absolute;left: 50%;margin-left: -26px;}
.mouse span { display: block; margin: 6px auto; width: 2px; height: 2px;  border-radius: 4px; background: #e8f380;  border: 1px solid transparent;
  -webkit-animation-duration: 1s;animation-duration: 1s; -webkit-animation-fill-mode: both;  animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
  -webkit-animation-name: scroll; animation-name: scroll;}

@media only screen and (max-width: 982px) {
a.back-to-top {opacity: 0.7;top: 450px;width: 15px;height: 25px;padding:20px;}
#mySidenav a { display:none;}
/*BANNER*/
#KV-PC-BANNER{ position:relative; width:100%; height:auto;  background:none;}
.KV-PC-title{  display:none;}
.KV-M-title{ display:block; top:80px;  }
.KV-M-title img{ width:100%;}

.CONTENT-1partA{ display:none;}
.CONTENT-1partA-M{ display: block;}
.CONTENT-1partA-M p{ padding:10px 0 0;  }
.accordion-mobile{ width:100%; padding:10px 0; color:#FFF; }
.accordion-mobile ul li {display: block;height: 350px; /*高度*/ width: 100%; }
.accordion-mobile ul li div{ display: block; position:absolute;  width: 100%; margin-top:220px; overflow:hidden;
  height: 130px; /*hover black高度*/   padding:15px 10px;  width: 100%;  background: rgba(0, 0, 0, 0.5); }
  
.accordion-mobile ul li div p{ padding-bottom:20px; }
.accordion-mobile ul li div h2 { text-overflow: clip; font-size: 24px;  text-transform: uppercase;  margin-bottom: 0px;  top: 0px;} 
.accordion-mobile ul li div a{ text-decoration:none; color:#FFF;	 }
.accordion-mobile  .morebox{ padding:2px 15px;  border:1px solid #FFF; text-decoration:none;}
.accordion-mobile ul li:nth-child(1) {  background-image: url(../images/C1-Acolorpaint01.jpg);}
.accordion-mobile ul li:nth-child(2) {  background-image: url(../images/C1-Acolorpaint02.jpg);}
.accordion-mobile ul li:nth-child(3) { background-image: url(../images/C1-Acolorpaint03.jpg) ; background-position:center;}
.accordion-mobile ul li:nth-child(4) { background-image: url(../images/C1-Acolorpaint04.jpg);}
.accordion-mobile ul li:nth-child(5) { background-image: url(../images/C1-Acolorpaint05.jpg);}
.accordion-mobile ul li:nth-child(6) { background-image: url(../images/C1-Acolorpaint06.jpg);background-position:center;}
/*CONTENT-1partA-accordion color*/
.CONTENT-1partB{ display:none;}
.accordion-mobile { height: auto;}

/*C4*/
.C4-group{ width:100%; height:auto; padding: 0 10px 30px; float:none; }
.C4-title{ width:100%;  height:40px;  padding:5px 10px 0;  text-align:center; background-color:#FFF064;}
.C4-title p{ padding-top:5px;}
.C4-contente { width:100%; height:auto; }
.C4-contente p{ font-size:20px; padding:10px; line-height:30px;}
#CONTENT-0-4{ display:none;}

/*==============FORM=====================*/
#FROM{ clear:both; width:100%; height:auto; margin:0 auto;  ; padding:10px 0 20px 0;}

@media only screen and (max-width: 480px) {
.C-Atext{ width:90%; margin:0 auto;  line-height:32px; text-align:center;}	
.CW-text h4{font-size:28px; line-height:38px; }
	
.accordion-mobile ul li div p{ padding-bottom:20px; font-size:20px; }
.accordion-mobile ul li div a{font-size:18px; }

/*C1-B*/
.h3-title{ font-size:36px; text-align:center; padding-top:30px;}
.C1B-findyourself p{ padding:20px 20px 0; font-size:20px; line-height:30px;  text-align:left;}
.bookingbutton{ 
  padding: 10px 0px;
  width:150px;
  margin: 4px 10px;
}
/*C2-油漆*/
.c2-titlebox{ width:100%; height:45px; }
.C2-titleandphoto{ width:90%; padding:10px; margin:0 auto; }
.C2-remake p{ width:80%; font-size:20px; margin:0 auto;  line-height:28px; }
/*C3*/
.C3-text h5{font-size:24px;}
.C3-box{width:100%; height:auto;  float:none; margin-bottom:20px;}
.C3-photo{ width:150px;height:auto; margin:0 auto; float:none; padding:10px 10px 15px;}
.C3-photo img{ width:100%;}


	
	}