/* ---------------------------------------------------------------------------- */
/* ------------------------------------Reset----------------------------------- */
/* ---------------------------------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
input, textarea {border:0; padding:0; margin:0; outline: 0;}
iframe {border:0; margin:0; padding:0;}
input, textarea, select {margin:0; padding:0px;}

/*button setting*/
.btn-red,.btn-red:focus{ background: #A10D23; color: #fff; padding: 10px 20px; border-radius: 5px; display: inline-block; font-family: '微軟正黑體'}
.btn-red:hover{ color: #fff; background: #000}

.btn-red-s,.btn-red-s:focus{ background: #A10D23; color: #fff; padding: 5px 10px; border-radius: 5px; display: inline-block; font-family: '微軟正黑體'}
.btn-red-s:hover{ color: #fff; background: #000}
.btn-red-s-nohover{ background: #A10D23; color: #fff; padding: 5px 10px; border-radius: 5px; display: inline-block; font-family: '微軟正黑體'}
.btn-bk-s-nohover{ background: #000; color: #fff; padding: 5px 10px; border-radius: 5px; display: inline-block; font-family: '微軟正黑體'}

.btn-red-wide,.btn-red-wide:focus{ background: #A10D23; color: #fff; padding: 10px 50px; border-radius: 5px; display: inline-block; font-family: '微軟正黑體'}
.btn-red-wide:hover{ color: #fff;background: #000}

.green-text { color: #178A27; }
.blue-text { color: #1686C1; }
.gray-text { color: #1686C1; }
.green-btn { background: #178A27; }
.green-btn:hover { background: #449D44; }
.blue-btn { background: #1686C1; }
.blue-btn:hover { background: #31B0D5; }
.red-btn { background: #852406; }
.red-btn:hover { background: #C9302C; }
a,a:active{ transition: all 0.5s; color: #C30D23}
a:hover,a:focus{ color:#C30D23; text-decoration: none;}
.nav a:hover,.nav a:focus,.nav a:visited{ transition: all 0.5s; color: #fff; text-decoration: none}



/*font-size bold setting*/


.bold{ font-weight: bold;}
.h1{font-size: 46px; line-height: 42px;}
.h2{font-size: 36px; line-height: 42px;}
.h3{font-size: 26px; line-height: 32px;}
.h4{font-size: 20px;}
p{ 
  font-size: 18px;
  line-height: 1.8em;
  margin: 0;}
.delete-line{text-decoration:line-through; font-style: normal}

.text-red{ color: #C30D23 }
.text-black{ color: #000 }


/*width margin padding setting*/
.mgb-30{ margin-bottom: 30px;}
.mgb-20{ margin-bottom: 20px;}
.mgt-30{ margin-top: 30px;}
.mgt-20{ margin-top: 20px;}
.mgt-10{ margin-top: 10px;}
.mgt-0{ margin-top: 0px;}
.mg-0{ margin: 0px;}
.pd-0{ padding: 0px;}
.w40{ width: 40%;}
.w100{ width: 100%;}
.disib{ display: inline-block}
.fll{ float: left;}
.flr{ float: right;}

/*CIS setting*/
.line{
    width: 77%;
    height: 6px;
    margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
    background: -moz-linear-gradient(-45deg, #000000 0%,#000000 25%,#C30D23 25%,#C30D23 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 25%,#C30D23 25%,#C30D23 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(-45deg, #000000 0%,#000000 25%,#C30D23 25%,#C30D23 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C30D23', endColorstr='#000000',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
}
.line2{
    width: 40%;
    height: 6px;
    margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
    background: -moz-linear-gradient(-45deg, #000000 0%,#000000 25%,#C30D23 25%,#C30D23 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 25%,#C30D23 25%,#C30D23 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(-45deg, #000000 0%,#000000 25%,#C30D23 25%,#C30D23 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C30D23', endColorstr='#000000',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
}

/*Header NAV setting */
.headertop {
  position: absolute;
  z-index: 9; width: 100%;
  padding: 80px 0;

}
.navbar-brand{ padding: 10px 15px}
.navbar-default{ background: #000}
.navbar-default .navbar-nav li a span {
  position: relative;
  display: block;
  padding-bottom: 2px;
}

.navbar-default .navbar-nav li a span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
    background-color: #BE0D23 ;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navbar-default .navbar-nav li a:hover span:before,
.navbar-default .navbar-nav li a.active span:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

.navbar-default .navbar-nav li.active a span:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  background-color: #BE0D23;
}

.navbar-default .navbar-nav > li a:hover,
.navbar-default .navbar-nav > li a.active{
    color: #BE0D23 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
     border: none;
     padding-top: 10px;
  }

.navbar-default .navbar-toggle .icon-bar {
    border-color: transparent;
  }

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { 
  background-color: transparent;
}
.navbar-default .navbar-nav>li>a{ color: #fff; text-align: left}
.navbar-default{ background: #000}
 .navbar-inverse {
    background-color: #383E4C;
    border-color: #383E4C;
}
.navbar-nav>li {
    display: inline-block;
    padding: 10px;
}
.navbar-inverse .navbar-nav>li>a {
    background: #383E4C none repeat scroll 0 0;
    border: 1px solid #646d7c;
    color: #fff ;
    font-size: 20px;
    padding: 15px 25px;
    text-decoration: none;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

.navbar-inverse .navbar-nav > li > a.current,
.navbar-inverse .navbar-nav > li > a:hover {
        background: #49505F;
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}
@media only screen and (max-width: 769px) {
    
    .navbar .navbar-nav{ display: none;}
    .navbar-header{ width: 100%;}
    .navbar-default .navbar-toggle{ display: block;}
    .navbar-toggle{ margin-right: 0;}
    .nav li{ width: 100%;}
    .navbar-default .navbar-nav > li > a:hover{ text-decoration: none!important; color: #fff !important}
    .navbar-default .navbar-nav li a:hover span:before, .navbar-default .navbar-nav li a.active span:before{ display: none;}
    .navbar-brand img{ height: 35px;}
     
}
/* Start Footer CSS */
footer {
  background: #1F1F1F;
  color: #fff;
  padding: 20px 0;
}
ul.social-buttons li a {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 40px;
    outline: 0;
    color: #fff;
    background-color: #c30d23;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    text-align: center;
}
.list-inline img{ width: 20px; position: relative; top: 10px}
.copyright{ line-height: 40px;}
.row{ margin-left: 0; margin-right: 0}
ul.social-buttons li a:hover,
ul.social-buttons li a:focus,
ul.social-buttons li a:active {
    background-color: #000;
}

/*Custom CSS*/
#nav-gomb{ background: #f1f1f1}
.goodmb{ color: #000; font-size:1.2em; width: 340px; margin: 0 auto; margin-bottom: 30px;}
.goodmb .tit{ color: #A10D23; font-weight: bold;}
table {
    width: 50%;
    margin: 0 auto
}

table td {
    border: 3px solid #fff;
    padding: 8px;
    font-weight: bold;
    color: #000;
    text-align: center;
}
table tr:nth-child(even){ background: #eee}

td:first-child {
    text-align: left;
    color: #333
}

td.hed {
    font-weight: bold;
    background: #C30D23;
    color: #fff;
}
h2{ font-family: '微軟正黑體' !important;}

.vipwrap{ width: 100%; background: url(../images/bg-01.jpg) center bottom no-repeat; z-index: -1; padding-top: 50px;}
.vipbox{width: 100%;padding: 10px; text-align: left; display: inline-block;}
.vipbox .fll{ width: 20%; position: relative}
.vipbox .flr{ width: 75%;}
.vipbox .h4{ margin-bottom: 5px;}
.vipbox img{ margin-right: 15px; margin-top: 40px;}
.vipbox p{float: left; margin-top: 0; font-size: 15px;}

.vipintro{ margin-bottom: 80px; text-align: center; margin-top: 30px;}
.vipintro img{ margin-bottom: 0px; }
.vipintro .h4{ margin-bottom: 15px; color: #c30d23; font-weight: bold;}
.vipintro .line2{ margin-bottom: 50px; }
.vipintro p{ margin-top: 0px;}
.color-red{ color:#c30d23 !important }

.note{ color: #A10D23; font-size: 22px; font-weight: bold;}
.bg-color-gray{ }
.clothsp > div{ padding: 10px; text-align: center; color: #333; font-size: 18px;}
.clothsp a{ color: #333;}
.clothsp a img{transition: all 0.5s}
.clothsp a:hover{ color: #A10D23}
.clothsp a:hover img{transform: scale(1.05); transition: all 0.5s}
.clothsp span{ font-weight: bold; margin-top: 20px; color: #A10D23; display: inline-block; margin-bottom: 10px;}
.clothsp .pjtext{ }

.clothsp{ margin-bottom: 60px;}
.clothsp > div{ position: relative}
.clothsp .btn-red-s{ position: absolute; right: 20px; bottom: 90px; color: #fff}


@import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700|Montserrat:300,400,500,600,700,800,900|Open+Sans:300,400,600,700,800');



/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

::-moz-selection{background: #97534e none repeat scroll 0 0;color: #fff;text-shadow:none}
::selection{background: #97534e none repeat scroll 0 0;color: #fff;text-shadow:none}

/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: none;}
.video embed,.video object,.video iframe { width: 100%;  height: auto;}
img{max-width:100%;	height: auto;width: auto\9; /* ie8 */}

a{color: #97534e;text-decoration: none;-moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
	transition-duration: 0.3s;}
a:hover {color: #97534e;}

h1, h2 	{font-size: 25px;line-height: 25px;}
h3, h4	{font-size: 20px;line-height: 20px;}
h5, h6	{font-size: 16px;line-height: 16px;}
h1,h2,h3,h4,h5,h6{letter-spacing: 2.5px;font-weight: 500;line-height:1.1; color: #141414;}

p{margin: 10px 0;color: #333;}

input:not([type]), input[type="color"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"], input[type="search"], textarea, select {height: 45px;padding-left: 20px;border: 1px solid #ddd;border-radius: 0;box-shadow: none;line-height: 22px;letter-spacing: .5px;-webkit-transition: border-color 0.5s;transition: border-color 0.5s;width: 100%;margin: 7px 0;}
input:focus, input:hover, textarea:hover, select:hover, textarea:focus, select:focus {outline: none;box-shadow: none;border-color: #777;}

.t-center{text-align: center;}
.t-left{text-align: left;}
.t-right{text-align: right;}
.f-right{float: right;}
.f-left{float: left;}

.post{}
.post:after, .post:before, article:after, article:before, section:after, section:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;}

.clear{content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:after, .clearfix:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;}

.list-inline li{display: inline-block;}

/* --Line-- */
hr{ margin: 20px auto 0; padding: 0; max-width: 210px;border: 0; border-top: double 4px;text-align: center;display: block; line-height: 1px; height: auto;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;-ms-box-sizing: content-box;-o-box-sizing: content-box;box-sizing: content-box;}

hr.line01:after, 
hr.line02:after,
hr.line03:after{content: url(../images/rose.png);display: inline-block;position: relative;top: -12px;padding: 0 10px;}

hr.line01 {border-color: #111;}
hr.line01:after {color: #111;background-color: #F7F7F7;}

hr.line02 {border-color: #111;}
hr.line02:after {color: #111;background-color: #ffffff;}

hr.line03 {border-color: #fff;}
hr.line03:after {color: #fff;background-color: #303231;}

/* ---------------------------------------------------------------------------- */
/* ----------------------------------Html-Body--------------------------------- */
/* ---------------------------------------------------------------------------- */
html, body {height: 100%;width:100%; padding:0; margin:0;}
body {background: #fff;
    font-family: "微軟正黑體";
    font-size: 14px;line-height: 1.8em;color: #777; padding-top: 70px;}

body.index-page{}
body.sub-page{}
body.sub-page header .main-header{height: 40vh;}
body.sub-page header .main-header .hero-lead{margin-bottom: 0}
body .wrap-body{}

/* ---------------------------------------------------------------------------- */
/* -----------------------------------Header----------------------------------- */
/* ---------------------------------------------------------------------------- */
header{z-index: 2;position: relative;}


header .wrap-header{}
header .main-header{position: relative;height: 100vh;width: 100%;background: url(../images/hero.jpg) center center;background-size: cover;}

.main-header .bg-overlay{}

.main-header .hero-content-wrapper{display: table;position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding-left: 10%;transition: opacity 1s ease 0s, transform 1s ease 0s;opacity: 1;}
.main-header .hero-content-wrapper .hero-content{display: table-cell;width: 100%;height: 100%;vertical-align: middle; position: relative; top: -50px;}
.main-header .hero-lead{font-size: 6em;font-weight: 700;letter-spacing: 2px;color: #000;margin-bottom: 50px;}
.main-header .h-alt{margin-bottom: 10px;color: #b01a2e
;font-weight: 400;font-size: 1.3em;letter-spacing: 3px;text-transform: uppercase}
.main-header .button-skin{background: #97534e;border:2px solid #97534e;}
.main-header .button-skin:hover{background: transparent;color: #fff;border:2px solid #fff;}
.main-header .hero-content-wrapper.remove {-moz-transform: translateY(3rem);-webkit-transform: translateY(3rem);-ms-transform: translateY(3rem);transform: translateY(3rem);-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;opacity: 0;visibility: hidden;}

.main-header .scroller {bottom: 15px;color: rgba(235, 235, 235, 0.5);display: inline-block;font-size: 40px;left: 0;margin: 0 auto;text-align: center;width: 120px;transition: all 0.5s }
.main-header .scroller:focus {color: inherit;text-decoration: none;}
.main-header .scroller:hover {color: #000;transition: all 0.5s}
.main-header .scroller:hover .scroller-text {opacity: 1;transform: translateY(-10px);transition: all 0.5s}
.main-header .scroller:hover .scroller-button {border: 2px solid #000; background: #000;transition: all 0.5s}
.main-header .scroller:hover .scroller-button i{ color: #fff;transition: all 0.5s}
.main-header .scroller .scroller-text {display: block;font-size: 10px;letter-spacing: 2.5px;text-transform: uppercase;color: #ececec;-webkit-transform: translateY(5px);-ms-transform: translateY(5px);transform: translateY(5px);opacity: 0;-webkit-transition: all 0.3s;transition: all 0.3s;}
.main-header .scroller .scroller-button{border: 2px solid #b01a2e;display: inline-block;padding: 8px 3px 5px;border-radius: 20px;font-size: 0.8em;}
.main-header .scroller .scroller-button{color: #b01a2e;}

.project-name .text{ font-size: 16px; margin-top: 20px;}

#nav-sp{ background: #fff}


/* ---------------------------------------------------------------------------- */
/* ----------------------------------Container--------------------------------- */
/* ---------------------------------------------------------------------------- */
#page-content {position: relative;overflow: visible;z-index: 1;background: #ffffff;box-shadow: rgba(0,0,0,0.7) 0 105px 90px -90px;}
#container .wrap-container{background: #ffffff;}

/* ---content-box--- */
.content-box {}
.content-box .wrap-box {padding:50px 10px; position: relative;}
.content-box .header {text-align: center; margin: 0px 0 40px;text-transform: uppercase;}
.content-box .header h2{ font-weight: bold;letter-spacing: 4px;color: #111;}
.content-box .header .wrapper{padding: 5px; display: inline-block;}
.intro {display: block;font-weight: 300;color: #333; font-size: 17px; font-weight: bold;margin-top: 25px;letter-spacing: 2.5px;}

.content-box.box-style-1{background: #fff;}
.content-box.box-style-2{background: url(../images/bg-2.jpg) fixed no-repeat;position: relative;}
.content-box.box-style-2:before{position: absolute;content: ""; height: 100%; width: 100%;background: rgba(0, 0, 0,0.65);top: 0;left: 0;right: 0;bottom: 0;visibility: initial;}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Box 1----------------------------------- */
/* ---------------------------------------------------------------------------- */
.content-box.box-1 {text-align: right}
.content-box.box-1 .about-sum{ width: 615px; margin: 0 auto}
.content-box.box-1 .about-sum h3{color: #141414;font-size: 2.1em;margin-bottom: 20px; line-height: 36px;}
.content-box.box-1 .about-sum p{font-size: 18px;margin-bottom: 15px; color: #000}
.content-box.box-1 .about-sum .button-skin{margin-top: 40px;}
@media (max-width: 767px) {
	.content-box.box-1 {text-align: center}
	.content-box.box-1 .about-sum{margin-bottom: 50px;}
}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Box 2----------------------------------- */
/* ---------------------------------------------------------------------------- */
.content-box.box-2 .wrap-box{padding: 50px 0 0;}
.content-box.box-2 .button-skin {background: #fff;color: #111;border:2px solid #fff;}
.content-box.box-2 .button-skin:hover{background: transparent;color: #fff;border:2px solid #fff;}
@media all and (max-width: 767px){
	.content-box.box-2 .wrap-box{padding: 50px 0;}
}
/* ---------------------------------------------------------------------------- */
/* ------------------------------------Box 3----------------------------------- */
/* ---------------------------------------------------------------------------- */
.content-box.box-3 {}
.content-box.box-3 .testimonial-cards .key-tcards {padding: 0 15px;text-align: center;}
.content-box.box-3 .testimonial-cards .tcards_header .tcards-name {font-size: 16px;font-weight: 700;margin: 20px 0 8px;color: #2f2f2f;}
.content-box.box-3 .testimonial-cards .tcards_header .tcards-job {display: block;font-style: normal;line-height: 1;margin-bottom: 30px;}
.content-box.box-3 .testimonial-cards .tcards_header .tcards-image img {border-radius: 50%;height: 70px;margin: auto;width: 70px;}
.content-box.box-3 .testimonial-cards .tcards_message {background-color: #97534e;border: 0 none;border-radius: 0;margin-bottom: 30px;margin-top: 0;padding: 35px;position: relative;color: #fff;}
.content-box.box-3 .testimonial-cards .tcards_message h5{color: #fff;}
.content-box.box-3 .testimonial-cards .tcards_message p{color: #fff;}
.content-box.box-3 .testimonial-cards .tcards_message.author-bottom:before {border-color: #fff transparent transparent;bottom: -20px;top: auto;}
.content-box.box-3 .testimonial-cards .tcards_message:before {border-style: solid;border-width: 10px;content: "";display: block;height: 0;left: 50%;margin-left: -10px;position: absolute;width: 0;}
.content-box.box-3 .testimonial-cards .tcards_message:before {border-color: transparent transparent #fff;top: -20px;}
.content-box.box-3 .testimonial-cards .tcards-title {font-size: 16px;font-weight: 700;line-height: 22px;margin-bottom: 15px;margin-top: 0;text-transform: uppercase;}
.content-box.box-3 .testimonial-cards .tcards_message.author-bottom:before {border-top-color: #97534e;}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Box 4----------------------------------- */
/* ---------------------------------------------------------------------------- */
.content-box.box-4 .box-entry {color: #4d4d4d; margin: 0 auto 30px;background: #fff;transition: all 300ms ease 0s;border: 1px solid #eee;max-width: 400px}
.content-box.box-4 .box-entry .box-entry-inner{position: relative;z-index: 1;}
.content-box.box-4 .box-entry img{border: none; width: 100%;}
.content-box.box-4 .box-entry .entry-details{ text-align: center}
.content-box.box-4 .box-entry .entry-des {padding: 20px 40px;}
.content-box.box-4 .box-entry .entry-des h3{margin-bottom: 20px;font-size: 1.5em;font-weight: 500;}
.content-box.box-4 .box-entry .entry-des h3 a{color: #b01a2e; font-weight: bold;}
.content-box.box-4 .box-entry .entry-des span a{margin: 10px 0; display:block;color: #aaa;font-size: 1em;}
.content-box.box-4 .pro-price-content{display: inline-block;font-size: 24px;font-weight: 500;margin-bottom: 0;margin-top: 7px;}
.content-box.box-4 .box-entry:hover{box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.15);margin-top: -5px;}

.content-box.box-4 .button-skin {margin: 10px 0 10px;}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Box 5----------------------------------- */
/* ---------------------------------------------------------------------------- */
.content-box.box-5{}
.content-box.box-5 .clients-logo{text-align: center;}
.content-box.box-5 .clients-logo img{max-width: 140px;}
.content-box.box-5 .header h2{color: #fff;}


/* ---Article--- */
article.single-post .wrap-post, .comments-are {padding:30px 20px;margin-top: 30px;}
article{ border-bottom: 1px solid #ddd; margin: 30px 0 40px;padding-bottom: 30px}
article:last-child{border-bottom: none;}
article:after, article:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;}

article .post-thumbnail-wrap {text-align: center;width: 100%;margin-bottom: 20px;}
article .post-thumbnail-wrap img {width: 100%;}
article h2.entry-title{font-size: 2em;font-weight: 400;}
article h2.entry-title a{color: #141414;}
article h2.entry-title a:hover{color: #555}

article .entry-header{margin-bottom: 30px;}
article.single-post .entry-header{text-align: center}
article.single-post .entry-header h1.entry-title{font-size: 2.5em;font-weight: 400;}

article .entry-header .entry-meta{margin: 10px 0 20px;}
article .entry-header .entry-meta a{color: #777;margin: 5px;display:inline-block}
article .entry-header .entry-meta a:hover{color: #97534e;}
article .entry-header .entry-meta i{margin: 3px 5px;}

article .entry-content{}
article.single-post .entry-content{ padding: 30px 120px;}
@media  (max-width: 540px){
	article.single-post .entry-content{ padding: 30px;}
}
article .entry-content p{color: #686868;}
article .entry-content blockquote {border-left: 3px solid #1c7791;margin: 0 50px;font-style: italic;color: #666;padding-left: 20px;}
article .entry-content ol {display: block;margin: 10px 50px;list-style-type: circle;}

.comments-are textarea {height:170px;}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Footer---------------------------------- */
/* ---------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------- */
/* -----------------------------------Button----------------------------------- */
/* ---------------------------------------------------------------------------- */
.button{
	cursor: pointer;
	font-size: 0.8em;
	border:1px solid #ffffff; 
	display: inline-block;
	text-decoration: none;
	margin: 10px 0 5px;
	color: #fff;
	padding: 10px 15px;
	-webkit-transition: all .35s;
	-moz-transition: all .35s;
	transition: all .35s;
	text-shadow: none;
	text-align: center;
}
.button:hover{text-decoration: none; background: #303030;}

.button-skin {background: #777;color: #fff;padding: 5px 30px;border:2px solid #777777;letter-spacing: 2.5px;text-transform: uppercase;font-weight: 300;}
.button-skin:hover{background: transparent;color: #111;border:2px solid #111;}
.button-toTop{font-size: 1.7em;height: 42px;width: 42px;padding: 7px 0 0;border: 2px solid #fff;margin: 0;}
.button-toTop:hover{}


/* ---------------------------------------------------------------------------- */
/* ------------------------------Portfolio Box--------------------------------- */
/* ---------------------------------------------------------------------------- */	
.portfolio-box {display: block;position: relative;margin: auto;overflow: hidden;}

/****** Zoom Effect ******/
.portfolio-box.zoom-effect .portfolio-box-caption{background: rgba(45, 50, 56,0.2);}
.portfolio-box.zoom-effect img{-webkit-transition: 0.5s ease;transition: 0.5s ease;}
.portfolio-box:hover.zoom-effect img{-webkit-transform:scale(1.1); /* Safari and Chrome */-moz-transform:scale(1.1); /* Firefox */-ms-transform:scale(1.1); /* IE 9 */-o-transform:scale(1.1); /* Opera */transform:scale(1.1);}


.portfolio-box .portfolio-box-caption {display: block;position: absolute;bottom: 0;width: 100%;height: 100%;text-align: center;color: #fff;-webkit-transition: all .35s;-moz-transition: all .35s;transition: all .35s;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {position: absolute;top: 50%;width: 100%;text-align: center;transform: translateY(-50%);}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-button,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {padding: 0 15px;text-transform: uppercase;font-weight: 600;letter-spacing: 2px;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {font-size: 0.85em;color: #97534e;margin-bottom: 10px;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {font-size: 1.5em;margin-bottom: 3px;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-button{transition: all 1s ease;opacity: 0; height: 0;overflow: hidden;}

.portfolio-box:hover .portfolio-box-caption {opacity: 1;background: rgba(0, 0, 0, .6);}
.portfolio-box:hover .portfolio-box-caption .portfolio-box-caption-content .project-button{opacity: 1;height: auto;}
.portfolio-box:hover .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box:hover .portfolio-box-caption .portfolio-box-caption-content .project-name{display: none;}

@media(min-width:768px) {
    
}
@media only screen and (min-width: 450px) and (max-width: 767px){
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 1.2em;
    }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 2em;
    }
}


@media (max-width: 1200px) {
table{ width: 70%;}
}
@media (max-width: 1024px) {
    header .main-header{ height: 60vh}
    .main-header .hero-lead{ font-size: 4.5em; margin-bottom: 30px;}
}
@media (max-width: 992px) {
  .main-header .hero-lead img{ width: 70%}
.main-header .h-alt{font-size: 1em;}
    .content-box.box-1 .about-sum{ width: 100%;}
    table{ width: 96%;}
    .line2{ width: 80%;}
    .vipintro .btn-red-s{ margin-bottom: 70px;}
    .mb-no{ display: none;}
    .content-box .wrap-box{ padding: 50px 10px;}
    .content-box.box-1 .about-sum{ margin-bottom: 0;}
    .content-box .header{ width: 90%; margin: 20px auto}
    .main-header .hero-content-wrapper{ height: 100%;}
    .vipintro{ margin-bottom: 0;}
    #nav-sp .wrap-box{ padding-bottom: 0;}
    header .main-header{ background: url(../images/vip_kv_mb_notext.jpg) center no-repeat; background-size: cover}
    
}
@media (max-width: 768px) {
    .main-header .hero-content-wrapper{ height: 80%}
    .main-header .hero-lead img{ width: 80%}
	header .main-header{height: 70vh;}
    .main-header .hero-lead{ margin-bottom: 20px;}
    .list-inline{ text-align: center}
    footer .text-left{ text-align: center}
}
@media (max-width: 440px) {
    .main-header .hero-content-wrapper{ height: 70%}
    .goodmb{ width: 80%; margin: 0 auto}
    header .main-header{ height: 70vh}
    .mb-hide{ display: none;}
}
@media (max-width: 320px) {
    header .main-header{ height: 80vh}
    .main-header .hero-content-wrapper{ padding-left: 6%;}
    .main-header .scroller .scroller-button{
        padding: 2px 3px 1px;border-radius: 13px; font-size: 0.6em;
    }
}