#page { background-color: #fff;}
.icw, .list-item, .icw-col { font-size: 18px;}
.icw .btn, .localnav { font-size: 16px;}

.nowrap { white-space: nowrap;}
.mfp-close-btn-in .mfp-close { position: fixed;}

.section .sc-inner { padding: 70px 0;}
.section .sc-headline:last-child { margin-bottom: 0;}
.section .sc-headline .sc-heading:last-child { margin-bottom: 0;}
.section .note-box { margin-bottom: 0;}
.section-details .sc-inner { padding: 40px 0;}
.section-items .sc-headline { margin-bottom: 40px;}

.list-item { padding-left: 0; padding-right: 0;}
.list-item-lg .image { height: 200px; line-height: 200px;}

#hero { background-color: #f2f2f2;}
#hero .master-slider img { max-width: none;}
#hero .master-slider .ms-bullets { z-index: 10; bottom: 30px;}
#hero .master-slider .ms-slide-info { display: none; background: #fff;}
#hero .ms-info-wrap { padding-top: 0}
#hero .ms-info-box { padding-top: 20px; text-align: center;}
#hero .ms-info-box img { width: auto;}
#hero .ms-info-box img.logo-promptpay { width: 180px;}
#hero .ms-info-box .action-bottom { margin: 20px auto 15px;}
#hero .ms-info-box .btn-block { width: 290px; max-width: 100%; margin: 0 auto;}
#hero .info-bar { position: relative; width: 100%; min-height: 43px; padding: 10px 40px 10px 15px; background-color: #fafafa; border-top: 1px solid #eee; border-bottom: 1px solid #eee; color: #00a950;}
#hero .info-bar .tools { position: absolute; right: 15px; top: 0; line-height: 44px; z-index: 1;}
.info-bar .tools .tool { display: inline-block; vertical-align: top;}
.info-bar .tools .tool:not(:first-child) { margin-left: 10px;}

.step-style .step-col {
    padding-top: 30px;
    padding-bottom: 30px;
}
.step-style .img + .txt,
.step-style .txt + .img {
    margin-top: 20px;
}
.step-style .no {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-family: 'DBThaiTextXBd';
    font-size: 40px;
    text-align: center;
    background-color: #00a950;
    color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-bottom: 20px;
}
.step-style .img>img {
    display: inline-block;
    line-height: 1;
}

.tb-row {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.tb-col {
    display: table-cell;
    vertical-align: middle;
    padding: 45px 0;
}
.tb-col.image-box img {
    display: block;
    margin: 0 auto;
}

.padding-0 { padding: 0 !important;}
.padding-top-0 { padding-top: 0 !important;}
.padding-bottom-0 { padding-bottom: 0 !important;}

@-webkit-keyframes fadeInUpSmall {
    from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0);}
    to { opacity: 1; -webkit-transform: none; transform: none;}
}
@keyframes fadeInUpSmall {
    from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0);}
    to { opacity: 1; -webkit-transform: none; transform: none;}
}
.fadeInUpSmall { -webkit-animation-name: fadeInUpSmall; animation-name: fadeInUpSmall;}

@-webkit-keyframes fadeInLeftSmall {
    from { opacity: 0; -webkit-transform: translate3d(-12px, 0, 0); transform: translate3d(-12px, 0, 0);}
    to { opacity: 1; -webkit-transform: none; transform: none;}
}
@keyframes fadeInLeftSmall {
    from { opacity: 0; -webkit-transform: translate3d(-12px, 0, 0); transform: translate3d(-12px, 0, 0);}
    to { opacity: 1; -webkit-transform: none; transform: none;}
}
.fadeInLeftSmall { -webkit-animation-name: fadeInLeftSmall; animation-name: fadeInLeftSmall;}

@-webkit-keyframes zoomInSmall {
    from { opacity: 0; -webkit-transform: scale3d(.92, .92, .92); transform: scale3d(.92, .92, .92);}
    50% { opacity: 1;}
}
@keyframes zoomInSmall {
    from { opacity: 0; -webkit-transform: scale3d(.92, .92, .92); transform: scale3d(.92, .92, .92);}
    50% { opacity: 1;}
}
.zoomInSmall { -webkit-animation-name: zoomInSmall; animation-name: zoomInSmall;}

@-webkit-keyframes zoomInMedium {
    from { opacity: 0; -webkit-transform: scale3d(.52, .52, .52); transform: scale3d(.52, .52, .52);}
    50% { opacity: 1;}
}
@keyframes zoomInMedium {
    from { opacity: 0; -webkit-transform: scale3d(.52, .52, .52); transform: scale3d(.52, .52, .52);}
    50% { opacity: 1;}
}
.zoomInMedium { -webkit-animation-name: zoomInMedium; animation-name: zoomInMedium;}

