@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: "NotoSerifCJKtc";
    src: url(/download/font/NotoSerifCJKtc-Bold_3.otf);
}

header {
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.50);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.50);
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
	height: 60px;
	left: 0px;
	width: 100%;
	min-width: 100%;
	position: fixed;
	background-color: #20b37d;
	border-bottom: none;
    
    top: 0;
    left: 0;
    z-index: 999;
    
 
}
.wrapper {
	max-width:1200px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
    
    
}
.Designer_logo {
	background-image: url(/images/logo/2017/80X45_white.png);
	width: 80px;
	height: 42px;
	position: absolute;
	left: 0px;
	top: 6px;
}
.Designer_logo a {
	display: block;
	height: 100%;
}
.seo , .ch3_BG h2 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
nav {
	position: absolute;
	top: 10px;
	left: 110px;
    
}
nav>a {
	width: 100px;
	line-height: 37px;
	text-align: center;
	display: inline-block;
	position: relative;
	color: #FFF;
	margin-right: 6px;
	font-size: 16px;
     font-family: ‘Noto Sans TC’, sans-serif;
   
   
}
nav>a:hover {
	color: #333;
}
nav>a:after {
	content: '';
	position: absolute;
	width: 1px;
	height: 20px;
	background-color: #0a9d67;
	top: 10px;
	right: -5px;
}
#openMenu {
	position: relative;
	display: none;
}
#blackOverlay {
	display: none;
	position: fixed;
	z-index: 60;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMi8zMS8xNdOFLqwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGElEQVQYlWNkYGBoYCACMBGjaFQh9RQCANyeAJRQ3dKnAAAAAElFTkSuQmCC);
}

.fb_share {
    /*width: 135px;*/
    height: auto;
    position: absolute;
    right: 0;
    top: 20px;
}

.fb_base,.line_base {
    float:left;
}
.line_base {
    margin-left:3px;
}

/*按鈕*/
.button {
	display: block;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	background-color: #FFF;
	position: relative;
	text-align: center;
	color: #333;
	font-size: 16px;
	padding: 10px 0;
	width: 100%;
	border: 1px solid #333;
	border-radius: 20px;
	letter-spacing: 2px;
}
.button:before {
	content: '';
	position: absolute;
	display: block;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
	top: 0;
	z-index: 0;
	width: 0%;
	height: 100%;
	background-color: #E4DACD;
}
.button:hover:before {
	width: 100%;
}
.button span {
	position: relative;
	z-index: 1;
}
/*按鈕 End*/

/*主視覺*/
article#kanban {
    background-position: center top;
    background-color: #3527b0;
    margin-top: 60px;
    overflow: hidden;
    position: relative;
}
article#kanban>div {    max-width: 1200px; height:auto;position: relative; background-image: url(/images/project/2017/interiorplan/0711_02.gif); height: 502px; background-size: contain; background-repeat:no-repeat;}

article#kanban a{ display: block; width:20%; height: auto; position: absolute;bottom: 0; right:85px; font-family: NotoSerifCJKtc; color: #fff; font-size:1.6em;text-align: center;line-height: 24px;padding: 10px;font-style:italic; }
article#kanban a:hover{ color: #3527b0;}
/*主視覺 End*/


