a.label { top:-150px; } .pageSection { background-color: #fdf9f5; padding-top: 170px; padding-bottom: 70px; min-height: 100%; line-height: 1.8; border-bottom: 1px solid #FFF; } .pageSection.outter { padding-top: 70px; } .pageSection .content { width: 85%; max-width: 1500px; margin: auto;} .pageSection .content h2 { font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 2.8rem; color: #221815; line-height: 1.1; margin-bottom: 1.5rem; } .pageSection .content h3 { font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 2rem; color: #009747; line-height: 1.1; margin-bottom: 1.5rem; } .pageSection .content h4 { font-weight: 500; font-size: 1.4375rem; } .typeSelector { display: flex; justify-content: center; padding-bottom: 4px; border-bottom: 1px solid #119d51; margin-bottom: 1rem; } .typeSelector li { flex: 0 0 190px; text-align: center; line-height: 1; margin-right:1px; } .typeSelector li:last-child { margin-right: 0; } .typeSelector li span { position: relative; } .typeSelector li a { position: relative; display: block; color: #151515; padding: 1rem 0 .8rem 0; transition: 0.1s; } .typeSelector li a:before { content: ""; width: 100%; height: 100%; -webkit-border-top-right-radius: 8px; -webkit-border-top-left-radius: 8px; border-top-right-radius: 8px; border-top-left-radius: 8px; border-bottom: 4px solid #f4cda0; background-color: #fdecd8; position: absolute; left: 0; top: 0; transition: 0.5s; } .typeSelector li.on a,.typeSelector li a:hover { color: #FFF; } .typeSelector li.on a:before,.typeSelector li a:hover:before { border-bottom-color: #00823d; background-color: #119d51;} .typeSelector li.on:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 11px 9px 0 9px; border-color: #00823d transparent transparent transparent; position: absolute; bottom: -15px; left: 50%; margin-left: -9px;} .articleList { display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ margin: auto; /*max-width: 96%;*/ border-bottom: 1px dotted #00823d; margin-bottom: 2rem; padding-bottom: 2rem;} .articleList h3 { flex: 0 0 100%; } .articleBox { flex: 0 0 31%; border:1px solid #f4cda0; background-color: #FFF; margin: 0 1% 35px 1%; } .articleBox a.coverlink { height: 105%; } .articleBox .img { line-height: 0; margin: 5px; } .articleBox .txt { padding: 0 15px; font-size: 1.3125rem; font-weight: 600; line-height: 1.4; min-height: 58px; padding-bottom: 30px; } .articleBox:before { content: "more"; display: block; padding: 5px 0 7px 0; width: 60px; background-color: #f4cda0; color: #FFF; font-size: .9375rem; font-weight: 200; text-align: center; line-height: 1; -webkit-border-radius: 4px; border-radius: 4px; position: absolute; bottom: -13px; left: 50%; margin-left: -30px; transition: .3s; } .articleBox:hover { border-color: #119d51; cursor: pointer; } .articleBox:hover:before { background-color: #119d51; } .articleBanner { flex: 0 0 31%; /*flex: 0 0 31%;*/ border:1px solid #fdf9f5; margin: 0 1% 35px 1%; align-self: center;} .articleAction { flex: 0 0 31%; min-height: 270px; display: flex; align-items: center; border: 1px solid #fdf9f5; background-color: #FFF; margin: 0 1% 35px 1%; transition: .3s; background-image: url(../images/articlebtn1.jpg); background-position: center left; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; color: #FFF; font-weight: 200; overflow: hidden; box-shadow: 0 0 8px -2px rgba(0,0,0,.7);} .articleAction.lung { background-image: url(../images/articlebtn2.jpg); } .articleAction.prostate { background-image: url(../images/articlebtn4.jpg); } .articleAction.female { background-image: url(../images/articlebtn3.jpg); } .articleAction:before { content: ""; background-image: url(../images/ribbon_full.png); -webkit-background-size: 100%; background-size: 100%; width: 180px; height: 234px; position: absolute; right: -15px; top: 50%; margin-top: -117px; opacity: .2; transition: .3s ease-out; } .articleAction:hover:before { opacity: .9; margin-right: -15px; } .articleAction p { padding: 0 25px; line-height: 1.5; } .articleAction p:first-child { font-size: 1.7rem; font-weight: 500; } .articleAction p.btnword { display: inline-block; margin-left: 25px; margin-top: 7px; width: auto; background-color: #FFF; -webkit-border-radius: 20px; border-radius: 20px; padding: 6px 37px 6px 18px; color: #c60d14; font-weight: 300; line-height: 1; } .articleAction.lung p.btnword {color: #dc2b10;} .articleAction.prostate p.btnword {color: #043a8b;} .articleAction.female p.btnword {color: #01403c;} .articleAction p.btnword:before { content: ""; width: 25px; height: 25px; -webkit-border-radius: 26px; border-radius: 26px; background-color: #c60d14; position: absolute; right: 4px; top: 3px; } .articleAction.lung p.btnword:before {background-color: #dc2b10;} .articleAction.prostate p.btnword:before {background-color: #043a8b;} .articleAction.female p.btnword:before {background-color: #01403c;} .articleAction p.btnword span { position: absolute; top: 8px; right: 8px; width: 1rem; height: 1rem; animation: flash .9s infinite; } .articleAction:hover p.btnword span { animation-name: none; } .articleAction p.btnword span:before,.articleAction p.btnword span:after { content: ""; width: 10px; height: 2px; background-color: #FFF; transform: rotate(45deg); position: absolute; left: 4px; top:3px; } .articleAction p.btnword span:after { transform: rotate(-45deg); top:9px; } .articleAction p.detial span { display: block; } .articleAction p.detial strong { font-size: 2.2rem; font-weight: 500; padding: 0 2px 0 4px; } .bns_KB { display: flex; flex-wrap: wrap; justify-content: center; border-bottom: 1px dotted #00823d; margin-bottom: 2rem; padding-bottom: 1rem; } .bns_KB div { flex: 0 0 46%; margin: 0 1rem 1rem 1rem; } .articleList.video { display: block; padding: 0 50px; border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .articleList.video .articleBox .img:before { content: ""; background-color: rgba(70,70,70,.65); width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: url(../images/play-button.svg); background-repeat: no-repeat; -webkit-background-size: 60px; background-size: 60px; background-position: center center; } .articleList.video .owl-nav { position: absolute; width: 100%; top: 50%; left: 0;} .articleList.video .owl-nav .owl-prev,.articleList.video .owl-nav .owl-next { z-index: 300; width: 36px; height: 36px; background-color: rgba(0,0,0,.45); position: absolute; margin-top: -40px; } .articleList.video .owl-nav .owl-prev { left: -36px; } .articleList.video .owl-nav .owl-next { right: -36px; } .articleList.video .owl-nav .owl-prev:hover,.articleList.video .owl-nav .owl-prev:focus { left: -40px; background-color: rgba(0,0,0,.65); } .articleList.video .owl-nav .owl-next:hover,.articleList.video .owl-nav .owl-next:focus { right: -40px; background-color: rgba(0,0,0,.65); } .articleList.video .owl-nav .owl-prev:before,.articleList.video .owl-nav .owl-prev:after,.articleList.video .owl-nav .owl-next:before,.articleList.video .owl-nav .owl-next:after { content: ""; background-color: #FFF; width: 16px; height: 3px; transform: rotate(-45deg); position: absolute; left: 11px; top: 21px; opacity: 1; } .articleList.video .owl-nav .owl-prev:before { transform: rotate(45deg); left: 9px; } .articleList.video .owl-nav .owl-prev:after { left: 9px; top:11px; } .articleList.video .owl-nav .owl-next:after { transform: rotate(45deg); top:11px; } .outerKV { background-color: #fdecd8; display: flex; flex-wrap: wrap; align-content: center; overflow: hidden; } .outerKV img { width: auto; height: 100px; } .dotbgBox { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; } .dotbgBox .bgblank, .dotbgBox .bgorange,.dotbgBox .bgorange:before,.dotbgBox .bgorange:after, .dotbgBox .bgpurple,.dotbgBox .bgpurple:before,.dotbgBox .bgpurple:after, .dotbgBox .bggreen,.dotbgBox .bggreen:before,.dotbgBox .bggreen:after { -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .dotbgBox .bgblank { background-image: url(../images/blankmask.svg); width: 575px; height: 574px; left: -40px; top:-312px; } .dotbgBox .bgorange { width: 167px; height: 169px; left: 44%; top:238px; } .dotbgBox .bgorange:before { content: ""; background-image: url(../images/orange-01.svg); animation: motionDot 6s infinite backwards linear;} .dotbgBox .bgorange:after { content: ""; background-image: url(../images/orangmask.svg);} .dotbgBox .bgpurple { width: 322px; height: 319px; left: 60%; top:122px; } .dotbgBox .bgpurple:before { content: ""; background-image: url(../images/purple-01.svg); animation: motionDot_reverse 6s infinite backwards linear;} .dotbgBox .bgpurple:after { content: ""; background-image: url(../images/purplemask.svg); } .dotbgBox .bggreen { width: 473px; height: 472px; left: 72%; top:223px; } .dotbgBox .bggreen:before { content: ""; background-image: url(../images/green-01.svg); animation: motionDot_reverse 6s infinite backwards linear;} .dotbgBox .bggreen:after { content: ""; background-image: url(../images/greenmask.svg); } .outerKV div.preword { font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 1.6875rem; color: #221815; line-height: 1.1; opacity: .6; margin-bottom: .3rem;} .outerKV .sloganBox { width: 85%; max-width: 1500px; margin: 0 auto; padding-top: 160px; padding-bottom: 1rem;} .outerKV .sloganBox h1 { font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 6.0625rem; color: #221815; line-height: 1.1; } .outerKV .sloganBox .subsloganBox { display: flex; align-items: center; } .outerKV .sloganBox .subsloganBox .date { font-family: "sharik-sans",sans-serif; font-weight: 300; font-size: 2.7rem; color: #f09823; line-height: 1.1; margin-right: .5rem;} .outerKV .sloganBox .subsloganBox img { height: 38px; margin-top: 10px; } .outerKV .sloganBox .subsloganBox .subslogan { color: #009747; font-family: "source-han-serif-tc","LiHei Pro Medium", "Microsoft JhengHei", "PMingLiU",serif; font-weight: 700; font-size: 1.8125rem; line-height: 1.1; margin-top: 10px; } .outerKV .sloganBox .wording { padding: 1rem 0; } .outerKV .sloganBox .wording span { margin-left: 1rem; } .outerKV .sloganBox .wording .btn { margin-top: 1rem; } .subType { display: flex; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap;} .subType li { flex: 0 0 auto; padding: 0 .5rem;} .subType li:after { content: ""; width: 1px; height: 40%; background-color: #DDD; position: absolute; right: 0; top: 30%; } .subType li:last-child:after { display: none; } .subType li a { display: block; color: #151515; line-height: 1; padding: .7rem 2rem; -webkit-border-radius: 5px; border-radius: 5px; } .subType li a:hover { background-color: #119d51; color: #FFF;} /*====================== footer AD =======================*/ #footer-AD { width: 100%; min-height: 330px; overflow: hidden; /*margin-top: 100px;*/ } #footer-AD.article { background-image: url(../images/20/BG_footer-AD-article.svg); background-position: center; line-height: 1.4; } #footer-AD.article p { font-size: 1rem; } #footer-AD .fAD-item { float: left; width: 50%; min-height: 330px; position: relative; display: flex; align-items: center; overflow: hidden; } #footer-AD .fAD-item .box-data { float: left; } #footer-AD .fAD-item .box-data span { font-family: "source-han-serif-tc",serif; color: #2C814E; font-size: 1.5rem; font-weight: 500; } #footer-AD .fAD-item .box-data h4 { font-family: "source-han-serif-tc",serif; font-size: 3rem; margin: 7px 0 10px; font-weight: bold; line-height: 1; } .btn-Big { background-color: #fff; font-size: 1.5rem; font-weight: 500; border: 4px solid #333; border-radius: 50px; padding: 10px 50px; display: inline-block; color: #333; transition: .3s; } .btn-Big:hover { background-color: #333; color: #fff; } #footer-AD .fAD-item .box-data a.btn-Big { margin-top: 15px; font-size: 1.3125rem; position: relative; animation: fAD-Ani 1s alternate infinite; } @keyframes fAD-Ani { to { top: 0; } from { top: 10px; } } #footer-AD .fAD-item .box-img { position: absolute; right: 20px; bottom: 40px; } @media (max-width: 1200px){ #footer-AD .fAD-item .box-img { bottom: -130px; } #footer-AD .fAD-item:last-child .box-img { bottom: -80px; } } #footer-AD .fAD-item:last-child .box-data { margin-left: 8%; } #footer-AD .fAD-item:last-child .box-data span { color: #E78112; } #footer-AD .fAD-item:last-child .box-img { right: 0; } .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } #footer-share { margin-top: 70px; width: 100%; overflow: hidden; clear: both; text-align: center; } #footer-share .container-box { margin: auto; display: flex; justify-content: center; flex-wrap: wrap; } #footer-share .footerS-FB { /*float: left;*/ /*border: 8px solid #5273B7;*/ /*border-radius: 10px;*/ /*display: inline-block;*/ /*margin-right: 10px;*/ width: 400px; line-height: 0; margin: 0 1rem; } #footer-share .footerS-LINE { /*float: left;*/ background-color: #f59237; background-image: url(../images/20/BG_footerS-LINE.png); background-repeat: no-repeat; background-position: 98% bottom; -webkit-background-size: 135px; background-size: 135px; width: 400px; height: 130px; /*border: 1px solid #58BE58;*/ /*border-radius: 10px;*/ /*display: inline-block;*/ /*margin-left: 10px;*/ position: relative; line-height: 1.4; margin: 0 1rem; } #footer-share .footerS-LINE .proIMG { position: absolute; top: 10px; left: 10px; width: 54px; height: 54px; box-shadow: 0 0 4px rgba(0,0,0,.3); } #footer-share .footerS-LINE .proData { color: #FFF; position: absolute; top: 15px; left: 75px; text-align: left; text-shadow: 0 0 4px rgba(0,0,0,.3); } #footer-share .footerS-LINE .proData h4 { font-size: 1.3125rem; font-weight: 500; line-height: 1; } #footer-share .footerS-LINE .proData span { font-size: 0.875rem; } #footer-share .footerS-LINE .proData a { color: #FFF; text-shadow: 0 0 4px rgba(0,0,0,.3); } #footer-share .footerS-LINE .proData a:hover { color: #FFF; } #footer-share .footerS-LINE .lineButton { position: absolute; bottom: 10px; left: 10px; } /*小於1367時*/ @media screen and (max-width: 1367px){ a.label { top:-120px; } .pageSection { padding-top: 140px; padding-bottom: 50px; font-size: 1.0625rem; } .pageSection.outter { padding-top: 50px; } .pageSection .content h2 { font-size: 2.3125rem; margin-bottom: 1.2rem; } .pageSection .content h3 { font-size: 1.875rem; margin-bottom: 1.2rem; } .pageSection .content h4 { font-size: 1.1875rem; } .typeSelector { padding-bottom: 3px; } .typeSelector li { flex: 0 0 160px; } .typeSelector li a { padding: .6rem 0; } .typeSelector li a:before { -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; border-bottom-width: 3px; } .typeSelector li.on:after { border-width: 10px 8px 0 8px; bottom: -13px; margin-left: -8px;} .subType li { padding: 0 .3rem;} .subType li:after { height: 60%; top: 20%; } .subType li a { padding: .5rem 1.5rem; -webkit-border-radius: 3px; border-radius: 3px; } .articleBox .txt { padding-right: 10px; padding-left: 10px; font-size: 1.1875rem; min-height: 52px; } .articleAction { min-height: 170px; } .articleAction:before { width: 126px; height: 164px; right: -15px; margin-top: -82px; } .articleAction:hover:before { opacity: .7; margin-right: -12px; } .articleAction p { padding: 0 12px; } .articleAction p:first-child { font-size: 1.3rem; font-weight: 500; } .articleAction p.btnword { margin-left: 12px; margin-top: 7px; padding: 6px 33px 7px 15px; } .articleAction p.btnword:before { width: 22px; height: 22px; right: 4px; top: 4px; } .articleAction p.btnword span { top: 8px; right: 7px; } .articleAction p.btnword span:before,.articleAction p.btnword span:after { width: 8px; top:4px; } .articleAction p.btnword span:after { top:8px; } .articleAction p.detial strong { font-size: 1.7rem; padding: 0 2px 0 2px; } .bns_KB div { margin: 0 .5rem 1rem .5rem; } .articleList.video .articleBox .img:before { -webkit-background-size: 50px; background-size: 50px; } .articleList.video .owl-nav .owl-prev,.articleList.video .owl-nav .owl-next { margin-top: -40px; } .outerKV div.preword { font-size: 1.3125rem; } .outerKV .sloganBox { padding-top: 140px; } .outerKV .sloganBox h1 { font-size: 5rem; } .outerKV .sloganBox .subsloganBox .date { font-size: 2rem;} .outerKV .sloganBox .subsloganBox .subslogan { font-size: 1.5625rem; } .outerKV .sloganBox .wording { padding: .6rem 0; font-size: 1.0625rem;} .outerKV .sloganBox .wording .btn { margin-top: .6rem; } } /*小於940時(MOBILE)*/ @media screen and (max-width: 940px){ a.label { top: -70px; } .articleBox.mOnly { display: block !important; } .pageSection { padding-top: 90px; padding-bottom: 60px; font-size: 1.1875rem; font-weight: 200; } .pageSection.outter { padding-top: 30px; } .typeSelector { justify-content: space-between; padding-bottom: 3px; margin-bottom: 1.2rem; } .typeSelector li { flex: 0 0 33%; } .typeSelector li a { padding: 1rem 0 .8rem 0; } .typeSelector li a:hover { color: inherit; } .typeSelector li a:hover:before { border-bottom-color: #f4cda0; background-color: #fdecd8;} .typeSelector li.on a:hover { color: #FFF; } .typeSelector li.on a:hover:before { border-bottom-color: #00823d; background-color: #119d51;} .typeSelector li.on:after { border-width: 11px 9px 0 9px; bottom: -14px; margin-left: -9px;} .subType li { padding: 0 .1rem; margin-bottom: .5rem;} .subType li:after { display: none; } .subType li a { padding: .5rem .7rem; background-color: #119d51; color: #FFF; font-size: 90%; } .articleList { margin-bottom: 2rem; padding-bottom: 1rem;} .articleBox,.articleBanner,.articleAction { flex: 0 0 46%; margin: 0 1.5% 20px 1.5%; } .articleBox a.coverlink { height: 100%; } .articleBox .txt { padding: 0 15px; font-size: 1.125rem; font-weight: 400; line-height: 1.4; min-height: inherit; padding-bottom: 10px;} .articleBox:before { display: none;} .articleBox:hover { border-color: #f4cda0; } .articleAction { min-height: 220px; } .articleAction:before { opacity: .4; } .articleAction:hover:before { opacity: .4; margin-right: 0; } .articleAction p { padding: 0 15px; font-size: 1rem; } .articleAction p:first-child { font-size: 1.4rem; } .articleAction p.btnword { margin-left: 15px; margin-top: 5px; padding: 6px 33px 7px 15px; } .articleAction p.btnword:before { width: 21px; height: 21px; } .articleAction p.btnword span { top: 8px; right: 6px; } .articleAction p.detial strong { padding: 0 1px; } .bns_KB { margin-bottom: 2rem; padding-bottom: 1rem; } .bns_KB div { flex: 0 0 100%; margin: 0 auto 1rem auto; } .bns_KB div img { max-width: 550px; display: block; margin: auto;} .articleList.video { padding: 0; margin-bottom: 1.5rem; } .articleList.video .owl-nav { position: absolute; width: 100%; top: 50%; left: 0;} .articleList.video .owl-nav .owl-prev,.articleList.video .owl-nav .owl-next { z-index: 300; width: 36px; height: 36px; background-color: rgba(0,0,0,.45); position: absolute; margin-top: -40px; } .articleList.video .owl-nav .owl-prev { left: -36px; } .articleList.video .owl-nav .owl-next { right: -36px; } .articleList.video .owl-nav .owl-prev:hover,.articleList.video .owl-nav .owl-prev:focus { left: -40px; background-color: rgba(0,0,0,.65); } .articleList.video .owl-nav .owl-next:hover,.articleList.video .owl-nav .owl-next:focus { right: -40px; background-color: rgba(0,0,0,.65); } .articleList.video .owl-nav .owl-prev:before,.articleList.video .owl-nav .owl-prev:after,.articleList.video .owl-nav .owl-next:before,.articleList.video .owl-nav .owl-next:after { content: ""; background-color: #FFF; width: 16px; height: 3px; transform: rotate(-45deg); position: absolute; left: 11px; top: 21px; opacity: 1; } .articleList.video .owl-nav .owl-prev:before { transform: rotate(45deg); left: 9px; } .articleList.video .owl-nav .owl-prev:after { left: 9px; top:11px; } .articleList.video .owl-nav .owl-next:after { transform: rotate(45deg); top:11px; } .articleList.video .owl-nav.disabled+.owl-dots { margin-top: 0; } .articleList.video .owl-dots .owl-dot span { background-color: #888; } .articleList.video .owl-dots .owl-dot.active span,.articleList.video .owl-dots .owl-dot:hover span{background:#009747} .dotbgBox .bgblank { width: 288px; height: 287px; } .dotbgBox .bgorange { width: 84px; height: 85px; } .dotbgBox .bgpurple { width: 161px; height: 160px; } .dotbgBox .bggreen { width: 236px; height: 236px; } .dotbgBox .bgyellow { width: 103px; height: 103px; } .outerKV .dotbgBox .bgblank { left: -230px; top:-22px; } .outerKV .dotbgBox .bgorange { left: 77%; top:102px; } .outerKV .dotbgBox .bgpurple { left: -15%; top:188px; } .outerKV .dotbgBox .bggreen { display: none; } .outerKV div.preword { font-size: 1.125rem; } .outerKV .sloganBox { width: 100%; padding-top: 75px; text-align: center; padding-bottom: 10px;} .outerKV .sloganBox.entro { top: 0;} .outerKV .sloganBox h1 { font-size: 2.5rem; } .outerKV .sloganBox .subsloganBox { display: block; margin-top: -6px; } .outerKV .sloganBox .subsloganBox .date { display: block; font-size: 2.2rem; margin-right:0;} .outerKV .sloganBox .subsloganBox .date:after { content: "09:30-16:30"; font-size: 1.375rem; color: #616161; margin-left: .3rem; display: inline-block; vertical-align: text-top; margin-top: 13px; } .outerKV .sloganBox .subsloganBox .subslogan { display: block; font-size: 1.2rem; margin-top: 5px; } .outerKV .sloganBox .wording { padding: .3rem 0; } .outerKV .sloganBox .wording span { margin-left: 0; display: block; } #footer-AD.article { background-image: none; margin-bottom: 40px; } #footer-AD.article .container { padding: 0; } #footer-AD .fAD-item { background-image: url(../images/20/BG_footer-AD-article-L.svg); background-size: cover; width: 100%; padding: 30px; min-height: inherit; } #footer-AD .fAD-item:last-child { background-image: url(../images/20/BG_footer-AD-article-R.svg); } #footer-AD .fAD-item:last-child .box-data { margin-left: 0; } #footer-AD .fAD-item .box-data span { font-size: 1.125rem; } #footer-AD .fAD-item .box-data h4 { font-size: 1.875rem; } #footer-AD .fAD-item .box-data p { width: 60%; line-height: 1.5; } #footer-AD .fAD-item .box-data a.btn-Big { font-size: 1rem; border: 3px solid #333; padding: 10px 35px; } #footer-AD .fAD-item .box-img { bottom: -91px; right: 4%; } #footer-AD .fAD-item:last-child .box-img { bottom: -80px; right: 9%; } #footer-share .footerS-FB,#footer-share .footerS-LINE { float: none; width: 85%; max-width: 300px; margin: 0 .5rem; margin-bottom: .5rem; border-width: 1px; } } /*小於550時(MOBILE)*/ @media screen and (max-width: 550px){ .articleList { margin-bottom: 1rem; padding-bottom: 0; } .articleBox, .articleBanner, .articleAction { flex: 0 0 100%; margin: 0; margin-bottom: 20px; } }