@import url("../fonts/flaticon/flaticon.css");
@import url("revise.css");
@import url("header.css");
@import url("footer.css");
@import url("banner.css");


/*========================================================
                      	 標題設定
=========================================================*/

.s-header {
    text-align: center;
    overflow: hidden;
    margin-bottom: 40px;
}

.h2-title {
    display: inline-block;
    font-size: 1.8rem;
    color: #000;
    position: relative;
    z-index: 1;
    font-weight: bold;
}
.h2-title:after {
    position: absolute;
    left: -20px;
    bottom: -30%;
    height: 36%;
    width: calc(100% + 40px);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4bae8c+0,644595+100 */
    background: #4bae8c; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #4bae8c 0%, #644595 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #4bae8c 0%,#644595 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #4bae8c 0%,#644595 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bae8c', endColorstr='#644595',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    opacity: 0.6;
    content: "";
    z-index: -1;
}
.h3-title {
    color: #38a882;
    font-weight: bold;
    font-size: 1.3rem;
    position: relative;
    padding-left: 40px;
    margin-bottom: 30px;
    line-height: 24px;
}
.h3-title:before {
    font-family: 'Font Awesome 5 free';
    content: "\f054";
    font-weight: 900;
    display: block;
    color: #fff;
    margin-right: 5px;
    font-size: 0.9rem;
    background-color: #38a882;
    clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
    width: 30px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    text-align: center;
}

.h4-title {
    color: #000;
    font-weight: bold;
    font-size: 1.1rem;
}



@media (min-width: 1200px) {
    .s-header {
        text-align: left;
    }
    .h2-title:after {
        left: 0;
        width: calc(100% + 20px);
    }
}


/*========================================================
                      	 內頁框架
=========================================================*/

.content-wrap {
    background: url("../img/content-bg.jpg") no-repeat right top fixed;
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 60px;
}
/*.content-wrap > .container {
    max-width: 1170px;
}*/

/* 麵包屑 */
.breadcrumbs {
    background-color: #38a882;
	text-align: left;
    font-size: 1rem;
    padding-top: 12px;
    padding-bottom: 14px;
    color: #fff;
}
/*.breadcrumbs > div {
    max-width: 1170px;
}*/
.breadcrumbs a {
	display: inline-block;
	color: #fff;
}
.breadcrumbs a:hover {
	text-decoration: underline;
}
.breadcrumbs a.home i {
    display: inline-block;
    margin-right: 3px;
    color: #fff;
}
.breadcrumbs span {
	margin: 0 2px 0 4px;
	color: #06583c;
	font-size: 1.2rem;
	font-weight: bold;
}


/*========================================================
                      	次選單設定
=========================================================*/

.navsub {
	margin-bottom: 20px;
	text-align: center;
    display: none;
}
.navsub-select {
    width: 100%;
    display: block;
}

.navsub-list {
	text-align: left;	
	margin-right: 30px;
	padding-bottom: 5px;
	border: 1px solid #ddd;
    background-color: #fff;
}
.navsub-list h2 {
	color: #fff;
	background-color: #197858;
    border-bottom: 3px solid #0c5039;
	padding: 14px 30px;
	text-align: left;
	margin: 0 0 10px 0;
    font-size: 1.5rem;
    position: relative;
}
.navsub-list .h-icon1 {
    background: #197858 url("../img/navsub-icon1.png") no-repeat 97% 50%;
}
.navsub-list .h-icon2 {
    background: #197858 url("../img/navsub-icon2.png") no-repeat 97% 50%;
}
.navsub-list .h-icon3 {
    background: #197858 url("../img/navsub-icon3.png") no-repeat 97% 50%;
}
.navsub-list .h-icon4 {
    background: #197858 url("../img/navsub-icon4.png") no-repeat 97% 30%;
}
.navsub-list .h-icon5 {
    background: #197858 url("../img/navsub-icon5.png") no-repeat 97% 50%;
}
.navsub-list .h-icon6 {
    background: #197858 url("../img/navsub-icon6.png") no-repeat 97% 30%;
}

.navsub-list ul {
	list-style: none;
	margin: 20px 20px 40px 20px;
	padding: 0;
}
.navsub-list ul li {
}
.navsub-list ul li a {
	display: block;
	padding: 7px 10px;
	color: #333;
	font-size: 0.9rem;
	margin: 0 0 10px 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-bottom: 1px dashed #ddd;
}
.navsub-list ul li a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    top: 0;
    bottom: 0;
    background: #dadada;
    height: 100%;
    -webkit-transition: all 0.3s ease-out;
    transition:  all 0.3s ease-out;
}
.navsub-list ul li a:hover:before, 
.navsub-list ul li a:focus:before, 
.navsub-list ul li a:active:before {
    right: 0;
}



.navsub-select {
    width: 100%;    
	margin-left: 15px;
	margin-right: 15px;
    margin-bottom: 20px;
	}
.navsub-select h2 {
	text-align: center;
	}
.navsub-select .form-control {
	margin-bottom: 20px;
}


@media (min-width: 1200px) {
    .navsub {
        display: block;
    }
    .navsub-select {
        display: none;
    }
}

/*========================================================
                         回目錄頁
=========================================================*/

.btn-back {
	text-align: right;
	padding-top: 20px;
}
.btn-back a {
    background-color: #38a882;
	padding: 5px 20px 7px;
	border-radius: 3px;
	color: #fff;
}
.btn-back a:hover {
    background-color: #17815d;
	color: #fff;
	text-decoration: none;
}


/*========================================================
                         共用樣式
=========================================================*/

.common {
    padding: 7% 10%;
    text-align: left;
    font-size: 1rem;
    line-height: 32px;
    font-weight: 400;
}
.common-info h2 {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 30px;
}
.common-info h3 {
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 20px;
}
.common-info.white {
    color: #f6f6f6;
}
.common-info.black {
    color: #0A0A0A;
}
@media (max-width: 1199px) {
    .common {
        padding: 5% 5%;
        line-height: 30px;
    }
    .common-info {
        margin: 5% 0;
        padding: 6% 7% 4%;
    }
    .common-info.white {
        background-color: rgba(0,0,0,0.2);
    }
    .common-info.black {
        background-color: rgba(255,255,255,0.5);   
    }
}



/*========================================================
                         About Us
=========================================================*/