section{ width: 100%; background-color: #3527b0;  font-size: 16px; line-height: 1.8em; color: #333;  }
section .wrapper{ max-width: 1200px; background-color: #f3f3f3; padding-top: 60px;box-sizing: border-box;}
section h2{font-family: NotoSerifCJKtc; color:#3527b0; font-size:2.5em;text-align: center;font-style:italic; line-height:1.8em; padding: 0 10px;  }
section h2+p , .ch1_BG h3 {  text-align: center; font-size: 1.5em;  line-height:2em; font-family: ‘Noto Sans TC’, sans-serif;padding: 0 10px;}

.ch1_BG table{ width:80%; margin: 0 auto; margin-top:20px; background-color: #494949; color: #fff;border:5px solid #20b37d; margin-bottom:40px; }
.ch1_BG table [rowspan="2"]{ font-size: 1.25em;  }
.ch1_BG table tr {border:5px solid #20b37d;  }
.ch1_BG table tr th{ padding:5px 20px;border:5px solid #20b37d; }
.ch1_BG table span{ color: #14bef5;font-size: 1.25em;}
.ch1_BG th span.title{ color: #20b37d;}
.ch1_BG li{ list-style-type: decimal; list-style-position:outside; }

.note_box{ width:57%; margin: 0 auto; padding:20px 30px;  border:5px solid #333; background-color: #efeddd;position: relative; background-image: url(/images/project/2017/interiorplan/dot-seamless-pattern.png); }
.note_box span{ display: block; width: 0; height: 0;border: 40px solid #333; border-color:rgba(51, 51, 51, 1) transparent transparent rgba(35, 35, 35, 1) ; background-color: #f3f3f3;position: absolute;bottom:-5px;right:-5px;}
.note_box strong{display: block; color:#20b37d; font-size:1.2em; font-weight: 600; margin-top: 10px; }

.ch2_BG i{display: block; text-align: center; width:100px; background-color:#20b37d; margin: 0 auto; color: #fff; border-radius: 20px;  height: 30px; line-height: 30px; margin-top: 20px;}
.ch2_BG span{ display: block; text-align: center; }

.select_group{display: block; text-align: center; font-weight: 600; margin-top:40px; margin-bottom: 20px;}
.control {  display: inline-block;  position: relative;  padding-left: 30px;  margin-bottom: 15px;  cursor: pointer;  font-size: 1.25em;  margin: 10px;}
.control input {  position: absolute;  z-index:-1;  opacity: 0;}
.control__indicator {  position: absolute;  top: 2px;  left: 0;  height:25px;  width: 25px;  background:#5a5a5a;}
.control:hover input ~ .control__indicator,.control input:focus ~ .control__indicator {  background: #333;}
.control input:checked ~ .control__indicator {  background: #20b37d;}
.control:hover input:not([disabled]):checked ~ .control__indicator,.control input:checked:focus ~ .control__indicator {  background: #20b37d;}
.control input:disabled ~ .control__indicator {  background: #e6e6e6;  opacity: 0.6;  pointer-events: none;}
.control__indicator:after {  content: '';  position: absolute;  display: none;}
.control input:checked ~ .control__indicator:after {  display: block;}
.control--checkbox .control__indicator:after {  left: 8px;  top: 2px;  width: 7px;  height: 15px;  border: solid #fff;  border-width: 0 2px 2px 0;  transform: rotate(45deg);}
.control--checkbox input:disabled ~ .control__indicator:after {  border-color: #7b7b7b;}



.wpb_wrapper{ width:80%; margin: 0 auto; text-align:left; }
.progress_title{ width:100%; overflow: hidden; line-height: 2em;}
.q_progress_bar h3{ display:inline-block; font-size:1.25em; font-weight: 600; float:left;margin-top: 20px;}
.q_progress_bar p{ line-height: 1.6em; margin-top: 5px;} 
.progress_number{display: inline-block;font-size:2.25em; float:right; margin-top: 15px; font-weight: 600;}
.progress_number:after{ content:" % "; display:inline-block; }
.progress_content_outer{ clear: both;}

.ch3_BG .wrapper { padding-top:0px;}
.ch3_BG .wrapper a{ display: block; max-width:1200px; height: 485px; background-image:url(/images/project/2017/interiorplan/service.gif); background-size: contain;background-repeat: no-repeat;} 



.ch4_BG .wrapper span{ max-width:874px; height: 400px; background-image:url(/images/project/2017/interiorplan/circle.gif);display:block; overflow: hidden; margin: 0 auto; background-repeat: no-repeat;  background-size: contain;} 
.ch4_BG .wrapper img{ width: 100%; height:auto;}
.circle_info {width:59%; margin: 0 auto;line-height:2em;}
.ch4_BG h3{ font-size: 1.25em; font-weight: 600;  margin: 0 auto; margin-top: 15px;}
.circle_info ul li{  list-style-type:decimal; list-style-position: outside; margin-left: 20px; }

.budget_case{ display: block; width: 80%; margin: 0 auto; background-color: #fff; margin-top:30px; padding: 20px;overflow: hidden;}
.budget_case > ul{ width:40%; margin: 0 auto; border: 1px solid #383838;text-align: center; overflow: hidden; margin-top: 30px; margin-bottom: 30px;}
.budget_case > ul li{ display: inline-block; width:33.334%;box-sizing: border-box;float: left;font-size: 1.25em;font-weight: 600;padding: 10px 0; }
.budget_case > ul li a{display: inline-block;  width:100%;text-align: center; border-left:1px dotted #383838; }
.budget_case > ul li:hover{ background-color: #383838; }
.budget_case > ul li a:hover{color: #eb7140;}

.left_box{display:inline-block; width:65%;float: left; }
.left_box ul{display: inline-block; width: 20%;float: left; margin-right:18px;}
.left_box ul li{ display: block;overflow: hidden;}
.left_box a{display: block; overflow: hidden; }
.left_box .main_img{display: inline-block; width:75%;}
.left_box a:hover img{ -moz-transform:scale(1.1);-webkit-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
.right_box{display:inline-block; width:35%;text-align: center;padding-top:50px; }
.right_box p{line-height: 1.6em; }
.right_box  h4{display: block; width: 50%;  font-size: 1.6em;color: #eb7140; padding-bottom: 10px; margin: 0 auto;margin-top: 30px;border-bottom: 2px solid #eb7140; font-weight: 600;}
.right_box h5{font-size: 1.25em;font-weight: 600; margin-top: 10px;}


.ch5_BG span{ display: block; max-width:1000px; height: auto; margin: 0 auto; margin-top: 20px;background-image: url(/images/project/2017/interiorplan/exam.gif); height:346px; background-size: contain;background-repeat: no-repeat; }
.ch2_BG a , .ch5_BG a , .ch7_BG a{ display: block; width: 40%; height: 60px; text-align: center; line-height: 60px; margin: 0 auto; margin-top: 30px;font-size: 1.4em;background-color: #eb7140; color: #fff;}
.ch5_BG a i{text-decoration: line-through;}
.ch2_BG a:hover , .ch5_BG a:hover , .ch7_BG a:hover{background-color: #ad4b23;}



.ch6_BG  .pro_box{display: block; max-width:1000px; margin: 0 auto; overflow: hidden;position: relative; padding: 20px 0;box-sizing: border-box; height:450px; }
.ch6_BG .style_nav{ width:60%; margin: 0 auto; border: 1px solid #383838;text-align: center; overflow: hidden; margin-top: 30px; margin-bottom:50px;}
.style_nav li{ display: inline-block; width:20%;box-sizing: border-box;float: left;font-size: 1.25em;font-weight: 600;padding: 10px 0;  }
.style_nav li a{display: inline-block;  width:100%;text-align: center; border-left:1px dotted #383838; }
.style_nav li:hover{ background-color: #383838; }
.style_nav li a:hover{color: #eb7140;}


.pro_left{ width:40%;z-index:10;position:absolute;left: 0; top: 10%;}
.pro_left  ul li{ width: 100%;position: relative; margin-bottom:1px; }
.pro_left  ul li em{ display:inline-block; width: 100px; height: 100px; border-radius: 50%; background-position: 50% center;background-size: contain;float:left; position: relative; margin-right: 10px; }
.pro_left .item_no{ font-size: 3em;  font-family: "NotoSerifCJKtc"; font-style: italic; color: #fff;  position: absolute; left:10px; bottom:15px; }
.pro_left  li h3{ font-size:1.25em; font-weight: 600; color:#333; margin-top:20px;}
.pro_left  li p{color:#333;}
.pro_left  ul li a{display: block; overflow: hidden; height: 120px;background-color: #d4d4d4; padding: 10px 20px;box-sizing: border-box;line-height: 2em;  }
.pro_left  ul li a:hover{color: #fff;background-color: #eb7140;}
.pro_left  ul li a:hover h3 , .pro_left  ul li a:hover p{ color: #fff;}

.arrow {
  position: absolute;
  padding: 1.8rem; 
          box-shadow: 1px -1px 0 1px #fff inset;
  -webkit-box-shadow: 2px -2px #fff inset;
  border: solid transparent;
  border-width: 0 0 2rem 2rem;
  transition: 0.2s;
}

.arrow:hover {
          box-shadow: 2px -2px 0 2px #fff inset;
  -webkit-box-shadow: 4px -4px #fff inset;
}

.arrow-up    { transform:rotate(135deg) }
.arrow-right { transform:rotate(225deg) }
.arrow { top:70%;margin:-67px 0 0 -67px;right:0; }


.pro_right{ display: inline-block;  position: absolute;right:0; bottom:0;z-index:2;background-color: #fff;  padding: 15px; }
.pro_right span{display: block; overflow:hidden;max-width:630px; height:420px;}
.pro_right span img{ width: 100%; height: auto;}


.ch7_BG .wrapper{padding-bottom: 100px;} 
.question{display: block; font-size:1.6em; color: #0f5795;font-family: NotoSerifCJKtc; margin-top:80px; line-height: 1.6em;}
.question+p{ font-size:1.2em; margin-left:45px; margin-top:20px;}
.question+p strong{ font-weight: 700;}
.ch7_BG .q_progress_bar{margin-bottom: 10px; }



@media (max-width: 1024px) {
 article#kanban>div {  height:420px;}
article#kanban a{  width:30%;  right:25px;  }
.question+p{margin-left:0px; }
    .fb_base div:last-child,.line_base iframe:last-child {
        display:none;
    }
}



@media (max-width: 960px) {
.fb_share {
	top: -40px;
	right: 80px;
}
    .fb_base div:last-child,.line_base iframe:last-child {
        display:inline-block;
    }
.Designer_logo {
	left: 10px;
}
body {
	position: relative;
	right: 0;
}
	
/*按了漢堡後，版面往左推0px*/
.showMenu header, .showMenu main, .showMenu footer {
	left: 0px
}
nav {
	display: block;
	width: 150px;
	position: fixed;
	top: 0;
	bottom: 0;
	right: -270px;
	left: auto;
	z-index: 5;
	border-style: none;
	box-shadow: 0px 0px 8px rgba(0,0,0,0);
	margin: 0;
	background-color: #333;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
	text-align: left;
	height: auto;
}
nav a {
	display: block;
	width: 150px;
	height: 48px;
	line-height: 47px;
	color: #fff;
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
	margin: 0;
	padding-left: 10px;
	background-color: #333;
	position: relative;
	border-bottom: 1px dotted #4e4e4e;
	text-align: left;
	background-image: none;
	background-position: 0 !important;
}
nav a:hover {
	background-color: #eb7140;
    color: #fff;
}
nav>a {
	width: 100%;
}
header div {
	height: 60px;
	text-align: right;
}
header div>a {
	display: inline-block;
	width: 60px;
	height: 60px;
	vertical-align: top;
	line-height: 60px;
	text-align: center;
	margin-right: 1px;
	font-size: 13px;
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
}
#openMenu {
	display: inline-block;
	border-left: 1px solid #FFF;
}
#openMenu:hover {
	background-color: #00796B;
}
#openMenu span {
	position: absolute;
	display: block;
	width:35%;
	height: 3px;
	background-color: #FFF;
	top: 50%;
	left: 60%;
	margin-top: -2px;
	margin-left: -25%;
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
}
#openMenu span:before {
	top: -8px;
}
#openMenu span:after {
	bottom: -8px;
}
#openMenu span:before, #openMenu span:after {
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	background-color: #FFF;
	-webkit-transition: all 600ms ease;
	transition: all 600ms ease;
}
body.showMenu {
	overflow: hidden;
	right: 0px
}
.showMenu #openMenu span {
	background-color: rgba(255,255,255,0)
}
.showMenu #openMenu span:before {
	top: 0;
	transform: rotate(45deg)
}
.showMenu #openMenu span:after {
	bottom: 0;
	transform: rotate(-45deg)
}
.showMenu nav {
	right: 0
}
}


@media (max-width: 768px) {

article#kanban>div {  height: 300px;}
article#kanban a{  width:30%;  right:45px;  }
.note_box span{ border: 26px solid #333; border-color:rgba(51, 51, 51, 1) transparent transparent rgba(35, 35, 35, 1) ; }
.ch3_BG .wrapper a{display: block; max-width: 640px; height:780px; background-image:url(/images/project/2017/interiorplan/640x780.gif); margin: 0 auto;}  
    
.ch4_BG .wrapper span{ width: 90%;}    
.circle_info {width:80%;}
    
.budget_case{ display: block; width:100%;  margin-top:20px; padding:10px;overflow: hidden;box-sizing: border-box;}
.budget_case > ul{ width:60%;margin-top: 20px; }

.left_box{display:inline-block; width:100%;float: none; }
.left_box ul{ width: 20%;float: left; margin-right:10px;}
.left_box .main_img{width:78%;}

.right_box{ width:100%;padding-top:20px; }
.right_box  h4{ width: 50%;  }
.right_box h5{font-size: 1.25em;font-weight: 600; margin-top: 10px;}   
    
.ch5_BG span{ display: block; max-width:550px;  background-image: url(/images/project/2017/interiorplan/750x900.gif); height:660px;margin: 0 auto;text-align: center;}
.ch2_BG a , .ch5_BG a , .ch7_BG a{  width:80%;} 
    
.ch6_BG  .pro_box{ height:460px; }  
.ch6_BG .style_nav{ width:90%;  margin-bottom:15px;}
.style_nav li{ display: inline-block; width:20%;box-sizing: border-box;float: left;padding:8px 5px; }
.style_nav li span{display: none;}
    
.pro_left{ width:40%;z-index:10;position:absolute;left: 0; top: 10%;}
.pro_left  ul li{ width: 100%;position: relative; margin-bottom:1px; }
.pro_left  ul li em{  width: 80px; height: 80px;  }
.pro_left .item_no{ font-size: 2em; bottom:5px; }
.pro_left  li h3{ font-size:1.2em; font-weight: 600; color:#333; margin-top:10px;}
.pro_left  li p{color:#333;}
.pro_left  ul li a{height: 100px;  }

.arrow {   padding: 1rem; top:90%;margin:-67px 0 0 -67px;right:-20px; }


.pro_right{ display: inline-block;top:10px;   }
.pro_right span{ height:420px;}

        
    
}

@media (max-width: 660px) {
article#kanban>div {  background-image: url(/images/project/2017/interiorplan/640x500.gif); height:500px;background-size:cover; }
article#kanban a{ display:none; }  
section h2{font-size:2.6em;line-height:1.2em;  margin-bottom: 10px;   }
section h2+p , .ch1_BG h3 {  font-size: 1.5em; line-height:1.5em; }     
.ch1_BG table{ text-align: left; }
.note_box{ width:60%;}
.note_box span{ border: 26px solid #333; border-color:rgba(51, 51, 51, 1) transparent transparent rgba(35, 35, 35, 1) ; }
    
.ch3_BG .wrapper a{ height:780px; background-image:url(/images/project/2017/interiorplan/640x780.gif);}   
.ch4_BG .wrapper span{width: 100%; height:900px; background-image:url(/images/project/2017/interiorplan/680x900.gif); } 
.circle_info {width:80%; line-height: 1.6em;}
.circle_info ul li{  margin-top: 10px; }


.ch5_BG span{ background-image: url(/images/project/2017/interiorplan/750x900.gif); height:660px; }
.ch5_BG a{  width:95%;}     
.ch6_BG  .pro_box{ height:700px; }  

    
.pro_left{ width:100%; position:none; left: 0; top:0;}  
.pro_left  ul li{ width:33.330%;position:none; margin-bottom:0px;float:left;text-align: center; }
.pro_left  ul li em{ width: 150px; height:150px;float:none; position: relative;  }
.pro_left .item_no{ font-size:3em;  top:45% }
.pro_left  li h3{ font-size:1em; margin-top:10px;line-height: 1.3em;}
.pro_left  li p{display: none;}
.pro_left  ul li a{  height:270px; padding:10px; }

.arrow {   padding:1.5em; }
.arrow-up    { transform:rotate(46deg) }
.arrow-right { transform:rotate(-46deg) }
.arrow { top:95%; margin:-47px 0 0 -7px;right:60px; }

.pro_right{ display: block;  position:relative;right:0; bottom:-0px;z-index:2;background-color: #fff;  padding: 10px; }
.pro_right span{display: block; overflow:hidden;margin-top: 240px;}
    
}



@media (max-width: 480px) {
    
article#kanban>div {  background-image: url(/images/project/2017/interiorplan/480X400.gif); height:400px;background-size:cover; }
section h2{font-size:2.1em;  }
section h2+p , .ch1_BG h3 {  font-size: 1.2em; }
.ch1_BG table{ width:90%;text-align: left; }
.ch1_BG table tr th{ padding:10px; }
.note_box span{ border: 25px solid #333; border-color:rgba(51, 51, 51, 1) transparent transparent rgba(35, 35, 35, 1) ; }
 
.control {  display: block;  text-align: left; margin-left:80px;}
.wpb_wrapper{ width:90%;  }
.progress_number{ font-weight: 400;}
       
.ch3_BG .wrapper a{ height:600px; background-image:url(/images/project/2017/interiorplan/480x600.gif); }     

.ch4_BG .wrapper span{width: 100%; height:900px; background-image:url(/images/project/2017/interiorplan/480x900_circle.gif); } 
.circle_info {width:90%; line-height: 1.6em;}
.circle_info ul li{  margin-top: 10px; }
    
.budget_case{ display: block; width:100%;  margin-top:20px; padding:10px;overflow: hidden;box-sizing: border-box;}
.budget_case > ul{ width:80%;margin-top: 20px; }
.budget_case > ul li{ font-size: 1em; }

.left_box{display:inline-block; width:100%;float: none; }
.left_box ul{ width: 20%;float: left; margin-right:10px;}
.left_box .main_img{width:76%;}
 
.right_box  h4{ width: 50%;  }
     
.ch5_BG span{ background-image: url(/images/project/2017/interiorplan/480x760.gif); height:760px; }
.ch5_BG a{  width:95%; height:60px; line-height:60px; margin-top:00px;font-size:1.4em;}    
 
.ch6_BG  .pro_box{display: block; max-width:1000px; margin: 0 auto; overflow: hidden;position: relative; padding: 20px 0;box-sizing: border-box; height:570px; }
.ch6_BG .style_nav{ width:95%;  margin-bottom:15px;}
.style_nav li{ display: inline-block; width:20%;box-sizing: border-box;float: left;font-size:1em;padding:5px; }
.style_nav li span{display: none;}
    
.pro_left{display: block; width:100%; position:none; left: 0; top:0;}  
.pro_left  ul li{ width:33.330%;position:none; margin-bottom:0px;float:left; }
.pro_left  ul li em{ width: 130px; height:130px;float:none; position: relative;  }
.pro_left .item_no{ font-size:3em;  top:45% }
.pro_left  li h3{ font-size:1em; margin-top:10px;line-height: 1.3em;}
.pro_left  li p{display: none;}
.pro_left  ul li a{  height:250px; padding:10px; }

.arrow {   padding: 1em; }
.arrow-up    { transform:rotate(46deg) }
.arrow-right { transform:rotate(-46deg) }
.arrow { top:100%;margin:-47px 0 0 -67px;right:0; }

.pro_right{ display: block;  position:relative;right:0; bottom:-0px;z-index:2;background-color: #fff;  padding: 10px; }
.pro_right span{display: block; overflow:hidden;margin-top: 220px;}
}


@media (max-width: 414px) {
  .ch3_BG .wrapper a{ height:520px;  } 
  .ch4_BG .wrapper span{height:700px; }  
  .right_box  h4{ width: 50%; }
  .ch5_BG span{ height:600px; }  
  .style_nav li{font-size:.9em; }  
  .ch5_BG span{ background-image: url(/images/project/2017/interiorplan/480x760.gif); height:660px;margin-top: 20px; }
  .ch5_BG a{  width:90%; height:40px; line-height:40px; margin-top:00px;font-size:1.2em;}   

.ch6_BG  .pro_box{height: 500px;}     
.pro_left{display: block; width:100%; position:none; left: 0; top:0;}  
.pro_left  ul li em{ width: 95px; height:95px;  }
.pro_left .item_no{ font-size:2.5em;  top:32% }
.pro_left  li h3{ font-size:1em;}
.pro_left  ul li a{  height:220px; padding:10px; } 
.pro_right span{display: block; overflow:hidden;margin-top:190px;}   
}


@media (max-width: 375px) {
    
 article#kanban>div {  background-image: url(/images/project/2017/interiorplan/480X400.gif); height:250px;background-size:cover; }   
 section h2{font-size:2.6em; line-height:1.2em; margin-bottom: 10px; }
 section h2+p , .ch1_BG h3 {  font-size: 1.25em; line-height:1.5em; }   
 .note_box span{ border:25px solid #333; border-color:rgba(51, 51, 51, 1) transparent transparent rgba(35, 35, 35, 1) ; }
 .control {  display: block;  margin-bottom: 10px; font-size: 1em;text-align: left; margin-left:60px;}
  
 .ch3_BG .wrapper a{ height:500px; }     

 .ch4_BG .wrapper span{width: 100%; height:600px; } 
 .ch5_BG span{height:600px; }
 .ch5_BG a{  width:95%; height:60px; line-height:60px; margin-top:00px;font-size:1.2em;}  
 

.ch6_BG  .pro_box{height: 480px;} 
.ch6_BG .style_nav{ width:95%;  margin-bottom:15px;}
.style_nav li{font-size:.8em;}
        
.pro_left{display: block; width:100%; position:none; left: 0; top:0;}  
.pro_left  ul li em{ width: 95px; height:95px;  }
.pro_left .item_no{ font-size:2.5em;  top:32% }
.pro_left  li h3{ font-size:1em;}
.pro_left  ul li a{  height:220px; padding:10px; }

.pro_right{ display: block;  position:relative;right:0; bottom:-0px;z-index:2;background-color: #fff;  padding: 10px; }
.pro_right span{display: block; overflow:hidden;margin-top:190px;}
}


@media (max-width: 320px) {
    
article#kanban>div {  background-image: url(/images/project/2017/interiorplan/480X400.gif); height:250px;background-size:cover; }
article#kanban a{ display:none; }
section .wrapper{ padding-top:40px;}
section h2{font-size:2.5em; line-height:1.2em; margin-bottom: 10px; }
section h2+p , .ch1_BG h3  {  font-size: 1.25em; line-height:1.5em; }
.ch1_BG table{ width:95%; }
.ch1_BG table tr th{ padding:5px 10px;border:5px solid #20b37d; }
.note_box span{ border: 25px solid #333; border-color:rgba(51, 51, 51, 1) transparent transparent rgba(35, 35, 35, 1) ; }
 
.control {  display: block;  margin-bottom: 10px; font-size: 1em;text-align: left; margin-left: 40px;}
.wpb_wrapper{ width:90%;  }
.progress_number{ font-weight: 400;}
   
.ch3_BG .wrapper a{ height:400px; background-image:url(/images/project/2017/interiorplan/320x400.gif); } 
    
.ch4_BG .wrapper span{width: 100%; height:550px; background-image:url(/images/project/2017/interiorplan/480x900_circle.gif); } 
.circle_info {width:90%; line-height: 1.6em}
.circle_info ul li{  margin-top: 10px; }
    
.budget_case{ display: block; width:100%;  margin-top:20px; padding:10px;overflow: hidden;box-sizing: border-box;}
.budget_case > ul{ width:80%;margin-top: 20px; }
.budget_case > ul li{ font-size: 1em; }

.left_box{display:inline-block; width:100%;float: none; }
.left_box ul{ width: 20%;float: left; margin-right:10px;}
.left_box .main_img{width:76%;}

.right_box{ width:100%;padding-top:20px; }
.right_box  h4{ width: 60%;  font-size: 1.4em;}
.right_box h5{font-size: 1.25em;font-weight: 600; margin-top: 10px;}
    
.ch5_BG span{ margin-top: 20px;background-image: url(/images/project/2017/interiorplan/320x400.gif);height: 400px;}
.ch5_BG a {  width:95%; height:40px; line-height:40px; margin-top:10px;font-size: 1em;}

.ch6_BG  .pro_box{display: block; max-width:1000px; margin: 0 auto; overflow: hidden;position: relative; padding: 20px 0;box-sizing: border-box; height:410px; }
.ch6_BG .style_nav{ width:95%;  margin-bottom:15px;}
.style_nav li{ display: inline-block; width:20%;box-sizing: border-box;float: left;font-size:1em;padding:5px; }
.style_nav li span{display: none;}

.pro_left{display: block; width:100%; position:none; left: 0; top:0;}  
.pro_left  ul li{ width:33.330%;position:none; margin-bottom:0px;float:left;text-align: left; }
.pro_left  ul li em{ width: 80px; height: 80px;float:none; position: relative;  }
.pro_left .item_no{ font-size:2em;  top:35% }
.pro_left  li h3{ font-size:1em; margin-top:10px;line-height: 1.3em;}
.pro_left  li p{display: none;}
.pro_left  ul li a{  height:200px; padding:10px; }

.arrow {   padding: 1em; }
.arrow-up    { transform:rotate(46deg) }
.arrow-right { transform:rotate(-46deg) }
.arrow { top:100%;margin:-47px 0 0 -67px;right:0; }

.pro_right{ display: block;  position:none;right:0; bottom:40px;z-index:2;background-color: #fff;  padding: 10px; }
.pro_right span{margin-top:170px;}  
.pro_right span img{ width: 100%; height: auto;}    
}
@media (max-width: 480px) {
    .line_base iframe:last-child {
        display:none;
    }
}
@media (max-width: 320px) {
    .fb_base div:last-child {
        display:none;
    }
}
.note{ display:block;  color:#333; text-align:center; font-size:14px; overflow: hidden; line-height: 1.5em; }