/*--- Fonts ---*/
@font-face {
    font-family: db_heavent;
    src: url(../fonts/db_heavent_v3.2-webfont.eot);
    src: url(../fonts/db_heavent_v3.2-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/db_heavent_v3.2-webfont.woff2) format("woff2"), url(../fonts/db_heavent_v3.2-webfont.woff) format("woff"),
        url(../fonts/db_heavent_v3.2-webfont.ttf) format("truetype"), url(../fonts/db_heavent_v3.2-webfont.svg#db_heavent);
}
@font-face {
    font-family: db_heaventmed;
    src: url(../fonts/db_heavent_med_v3.2-webfont.eot);
    src: url(../fonts/db_heavent_med_v3.2-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/db_heavent_med_v3.2-webfont.woff2) format("woff2"), url(../fonts/db_heavent_med_v3.2-webfont.woff) format("woff"),
        url(../fonts/db_heavent_med_v3.2-webfont.ttf) format("truetype"), url(../fonts/db_heavent_med_v3.2-webfont.svg#db_heaventmed) format("svg");
}
@font-face {
    font-family: db_heaventbold;
    src: url(../fonts/db_heavent_bd_v3.2-webfont.eot);
    src: url(../fonts/db_heavent_bd_v3.2-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/db_heavent_bd_v3.2-webfont.woff2) format("woff2"), url(../fonts/db_heavent_bd_v3.2-webfont.woff) format("woff"),
        url(../fonts/db_heavent_bd_v3.2-webfont.ttf) format("truetype"), url(../fonts/db_heavent_bd_v3.2-webfont.svg#db_heaventbold) format("svg");
}
@font-face {
    font-family: db_heaventblack;
    src: url(../fonts/db_heavent_blk_v3.2-webfont.eot);
    src: url(../fonts/db_heavent_blk_v3.2-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/db_heavent_blk_v3.2-webfont.woff2) format("woff2"), url(../fonts/db_heavent_blk_v3.2-webfont.woff) format("woff"),
        url(../fonts/db_heavent_blk_v3.2-webfont.ttf) format("truetype"), url(../fonts/db_heavent_blk_v3.2-webfont.svg#db_heaventblack) format("svg");
}
@font-face {
    font-family: akrobatregular;
    src: url(../fonts/akrobat-semibold-webfont.eot);
    src: url(../fonts/akrobat-semibold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/akrobat-semibold-webfont.woff2) format("woff2"), url(../fonts/akrobat-semibold-webfont.woff) format("woff"),
        url(../fonts/akrobat-semibold-webfont.ttf) format("truetype"), url(../fonts/akrobat-semibold-webfont.svg#akrobatregular) format("svg");
}
@font-face {
    font-family: akrobatbold;
    src: url(../fonts/akrobat-bold-webfont.eot);
    src: url(../fonts/akrobat-bold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/akrobat-bold-webfont.woff2) format("woff2"), url(../fonts/akrobat-bold-webfont.woff) format("woff"),
        url(../fonts/akrobat-bold-webfont.ttf) format("truetype"), url(../fonts/akrobat-bold-webfont.svg#akrobatbold) format("svg");
}
@font-face {
    font-family: akrobatblack;
    src: url(../fonts/akrobat-extrabold-webfont.eot);
    src: url(../fonts/akrobat-extrabold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/akrobat-extrabold-webfont.woff2) format("woff2"), url(../fonts/akrobat-extrabold-webfont.woff) format("woff"),
        url(../fonts/akrobat-extrabold-webfont.ttf) format("truetype"), url(../fonts/akrobat-extrabold-webfont.svg#akrobatextrabold) format("svg");
}
@font-face {
    font-family: 'bianzhidai_noBG Ring';
    src: url('../fonts/bianzhidai_noBG-Ring.woff2') format('woff2'),
        url('../fonts/bianzhidai_noBG-Ring.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
.bianzhidai_noBG{font-family: 'bianzhidai_noBG Ring';}
.AkrobatRegular,
.DB_HeaventCond,
.DB_HeaventRegular,
.akrobatregular,
.db_heavent {
    font-family: akrobatregular, db_heavent !important;
}
.AkrobatBold,
.DB_HeaventMed_Con,
.DB_HeaventMed,
.akrobatbold,
.db_heavent_med,
.db_heaventmed {
    font-family: akrobatbold, db_heaventmed !important;
}
.AkrobatBlack,
.AkrobatExtraBold,
.DB_HeaventBlack,
.DB_HeaventBold,
.DB_HeaventBold,
.akrobatblack,
.db_heaventbold {
    font-family: akrobatblack, db_heaventbold !important;
}

#aisfooter .sub_menu li a, #aisfooter .sub_menu .head, #aisfooter .sub_menu .head a, #aisfooter .sub_menu .head a:hover, #aisfooter .sub_menu .head a:active{font-family:Rubik,db_heaventregular;}

/*--- DNA Base ---*/
html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;overflow-x:hidden}img{max-width:fit-content;max-width:-moz-fit-content;height:auto}div,section,span{background-repeat:no-repeat;background-size:cover}section{display:block;position:relative}svg,svg.area{height:auto;width:100%;display:inherit}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 30px #fff inset!important}bt,bt.active,bt:hover{display:inline-block;cursor:pointer;transition-duration:.2s}h1,h2,h3,h4,h5,h6,p{font-weight:normal;padding:0;margin:0;font-size:inherit}.h1 b,.h2 b,.h3 b,.h4 b,.h5 b,.h6 b,b,h1 b,h2 b,h3 b,h4 b,h5 b,h6 b{font-weight:normal;font-family:RubikBold,db_heaventbold}.table,.table-block{display:table;width:100%}ol,ul{margin:0}ul.dna-ul li{margin-left:25px}.dna-ul ul{list-style:inherit;margin:auto;padding-inline-start:20px}body ol,body ul,ol,ul{padding-top:5px}ol{counter-reset:item;padding-left:0}ol>li{display:table}ol>li:before{content:counters(item, ".") " ";counter-increment:item;padding-right:5px;width:25px;display:table-cell}.pos{position:absolute;pointer-events:auto}.pos_holder{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.width-full{width:100%;max-width:999%}.center{text-align:center}.right{text-align:right}.overflow{overflow:hidden}.inline{display:inline-block}[class^=width-]{display:inline-block;vertical-align:top}.show_mb,[class^=max-],[class^=min-],svg.area.show_mb,svg.show_mb{display:none}.show_pc,svg.area.show_pc,svg.show_pc{display:inherit}.width-90{width:89.5%}.width-80{width:79.5%}.width-75{width:74.5%}.width-70{width:69.5%}.width-60{width:59.5%}.width-50{width:49.5%}.width-40{width:39.5%}.width-33{width:33.2%}.width-30{width:29.5%}.width-25{width:24.5%}.width-20{width:19.5%}.width-0-pc{width:0%}.width-20-pc{width:20%}.width-25-pc{width:25%}.width-33-pc{width:33%}.width-50-pc{width:50%}.width-66-pc{width:66%}.width-75-pc{width:75%}.width-80-pc{width:80%}.width-100-pc{width:100%}@media(max-width:640px){.width-0-mb{width:0%}.width-20-mb{width:20%}.width-25-mb{width:25%}.width-33-mb{width:33%}.width-50-mb{width:50%}.width-66-mb{width:66%}.width-75-mb{width:75%}.width-80-mb{width:80%}.width-100-mb{width:100%}}@media(max-width:320px){.max-320{display:inherit}}@media(max-width:375px){.max-375{display:inherit}}@media(max-width:414px){.max-414{display:inherit}}@media(max-width:480px){.max-480{display:inherit}}@media(max-width:540px){.max-540{display:inherit}}@media(max-width:600px){.max-600{display:inherit}}@media(max-width:640px){.max-640{display:inherit}.show_mb,svg.area.show_mb,svg.show_mb{display:inherit}.show_pc,svg.area.show_pc,svg.show_pc{display:none}}@media(max-width:768px){.max-768{display:inherit}}@media(max-width:800px){.max-800{display:inherit}}@media(max-width:900px){.max-900{display:inherit}}@media(max-width:1000px){.max-1000{display:inherit}}@media(max-width:1024px){.max-1024{display:inherit}}@media(min-width:480px){.min-480{display:inherit}}@media(min-width:540px){.min-540{display:inherit}}@media(min-width:600px){.min-600{display:inherit}}@media(min-width:640px){.min-640{display:inherit}}@media(min-width:768px){.min-768{display:inherit}}@media(min-width:800px){.min-800{display:inherit}}@media(min-width:900px){.min-900{display:inherit}}@media(min-width:1000px){.min-1000{display:inherit}}@media(min-width:1024px){.min-1024{display:inherit}}@media(min-width:1366px){.min-1366{display:inherit}}@media(min-width:1600px){.min-1600{display:inherit}}

/*--- Fix Templete AIS ---*/
#ais_topbar .primary-link,#ais_topbar .primary-link ul,
.mini-menu .menu__link,
.mini-menu a.menu__link,.mini-menu div.menu__link
*:lang(en) body{font-family:Rubik;}
body{font-family:Rubik,db_heavent!important}
body{padding-top:50px!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.mini-menu div:hover.menu__link, .mini-menu div.menu__link.current {
    font-family: 'db_heaventregular';
    color: #b4d237;
    font-size: 17px;
    line-height:42px;
     display: block;
}
.mini-menu .js-custom-header .secondary-link-custom{padding:0}
#ais_topbar .menu__item.img{vertical-align:middle;height:78px;padding-top:18px;padding-right:10px;background-color:#1e1e1e}
#ais_topbar.custom-menu .js-custom-header,#ais_topbar.mini-menu .js-custom-header{height:83px}
#ais_topbar .submenu__item{padding:9px 0 5px 35px;border-bottom:1px solid #676767}
.menu__item.customer a.menu__link.fibre.customer{padding-left:33px!important}
#ais_topbar a,#aisfooter a{text-decoration:none}#ais_topbar .primary-link-lv1{cursor:default}
#ais_topbar .ais_topbar-eservice-text{font-size:16px}#ais_topbar .topbar_lang_mobile .lang{font-size:16px;font-family:db_heaventregular}
#aisfooter div{background-repeat:repeat}.mini-menu .menu__link,.mini-menu a.menu__link{text-decoration:none!important;cursor:pointer}#videoCont,.truehits-bg{display:none}section ul{list-style-type:disc}#ais_topbar.mini-menu .js-custom-header,#ais_topbar.custom-menu .js-custom-header{display:block!important}@media screen and (max-width: 768px){#ais_topbar.mini-menu .js-custom-header,#ais_topbar.custom-menu .js-custom-header{display:none!important}}.js-overlay.overlay{top:50px;position:fixed}

/*--- Layout & Theme ---*/
body{line-height:1.2;color:#000!important;}
a,a:active,a:hover,a:visited{text-decoration:none}a:hover{color:#8dc63f}
.content a,.content a:active,.content a:visited{color:#000; text-decoration:none}.content a:hover{color:#8dc63f}
section.content{max-width:1200px;padding:40px 20px;margin:auto}
h1,.h1{font-size:calc(2.4rem + 3.8vw)}
h2,.h2{font-size:calc(2.1rem + 3.2vw)}
h3,.h3{font-size:calc(2rem + 2.3vw)}
h4,.h4{font-size:calc(1.9rem + 1.4vw)}
h5,.h5{font-size:calc(1.8rem + 1vw)}
h6,.h6{font-size:calc(1.7rem + .6vw)}
html body,body,p{font-size:calc(1.6rem + .3vw); font-size: 0;}
note,.note{font-size:calc(1.4rem + .3vw)}
spacer{display:block;height:20px}
bt{padding:8px 25px;border:1px solid #000;border-radius:99px}
bt:hover,bt.active{color:#a6cb16;border:1px solid #000;background-color:#000}
.green{color:#b2d429}

/*--- Swiper ---*/
.swiper-slide{height:auto!important}.swiper-button-next:after,.swiper-button-prev:after{font-size:0}.effect-howto{margin:auto;overflow:hidden;max-width:640px}.effect-center .swiper-slide.swiper-slide{transform:scale(0.85);transition-duration:0.5s}.effect-center .swiper-slide.swiper-slide-active{transform:scale(1);transition-duration:0.2s}@media(min-width:960px){.effect-center .swiper-slide.swiper-slide,.effect-center .swiper-slide.swiper-slide-active{transform:scale(1)!important}}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after,.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:''!important}
.swiper-pagination-bullet.swiper-pagination-bullet{width:7px;height:7px;border-radius:99px;background:#999;opacity:0.3;margin:0 4px!important;transition-duration:0.5s}
.swiper-pagination-bullet-active.swiper-pagination-bullet-active{width:28px;opacity:1;background:none;background:#b2d234;transition-duration:0.2s}
.swiper-button-prev,.swiper-button-next{width:50px;height:50px;border-radius:999px;box-shadow:0 4px 8px 0 rgba(0,0,0,0.3);background:#fff no-repeat center;background-size:100%;transition-duration:0.4s}
.swiper-button-prev:hover,.swiper-button-next:hover{background-color:#b2d234;transition-duration:0.2s}
.swiper-button-prev{background-image:url(../images/arrow-left-black.png)!important}
.swiper-button-next{background-image:url(../images/arrow-right-black.png)!important}
.swiper-button-prev:hover{background-image:url(../images/arrow-left-white.png)!important}
.swiper-button-next:hover{background-image:url(../images/arrow-right-white.png)!important}

/*--- Popup ---*/
.popup{width:100%;height:0%;overflow:hidden;margin:0 auto;position:fixed;z-index:40;top:0;text-align:center;vertical-align:middle;display:table;transition-duration:0.6s}
.popup.show{height:100%;overflow:hidden;transition-duration:0.4s}.popup.show .popup_container{margin-top:0}.popup.show .popup_fader{opacity:1;transition-duration:0.2s}
.popup .popup_fader{pointer-events:none;width:100%;height:100%;margin:0 auto;position:fixed;z-index:-1;background-color:rgba(0,0,0,.7);opacity:0;transition-duration:0.3s}
.popup .popup_holder{vertical-align:middle;display:table-cell;width:100%;max-width:600px}
.popup .popup_container{max-width:900px;background-color:#fff;text-align:left;width:90%;margin:-1000px auto 80px;position:relative;transition-duration:0.5s}
.popup .popup_close{top:0;right:0;width:40px;height:40px;position:absolute;z-index:2;cursor:pointer;font-size:30px;text-align:center;background:center no-repeat #b2d234;background-image:url(../images/ic-x-black.png);background-size:50%;transition-duration:0.3s}
.popup .popup_close:hover{color:#c5d445;background-image:url(../images/ic-x-white.png);background-color:#000;background-size:70%;transition-duration:.2s}
.popup .popup_data{padding:40px;text-align:center}
.popup .popup_data.popup_vdo{background:#000;padding:0}

/*--- Select ---*/
.dna-select textarea,.dna-select input,select[multiple=multiple]{-webkit-transition:border-color;-moz-transition:border-color;transition:border-color;border-radius:.5rem;padding:.425rem .425rem;width:100%;outline:none}
.dna-select textarea,.dna-select input,select[multiple=multiple]{background-color:white;border:1px solid #ddd;box-shadow:inset 0 1px 3px rgba(0,0,0,0.06)}
.dna-select textarea:hover,.dna-select input:hover,.dna-select select[multiple=multiple]:hover{border-color:#c4c4c4}
.dna-select textarea:focus,.dna-select input:focus,.dna-select select[multiple=multiple]:focus{outline:none;border-color:#77c92d;box-shadow:inset 0 1px 3px rgba(0,0,0,0.06),0 0 5px rgba(126,235,90,0.7)}

/*--- Table ---*/
table{border-spacing:0}.table .td{display:table-cell;vertical-align:top}.table.middle>*>.td,.table.middle>.td{vertical-align:middle}.table>.tr{display:table-row}@media(min-width:640px){.table>.tr{display:contents}}@media(max-width:640px){.table>.tr{display:table;width:100%}}@-moz-document url-prefix(){.table-block>*>div,.table-block>div{float:left}}.table-dup{position:absolute;z-index:1;overflow:hidden}.table-relative{position:relative}.table-overflow{overflow:auto}
.table-touch{position:absolute;z-index:2;width:5em;height:5em;left:50%;top:50%;margin-left:-2.5em;margin-top:-1.5em;
background:url(../images/touch.gif) no-repeat center;background-size:cover;border-radius:999px;opacity:0;box-shadow:2px 2px 6px rgba(0,0,0,.4);transform:scale(1.5);transition-duration:0.3s}
.table-touch.active{opacity:0.8;transform:scale(1)}

/*--- Youtube iFrame Responsive ---*/
.video-center{margin:40px auto;max-width:1200px;border-radius:20px;overflow:hidden;border:5px solid #888}
.video-wrapper{position:relative;padding-bottom:56.25%;overflow:hidden}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/*--- Dropdown ---*/
.dna-select{position:relative;margin:0 auto;max-width:300px;line-height:1.2;font-size:18px;cursor:pointer}
.dna-select p{padding:5px 10px;color:#fff}
.dna-select input{margin:10px;padding:5px 10px;width:calc(100% - 20px)}
.dna-select li{list-style:none;margin-left:0;padding:8px 20px;font-size:18px;text-align:left;color:#fff}
.dna-select li:hover{background-color:#333}
.dna-select-display{padding:10px 45px 8px 20px;background:url(../images/arrow-down-black.png) no-repeat center right 15px #E9EF31;background-size:25px auto;text-align:left;border-radius:8px;box-shadow:0px 0px 10px rgba(0,0,0,0.2)}
.dna-select-drop{position:absolute;z-index:5;width:100%;left:0;background:#999;box-shadow:0px 0px 10px rgba(0,0,0,0.2);border-radius:0 0 8px 8px}
.dna-select-drop .dna-scroll{max-height:250px}
.dna-select.active .dna-select-display{background-image:url(../images/arrow-up-black.png);border-radius:8px 8px 0 0}
.dna-select.active .dna-select-drop{display:block}

/*--- Data Table Fix Column ---*/
.table-cover{border-radius:10px;box-shadow:4px 4px 10px rgba(0,0,0,.1);position:relative;overflow:hidden}
.table-style{width:100%;min-width:1000px!important}
.table-style tr>*{vertical-align:top;text-align:left;padding:10px;border-bottom:1px solid #ddd}
.table-style tr>*:first-child{background-color:#000;color:#fff;width:150px}
.table-style tr:nth-child(even){background-color:#eee}
.table-style tr th{background-color:#999}
@media(max-width:640px){.table-style tr>*:first-child{width:100px}}

/*--- Faq ---*/
.expand-qa{background:url(../images/arrow-down-black.png) no-repeat;background-position:99% 25px;background-size:20px;border-bottom:2px solid #b2d234}
.expand-qa.active{background-image:url(../images/arrow-up-black.png)}
.expand-qa .q{padding:22px 40px 20px 0;cursor:pointer;transition: color 0.3s ease-out}
.expand-qa.active .q{padding-bottom:0}
.expand-qa.active .q,.expand-qa:hover .q{color:#b2d234;transition: color 0.1s}
.expand-qa .a{height:0px;padding-top:0;overflow:hidden;transition-duration:0.3s}
.expand-qa .a,.expand-qa .a p{color:#666;line-height:1.4}
.expand-qa.active .a{padding:20px 0 20px;height:auto;transition-duration:0.3s}

/*--- Condition ---*/
.expand-condition .q{padding:22px 40px 20px 0;cursor:pointer;transition:color 0.3s ease-out}
.expand-condition.active .q{padding-bottom:0}
.expand-condition.active .q,.expand-condition:hover .q{color:#b2d234;transition:color 0.1s}
.expand-condition .a{height:0px;padding-top:0;overflow:hidden;transition-duration:0.3s}
.expand-condition .a,.expand-condition .a p{color:#666;line-height:1.4}
.expand-condition.active .a{padding:20px 0 20px;height:auto;transition-duration:0.3s}
arrow{display:inline-block;height:25px;width:30px;vertical-align:bottom;background:url(../images/arrow-down-black.png) no-repeat center;background-size:20px}
.active arrow{background-image:url(../images/arrow-up-black.png)}

/*--- SCROLLBAR BASE ---*/
.scroll-textarea {border:1px solid #ccc;border-top-color:#999}
.scroll-wrapper{overflow:hidden!important;padding:0!important;position: relative;}.scroll-wrapper>.scroll-content{border:none!important;box-sizing:content-box!important;height:auto;left:0;margin:0;max-height:none;max-width:none!important;overflow: scroll!important;padding:0;position: relative!important;top:0;width:auto!important;}.scroll-wrapper>.scroll-content::-webkit-scrollbar{height:0;width:0}.scroll-element{display:none}.scroll-element,.scroll-element div{box-sizing:content-box}.scroll-element.scroll-x.scroll-scrollx_visible,.scroll-element.scroll-y.scroll-scrolly_visible {display:block}.scroll-element .scroll-bar,.scroll-element .scroll-arrow {cursor:default}.scroll-textarea>.scroll-content{overflow:hidden!important}.scroll-textarea>.scroll-content>textarea{border:none!important;box-sizing:border-box;height:100%!important;margin:0;max-height:none!important;max-width:none!important;overflow: scroll!important;outline:none;padding:2px;position: relative!important;top:0;width:100%!important}.scroll-textarea>.scroll-content>textarea::-webkit-scrollbar{height:0;width:0}.dna-scroll>.scroll-element,.dna-scroll>.scroll-element div{border:none;margin:0;overflow:hidden;padding:0;position:absolute;z-index:10}.dna-scroll>.scroll-element div{display:block;height:100%;left:0;top:0;width:100%}

/*--- SCROLLBAR OUTER ---*/
.dna-scroll>.scroll-element.scroll-x{bottom:0;height:10px;left:0;width:100%}
.dna-scroll>.scroll-element.scroll-y{height:100%;right:0;top:0;width:12px}
.dna-scroll>.scroll-element.scroll-x .scroll-element_outer{height:10px;top:0px}
.dna-scroll>.scroll-element.scroll-y .scroll-element_outer{left:2px;width:8px}
.dna-scroll>.scroll-element .scroll-element_outer{overflow:hidden}
.dna-scroll>.scroll-element .scroll-element_track {background-color:#ddd}
.dna-scroll>.scroll-element .scroll-element_outer,.dna-scroll>.scroll-element .scroll-element_track,.dna-scroll>.scroll-element .scroll-bar{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}
.dna-scroll>.scroll-element .scroll-bar{background-color:#b2d429}
.dna-scroll>.scroll-element .scroll-bar:hover{background-color:#b2d429}
.dna-scroll>.scroll-element.scroll-draggable .scroll-bar{background-color:#10b058}
.dna-scroll>.scroll-content.scroll-scrolly_visible{left:-12px;margin-left:12px}
.dna-scroll>.scroll-content.scroll-scrollx_visible{top:-10px;margin-top:10px}
.dna-scroll>.scroll-element.scroll-x .scroll-bar{min-width:10px}
.dna-scroll>.scroll-element.scroll-y .scroll-bar{min-height:10px}
.dna-scroll>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track{left:-14px}
.dna-scroll>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track{top:-14px}
.dna-scroll>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size{left:-14px}
.dna-scroll>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size{top:-14px}

/*--- SCROLLBAR RAIL ---*/
.dna-scroll>.scroll-element .scroll-element_size{background-color:rgba(0,0,0,.3)}
.dna-scroll>.scroll-element .scroll-element_outer:hover .scroll-element_size{background-color:rgba(0,0,0,.5)}
.dna-scroll>.scroll-element.scroll-x{bottom:0;height:15px;left:0;min-width:100%;width:100%}
.dna-scroll>.scroll-element.scroll-y{height:100%;min-height:100%;padding:0 2px 0 3px;right:0;top:0;width:12px}
.dna-scroll>.scroll-element .scroll-bar{background-color:#b2d429;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;box-shadow:1px 1px 3px rgba(0,0,0,.5)}
.dna-scroll>.scroll-element .scroll-element_outer:hover .scroll-bar{box-shadow:1px 1px 3px rgba(0,0,0,.6)}
.dna-scroll > .scroll-content.scroll-scrolly_visible{left:-17px;margin-left:17px}
.dna-scroll > .scroll-content.scroll-scrollx_visible{margin-top:17px;top:-17px}
.dna-scroll > .scroll-element.scroll-x .scroll-bar{height:10px;min-width:10px;top:1px}
.dna-scroll > .scroll-element.scroll-y .scroll-bar{left:1px;min-height:10px;width:10px}
.dna-scroll > .scroll-element.scroll-x .scroll-element_outer{height:15px;left:5px}
.dna-scroll > .scroll-element.scroll-x .scroll-element_size{height:2px;left:-10px;top:5px}
.dna-scroll > .scroll-element.scroll-y .scroll-element_outer{top:5px;width:15px}
.dna-scroll > .scroll-element.scroll-y .scroll-element_size{left:5px;top:-10px;width:2px}
.dna-scroll > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size{left:-25px}
.dna-scroll > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size{top:-25px}
.dna-scroll > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track{left:-25px}
.dna-scroll > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track{top:-25px}


/*--- Sample ---*/
.sample{background-color:#ddd;text-align:center}
.table.sample{margin-bottom:20px}.table.sample>*>.td,.table.sample>.td{background-color:#ddd;padding:10px;text-align:center;border:1px solid #bbb}.box-temp{display:inline-block;width:29%;height:200px;background:#CCC;margin:1%}.click-content{display:none}.click-content.active{display:block}
body {
    font-size: 1.6rem;
    color: #2e3233;
    background-color: #fff;
    font-family: Rubik,db_heaventregular;
    overflow-x: hidden
}
em {
    font-style: normal;
    display: inline-block;
}
.row {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
.row:before,.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}
.row100 {
    max-width: none;
}

.panel {
    position: relative;
    margin: 0px 10px;
    padding: 0;
}

.panel6 {
    position: relative;
    margin: 6px;
    padding: 0;
}

.panel15 {
    position: relative;
    margin: 0 15px;
    padding: 0;
}

.mt-col {
    height: 100%;
    position: relative;
    display: block;
    float: left;
    min-height: 1px;
    padding: 0;
}
.col-lg-12 {
    height: 100%;
    position: relative;
    display: block;
    float: left;
    min-height: 1px;
    padding: 0;
}

/*--- Desktop PC */
@media(min-width:1024px){}
@media(min-width:1200px){
  h1,.h1{font-size:72px}
  h2,.h2{font-size:60px}
  h3,.h3{font-size:48px}
  h4,.h4{font-size:36px}
  h5,.h5{font-size:30px}
  h6,.h6{font-size:24px}
  html body,body,p{font-size:0px}
  note,.note{font-size:18px}
}
/*--- Large Desktop PC */
@media(min-width:1366px){}

/* sub menu set -------------------------------*/
ul.secondary-link-custom {padding: 0;
}
.secondary-link-custom .menu__item a.menu__link {
    font-size: 18px;
}
.secondary-link-custom a.menu__link {
    padding: 4px 20px!important;
    font-family: Rubik,db_heaventmed!important;
}
.highlight {
    margin-top: 74px;
}
@media only screen and (max-width: 992px){
.highlight {
    margin-top: 22px;
}
}
/*-------- Media Query --------*/
/*--- Tablet ---*/
@media(min-width:480px){}
@media(min-width:641px){
  section.content{padding:60px 30px}
  bt{padding:8px 30px}
}
@media(min-width:768px){}
/*--- Large Desktop PC */
@media(min-width:1200px){}
@media(min-width:1366px){}
.ani_set{ visibility: hidden;}

.section-in {position:relative;margin:auto;width:100%;max-width:640px;overflow:hidden;}
.section-1 {
/* background-image: url('https://picsum.photos/id/1015/640/1136');  */
}
.section-2 {background-image: url('../images/ph2/card_bg.jpg');background-position: center top;}
#banner_kv img{width: 100%;}
.section-6 {position:relative;margin:auto;width:100%;
/* background-color: #b7fdbf;
background-size: 100%;
background-image: url('../images/ph2/card_s6.jpg'); */
}
.section-6 svg.area {
    width: 99%;
}
.section-6 .section-in{

/* background-image: url('../images/ph2/card_s6_5.jpg');
background-image: url('../images/ph2/card_s6_4.jpg');
background-image: url('../images/ph2/card_s6_3.jpg'); */
/* background-image: url('../images/ph2/card_s6_2.jpg');
background-image: url('../images/ph2/card_s6_1.jpg');  */
}

.card-form { width: 100%; max-width: 640px; padding: 0; }
.card-preview{}

#cardnew {
  position:relative;
  margin:auto;
  width:100%;
  max-width:590px;
  overflow:hidden;
  border-radius:30px;
  transition: all 0.8s ease;
  background-color: transparent;
  transform: rotate(-5deg) scale(0.9);
  }
#cardnew.final {
  transform: rotate(0deg) scale(0.9);
  transform-origin: center;
}
#cardnew.zoomed {
  transform: rotate(0deg) scale(1.1) translateX(25%);
  transform-origin: center;
}
#cardnew.zoomedleft {
  transform: scale(1.1) translateX(-25%);
  transform-origin: center;
}
.cropit-preview img{ max-width: min-content;object-fit: cover;}

#cardnew .card_pc {top:0%;left:0.17%;width: 99.49%;height:auto;}
#cardnew .card_pc img{max-width: 100%;}
#cardnew .cyclegreen {
    top: 65%;
    left: 2.17%;
    width: 13.49%;
    height: auto;
    z-index: 11; }
#cardnew .idtext { position:absolute; top:39.14%; left:46.27%; width:46.44%; color:#000; text-align: center; font-size: 30px; font-size: 4.5vw;
font-family: 'bianzhidai_noBG Ring';
}
#cardnew .nametext { position:absolute; top:18.21%; left:46.27%; width:46.44%; color:#000;
text-align: center; font-family: 'bianzhidai_noBG Ring';
}
#cardnew .picture { position:absolute; top:14.21%; left:10.85%;width: 31.34%;aspect-ratio: 3 / 3.8; overflow:hidden}
/* .picture img { width: 100%; height: auto; } */
.s6txt1 { font-size: 1.2rem; text-align: center; }
.s6txt2 { font-size: 1.2rem; text-align: center; }
.next-btn, .upload-btn, .upload2-btn, .next2-btn,
.back-btn, .create-btn, .share-btn, .download-btn{
  /* padding: 0.6rem 1.2rem; */
  font-size: 1rem;
  /* border: none; */
  /* border-radius: 8px; */
  /* cursor: pointer; */
  /* margin-top: 1rem; */
  /* display: block; */
  /* margin-left: auto; */
  /* margin-right: auto; */
}

/* .next-btn {color: white;}
.upload-btn { background: #0066cc; color: white; margin-top: 40px; }
.upload2-btn { background: #0066cc; color: white; margin-top: 30px; display: inline-block;}
.next2-btn { background: #00cc66; color: white; margin-top: 30px; display: inline-block;}
.back-btn { background: #0066cc; color: white;  display: inline-block;}
.create-btn { background: #00cc66; color: white; display: inline-block;}
.share-btn { background: #0066cc; color: white; margin-top: 30px; display: inline-block;}
.download-btn { background: #00cc66; color: white; margin-top: 30px; display: inline-block;} */

.cropit-preview {
  width: 100%;
  aspect-ratio: 3 / 3.8;
  /* height: 300px; */
}

.cropit-image-input {
  visibility: hidden;
}


.select-image-btn {
    background: #52a0c7;
    color: #fff;
    padding: 5px 10px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-box-shadow: 0 2px #3784aa;
    box-shadow: 0 2px #3784aa;
}
.slider-wrapper * {
    vertical-align: middle;
}
.slider-wrapper .cropit-image-zoom-input {
    width: 100%;
    /* margin: 0 20px; */
}
.slider-wrapper .cropit-image-zoom-input.custom {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 2px;
    background: #000;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    outline: none;
}
input[type="range" i] {
    appearance: auto;
    cursor: default;
    color: light-dark(rgb(16, 16, 16), rgb(255, 255, 255));
    padding: initial;
    border: initial;
    margin: 2px;
}
.btn_wrap{ text-align: center;}
/* .btn_wrap_s1{margin-top: 20px;} */
/* .btn_wrap_s2, .btn_wrap_s3, .btn_wrap_s4{margin-top: 40px;} */
.btn_wrap_s2, .btn_wrap_s3, .btn_wrap_s4, .btn_wrap_s5{display: none;}
/* .select-image-btn{display: none;} */
/* .slider-wrapper{display: none;} */
/* Show load indicator when image is being loaded */
.cropit-preview.cropit-image-loading .spinner {
opacity: 1;
}
/* Show move cursor when image has been loaded */
.cropit-preview.cropit-image-loaded .cropit-preview-image-container {
cursor: move; background: #fff;
}
/* Gray out zoom slider when the image cannot be zoomed */
.cropit-image-zoom-input[disabled] {
opacity: .2;
}

/* Hide default file input button if you want to use a custom button */
input.cropit-image-input {
visibility: hidden;
}
/* The following styles are only relevant to when background image is enabled */

/* Translucent background image */
.cropit-preview-background {
opacity: .2;
}
/*
* If the slider or anything else is covered by the background image,
* use non-static position on it
*/
input.cropit-image-zoom-input {
position: relative;
}
/* Limit the background image by adding overflow: hidden */
#image-cropper {
    position: absolute;
    top: 27.5%;
    left: 0%;
    width: 100%;
}

.cropit-preview {
/* You can specify preview size in CSS */
/* width: 200px;
height: 266px; */
}

/* Hide file input */
input.cropit-image-input {
visibility: hidden;
}
.splash .controls-wrapper .slider-wrapper .large-image,
.demos .demo-wrapper .controls-wrapper .slider-wrapper .large-image {
font-size: 24px;
}
.select-image-btn {
background: #52a0c7;
color: #fff;
padding: 5px 10px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
display: inline-block;
position: relative;
-webkit-box-shadow: 0 2px #3784aa;
box-shadow: 0 2px #3784aa;
}
[class*=" icon-"] {
font-family: 'iconfont' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-image:before {
content: "\e900";
}
.slider-wrapper .small-image {
font-size: 16px;
}
.slider-wrapper .large-image {
font-size: 24px;
}
.cropit-preview .error-msg {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px 20px;
color: #fff;
background: rgba(210, 65, 72, 0.8);
line-height: 1.5;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
-ms-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.slider-wrapper [type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #00c75d;
border: #000 2px solid;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.slider-wrapper .cropit-image-zoom-input.custom {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 5px;
background: #000;
-webkit-border-radius: 5px;
border-radius: 99px;
outline: none;
}
.slider-wrapper{ height: 25px; margin-top: 10px;}
.select-image-btn{display: none;}

#inputText,#outputText{text-align:center; letter-spacing: -1px;}
#inputText{background: none;    width: 100%; height: 100%;
background-color: transparent;
        line-height: 2;
    outline: none;
    border: none;
    }
#inputText:focus{
    outline: none;
}
#outputText,#outputText.lv1{font-size:40px;font-size: 6.5vw;line-height: 6.5vw;}
#outputText.lv2{font-size:30px;font-size: 4.5vw;}
#outputText.lv3{font-size:24px;font-size: 3.75vw;}
.spinner img{ width: 100%;}

#card_s6 .s6_logo {top:5.99%;left:25.16%;width:49.69%;height:auto;}
#card_s6 .s6_stp1_card_sd {
    top: 30%;
        left: 7.31%;
    width: 90%;
    height: auto;
}
#card_s6 .s6_btn_click_bg {z-index: 20;
  top:81.61%;left:26.72%;width:45.16%;height:auto;aspect-ratio: 8 / 2.2;background-image: url(../images/card_s6/s6_btn_click_bg.png);background-size: 100%;font-size:59px;font-size: 6.2vw;line-height: 1.8;text-align: center;color:#FFF}

#card_s6 .s6_stp1_txt {top:73.97%;left:12.81%;width:77.19%;height:auto;}
#card_s6 .s6_stp1_img1 {top:19.42%;left:9.22%;width:11.72%;height:auto;}
#card_s6 .s6_stp1_img2 {top:85.64%;left:76.88%;width:10.62%;height:auto;}
#card_s6 .s6_stp2_img1 {top:15.5%;left:7.66%;width:12.5%;height:auto;}
#card_s6 .s6_stp3_img1 {top:7.85%;left:75.94%;width:18.75%;height:auto;}
#card_s6 .s6_stp3_img2 {top:66.32%;left:7.34%;width:10.16%;height:auto;}
#card_s6 .s6_stp4_img1 {top:61.57%;left:85.94%;width:19.22%;height:auto;}
#card_s6 .s6_stp5_img2 {top:5.79%;left:-3.44%;width:25.31%;height:auto;}
#card_s6 .s6_stp5_img1 {top: 84.09%;left:81.72%;width:13.12%;height:auto;}

#card_s6 .s6_btn_upload_bg {z-index: 20;
  top: 76.34%;left: 19.22%;width: 60%;height: auto;font-size: 42px;font-size: 5.5vw;line-height: 2.2;text-align: center;color: #FFF;background-image: url(../images/card_s6/s6_btn_upload_bg.png);background-size: 100%;}
#card_s6 .s6_stp3_txt {
    top: 72.79%;
    left: 34.22%;
    width: 31.88%;
    height: auto;
}
#card_s6 .s6_stp3_drag { display: none;
    top: 123.1%;
    left: 18.75%;
    width: 63.44%;
    height: auto;
}
#card_s6 .s6_btn_back_bg {z-index: 20;
  top:86.36%;left:11.09%;width:39.06%;height:auto;font-size:44px;font-size: 5.5vw;line-height: 2;text-align: center;background-image: url(../images/card_s6/s6_btn_back_bg.png);background-size: 100%;color:#FFF}
#card_s6 .s6_btn_next_bg {z-index: 20;
  top:86.36%;left:50.94%;width:39.38%;height:auto;font-size:44px;font-size: 5.5vw;line-height: 2;text-align: center;background-image: url(../images/card_s6/s6_btn_next_bg.png);background-size: 100%;color:#FFF}
#card_s6 .s6_btn_back2_bg {z-index: 20;
  top:87.19%;left:11.56%;width:40.16%;height:auto;font-size:44px;font-size:6.6vw;
line-height: 1.8;text-align: center;
background-image: url(../images/card_s6/s6_btn_back_bg.png); background-size: 100%;color:#FFF}
#card_s6 .s6_btn_create_bg {z-index: 20;
  top:87.19%;left:50.78%;width:40.47%;height:auto;font-size:44px;font-size:6.6vw;
line-height: 1.8;text-align: center;
background-image: url(../images/card_s6/s6_btn_next_bg.png); background-size: 100%;color:#FFF}
#card_s6 .inputname {top:74.31%;left:15.16%;width:71.09%;height:auto;aspect-ratio: 16 / 3.3;
background-image: url(../images/card_s6/inputname.png); background-size: 100%;}

	#card_s6 .s6_btn_download_bg {z-index: 20;
  top:79.24%;
  left:20.78%;
  width:59.84%;
  height:auto;
  font-size:42px;
  font-size: 5.5vw;
  line-height: 2.2;
  text-align: center;
  background-image: url(../images/card_s6/s6_btn_share_bg.png);
  background-size: 100%;
  color:#FFF
  }
	#card_s6 .s6_btn_share_bg {z-index: 20;
  top:69.21%;
  left:20.78%;
  width:59.84%;
  height:auto;
  font-size:42px;
  font-size: 5.5vw;
  line-height: 2.2;
  text-align: center;
  background-image: url(../images/card_s6/s6_btn_share_bg.png);
  background-size: 100%;
  color:#FFF
  }
    /* .section-1-top{
    top: -15px;
    height: 30px;
    width: 100%;
    background-image: url(../images/card_s6/s2_top_pc.png);
    background-size: 100% 100%;
    } */
  .section-6-top{
  top: -15px;
  height: 30px;
  width: 100%;
  background-image: url(../images/card_s6/green_line1.png);
  background-size: 100% 100%;
  }
  svg.shows_mb{display: block; pointer-events: none;}
  svg.shows_pc{display: none; pointer-events: none;}
@media(min-width:641px){
.section-in {overflow:unset;}
#card_s6 .s6_stp3_txt {
    top: 70.79%;
    left: 34.22%;
    width: 31.88%;
    height: auto;
}
#card_s6 .s6_stp3_drag {
    display: none;
    top: 133.1%;
    left: 18.75%;
    width: 63.44%;
    height: auto;
}
#card_s6 .s6_stp1_card_sd {
    top: 30%;
    left: 9.31%;
    width: 90%;
    height: auto;
}
#card_s6 .inputname {
    top: 72.31%;
    left: 15.16%;
    width: 71.09%;
    aspect-ratio: 16 / 3.3;
    }
    #inputText {
    font-size: 30px;
}
#card_s6 .s6_btn_click_bg {font-size:45px;}
#card_s6 .s6_btn_upload_bg {font-size: 40px;}
#card_s6 .s6_btn_back_bg,
#card_s6 .s6_btn_next_bg,
#card_s6 .s6_btn_share_bg,
#card_s6 .s6_btn_download_bg {font-size: 40px;}
}
@media(min-width:769px){
svg.shows_mb{display: none;}
svg.shows_pc{display: block;}
.section-6{
  /* max-height: 750px; */
  background-position: center top;
  background-size: auto;
  /* background-image: url('../images/ph2/card_s6_pc.jpg'); */
}
.section-6 .section-in {
    max-width: 1000px;
    /* max-height: 880px;
    transform: scale(0.8);
    transform-origin: center; */
    /* transform: scale(0.8);
    transform: scale(0.8) translateY(-8%); */
}
.section-6.sc80{max-height: 750px;}
.section-6.sc80 .section-in {
    transform-origin: center;
    transform: scale(0.8) translateY(-8%);
}
#card_s6 .s6_logo {
            top: 5.99%;
        left: 39.16%;
        width: 24.69%;
        height: auto;
}
#card_s6 .s6_stp1_txt {
    top: 72.97%;
    left: 31.81%;
    width: 39.19%;
    height: auto;
}
#card_s6 .s6_stp1_img1 {
    top: 13.42%;
    left: 21.22%;
    width: 6.72%;
    height: auto;
}
#card_s6 .s6_stp1_img2 {
    top: 68.64%;
    left: 83.88%;
    width: 6.62%;
    height: auto;
}
    #card_s6 .s6_stp1_card_sd {
        top: 26%;
        left: 27.31%;
        width: 53%;
        height: auto;
    }

.card-form {
    width: 100%;
    max-width: unset;
    padding: 0;
}
    #cardnew {
        left: 4%;
        width: 77%;
        max-width: unset;
    }
    #image-cropper {
        position: absolute;
        top: 21.5%;
        left: 16%;
        width: 100%;
    }
    #card_s6 .s6_btn_click_bg {
    top: 81.61%;
    left: 39.2%;
    width: 23.16%;
    font-size: 4.5vw;
    }


}
@media(min-width:769px){
    #image-cropper {
        position: absolute;
        top: 24.5%;
        left: 14%;
        width: 68%;
        /* max-width: 640px; */
    }
    #card_s6 .s6_btn_click_bg {
   font-size: 30px;
   line-height: 50px;
   }
    #card_s6 .s6_btn_upload_bg {
    top: 77.34%;
    left: 34.22%;
    width: 35%;
    font-size: 25px;
    line-height: 70px;
    /* aspect-ratio: 16 / 3; */
    background-size: 100% 100%;
    }

#outputText,#outputText.lv1{font-size: 30px;line-height: 50px;}
#outputText.lv2{font-size: 25px;}
#outputText.lv3{font-size: 18px;}
#cardnew .idtext {
    font-size: 20px;
    }
    #card_s6 .s6_stp3_txt {
        top: 69.79%;
        left: 44.22%;
        width: 14.88%;
        height: auto;
    }
    #card_s6 .s6_btn_next_bg {
        top: 84.36%;
        left: 50.94%;
        width: 25.38%;
        height: 70px;
        font-size: 25px;
        line-height: 70px;
        background-size: 100% 100%;
    }
    #card_s6 .s6_btn_download_bg {
    top: 86.24%;
    left: 31.78%;
    width: 38.84%;
    font-size: 25px;
    line-height: 70px;
    }
    #card_s6 .s6_btn_share_bg {
            top: 73%;
            left: 30.78%;
            width: 38.84%;
            font-size: 25px;
            line-height: 70px;
    }
    #card_s6 .s6_btn_back_bg {
    top: 84.36%;
    left: 25.09%;
    width: 25.06%;
    height: 70px;
    font-size: 25px;
    line-height: 70px;
    background-size: 100% 100%;
    }
        #card_s6 .s6_stp3_drag{
        display: none;
        top: 118.1%;
        left: 37.75%;
        width: 34.44%;
        height: auto;
    }
        #card_s6 .inputname {
        top: 71.81%;
        left: 32.16%;
        width: 39.09%;
        aspect-ratio: 16 / 3.3;
    }
#cardnew.final {
  transform: rotate(0deg) scale(1) translateY(0%);
  transform-origin: center;
}
#cardnew.zoomed {
  transform: rotate(0deg) scale(1) translateX(0%) translateY(0%);
  transform-origin: center;
}
#cardnew.zoomedleft {
  transform: rotate(0deg) scale(1) translateX(0%) translateY(0%);
  transform-origin: center;
}
.section-6-top{top: -20px;height: 40px;}

}
@media(min-width:1000px){
    #image-cropper {
        position: absolute;
        top: 24.5%;
        left: 15%;
        width: 68%;
    }
    #card_s6 .s6_btn_click_bg {
   font-size: 30px;
   line-height: 65px;
   }
    #card_s6 .s6_btn_upload_bg {
    top: 77.34%;
    left: 34.22%;
    width: 35%;
    font-size: 25px;
    line-height: 75px;
    /* aspect-ratio: 16 / 3; */
    background-size: 100% 100%;
    }

#outputText,#outputText.lv1{font-size:50px; line-height: 50px;}
#outputText.lv2{font-size:30px;}
#outputText.lv3{font-size:24px;}
#cardnew .idtext {
    font-size: 30px;
    }
    #card_s6 .s6_stp3_txt {
        top: 71.79%;
        left: 44.22%;
        width: 14.88%;
        height: auto;
    }
    #card_s6 .s6_btn_next_bg {
        top: 84.36%;
        left: 50.94%;
        width: 25.38%;
        height: 70px;
        font-size: 25px;
        line-height: 70px;
        background-size: 100% 100%;
    }
    #card_s6 .s6_btn_download_bg {
    top: 86.24%;
    left: 31.78%;
    width: 38.84%;
    font-size: 25px;
    line-height: 80px;
    }
    #card_s6 .s6_btn_share_bg {
            top: 73%;
            left: 30.78%;
            width: 38.84%;
            font-size: 25px;
            line-height: 80px;
    }
    #card_s6 .s6_btn_back_bg {
    top: 84.36%;
    left: 25.09%;
    width: 25.06%;
    height: 70px;
    font-size: 25px;
    line-height: 70px;
    background-size: 100% 100%;
    }
        #card_s6 .s6_stp3_drag{
        display: none;
        top: 120.1%;
        left: 36.75%;
        width: 34.44%;
        height: auto;
    }
        #card_s6 .inputname {
        top: 71.81%;
        left: 32.16%;
        width: 39.09%;
        aspect-ratio: 16 / 3.3;
    }
