/* common */ /* --------------------------------------------------------- */ .w50{width: 50%;} .w40{width: 40%;} .w43{width: 43%;} .w40{width: 40%;} .w38{width: 38%;} .w35{width: 35%;} .w30{width: 30%;} @media screen and (max-width: 1195px) { /* textImageFull_box */ .textImageFull_box .txt{ width: 100%; } } /* featuresContent style1 : textImageFull */ .textImageFull_box{position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; display: -ms-flexbox; -ms-flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; width: 100VW;height: calc(100VW / 3.3038);} .textImageFull_box .imgtitle{display: none;} .textImageFull_box .PosLeft{ /* position: absolute; z-index: 1; */margin-left: 6rem; } .textImageFull_box .PosRight{/* position: absolute; right: 0; z-index: 1; margin-right: 6rem;*/ margin: 0 auto;} .textImageFull_box h3{text-align: center; margin-bottom: 2rem;} .textImageFull_box p{font-size: 1.15rem; margin-bottom: 0; } .textImageFull{ position: absolute;display: flex; align-items: center; top: 0; width: 100VW;height: calc(100VW / 3.3038); background-size: cover !important; z-index: 0;} @media screen and (max-width: 1920px) { /* textImageFull_box */ .textImageFull_box h3{font-size:2rem;} } @media screen and (max-width: 1280px) { /* textImageFull_box */ .textImageFull_box p{font-size: 1.05rem;} .textImageFull_box h3{font-size:1.8rem;} } @media screen and (max-width: 1195px) { /* textImageFull_box */ .textImageFull_box{display: block; background-size: 100% !important; height:auto;} .textImageFull_box .imgtitle{display: block;} .textImageFull_box .txt{ margin: 0; position: static; } .textImageFull_box > .textImageFull .PosLeft.w43{ width: 43%; margin:0 0 0 4rem; } .textImageFull_box > .textImageFull .PosRight.w43{ width: 43%; margin:0 4rem 0 auto; } .textImageFull_box p{margin-bottom: 1.25rem; } /* textImageFull */ .textImageFull{ position: static;margin-bottom: 2rem;} .imgtitle h3{margin-bottom: 0rem;} .txt, .txt h3{color: #000 !important;margin: 0 0 1rem !important;} } @media screen and (max-width: 833px) { .txt h3{margin-bottom: 1rem;} } @media screen and (max-width: 860px) { /* textImageFull_box */ .textImageFull_box .imgtitle{display: none;} /* textImageFull */ .textImageFull{height: calc(100VW / 2.2); background-size: 100%!important;} } /*only M8SeG features Pic*/ /* --------------------------------------------------------- */ /* 大圖 */ .M8S1G_img_01{background: url(../../../../UploadFile/9df7e3e9bede4c5f93244840256d96ba.jpg) no-repeat top left;} .M8S1G_img_02{background: url(../../../../UploadFile/cc1fad305a19405a88a40d5b5cc2cd4f.jpg) no-repeat top left;} .M8S1G_img_03{background: url(../../../../UploadFile/343ff83784eb4927bbada895e5a27bff.jpg) no-repeat top left;} .M8S1G_img_04{background: url(../../../../UploadFile/024d93589e6c41308383fbe3200f53c2.jpg) no-repeat top left;} @media screen and (max-width: 768px) { .M8S1G_img_01{background: url(../../../../UploadFile/9df7e3e9bede4c5f93244840256d96ba_s.jpg) no-repeat top right;} .M8S1G_img_02{background: url(../../../../UploadFile/d16aab45d5de4e678dfa5afaae4687eb.jpg) no-repeat top right;} .M8S1G_img_03{background: url(../../../../UploadFile/bd2f44b3fafe418e9b563494fe5e0e0e.jpg) no-repeat top right;} .M8S1G_img_04{background: url(../../../../UploadFile/6637cb51bdb7448abe527eb7320153dc.jpg) no-repeat top right;} } /* 大圖上的字 */ .M8S1G_img_01 + .PosLeft{margin-left: 3rem; } .M8S1G_img_02 + .PosLeft, .M8S1G_img_03 + .PosLeft, .M8S1G_img_04 + .PosLeft{margin-left: 6rem; } .M8S1G_img_04 + .PosRight{margin-right: 2rem; } .M8S1G_img_01 + .txt, .M8S1G_img_01 + .txt h3, .M8S1G_img_01 .imgtitle h3{color: #595959;} .M8S1G_img_02 + .txt, .M8S1G_img_02 + .txt h3, .M8S1G_img_02 .imgtitle h3{color: #595959;} .M8S1G_img_03 + .txt, .M8S1G_img_03 + .txt h3, .M8S1G_img_03 .imgtitle h3{color: #fff;} .M8S1G_img_04 + .txt, .M8S1G_img_04 + .txt h3, .M8S1G_img_04 .imgtitle h3{color: #fff;} @media screen and (max-width: 1195px) { .M8S1G_img_01 + .PosLeft, .M8S1G_img_04 + .PosRight{margin:0; } .textImageFull_box > .M8S1G_img_04 .PosRight.w43, .PosRight.w43{margin:0 1rem 0 auto; } } /*only M8SeGN features Pic*/ /* --------------------------------------------------------- */ /*大圖*/ .M8S1GN_img_01{background: url(../../../../UploadFile/bf5833f669324fc8b791665708b083f8.jpg) no-repeat top left;} .M8S1GN_img_02{background: url(../../../../UploadFile/4083f718755047a18cdd2e0f223da10e.jpg) no-repeat top left;} @media screen and (max-width: 768px) { .M8S1GN_img_01{background: url(../../../../UploadFile/a913381f53c94813bf025cae3bad5049.jpg) no-repeat top right;} .M8S1GN_img_02{background: url(../../../../UploadFile/44b10a27c62040c0a36ce26225fc0aea.jpg) no-repeat top right;} } /* 大圖上的字 */ .M8S1GN_img_01 + .PosLeft{margin-left: 6rem; } .M8S1GN_img_02 + .PosRight{margin-right: 4rem; } .M8S1GN_img_01 + .txt, .M8S1GN_img_01 + .txt h3, .M8S1GN_img_01 .imgtitle h3{color: #fff;} .M8S1GN_img_02 + .txt, .M8S1GN_img_02 + .txt h3, .M8S1GN_img_02 .imgtitle h3{color: #fff;} @media screen and (max-width: 1370px) { .M8S1GN_img_02 + .PosRight p{ font-size: 0.97rem;} } @media screen and (max-width: 1195px) { .M8S1GN_img_02 + .PosRight{margin:0; } .textImageFull_box > .M8S1GN_img_02 .PosRight.w43{margin:0 1rem 0 auto; } } /*only S3C & S3G features Pic*/ /* ------------------------------------------------------------------ */ /* featuresContent style1 : textImageFull */ .S3 .PosLeft{margin-left: 3rem; } .S3 .PosRight{margin-right: 3.5rem; } .S3 h3{margin-bottom: 1rem;} .S3 p{font-size: 1.05rem;} /*大圖*/ .S3C_img_01{background-image:url(../../../../UploadFile/d0c5ef0325294ee08b3f27f78eb06c7e.jpg);background-repeat:no-repeat; background-position:top left;}/*大圖S3C_img_01.jpg*/ .S3C_img_02{background-image:url(../../../../UploadFile/21af8a928e584fe1a38481f3f61ca7fa.jpg);background-repeat:no-repeat; background-position:top left;}/*大圖S3C_img_02.jpg*/ .S3C_img_03{background-image:url(../../../../UploadFile/576d9f45e1254101bace72355fd16a03.jpg);background-repeat:no-repeat; background-position:top left;}/*大圖S3C_img_03.jpg*/ .S3C_img_04{background-image:url(../../../../UploadFile/08e9ddd185bb47ccb30ec62865cb82ad.jpg);background-repeat:no-repeat; background-position:top left;}/*大圖S3C_img_04.jpg*/ @media screen and (max-width: 768px) { .S3C_img_01{background-image:url(../../../../UploadFile/d9182e99287e4934bedd64e5f1e99986.jpg);background-repeat:no-repeat; background-position:top right;}/*小圖S3C_img_01_s.jpg*/ .S3C_img_02{background-image:url(../../../../UploadFile/a22585d9f11e46d79de31b7646797172.jpg);background-repeat:no-repeat; background-position:top left;}/*小圖S3C_img_02_s.jpg*/ .S3C_img_03{background-image:url(../../../../UploadFile/fc611cda8e6a44f4a8f2a9365a696df6.jpg);background-repeat:no-repeat; background-position:top left;}/*小圖S3C_img_03_s.jpg*/ .S3C_img_04{background-image:url(../../../../UploadFile/8e647f683e944958b1d62e7b3a964f61.jpg);background-repeat:no-repeat; background-position:top left;}/*小圖S3C_img_04_s.jpg*/ } /* 大圖上的字 */ .S3C_img_01 + .S3CPosRight{margin-left: 3rem; } .S3C_img_04 + .S3CPosLift{margin-right: 2rem; } .S3 .txt, .S3 h3{color: #fff;} @media screen and (max-width: 1195px) { .S3 .PosLeft{ margin:0 auto; } .S3 .PosRight{ margin:0 4rem 0 auto; } .S3C_img_01 + .S3 .PosRight, .S3C_img_04 + .S3 .PosLeft{margin:0; } .S3C_img_04 .w35{margin:0 1rem 0 0; } } @media screen and (max-width: 768px) { .S3 .PosLeft{ margin:0; } } /*only M9PeY features Pic*/ /**************************************************************/ /*動畫: 炫光閃爍效果 */ .animate-mask-pic{width: 100%;position: absolute; top: 0; left: 0;z-index: 1;} .animate{height: 100%; width: 100%; left:0; right: 0; top: 0; bottom: 0; position: absolute;z-index: -1; overflow: hidden;} .rainbow,.monocolour{ height: 100%; width: 100%; top: 0; position: absolute; background-repeat: repeat-x; animation-direction:reverse; transform: rotate(40deg) } .rainbow{ left: 0; background: rgb(250,75,121); /* Old browsers */ background: -moz-linear-gradient(left, rgba(250,75,121,1) 0%, rgba(233,97,232,1) 13%, rgba(255,212,133,1) 27%, rgba(255,212,133,1) 35%, rgba(61,92,255,1) 47%, rgba(61,92,255,1) 55%, rgba(37,252,166,1) 71%, rgba(47,217,243,1) 83%, rgba(250,75,121,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(250,75,121,1) 0%,rgba(233,97,232,1) 13%,rgba(255,212,133,1) 27%,rgba(255,212,133,1) 35%,rgba(61,92,255,1) 47%,rgba(61,92,255,1) 55%,rgba(37,252,166,1) 71%,rgba(47,217,243,1) 83%,rgba(250,75,121,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(250,75,121,1) 0%,rgba(233,97,232,1) 13%,rgba(255,212,133,1) 27%,rgba(255,212,133,1) 35%,rgba(61,92,255,1) 47%,rgba(61,92,255,1) 55%,rgba(37,252,166,1) 71%,rgba(47,217,243,1) 83%,rgba(250,75,121,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa4b79', endColorstr='#fa4b79',GradientType=1 ); /* IE6-9 */ background-size:25% 100%; -webkit-animation: rainbow 18s linear infinite; -z-animation: rainbow 18s linear infinite; -o-animation: rainbow 18s linear infinite; animation: rainbow 18s linear infinite; } @media screen and (max-width: 768px) { .rainbow{left: -30%;} } @-moz-keyframes rainbow{ 0%{background-position:100% 82%} 50%{background-position:50% 82%} 100%{background-position:0% 82%} } @-webkit-keyframes rainbow { 0%{background-position:100% 82%} 50%{background-position:50% 82%} 100%{background-position:0% 82%} } @keyframes rainbow{ 0%{background-position:100% 82%} 50%{background-position:50% 82%} 100%{background-position:0% 82%} } .monocolour{ right: -53%; background: linear-gradient(to right, rgba(250,75,121,1) 0%,rgba(233,97,232,1) 13%,rgba(255,212,133,1) 27%,rgba(255,212,133,1) 35%,rgba(61,92,255,1) 47%,rgba(61,92,255,1) 55%,rgba(37,252,166,1) 71%,rgba(47,217,243,1) 83%,rgba(250,75,121,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background-size: 1800% 1800%; -webkit-animation: monocolour 10s linear infinite; -z-animation: monocolour 10s linear infinite; -o-animation: monocolour 10s linear infinite; animation: monocolour 10s linear infinite; } @media screen and (max-width: 768px) { .monocolour{right: -42%;} } @-webkit-keyframes monocolour { 0%{background-position:0% 82%} 50%{background-position:50% 19%} 100%{background-position:100% 82%} } @-moz-keyframes monocolour { 0%{background-position:0% 82%} 50%{background-position:50% 19%} 100%{background-position:100% 82%} } @keyframes monocolour { 0%{background-position:0% 82%} 50%{background-position:50% 19%} 100%{background-position:100% 82%} } /*大圖*/ .M9PeY_img_02{background: url(../../../../UploadFile/a1472bced1764a3582ba34dec27aba35.jpg) no-repeat top left;} .M9PeY_img_03{background: url(../../../../UploadFile/87f57d94c7014ce09ea6d9b92f50baa7.jpg) no-repeat top left;} .M9PeY_img_04{background: url(../../../../UploadFile/171d9d8b52c04acdb02de2f5ec6c98b4.jpg) no-repeat top left;} @media screen and (max-width: 860px) { .M9PeY_img_02{background: url(../../../../UploadFile/4f139365545245a6b9e93f08d1905128.jpg) no-repeat top right;} .M9PeY_img_03{background: url(../../../../UploadFile/21a7667ffc234b37ae97b868c648dbe6.jpg) no-repeat top right;} .M9PeY_img_04{background: url(../../../../UploadFile/dcae45c37d77415eb1e3876e244d9f68.jpg) no-repeat top right;} } /* 大圖上的字 */ .M9PeY .txt, .M9PeY h3{color: #fff; position: relative; z-index: 1;} .M9PeY .PosLeft{ margin-left:6rem;} .M9PeY .PosRight{margin-right:6rem; } /*大圖*/ .M9PeG_img_01{background: url(../../../../UploadFile/4b1434ef5e474f60b1fd9e7cc3fb7321.jpg) no-repeat top left;} .M9PeG_img_02{background: url(../../../../UploadFile/d6d79fdc3cbe49d397fad64133e815bf.jpg) no-repeat top left;} .M9PeG_img_03{background: url(../../../../UploadFile/7e21b86e053546be9fceff3ebaee59ac.jpg) no-repeat top left;} .M9PeG_img_04{background: url(../../../../UploadFile/0b3b9ae54dd743a19af4fb7b918f64e1.jpg) no-repeat top left;} @media screen and (max-width: 860px) { .M9PeG_img_01{background: url(../../../../UploadFile/fda961251d744e4199cf1b1ddfac10f4.jpg) no-repeat top right;} .M9PeG_img_02{background: url(../../../../UploadFile/a5eff9e95639492d97d4a63528a06176.jpg) no-repeat top right;} .M9PeG_img_03{background: url(../../../../UploadFile/96340b77d09b43fc8bb0e3432163212e.jpg) no-repeat top right;} .M9PeG_img_04{background: url(../../../../UploadFile/08a65aaa26224726ae138b4d2aaf7e97.jpg) no-repeat top right;} } /* 大圖上的字 */ .M9PeG .txt, .M9PeG h3{color: #fff;} .M9PeG .PosLeft{ margin-left:6rem; } .M9PeG .PosRight{margin-right:6rem; } /*大圖*/ .M9PeGN_img_01{background: url(../../../../UploadFile/015cce64907d4adcb080362b37bb1f66.jpg) no-repeat top left;} .M9PeGN_img_02{background: url(../../../../UploadFile/c92f880e3c744ad89d20122dc00367ed.jpg) no-repeat top left;} .M9PeGN_img_03{background: url(../../../../UploadFile/db6727deb7f24cdfaf823db792fc71ac.jpg) no-repeat top left;} .M9PeGN_img_04{background: url(../../../../UploadFile/c3e8c5ea54b74b929cd1e9f72c2a2ac6.jpg) no-repeat top left;} @media screen and (max-width: 860px) { .M9PeGN_img_01{background: url(../../../../UploadFile/74cf842f0fd4453992bdbede961c2675.jpg) no-repeat top right;} .M9PeGN_img_02{background: url(../../../../UploadFile/085cfbdf56d340fda3bc416a8d02eaae.jpg) no-repeat top right;} .M9PeGN_img_03{background: url(../../../../UploadFile/1a25f09061664c95af07907e533075c0.jpg) no-repeat top right;} .M9PeGN_img_04{background: url(../../../../UploadFile/af4bb1600a2e40cebf264ded3ecbfbbb.jpg) no-repeat top right;} } /* 大圖上的字 */ .M9PeGN .txt, .M9PeGN h3{color: #fff;} .M9PeGN .PosLeft{ margin-left:6rem; } .M9PeGN .PosRight{margin-right:6rem; } /*M8V系列*/ /*大圖*/ .M8V_img_01{background: url(../../../../UploadFile/4a101d24300e423888192272b3ae2548.jpg) no-repeat top left;}/*M8V_01*/ .M8V_img_02{background: url(../../../../UploadFile/0017a4a35dfe47ebaf5f7f60bba9fba0.jpg) no-repeat top left;}/*M8V_02*/ .M8V_img_03{background: url(../../../../UploadFile/4188ebc2c1274e2b9b098f5680c9bc8e.jpg) no-repeat top left;}/*M8V_03*/ @media screen and (max-width: 860px) { .M8V_img_01{background: url(../../../../UploadFile/a62a7b95ce3d4c79a2a392e8a1492deb.jpg) no-repeat top right;}/*M8V_01_s*/ .M8V_img_02{background: url(../../../../UploadFile/2cea1a8f22a349fbb53418394c6593a3.jpg) no-repeat top right;}/*M8V_02_s*/ .M8V_img_03{background: url(../../../../UploadFile/7a65c148c5674fd8968783c6a122ccb5.jpg) no-repeat top right;}/*M8V_03_s*/ } /* 大圖上的字 */ .M8V .txt, .M8CV h3{color:#4b4c4e;} .M8V .PosLeft{ margin-left:4rem; } .M8V .PosRight{margin-right:12rem; } .M8V .M8V03text {margin-left: 20%;margin-top: -90px;} /*M8V_Plus*/ .M8V_Plus{background:url(../../../../UploadFile/cc11d7516cdb42c79e7ae68e24b05c94.jpg) no-repeat right;background-size:cover;} .M8V_Plus .txt,.M8V_Plus h3,.M8V_Plus .txt,.M8V_Plus h3,.M8V_Plus .txt,.M8V_Plus h3{position:relative;z-index:1;} .M8V_Plus .PosLeft,.M8V_Plus .PosLeft,.M8V_Plus .PosLeft{ margin-left:6rem;} .M8V_Plus .PosRight,.M8V_Plus .PosRight,.M8V_Plus .PosRight{margin-right:6rem;} /*大圖*/ .M8V_Plus_img_01{background:url(../../../../UploadFile/b50b59fe35274f8bbfeabb7f9abe5c1a.png) no-repeat top left;} .M8V_Plus_img_02{background:url(../../../../UploadFile/db456c8649144f9c8345865a6d303a23.png) no-repeat top left;} .M8V_Plus_img_03{background:url(../../../../UploadFile/8ab6392feb334ba29f801db8bbe80abe.png) no-repeat top left;} @media screen and (max-width:860px) { .M8V_Plus{background:none} .M8V_Plus h3,.M8V_Plus p{display:block;} .M8V_Plus .textImageFull{height:calc(100VW / 1.8);background-size:100%!important;} .M8V_Plus_img_01{background:url(../../../../UploadFile/f1bdb8374cad444fbb69c6a0c3eb0436.jpg) no-repeat top right;} .M8V_Plus_img_02{background:url(../../../../UploadFile/e1909e7c56da4bd89f91a9c7119607d0.jpg) no-repeat top right;} .M8V_Plus_img_03{background:url(../../../../UploadFile/b90c5d665be44c568ee891afb3efde6e.jpg) no-repeat top right;} }