@-webkit-keyframes slideInLeftSmall {
    from { -webkit-transform: translate3d(-12%, 0, 0); transform: translate3d(-12%, 0, 0); visibility: visible; opacity: 0;}
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}
}

@keyframes slideInLeftSmall {
    from { -webkit-transform: translate3d(-12%, 0, 0); transform: translate3d(-12%, 0, 0); visibility: visible; opacity: 0;}
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}
}
.slideInLeftSmall { -webkit-animation-name: slideInLeftSmall; animation-name: slideInLeftSmall;}

/* KBank x PTT */
.heading-logo { 
    display: inline-block; 
    height: 0.431em;
}
.linebreak.fix-width { 
    width: 36%; 
    max-width: 550px; 
    margin: 0 auto;
}

.section.section-small .sc-inner {
    padding: 45px 0;
}
.section.section-small .sc-heading {
    margin-bottom: 10px;
}

.section.section-sitestyle {
    background: #283c92;
    color: #fff;
}
.section.section-sitestyle .content-box {
    position: relative;
    z-index: 1;
}
.section.section-sitestyle .sc-heading,
.section.section-sitestyle .more {
    color: #fff !important;
}

.prize-group {
    font-size: 0;
    margin-top: 50px;
}
.prize-group .prize {
    display: inline-block;
    vertical-align: top;
}
.prize-group .prize-01 {
    width: 49.53%;
    position: relative;
    z-index: 1;
}
.prize-group .prize-02 {
    width: 42.5%;
}

.logo-lists {
    display: inline-block;
    font-size: 0;
    text-align: center;
    margin: 80px auto 40px;
    padding: 10px 30px;
    border: 6px solid #2862a9;
    -webkit-border-radius: 66px;
    -moz-border-radius: 66px;
    border-radius: 66px;
}
.logo-list {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 15px;
}
.logo-list img {
    width: auto;
    max-height: 70px;
}

.right-group {
    position: relative;
}
.right-group .item {
    outline: 0;
}
.right-heading {
    width: 670px;
    max-width: 90%;
    margin: 0 auto;
    padding: 65px 0 35px;
}
.right-bg {
    position: absolute;
    top: 0; 
    left: 0; right: 0;
    pointer-events: none;
    user-select: none;
}
.right-heading,
.right-bottom {
    position: relative;
    z-index: 1;
}
.right-content .item > img {
    display: block;
    width: 196px;
    margin: 0 auto 30px;
}

.right-content .slick-arrow {
    width: 60px;
    height: 90px;
    line-height: 90px;
    font-size: 0;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,0.6);
    border-radius: 4px;
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translate(0,-50%);
    transition: 300ms ease-in-out;
}
.right-content .slick-prev { 
    left: 0;
}
.right-content .slick-next { 
    right: 0;
}
.right-content .slick-arrow:before {
    font-family: 'icokbank';
    font-size: 24px;
    color: inherit;
}
.right-content .slick-prev:before { 
    content: "\e908";
}
.right-content .slick-next:before { 
    content: "\e909";
}
.no-touch .right-content .slick-arrow:hover {
    background-color: #333;
}

.mascot {
    position: absolute;
    pointer-events: none;
    user-select: none;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.mascot-ptt {
    width: 19%;
    left: 0; 
}
.mascot-kbank {
    width: 16%;
    right: 0;
}

.emoji-group {
    position: relative;
}
.emoji {
    position: absolute;
    pointer-events: none;
    user-select: none;
}
.emoji-01 { width: 2.5%; left: 25%; top: 7%;}
.emoji-01>img { 
    -webkit-transform: rotate(-24deg);
    -moz-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
}
.emoji-02 { width: 2.5%; left: 20%; top: 45%;}
.emoji-02>img { 
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.emoji-03 { width: 1.2%; left: 26%; bottom: 20%;}
.emoji-03>img { 
    -webkit-transform: rotate(-18deg);
    -moz-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
}
.emoji-04 { width: 1.5%; right: 26%; top: 10%;}
.emoji-04>img { 
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}
.emoji-05 { width: 3%; right: 20%; top: 25%;}
.emoji-05>img { 
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
}
.emoji-06 { width: 2%; right: 26%; bottom: 20%;}
.emoji-06>img { 
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
}


@-webkit-keyframes prizeKeyframes {
    0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1);}
    25% { opacity: 0.8; -webkit-transform: rotate(-5deg) scale(1.1); transform: rotate(-5deg) scale(1.1);}
    75% { -webkit-transform: rotate(5deg) scale(1.1); transform: rotate(5deg) scale(1.1);}
    100% { opacity: 1; -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1);}
}
@keyframes prizeKeyframes {
    0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1);}
    25% { opacity: 0.8; -webkit-transform: rotate(-5deg) scale(1.1); transform: rotate(-5deg) scale(1.1);}
    75% { -webkit-transform: rotate(5deg) scale(1.1); transform: rotate(5deg) scale(1.1);}
    100% { opacity: 1; -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1);}
}
.prizeKeyframes { 
    -webkit-animation: prizeKeyframes 400ms linear .2s;
    animation: prizeKeyframes 400ms linear .2s;
}