#cardnew.final {
  transform: rotate(0deg) scale(1) translateY(0%);
  transform-origin: center;
}
#cardnew.zoomed {
  transform: rotate(0deg) scale(1) translateX(0%) translateY(0%);
  transform-origin: center;
}
#cardnew.zoomedleft {
  transform: rotate(0deg) scale(1) translateX(0%) translateY(0%);
  transform-origin: center;
}
.section-6-top{top: -20px;height: 40px;}

}
@media (min-width: 1025px) {
    #card_s6 .s6_btn_share_bg {
    display: none;
    }
    #card_s6 .s6_btn_download_bg {
        top: 76%;
        left: 32.78%;
        width: 36.84%;
        font-size: 25px;
        line-height: 75px;
        background-size: 100% 100%;
    }
    .animated-btn {transition: transform 0.3s ease}
    .animated-btn:hover {
      transform: scale(1.1);
        cursor: url("../images/cursor-bomb.png") 16 16, pointer;
    }
}

/*--- card_s2 ---*/
#card_s2 {position:relative;margin:auto;width:100%;max-width:640px;overflow:hidden}
#card_s2 .s2_bg {top:0%;left:0%;width:100%;height:auto;}
#card_s2 .s2_img1 {top:59.66%;left:-7.19%;width:32.97%;height:auto;}
#card_s2 .s2_banner3 {top:81%;left:19.38%;width:65.31%;height:auto;}
#card_s2 .s2_banner2 {top:64.65%;left:15.16%;width:72.19%;height:auto;}
#card_s2 .s2_banner1 {top:46.84%;left:18.44%;width:65.78%;height:auto;}
#card_s2 .s2_p1 {top:36.93%;left:7.5%;width:86.72%;height:auto;}
#card_s2 .s2_tab_bg {top:30.49%;left:7.66%;width:87.03%;height:auto;}
#card_s2 .s2_tab_img {top:27.9%;left:85.78%;width:10%;height:auto;}
#card_s2 .s2_tab_txt {top:31.57%;left:12.66%;width:73.12%;height:auto;}
#card_s2 .s2_h3 {top:23.42%;left:16.41%;width:67.81%;height:auto;}
#card_s2 .s2_h2 {top:17.87%;left:16.09%;width:68.12%;height:auto;}
#card_s2 .s2_h1 {top:3.35%;left:14.69%;width:74.69%;height:auto;}

