@import url(../fonts/font-awesome/font-awesome.min.css);
@import url(../fonts/flaticon/flaticon.css);
@import url(revise.css);
@import url(header.css);
@import url(footer.css);
@import url(hover.css);
@import url(banner.css);



/*========================================================
                         解決方案
=========================================================*/

.solution-wrap {

}
.solution-wrap img {
	width: 100%;
    vertical-align: bottom;
}
.solution-1, .solution-2 {
    position: relative;
}
.solution-1:after, .solution-2:after {	
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    z-index: 1;
    border: 1px solid #fff;
}
.solution-1 {
    background-color: #ba5858;
}
.solution-1 [class*="col-"]:nth-of-type(1) {	
	background: url(../images/index/solution-a01.jpg) no-repeat center left;
	background-size: cover;
}
.solution-2 {
    background-color: #3f55c2;
}
.solution-2 [class*="col-"]:nth-of-type(1) {	
	background: url(../images/index/solution-b01.jpg) no-repeat center left;
	background-size: cover;
}
.solution-1-c, .solution-2-c {
    min-height: 340px;
    color: #fff;
    padding: 40px 40px 40px 40px;
    font-size: 1.2rem;
    position: relative;
}
.solution-1-c h4, .solution-2-c h4 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.solution-1-c .more, .solution-2-c .more {
    position: absolute;
    right: 40px;
    bottom: 30px;
    z-index: 5;
}
.solution-1-c .more a, .solution-2-c .more a {
    color: #fff;
}
.solution-1-c .more a:hover, .solution-2-c .more a:hover {
    color: #000;
}
.solution-1-t h3, .solution-2-t h3 {
	position : absolute;
	top: 30px;
	left: 40px;
	z-index: 5;
    padding: 5px 15px;
    font-size: 1.8rem; 
    color: #fff;
    text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;    
}

/*  尺寸設定 */
@media (max-width: 767px) {
    .solution-1 [class*="col-"]:nth-of-type(1), .solution-2 [class*="col-"]:nth-of-type(1) {	
        height: 240px;
    }   
}
@media (max-width: 991px) {
    .solution-1, .solution-2 {	
        margin: 30px 15px 0;
    }   
}
@media (min-width: 992px) and (max-width: 1199px) {
    .solution-1, .solution-2 {	
        margin: 30px 30px 0;
    }   
}
@media (min-width: 1200px) {
    .solution-wrap {
        padding: 40px 4%;
    }
    .solution-1-t h3, .solution-2-t h3 {
        font-size: 1.8rem;
    }
    .solution-1-c, .solution-2-c {
        min-height: 460px;
        color: #fff;
    }  
}
@media (min-width: 1600px) {
    .solution-1-t h3, .solution-2-t h3 {
        font-size: 2rem;
    }
    .solution-1-c, .solution-2-c {
        padding: 50px 60px 50px 60px;
        font-size: 1.4rem;
    } 
}


/*========================================================
                      	 服務範疇
=========================================================*/

.service-wrap {
    padding-top: 20px;
    padding-bottom: 40px;
}
.service-wrap dl {
    position: relative;
    background-color: #3e9bc2;
    margin-bottom: 30px;
}
.service-wrap dl:after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    z-index: 1;
    border: 1px solid #fff;
}
.service-wrap dl:after:hover {
    background-color: #adadad;
}
.service-wrap [class*="col-"]:nth-of-type(1) dl {
    background-color: #3e9bc2;
}
.service-wrap [class*="col-"]:nth-of-type(2) dl {
    background-color: #3ec273;
}
.service-wrap [class*="col-"]:nth-of-type(3) dl {
    background-color: #c58643;
}
.service-wrap dl dt {
    position: relative;
    overflow: hidden;
}
.service-wrap dl dt h3 {
	position : absolute;
	top: 30px;
    left: 40px;
	z-index: 5;
    text-align: center;
    color: #fff;
    padding: 5px 15px;
    font-size: 1.8rem;
    text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;   
}
.service-wrap dl dt img {
    width: 100%;
    vertical-align: bottom;
}
.service-wrap dl dt img:hover {
    transform: scale(1.1);
    transition: .3s;
}
.service-wrap dl dd {
    padding: 30px 40px;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    margin: auto;
}
.service-wrap dl dd h4 {
    font-size: 2rem;
}
.service-wrap dl dd p {
    text-align: left;
    margin-bottom: 60px;
}

.service-wrap dl dd .more {
    position: absolute;
    right: 40px;
    bottom: 30px;
    z-index: 5;
}
.service-wrap dl dd .more a {
    color: #fff;
}
.service-wrap dl dd a:hover {
    color: #000;
}




