/*------------↓Bootstrap↓------------*/

.h2, h2,.h3, h3{font-weight: 600;margin-top: 0;line-height: 1.2;}
.h2, h2{font-size: 5rem;}
.h3, h3{font-size: 4rem; }
.title{ margin: 0 auto 55px auto;position: relative;}
.title::before {
    position: absolute;
    content: '';
    height: 2px;
    width: 120px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #666;
}
.title::after {
    position: absolute;
    content: '●';
    background: inherit;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    font-size: 1.5rem;
}
.h4, h4,.h5, h5 { font-size: 2.9rem;line-height: 1.5;margin-bottom:20px;}
.h6, h6,.btn-lg { font-size: 2.4rem;}
p { font-size: 1.9rem;line-height: 1.5;margin-bottom:30px}
hr {margin:5px auto;}
h5 span,p span {}
a,a:hover {text-decoration: none;}
strong.lead {font-size:150%;font-weight: 600;}
h2 strong.lead {font-family:  Arial, Helvetica, sans-serif;}

/*---↓NAV↓------------*/
.oulin .navbar-inverse {background-color:#c11;}
.oulin .navbar > .container .navbar-header { float: left;width: 100%; padding-top:15px;}
.oulin .navbar > .container .navbar-brand {float: none;margin:0 auto;color: #fff;font-size: 3.2rem;font-weight: 600;}

/*---↑NAV↑------------*/

/*------------↑Bootstrap↑------------*/

/*------------↓footer↓------------*/
footer .bg {padding: 5% 2%;background-color:#e5e5e5;}
/*------------↑footer↑------------*/

body {font-size: 1.6rem; font-family: 微軟正黑體; }
* {font-family: 微軟正黑體; }
img { height: auto;max-width: 100%; }

.fb{ max-width:500px; margin:0 auto;}

.bg {padding: 5% 0;}
.col_1 {position: relative;z-index: 999999;}
.col_1 .bg {background-color:#c11; padding:8% 2%;color:#fff;}
.col_1 h3 {letter-spacing:5rem;padding-left:6rem;  }
.col_2 .bg,.col_4 .bg {background-position: center top;background-repeat: no-repeat;background-size: 100%;background-attachment: fixed;}
.col_2 .bg {background-image: url('bg_1.jpg');background-color: #d2d2d2;}
.col_4 .bg {background-image: url('bg_2.jpg');background-color: #323232;color:#fff;}
.col_4 img { margin-bottom:2%} 
 
@media only screen and (max-width: 1280px) { 
.h2, h2,.carousel-caption h1{font-size: 4rem;}
.h3, h3{font-size: 3.5rem;}
.h4, h4,.h5, h5 { font-size: 2.6rem;}
.h6, h6,.btn-lg { font-size: 2.2rem;}
p { font-size: 1.7rem;}
.navbar-inverse .navbar-brand {font-size: 3rem;}
footer .bg {padding: 5% 0;}
}
@media only screen and (max-width: 980px) { 
.col_1 h3 {letter-spacing:2rem;padding-left:3rem;  }      
}
@media only screen and (max-width: 800px) { 
.h2, h2,.carousel-caption h1{font-size: 3.3rem;}
.h3, h3{font-size: 3rem;}
.h4, h4,.h5, h5,.oulin .navbar > .container .navbar-brand { font-size: 2.4rem;}
.h6, h6,.btn-lg { font-size: 2.1rem;}
p { font-size: 1.6rem;}
strong.lead {font-size:130%;}
.oulin .navbar > .container .navbar-header {margin:0 auto;}
.col_1 h3 {letter-spacing:6rem;padding-left: 6rem; }
.col_2 .bg,.col_4 .bg {background-attachment: scroll;}

}
@media only screen and (max-width: 768px) { 
.col_1 h3 {letter-spacing:5px;padding-left:0;padding:0;  }       
.col-xs-6+.col-xs-6,.col-xs-4+.col-xs-4 { margin-bottom:5%;}
.bg {padding: 8% 0;}
}
@media only screen and (max-width: 640px) { 
footer br {display:none}  
.col_3 p {text-align: justify;}
.fb{ max-width:90vw;}
}

@media only screen and (max-width: 480px) { 
.h2, h2{font-size: 2.7rem;}
.h3, h3,.carousel-caption h1{font-size: 2.4rem;}
.h4, h4,.h5, h5,.oulin .navbar > .container .navbar-brand { font-size: 2.2rem;}
.h6, h6,.btn-lg { font-size: 1.7rem;}
p { font-size: 1.5rem;}
}

@media (max-width: 320px) { 
.col_1 h3 {letter-spacing:4rem;padding-left: 4rem; }      
}