ptsxs0729/assets/stylesheets/template/layout/content.scss

1622 lines
32 KiB
SCSS

@charset "utf-8";
@import "../initial";
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
@media(max-width: 768px){
padding-right: 1.5em;
padding-left: 1.5em;
}
}
blockquote{
border:0;
padding-left: 0;
a{
background: #333333;
color: #fff!important;
padding: 0.5em 1em;
border-radius: 2em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
font-size: 1.2em;
cursor: pointer;
}
}
.marker{
a{
background: #333333;
color: #fff;
padding: 0.5em;
font-size: 0.8em;
border-radius: 2em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
margin-right: 1em;
cursor: pointer;
}
}
.view_count{
display: none;
}
.internal-page{
.controlplay{
display: none!important;
}
.unity-title {
@media(max-width: $screen-xs){
font-size:1.2em;
line-height: 1.5;
}
font-size:3em;
text-align: justify;
// @media(max-width: 768px){
// margin-left: 0.5em;
// }
}
.widget-title{
text-align: justify;
font-size: 2em;
}
.chanelpageleft{
line-height: 1.5;
strong{
font-size: larger;
}
span{
font-weight: bold;
}
@media(min-width: 769px){
padding-right: 1em;
padding-left: 0;
}
@media(max-width: 768px){
padding: 0!important;
}
}
.chanelpageright{
line-height: 1.5;
font-weight: bold;
strong{
font-size: larger;
}
span{
font-weight: bold;
}
@media(min-width: 769px){
padding-left: 1em;
padding-right: 0;
}
@media(max-width: 768px){
padding: 0!important;
}
}
.chanelpage{
width: 100%;
position: relative;
.response-container{
.col-sm-5{
.looklook{
@media(max-width: 768px){
width: 100%;
position: relative;
display: block;
text-align: center;
}
}
}
}
}
.chanelage{
text-align: justify;
font-size: 1.5em;
}
.chanelbtn{
padding: 0;
}
h1{
text-align: justify;
margin-bottom: 0;
@media(min-width: $screen-xs){
font-size:3em!important;
}
@media(max-width: $screen-xs){
font-size:2em!important;
}
}
.index-title{
text-align: justify;
margin-bottom: 0;
@media(min-width: $screen-xs){
font-size:3em!important;
}
@media(max-width: $screen-xs){
font-size:2em!important;
}
}
.chanelul{
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
margin-top: 0.5em;
.chanelli{
@media(max-width: $screen-xs){
padding: 0.5em 0.6em;
margin-right: 0.6em;
font-size: 1em;
}
margin-bottom: 0.5em;
font-size: 1em;
cursor: pointer;
background-color: #fff;
padding: 0.5em 1em;
border-radius: 2em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
color: #333;
font-weight: bold;
text-align: center;
width: fit-content;
margin-right: 1em;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
border: 2px solid #00c0f5;
position: relative;
.xshover{
display: none;
}
.xsnohover{
display: block;
}
&:hover{
background-color: $theme-color-third;
color: #fff;
.xshover{
display: block!important;
}
.xsnohover{
display: none!important;
}
a{
color: #fff;
}
}
}
.active{
background-color: $theme-color-third;
color: #fff!important;
a{
color: #fff!important;
}
.xshover{
display: block!important;
}
.xsnohover{
display: none!important;
}
}
.chanelli2{
margin-bottom: 0.5em;
font-size: 1em;
cursor: pointer;
background-color:#E6E6E6;
padding: 0.5em;
border-radius: 2em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
color: #333;
font-weight: bold;
text-align: center;
width: fit-content;
margin-right: 1em;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
a{
color: #333;
}
&:hover{
background-color: $theme-color-third;
color: #fff;
a{
color: #fff;
}
}
}
.chanelli3{
width: 33.3%;
display: flex;
flex-wrap: wrap;
padding-bottom: 2em;
@media(min-width: 769px){
padding-right: 2em;
}
@media(max-width: 768px){
width: 100%;
.chanelli3img,.chanelli3txt{
width: 100%;
}
}
.chanelli3img{
width:30%;
border-radius: 50%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
img{
border-radius: 10em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
overflow: hidden;
width: 100%;
}
}
.chanelli3txt{
width: 70%;
padding-left: 1em;
@media(max-width: 768px){
width: 100%;
padding-top: 1em;
padding-left:0!important;
}
strong{
font-size: larger;
}
}
}
}
.clickfade{
position: fixed;
width: 100vw;
height: 100vh;
background: #0000004d;
z-index: 1999;
display: none;
top: 0;
bottom:0;
}
.cancelbt{
cursor: pointer;
@media(max-width: $screen-xs){
border-radius: 2em!important;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
width: 5em!important;
height: auto!important;
top:unset!important;
bottom: -5em!important;
right: 39%!important;
i{
padding-right: 0.5em;
}
}
}
.peoplerwd{
@media(min-width: 769px){
display: none;
}
@media(max-width: 768px){
display: flex;
flex-wrap:wrap;
width: 100%;
justify-content: center;
padding: 1em;
.peoplerwd1{
padding: 1em;
text-align: center;
width: 33.3%;
h4{
font-size: 1.5rem;
font-weight: bold;
}
a{
color: #333333;
}
img{
border-radius: 10em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
}
}
}
.p1_section,.p2_section,.p3_section,.p4_section,.p5_section{
top: 0;
z-index: 2000;
background: #fff;
position: absolute;
display: none;
width: 80%;
margin: auto;
left: 10%;
padding: 2em 0;
border-radius: 2em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
.sectionname{
font-weight: bold;
font-size: 2em;
}
.showname{
font-weight: bold;
}
}
.peopleimg{
cursor: pointer;
position: absolute;
width: 100%;
height:100%;
display: flex;
flex-wrap: wrap;
@media(max-width: 768px){
display: none!important;
}
.p1,.p2,.p3,.p4,.p5{
height: 100%;
}
.p1{
width: 17%;
}
.p2{
width: 12%;
}
.p3{
width: 20%;
}
.p4{
width: 16%;
}
.p5{
width: 35%;
}
.p1{
.name{
z-index: 2!important;
opacity: 0;
color: #fff;
background-color: #00C0F5;
border-radius: 0 0 16px 16px;
padding: 15px 15px;
position: absolute;
bottom: 35%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
width: 17%;
}
&:hover{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
.name{
opacity: 1;
bottom: 40%;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
}
}
.p2{
.name{
z-index: 2!important;
opacity: 0;
color: #333333;
background-color:#FFE201;
border-radius: 0 0 50px 50px;
padding: 15px 15px;
position: absolute;
bottom: 50%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
width: 20%;
left: 14%;
}
&:hover{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
.name{
opacity: 1;
bottom: 55%;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
}
}
.p3{
.name{
z-index: 2!important;
opacity: 0;
color: #fff;
background-color:#FF75C7;
border-radius: 0 0 16px 16px;
padding: 15px 15px;
position: absolute;
bottom: 80%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
width: 20%;
}
&:hover{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
.name{
opacity: 1;
bottom: 90%;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
}
}
.p4{
.name{
z-index: 2!important;
opacity: 0;
color: #fff;
background-color:#00A17B;
border-radius: 0 0 16px 16px;
padding: 15px 15px;
position: absolute;
bottom: 55%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
width: 20%;
}
&:hover{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
.name{
opacity: 1;
bottom: 65%;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
}
}
.p5{
.name{
z-index: 2!important;
opacity: 0;
color: #fff;
background-color:#FF5A5F;
border-radius: 0 0 16px 16px;
padding: 15px 15px;
position: absolute;
bottom:63%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
width: 20%;
}
&:hover{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
.name{
opacity: 1;
bottom: 73%;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
}
}
}
.s-annc__post-body{
// @media(max-width: 768px){
// padding: 1em;
// }
}
.show-annc2{
.s-annc__related-wrap{
display: none;
}
.s-annc__post-wrap{
@media(min-width: 769px){
width: 66.6%;
}
}
}
.layout-content{
background: #fff;
overflow: hidden;
border-radius: 64px 64px 0px 0px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
.contentwrap{
background-color: #fff
}
.carousel_images{
z-index: 100;
position: relative;
border-radius: 0 0 64px 64px;
background: #fff;
@media(max-width: 768px){
min-height: 20em;
padding-bottom: 2em;
width: 100vw;
margin-left: -1.5em;
}
.s-annc__show-title{
margin: 0;
font-size:2em!important;
padding: 1em;
background-image: none;
display: block;
background-color: #00C0F5;
border-radius: 0 0 64px 64px;
position: relative;
color: #fff;
width:85%;
font-weight: bold;
@media(min-width: 768px){
padding:0.5em 1em;
}
@media(max-width: 768px){
width: 100%!important;
font-size: 1.2em;
line-height: 1.5;
padding: 0 0 1em 0;
margin: 0;
}
}
}
.carousel_images{
.carousel_images_slide,.button-mid,h4{
// display: none;
position: absolute;
margin-top: -11em;
z-index: -1;
opacity: 0;
}
}
.internaltable{
td{
border: none !important;
border-bottom: 1px solid #e5e5e5 !important;
}
tr:first-child{
td{
border-bottom:none!important;
}
}
}
.carousel__description{
color: white;
width: 15%;
position: absolute;
right: 0;
bottom: 48%;
a{
background: #fff;
padding: 10px 20px;
border-radius: 2em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
@media(max-width: 768px){
bottom: 1em;
left: 5%;
text-align: center;
width: 90%;
a{
display: block;
}
}
}
}
.layout-content {
min-height: 37.5em;
padding-bottom: 4em;
.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;
}
}
.homebanner{
overflow: hidden;
-webkit-transition: .3s ease-out;
-moz-transition: .3s ease-out;
-ms-transition: .3s ease-out;
-o-transition: .3s ease-out;
transition: .3s ease-out;
padding-bottom: 6em;
@media(min-width: 769px){
padding-top: 2em;
padding-bottom: 11em;
}
}
.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;
}
}
.padding0{
.layout-content-box{
@media(min-width: 769px){
padding: 0!important;
}
}
}
.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;
}
.hide0{
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.8s ease-out, opacity 0.4s ease;
-moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
-o-transition: transform 0.8s ease-out, opacity 0.4s ease;
-ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
}
.animationvisible{
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:#00C0F5;
padding-bottom: 4em;
padding-top: 2em;
color: #fff;
border-radius: 64px 64px 0 0;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
p{
padding-bottom: 1em;
}
}
.contentwrap1out{
position: relative;
width: 100%;
background:$theme-color-third;
.layout-content-inner{
@media(min-width: 769px){
padding-top: 6em !important;
}
@media(max-width: 768px){
padding-top: 4em !important;
}
}
}
.contentwrap1{
overflow: hidden;
position: relative;
width: 100%;
background: #fff;
border-radius: 64px 64px 0 0;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
@media(max-width: 768px){
padding-right: 0.5em;
padding-left: 0.5em;
}
}
.contentwrap2{
position: relative;
width: 100%;
background: #212121;
}
.layout-content-inner{
@media(max-width: 768px){
padding:0 !important;
}
@media(min-width: 769px){
padding:0 0 6em 0 !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{
table{
tr{
@media(max-width:$screen-xs){
display: flex;
flex-wrap: wrap;
width: 100%;
}
}
td{
border:0!important;
}
td,th{
@media(max-width: $screen-xs){
width:100%!important;
}
}
}
.homebanner{
padding: 0!important;
}
.onesection{
padding: 0;
}
.navFixed{
.header-buttom{
height: 11vw;
.one, .two, .three{
background: #3e4042;
}
}
.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;
}
}
}
}
.header-buttom{
position: absolute;
height:20vw;
width: 100%;
left: 0;
top: 0;
padding: 0;
}
}
.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{
// padding: 0!important;
@media(min-width: 769px){
padding: 0;
}
}
.page-home{
.zero{
padding: 0;
}
}
.program{
display: flex;
flex-wrap: wrap;
width: 100%;
.program_title{
background-color: #fff;
padding: 0.3em 0.5em;
border-radius: 0.5em;
color: #333;
font-weight: bold;
text-align: center;
width: fit-content;
margin: auto;
}
.program_img{
border-radius: 50%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
overflow: hidden;
}
@media(min-width: 769px){
.program_item{
width: 20%;
padding: 2em;
}
}
}
.kenpadding2{
@media(min-width:1200px ){
padding-right: 0!important;
}
@media(min-width: 769px)and(max-width: 1200px){
.img2{
img{
margin-top: 1em!important;
}
}
padding-left: 0.7em !important;
padding-right: 0.6em;
}
@media(max-width: 768px){
padding-top: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
width: 100%;
}
img{
&:hover{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
}
}
}
.kenpadding{
@media(min-width:1500px ){
padding-left: 0.6em;
}
@media(min-width:1200px ){
padding-right: 0!important;
}
@media(min-width: 769px)and(max-width: 1200px){
.img2{
img{
margin-top: 1em!important;
}
}
padding-right: 0.5em !important;
}
@media(max-width: 768px){
padding-top: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
width: 100%;
}
img{
&:hover{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
-webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
}
}
}
.ken-box1{
@media(max-width: 768px){
.ken-boxleft{
float: left;
}
.ken-boxleft,.ken-boxright{
width: 50%;
float: right;
}
}
}
.ken-box0{
@media(min-width: 769px){
margin-top: 1.3em!important;
}
@media(max-width: 768px){
display: flex;
width: 100%;
padding-top:0!important;
flex-wrap: wrap-reverse;
.ken-boxleft,.ken-boxright{
width: 50%;
}
}
}
.ken-box{
@media(max-width: 768px){
display: flex;
width: 100%;
flex-wrap: wrap-reverse;
.ken-boxleft,.ken-boxright{
width: 50%;
}
}
}
.ken-boxleft{
@media(min-width:1200px ){
padding-right: 0 !important;
padding-left: 1em !important;
}
@media(min-width: 1000px)and(max-width: 1200px){
padding-right: 0.6em !important;
padding-left: 0.6em !important;
}
@media(min-width: 769px)and(max-width: 1000px){
padding-right: 0.3em !important;
padding-left: 0.6em !important;
}
}
.ken-boxright{
@media(min-width: 1200px ){
padding-left: 1em !important;
padding-right: 0 !important;
}
@media(min-width: 1000px)and(max-width: 1200px){
padding-right: 0.6em !important;
padding-left: 0.6em !important;
}
@media(min-width: 769px)and(max-width: 1000px){
padding-right: 0.3em !important;
padding-left: 0.6em !important;
}
}
.ken-box{
padding-top: 1em;
@media(min-width: 769px ){
padding-top: 1.5em;
}
}
.rotate{
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
// .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;
// }
// }
// }
.S{
&:before{
content: "";
position: absolute;
top: 13px;
display: block;
width: 25px;
height: 25px;
background-size: contain;
background-image: url(/assets/s.jpg);
background-repeat: no-repeat;
}
}
.xs{
&:before{
content: "";
position: absolute;
top: 13px;
display: block;
width: 25px;
height: 25px;
background-size: contain;
background-image: url(/assets/xs.jpg);
background-repeat: no-repeat;
}
}
.homeimg{
position: absolute;
@media(max-width:1000px){
position: absolute;
width: 100%;
top: -5%;
.homeicon2{
position: absolute;
right: 0;
width: 180px;
top: -18%;
}
.homeicon1{
width: 150px;
}
}
@media(min-width: 1000px){
left: 7%;
width: 400px;
top: -5%;
.homeicon2{
margin-left: -3.2em;
}
.homeicon1{
width: 30%;
margin-top: 3.3em;
z-index: 10;
}
}
}
.homeimg2{
position: absolute;
width: 100%;
@media(max-width: 768px){
display: none;
}
@media(min-width: 769px){
bottom: 11%;
.homeicon3{
width: 120px;
left:-60px;
margin-top: 2em;
}
.homeicon4{
width: 150px;
right:-90px;
position: absolute;
}
}
}
.homeimg3{
position: absolute;
width: 100%;
@media(max-width: 768px){
.homeicon5,.homeicon6{
display: none;
}
.homeicon8{
width: 124px;
left: 10px;
}
.homeicon9{
width: 113px;
position: absolute;
right: 22px;
top: 23px;
}
}
@media(max-width: 1024px)and(min-width: 769px){
.homeicon5{
left: 12%;
}
.homeicon6{
right: 20%;
}
.homeicon8,.homeicon9{
display: none;
}
}
@media(min-width: 1025px){
.homeicon5{
width: 250px;
left: 19%;
}
.homeicon6{
width: 180px;
margin-top: 3em;
right: 24%;
position: absolute;
}
.homeicon8,.homeicon9{
display: none;
}
}
}
.homeimg4{
position: absolute;
@media(max-width: 768px){
width: 130px;
left: -10px;
}
@media(min-width: 769px){
right: 7%;
width: 170px;
}
}
.page-module-title{
display: none;
}
.extra-box{
z-index: 2;
}
.kentab_nav{
position: absolute;
margin-top: 2.8em;
margin-left: 16em;
z-index: 98;
@media(max-width: $screen-xs){
position: absolute;
margin-top: -3.2em;
margin-left: 0;
}
}
.ken_morewrapper{
position: relative;
z-index: 99;
.ken_more{
position: absolute;
right: 0;
top: 3em;
margin-bottom: 0.5em;
-webkit-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
-moz-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
-ms-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
-o-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
background: none;
border: none;
cursor: pointer;
color: #00c0f5;
box-shadow: #00c0f5 0 0px 0px 2px inset;
background-color: #fff;
padding: 0.5em 1em;
border-radius: 2em;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
&:hover {
color: #fff;
box-shadow:#00c0f5 0 0px 0px 40px inset;
}
@media(max-width: $screen-xs){
font-size: 0.8em;
top: 0.5em;
}
}
}
.chanelpage{
width: 100%!important;
display: block!important;
}