644 lines
12 KiB
SCSS
644 lines
12 KiB
SCSS
@charset "utf-8";
|
|
|
|
@import "../initial";
|
|
|
|
.layout-content {
|
|
min-height: 37.5em;
|
|
|
|
.container {
|
|
@extend .response-container;
|
|
}
|
|
}
|
|
.video-banner{
|
|
max-width: 850px;
|
|
margin: auto;
|
|
img{
|
|
border-radius: 20px;
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
}
|
|
.w-ba-banner{
|
|
box-shadow: 0px 55px 50px -40px #212121;
|
|
border-radius: 20px;
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
}
|
|
.ba-banner-widget-4 .w-ba-banner__wrap img img{
|
|
margin: 0;
|
|
}
|
|
}
|
|
.fa, .fas{
|
|
font-family: "FontAwesome";
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
.fab{
|
|
font-family: "Font Awesome 5 Brands";
|
|
}
|
|
|
|
.button-text{
|
|
font-family: "Industry_Medium", Sans-serif;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
letter-spacing: 2px;
|
|
fill: #E40027;
|
|
color: #E40027;
|
|
background-color: #F5F5F5;
|
|
border-style: solid;
|
|
border-width: 3px 3px 3px 3px;
|
|
border-color: #E4002B;
|
|
border-radius: 30px 30px 30px 30px;
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
padding: 17px 25px 17px 25px;
|
|
&:hover{
|
|
color: #E4002B;
|
|
background-color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.button-text-two{
|
|
font-family: "Industry_Medium", Sans-serif;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
letter-spacing: 2px;
|
|
fill: #060606;
|
|
color: #060606;
|
|
background-color: #FFFFFF;
|
|
border-style: solid;
|
|
border-width: 3px 3px 3px 3px;
|
|
border-color: #040000;
|
|
border-radius: 30px 30px 30px 30px;
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
padding: 17px 25px 17px 25px;
|
|
&:hover{
|
|
color: #E4002B;
|
|
background-color: #FFFFFF;
|
|
}
|
|
}
|
|
.big-title{
|
|
font-size: 68px;
|
|
font-family: 'Barlow Condensed', sans-serif;
|
|
@media(min-width:1200px ){
|
|
font-size: 115px;
|
|
}
|
|
}
|
|
.topcontent{
|
|
}
|
|
.word{
|
|
font-family: "Barlow", Sans-serif;
|
|
|
|
}
|
|
.padding0{
|
|
.layout-content-box{
|
|
&:hover{
|
|
opacity: .8;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
h2{
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 15px;
|
|
background: #0000004d;
|
|
font-size: 23px;
|
|
color: #FFF;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
transition: all .3s;
|
|
margin-bottom: 0;
|
|
}
|
|
a{
|
|
color: #fff;
|
|
}
|
|
.layout-content-box{
|
|
padding: 0;
|
|
}
|
|
padding: 0 1em;
|
|
}
|
|
.bigwrap{
|
|
position: absolute;
|
|
left: 3em;
|
|
top: 0;
|
|
transition: all .3s;
|
|
.spanbtn{
|
|
display: inline-block;
|
|
padding: 5px 15px;
|
|
margin-top: 20px;
|
|
background: #FFF;
|
|
border-radius: 20px;
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
color: #000;
|
|
line-height: 20px;
|
|
}
|
|
a{
|
|
color:#fff;
|
|
}
|
|
}
|
|
.wrap{
|
|
position: absolute;
|
|
left: 3em;
|
|
top: 0;
|
|
transition: all .3s;
|
|
.spanbtn{
|
|
display: inline-block;
|
|
padding: 5px 15px;
|
|
margin-top: 20px;
|
|
background: #FFF;
|
|
border-radius: 20px;
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
color: #000;
|
|
line-height: 20px;
|
|
}
|
|
a{
|
|
color:#000;
|
|
}
|
|
h4{
|
|
margin-top: 1.75em;
|
|
}
|
|
}
|
|
.subword{
|
|
text-align: center;
|
|
color: #333333;
|
|
font-family: "Barlow", Sans-serif;
|
|
font-size: 36px;
|
|
font-weight: 900;
|
|
text-transform: none;
|
|
line-height: 40px;
|
|
}
|
|
.learnbutton{
|
|
&:hover{
|
|
color: #E4002B!important;
|
|
background-color: #FFFFFF!important;
|
|
}
|
|
}
|
|
.backred{
|
|
background-color: #f1f1f1;
|
|
min-height:30em;
|
|
padding: 2em;
|
|
.free{
|
|
font-size:5.5em;
|
|
@media(max-width: $screen-xs){
|
|
font-size: 3em!important;
|
|
}
|
|
}
|
|
}
|
|
.layout-content-box3{
|
|
@media(min-width: $screen-xs){
|
|
top: -9em;
|
|
}
|
|
}
|
|
.score{
|
|
.scorebutton{
|
|
&:hover{
|
|
color:#f1f1f1!important ;
|
|
}
|
|
}
|
|
}
|
|
.image-carousel{
|
|
padding: 15px 0px 25px 0px;
|
|
}
|
|
.onesection{
|
|
padding-bottom: 3em;
|
|
}
|
|
.oneword{
|
|
opacity: 0;
|
|
-webkit-transform: translateY(15%) translateZ(0);
|
|
-moz-transform: translateY(15%) translateZ(0);
|
|
-o-transform: translateY(15%) translateZ(0);
|
|
-ms-transform: translateY(15%) translateZ(0);
|
|
transform: translateY(15%) translateZ(0);
|
|
-webkit-transition: transform 0.7s ease-out, opacity 0.4s ease;
|
|
-moz-transition: transform 0.7s ease-out, opacity 0.4s ease;
|
|
-o-transition: transform 0.7s ease-out, opacity 0.4s ease;
|
|
-ms-transition: transform 0.7s ease-out, opacity 0.4s ease;
|
|
transition: transform 0.7s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
|
|
// &:hover{
|
|
// transform: scale(1.1);
|
|
// }
|
|
}
|
|
.animationtext{
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0) translateZ(0);
|
|
-moz-transform: translateY(0) translateZ(0);
|
|
-o-transform: translateY(0) translateZ(0);
|
|
-ms-transform: translateY(0) translateZ(0);
|
|
transform: translateY(0) translateZ(0);
|
|
}
|
|
.swiper-banner{
|
|
.ba-banner-widget-1 {
|
|
.ad-overlay{
|
|
background-image: none!important;
|
|
}
|
|
ul.button-mid .next-button{
|
|
color: #E4002B!important;
|
|
background: none!important;
|
|
}
|
|
ul.button-mid .prev-button{
|
|
color: #E4002B!important;
|
|
background: none!important;
|
|
}
|
|
}
|
|
}
|
|
//內頁
|
|
.sitemenu{
|
|
background-color: #000000;
|
|
}
|
|
.inner-page{
|
|
padding: 50px 0;
|
|
}
|
|
.contentwrap{
|
|
position: relative;
|
|
width: 100%;
|
|
background: #f2f2f2;
|
|
padding-bottom: 4em;
|
|
padding-top: 2em;
|
|
}
|
|
.contentwrap1{
|
|
position: relative;
|
|
width: 100%;
|
|
background: #fff;
|
|
}
|
|
.contentwrap2{
|
|
position: relative;
|
|
width: 100%;
|
|
background: #212121;
|
|
}
|
|
.contentwrap3{
|
|
position: relative;
|
|
width: 100%;
|
|
background: #f4f5f6;
|
|
}
|
|
.layout-content-inner{
|
|
// padding:3em 1em !important;
|
|
}
|
|
.iconwrap{
|
|
padding: 4em 0 0;
|
|
}
|
|
#main-product{
|
|
@media(max-width: 768px){
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
li{
|
|
margin: auto!important;
|
|
width: 50%!important;
|
|
}
|
|
}
|
|
li{
|
|
display: inline-block;
|
|
margin: 0 .3%;
|
|
width: 8%;
|
|
}
|
|
a{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
font-size: 0.8em;
|
|
color: #000;
|
|
&:hover{
|
|
color: #4283ba;
|
|
}
|
|
}
|
|
span{
|
|
width:100%;
|
|
}
|
|
}
|
|
.kenopacity{
|
|
.box{
|
|
&:hover{
|
|
opacity: .8;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
}
|
|
*[data-pp] > a, .admin-subpart-area .content > a{
|
|
z-index: 999;
|
|
}
|
|
.kenopacity{
|
|
padding-bottom: 1em;
|
|
}
|
|
.bottomken{
|
|
text-align: center;
|
|
h2{
|
|
margin-bottom: 15px;
|
|
font-size: 20px;
|
|
color: #000;
|
|
line-height: 20px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
span{
|
|
padding-left: 10px;
|
|
font-size: 15px;
|
|
color: #444;
|
|
}
|
|
}
|
|
#epaper form{
|
|
position: relative;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
background: #f1f1f1;
|
|
}
|
|
form input{
|
|
display: block;
|
|
width: 100%;
|
|
height: 55px;
|
|
padding: 10px 120px 10px 75px;
|
|
border: none;
|
|
border-radius: 25px;
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
font-size: 15px;
|
|
color: #777;
|
|
box-sizing: border-box;
|
|
}
|
|
button{
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 11px;
|
|
display: block;
|
|
width: 100px;
|
|
background: #3252a3;
|
|
border: none;
|
|
border-radius: 25px;
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
font-size: 15px;
|
|
color: #FFF;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
transition: all .3s;
|
|
&:hover{
|
|
background: #797979;
|
|
}
|
|
}
|
|
#epaper_form{
|
|
position: relative;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
&:before{
|
|
content: "";
|
|
position: absolute;
|
|
left: 25px;
|
|
top: 13px;
|
|
display: block;
|
|
width: 38px;
|
|
height: 28px;
|
|
background: url(/assets/epaper_icon.png)0 0 no-repeat;
|
|
}
|
|
}
|
|
}
|
|
.pagecontent{
|
|
@media(min-width: 768px){
|
|
width: 52%;
|
|
img{
|
|
padding-right: 1em;
|
|
}
|
|
}
|
|
}
|
|
// menu
|
|
.menu-toggle {
|
|
width: 40px;
|
|
height: 30px;
|
|
position: absolute;
|
|
top:40%;
|
|
right: 8%;
|
|
cursor: pointer;
|
|
&.on {
|
|
.one {
|
|
transform: rotate(45deg) translate(7px, 7px);
|
|
}
|
|
|
|
.two {
|
|
opacity: 0;
|
|
}
|
|
|
|
.three {
|
|
transform: rotate(-45deg) translate(8px, -10px);
|
|
}
|
|
}
|
|
@media(max-width: 1300px){
|
|
top:90%;
|
|
}
|
|
}
|
|
|
|
.one,
|
|
.two,
|
|
.three{
|
|
width: 100%;
|
|
height: 5px;
|
|
background: white;
|
|
margin: 6px auto;
|
|
backface-visibility: hidden;
|
|
transition-duration:0.3s;
|
|
}
|
|
|
|
nav ul{
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
margin: 15% auto;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 25%;
|
|
li{
|
|
width: 100%;
|
|
.far{
|
|
padding-right: 0.4em;
|
|
font-size: 0.5em;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
a {
|
|
transition-duration:0.5s;
|
|
text-decoration: none;
|
|
color: white!important;
|
|
font-size: 2em;
|
|
line-height: 1.5;
|
|
width: 100%;
|
|
display: block;
|
|
&:hover {
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
}
|
|
.menu-toggle{
|
|
&.on{
|
|
top: 8%;
|
|
}
|
|
}
|
|
.menu-section {
|
|
&.on {
|
|
z-index: 10000;
|
|
width: 100%;
|
|
display: block;
|
|
background-color: #000000;
|
|
position: absolute;
|
|
transition: all .3s;
|
|
height: 100vw;
|
|
}
|
|
}
|
|
.internal-page{
|
|
.onesection{
|
|
padding: 0;
|
|
}
|
|
.navFixed{
|
|
.menu-toggle {
|
|
@media(min-width: 1400px){
|
|
top: 60%;
|
|
}
|
|
@media(min-width: 1024px)and(max-width: 1399px){
|
|
top: 120%;
|
|
&.on {
|
|
top: 13%!important;
|
|
}
|
|
}
|
|
&.on {
|
|
top: 7%;
|
|
.one {
|
|
background:#fff!important;
|
|
}
|
|
|
|
.two {
|
|
background:#fff!important;
|
|
}
|
|
|
|
.three {
|
|
background:#fff!important;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
.bnrInner{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
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;
|
|
color: #fff;
|
|
|
|
}
|
|
.bnrInner2{
|
|
position: absolute;
|
|
padding: 2em;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
.fas{
|
|
padding-right: 0.5em;
|
|
}
|
|
}
|
|
.zero{
|
|
transition: opacity 0.25s linear;
|
|
padding: 0;
|
|
&:hover{
|
|
opacity: .8;
|
|
cursor: pointer;
|
|
}
|
|
a{
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
// .ken{
|
|
// @media(max-width: 1024px)and(min-width:769px ){
|
|
// overflow: hidden;
|
|
// img{
|
|
// width: auto!important;
|
|
// height: 15em;
|
|
// max-width: unset;
|
|
// transform: translateX(-10%);
|
|
// }
|
|
// }
|
|
// @media(max-width: $screen-xs){
|
|
// .wrap{
|
|
// position: relative!important;
|
|
// left: 0!important;
|
|
// }
|
|
// .wrap .spanbtn{
|
|
// margin-bottom: 20px;
|
|
// background: #3e4042;
|
|
// color: #fff;
|
|
// }
|
|
// }
|
|
// }
|
|
.blue{
|
|
.w-annc__widget-title{
|
|
background-color: #035FCE;
|
|
color: #fff;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.red{
|
|
.w-annc__widget-title{
|
|
background-color: #ff4b50;
|
|
color: #fff;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.yellow{
|
|
.w-annc__widget-title{
|
|
background-color: #f5be14;
|
|
color: #fff;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.green{
|
|
.w-annc__widget-title{
|
|
background-color: #05D2AF;
|
|
color: #fff;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.rednews{
|
|
.w-annc__widget-title{
|
|
color: #C00000;
|
|
}
|
|
.w-annc__title{
|
|
&:before{
|
|
content: "●";
|
|
color: #ff4b50;
|
|
margin-right: 0.7em;
|
|
}
|
|
}
|
|
iframe{
|
|
width:100%;
|
|
margin-top: 1em;
|
|
}
|
|
} |