@media (max-width: 767px) {
    .cc-favorite{display:none}  /* 2018.06.25 재헌 임시*/

    .mobile-contents{display:block}
    .pc-contents{display:none}

    .mobile-overflow-hidden {overflow: hidden;}

    .mobile-contents .main-area-1 > div {
        margin-left: 0;
        justify-content: flex-start;
    }
    .mobile-contents .main-text {
        width: 100% !important;
        text-align: center;
    }
    .mobile-contents .main-area-1 .main-text .main-text-2 {
        font-size: 34px;
        margin-bottom: 40px;
    }

    #video-preview-viewer {
        width: 100vw;
        padding: 0 !important;
        margin: 0;
    }
    #video-preview-viewer > iframe {
        height: 56.25vw !important;
    }

    /* 모바일 버전에서는 버튼 애니메이션 삭제 (22.10.04 ks) */
    @media (transform-3d), (-webkit-transform-3d) {
        ani.button-1,
        ani.button-2 {
            opacity: 1;
            animation: unset;
        }
    }

    .mobile-contents .main-browser-container {
        padding: 0px 10px 100px 10px;
        height: auto;
    }
    .mobile-contents .main-browser-text-area,
    .mobile-contents .main-template-text-area {
        width: 100%;
    }
    .mobile-contents .main-template-text-1 {
        font-size: 28px;
    }
    .mobile-contents .main-browser-text-1 {
        font-size: 28px;
    }
    .mobile-contents .main-browser-text-2 {
        padding: 0 10px;
    }
    .mobile-contents .main-template-container {
        /*padding: 100px 0 150px;*/
    }
    .mobile-contents .main-template-slide .main-template-item {
        padding: 10px;
    }
    .mobile-contents .main-template-slide-arrow-left {
        top: 56%;
        left: 7.5%;
    }
    .mobile-contents .main-template-slide-arrow-right {
        top: 56%;
        right: 7.5%;
    }
    .mobile-contents .main-template-overlay {
        bottom: 85px;
        opacity: 1;
        visibility: visible;
    }
    .mobile-contents .main-template-overlay .main-template-overlay-button {
        color: #000;
        border-color: #000;
        font-size: 14px;
    }

    .mobile-contents .main-compare-text-area {
        height: 250px;
    }
    .mobile-contents .main-compare-text-area p:nth-child(1),
    .mobile-contents .main-compare-text-area p:nth-child(2) {
        font-size: 28px;
    }
    .mobile-contents .main-compare-contents-area > div {
        width: 50%;
        height: 300px;
        padding: 30px;
    }
    .mobile-contents .main-compare-contents-area > div > div:nth-child(1) {
        height: 100px;
    }
    .mobile-contents .main-compare-contents-area > div > div:nth-child(1) p {
        font-size: 18px;
    }
    .mobile-contents .main-compare-contents-area > div > div:nth-child(2) p {
        font-size: 13px;
        line-height: 1.5;
    }
    .mobile-contents .main-compare-contents-area > div:before {
        display: none !important;
    }

    .mobile-contents .main-image-container {
        background: url(/img/main/renewal/5box_01_bg.jpg) top center / cover no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 80vh;
        padding: 50px 10px;
        text-align: center;
    }
    .mobile-contents .main-image-text-1 {
        font-size: 28px;
        padding-bottom: 30px;
    }
    .mobile-contents .main-image-text-2 {
        font-size: 18px;
        margin-bottom: 50px;
    }
    .mobile-contents .main-image-container img {
        width: 100%;
    }

    .mobile-contents .main-mobile-container {
        display: flex;
        flex-direction: column;
        min-height: auto;
        padding: 50px 0;
    }
    .mobile-contents .main-mobile-container > div {
        float: none;
        width: 100%;
    }
    .mobile-contents .main-mobile-text-1,
    .mobile-contents .main-mobile-text-2 {
        margin: 0;
        text-align: center;
        width: 100%;
    }
    .mobile-contents .main-mobile-text-1 {
        font-size: 28px;
    }

    .mobile-contents .main-point-container {
        padding: 50px 0;
    }
    .mobile-contents .main-point-item-list {
        width: 100%;
    }
    .mobile-contents .main-point-item {
        float: none;
        width: 100%;
        height: 400px;
        padding: 0;
    }
    .mobile-contents .main-point-item:empty {
        display: none;
    }
    .mobile-contents .main-point-item > div {
        transition-delay: 0ms 0ms !important;
    }
    .mobile-contents .main-point-item-text-1,
    .mobile-contents .main-point-item-text-2 {
        margin: 0;
        text-align: center;
    }
    .mobile-contents .main-point-item-text-1 {
        padding: 20px 0;
    }
    .mobile-contents .main-point-item-image {
        background: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-contents .main-point-item-image > img {
        width: 120px;
    }

    .mobile-contents .main-free-text {
        font-size: 28px;
        z-index: 10;
    }
    .mobile-contents .main-free-image-2 {
        right: -250px;
    }
    .mobile-contents .main-free-button,
    .mobile-contents .main-free-button a {
        width: auto;
    }
    .mobile-contents .main-free-button a {
        padding: 15px 30px;
        font-size: 14px;
    }
    /* 큐브 메인 모바일 리뉴얼 END */

    body {
        /*background: #ffffff !important;*/
    }

    .wrapper{
        position:relative !important;
    }
    .header {
        height: 60px;
        line-height: 60px;
    }
    .topMenu {
        position: relative;
        width: 100%
    }
    .topMenu .gnb-logo {
        float: none;
        margin: 0;
        padding: 12px 0;
    }
    .topMenu .gnb-logo img {
        width: 90px;
    }
    .topMenu .mobile-nav-btn {
        display: block;
        position: absolute;
        top: 10px;
        left: 0px;
        font-size: 30px;
        padding: 5px 20px;
    }
    .topMenu .top-btn .login-mobile{
        display:none;
    }
    .topMenu .top-btn .login {
        float: none;
        position: absolute;
        top: 20px;
        right: 0px;
        border: 0;
        margin: 0;
    }
    .topMenu .top-btn .make {
        display: none;
    }
    .topMenu .menu {
        float: none;
        max-height: 0;
        height: 100vh;
        width: 100%;
        background-color: #fff;
        position: fixed;
        top: 60px;
        left: 0;
        margin: 0;
        overflow: hidden;
        transition: 0.3s ease all;
        z-index: 1;
    }
    .menu-mobile .topMenu .menu {
        top:60px;
        max-height: calc(100vh - 60px);
    }
    .mobile-header-overlay {
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 50;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }
    .topMenu .menu ul {
        width: 75vw;
        margin: 0 auto;
        height: 100%;
        /*background-color: #f9f9f9;*/
    }

    .topMenu .menu ul li {
        width: 100% !important;
        padding: 0;
        line-height: 3;
        border-bottom: 1px solid #f1f1f1;
        text-align: left;
        font-weight: 300;
        background-color: #fff;

        opacity: 0;
        transition: 0.35s ease-out all;
    }
    .topMenu .menu ul li:nth-child(1) { transition-delay: 300ms,300ms; }
    .topMenu .menu ul li:nth-child(2) { transition-delay: 350ms,350ms; }
    .topMenu .menu ul li:nth-child(3) { transition-delay: 400ms,400ms; }
    .topMenu .menu ul li:nth-child(4) { transition-delay: 450ms,450ms; }
    .topMenu .menu ul li:nth-child(5) { transition-delay: 500ms,500ms; }

    .menu-mobile .topMenu .menu ul li {
        padding: 0 10px;
        opacity: 1;
    }
    .mobile-nav-btn-close {
        position: absolute;
        left: 15px;
        top: 5px;
        width: 32px;
        height: 32px;
    }
    .mobile-nav-btn-close-center {
        position: absolute;
        left: 15px;
        height: 33px;
        width: 2px;
        background-color: #333;
        transition: 0.25s ease-out all;
        transform: rotate(90deg);
    }
    .menu-mobile .mobile-nav-btn-close-center {
        opacity: 0;
    }
    .mobile-nav-btn-close:before, .mobile-nav-btn-close:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: #333;
        transition: 0.25s ease-out all;
    }
    .mobile-nav-btn-close:before {
        top: -8px;
        transform: rotate(-90deg);
    }
    .mobile-nav-btn-close:after {
        top: 8px;
        transform: rotate(90deg);
    }
    .menu-mobile .mobile-nav-btn-close:before {
        top: 0;
        transform: rotate(-45deg);
    }
    .menu-mobile .mobile-nav-btn-close:after {
        top: 0;
        transform: rotate(45deg);
    }





    .mobile-header {
        display: block;
        width: 100%;
        height: 150px;
        background: #fff;
        border-bottom: 1px solid #f1f1f1;
        z-index: 1;
    }

    .carousel-contents .slide-txt {
        padding: 40px 0px 30px 0px;
        width: auto;
        font-size: 26px;
    }
    .typewrite {
        display: none;
    }


    .main-slide {
        height: calc(100vh - 100px);
    }
    .main-slide .slide-txt {
        font-size: 30px
    }
    .slide-txt font {
        display: block;
    }
    #main-slide .carousel-contents{
        top: 50px;
    }
    .main-tpl-container {
        width: 100%;
        padding: 0 0 50px 0;
    }

    .main-tpl-container .contents .template {
        float: none;
        margin: 0 0 30px 0;
    }
    .main-tpl-container .title {
        margin: 60px 0;
    }
    .main-tpl-container .contents {
        margin: 0;
    }

    .main-drag-container .contents {
        width: 100%;
    }
    .main-drag-container .contents .explain {
        float: none;
        width: 100%;
        padding: 0 10px 0 10px;
        margin: 50px 0 0 0;
        text-align: center;
    }
    .main-drag-container .contents .explain .ti-txt {
        font-size: 30px;
    }
    .main-drag-container .contents .explain .sub-txt {
        font-size: 17px;
    }
    .main-drag-container .contents .gif {
        text-align: center;
        float: none;
        width: 100%;
        margin: 0;
    }
    .main-drag-container .contents .gif img {
        width: 100%;
    }

    .main-mobile-container {
        height: auto;
    }
    .main-mobile-container .contents {
        width: 100%;
    }
    .main-mobile-container .contents .gif {
        float: none;
        width: 100%;
    }
    .main-mobile-container .contents .gif img {
        max-width: 100%;
    }
    .main-mobile-container .contents .explain {
        margin: 30px 0;
        padding: 0 10px;
        width: 100%;
        text-align: center;
        float:none;
    }
    .main-mobile-container .contents .explain .sub-txt {
        font-size: 17px;
    }
    .main-photo-container {
        height: auto;
    }
    .main-photo-container .contents {
        height: auto;
        background: none;
    }
    .main-photo-container .contents .explain {
        float: none;
        width: 100%;
        height: auto;
        padding: 30px 10px;
        text-align: center;
    }
    .main-photo-container .contents .explain .sub-txt {
        font-size: 17px;
    }
    .main-photo-container .contents .explain .ti-txt font {
        display: block;
    }
    .main-photo-container .main-photo-container-img{
        height:505px;
        background: url(../../img/main/index/m_main_photo_bg.jpg) top center / cover no-repeat;
    }

    .main-compare-container {
        height: auto;
        background: url(../../img/main/index/main_compare_bg.jpg) top center / cover no-repeat;
    }
    .main-compare-container .contents {
        width: 100%;
        padding: 20px;
    }
    .main-compare-container .contents .compare {
        width: 100%;
        float: none;
    }
    .main-compare-container .contents .compare br {
        display: none;
    }

    .main-compare-container .contents .title {
        padding: 50px 20px;
    }

    .main-point-container {
        margin: 20px 0;
    }
    .main-point-container .contents {
        width: 100%;
    }
    .main-point-container .contents .point {
        float: none;
        width: 100%;
    }

    .main-official-partner-container{
        margin: 30px 0 60px;
        padding-bottom:30px;
    }
    .main-official-partner-container .contents {
        width: 100%;
        padding-left:10px;
    }
    .main-official-partner-container .contents .point{
        width: 33%;
    }
    .main-official-partner-container .contents .point img{
        width: 90px;
    }
    .main-official-partner-container .contents .point.mg-tb-30 img{
        width: 80px;
    }
    /*.main-official-partner-container .contents .point {
        float: none;
        width: 100%;
    }*/


    /* footer (mobile) */
    .main-footer-container {
        position: relative;
        height: 600px !important;
    }
    .main-footer-container .main-footer-contents {
        background-color: #333;
    }
    .main-footer-container .main-footer-contents .col-sm-3 {
        position: absolute;
        top: 200px;
        padding: 35px 0;
        width: 100%;
        text-align: center;
    }
    .main-footer-container .main-footer-contents .company > .company-info {
        font-size: 12px;
    }
    .main-footer-container .main-footer-contents .company:before {
        position: absolute;
        width: 56px;
        height: 22px;
        left: calc(50% - 28px);
        top: -25px;
    }
    .main-footer-container .main-footer-contents .col-sm-5 {
        position: absolute;
        padding: 50px 10px;
    }
    .main-footer-container .shortcuts > div {
        width: 33%;
        text-align: center;
    }
    .main-footer-container .shortcuts > div:last-of-type {
        margin-top: -30px;
    }
    .main-footer-container .company {
        padding: 10px;
    }
    .main-footer-container .partners {
        display: none;
    }
    .main-footer-contents > div:empty {
        display: none;
    }
    /*2019 ver*/
    /*
    .main-footer-container {
    }
    .main-footer-container .contents {
        width: 100%;
        padding: 15px;
    }
    .main-footer-container .contents .bottomMenu {
        width: 33%;
        font-size: 12px;
        padding: 0 10px;
    }

    .main-footer-container .contents .info {
        display: block;
        float: none;
        width: 100%;
    }
    .main-footer-container .contents .info p {
        font-size: 12px;
    }
    .main-footer-container .contents .info .logo {
        margin-top: 200px;
    }
    */
    /*2019 ver:e*/

    /* notice */
    .notice-obt {
        display: none;
        width: calc(100% - 10px);
        left: 5px;
    }
    .notice-obt-title {
        font-size: 34px;
    }
    .notice-obt-content {
        height: 290px;
        font-size: 15px;
    }


    /*  템플릿 카테고리  */
    .sub-tpl-container .template-category {
        width: calc(100vw - 20px);
        padding: 10px;
        margin: 20px auto;
    }
    .sub-tpl-container .template-category span {
        font-size: 12px;
        padding: 4px 10px;
        margin: 3px;
    }

    /*  템플릿  */
    .sub-tpl-container .contents {
        width: 100%;
    }
    .sub-tpl-container .contents .template {
        width: 100%;
        margin: 0 0 20px;
    }
    .sub-tpl-container .contents .template .img{
        width:355px;
    }

    .main_popup {
        display: none !important;
    }

    /*  고객센터  */
    .sub-cc-container .header {
        padding: 10px;
        z-index: 10;
    }
    .sub-cc-container .header .menu-box .menu {
        width: 99px;
        /* width: calc(30% - 20px); */
        height:130px;
        margin-left: 2px;
        margin-right: 2px;
    }
    .sub-cc-container .header .menu-box .menu > div:last-child {
        font-size: 15px;
    }

    .sub-cc-container .header .search-box {
        width: auto;
    }
    .sub-cc-container .cc-help-content {
        width: 100%;
        padding: 0 10px;
    }
    .sub-cc-container .cc-help-content .help-box {
        width: 100%;
    }

    .sub-cc-container .board-notice-body,
    .sub-cc-container .board-qna-body{
        margin: 50px 0;
    }

    .sub-cc-container .board-notice-body .board-notice-td-subject {
        max-width: calc(100% - 120px);
        overflow: hidden;
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .board-qna-table thead {
        display: none;
    }
    .board-qna-body .board-qna-table > tbody > tr {
        position: relative;
        margin-bottom: 10px;
        display: block;
        border: 1px solid #ccc;
        min-height: 50px;
        padding: 5px;
        background: #fff;
    }
    .board-qna-body .board-qna-table > tbody > tr:last-child {
        margin-bottom: 0;
    }
    .board-qna-body .board-qna-table > tbody > tr > td {
        display: inline-block;
        width: 100%;
        border: 0;
        text-align: left;
        width: calc(100% - 150px);
        padding: 4px 8px;
    }
    .board-qna-body .board-qna-table > tbody > tr > td.board-qna-td-subject {
        font-size: 14px;
    }
    .board-qna-body .board-qna-table > tbody > tr > td.board-qna-td-category,
    .board-qna-body .board-qna-table > tbody > tr > td.board-qna-td-writer {
        color: #777;
    }
    .board-qna-body .board-qna-table > tbody > tr > td.board-qna-td-state {
        position: absolute;
        height: 100%;
        width: 150px;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .board-qna-body .board-qna-search .input-group {
        width: 85%;
    }

    .board-qna-list {
        padding: 5px;
    }

    .board-qna-move-write {
        position: relative !important;
        width: 90% !important;
    }

    .topMenu .top-btn {
        position: absolute;
        top: 0;
        right: 0;
    }
    .topMenu .top-btn .account-dropdown {
        margin-top: 20px;
        margin-right: 0;
    }
    .topMenu .top-btn .account-dropdown .fa-user {
        /*padding: 10px;*/
        font-size: 23px;
    }
    .topMenu .top-btn .account-dropdown .icon-arrow-down,
    .topMenu .top-btn .account-dropdown .simple-account {
        display: none;
    }

    .price-content {
        display: none;
    }
    .price-content.mobile {
        display: block;
    }
    .price-content.mobile .price-box {
        margin: auto;
    }
    .price-content.mobile .price-box .plan {
        display: inline-block;
        width: 100%;
        margin-right: 0px;
    }
    .event .ribbon-lt,
    .event .ribbon-rt {
        display: none;
    }
    .event .ribbon-txt {
        height: auto;
        padding: 5px 40px;
    }
    .plan-row table {
        width: 100%;
    }
    .plan-row table td {
        width: 50%;
        text-align: center;
        line-height: 44px;
        border-top: #f9f9f9 1px solid;
    }
    .plan-row table td i {
        color: #22c1d3;
    }
    .price-content .price-box .plan .plan-top .sale {
        left: auto;
        width: 100%;
    }
    .price-faq-container .contents {
        width: 100%;
        padding: 10px;
    }
    .price-faq-container .contents .faq-box .question .title {
        font-size: 14px;
    }

    .template-preview-container, .sub-preview-container {
        width: auto;
    }
    .template-preview-container .template-preview-contents .set-icon {
        display: none;
    }
    .template-preview-container .template-preview-platform {
        width: auto;
    }
    .template-preview-container .pc-screen {
        display: none;
    }
    .template-preview-container .mobile-bg {
        width: 100%;
        /*transform: scale(0.9);*/
        background: transparent;
        padding-top: 0;
        padding: 5px;
    }
    .template-preview-container .mobile-bg .mobile-screen {
        width: auto;
        height: calc(100vh - 70px);
        border: 1px solid #ccc;
        background-color: #fff;
    }
    .template-preview-container .template-preview-contents {
        margin: 10px 0;
        padding: 0 10px;
    }
    .template-preview-container .template-preview-contents .btn {
        width: 200px;
    }

    .main-account-pop .popover-arrow-up:after {
        right: -90px;
    }

    /*regist*/
    .regist-content .regist-box{
        width:356px;
        padding: 10px 18px;
    }
    .regist-content .regist-box .group .term .price{
        width:28%;
    }

}

/*iphone 6+*/
@media (max-width: 460px) {
    .carousel-contents .slide-txt{
        font-size: 28px;
        padding-top: 20px;
        line-height: 1.3;
    }
    .main-tpl-container .title{
        font-size: 30px;
        margin:40px 0;
    }
}

/*galaxy S8*/
@media (max-width: 420px) {
    .topMenu .top-btn .login {
        width: 80px;
        top: 12px;
    }

    .carousel-contents .slide-txt{
        font-size: 28px;
        padding-top: 26px;
        line-height: 1.3;
    }

    .ti-txt {
        font-size: 24px !important;
    }
    .sub-txt {
        font-size: 16px !important;
    }

    .main-compare-container .contents .title {
        font-size: 30px;
    }
    .main-tpl-container .title{
        font-size: 30px;
        margin:40px 0;
    }
}

/*Galaxy S6*/
@media (max-width: 380px) {
    .topMenu .top-btn .login {
        width: 80px;
        top: 12px;
    }

    .carousel-contents .slide-txt{
        font-size: 26px;
        padding-top: 0px;
        line-height: 1.3;
    }

    .ti-txt {
        font-size: 24px !important;
    }
    .sub-txt {
        font-size: 16px !important;
    }

    .main-compare-container .contents .title {
        font-size: 30px;
    }
    .main-tpl-container .title{
        font-size: 30px;
        margin:30px 0;
    }
}

@media (max-width: 332px) {
    .topMenu .top-btn .login {
        width: 80px;
        top: 12px;
    }
    .carousel-contents .slide-txt{
        font-size: 20px;
        padding-top: 0px;
        line-height: 1.3;
    }

    .ti-txt {
        font-size: 20px !important;
    }
    .sub-txt {
        font-size: 14px !important;
    }

    .main-compare-container .contents .title {
        font-size: 30px;
    }
    .main-tpl-container .title{
        font-size: 30px;
        margin:30px 0;
    }
    .main-footer-container .contents .bottomMenu {
        padding: 5px;
    }
    .main-footer-container .contents {
        padding: 10px;
    }
}

/*iphone5*/
@media (max-width: 320px) {
    .topMenu .top-btn .login {
        width: 80px;
        top: 12px;
    }
    .carousel-contents{
        top:30px;
    }
    .carousel-contents .slide-txt{
        font-size: 22px;
        padding-top: 0px;
        line-height: 1.3;
    }

    .ti-txt {
        font-size: 20px !important;
    }
    .sub-txt {
        font-size: 14px !important;
    }

    .main-compare-container .contents .title {
        font-size: 30px;
    }
    .main-tpl-container .title{
        font-size: 30px;
        margin:30px 0;
    }
    .main-footer-container .contents .bottomMenu {
        padding: 5px;
    }
    .main-footer-container .contents {
        padding: 10px;
    }
}

@media (min-width:768px){
    .mobile-contents{display:none}
    .pc-contents{display:block}
}