/* Overview */
.overview-1 {
    background: url("../img/overview-bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.overview-2 {
    background: url("../img/overview-bg2.jpg") no-repeat center center; 
    background-size: cover;
}
.overview-3 {
    background: url("../img/overview-bg3.jpg") no-repeat center center; 
    background-size: cover;
}
.overview-4 {
    background: url("../img/overview-bg4.jpg") no-repeat center center; 
    background-size: cover;
}
.overview-5 {
    background: url("../img/overview-bg5.jpg") no-repeat center center; 
    background-size: cover;
}


/* Management Team */
.team-1 {
    background: url("../img/team-bg1.jpg") no-repeat 80% center; 
    background-size: cover;
}
.team-1 .h3-title {
    color: #35b958;
}
.team-1 .h3-title:before {
    background-color: #35b958;
}


/* Culture & Prospect */
.culture-1 {
    background: url("../img/culture-bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.culture-2 {
    background: url("../img/culture-bg2.jpg") no-repeat center 20%; 
    background-size: cover;
}
.culture-3 {
    background: url("../img/culture-bg3.jpg") no-repeat center center; 
    background-size: cover;
}

/* Stakeholder Contacts */
.stakeholder-1 {
    background: url("../img/stakeholder-bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.stakeholder-1 .h3-title {
    color: #025a0f;
}
.stakeholder-1 .h3-title:before {
    background-color: #025a0f;
}



/*========================================================
             About Us / Major Achievements
=========================================================*/

.history {
    padding: 2% 5%;
    text-align: left;
}
.history .history-img {
    position: relative;
    z-index: 5;
}
.history-info {
    margin: 5% 0;
    padding: 6% 7% 4%;
    background-color: rgba(255,255,255,0.65);
	box-shadow: 0 0 10px #999;    
}
.history-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.history-info .item {
    margin-bottom: 20px;
}
.history-info .year {
    display: inline-block;
    color: #fff;
    background: url("../img/history-item-1bg3.png") no-repeat center center; 
    width: 160px;
    height: 42px;
    overflow: hidden;
    padding: 6px 20px;
    font-size: 1.4rem;
}
.history-info .info {
    margin-left: 20px;
}
.history-info .info li {
    position: relative;
    padding-left: 40px;
}
.history-info .info li span {
    font-weight: bold;
    margin-right: 5px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}


.history-1 {
    background: url("../img/history-item-1bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.history-2 {
    background: url("../img/history-item-2bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.history-3 {
    background: url("../img/history-item-3bg1.jpg") no-repeat center center; 

    background-size: cover;
}
.history-4 {
    background: url("../img/history-item-4bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.history-1 .history-info .year {
    background: url("../img/history-item-1bg3.png") no-repeat center center; 
}
.history-2 .history-info .year {
    background: url("../img/history-item-2bg3.png") no-repeat center center; 
}
.history-3 .history-info .year {
    background: url("../img/history-item-3bg3.png") no-repeat center center; 
}
.history-4 .history-info .year {
    background: url("../img/history-item-4bg3.png") no-repeat center center; 
}


@media (min-width: 1200px) {
    .history-1 .history-img, .history-3 .history-img {
        left: -80px;
    }
    .history-2 .history-img, .history-4 .history-img {
        right: 190px;
    }
}
@media (min-width: 1600px) {
    .history-1 .history-img, .history-3 .history-img {
        left: -186px;
    }
    .history-2 .history-img, .history-4 .history-img {
        right: 60px;
    }
}
@media (min-width: 1800px) {
    .history-2 .history-img, .history-4 .history-img {
        right: -20px;
    }
}


/*========================================================
               About Us / Quality Management
=========================================================*/

.quality-1 {
    background: url("../img/quality-bg1.jpg") no-repeat center center; 
    background-size: cover;
    padding-top: 60px;
    color: #fff;
}
.quality-2 {
    background: url("../img/quality-bg2.jpg") no-repeat center center; 
    background-size: cover;
}
.quality-3 {
    background: url("../img/quality-bg3.jpg") no-repeat center center; 
    background-size: cover;
}

.quality-1 ul {
    list-style: none;
    margin: 0 0 -80px 0;
    padding: 0;
}
.quality-1 ul li {
    background-color: #e37f1d;
    border-radius: 20px;
    padding: 10px 5%;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 20px;
}
.quality-1 ul li:nth-of-type(1) {
    background-color: #e37f1d;
}
.quality-1 ul li:nth-of-type(2) {
    background-color: #1d7ae3;
}
.quality-1 ul li:nth-of-type(3) {
    background-color: #e31dc5;
}
.quality-1-img {
    display: block;
    margin: auto;
    position: relative;
    bottom: -100px;
    z-index: 2;
}
.quality-3b > div {
    background-color: #fff;
    padding: 50px;
    margin-top: 50px;
}

.quality-3b .col-lg-4 {
    background-position: right center;
    min-height: 300px;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .quality-3 .common-info.black {
        background-color: rgba(255,255,255,0.5);   
    }
    .quality-3  .common-info {
        margin: 3% 0;
        padding: 6% 7% 4%;
    }
}
@media (max-width: 1199px) {
    .quality-3 .common-info.black {
        background-color: rgba(255,255,255,0);   
    }
    .quality-3 img {
        display: block;
        margin: auto;
    }
    .quality-3 .common-info {
        margin: 3% 0 5%;
        padding: 0;
    }
}
@media (min-width: 768px) {
    .quality-1-img {
        bottom: -160px;
    }
}
@media (min-width: 992px) {
    .quality-1 ul li {
        padding: 10px 4%;
        font-size: 1.1rem;
    }
}
@media (min-width: 1600px) {
    .quality-3 {
        padding: 2% 10% 5%;
    }
    .quality-3 img {
        position: relative;
        top: -100px;
        z-index: 2;
    }
    .quality-3 .order-xl-3 {
        position: relative;
        top: -140px;
        z-index: 2;
        margin-bottom: -140px;
    }
    .quality-1 ul li {
        padding: 10px 6%;
        font-size: 1.4rem;
    }
}


/*========================================================
                         Why CyberTAN
=========================================================*/

/* Why CyberTAN */
.advantages-1 {
    background: url("../img/advantages-bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.advantages-2 {
    background: url("../img/advantages-bg2.jpg") no-repeat center center; 
    background-size: cover;
}


/*========================================================
                            CSR
=========================================================*/

.csr-1 {
    background: url("../img/csr-bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.csr-2 {
    background: url("../img/csr-bg2.jpg") no-repeat center center; 
    background-size: cover;
}
.csr-3 {
    background: url("../img/csr-bg3.jpg") no-repeat center center; 
    background-size: cover;
}
.csr-4 {
    background: url("../img/csr-bg4.jpg") no-repeat center center; 
    background-size: cover;
}
.csr-5 {
    background: url("../img/csr-bg5.jpg") no-repeat center center; 
    background-size: cover;
}


/*========================================================
                         人力資源
=========================================================*/

.careers-1 {
    background: url("../img/careers-bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.careers-2 {
    background: url("../img/careers-bg2.jpg") no-repeat center center; 
    background-size: cover;
}
.careers-3 {
    background: url("../img/careers-bg3.jpg") no-repeat center center; 
    background-size: cover;
}

.careers-img img {
    border: 10px solid #fff;
}

.careers-desc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.careers-desc ul li {
    margin-bottom: 6px;
}
.careers-desc ul li span {
    font-weight: bold;
    color: #C70003;
}


/*========================================================
                         聯絡我們
=========================================================*/

.contact-bg {
    background: url("../img/contact-bg3.jpg") no-repeat center center; 
    background-size: cover;
	padding: 7% 10%;
}
.contact-2 {
	background-color: #fff;
	padding: 5% 5%;
}
/*.contact-2 a[href="privacy"] {
	border-bottom: 2px solid #C40003;
	padding-bottom: 2px;
	margin: 0 3px;
	font-weight: bold;
}
.contact-2 a[href="privacy"]:hover {
	color: #C40003;
	border-color: #fff;
}*/

a.hover2 {
	color: #38a882;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    z-index: 1;
    overflow: hidden;
	font-weight: bold;
	padding-bottom: 2px;
	margin: 0 3px;
}
a.hover2:hover {
	color: #111;
}
a.hover2:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right:  100%;
    bottom: 0;
    background: #38a882;
    height: 2px;
    -webkit-transition: all 0.3s ease-out;
    transition:  all 0.3s ease-out;
}
a.hover2:hover:before, 
a.hover2:focus:before, 
a.hover2:active:before {
    right: 0;
}


.contact-3 {
    background: url("../img/contact-bg4.jpg") no-repeat center center; 
    background-size: cover;
	padding: 5% 5%;
	margin-bottom: 100px;
	color: #fff;
	text-align: left;
}
.contact-3 a {
	color: #fff;
}

@media (min-width: 1200px) {
	.contact-3 .contact-info {
		min-height: 188px;
	}
}
@media (min-width: 1600px) {
	.contact-3 .contact-info {
		min-height: 164px;
	}
}
@media (max-width: 1199px) {
	.contact-3 .common-info.white {
		background-color: rgba(0,0,0,0);
	}
}
@media (max-width: 639px) {
	.contact-bg {
		padding: 0;
	}
	.contact-bg .container {
		padding-left: 0;
		padding-right: 0;
	}
	.contact-2, .contact-3 {
		padding: 5% 2%;
	}
	.contact-3 {
		margin-bottom: 0;
	}
}
/*.contact-1 {
    background: url("../img/contact-bg1.jpg") no-repeat center center; 
    background-size: cover;
}
.contact-2 {
    background: url("../img/contact-bg2.jpg") no-repeat center center; 
    background-size: cover;
}
.contact-3 {
    background: url("../img/contact-bg3.jpg") no-repeat center center; 
    background-size: cover;
}
*/






/*========================================================
                         產品列表
=========================================================*/

.good-item {
    color: #fff;
    padding: 50px 30px 30px 30px;
    text-align: center;
}
.good-item h4 {
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 20px;
}
.good-item img {
    display: block;
    margin: auto;
}
.good-item ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 300;
    font-size: 1.3rem;
}
.good-item ul li {
    min-height: 28px;
}
.good-info {
    padding: 30px 0 20px;
    text-align: center;
    font-size: 1.2rem; 
}


.good-img-bg {
    background-position: center center;
    background-size: cover; 
    position: relative;
}
.good-img-bg2 {
    background-position: 10% center;
    background-size: cover; 
    position: relative;
}

@media (max-width: 991px) {
    .good-list .good-img-bg {
        min-height: 400px;
    }
}
@media (max-width: 639px) {
    .good-list .good-img-bg2 {
        min-height: 300px;
    }
}
@media (min-width: 640px) {
    .good-img-bg2 {
        height: 340px;
    }
}
@media (min-width: 1200px) {
    .good-img-bg2 {
        height: 420px;
    }
}
@media (min-width: 1800px) {
    .good-img-bg2 {
        height: 600px;
    }
}



/*========================================================
                         最新消息
=========================================================*/

.timeline {
	text-align: left;
    margin-bottom: 60px;
}
.timeline-item {
	position: relative;
	overflow: hidden;
	padding: 0 0 70px 0;
}
.timeline-item:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}
.timeline-item-aside {
    margin-right: 3%;
}
.timeline-item-aside img {
	width: 100%;
    margin-bottom: 10px;
    -webkit-clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);   
    clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);    
}

.timeline-item-info time {
	font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: uppercase;
}
.timeline-item-info h3 {
	font-size: 1.2rem;
    font-weight: bold;
	color: #17815d;
    line-height: 1.6;
}


/* 了解更多 */
.timeline-item-btn {
}
.timeline-item-btn a {
    display: inline-block;
    background-color: #38a882;
    padding: 5px 20px;
    color: #fff;
    border-radius: 5px;
    position: relative;  
}
.timeline-item-btn a:after {
    font-family: 'Font Awesome 5 free';
    content: "\f0da";
    font-weight: 900;
    display: inline-block;
    margin-left: 10px;
}


/* 尺寸設定 */
@media (max-width: 575.98px) {
	.timeline-item {
		max-width: 450px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 767.98px) {
	.timeline-item {
		flex-wrap: wrap;
	}
	.timeline-item-info,
	.timeline-item-aside {
		width: 100%;
	}
}
@media (min-width: 768px) {
	.timeline-item {
		display: flex;
		padding-left: 0;
		padding-bottom: 40px;
	}
	.timeline-item-aside {
		max-width: 47%;
	}
	.timeline-item-info {
		max-width: 50%;
	}
    .timeline-item-aside img {
        -webkit-clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);   
        clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
    }
	* + .timeline-item-info {
		margin-top: 0;
	}
}
@media (min-width: 992px) {
	.timeline-item-aside {
		max-width: 37%;
	}
	.timeline-item-info {
		max-width: 60%;
	}
	.timeline-item-info h3 {
		font-size: 1.3rem;
	}
}
@media (min-width: 1200px) {
	.timeline-item-aside {
		max-width: 32%;
	}
	.timeline-item-info {
		max-width: 65%;
	}
	.timeline-item-info time {
		font-size: 1.1rem;
	}
	.timeline-item-info h3 {
		font-size: 1.4rem;
	}
}
@media (min-width: 1600px) {
	.timeline-item {
		padding-bottom: 60px;
	}
	.timeline-item-aside {
		max-width: 27%;
	}
	.timeline-item-info {
		max-width: 70%;
	}
}



/*========================================================
                   	    最新消息內頁
=========================================================*/

.news-detail {
	text-align: left;
    border-bottom: 2px dashed #adadad;  
}
.news-detail img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.news-detail time {
    font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: uppercase;
}
.news-detail-title {
	text-align: left;
	margin: 0 0 20px 0;
	color: #17815d;
	font-weight: bold;
    font-size: 1.8rem;
}
.news-detail-content {
    margin-bottom: 40px;
}
.news-detail-link {
    border-top: 2px dashed #adadad;
    padding: 1rem;
    font-size: 0.9rem;
    background-color: #ededed;
}
.news-detail-link h4 {
    font-size: 1.1rem;
    font-weight: bold;
}
.news-detail-link a {
    display: inline-block;
    color: #333;
    text-decoration: underline;
    margin-left: 10px;
}
.news-detail-link a:hover {
    text-decoration: none;
}


/*========================================================
                        ESG相關設定
=========================================================*/

.esg-main {
    padding-top: 60px;
    padding-bottom: 60px;
    line-height: 36px;
}
.white-bg {
    background-color: #fff;
}
.gray-bg {
    background-color: #f4f4f4;
}


.esg-main .h3-title {
    margin-bottom: 1.5rem;
}
.esg-main .h4-title {
    color: #674ea7;
    font-weight: bold;
    font-size: 1.2rem;
}
.esg-main .h5-title {
    font-weight: bold;
    font-size: 1.1rem;
}

.esg-main .img-100 {
    width: 100%;
    vertical-align: bottom;
    margin: 1rem 0;
}

.esg-01-02-item {
    text-align: center;
    margin-bottom: 30px;
}
.esg-01-02-item img {
    width: 100%;
}
.esg-01-02-item h4 {
    font-size: 1.2rem;
    margin: 10px 0 0 0;
}
.esg-01-02-item .btn-back {
    text-align: center;
}




/*========================================================
                        投資人專區
=========================================================*/

/* 左側選單 */
.investor-nav {
	margin-bottom: 20px;
    display: none;
}
.investor-nav > div {
    margin-right: 30px;
    padding-bottom: 30px;
	text-align: left;
    background-color: #fff;
}
.investor-nav > div h2 {
	color: #fff;
    border-bottom: 3px solid #0c5039;
	padding: 14px 20px;
	text-align: left;
	margin: 0 0 10px 0;
    font-size: 1.5rem;
    position: relative;
    background: #197858 url("../img/navsub-icon7.png") no-repeat 97% 50%;
}
.investor-nav-style {
	margin: 0 20px 20px;
	border-bottom: 1px dashed #adadad;
	padding-bottom: 20px;
}
.investor-nav-style:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}
.investor-nav-style h3 a {
	color: #197858;
	font-weight: bold;
    font-size: 1.3rem;
}
.investor-nav-style h3 a:hover {
	color: #c51414;
}
.investor-nav-style a {
	color: #333;
}
.investor-nav-style ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.navsub-style ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.investor-nav-style ul li a {
	display: block;
	color: #333;
	font-size: 1rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-left: 15px;
}
.investor-nav-style ul li a:before {
    font-family: 'Font Awesome 5 free';
    content: "\f0da";
    font-weight: 900;
	position: absolute;
	left: 5px;
	top: 0;
	z-index: 9;
}
.investor-nav-style ul li a:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    top: 0;
    bottom: 0;
    background: #dadada;
    height: 100%;
    -webkit-transition: all 0.3s ease-out;
    transition:  all 0.3s ease-out;
}
.investor-nav-style ul li a:hover:after, 
.investor-nav-style ul li a:focus:after, 
.investor-nav-style ul li a:active:after {
    left: 0;
    right: 0;
}

/* 右側內容 */
.investor-main {
	padding-bottom: 50px;
}
.investor-info {
    margin-bottom: 50px;
}

/* 主選單區塊列表設定 */
.finance-box {
	background-color: #fff;
}
.finance-box h3 {
	position: relative;
	background-color: #66ae95;
	color: #fff;
    font-size: 1.3rem;
	padding: 10px 10px 10px 40px;
}
.finance-box h3:before {
    font-family: 'Font Awesome 5 free';
    content: "\f080";
    font-weight: 900;
    display: block;
    position: absolute;
	left: 12px;
	top: 10px;
    z-index: 3;
    font-size: 1.2rem;
}
.finance-box ul {
	list-style: none;
	margin: 20px 30px 20px;
	padding: 0;
}
.finance-box ul li {
	padding: 3px;
}
.finance-box ul li:before {
    font-family: 'Font Awesome 5 free';
    content: "\f0da";
    font-weight: 900;
    display: inline-block;
	margin-right: 5px;
	color: #333;
    font-size: 0.8rem;
}
.finance-box ul li a {
	color: #333;
}
.finance-box ul li a:hover {
	text-decoration: underline;
}

.finance-box .more a {
	display: block;
	text-align: center;
	background-color: #cde4dc;
	padding: 5px 0;
    color: #333;
}
.finance-box .more a:hover {
	background-color: #78b39f;
	color: #fff;
}
.finance-box .info {
	margin: 10px 20px;
	padding-bottom: 20px;
	min-height: 160px;
}


/* 次選單 */
.finance-item > div {
    width: 17.5%;
    margin-right: 10px;
	margin-bottom: 10px;
}
.finance-item > div a {
	display: block;
	background-color: #ddd;
    color: #333;
    padding: 7px 5px;
    text-align: center;
}
.finance-item > div a:hover, .finance-item > div a.active  {
	background-color: #7e6ba2;
    color: #fff;
}

/* 次次選單 */
.finance-year {
	margin-bottom: 30px;
}
.finance-year ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.finance-year ul li {
	float: left;
}
.finance-year ul li a {
    color: #666;
	display: inline-block;
	padding-left: 10px;
	font-weight: bold;
}
.finance-year ul li:first-of-type a {
	padding-left: 0;
}
.finance-year ul li a:after {
	content: '|';
	padding-left: 10px;
	color: #333;
}
.finance-year ul li:first-of-type a:before {
	content: '|';
	padding-right: 10px;
	color: #333;
}
.finance-year ul li a:hover, .finance-year ul li a.active {
	color: #b60005;
}

.revenue_bar { 
	background-color: #ddd; 
	height: 1rem; 
	float: left; 
	margin-right: 10px; 
	margin-top: 4px;
}

/* 股東會 */
.finance-meeting h3 {
	background-color: #28634f;
	color: #fff;
	padding: 10px;
    font-size: 1.4rem;
}
.meeting-box {
	background-color: #e6f4ef;
	padding: 30px 40px;
	margin-bottom: 40px;
    border: 1px solid #a6cdc0;
}
.meeting-box h3 {
	font-size: 1.3rem;
    font-weight: bold;
}
.meeting-date {
	text-align: right;
	font-weight: bold;
}

/* 法說會*/
.law-list dl {
	background-color: #fff;
	padding: 30px 30px 20px;
	margin-bottom: 40px;
    border: 1px solid #a6cdc0;
}
.law-list dl dt {
	color: #3b856b;
	font-weight: bold;
	font-size: 1.2rem;
	margin-bottom: 20px;
}
.law-list dl dt span {
	background-color: #3b856b;
	color: #fff;
	font-size: 1rem;
	margin-right: 6px;
	padding: 3px 10px;
}
.law-list dl dd p {
	margin-bottom: 20px;
	line-height: 30px;
}
.law-down {
	border-top: 2px dashed #adadad;
	text-align: right;
	padding-top: 20px;
}

/* 董事會 */
.director-box {
	background-color: #fff;
	padding: 30px 30px 20px;
    border: 1px solid #ccc;
	border-bottom: 2px solid #2f6e59;
	margin-bottom: 50px;
    font-size: 0.9
}
.director-box h3 {
	font-weight: bold;
	margin: 0 0 20px 0;
    font-size: 1.4rem;
}
.director-box h3 span {
	background-color: #2f6e59;
	color: #fff;
	margin-right: 10px;
	padding: 2px 10px;
}
.director-box h4 {
    font-size: 1rem;

}

@media (min-width: 1200px) {
    .investor-nav {
        display: block;
    }
}




/*========================================================
                         聯絡我們
=========================================================*/

/*.contact-bg {
    background: url("../img/contact-bg.jpg") no-repeat left top; 
    background-size: cover;
}*/

.contact-info h4 {
    margin-top: 20px;
    font-size: 1.2rem;
}
.contact-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.contact-info ul li {
	position: relative;
	margin-bottom: 10px;
    padding-left: 12px;
}
.contact-info ul li span {
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
}
.contact-info ul li:before {
    font-family: 'Font Awesome 5 free';
    content: "\f0da";
    font-weight: 900;
    display: block;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 2;
    color: #ffad19;
}
.contact-info ul li:nth-of-type(1) i {
    color: #e71c30;
}
.contact-info ul li:nth-of-type(2) i {
    color: #028ad3;
}
.contact-info ul li:nth-of-type(3) i {
    color: #2e9876;
}
.contact-info ul li:nth-of-type(4) i {
    color: #cd7f0c;
}
.contact-info ul li:nth-of-type(5) i {
    color: #cb40b3;
}
.contact-info ul li:nth-of-type(6) i {
    color: #4051cb;
}
.contact-info ul li [class^="flaticon-"]:before, 
.contact-info ul li [class*=" flaticon-"]:before, 
.contact-info ul li [class^="flaticon-"]:after, 
.contact-info ul li [class*=" flaticon-"]:after {
    margin-right: 0px;
}



/*========================================================
                         各類表單
=========================================================*/

/* 表單設定 */
.form-horizontal {
	margin-bottom: 40px;
}
.form-horizontal label {
	margin-bottom: 0;
    font-weight: bold;
    color: #666;
}
.form-horizontal label span {
	display: inline-block;
    margin-left: 3px;
    color: #D80003;
    font-weight: bold;
    font-size: 1.2rem;
    vertical-align: bottom;
}
.form-horizontal .form-control {
	border: 1px solid #ededed;
	background-color: #dbdbdb;
}

.form-control::-moz-placeholder {
	color: #fff;
	opacity: 1;
	font-size: 16px;
	font-weight: bold;
}
.form-control:-ms-input-placeholder {
	  color: #fff;
}
.form-control::-webkit-input-placeholder {
	  color: #fff;
}

/* 意見表單 */
.contact-form {
	margin-bottom: 20px;
}
.contact-form [class *= col-] {
	position: relative;
	margin-bottom: 10px;
}
.contact-map {
/*    border: 1px solid #ddd;*/
    margin-bottom: 10px;
    height: 300px;
    overflow: hidden;
}
.contact-info h4 {
	font-weight: bold;
    color: #fff;
    font-size: 1.3rem;
}


.form-group {
	padding: 10px 15px;
	margin-bottom: 0 !important;
}
.form-group:nth-of-type(2n+1) {
	background-color: #e3eef2;
}
.form-group b {
	display: block;
	font-size: 15px;
}
.input {
	text-decoration: none;
	border: 1px solid #c7c7c7;
	width: 100%;
	padding: 2px 2px;
}

.vcode {
    width: 120px;
}



/* 尺寸設定 */
@media (min-width: 768px) {
	.form-info {
		padding: 20px 20px 20px 70px;
		background: #f7f7f7 url("../images/warning2.png") no-repeat 20px center;
	}
	.form-info {
		margin-right: 15px;
	}
	.input {
		width: 40%;
	}
	.form-group b {
		display: inline-block;
	}
    .vcode {
        width: 200px;
    }
}
@media (min-width: 1200px) {
    .vcode {
        width: 300px;
    }
}

/*========================================================
                         Privacy
=========================================================*/

.privacy-list {
	margin-top: 60px;
	margin-bottom: 60px;
}


/*========================================================
                           表格
=========================================================*/

.table1 {
	border-collapse: collapse;
	text-align: left;
	margin: 0 0 20px 0 !important;
	font-size: 1rem;
    background-color: #fff;
    border: 1px solid #c0bebe;
}
.table1 caption {
    caption-side: top;
    color: #000;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
}
.table1 th {
/*    background-color: #7e6ba2;*/
	background-color: #009875;
	color: #fff;
	font-weight: bold;
	padding: 7px 10px !important;
	text-align: center;	
	border-top: 0 !important;
	border-bottom: 1px solid #c0bebe;
    border-right: 1px solid #fff;
}
.table1 th:last-of-type {
    border-right: 1px solid #c0bebe;
}
.table1 td {
	padding: 6px 15px !important;
}
.table1 tr.subtitle td {
    background-color: #c8dae7;
    font-weight: bold;
}
.table2 td:nth-of-type(2){
	text-align: center;
}
.table3 td:nth-of-type(2),
.table3 td:nth-of-type(3),
.table3 td:nth-of-type(4){
	text-align: center;
}
.table4 td {
	text-align: center;
}
.table4 tfoot {
	background-color: #e1edea;
}
.table4 td {
	padding: 10px 15px !important;
}


/*========================================================
                         樣式設定
=========================================================*/

.style-s1 {
    border-radius: 10px;
    text-align: left;
    padding: 30px 40px;
    background-color: #fdfdfd;
    border: 1px solid #ccc;
    margin-bottom: 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.style-s1 img {
    display: block;
    width: 80px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.style-s1 h4 {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0;
    position: relative;
    z-index: 2;
}
.style-s1 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.style-s1 ul li {
    position: relative;
    padding-left: 28px;
}
.style-s1 ul li:before {
    font-family: 'Font Awesome 5 free';
    content: "\f00c";
    font-weight: 900;
    display: block;
    position: absolute;
    left: 10px;
    top: 1px;
    z-index: 9;
    color: #fff;
    font-size: 0.6rem;
}
.style-s1:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; 
}
.style-s1-1 {
    background: url("../img/aboutUs-img08.jpg") no-repeat center center;
}
.style-s1-1:after {
    background-color: rgba(107,156,150,0.95); 
}
.style-s1-2 {
    background: url("../img/aboutUs-img02.jpg") no-repeat center center;
}
.style-s1-2:after {
    background-color: rgba(163,163,163,0.95); 
}
.style-s1-3 {
    background: url("../img/aboutUs-img03.jpg") no-repeat center center;
}
.style-s1-3:after {
    background-color: rgba(107,97,149,0.95); 
}
.style-s1-4 {
    background: url("../img/aboutUs-img04.jpg") no-repeat center center;
}
.style-s1-4:after {
    background-color: rgba(184,139,160,0.95);
}
.style-s1-5 {
    background: url("../img/aboutUs-img05.jpg") no-repeat center center;
}
.style-s1-5:after {
    background-color: rgba(139,170,184,0.95);
}
.style-s1-6 {
    background: url("../img/aboutUs-img06.jpg") no-repeat center center;
}
.style-s1-6:after {
    background-color: rgba(184,150,139,0.95);
}
.style-s1-7 {
    background: url("../img/aboutUs-img07.jpg") no-repeat center center;
}
.style-s1-7:after {
    background-color: rgba(107,127,156,0.95);
}






.style-s2 h4 {
    font-weight: bold;
    font-size: 1.1rem;
}
.style-s2 ul li span {
    font-weight: bold;
}

.style-s3 dl {
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #adadad;
}
/*
.style-s3 dl dt {
    margin-bottom: 10px;
}
*/
.style-s3 dl dt span {
    display: block;
    width: 100px !important;
    height: 30px !important;
    line-height: 30px;
    text-align: center;
    font-size: 1rem;
    color: #2b2b2b;
    font-weight: bold;
    background-color: #d0ebe2;
}
.style-s3 dl dd {
    overflow: hidden;
    margin-bottom: 0;
}
.style-s3 dl dd ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.style-s3 dl dd ul li {
    position: relative;
    padding-left: 60px;
}
.style-s3 dl dd ul li span {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    font-weight: bold;
    width: 60px;
}
.style-s3 dl dd ul li span:after {
    font-family: 'Font Awesome 5 free';
    content: "\f0da";
    font-weight: 900;
    display: block;
    position: absolute;
    top: 1px;
    right: 4px;
    z-index: 4;
    color: #38a882;
    font-size: 1rem;
}
.style-s4 {
    background-color: #fdfdfd;
    border: 1px solid #ccc;
    padding: 30px 40px;
    margin-bottom: 40px;
    text-align: left;
}
.style-s4 img {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
}
.style-s4 h4 {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
    color: #0c5039;
}
.style-s4 .down a {
	display: block;
	text-align: center;
	background-color: #cde4dc;
	padding: 5px 0;
    color: #333;
}
.style-s4 .down a:hover {
	background-color: #78b39f;
	color: #fff;
}


@media (min-width: 768px) {
/*
    .style-s1 {
        min-height: 311px;
    }
*/
    .style-s3 dl dt {
        float: left;
        margin-right: 20px;
    }
}


/*========================================================
                         ul設定
=========================================================*/

.ul-s1 {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    text-align: left;
}
.ul-s1 > li {
    background: url("../img/icon-check.png") no-repeat left 10px;
    padding: 10px 10px 10px 30px;
    font-size: 1.2rem;
    font-weight: bold;
}

.ul-s2 {
	list-style: none;
	margin: 0;
	padding: 0;
	}
.ul-s2 * {
	list-style: none;
	margin: 0;
	padding: 0;
	}
.ul-s2 > li {
	margin: 0 0 20px 0;	
	}
.ul-s2 > li span {
	font-weight: bold;
	}
.ul-s2 li li {
	margin: 0 0 6px 0;
	}


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

a.figure {
	display: block;
	position: relative;
}
a.figure:hover:before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
a.figure:before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    content: '';
    display: inline-block;
    background: rgba(255,255,255,0.15) url("../img/magnifier.png") no-repeat center center;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    transition: .3s;
}

.picture-effect {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.picture-effect img {
	transform: scale(1);
	transition: .3s ease-out all;
}
.picture-effect a {
	display: inline-block;
	position: relative;
}
.picture-effect a:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(252, 200, 58, 0.4);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: .3s ease-out all;
}
.picture-effect a:hover:before {
	opacity: 1;
}
.picture-effect a:hover img {
	transform: scale(1.1);
}


/*========================================================
                         共同設定
=========================================================*/

/*
.commonStyle {
    margin-bottom: 80px;
}
.commonStyle-img {
    margin-top: 30px;
    position: relative;
}

@media (max-width: 767px) {
    .commonStyle-img img {
        width: 49%;
        margin-bottom: 20px;
    }
}
@media (min-width: 768px) {
    .commonStyle-img {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        position: relative;
        height: 340px;
        overflow: hidden;
    }
    .commonStyle-img img {
        width: 30%;
        clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    }
    .commonStyle-img img:nth-of-type(1) { 
        clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
        position: absolute;
        left: -3%;
    }
    .commonStyle-img img:nth-of-type(2) { 
        position: absolute;
        left: 22%;
    }
    .commonStyle-img img:nth-of-type(3) { 
        position: absolute;
        left: 47%;
    }
    .commonStyle-img img:nth-of-type(4) {
        position: absolute;
        left: 72%;
        clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    .commonStyle-img {
        height: 155px;
    }
}
@media (min-width: 992px) {
    .commonStyle-img {
        height: 210px;
    }
}
@media (min-width: 1200px) {
    .commonStyle-img {
        height: 250px;
    }
}
@media (min-width: 1600px) {
    .commonStyle-img {
        height: 260px;
    }
}
*/


/*========================================================
                        關於我們
=========================================================*/


/*
.aboutUs-2 h3 {
    color: #38a882;
    font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.aboutUs-2 h3 i {
    color: #fff;
    margin-right: 5px;
    font-size: 1.2rem;
    background-color: #38a882;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    padding: 20px;
}
.aboutUs-3 img {
    width: 100%;
    margin-bottom: 30px;
    border: 5px solid #99d4c0;
    padding: 2px;
    background-color: #fff;
}
.aboutUs-3 dl {
    overflow: hidden;
    min-height: 100px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #adadad;
}
.aboutUs-3 dl dt {
    align-self: center !important;
    margin-bottom: 10px;
}
.aboutUs-3 dl dt span {
    display: block;
    width: 100px !important;
    height: 100px !important;
    line-height: 100px;
    text-align: center;
    font-size: 1.3rem;
    color: #fff;
    font-weight: bold;
    background-color: #38a882;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.aboutUs-3 dl dd {
    overflow: hidden;
    align-self: center !important;
    margin-bottom: 0;
}
.aboutUs-3 dl dd ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aboutUs-3 dl dd ul li {
    position: relative;
    padding-left: 60px;
}
.aboutUs-3 dl dd ul li span {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    font-weight: bold;
    width: 60px;
}
.aboutUs-3 dl dd ul li span:after {
    font-family: 'Font Awesome 5 free';
    content: "\f0da";
    font-weight: 900;
    display: block;
    position: absolute;
    top: 1px;
    right: 4px;
    z-index: 4;
    color: #38a882;
    font-size: 1rem;
}


@media (min-width: 768px) {
    .aboutUs-3 dl {
        display: flex !important; 
    }
    .aboutUs-3 dl dt {
        float: left;
        margin-right: 20px;
        margin-bottom: 0;
    }
}
@media (min-width: 992px) {
    .aboutUs-3 img {
        width: 40%;
        float: right;
    }
}
@media (min-width: 1200px) and (max-width: 1599px) {
    .aboutUs-3 img {
        width: 100%;
        float: none;
        margin-bottom: 30px;
    }
}
@media (min-width: 1600px) {
    .aboutUs-3 img {
        width: 500px;
    }
}
*/


/*========================================================
                         產品列表
=========================================================*/

/*
.products-s {
    color: #fff;
    text-align: left;
}
.products-s > div {
    padding-top: 5%;
    padding-bottom: 5%;
}
.products-s h3 {
    font-weight: bold;
    text-align: center;
    margin: 0 0 30px 0;
}
.products-s .products-s-desc {
    padding-left: 3rem;
}

.products-s-desc-item {
    margin-bottom: 30px;
}
.products-s-desc-item h4 {
    font-weight: bold;
    font-size: 1.4rem;
    margin: 0 0 10px 0;
    text-decoration: underline;
}
.products-s-desc-item ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.products-s-desc-btn a {
    display: inline-block;
    padding: 7px 50px;
    color: #fff;
    background-color: #49ae8e;
    font-size: 1.1rem;
}
.products-s-desc-btn a:hover {
    background-color: #1b7a5c;
}

.products-s1 .products-s-img {
    background: url("../img/products-s1-bg.jpg") no-repeat center center; 
    background-size: cover;
}
.products-s2 .products-s-img {
    background: url("../img/products-s2-bg.jpg") no-repeat center center; 
    background-size: cover;
}
.products-s3 .products-s-img {
    background: url("../img/products-s3-bg.jpg") no-repeat center center; 
    background-size: cover;
}
.products-s4 .products-s-img {
    background: url("../img/products-s4-bg.jpg") no-repeat center center; 
    background-size: cover;
}
.products-s5 .products-s-img {
    background: url("../img/products-s5-bg.jpg") no-repeat center center; 
    background-size: cover;
}
.products-s6 .products-s-img {
    background: url("../img/products-s6-bg.jpg") no-repeat center center; 
    background-size: cover;
}
.products-s7 .products-s-img {
    background: url("../img/products-s7-bg.jpg") no-repeat center center; 
    background-size: cover;
}


@media (min-width: 992px) {
    .products-s1 .products-s-desc,
    .products-s3 .products-s-desc,
    .products-s5 .products-s-desc,
    .products-s7 .products-s-desc {
        padding-left: 0rem;
        padding-right: 2rem;
    }
    .products-s2 .products-s-desc,
    .products-s4 .products-s-desc,
    .products-s6 .products-s-desc {
        padding-left: 2rem;
    }
}
@media (min-width: 1200px) {
    .products-s1 .products-s-desc,
    .products-s3 .products-s-desc,
    .products-s5 .products-s-desc,
    .products-s7 .products-s-desc {
        padding-right: 5rem;
    }
    .products-s2 .products-s-desc,
    .products-s4 .products-s-desc,
    .products-s6 .products-s-desc {
        padding-left: 5rem;
    }
}
*/

/*========================================================
                         產品介紹
=========================================================*/


/*
.product-list [class*="col-"] {
    margin-bottom: 30px;
}
.product-list [class*="col-"] h4 {
    font-weight: bold;
    font-size: 1.2rem;
    border-bottom: 2px dashed #adadad;
    padding: 10px 0 10px 10px;
    margin-bottom: 10px;
    text-align: left;
    color: #105086;
}
.product-list [class*="col-"] ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.product-list [class*="col-"] ul li {
    position: relative;
    padding-left: 28px;
}
.product-list [class*="col-"] ul li:before {
    font-family: 'Font Awesome 5 free';
    content: "\f00c";
    font-weight: 900;
    display: block;
    position: absolute;
    left: 10px;
    top: 1px;
    z-index: 9;
    color: #3d89c9;
    font-size: 0.6rem;
}
.product-show [class*="col-"] {
    margin-bottom: 30px;
}
.product-show [class*="col-"] img {
    border: 1px solid #adadad;
    border-bottom: 5px solid #adadad;
    border-radius: 10px;
}
*/

/*========================================================
                        Why CyberTAN
=========================================================*/

/*
.advantages {
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: left;
}
.advantages .advantages-img {
    position: relative;
}
.advantages .advantages-img .advantages-font-img {
    position: absolute;
    z-index: 1;
    left: -9%;
    top: 237px;
}
.advantages .advantages-img .advantages-back-img {
    position: absolute;
    top: -47px;
    right: 0;
    z-index: 0;
}
.advantages .advantages-caption p {
    margin-bottom: 35px;
}

@media (max-width: 575px) {
    .advantages .advantages-img .advantages-back-img {
        position: unset;
    }    
    .advantages .advantages-img .advantages-back-img img {
        width: 100%;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .advantages .advantages-img .advantages-back-img {
        position: unset;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .advantages .advantages-img .advantages-back-img {
        position: unset;
    }
}
*/

/*========================================================
                      	 產品列表
=========================================================*/

.product-wrap {	
    background: url("../img/index/product-bg.jpg") no-repeat center top;
    background-size: cover;
	padding-top: 60px;
    padding-bottom: 120px;
    padding-left: 5%;
    padding-right: 5%;
}
.product-wrap img {
    width: 100%;
    vertical-align: bottom;
}
.product-item {
    position: relative;
    padding: 0 10px;
    margin-bottom: 40px;
}

.product-item-img {
    position: relative;
    margin: 0;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    background: #689b94 url("../img/products-item-bg.png") repeat left top;    
}
.good-img {
    background: url("../img/products-item-bg.png") repeat left top;
}

.products-wrap [class*="col-"]:nth-of-type(6n+1) .product-item-img, 
.good-img1 {
    background-color: #7A9AAB;
}
.products-wrap [class*="col-"]:nth-of-type(6n+2) .product-item-img, 
.good-img2 {
    background-color: #B28D9F;
}
.products-wrap [class*="col-"]:nth-of-type(6n+3) .product-item-img, 
.good-img3 {
    background-color: #7C9788;
}
.products-wrap [class*="col-"]:nth-of-type(6n+4) .product-item-img, 
.good-img4 {
    background-color: #8D8FAE;
}
.products-wrap [class*="col-"]:nth-of-type(6n+5) .product-item-img, 
.good-img5 {
    background-color: #C0C182;
}
.products-wrap [class*="col-"]:nth-of-type(6n+6) .product-item-img, 
.good-img6 {
    background-color: #D6CBC5;
}

.product-item p {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 5px;
}

.product-item-img:hover {
    color: #fff
}
.product-item-img:hover .product-item-mask {
    opacity: 1;
    visibility: visible
}
.product-item-img:hover .product-item-mask::after {
    height: 100%
}
.product-item-img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}
.product-item-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: .625rem 1rem;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    font-size: 1.2rem;
    font-weight: 700;
    transition: all .3s
}
.product-item-mask::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 50px;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    transform: translateY(-50%);
    transition: all .3s
}
.product-item-mask span {
    position: relative;
    display: block;
    z-index: 2;
    padding: 5px 30px;
    border: 1px solid #fff;
}
.product-item-info {
    text-align: left;
}
.product-item-title {
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
    margin-top: 40px;
    margin-bottom: 10px;
}

