/*========== min ==========*/
@media (min-width:641px) {
    
    /*========== Form ==========*/
    .fields { 
        font-size: 0;
    }
    .fields:after {
        content: "";
        display: table;
        clear: both;
    }
    .field {
        width: 100%;
        display: inline-block;
        vertical-align: top;
    }
    .fields .field.half { 
        width: 50%;
    }
    .fields .field.three {
        width: 33.3333333%;
    }
    
    .form .action .act-row  {
        margin-left: -30px;   
        margin-right: -30px;   
    }
    .form .action .act-col  {
        padding-left: 30px;   
        padding-right: 30px;   
    }
    
}


@media (min-width:768px) {
    
    .visible-mobile { display: none !important;}
    
    .a-sm-left { text-align: left !important;}
    .a-sm-center { text-align: center !important;}
    .a-sm-right { text-align: right !important;}
    
    .container {
        width: 768px;
    }
    
    /*========== Main ==========*/
    /* Sections */
    .block-2columns {
        display: table;
        table-layout: fixed;
    }
    .block-2columns.rtl {
        direction: rtl;
        unicode-bidi: bidi-override;
    }
    .block-2columns .block-column {
        display: table-cell;
        vertical-align: middle;
        width: 50%;
        position: relative;
        direction: ltr;
        unicode-bidi: bidi-override;
        margin-top: 0;
    }
    .block-2columns .block-column.iframe {
        width: 65.4385965%;
    }
    .block-2columns:not(.rtl) .block-column:first-child,
    .block-2columns.rtl .block-column:last-child {
        padding-right: 10px;
    }
    .block-2columns:not(.rtl) .block-column:last-child,
    .block-2columns.rtl .block-column:first-child {
        padding-left: 10px;
    }
    .block-2columns .block-column:not(:first-child) {
        margin-top: 0;
    }

    .sc-block-2columns.rtl {
        direction: rtl;
        unicode-bidi: bidi-override;
    }
    .sc-block-2columns .sc-col {
        position: relative;
        direction: ltr;
        unicode-bidi: bidi-override;
    }
    .sc-block-2columns .sc-col:not(:first-child) {
        margin-top: 0;
    }
    .sc-block-2columns .sc-inset {
        width: 46%;
        padding: 0;
    }
    .sc-block-2columns .sc-content {
        position: absolute;
        z-index: 1;
        left: 0; right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .sc-block-2columns .meta {
        width: 50%;
        margin-left: auto;
    }
    .sc-block-2columns.rtl .meta {
        margin-left: 0;
    }
    .sc-block-2columns.skew:before {
        content: "";
        position: absolute;
        display: block;
        width: 75%;
        height: 100%;
        top: 40px;
        left: 0;
        z-index: -1;
        background: #f7f7f7;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transform: skewX(-15deg);
        -ms-transform: skewX(-15deg);
        transform: skewX(-15deg);
    }
    .sc-block-2columns.skew.rtl:before {
        left: auto;
        right: 0;
        -webkit-transform: skewX(15deg);
        -ms-transform: skewX(15deg);
        transform: skewX(15deg);
    }
    
    /* Content Group */
    .content-section .sc-inner {
        padding: 30px 0;
    }
    
    /* Profile */
    /*Profile No Touchevents and Min Width 768px */
    .no-touchevents .profile {
        cursor: default;
    }
    .no-touchevents .profile-popover {
        width: calc(200% + 75px);
        max-width: calc(100vw + 20px);
        height: calc(100% - 45px);
        padding-left: calc(100% + 30px);
        padding-right: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
        position: absolute;
        top: 0; left: 0;
        margin-left: -10px;
        opacity: 0;
        visibility: hidden;
    }
    .is-safari .profile-popover {
        padding-left: calc(100% + 60px);
    }
    .no-touchevents .profile-group:hover .item:hover {
        position: relative;
        z-index: 1;
    }
    .no-touchevents .profile:hover .profile-popover {
        opacity: 1;
        visibility: visible;
        -webkit-transition: 300ms ease-in-out .1s;
        -o-transition: 300ms ease-in-out .1s;
        transition: 300ms ease-in-out .1s;
    }
    .no-touchevents .profile:hover .profile-image .default {
        border-color: #00a66a;
        -webkit-transition-delay: .1s;
        -o-transition-delay: .1s;
        transition-delay: .1s;
    }
    .no-touchevents .profile:hover .profile-image .default > img {
        opacity: 0;
    }
    .no-touchevents .profile:hover .profile-image .hover {
        top: auto;
        bottom: 3px;
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transition-property: opacity, visibility, -webkit-transform;
        transition-property: opacity, visibility, -webkit-transform;
        -o-transition-property: opacity, visibility, transform;
        transition-property: opacity, visibility, transform;
        transition-property: opacity, visibility, transform, -webkit-transform;
        -webkit-transition-duration: 150ms, 600ms, 600ms;
        -o-transition-duration: 150ms, 600ms, 600ms;
        transition-duration: 150ms, 600ms, 600ms;
        -webkit-transition-timing-function: linear;
        -o-transition-timing-function: linear;
        transition-timing-function: linear;
        -webkit-transition-delay: .1s, .1s, .2s;
        -o-transition-delay: .1s, .1s, .2s;
        transition-delay: .1s, .1s, .2s;
    }
    
}


@media (min-width:992px) {
    
    .visible-device { display: none !important;}
    
    .a-md-left { text-align: left !important;}
    .a-md-center { text-align: center !important;}
    .a-md-right { text-align: right !important;}
    
    .container {
        width: 1040px;
    }
    
    /*========== Form ==========*/
    .fields,
    .choice-group.row {
        margin-left: -30px;
        margin-right: -30px;
    }
    .field,
    .choice-group.row .col {
        padding-left: 30px;
        padding-right: 30px;
    }
    .additional-box {
        padding-left: 60px;
        padding-right: 60px;
    }
    
    /*========== Main ==========*/
    /* Profile */
    /*Profile No Touchevents and Min Width 768px */
    .profile-group .item:nth-child(4n) .profile-popover,
    .profile-group .item:nth-child(4n-1) .profile-popover {
        left: auto;
        margin-left: 0;
        right: 0;
        margin-right: -10px;
        padding-right: calc(100% + 30px);
        padding-left: 50px;
    }
    .is-safari .profile-group .item:nth-child(4n) .profile-popover,
    .is-safari .profile-group .item:nth-child(4n-1) .profile-popover {
        padding-right: calc(100% + 60px);
    }
    
}


@media (min-width:1025px) {

    /*========== Header ==========*/
    .header-bar .right .follow {
        display: block;
    }
    .header-bar .panel-ctrl,
    .header-bar .panel-footer,
    .menu-group .follow {
        display: none;
    }
    .header-bar .panel {
        text-align: center;
    }
    
    .panel-enabled .overlay {
        display: none !important;
    }
    
}


@media (min-width:1200px) {
    
    .container {
        width: 1270px;
    }
    .container.md {
        width: 1040px;
    }
    .container.fluid {
        width: 100%;
    }
    
    /*========== Header ==========*/
    html:not(.page-scrolling) .header-transparent-page .header-bar .inner {
        height: 90px;
        line-height: 89px;
    }
    
}


/*========== min and max ==========*/
@media (min-width:768px) and (max-width:991px) {
    
    /*========== Main ==========*/
    /* Section */
    .sc-block {
        margin-left: -30px;
        margin-right: -30px;
    }
    .sc-block > .sc-container.container {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    /* Profile */
    .profile-group.row {
        margin-left: 0;
        margin-right: 0;
    }
    /*Profile No Touchevents and Min Width 768px */
    .no-touchevents .profile-popover {
        max-width: calc(200% + 20px);
    }
    .profile-group .item:nth-child(even) .profile-popover {
        left: auto;
        margin-left: 0;
        right: 0;
        margin-right: -10px;
        padding-right: calc(100% + 30px);
        padding-left: 50px;
    }
    .is-safari .profile-group .item:nth-child(even) .profile-popover {
        padding-right: calc(100% + 60px);
    }
    
}


/*========== max ==========*/
@media (max-width:1280px) {
    
    /*========== Header ==========*/
    .menu-group .menu {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /*========== Main ==========*/
    /* Content Group */
    .content-nav .control a:not(:last-child) {
        margin-right: 30px;
    }
    
}


@media (max-width:1199px) {
    
    .hidden-desktop-small { display: none !important;}
    
    /*========== Header ==========*/
    .header-bar .logo:not(:first-child) {
        padding-left: 15px;
        margin-left: 15px;
    }
    
    .menu-group .menu {
        font-size: 26px;
    }
    
    /*========== Main ==========*/
    /* Content Group */
    .content-nav .control a {
        font-size: 26px;
        line-height: 1;
    }

}


@media (max-width:1024px) { 
    
    /*========== Header ==========*/
    .hamburger {
        position: relative; 
        display: inline-block;
        width: 28px;
        height: 17px;
        margin-right: 0;
    }
    .hamburger .bars, 
    .hamburger .bars:before, 
    .hamburger .bars:after {
        display: block; 
        width: 100%;
        height: 3px;
        background-color: #888;
        position: absolute;
        top: 0; left: 0;
        -webkit-transition-property: transform, opacity;
        -o-transition-property: transform, opacity;
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        transition-property: transform, opacity;
        transition-property: transform, opacity, -webkit-transform;
        -webkit-transition-duration: 500ms;
        -o-transition-duration: 500ms;
        transition-duration: 500ms;
        -webkit-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out; 
    }
    .hamburger:not(.active) .bars {
        background-color: #19925d;
    }
    .hamburger .bars:before, 
    .hamburger .bars:after {
        content: "";
    }
    .hamburger .bars:before {
        top: 7px;
    }
    .hamburger .bars:after {
        top: 14px; 
    }
    .hamburger.active {
        margin-right: -4px;
    }
    .hamburger.active .bars {
        -webkit-transform: translate3d(0, 7px, 0) rotate(45deg);
        transform: translate3d(0, 7px, 0) rotate(45deg); 
    }
    .hamburger.active .bars:before {
        -webkit-transform: rotate(-45deg) translate3d(-5.71429px,-6px,0);
        transform: rotate(-45deg) translate3d(-5.71429px,-6px,0);
        -webkit-transition-duration: 0ms;
        -o-transition-duration: 0ms;
        transition-duration: 0ms;
        opacity: 0; 
    }
    .hamburger.active .bars:after {
        -webkit-transform: translate3d(0, -14px, 0) rotate(-90deg);
        transform: translate3d(0, -14px, 0) rotate(-90deg); 
    }
    
    .panel-enabled {
        overflow: hidden;
    }
    .panel-enabled #overlay {
        background: rgba(245,245,245,1);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(100%, rgba(219,219,219,1)));
        background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(219,219,219,1) 100%);
        background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(219,219,219,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(245,245,245,1)), to(rgba(219,219,219,1)));
        background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(219,219,219,1) 100%);
    }
    .panel-enabled .header-bar .inner {
        background-color: #f5f5f5 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
    
    .panel {
        display: block;
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 98;
        left: 0;
        right: -100%;
        top: 0;
        opacity: 0;
        visibility: hidden;
        -webkit-transition-property: right;
        -o-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 600ms, 200ms;
        -o-transition-duration: 600ms, 200ms;
        transition-duration: 600ms, 200ms;
        -webkit-transition-delay: 1s, 0s;
        -o-transition-delay: 1s, 0s;
        transition-delay: 1s, 0s;
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .panel.active {
        right: 0;
        opacity: 1;
        visibility: visible;
        -webkit-transition-duration: 600ms;
        -o-transition-duration: 600ms;
        transition-duration: 600ms;
        -webkit-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }
    
    .panel-wrap {
        padding-top: 80px;
        padding-right: 25px;
        margin-right: -25px;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .panel-body {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
        padding: 50px 0;
    }
    
    .menu-group {
        display: table-cell;
        vertical-align: top;
        width: 100%;
        text-align: left;
        line-height: 1;
    }
    .menu-group .item {
        display: block;
        -webkit-transform: scale(0.9) translateX(20%);
        -ms-transform: scale(0.9) translateX(20%);
        transform: scale(0.9) translateX(20%);
    }
    .menu-group .item:not(:last-child) {
        margin-bottom: 30px;
    }
    .menu-group .item:nth-child(1) {
        -webkit-transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }
    .menu-group .item:nth-child(2) {
        -webkit-transition-delay: 0.15s;
        -o-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }
    .menu-group .item:nth-child(3) {
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }
    .menu-group .item:nth-child(4) {
        -webkit-transition-delay: 0.25s;
        -o-transition-delay: 0.25s;
        transition-delay: 0.25s;
    }
    .menu-group .item:nth-child(5) {
        -webkit-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }
    .menu-group.active .item {
        -webkit-transform: scale(1) translateX(0);
        -ms-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0);
        -webkit-transition: -webkit-transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: -webkit-transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
        -o-transition: transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    
    .menu-group .menu {
        padding: 0 40px;
        font-size: 40px;
        line-height: 1;
    }
    .menu-group .menu:after {
        width: 0px;
        height: 2px;
        left: 0;
        top: 50%;
        -webkit-transition-property: width;
        -o-transition-property: width;
        transition-property: width;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .menu-group .menu.active:after, 
    .no-touchevents .menu-group .menu:hover:after {
        width: 25px;
        height: 2px;
    }
    
    .menu-group .follow {
        padding: 10px 40px 0;
    }
    .menu-group .follow a:not(:last-child) {
        margin-right: 25px;
    }
    .menu-group .follow .ic {
        font-size: 40px;
    }
    
    /*========== Footer ==========*/
    .footer .legal {
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
    }
    .footer .legal .col {
        display: block;
        text-align: center;
    }
    .footer .legal .col.follow {
        padding: 0;
    }
    .footer .copyright {
        font-size: 18px;
    }
    .footer .follow {
        position: absolute;
        right: 20px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .footer .follow .ic {
        font-size: 30px;
    }
    .footer .brand img {
        width: 48px;
    } 
    
}


@media (max-width:991px) {
    
    .hidden-device { display: none !important;}
    
    .a-left-device { text-align: left !important;}
    .a-right-device { text-align: right !important;}
    .a-center-device { text-align: center !important;}
    
    .padding-top-0-device { padding-top: 0 !important;}
    .padding-bottom-0-device { padding-bottom: 0 !important;}
    
    .margin-top-0-device { margin-top: 0 !important;}
    .margin-bottom-0-device { margin-bottom: 0 !important;}
  
    /*========== Text Style ==========*/
    body, .size-body,
    .fields .field,
    .choice .choice-label,
    .action .act-col {
        font-size: 24px;
    }
    h1, .size-h1 {
        font-size: 55px;
    }
    h2, .size-h2 {
        font-size: 45px;
    }
    h3, .size-h3 {
        font-size: 35px;
    }
    h4, .size-h4 {
        font-size: 30px;
    }
    h5, .size-h5,
    .profile .meta .heading,
    .calendar .meta .heading {
        font-size: 28px;
        line-height: 1;
    }
    h6, .size-h6,
    .input .label,
    .content-section .meta .desc {
        font-size: 26px;
        line-height: 1;
    }
    
    /*========== Actions ==========*/
    .btn.fix-width { 
        min-width: 130px;
    }
    
    .arrow-scroll-down {
        display: none;
    }
    
    /*========== Main ==========*/
    /* Sections */
    .heading-line {
        padding: 0 20px;
    }
    
    .sc-heading.box {
        margin: 0 auto;
        padding: 50px;
    }
    
    /* Content Group */
    .content-section .meta .action {
        margin-top: 20px;
    }
    .content-section .meta .link {
        font-size: 22px;
    }
    .content-section .meta .link .ic {
        font-size: 30px;
        line-height: 26px;
    }
    .no-touchevents .content-section .meta .link:hover .ic {
        font-size: 28px;
    }
    .content-section .meta .link-icon {
        padding-left: 40px;
    }
    
    /* Calendar */
    .calendar .col:not(:first-child) {
        padding-left: 20px;
    }
    .calendar .date .day {
        font-size: 55px;
    }
    .calendar-group.row {
        margin-left: -20px;
        margin-right: -20px;
    }
    .calendar-group.row .item {
        padding: 20px;
    }

}


@media (max-width:767px) {
    
    .hidden-mobile { display: none !important;}
    
    .a-left-mobile { text-align: left !important;}
    .a-right-mobile { text-align: right !important;}
    .a-center-mobile { text-align: center !important;}
    
    .padding-top-0-mobile { padding-top: 0 !important;}
    .padding-bottom-0-mobile { padding-bottom: 0 !important;}
    
    .margin-top-0-mobile { margin-top: 0 !important;}
    .margin-bottom-0-mobile { margin-bottom: 0 !important;}
    
    .container,
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /*========== Text Style ==========*/
    .profile .meta .heading,
    .calendar .meta .heading,
    .content-section .meta .desc {
        font-size: 26px;
        line-height: 1;
    }
    
    /*========== Form ==========*/
    .legend:not(:last-child) {
        margin-bottom: 20px;
    }
    
    /*========== Header ==========*/
    .header-bar .logo-kbank img {
        width: 84px;
    }
    .header-bar .logo-theme img {
        width: 46px;
    }
    
    /*========== Main ==========*/
    /* Sections */
    .sc-inner {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .sc-block {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .sc-heading.box {
        display: block;
        padding-left: 20px;
        padding-right: 20px;
    }
    .sc-headline:not(:last-child) {
        margin-bottom: 30px;
    }
    
    /* Profile */
    .profile-group.row {
        margin-left: 0;
        margin-right: 0;
    }
    .profile-group.row .item {
        padding: 20px 5px;
    }
    /*Profile Touchevents or Max Width 767px */
    .profile-popover {
        display: none;
    }
    .mfp-ready .profile-popover {
        display: block;
    }
    .profile-meta .heading > a {
        color: #00a66a;
        text-decoration: underline;
    }

}


@media (max-width:640px) {
    
    /*========== Main ==========*/
    /* Sections */
    .heading-line {
        display: inline-grid;
    }
    
}


@media (max-width:414px) {
    
    /*========== Main ==========*/
    /* Content Group */
    .content-nav .control a:not(:last-child) {
        margin-right: 20px;
    }
    
    /* Profile */
    .profile-meta .heading .nickname {
        display: block;
    }

    .profile-modal .profile-popover {
        padding-left: 20px;
        padding-right: 20px;
    }
    
}

@media (max-width:375px) {
    
    /*========== Text Style ==========*/
    .profile .meta .heading,
    .calendar .meta .heading,
    .content-section .meta .desc,
    .content-nav .control a {
        font-size: 24px;
    }
    
}