/*--- card_s3 ---*/
#card_s3 {position:relative;margin:auto;width:100%;max-width:640px;overflow:hidden}
#card_s3 .s3_bg {top:0%;left:0%;width:100%;height:auto;}
#card_s3 .s3_arrow {top:90.7%;left:34.38%;width:12.5%;height:auto;}
#card_s3 .s3_watch {top:90.7%;left:2.5%;width:29.38%;height:auto;}
#card_s3 .s3_bar {top:87.21%;left:52.34%;width:43.28%;height:auto;}
#card_s3 .s3_line {top:97.16%;left:31.56%;width:63.91%;height:auto;}
#card_s3 .s3_vdo {top:27.78%;left:1%;width:97.81%;height:auto;}
#card_s3 .s3_play {top:50%;left:40%;width:18.12%;height:auto;}
#card_s3 .s3_eyes {top:76.23%;left:77.81%;width:18.75%;height:auto;}
#card_s3 .s3_heart {top:26.61%;left:5.16%;width:15.31%;height:auto;}
#card_s3 .s3_loading_ {top:73.64%;left:5.31%;width:36.09%;height:auto;}
#card_s3 .s3_h1 {top:6.07%;left:6.88%;width:86.72%;height:auto;}

/*--- card_s4 ---*/
#card_s4 {position:relative;margin:auto;width:100%;max-width:640px;/* overflow:hidden; */}
#card_s4 .s4_bg {top:0%;left:0%;width:100%;height:auto;}
#card_s4 .s4_bg2 {top:0%;left:-10%;width:120%;height:auto;}
#card_s4 .s4_banner1_bg {top:21.05%;left:18.91%;width:72.19%;height:auto;}
#card_s4 .s4_banner1_txt {top:31.69%;left:45.16%;width:36.88%;height:auto;}
#card_s4 .s4_banner1_img {top:26.22%;left:23.28%;width:25.94%;height:auto;}
#card_s4 .s4_banner2_bg {top:45.82%;left:9.53%;width:72.34%;height:auto;}
#card_s4 .s4_banner2_txt {top:54.56%;left:18.44%;width:31.88%;height:auto;}
#card_s4 .s4_banner2_img {top:49.7%;left:47.34%;width:30.47%;height:auto;}
#card_s4 .s4_banner3_bg {top:70.21%;left:12.34%;width:76.88%;height:auto;}
#card_s4 .s4_banner3_txt {top:80.47%;left:49.22%;width:34.84%;height:auto;}
#card_s4 .s4_banner3_img {top:72.42%;left:23.91%;width:31.72%;height:auto;}
#card_s4 .s4_h2 {top:15.12%;left:15.47%;width:68.75%;height:auto;}
#card_s4 .s4_h1 {top:3.34%;left:15%;width:66.56%;height:auto;}

