.short-intro { padding-bottom:50px; } .general .clearfix::after { content: ""; clear: both; display: table;} .general.general-inside-bottom { padding-top:80px; } /* • General (Change color) ==========================================================================*/ .general a { color:rgba(0, 155, 222, 1); text-decoration:none; cursor:pointer; text-decoration:underline; transition: all 0.3s ease-out overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .general a:hover { color:rgba(0, 46, 109, 1)} /* .general h1, .general h2, .general h3 { margin-bottom:10px;}*/ .general figcaption, .general .sm-font { font-size:85%; line-height:1.4; padding-top:15px } /* • General Content ------------------------------------------------------------------------- */ .general { line-height:1.8} .general img { width:100%; height:auto;} /* .general .col2-table-halfRow img { width:100%; height:auto;} */ .general hr { background-color:#e8e6e6;} .general hr, .general .colorBox hr, .general .greyBox hr { height:1px; border:none; margin:20px 0;} /* • General image wrap content ------------------------------------------------------------------------- */ .general .wrap-left { float:left; margin:10px 40px 10px 0; display:table;} .general .wrap-right { float:right; margin:10px 0 10px 40px; display:table;} .general figure { display:table; } .general .wrap-left figcaption, .general .wrap-right figcaption { display:table-caption; caption-side:bottom; margin-bottom:20px;} /* • Image scale ------------------------------------------------------------------------- */ .general .img-scale-blk {text-align:center;} .general .img-scale80 { width:80%; height:auto;} .general .img-scale70 { width:70%; height:auto;} .general .img-scale60 { width:60%; height:auto;} .general .img-scale50 { width:50%; height:auto;} .general .img-scale40 { width:40%; height:auto;} .general .img-scale30 { width:30%; height:auto;} .general .img-scale20 { width:20%; height:auto;} .general .img-scale10 { width:10%; height:auto;} .general figcaption.f-width100 { width:100%; margin:0 auto} .general figcaption.f-width70 { width:80%; margin:0 auto} .general figcaption.f-width70 { width:70%; margin:0 auto} .general figcaption.f-width60 { width:60%; margin:0 auto} .general figcaption.f-width50 { width:50%; margin:0 auto} .general figcaption.f-width40 { width:40%; margin:0 auto} .general .img-scale-blk.img-left { text-align:left;} .general .img-scale-blk.img-right { text-align:right;} .general .img-scale-blk.img-left figcaption, .general .img-scale-blk.img-left .figcaption { margin:0; text-align:left;} .general .org { width:auto; height:auto;} .general .img-auto { width:auto; height:auto;} /* • 2 col responsive table (50%) ------------------------------------------------------------------------- */ .general .col2-table-halfRow { display:table; table-layout:fixed; height:100%; width:100%;} .general .col2-table-halfRow .table-col { display:table-cell; float:none; height:100%; padding:20px 0; background-color:transparent; vertical-align:top;} .general .col2-table-halfRow .half-col:nth-child(odd) { width:50%; padding-right:10px; box-sizing: border-box; } .general .col2-table-halfRow .half-col:nth-child(even) { width:50%; padding-left:10px; box-sizing: border-box;} /* • General template - color table style ------------------------------------------------------------------------- */ .general table.gen { width:100%; text-align:left; vertical-align:top; margin:5px 0 0 0; border:none; border-spacing:10px; border-collapse:collapse;} .general table.gen th { padding:5px 25px; color:#fff; text-align:left; vertical-align:top; font-weight:normal; font-weight:500} .general table.gen tr:nth-child(even) td { background-color:#dbdbdb; padding:5px 25px; border-bottom:1px solid #fff; text-align:left; vertical-align:top; } .general table.gen tr:nth-child(odd) td { background-color:#e7e7e7; padding:5px 25px; border-bottom:1px solid #fff; text-align:left; vertical-align:top; } /* • General template - color table style ------------------------------------------------------------------------- */ .general table.nude { width:100%; text-align:left; vertical-align:top; margin:0; border:none; border-spacing:10px; border-collapse:collapse;} .general table.nude th { background-color:transparent; padding:0; text-align:left; vertical-align:top; font-weight:normal; } .general table.nude tr.even td { background-color:transparent; padding:0; border-bottom:none; text-align:left; vertical-align:top; } .general table.nude tr.odd td { background-color:transparent; padding:0; border-bottom:none; text-align:left; vertical-align:top; } /* • 2 col responsive table ------------------------------------------------------------------------- */ .general .col2-table-row { display:table; table-layout:fixed; height:100%; width:100%;} .general .col2-table-row .table-col { display:table-cell; float:none; height:100%; padding:10px; border-bottom:1px solid #fff; vertical-align:top;} .general .col2-table-row:nth-child(odd) { background-color:#dbdbdb} .general .col2-table-row:nth-child(even) { background-color:#dbdbdb} .general .col2-table-row .field { text-align:right; width:25%; color:#fff; font-weight:500; } .general .col2-table-row .detail { width:75%} /* • General template - Grey box & color box ------------------------------------------------------------------------- */ .general .greyBox, .general .colorBox { padding:20px 30px;} .general .greyBox { background-color:#ececec;} .general .greyBox hr { background-color:#ccc; } #body.inside .general .colorBox.cb-normal a { color:#333; font-weight:500} #body.inside .general .colorBox.cb-normal a:hover { color:#fff;} #body.inside .general .colorBox.cb-light a { color:#c00; font-weight:500} #body.inside .general .colorBox.cb-light a:hover { color:#fff;} #body.inside .general .colorBox h2 { color:#fff} .general .colorBox.cb-normal hr { background-color:#ececec; } .general .colorBox.cb-light hr { background-color:#c00; } /* • ul li ------------------------------------------------------------------------- */ .general ul.sp-list { margin:0px; padding:10px 0px; text-indent:0;} .general ul.sp-list li { margin:0px 0px 10px 30px; padding:0; list-style:none; line-height: 1.6} #body.blue .general ul.sp-list li::before { content: "\2022"; color:rgba(0, 155, 222, 1); display:inline-block; width:1em; margin-left: -1em} #body.green .general ul.sp-list li::before { content: "\2022"; color:rgba(0, 150, 57, 1); display:inline-block; width:1em; margin-left: -1em} /* • Youtube ------------------------------------------------------------------------- */ .videoWrapper { position:relative; padding-bottom:56.25%; /* 16:9 */ /*padding-top:25px;*/ height:0;} .videoWrapper iframe { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:0; } .videoWrapper.sm-80 { position:relative; left:10%; padding-bottom:45%; /* 16:9 */ height:0; width:80%; background-repeat:no-repeat;} .videoWrapper.sm-80 iframe { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:0; } .videoWrapper.sm { position:relative; left:20%; padding-bottom:33.75%; /* 16:9 */ height:0; width:60%; background-repeat:no-repeat;} .videoWrapper.sm iframe { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:0; } /* • Left & right photo content blk ------------------------------------------------------------------------- */ .general .img-scale70-txt .is70-col1, .general .img-scale60-txt .is60-col1, .general .img-scale50-txt .is50-col1, .general .img-scale40-txt .is40-col1, .general .img-scale30-txt .is30-col1, .general .img-scale20-txt .is20-col1, .general .img-scale10-txt .is10-col1, .general .img-scale70-txt-r .is70-col2-r, .general .img-scale60-txt-r .is60-col2-r, .general .img-scale50-txt-r .is50-col2-r, .general .img-scale40-txt-r .is40-col2-r, .general .img-scale30-txt-r .is30-col2-r, .general .img-scale20-txt-r .is20-col2-r, .general .img-scale10-txt-r .is10-col2-r { float:left; margin-top:8px} .general .img-scale70-txt { width:100%} .general .img-scale70-txt .is70-col1 { width:70%} .general .img-scale70-txt .is70-col2 { width:30%; float:left; padding-left:40px} .general .img-scale60-txt { width:100%} .general .img-scale60-txt .is60-col1 { width:60%;} .general .img-scale60-txt .is60-col2 { width:40%; float:left; padding-left:40px} .general .img-scale50-txt { width:100%} .general .img-scale50-txt .is50-col1 { width:50%} .general .img-scale50-txt .is50-col2 { width:50%; float:left; padding-left:40px} .general .img-scale40-txt { width:100%} .general .img-scale40-txt .is40-col1 { width:40%} .general .img-scale40-txt .is40-col2 { width:60%; float:left; padding-left:30px} .general .img-scale30-txt { width:100%} .general .img-scale30-txt .is30-col1 { width:30%} .general .img-scale30-txt .is30-col2 { width:70%; float:left; padding-left:30px} .general .img-scale20-txt { width:100%} .general .img-scale20-txt .is20-col1 { width:20%} .general .img-scale20-txt .is20-col2 { width:80%; float:left; padding-left:30px} .general .img-scale10-txt { width:100%} .general .img-scale10-txt .is10-col1 { width:10%} .general .img-scale10-txt .is10-col2 { width:90%; float:left; padding-left:30px} .general .img-scale70-txt-r { width:100%} .general .img-scale70-txt-r .is70-col1-r { width:30%; float:left; padding-right:40px} .general .img-scale70-txt-r .is70-col2-r { width:70%; } .general .img-scale60-txt-r { width:100%} .general .img-scale60-txt-r .is60-col1-r { width:40%; float:left; padding-right:40px} .general .img-scale60-txt-r .is60-col2-r { width:60%;} .general .img-scale50-txt-r { width:100%} .general .img-scale50-txt-r .is50-col1-r { width:50%; float:left; padding-right:40px} .general .img-scale50-txt-r .is50-col2-r { width:50%} .general .img-scale40-txt-r { width:100%} .general .img-scale40-txt-r .is40-col1-r { width:60%; float:left; padding-right:30px} .general .img-scale40-txt-r .is40-col2-r { width:40%} .general .img-scale30-txt-r { width:100%} .general .img-scale30-txt-r .is30-col1-r { width:70%; float:left; padding-right:30px} .general .img-scale30-txt-r .is30-col2-r { width:30%} .general .img-scale20-txt-r { width:100%} .general .img-scale20-txt-r .is20-col1-r { width:80%; float:left; padding-right:30px} .general .img-scale20-txt-r .is20-col2-r { width:20%} .general .img-scale10-txt-r { width:100%} .general .img-scale10-txt-r .is10-col1-r { width:90%; float:left; padding-right:30px} .general .img-scale10-txt-r .is10-col2-r { width:10%} /* • 3 cols/4 cols table ------------------------------------------------------------------------- */ .fullwrapper { width:100%; overflow:hidden;} .general .table-3cols { width:calc(100% + 20px); border:none; border-collapse:collapse; border-spacing:0; } .general .table-3cols tbody tr td { width:calc(100% / 3); vertical-align:top; text-align:left; padding-right:20px; padding-bottom:20px} .general .table-3cols tbody tr td img { width:100%; height:auto;} .general .table-4cols { width:calc(100% + 20px); border:none; border-collapse:collapse; border-spacing:0; } .general .table-4cols tbody tr td { width:calc(100% / 4); vertical-align:top; text-align:left; padding-right:20px; padding-bottom:20px} .general .table-4cols tbody tr td img { width:100%; height:auto;} .general .table-3cols.table-gray { width:calc(100% + 10px); border:none; border-collapse:collapse; border-spacing:0; } .general .table-3cols.table-gray tbody tr td { background-color:#f1f8fd; padding-right:0; padding-bottom:0; border-right:10px solid #fff; border-bottom:20px solid #fff; } .general .table-3cols.table-gray tbody tr td img { border-bottom:5px solid #f4364c } .general .table-3cols.table-gray tbody tr td .txt-pro { padding:15px 20px } .general .table-3cols.table-gray tbody tr td .txt-pro p { color:rgba(0, 155, 222, 1); font-size:110%; font-weight:normal; line-height:normal; } /* • General (For HP template) ==========================================================================*/ /* #body .general h2 { font-size:40px; line-height:1.2; text-transform:uppercase;} #body .general h3 { font-size:32px; line-height:1.2; text-transform:uppercase;} #body .general h4 { font-size:26px; line-height:1.2; text-transform:uppercase;}*/ #body.blue .general h2.normal, #body.blue .general h3.normal, #body.blue .general h4.normal, .general .txt-blue { color:rgba(0, 46, 109, 1) } #body.blue .general h2.light, #body.blue .general h3.light, #body.blue .general h4.light, .general .txt-lightblue { color:rgba(0, 155, 222, 1) } #body.green .general h2.normal, #body.green .general h3.normal, #body.green .general h4.normal, .general .txt-green { color:rgba(0, 150, 57, 1) } #body.green .general h2.light, #body.green .general h3.light, #body.green .general h4.light, .general .txt-lightgreen { color:rgba(84, 187, 171, 1)} #body.blue .general a { color:rgba(0, 155, 222, 1); transition: all 0.3s ease-out} #body.blue .general a:hover { color:rgba(0, 46, 109, 1); } #body.green .general a { color:rgba(0, 150, 57, 1); transition: all 0.3s ease-out} #body.green .general a:hover { color:#333; } .general .txt-red { color:red} .general .txt-white { color:#fff;} #body.blue .general table.gen th, #body.blue .general .col2-table-row .field, #body.blue .general .colorBox.cb-normal { background-color:rgba(0, 155, 222, 1); } #body.green .general table.gen th, #body.green .general .col2-table-row .field { background-color:rgba(0, 150, 57, 1) } #body .general .colorBox.cb-normal, #body .general .colorBox.cb-normal.banner-blk { background: rgb(68,192,176); background: -moz-linear-gradient(130deg, rgba(68,192,176,1) 0%, rgba(68,192,176,1) 20%, rgba(117,202,189,1) 20%, rgba(117,202,189,1) 40%, rgba(68,192,176,1) 40%); background: -webkit-linear-gradient(130deg, rgba(68,192,176,1) 0%, rgba(68,192,176,1) 20%, rgba(117,202,189,1) 20%, rgba(117,202,189,1) 40%, rgba(68,192,176,1) 40%); background: linear-gradient(130deg, rgba(68,192,176,1) 0%, rgba(68,192,176,1) 20%, rgba(117,202,189,1) 20%, rgba(117,202,189,1) 40%, rgba(68,192,176,1) 40%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#44c0b0",endColorstr="#44c0b0",GradientType=1); } #body .general .colorBox.cb-normal h2.normal, #body .general .colorBox.cb-normal h3.normal, #body .general .colorBox.cb-normal h4.normal {color:rgba(0, 46, 109, 1); } #body .general .colorBox.cb-normal h2.light, #body .general .colorBox.cb-normal h3.light, #body .general .colorBox.cb-normal h4.light { color:#fff; } #body .colorBox.cb-normal, #body .colorBox.cb-normal a { color:#fff;} #body .colorBox.cb-normal a:hover { color:#333;} #body .general .colorBox.cb-light { background: rgb(187,227,219); background: -moz-linear-gradient(130deg, rgba(187,227,219,1) 0%, rgba(187,227,219,1) 20%, rgba(154,214,203,1) 20%, rgba(154,214,203,1) 40%, rgba(187,227,219,1) 40%); background: -webkit-linear-gradient(130deg, rgba(187,227,219,1) 0%, rgba(187,227,219,1) 20%, rgba(154,214,203,1) 20%, rgba(154,214,203,1) 40%, rgba(187,227,219,1) 40%); background: linear-gradient(130deg, rgba(187,227,219,1) 0%, rgba(187,227,219,1) 20%, rgba(154,214,203,1) 20%, rgba(154,214,203,1) 40%, rgba(187,227,219,1) 40%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bbe3db",endColorstr="#bbe3db",GradientType=1); } #body .general .colorBox.cb-light h2.normal, #body .general .colorBox.cb-light h3.normal, #body .general .colorBox.cb-light h4.normal { color:rgba(0, 46, 109, 1); ;} #body .general .colorBox.cb-light h2.light, #body .general .colorBox.cb-light h3.light, #body .general .colorBox.cb-light h4.light { color:#fff;} #body .colorBox.cb-light { color:#333; } #body .colorBox.cb-light a { color:rgba(0, 46, 109, 1) } #body .colorBox.cb-light a:hover { color:rgba(0, 155, 222, 1) } #body .general .colorBox.cb-normal hr { background-color:#fff} #body .general .colorBox.cb-light hr { background-color:#fff} /* sp link */ .sp-alink { display:inline-block; padding:15px; margin-bottom:10px; color:#fff; line-height:1.3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .sp-alink .fa-sp { padding-left: 10px; } #body.blue .sp-alink.a-blue, #body.green .sp-alink.a-blue { background-color: rgba(0, 46, 109, 1); color:#fff} #body.blue .sp-alink.a-lightblue, #body.green .sp-alink.a-lightblue { background-color: rgba(154, 202, 235, 1); color:#fff} #body.blue .sp-alink.a-green, #body.green .sp-alink.a-green { background-color: rgba(84, 187, 171, 1); color:#fff} #body.blue .sp-alink.a-gray, #body.green .sp-alink.a-gray { background-color: #ececec; color:#333} #body.blue a:hover .sp-alink.a-blue, #body.green a:hover .sp-alink.a-blue { background-color: rgba(0, 46, 109, 0.4); color:#001735; transition: all 0.3s ease-out;} #body.blue a:hover .sp-alink.a-lightblue, #body.green a:hover .sp-alink.a-lightblue { background-color: rgba(154, 202, 235, 0.7); color:rgba(0, 46, 109, 1); transition: all 0.3s ease-out;} #body.blue a:hover .sp-alink.a-green, #body.green a:hover .sp-alink.a-green { background-color: rgba(84, 187, 171, 0.7); color:rgb(38 129 115); transition: all 0.3s ease-out;} #body.blue a:hover .sp-alink.a-gray, #body.green a:hover .sp-alink.a-gray { background-color: rgba(154, 202, 235, 0.3); color:rgba(0, 46, 109, 1); transition: all 0.3s ease-out;} .general a.sp-alink { padding:4px 10px; margin-bottom:15px; border-radius:4px; color:#fff; text-decoration:none; display:inline-block; cursor:pointer;} .general a.sp-alink:after { content: "\f08e"; display: inline-black; padding-left: 5px; vertical-align: middle;font-family: "FontAwesome";} .general .blk-left { text-align: left; } .general .blk-center { text-align: center; } .general .blk-right { text-align: right; } #body.en .general .big-txt {text-transform: uppercase; font-size: 22px; font-family:'Montserrat Bold','NotoSansTC-Bold';} #body.tc .general .big-txt {text-transform: uppercase; font-size: 22px; font-family: 'Montserrat Bold','NotoSansTC-Bold'} /* • Banner blk ------------------------------------------------------------------------- */ #body .general .colorBox.banner-blk { padding: 60px 50px; color:rgba(0, 46, 109, 1); /* cursor:pointer; */} /* #body .general .colorBox.cb-normal.banner-blk:hover, #body .general .colorBox.cb-light.banner-blk:hover { box-shadow: 0 3px 30px rgba(0,0,0,0.3);opacity: 1;} #body .general .colorBox.cb-normal.banner-blk, #body .general .colorBox.cb-light.banner-blk, #body .general .colorBox.cb-normal.banner-blk:hover, #body .general .colorBox.cb-light.banner-blk:hover { transition: all 0.3s ease-out; } */ #body .general .colorBox.banner-blk a { color:rgba(0, 46, 109, 1); cursor:pointer; } #body .general .colorBox.cb-normal.banner-blk a:hover { color:#fff; cursor:pointer; } #body .general .colorBox.cb-light.banner-blk a:hover { color:rgba(0, 155, 222, 1); cursor:pointer; } table.table-banner { width:100%; border:none; border-collapse:collapse;} table.table-banner tr td { vertical-align:middle; text-align:left; } table.table-banner.tb-70 tr td:first-child { width:70%; } table.table-banner.tb-70 tr td:last-child { width:30%; padding-left:100px; line-height:1.4; } table.table-banner.tb-50 tr td:first-child { width:50%; } table.table-banner.tb-50 tr td:last-child { width:50%; padding-left:100px; line-height:1.4; } table.table-banner tr td img { width:100%; height:auto; } .banner-d { display:block; } .banner-m { display:none; } /* • Special Expand Collapse ------------------------------------------------------------------------- */ .sp-esec { display:flex; align-items:flex-start; width:100%; transition: all 0.3s ease-out; margin-bottom:80px; } .sp-esec .sp-esec-img { width:400px; height:auto; } .sp-esec:nth-child(odd) .sp-esec-img { padding-right:50px; } .sp-esec:nth-child(even) .sp-esec-img { padding-left:50px; } .sp-esec:last-child { margin-bottom:0px!important; } .sp-esec .sp-esec-blk { } .sp-esec .sp-esec-blk .sp-esec-title { padding:0 80px 0 0; cursor:pointer; transition: all 0.3s ease-out; } .sp-esec .sp-esec-blk .sp-esec-title h3 { line-height:normal; color:rgba(0, 46, 109, 1)} .sp-esec .sp-esec-blk .sp-esec-title p { margin-bottom:20px; } .sp-esec .sp-esec-blk .sp-esec-title::after { content:" "; width:50px; height:50px; position:absolute; display:block; right:20px; top:60px; background-image:url(images/arrow-left-seablue.svg); background-repeat:no-repeat; background-size:contain; background-position:right center; transition:transform 300ms ease; } .sp-esec-blk.open>.sp-esec-title::after { transform: rotate(90deg); } /* ========================================================================== Media ============================================================================= */ /* @media only screen and (max-width: 1400px) { #body .general h2 { font-size:36px; } #body .general h3 { font-size:30px; } #body .general h4 { font-size:24px; } }*/ @media only screen and (max-width: 1100px){ #full-container .general a { text-decoration: none; } } @media only screen and (max-width: 1024px) { .videoWrapper.sm, .videoWrapper.sm-80 { left:0%; padding-bottom:56.25%; /* 16:9 */ width:100%; } /* #body .general h2 { font-size:30px; } #body .general h3 { font-size:26px; } #body .general h4 { font-size:20px; }*/ table.table-banner.tb-70 tr td:last-child, table.table-banner.tb-50 tr td:last-child { padding-left:60px;} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { .sp-esec .sp-esec-blk .sp-esec-title::after { top:10px;} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { #body .general .colorBox.banner-blk { padding:50px 30px;} table.table-banner.tb-70 tr td:first-child { width:60%; } table.table-banner.tb-70 tr td:last-child { width:40%; padding-left:50px;} table.table-banner.tb-50 tr td:last-child { width:50%; padding-left:50px;} .sp-esec .sp-esec-img { width:220px; height:auto; } .sp-esec:nth-child(odd) .sp-esec-img { padding-right:30px;} .sp-esec:nth-child(even) .sp-esec-img { padding-left:30px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (max-width: 767px) { .general { line-height:1.6} .general .col2-table-row { display:block; table-layout:inherit; width:100%; height:100%; border:none} .general .col2-table-row .table-col { display:block; float:inherit; height:100%; padding:inherit; border-bottom:none;} .general .col2-table-row .field { width:100%; padding:3% 5%; text-align:left; line-height:1.4} .general .col2-table-row .detail { width:100%; padding:3% 5%;} .general .col2-table-row:nth-child(odd) { background-color:#dbdbdb} .general .col2-table-row:nth-child(even) { background-color:#dbdbdb} .general .col2-table-halfRow { display:block; table-layout:inherit; height:100%; width:100%;} .general .col2-table-halfRow .table-col { display:block; float:inherit; height:100%; padding:inherit;} .general .col2-table-halfRow .half-col:nth-child(odd) { width:100%; padding-right:0%; padding-bottom:20px} .general .col2-table-halfRow .half-col:nth-child(even) { width:100%; padding-left:0%; padding-bottom:20px;} .general .col2-table-halfRow .table-col img { margin-bottom:10px} .general .greyBox { padding:15px; } .general .colorBox { padding:15px; } .general .img-scale-blk { text-align:left;} .general .img-scale80, .general .img-scale70, .general .img-scale60, .general .img-scale50, .general .img-scale40, .general .img-scale30, .general .img-scale20, .general .img-scale10 { width:100%; height:auto;} .general .org { width:auto; height:auto;} .general .img-auto { width:100%; height:auto;} .general .img-scale70-txt .is70-col1, .general .img-scale60-txt .is60-col1, .general .img-scale50-txt .is50-col1, .general .img-scale40-txt .is40-col1, .general .img-scale30-txt .is30-col1, .general .img-scale20-txt .is20-col1, .general .img-scale10-txt .is10-col1 { width:100%; margin-bottom:30px} .general .img-scale70-txt .is70-col2, .general .img-scale60-txt .is60-col2, .general .img-scale50-txt .is50-col2, .general .img-scale40-txt .is40-col2, .general .img-scale30-txt .is30-col2, .general .img-scale20-txt .is20-col2, .general .img-scale10-txt .is10-col2 { width:100%; float:inherit; padding-left:0} .general .img-scale70-txt-r .is70-col1-r, .general .img-scale60-txt-r .is60-col1-r, .general .img-scale50-txt-r .is50-col1-r, .general .img-scale40-txt-r .is40-col1-r, .general .img-scale30-txt-r .is30-col1-r, .general .img-scale20-txt-r .is20-col1-r, .general .img-scale10-txt-r .is10-col1-r { width:100%; float:inherit; padding-right:0} .general .img-scale70-txt-r .is70-col2-r, .general .img-scale60-txt-r .is60-col2-r, .general .img-scale50-txt-r .is50-col2-r, .general .img-scale40-txt-r .is40-col2-r, .general .img-scale30-txt-r .is30-col2-r, .general .img-scale20-txt-r .is20-col2-r, .general .img-scale10-txt-r .is10-col2-r { width:100%; margin-top:30px} .general figcaption.f-width70 { width:100%; margin:0 auto} .general figcaption.f-width70 { width:100%; margin:0 auto} .general figcaption.f-width60 { width:100%; margin:0 auto} .general figcaption.f-width50 { width:100%; margin:0 auto} .general figcaption.f-width40 { width:100%; margin:0 auto} .general .wrap-left { float:none; margin:20px 0; display:block;} .general .wrap-right { float:none; margin:20px 0; display:block;} .general figure { display:block; margin-bottom:20px} .general .wrap-left figcaption, .general .wrap-right figcaption { display:block;} .general .table-3cols { width:calc(100% + 20px); border:none; border-collapse:collapse; border-spacing:0; } .general .table-3cols tbody tr td { width:calc(100% / 3); vertical-align:top; text-align:left; padding-right:10px; padding-bottom:20px} .general .table-3cols tbody tr td img { width:100%; height:auto;} .general .table-4cols { width:calc(100% + 20px); border:none; border-collapse:collapse; border-spacing:0; } .general .table-4cols tbody tr td { width:calc(100% / 4); vertical-align:top; text-align:left; padding-right:10px; padding-bottom:20px} .general .table-4cols tbody tr td img { width:100%; height:auto;} .general .table-3cols, .general .table-3cols tbody, .general .table-3cols tbody tr, .general .table-3cols tbody tr td, .general .table-4cols, .general .table-4cols tbody, .general .table-4cols tbody tr, .general .table-4cols tbody tr td { width:100%; padding-right:0; display:block;} .general .table-3cols tbody tr td, .general .table-4cols tbody tr td { padding-bottom: 50px} .general .table-3cols.table-gray tbody tr td { border-right:none} #body.en .general .big-txt { font-size: 18px; } #body.tc .general .big-txt { font-size: 18px; } /* • New widget ------------------------------------------------------------------------- */ table.table-banner, table.table-banner tbody, table.table-banner tr, table.table-banner tr td, table.table-banner.tb-70 tr td:first-child, table.table-banner.tb-70 tr td:last-child, table.table-banner.tb-50 tr td:first-child, table.table-banner.tb-50 tr td:last-child { display:block; width:100%; } table.table-banner.tb-70 tr td:last-child, table.table-banner.tb-50 tr td:last-child { padding-left:0; } #body .general .colorBox.banner-blk { padding:40px } table.table-banner.tb-70 tr td:last-child, table.table-banner.tb-50 tr td:last-child { padding-top:20px; } .banner-d { display:none; } .banner-m { display:block; } /* • Special Expand Collapse ------------------------------------------------------------------------- */ .sp-esec { display:block; } .sp-esec:nth-child(odd) .sp-esec-img, .sp-esec:nth-child(even) .sp-esec-img { padding:0; width:100%; height:auto; margin-bottom:20px; } .sp-esec .sp-esec-blk .sp-esec-title::after { content:" "; width:20px; height:20px; right:0px; top:15px; } .sp-esec .sp-esec-blk .sp-esec-title { padding-right:20px; } .sp-esec:nth-child(even) { display:flex; flex-direction:column; } .sp-esec:nth-child(even) .sp-esec-blk { order:2 } .sp-esec:nth-child(even) .sp-esec-img { order:1 } }