.product-item-btn {
    text-align: center;
}
.product-item-btn a {
    display: inline-block;
    color: #111;
    background-color: #fff;
    padding: 5px 10px;
    width: 50%;
    font-size: 0.9rem;
    border: 1px solid #adadad;
}
.product-item-btn a:hover {
    color: #fff;
    background-color: #147b3b;
}
@media (max-width: 991px) {
    .product-item-img {
        background: #689b94 url("../img/products-item-bg2.png") repeat left top;    
    }
    .good-img {
        background: url("../img/products-item-bg2.png") repeat left top;
    }
}
@media (min-width: 992px) {
    .product-wrap {	
        padding-bottom: 100px;
    }
    .product-item-title {
        margin-top: 60px;
        margin-bottom: 20px;
    }
}


/*========================================================
                          產品內頁
=========================================================*/

.products-detail h3 {
    font-weight: bold;
}
.products-detail h4 {
    font-size: 1.1rem;
    font-weight: bold;
}
.products-detail ul {
    list-style: none;
    margin: 0 0 30px 0;
    padding: 0;
}
.products-detail ul li {
    position: relative;
    color: #111;
    padding: 7px 12px;
    border-bottom: 1px dashed #ccc;
}
.products-detail ul li:after {
    font-family: 'Font Awesome 5 free';
    content: "\f0da";
    font-weight: 900;
    display: block;
    position: absolute;
    left: 0;
    top: 7px;
    z-index: 9;
    color: #000;
}

@media (max-width: 991px) {
    .products-detail h3 {
        margin-top: 30px;
    }
}

/*========================================================
                          產品相關
=========================================================*/

.product-related {
    margin-top: 100px;
}

.product-related h4 {
    font-weight: bold;
    text-decoration: underline;
}

.product-related .product-item {
    margin: 10px;
}
.product-related .product-item-img {
    background: none;
/*    box-shadow: 0 0 10px #aaa;	*/
}