/*--- card_s5 ---*/
#card_s5 {position:relative;margin:auto;width:100%;max-width:640px;overflow:hidden}
#card_s5 .s5_bg {top:0%;left:-35.94%;width:190.78%;height:auto;}
#card_s5 .s5_top {top:0%;left:0%;width:100%;height:auto;}
#card_s5 .s5_banner1_img {top:36.93%;left:9.22%;width:38.75%;height:auto;}
#card_s5 .s5_banner1_txt {top:51.95%;left:8.91%;width:38.12%;height:auto;}
#card_s5 .s5_banner2_img {top:35.55%;left:40.16%;width:49.84%;height:auto;}
#card_s5 .s5_banner2_txt {top:49.2%;left:52.5%;width:35.78%;height:auto;}
#card_s5 .s5_banner3_img {top:63.65%;left:13.59%;width:32.34%;height:auto;}
#card_s5 .s5_banner3_txt {top:79.24%;left:10.31%;width:34.84%;height:auto;}
#card_s5 .s5_banner4_img {top:62.5%;left:54.38%;width:36.56%;height:auto;}
#card_s5 .s5_banner4_txt {top:79.59%;left:57.19%;width:28.12%;height:auto;}
#card_s5 .s5_h2 {top:22.94%;left:28.91%;width:42.5%;height:auto;}
#card_s5 .s5_h1 {top:8.49%;left:21.41%;width:56.09%;height:auto;}
@media(min-width:769px){
.section-2 {background-image: url(../images/ph2/card_bg_pc.jpg);background-size: 115% auto;}
	/*--- card_s2 ---*/
  #card_s2 {position:relative;margin:auto;width:100%;max-width:1000px;overflow:hidden}
  #card_s2 .s2_bg {top:-170.17%;left:-106.9%;width:308.7%;height:auto;}
  #card_s2 .s2_banner3 {top:69.14%;left:67.8%;width:28.7%;height:auto;}
	#card_s2 .s2_banner2 {top:70.43%;left:34.2%;width:31.6%;height:auto;}
	#card_s2 .s2_banner1 {top:69.86%;left:3.6%;width:28.9%;height:auto;}
	#card_s2 .s2_p1 {top:54.57%;left:12%;width:72.5%;height:auto;}
	#card_s2 .s2_tab_bg {top:42.86%;left:24.9%;width:48.5%;height:auto;}
	#card_s2 .s2_tab_img {top:41%;left:69.7%;width:5.9%;height:auto;}
	#card_s2 .s2_tab_txt {top:45%;left:27.8%;width:41.5%;height:auto;}

  #card_s2 .s2_h3 {top:34.71%;left:11.9%;width:71%;height:auto;}
  #card_s2 .s2_h2 {top:27.29%;left:30.9%;width:38.5%;height:auto;}
	#card_s2 .s2_h1 {top:6.43%;left:23%;width:52.6%;height:auto;}
  /*--- card_s3 ---*/
  #card_s3 {position:relative;margin:auto;width:100%;max-width:1000px;overflow:hidden}
  #card_s3 .s3_bg {top:-238.58%;left:-106.9%;width:308.7%;height:auto;}
  #card_s3 .s3_arrow {top:94.09%;left:27.5%;width:8%;height:auto;}
  #card_s3 .s3_watch {top:94.09%;left:7.1%;width:18.8%;height:auto;}
  #card_s3 .s3_bar {top:91.8%;left:64.8%;width:27.7%;height:auto;}
  #card_s3 .s3_line {top:90.73%;left:51.7%;width:45.9%;height:auto;}
  #card_s3 .s3_vdo {top:21.24%;left:5.5%;width:89%;height:auto;}
  #card_s3 .s3_play {top:47.85%;left:42.4%;width:15.2%;height:auto;}
  #card_s3 .s3_eyes {top:79.7%;left:83.9%;width:12%;height:auto;}
  #card_s3 .s3_heart {top:19.76%;left:3.6%;width:9.8%;height:auto;}
  #card_s3 .s3_loading_ {top:72.98%;left:9.8%;width:27.4%;height:auto;}
  #card_s3 .s3_h1 {top:3.78%;left:22%;width:57.8%;height:auto;}
  /*--- card_s4 ---*/
  #card_s4 {position:relative;margin:auto;width:100%;max-width:1000px;/* overflow:hidden; */}
  #card_s4 .s4_bg {top:0%;left:-18.3%;width:136.6%;height:auto;}
  #card_s4 .s4_bg2 {top:-5.75%;left:-29.5%;width:149.4%;height:auto;}
  #card_s4 .s4_banner1_bg {top:41.56%;left:1%;width:32.2%;height:auto;}
  #card_s4 .s4_banner1_txt {top:59.55%;left:12.7%;width:16.4%;height:auto;}
  #card_s4 .s4_banner1_img {top:50.28%;left:3%;width:11.5%;height:auto;}
  #card_s4 .s4_banner2_bg {top:49.35%;left:33%;width:32.2%;height:auto;}
  #card_s4 .s4_banner2_txt {top:64.19%;left:37%;width:14.1%;height:auto;}
  #card_s4 .s4_banner2_img {top:56.03%;left:49.8%;width:13.6%;height:auto;}
  #card_s4 .s4_banner3_bg {top:41.19%;left:65%;width:34.2%;height:auto;}
  #card_s4 .s4_banner3_txt {top:58.63%;left:81.4%;width:15.5%;height:auto;}
  #card_s4 .s4_banner3_img {top:44.9%;left:70.1%;width:14.2%;height:auto;}
  #card_s4 .s4_h2 {top:28.76%;left:32.2%;width:37.3%;height:auto;}
  #card_s4 .s4_h1 {top:4.45%;left:31.9%;width:36.2%;height:auto;}
  /*--- card_s5 ---*/
  #card_s5 {position:relative;margin:auto;width:100%;max-width:1000px;overflow:hidden}
  #card_s5 .s5_bg {top:-546.69%;left:-106.9%;width:308.7%;height:auto;}
  #card_s5 .s5_banner1_img {top:44.36%;left:1.2%;width:24.8%;height:auto;}
  #card_s5 .s5_banner1_txt {top:68.52%;left:5.5%;width:14.8%;height:auto;}
  #card_s5 .s5_banner2_img {top:53.49%;left:15.2%;width:31.9%;height:auto;}
  #card_s5 .s5_banner2_txt {top:74.78%;left:23.1%;width:22.9%;height:auto;}
  #card_s5 .s5_banner3_img {top:49.19%;left:52%;width:20.7%;height:auto;}
  #card_s5 .s5_banner3_txt {top:73.52%;left:49.9%;width:22.3%;height:auto;}
  #card_s5 .s5_banner4_img {top:41.32%;left:77.2%;width:23.4%;height:auto;}
  #card_s5 .s5_banner4_txt {top:67.98%;left:79%;width:18%;height:auto;}
  #card_s5 .s5_h2 {top:32.38%;left:38.9%;width:26.5%;height:auto;}
  #card_s5 .s5_h1 {top:10.38%;left:34.2%;width:35%;height:auto;}
}
@media(min-width:1025px){
/* .section-2 {
    background-image: url(../images/ph2/card_bg_pc.jpg);
    background-size: 100% auto;
} */
}
@media(min-width:1367px){
.section-2 {
    background-image: url(../images/ph2/card_bg_pc1367.jpg);
    background-size: auto auto;}
}
.s6_logo, .s5_h1, .s4_h1, .s3_h1, .s2_h1 {animation: wiggle 1.5s infinite;}
.s6_stp1_img1{ animation: fadeInOut 2s infinite; }
.s6_stp1_img2{ animation: fadeInOut 2.1s infinite; }
.s6_stp2_img1{ animation: fadeInOut 2s infinite; }
.s6_stp3_img1{ animation: shakeX 1s infinite; }
.s6_stp3_img2{ animation: fadeInOut 1.5s infinite; }
.s6_stp4_img1{ animation: float 2s infinite; }
.s6_stp5_img1{ animation: fadeInOut 1.2s infinite; }
.s6_stp5_img2{ animation: float 2s infinite ease-in-out; }
.s2_tab_img { animation: moveDownUp 1.2s infinite; }
.s2_banner1{animation: float 2s infinite;}
.s2_banner2{animation: float 2.1s infinite;}
.s2_banner3{animation: float 2.2s infinite;}
.s3_heart{ animation: shakeX 1s infinite; }
.s3_eyes{ animation: shakeX 1.2s infinite; }
.s4_banner1_img{animation: wiggle 1s infinite;}
.s4_banner2_img{animation: wiggle 1.1s infinite;}
.s4_banner3_img{animation: wiggle 1.2s infinite;}
.s5_banner1_img{animation: float10 3s infinite;}
.s5_banner2_img{animation: float10 3.1s infinite;}
.s5_banner3_img{animation: float10 3.2s infinite;}
.s5_banner4_img{animation: float10 3.3s infinite;}
/* .s6_btn_click_bg, .s6_btn_upload_bg{ animation: moveDownUp 2.5s infinite; } */
#card_s6 .s6_btn_download_bg.ggchrome {
    top: 69.21%;
}
@media(min-width:1025px){
  #card_s6 .s6_btn_download_bg.ggchrome {
      top: 72.21%;
  }
}
@keyframes float10 { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }

@keyframes moveDownUp { 0%,100%{transform:translateY(0)}50%{transform:translateY(10px)} }
@keyframes blink { 50%{opacity:0} }
@keyframes fadeInOut { 0%,100%{opacity:0}50%{opacity:1} }
@keyframes wiggle { 0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)} }
@keyframes popIn { 0%{transform:scale(0)}100%{transform:scale(1)} }
@keyframes shakeX { 0%,100%{transform:translateX(0)}50%{transform:translateX(10px)} }
@keyframes bounceFade { 0%{opacity:0;transform:translateY(-30px)}50%{opacity:1;transform:translateY(10px)}100%{transform:translateY(0)} }
.cropit-stop{width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 20; position: absolute; display: none;}
@media (hover: none) and (pointer: coarse) {
  .xxx:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}
/* start layout */
/* *:lang(en) ใช้ในกรณีหน้า en */