.headingKeyframes { 
    -webkit-animation: prizeKeyframes 400ms linear .2s 2;
    animation: prizeKeyframes 400ms linear .2s 2;
}

@-webkit-keyframes winkKeyframes {
    0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1);}
    50% { opacity: 0.5; -webkit-transform: scale(1.1); transform: scale(1.1);}
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
@keyframes winkKeyframes {
    0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1);}
    50% { opacity: 0.5; -webkit-transform: scale(1.1); transform: scale(1.1);}
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
.winkKeyframes { 
    -webkit-animation: winkKeyframes 400ms linear .2s 3;
    animation: winkKeyframes 400ms linear .2s 3;
}

@-webkit-keyframes heartKeyframes {
    0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1);}
    50% { opacity: 0.5; -webkit-transform: scale(1.2); transform: scale(1.2);}
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
@keyframes heartKeyframes {
    0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1);}
    50% { opacity: 0.5; -webkit-transform: scale(1.2); transform: scale(1.2);}
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
.heartKeyframes { 
    -webkit-animation: heartKeyframes 400ms linear .2s 4;
    animation: heartKeyframes 400ms linear .2s 4;
}


@media screen and (min-width: 768px) {
    
    .tb-row.rtl {
        direction: rtl;
        unicode-bidi: bidi-override;
        text-align: left;
    }
    .tb-row.rtl .tb-col {
        direction: ltr;
        unicode-bidi: bidi-override;
    }
    
}

@media screen and (max-width: 1199px) {
    
    .logo-list { padding: 5px 10px;}
    .logo-list img { max-height: 50px;}
    
}

@media screen and (max-width: 991px) {
    
    .section .sc-inner { padding: 45px 0;}
    .section-details .sc-inner { padding: 20px 0;}
    
}

@media screen and (max-width: 991px) and (min-width: 768px) {

    .section .note-box { font-size: 12px;}
    
    .list-item .caption h3 + p { font-size: 14px;}
    
}

@media screen and (max-width: 900px) {
    
    .icw, .list-item, .icw .btn, .localnav, .icw-col { font-size: 16px;}
    
}

@media screen and (max-width: 767px) {
    
    .section-items .sc-headline { margin-bottom: 20px;}
    
    .row-items .list-item { border-bottom: 0; padding-bottom: 0;}
    .row-items .col-item:first-child .list-item { padding-top: 0;}

    #hero .master-slider .ms-bullets { bottom: 15px;}
    #hero .master-slider .ms-slide-info { display: block;}
    #hero .master-slider .ms-info-box p { color: #777;}
    
    .tb-row { display: block;}
    .tb-col { display: block; padding: 45px 0 20px;}
    .tb-col.content-box:last-child { padding: 20px 0 45px;}
    
    /* KBank x PTT */    
    .emoji-01 { left: 20%;}
    .emoji-04 { right: 23%;}
    
}

@media screen and (min-width: 641px) {
    
    .right-heading { max-width: 60%;}
    .right-content .item > img { max-width: 60%;}
    
}

@media screen and (max-width: 640px) {

    .prize-group { padding: 0 20px; margin-top: 0;}
    .prize-group .prize { width: 100%;}
    .prize-group .prize img { max-width: 90%;}
    .prize-group .prize-02 { text-align: right;}
    
    .right-heading { padding: 30px 0;}
    .right-content .item { padding: 0 60px;}
    .right-content .item > img { margin-bottom: 10px;}
    .right-content .slick-arrow { width: 35px; height: 55px; line-height: 55px;}
    .right-content .slick-arrow:before { font-size: 18px;}
    .right-content .slick-prev { left: 15px;}
    .right-content .slick-next { right: 15px;}
    
    .logo-lists { 
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        margin-top: 40px;
    }
    .logo-list { width: 25%; padding: 5px;}
    
    .mascot-ptt,
    .mascot-kbank {
        top: auto;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        transform: none;
    }
    .mascot-ptt {
        width: 40%;
        bottom: 15px;
    }
    .mascot-kbank { 
        position: static;
        width: 32%; 
        float: right;
        margin-bottom: -30px;
    }
    
    /* KBank x PTT */    
    .emoji-01 { width: 15px; left: 3%; top: 15px;}
    .emoji-02 { width: 18px; left: 7%; top: 42%;}
    .emoji-03 { width: 20px; left: 40%; bottom: 20%;}
    .emoji-04 { width: 18px; right: 15%; top: 10px;}
    .emoji-05 { display: none;}
    .emoji-06 { width: 18px; right: 8%; top: 40%; bottom: auto;}
    
}