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

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

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

    .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%;
        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-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;
    }
    .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%;
    }*/

    .icon_list ul li{margin:0;}

    .main-footer-container {
        /*display: none;*/
    }
    .main-footer-container .contents {
        width: 100%;
        padding: 15px;
    }
    .main-footer-container .contents .bottomMenu {
        width: 33%;
        font-size: 12px;
        /*min-height: 150px;*/
        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;
    }

    /* 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%;
    }

    /*  고객센터  */
    .sub-cc-container .header {
        padding: 10px;
        z-index: 10;
    }
    .sub-cc-container .header .menu-box .menu {
        width: 90px;
        /* width: calc(30% - 20px); */
        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;
    }
    .price-faq-container .contents {
        width: 100%;
        padding: 10px;
    }
    .price-faq-container .contents .faq-box .question .title {
        font-size: 14px;
        line-height:32px;
    }
    .whois.price-faq-container .contents .faq-box .question .title p {
        padding-left:0 !important;
    }
    .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%;
    }

    .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%;
    }


    .icon_list {
        width: 100%;
    }
    .icon_list > ul > li {
        width: 50%;
    }
    .them_list {
        width: 100%;
    }
    .them_list .contents .template {
        margin: 0 0 30px 0;
        text-align: center;
        width: 100%;
    }
    .container_num_text {
        width: 100%;
    }
    .num_text_left,
    .num_text_right {
        float: none;
        text-align: center;
    }

    .container_video {
        height: calc(100% - 60px);
    }

    .container_slide{
        padding:0;
    }

    .container .line_title p,
    .container_ap_text p {
        padding-left: 10px;
        padding-right: 10px;
    }
    .container_btn a.bottom_btn {
        margin: 10px;
        max-width: 355px;
    }

    .footer {
        position: relative;
        width: 100%;
        padding: 15px;
    }
    .footer ul {
        display: none;
    }
    .footer .footer_right {
        position: absolute;
        top: 20px;
        padding: 0;
        right: 15px;
    }

    .whois .topMenu .menu {
        margin: 0 !important
    }

    .whois .topMenu .gnb-logo img {
        /*width: 80px;*/
        height: 36px;
        padding: 0 5px;
        margin: 0;
    }
    .whois .topMenu .gnb-logo img.whois-logo {
        padding-bottom: 0px;
    }
    .whois .topMenu .gnb-logo img.quv-logo {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .whois .topMenu .account-dropdown .simple-account {
        display: none !important;
    }
    .whois .topMenu .top-btn .account-dropdown,
    .whois .topMenu .top-btn .login.pc-contents {
        margin-top: 18px !important;
    }

    .carousel-inner .item .item_bg .item_box {
        width: 100%;
    }
    .carousel-inner .item .item_bg .item_txt01,
    .carousel-inner .item .item_bg .item_txt,
    .carousel-inner .item .item_bg .item_box .item_txt {
        padding-left: 10px;
        padding-right: 10px;
    }
    .carousel-inner .item .item_bg img {
        max-width: 100%;
    }


    .main-account-pop {
        right: 15px !important;
        left: auto !important;
    }

    .banner-whois-learning,
    .banner-whois-service-center {
        display: none;
    }
}

/*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}
}