.wrapper section { overflow: hidden; margin: 0px auto; width: 1170px; }

/* sub-banner */
#sub-banner {overflow: hidden;background: no-repeat 50% / cover;display: block;display: none;}
#sub-banner img { width: 100%; max-width: inherit; }

/* wrap */
.wrap {margin: 60px 0;}
.wrap {overflow: hidden;position: relative;background: no-repeat -10% 102%,117% 0 / auto;padding: 90px 0px 100px;min-height: 500px;}
.wrapper {
    background-image: url(/images/02/index/img-recomBg.jpg);
}
.wrap aside , #content-main { float: left; width: 20%; }

/* aside */
.wrap aside h3 {text-align: center;font-size: 22px;line-height: 1.5;background-color: #005197;color: #fff;font-weight: normal;padding: .8rem .5rem;position: relative;}
.wrap aside h3:after {top: 100%;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(29, 32, 136, 0);border-top-color: #005197;border-width: .8rem;margin-left: -.8rem;}
.wrap aside , #content-main {float: left;width: 20%;}
.wrap aside ul { margin: 20px 0 8px; }
.wrap aside ul li ul.submenu li a{ position: relative; margin: 0;  }
.wrap aside ul li ul.submenu li a:before{content:'-';display:block;position:absolute;left: 10px;bottom: 10px;width: 30px;height: 30px;text-align:cente;line-height: 30px;;font-size: 16pt;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;color: #c7c7c7;}
.wrap aside ul li { overflow: hidden; color: #626262; letter-spacing: .075em; font-size: 16px; }
.wrap aside ul li a{ margin-bottom: 9px; padding: 10px 10px 10px 30px;  display: block; font-weight: 500; letter-spacing: 0.2px; font-size: 16px; color: #333; position: relative;border-bottom: 1px solid #ddd;}
.wrap aside ul li a:after {display: inline-block;content: "";width: 7px;height: 7px;border-top: 1px solid #939393;border-right: 1px solid #939393;transform: translateY(-50%) rotate(45deg);vertical-align: 1px;position: absolute;left: 0;top: 50%;}
.wrap aside ul li p { position: relative; }
.wrap aside ul li b { position: absolute; padding: 5px 11px; font-weight: normal; top: calc((100% - 35px) / 2); right: 0; }
.wrap aside ul li span { font-size: 12px; vertical-align: text-bottom; color: #4e4d43; }
.wrap aside ul li ul.submenu { margin: 10px 5px 17px; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
.wrap aside ul li.action ul.submenu { display: block; }
.wrap aside ul li ul.submenu li { overflow: hidden; position: relative; padding: 0px 0 10px 0; height: 30px; border-bottom: 1px solid #efefef; font-size: 16px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; vertical-align: top; }
.wrap aside ul li ul.submenu li ul.lastmenu { margin-left: 5px; }
.wrap aside ul li ul.submenu li a{ margin-bottom: 9px; padding: 10px 10px 10px 30px;  display: block; font-weight: 500; letter-spacing: 0.2px; font-size: 16px; color: #333; position: relative;border-bottom: 1px solid #ddd;}
.wrap aside ul li ul.submenu li a:after {display: inline-block;content: "";width: 7px;height: 7px;border-top: 1px solid #939393;border-right: 1px solid #939393;transform: rotate(45deg);vertical-align: 1px;position: absolute;left: 0;top: 20px;display: none;}
.wrap aside #adWrap .list a { margin: 10px 0; border: 1px #57abb5 solid; }
.wrap aside .list { display: none; }

/* article-text */
.wrapper section .article-text{position: relative;margin-top: 26px;margin-bottom: 26px;padding-top: 17px;padding-bottom: 17px;border-bottom: 1px solid #d3d3d3;}
.wrapper section .article-text .titleBox{padding: 0 15px;text-align: center;letter-spacing: 0.3em;text-indent: 0.3em;}
.wrapper section .article-text .titleBox h2.pageTitle {text-transform: uppercase;position: relative;display: inline-block;padding: 0 16px;font-size: 36px;letter-spacing: 1px;margin: 0px 0px 5px;color: #6e3a19;font-weight: 600;line-height: 1.5;font-family: 'Noto Serif TC', serif;text-align: center;}
.wrapper section .article-text .titleBox h2.pageTitle:before, .wrapper section .article-text .titleBox h2.pageTitle:after {content: "";position: absolute;top: 50%;margin-top: -0.5px;width: 16px;height: 1px;background-color: #6e3a1982;}
.wrapper section .article-text .titleBox h2.pageTitle:before {left: -16px;}
.wrapper section .article-text .titleBox h2.pageTitle:after {right: -16px;}
.wrapper section .article-text .titleBox .waylink{margin: 0;padding: 6px 15px;border: 0;border-radius: 0;font-size: 15px;text-align: center;}
.wrapper section .article-text .titleBox .waylink i{
    color: #ababab;
}
.wrapper section .container {padding-left: 0;padding-right: 0;display: inline-block;width: 100%;}
.wrapper section .article-text .titleBox .waylink strong{font-weight: 500;}
#pagenav{
    display: none;
}
ul.process_m{margin: 10px 0 0px;text-align: center;}
ul.process_m .btn {width: 80%;line-height: 50px;font-size: 14px;font-weight: 400;color: #261714;padding: 0;display: inline-block;}
ul.process_m .btn a{color: #242424;font-size: 14px;display: block;text-align: center;-webkit-animation-delay: .7s;animation-delay: .7s;-webkit-animation: fsUp .8s ease-out both;animation: fsUp .8s ease-out both;position: relative;border: 1px solid #d0d0d0;z-index: 0;}ul.process_m .btn a i{font-size: 15px;margin-right: 17px;color: #242424;}
ul.process_m .btn:hover a::before {height: 100%;top: auto;bottom: 0;}
ul.process_m .btn a::before {content: '';position: absolute;top: 0;right: 0;z-index: -1;width: 100%;height: 0;background-color: #d9ae72;transition-duration: .3s;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
ul.process_m .btn:hover a,ul.process_m .btn:hover a i{color: #ffffff;}

/* content-main */
#content-main {margin-left: 3%;width: 77%;}
#content-main .titleBox { position: relative; }
#content-main .titleBox h2 { margin-bottom: 15px; display: none; font-weight: normal; }
#content-main .titleBox .waylink { right: 3px; bottom: 0; text-align: right; }
#content-main #article { overflow: hidden; }
#content-main #article article {overflow: hidden;margin-bottom: 0px 0px 40px;font-weight: 400;font-size: 16px;line-height: 2;color: #555;}
#news , #products , #products-detail , #memberWrap , #memberCenter , #infoBar {overflow: hidden;margin-top: 0;margin-bottom: 36px;padding-top: 5px;}
#news article{
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 190%;
    color: #555;
}
#news .page_title h2{
    padding: 10px 0;
    font-family: 'Noto Serif TC', serif;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 35px;
    letter-spacing: 1px;
    font-size: 24px;
    color: #6e3a19;
}


@media screen and (max-width: 1280px){
	.wrap { margin: 35px 0; }
	.wrapper section { width: 1180px; }
}
@media screen and (max-width: 1180px) {
	#sub-banner img { width: 130%; }
	.wrapper section { width: 1040px; }
}
@media screen and (max-width: 1040px) {
	.wrapper section {width: 95%;}
}
@media screen and (max-width: 768px) {
	#sub-banner img { width: 150%; }
	.wrap aside , #content-main { margin-left: 0; width: 100%; }
	.wrap aside h3 {font-size: 18px;}
	.wrap aside #adWrap { overflow: hidden; }
	.wrap aside #adWrap .list { float: left; margin-right: 1%; width: 24%; }
	.wrap aside #adWrap .list:last-child { margin-right: 0; }
	.wrap aside h3 { font-size: 20px; }
	.wrap aside ul li { font-size: 16px; }
	#content-main {margin-top: 10px;}
	#content-main .titleBox .waylink { position: relative; right: inherit; }
#news .page_title h2{
    font-size: 22px;
}
}
@media screen and (max-width: 640px){
	.wrap aside ul {padding: 0;}
	.wrapper section .article-text{margin: 0 15px;padding-bottom: 8px;padding-top: 0;}
	.wrapper section .article-text .titleBox { padding: 0 5px; }
	.wrapper section .article-text .titleBox h2.pageTitle{font-size: 28px;line-height: 35px;}
	ul.process_m .btn{width: 100%;}
	ul.process_m {margin: 10px 0 0px;}
}
@media screen and (max-width: 480px) {
	.wrap aside #adWrap { display: none; }
}