/*  尺寸設定 */
@media (max-width: 767px) {
    .service-wrap dl dd {
        position: relative;
    }
}
@media (max-width: 1199px) and (min-width: 768px) {
    .service-wrap dl {
        overflow: hidden;
        position: relative;
    }
    .service-wrap dl dt {
        float: left;
        width: 50%;
        background: url(../images/index/solution-a01.jpg) no-repeat center left;
        background-size: cover;
        height: 340px;
    }
    .service-wrap dl dt img {
        display: none;
    }
    .service-wrap dl dd {
        padding-left: 54%;
        text-align: left;
        font-size: 1.2rem;
    }
    .service-wrap dl dt h3 {
        position : absolute;
        text-align: left;
    }
    .service-wrap dl dd .more {
        position: absolute;
        right: 40px;
        bottom: 30px;
        z-index: 5;
    }
}
@media (min-width: 1200px) {
    .service-wrap {
        padding-left: 3%;
        padding-bottom: 3%;
    }
    .service-wrap dl dd {
        padding: 30px 50px;
        font-size: 1.2rem;
        min-height: 400px;
        position: relative;
    }
    .service-wrap dl dt h3 {
        font-size: 1.8rem;
	    left: 50%;
        transform: translateX(-50%); 
        width: 90%;
    }
    .service-wrap dl dd .more {
        position : absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
    }
}
@media (min-width: 1600px) {
    .service-wrap dl dd {
        padding: 30px 50px;
        font-size: 1.4rem;
        min-height: 320px;
    }
    .service-wrap dl dt h3 {
        font-size: 2rem;
    }
}


/*========================================================
                         新聞中心
=========================================================*/

.news-wrap {
	padding: 0 4% 60px;
}
.news-wrap img {
	width: 100%;
    vertical-align: bottom;
}
.news-wrap [class*="col-"]:nth-of-type(1) {	
	background: url(../images/index/news-a01.jpg) no-repeat center center;
	background-size: cover;
}
.news-content h2 {
    font-weight: bold;
    font-size: 2.4rem;
}
.news-content h2 span {
    display: inline-block;
    color: #134999;
}
.news-content h2 span:before {
    content: '';
    display: inline-block;
    width: 2px;
    height: 24px;
    background-color: #134999;
    margin-left: 20px;
    margin-right: 20px;
}
.news-content dl {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #c8c8c8;
}
.news-content dl dt {
    float: left;
    margin-right: 20px;
    background-color: #134999;
    color: #fff;
    text-align: center;
    padding: 10px 15px 15px 15px;
}
.news-content dl dt span {
    display: block;
    font-size: 1rem;
}
.news-content dl dt b {
    display: block;
    font-size: 2.4rem;
    margin-bottom: 4px;
}
.news-content dl dd {
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.6rem;
}
.news-content dl dd h3 {
    margin: 0 0 5px;
    font-size: 1.4rem;
    font-weight: bold;
}
.news-content dl dd h3 a {
    color: #333;
}
.news-content dl dd h3 a:hover {
    color: #ed6a1a;
}
.news-wrap .more {
    margin-top: 10px;
    text-align: right;
}
.news-wrap .more a {
    display: inline-block;
    color: #134999;
    padding: 3px 14px 3px 14px;
    font-weight: bold;
}
.news-wrap .more a:hover {
    background: #ed6a1a;
    color: #fff;

}

/*  尺寸設定 */
@media (min-width: 1200px) {
    .news-content {
        padding-left: 50px;
    }    
}

/*========================================================
                     關於財聖保險經紀人
=========================================================*/

.about-wrap {
	background: url("../images/index/about-bg.jpg") no-repeat left center;
	background-size: cover;
    position: relative;
    height: 500px;
    overflow: hidden;
}
.about-wrap .info {
	position : absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 9;
	color: #fff;
	text-align: left;
    width: 90%;
}
.about-wrap .info h2 {
	font-size: 2rem;
    margin: 0 0 1rem 0;
    font-weight: bold;
}
.about-wrap .info ul {
	list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    line-height: 2rem;
}
.about-wrap .info .more a {
    display: inline-block;
    background-color: #b61d1d;
    margin-top: 20px;
    padding: 10px 7%;
    color: #fff;
}
.about-wrap .info .more a:hover {
    background-color: #ed6a1a;
}


/*  尺寸設定 */
@media (max-width: 991px) {
    .about-wrap .info {
        background-color: rgba(0,0,0,0.5);
        padding: 50px;
    }
}
@media (min-width: 640px) {
    .about-wrap .info h2 {
        font-size: 2.4rem;
    }
    .about-wrap .info ul {
        font-size: 1.2rem;
    }
}
@media (min-width: 992px) {
    .about-wrap {
        background: url("../images/index/about-bg.jpg") no-repeat center center;
        background-size: cover;
        height: 500px;
    }
    .about-wrap .info {
        top: 50%;
        left: 90%;
        transform: translate(-90%,-50%);
        width: 60%;
    }
    .about-wrap .info h2 {
        font-size: 2.8rem;
    }
    .about-wrap .info ul {
        font-size: 1.2rem;
        line-height: 2.6rem;
    }
}
@media (min-width: 1200px) {
    .about-wrap .info {
        width: 50%;
    }
}
@media (min-width: 1600px) {
    .about-wrap {
        height: 560px;
    }
    .about-wrap .info {
        width: 40%;
    }
    .about-wrap .info h2 {
        font-size: 3rem;
    }
    .about-wrap .info ul {
        font-size: 1.4rem;
        line-height: 3rem;
    }
}


/*========================================================
                         圖片效果
=========================================================*/

a.figure {
	display: block;
	position: relative;
	}
a.figure:hover:before {
    opacity: 0.3;
    -webkit-transform: scale(1);
    transform: scale(1);
}
a.figure:before {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    right: 6px;
    z-index: 10;
    content: '';
    display: inline-block;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    transition: .3s;
}