@charset "UTF-8";
.mobile { display: none; }

.pt-20 { padding-top: 20px; background-color: #fff; }

ul.decimal { min-height: inherit; list-style: decimal; margin-top: 10px; line-height: 1.6; margin-left: 1.5em; }

ul.decimal li { text-align: justify; text-justify: inter-character; }

/*主要區塊*/
.main_area .area { position: relative; }

.article { margin-top: 20px; }

.article:first-of-type { margin-top: 0; }

.article .text_area, .article .detail { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 2.4rem; }

.article .text_area h1, .article .detail h1 { padding-top: 40px; font-size: 4.8rem; font-weight: normal; letter-spacing: 5px; }

.article .text_area h3, .article .detail h3 { padding-top: 40px; font-size: 4.8rem; font-weight: normal; letter-spacing: 5px; }

.article .text_area h1:nth-child(1), .article .detail h1:nth-child(1) { padding-top: 0; }

.article .text_area h3:nth-child(1), .article .detail h3:nth-child(1) { padding-top: 0; }

.article .text_area h4, .article .detail h4 { margin-top: 40px; font-size: 3.6rem; font-weight: normal; letter-spacing: 5px; }

.article .detail { padding: 40px 0 40px 0; }

.article .detail p { padding-top: 20px; line-height: 150%; }

.article .detail p.title { padding-top: 0; letter-spacing: 3px; }

.article .detail p.title span { margin-right: 1em; font-size: 3.6rem; }

.article .detail span.bg-gray { margin-right: 10px; padding: 5px 10px; background-color: #e1e1e1; }

.article .detail .btn { margin-top: 60px; }

.article .detail .btn2.center { width: 100%; max-width: inherit; padding-left: 0; }

.article .detail p.version { font-size: 1.5rem; margin-top: 10px; text-align: center; padding-top: 0;}
.article .detail p.version span { margin-left: 2em;}

.article .hint { font-size: 1.6rem; line-height: 200%; color: #ff0000; }

.article .hint .hint_link { width: 9px; height: 15px; margin: 0 5px; display: inline-block; background-image: url(../../images/icon/icon_hint_link.png); }

.article ul.list-point { padding-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.article ul.list-point li { padding: 0 15px; text-align: center; }

.article ul.list-point p { margin: 0 auto; max-width: 5em; text-align: center; }

.article ul.list-point.mobile { display: none; }

.article ul.list-point-2 { overflow: auto; }

.article ul.list-point-2 li { margin-top: 40px; width: 50%; float: left; }

.article ul.list-point-2 .right { width: calc(100% - 160px); padding-left: 20px; float: right; vertical-align: top; border-left: solid 1px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.article ul.list-point-2 img { max-width: 140px; }

.article ul.list-point-2 p.title { font-size: 3rem; color: #ff7373; }

.article ul.list-vertical > li { margin-top: 40px; padding: 0 0 20px 180px; position: relative; }

.article ul.list-vertical .left { position: absolute; top: 0; left: 0; }

.article ul.list-vertical .right { padding-left: 20px; }

.article ul.list-vertical .decimal { margin: 20px 0 0 30px; }

.article ul.list-vertical.border > li { position: relative; margin-top: 40px; padding-bottom: 40px; min-height: 180px; }

.article ul.list-vertical.border > li:nth-child(1) { margin-top: 40px; }

.article ul.list-vertical.border > li::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; bottom: 0; background-image: url(../../images/hr_dot_gray.png); }

.article ul.list-vertical.border > li:nth-last-child(1)::after { display: none; }

.article ul.list-vertical.border p.title { font-size: 3.6rem; }

.article ul.list-vertical.border p.title .focus-red { margin-right: 0.5em; color: #c31826; border-bottom: solid 3px; }

.article ul.list-vertical.border p.title .focus-red + span { font-size: 2.4rem; }

.article ul.list-vertical.border p.title.service { padding-left: 50px; font-size: 3.6rem; background: url(../../images/d/d05_2_title.png) left center no-repeat; }

.article ul.list-vertical.border .left { width: 180px; }

.article ul.list-vertical.border .left img { max-width: 100%; }

.article ul.list-vertical.border .left p { margin: 0; }

.article ul.list-vertical.border .left p.number { font-size: 3.6rem; padding: 40px 40px 0 0; }

.article ul.list-vertical.border .left p.number span { font-size: 10rem; color: #ff7373; }

.article ul.list-vertical.border .right { border-left: solid 1px; }

.article .col-2 { overflow: auto; }

.article .col-2 .left { float: left; }

.article .col-2 .right { width: calc(100% - 350px); float: right; }

.article ul.list-img { margin: 20px -20px 0 0; overflow: auto; }

.article ul.list-img li { width: 33%; height: 280px; padding-right: 10px; float: left; -webkit-box-sizing: border-box; box-sizing: border-box; }

.article ul.list-img img { width: 100%; }

.article ul.list-img p { padding: 0; text-align: center; }

.article div.list_img { margin-top: 40px; }

.article div.list_img img { display: inline-block; }

.article .download { margin-left: calc(50% - 280px); margin-right: 40px; padding-right: 40px; position: relative; display: inline-block; border-right: solid 1px; }

.article .download p { padding: 0 0 20px 0; }

.article .download .dl1, .article .download .dl2 { position: absolute; left: 110px; }

.article .download .dl1 img, .article .download .dl2 img { width: auto; height: 40px; }

.article .download .dl1 { top: calc(100% - 85px); }

.article .download .dl2 { top: calc(100% - 40px); }

.article .download + .btn { display: inline-block; vertical-align: top; }

.article .download-type2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; }

.article .download-type2 .mobile { display: none; }

.article .download-type2 p { vertical-align: middle; padding: 0 30px 0 0; font-size: 30px; }

.article .download-type2 .web img { height: 120px; }

.article .download-type2 .box { height: 120px; display: inline-block; position: relative; vertical-align: top; padding-left: 180px; border-left: solid 1px; }

.article .download-type2 .box img.qr { width: 120px; position: absolute; top: 0; left: 30px; }

.article .download-type2 .dl1, .article .download-type2 .dl2 { display: block; width: 150px; height: 50px; }

.article .download-type2 .dl1 img, .article .download-type2 .dl2 img { width: 100%; }

.article .download-type2 .dl1 { margin-bottom: 20px; }

.article .download-type2 .links { width: auto; height: 100%; position: absolute; top: 0; left: 50%; }

.article .download-type2 .links img { width: 100%; }

.article .download-type3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.article .download-type3 .box { margin-right: 20px; padding-right: 20px; border-right: solid 1px #000; }

.article .download-type3 .btn { max-width: 360px; margin: 0; }

.article .download-type3 .btn a { display: block; height: inherit; margin-bottom: 20px; text-align: center; }

.article .download-type3 .btn a:nth-last-child(1) { margin: 0; }

/*數位金融*/
.main_area.type-p { background: -webkit-linear-gradient(#ffffff, #f9f0ec, #b0e1f8); background: -o-linear-gradient(#ffffff, #f9f0ec, #b0e1f8); background: -moz-linear-gradient(#ffffff, #f9f0ec, #b0e1f8); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(#f9f0ec), to(#b0e1f8)); background: linear-gradient(#ffffff, #f9f0ec, #b0e1f8); }

.main_area.type-p .article { max-width: 1170px; margin: -115px auto 0 auto; position: relative; }

.main_area.type-p .article .article_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(../../images/bg_p.jpg); }

.main_area.type-p .article .area { padding: 0 100px 80px 100px; min-height: 500px; -webkit-box-sizing: border-box; box-sizing: border-box; background-repeat: no-repeat; background-position: right top; }

.main_area.type-p .article .area.p_last_bg { background-position: center bottom; }

.main_area.type-p .text_area { max-width: 450px; padding-top: 50px; }

.main_area.type-p .text_area h1 { letter-spacing: 10px; position: relative; }

.main_area.type-p .text_area h3 { letter-spacing: 10px; position: relative; }

.main_area.type-p .text_area h1 span { margin-right: 10px; letter-spacing: 10px; padding-left: 10px; color: #fff; background-color: #254a91; border-radius: 50%; }

.main_area.type-p .text_area h3 span { margin-right: 10px; letter-spacing: 10px; padding-left: 10px; color: #fff; background-color: #254a91; border-radius: 50%; }

.main_area.type-p .text_area p { margin: 10px 0 20px 10px; }

.main_area.type-p .text_area ul { margin-left: 35px; }

.main_area.type-p .text_area ul li { list-style: disc; font-size: 1.8rem; line-height: 180%; }

.main_area.type1 { max-width: 1170px; margin: 0 auto; padding: 0 40px; }

.main_area.type1 .article { padding: 40px 0; background-position: right 40px; background-repeat: no-repeat; overflow: auto; }

.main_area.type1 .article .area { width: 100%; min-height: 417px; }

.main_area.type1 .article .area .btn2 a { margin-top: 10px; }

.main_area.type1 .article.left .area-img, .main_area.type1 .article.right .area-img { width: 380px; max-width: 45%; }

.main_area.type1 .article.left .text_area { margin-right: 400px; }

.main_area.type1 .article.left .area-img { position: absolute; top: 0; right: 0; }

.main_area.type1 .article.right { background-position: 0px 40px; }

.main_area.type1 .article.right .area { float: right; }

.main_area.type1 .article.right .text_area { margin-left: 400px; }

.main_area.type1 .article.right .btn2 { margin-left: 400px; }

.main_area.type1 .article.right .area-img { position: absolute; top: 0; left: 0; }

.main_area.type1 .text_area { min-height: 250px; padding: 0 50px; position: relative; background: url(../../images/article_bg_type1.png) left top no-repeat; }

.main_area.type1 .text_area::after { content: ""; width: 40px; height: 250px; position: absolute; top: 0; right: 0; background: url(../../images/article_bg_type1_2.png) right top no-repeat; background-size: 100% auto; }

.main_area.type2 { max-width: 1170px; margin: 0 auto; }

.main_area.type2 .article { background-repeat: no-repeat; overflow: auto; }

.main_area.type2 .article .area { min-height: 660px; }

.main_area.type2 .article .text_area { min-height: 260px; margin-top: 20px; }

.main_area.type2 .article .btn_cell { margin-left: 60px; }

.main_area.type2 .article .btn2 { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.main_area.type2 .article .btn2 a { margin-top: 10px; }

.main_area.type2 .article.right .area .area-img, .main_area.type2 .article.left .area .area-img { max-width: 55%; }

.main_area.type2 .article.right { background-position: left top; }

.main_area.type2 .article.right .area { padding-left: 680px; }

.main_area.type2 .article.right .area .area-img { position: absolute; top: 0; left: 0; }

.main_area.type2 .article.right .text_area { padding-left: 60px; background: url(../../images/article_bg_type2.png) left top no-repeat; }

.main_area.type2 .article.left { background-position: right top; }

.main_area.type2 .article.left .area { padding-right: 680px; }

.main_area.type2 .article.left .area .area-img { position: absolute; top: 0; right: 0; }

.main_area.type2 .article.left .text_area { padding-right: 60px; background: url(../../images/article_bg_type2_2.png) right top no-repeat; }

.main_area.type2 .article.left .btn2 { padding-left: 0; }

.main_area.type2.yellow .text_area { min-height: 205px; }

.main_area.type2.yellow .article.right .text_area { background: url(../../images/article_bg_type2_y.png) left top no-repeat; }

.main_area.type2.yellow .article.left .text_area { background: url(../../images/article_bg_type2_y_2.png) right top no-repeat; }

.main_area.type2 .article.middle .area { padding-top: 15%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.main_area.type2.blue .article.right .text_area { background: url(../../images/article_bg_type2_b.png) left top no-repeat; }

.main_area.type2.blue .article.left .text_area { background: url(../../images/article_bg_type2_b_2.png) right top no-repeat; }

.main_area.type2.purple .article.right .text_area { background: url(../../images/article_bg_type2_p.png) left top no-repeat; }

.main_area.type2.purple .article.left .text_area { background: url(../../images/article_bg_type2_p_2.png) right top no-repeat; }

.btn { margin-top: 40px; }

.btn a { width: auto; min-width: 4em; margin-right: 10px; padding: 7px 25px; font-size: 2.4rem; color: #d00f24; letter-spacing: 1px; background-color: #fff; border: solid 1px; border-radius: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.btn a:hover, .btn a:active { color: #fff; background-color: #d00f24; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

.btn.center { margin: auto; left: 0; right: 0; text-align: center; }

.btn2 { max-width: 480px; width: 50%; padding: 40px 0 0 50px; }

.btn2 a { width: auto; min-width: 4em; margin-right: 10px; padding: 7px 25px; font-size: 2.4rem; color: #d00f24; letter-spacing: 1px; background-color: #fff; border: solid 1px; border-radius: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.btn2 a:hover, .btn2 a:active { color: #fff; background-color: #d00f24; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

.btn2.center { margin: auto; left: 0; right: 0; text-align: center; }

.btn2 a { margin: 0 5px 0 5px; display: inline-block; }

.btn2.right { left: 44.5%; }

.btn_top2 { width: 54px; height: 54px; position: fixed; right: 20px; bottom: 40px; z-index: 999; background: url(../../images/btn_top.png); }

.btn-cell { margin: 20px 0 0 60px; max-width: 300px; }

.btn-cell > div { margin-right: 5%; width: 45%; float: left; vertical-align: top; }

.btn-cell > div a { margin: 0 auto; display: block; font-size: 20px; text-align: center; border-bottom: solid 10px; border-color: rgba(255, 255, 255, 0); }

.btn-cell > div a:hover { color: #c31826; border-color: #c31826; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }

.btn-cell > div img { width: 80%; margin: 0 auto; display: block; }

hr.dot { border: 0; height: 6px; background: url(../../images/hr_dot.png); }

hr.dot-gray { margin: 0; border: 0; height: 4px; background-image: url(../../images/hr_dot_gray.png); }

.detail > .dot-gray { margin-top: 40px; }

.main_area .tabs_area { position: relative; }

.main_area .tabs_area > .area { display: none; }

.main_area .tabs_area > .area.show { padding-top: 40px; display: block; }

ul.tabs { position: absolute; top: -2px; right: 40px; z-index: 1; }

ul.tabs li { display: inline-block; font-size: 36px; }

ul.tabs a { margin-right: 5px; padding: 5px 15px; position: relative; background-color: #fff; border: solid 2px #ff7373; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

ul.tabs a.on, ul.tabs a:hover { color: #fff; background: -webkit-linear-gradient(#ff7373, #c31826); background: -o-linear-gradient(#ff7373, #c31826); background: -moz-linear-gradient(#ff7373, #c31826); background: -webkit-gradient(linear, left top, left bottom, from(#ff7373), to(#c31826)); background: linear-gradient(#ff7373, #c31826); }

ul.tabs a::after { content: ""; width: 7px; height: 9px; background: url(../../images/d/tag_bg.png); position: absolute; top: -2px; right: -9px; }

/* 繳費網 */
.article ul.list-point p.list-point_text { max-width: initial; }
.article .download .version { font-size: 1.5rem; margin-top: 10px; }
.article .detail .flexbox{display:flex; justify-content:flex-start; align-items:center;margin-top:4rem;}
.article .detail .flexbox img{max-width:100%;}
.article .detail .flexbox >div:nth-child(2){margin-left:4rem;}
.article .detail .flexbox >div h4:nth-child(1){margin-top:0;}

@media screen and (max-width: 1170px) { .btn a { font-size: 1.6rem; }
  .main_area.type-p .article .area { padding: 0 5%; }
  .main_area.type2 { padding: 0 20px; }
  .main_area.type2 .article.right { background-size: 50% auto; }
  .main_area.type2 .article.right .area { padding-left: 55%; }
  .main_area.type2 .article.left { background-size: 50% auto; }
  .main_area.type2 .article.left .area { padding-right: 55%; }
  .main_area.type2 .btn-cell > div { margin: 0; }
  .main_area .tabs_area .area.show { padding-top: 40px; } }

@media screen and (max-width: 799px) { .web { display: none !important; }
  .mobile { display: block; }
  .main_area .text_area h1, .main_area .detail h1 { padding-top: 10%; font-size: 7vw; letter-spacing: 0; }
  .main_area .text_area h3, .main_area .detail h3 { padding-top: 10%; font-size: 7vw; letter-spacing: 0; }
  .main_area .text_area h4, .main_area .text_area .title, .main_area .detail h4, .main_area .detail .title { margin-top: 5%; font-size: 6vw; letter-spacing: 0; }
  .main_area .text_area p, .main_area .detail p { font-size: 3.8vw; margin: 0.5em 0; line-height: 160%; }
  .main_area .article { margin: 0; padding: 0; background-size: 0 0; }
  .main_area .article .area { margin: 0px 0; display: block; }
  .main_area .article .area .mobile.area-img { display: block; float: none; margin: 0 auto 0 auto; max-width: 100%; }
  .main_area .article .area + hr.dot-gray { margin: 0 5%; }
  .main_area .detail { padding: 5% 0 10% 0; }
  .main_area .detail p { margin: 0; padding-top: 5%; }
  .main_area .detail .img_p { width: 100%; margin-top: 5%; }
  .main_area .detail .list-point { padding-top: 0px; display: block; overflow: auto; }
  .main_area .detail .list-point li { width: 33%; min-height: 40vw; padding: 5% 0 0 0; float: left; }
  .main_area .detail .list-point li img { max-width: 80%; }
  .main_area .detail .btn { margin-top: 5%; }
  .main_area .detail > .dot-gray { margin-top: 10%; }
  .main_area ul.list-vertical.border ~ .btn2 { margin-top: 20px; }
  .main_area ul.list-vertical.border li { margin: 20px 0 0 0; padding: 0 0 20px 25vw; min-height: 25vw; }
  .main_area ul.list-vertical.border li::after { margin-top: 10%; }
  .main_area ul.list-vertical.border li:nth-child(1) { margin: 20px 0 0 0; }
  .main_area ul.list-vertical.border li .left { max-width: 25vw; height: auto; margin: 0; }
  .main_area ul.list-vertical.border li .left img { max-width: 80%; }
  .main_area ul.list-vertical.border li .right { padding-left: 10px; }
  .main_area ul.list-vertical.border p { padding-top: 2%; margin: 0 0 0 10px; padding-left: 0; }
  .main_area ul.list-vertical.border p.title { padding-top: 0; font-size: 6vw; }
  .main_area ul.list-vertical.border p.title.mid { line-height: 15vw; }
  .main_area ul.list-vertical.border p.title.mid + p { margin-top: 10%; }
  .main_area ul.list-vertical.border p.title .focus-red { font-size: 6vw; margin-top: 5%; }
  .main_area ul.list-vertical.border p.under { margin: 15% 0 0 0; padding: 0; }
  .main_area ul.list-img { margin: 0 0 0 0; padding: 5% 10% 0 10%; }
  .main_area ul.list-img li { width: 100%; height: auto; padding: 0; float: none; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .main_area ul.list-img p { padding: 5% 0; text-align: center; }
  .main_area div.list_img { margin-top: 10%; }
  .main_area div.list_img img { max-width: 100%; margin: 5% auto; display: block; }
  .main_area .download { margin: 0; padding: 0; border: 0; position: static; text-align: center; display: block; }
  .main_area .download p { padding: 0; }
  .main_area .download .dl1, .main_area .download .dl2 { padding-top: 20px; position: static; display: block; }
  .main_area .download .dl1 img, .main_area .download .dl2 img { width: 250px; max-width: 60%; height: auto; }
  .main_area .download + .btn { display: block; margin-top: 10%; }
  .main_area .download-type2 { display: block; width: 100%; height: inherit; left: 0; }
  .main_area .download-type2 p.mobile { margin: 0; padding: 0; display: block; text-align: center; font-size: 5vw; line-height: 150%; border: none; }
  .main_area .download-type2 p.mobile img { width: 40%; max-width: 200px; }
  .main_area .download-type2 .box { display: block; width: 100%; height: inherit; margin: 0 auto; padding: 0; border: 0; }
  .main_area .download-type2 .dl1, .main_area .download-type2 .dl2 { width: 40%; max-width: 200px; height: inherit; margin: 10px auto 0; display: block; text-align: center; }
  .main_area .download-type3 { display: block; }
  .main_area .download-type3 .btn { max-width: 100%; margin: 20px 0 0; }
  .main_area .download-type3 .btn a { margin: 0 0 20px; }
  .main_area.type-p .article { height: auto; margin: 0; }
  .main_area.type-p .article .area { min-height: auto; margin: 0; padding: 5%; background-size: 0 0; }
  .main_area.type-p .article .area img.mobile { width: 100%; }
  .main_area.type-p .article .area:nth-child(1) { background-image: none; }
  .main_area.type-p .article .area.p_last_bg { min-height: auto; padding-bottom: 35vw; background-size: 100% auto; background-position: center bottom; }
  .main_area.type-p .article .area .btn2 { width: 100%; }
  .main_area.type-p .article .text_area { max-width: 100%; padding: 0; font-size: 4.6vw; }
  .main_area.type-p .article .text_area h1 span { padding: 1% 0% 1% 3%; }
  .main_area.type-p .article .text_area h3 span { padding: 1% 0% 1% 3%; }
  .main_area.type1 { padding: 0 5%; }
  .main_area.type1 .text_area { width: 100%; }
  .main_area.type1 .article { padding: 20px 0; }
  .main_area.type1 .article.right .area .area-img, .main_area.type1 .article.left .area .area-img { position: static; max-width: 70%; display: block; margin: 0 auto; }
  .main_area.type1 .article.right .area .btn2, .main_area.type1 .article.left .area .btn2 { width: 80%; max-width: auto; margin: 0 10%; }
  .main_area.type1 .article.right .text_area, .main_area.type1 .article.right .btn2 { margin-left: 0; }
  .main_area.type1 .article .area { min-height: auto; }
  .main_area.type1 .article .text_area { min-height: 27vw; padding: 0 7%; background-size: 5% auto; }
  .main_area.type1 .article .text_area h1 { letter-spacing: 5px; }
  .main_area.type1 .article .text_area h3 { letter-spacing: 5px; }
  .main_area.type1 .article .text_area::after { width: 5%; }
  .main_area.type2 { padding: 20px 5%; }
  .main_area.type2 .article { margin: 20px 0; }
  .main_area.type2 .article.right, .main_area.type2 .article.left { background-size: 0 0; }
  .main_area.type2 .article.right .area, .main_area.type2 .article.left .area { min-height: auto; padding: 0; }
  .main_area.type2 .article.right .area .area-img, .main_area.type2 .article.left .area .area-img { position: static; max-width: 100%; }
  .main_area.type2 .article.right .text_area, .main_area.type2 .article.left .text_area { min-height: 28vw; padding: 0 8%; background: url(../../images/article_bg_type2.png) left top no-repeat; background-size: 5% auto; }
  .main_area.type2 .article.right .text_area h1, .main_area.type2 .article.left .text_area h1 { line-height: 100%; }
  .main_area.type2 .article.right .text_area h3, .main_area.type2 .article.left .text_area h3 { line-height: 100%; }
  .main_area.type2 .article .btn2 { margin: 0; }
  .main_area.type2.yellow .article.right .text_area, .main_area.type2.yellow .article.left .text_area { min-height: 22vw; background: url(../../images/article_bg_type2_y.png) left top no-repeat; background-size: 5% auto; }
  .main_area.type2.blue .article.right .text_area, .main_area.type2.blue .article.left .text_area { background: url(../../images/article_bg_type2_b.png) left top no-repeat; background-size: 5% auto; }
  .main_area.type2.purple .article.right .text_area, .main_area.type2.purple .article.left .text_area { background: url(../../images/article_bg_type2_p.png) left top no-repeat; background-size: 5% auto; }
  .btn { margin: 0 10%; }
  .btn a { margin-top: 4%; padding: 10px; display: block; font-size: 4.6vw; border-radius: 2em; text-align: center; }
  .btn.middle { width: 50%; }
  .btn2 { max-width: 100%; margin: 0 10%; padding: 0; }
  .btn2 a { font-size: 4.6vw; /*padding:5px 20px;*/ margin: 5% 0 0 0; padding: 10px; display: block; text-align: center; }
  .btn-cell { max-width: 100%; margin: 0 0 0 0; top: 43%; left: 5%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .btn-cell > div { width: 25%; margin: 0; }
  .btn-cell > div a { font-size: 3.8vw; }
  .btn-cell > div a img { max-width: 100%; }
  ul.tabs { top: 10px; left: auto; right: 8%; /*& + div.area{ padding-top:10%; }*/ }
  ul.tabs li { font-size: 3.6vw; }
  .main_area .tabs_area > .area { display: none; }
  .main_area .tabs_area > .area.show { padding-top: 10%; display: block; } 
  .article .detail p.version { font-size: 1.5rem; margin-top: 10px; text-align: center;}
  .article .detail p.version span { margin-left: 0; display: block;}
  
  .article .detail .flexbox{flex-direction: column; margin:4rem 0}
  .article .detail .flexbox >div:nth-child(2){margin-left:0;align-self: self-start;}
  .article .detail .flexbox >div h4{font-size:4.6vw ;margin-top:8%;}
  .article .detail .flexbox >div  p.title{font-size:4vw; margin-top:0;}
}