/* ----------- Common ----------- */
/* max-width: 768px */
@media only screen
and (max-width: 768px) {

    /*******************
        hidden
    *******************/
    .visible-xs {
        display: block !important;
    }
    .hidden-xs {
        display: none !important;
    }

    /*******************
        layout
    *******************/
    #wrap {
        min-width: 100%;
    }
    /* inner layout box */
    #wrap .inner-wrap {
        width: 100%;
    }

    /* #wrap.main */
    #wrap.main {
        min-width: 100%;
        background: none;
        background-size: cover;
    }

    /*******************
        mobile-nav
    *******************/
    .mobile-nav {
        display: block !important;
        position: fixed;
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-top: 2px solid #333;
        background-color: rgba(255,255,255,1);
        /*background-color: rgba(255,255,255,0.75);*/
        box-shadow: 0 2px 7px rgba(0,0,0,0.25);
        z-index: 100;
    }
    .btn-connect.login li a:hover {
        color: #fff;
        background-color: #2c2c2c;
    }

    nav .dropdown-backdrop {
        display: none;
    }
    .drawer-open .drawer-overlay {
        z-index: 10;
    }

    /* logout */
    .btn-connect.logout li {
        background-color: #424242;
        /*background-color: #2690ea;*/
    }

    /* logo */
    .logo-area {
        padding: 20px 0 17px;
        border-bottom: 1px solid #eee;
    }
    h1.logo {
        padding: 0;
        text-align: left;
    }
    h1.logo a {
        padding: 7px 0 0 15px;
    }
    h1.logo a strong {
        margin: 0;
        font-size: 17px;
        letter-spacing: -1.75px;
    }
    h1.logo a i {
        line-height: 1.1;
        font-size: 9px;
        letter-spacing: -0.45px;
    }
    h1.logo img {
        width: 200px;
    }


    /*reg-info : login */
    .reg-info.login {
        padding: 20px;
        border-bottom: 1px solid #dfdfdf;
        background-color: #f0f0f0;
    }
    .reg-info.login h2 {
        margin: 0 0 15px;
        font-size: 15px;
        font-weight: bold;
    }
    .reg-info.login p {
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    /* reg-info : logout */
    .reg-info.logout {
        border-bottom: 1px solid #dfdfdf;
        background-color: #fff;
    }
    .reg-info.logout h2 {
        height: 30px;
        line-height: 30px;
        margin: 0;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-color: #666;
    }
    .reg-info.logout p {
        margin: 0;
        padding: 0;
        line-height: 1;
    }
    .reg-info.logout .tab-area > ul {

    }
    .reg-info.logout .tab-area > ul > li {
        float: left;
        width: 50%;
    }
    .reg-info.logout .tab-area > ul > li a {
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        background-color: #999;
    }
    .reg-info.logout .tab-area > ul > li.active a {
        color: #fff;
        background-color: #2690ea;
    }
    .reg-info.logout .tab-area > ul > li:first-child a {
        border-right: 1px solid #aaa;
    }
    .reg-info.logout .tab-area > ul > li:last-child a {
        border-left: 1px solid #909090;
    }
    .reg-info.logout .tab-content,
    .reg-info.logout .tab-pane {
        padding: 0;
    }

    /* #registration */
    .reg-info.logout .reg-info-detail {
        position: relative;
        padding: 10px 10px 40px;
        line-height: 1.5;
    }
    .reg-info.logout .reg-info-detail.empty {
        position: relative;
        padding: 10px;
        line-height: 1.5;
    }
    .reg-info.logout .reg-info-detail .barcode {
        display: block;
        margin: 5px 0 7px;
        line-height: 1;
    }
    .reg-info.logout .reg-info-detail .barcode img {
        max-width: 100%;
    }
    .reg-info.logout .reg-info-detail > ul {
        padding: 7px 10px;
        line-height: 1.1;
        text-align: center;
        border: 1px solid #eee;
        background-color: #f0f0f0;
    }
    .reg-info.logout .reg-info-detail > ul > li {
        display: inline-block;
        margin-bottom: 5px;
        line-height: 1.1;
        font-size: 12px;
    }
    .reg-info.logout .reg-info-detail > ul > li.barcode-num-info {
        display: block;
        margin: 5px 0;
        line-height: 1.1;
        font-size: 12px;
    }
    .reg-info.logout .reg-info-detail > ul > li.barcode-num-info .title {
        display: inline-block;
        margin: 0 10px 0 0;
        padding: 3px 5px;
        text-align: center;
        vertical-align: middle;
        font-size: 11px;
        color: #fff;
        background-color: #ccc;
    }
    .reg-info.logout .reg-info-detail > ul > li.barcode-num-info .num {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        font-weight: 300;
    }
    .reg-info.logout .reg-info-detail > ul > li:nth-child(2):after,
    .reg-info.logout .reg-info-detail > ul > li:nth-child(3):after {
        content: ' · ';
        margin: 0 3px;
        color: #999;
    }
    .reg-info.logout .reg-info-detail > ul > li:last-child:after {
        content: '';
        margin: 0;
    }
    .reg-info.logout .reg-info-detail .btn-more {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 32px;
        height: 32px;
    }
    .reg-info.logout .reg-info-detail .btn-more a {
        display: block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        display: block;
        text-align: center;
        vertical-align: middle;
        text-align: center;
        font-size: 20px;
        color: rgba(255,255,255,0.75);
        background-color: #424242;
    }

    /* papers */
    .paper-info-detail {
        position: relative;
        padding: 10px 10px 30px;
        line-height: 1.5;
    }
    .reg-info.logout .paper-info-detail.empty {
        position: relative;
        padding: 10px;
        line-height: 1.5;
    }
    .reg-info.logout .paper-info-detail > ul {
        margin: 0;
        padding: 7px 10px;
        line-height: 1.1;
        text-align: center;
        border: 1px solid #eee;
        background-color: #f0f0f0;
    }
    .reg-info.logout .paper-info-detail > ul > li {
        display: inline-block;
        margin-bottom: 5px;
        line-height: 1.1;
        font-size: 12px;
    }
    .paper-info-detail .title {
        display: block;
        margin: 0 0 7px;
        font-size: 14px;
        font-weight: 500;
    }
    .paper-info-detail > ul {
        margin: 0 0 10px;
        border: 1px solid #eee;
        background-color: #f0f0f0;
    }
    .paper-info-detail .btn-more {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 32px;
        height: 32px;
    }
    .paper-info-detail .btn-more a {
        display: block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        display: block;
        text-align: center;
        vertical-align: middle;
        text-align: center;
        font-size: 20px;
        color: rgba(255,255,255,0.75);
        background-color: #424242;
    }

    /* paper-place */
    .pregentation-info {
        margin: 0 0 10px;
        padding: 5px 10px;
        font-size: 13px;
        color: #333;
        border: 1px solid #dfdfdf;
        background: #f0f0f0;
    }
    .pregentation-info li.section-type {
        display: inline-block;
    }
    .pregentation-info li.date {
        display: block;
    }
    .pregentation-info li.place {
        display: block;
    }
    .pregentation-info li.place a {
        color: #2690ea;
    }
    .pregentation-info li i,
    .pregentation-info li.place a i {
        width: 15px;
        text-align: center;
        margin: 0 7px 0 0;
    }

    /* drawer */
    .drawer-overlay {
        background-color: rgba(0,0,0,0.75);
    }

    /* hanburger button */
    .mobile-nav .drawer-hamburger {
        width: 3rem;
        padding: 20px 1.5rem;
    }
    .drawer--right.drawer-open .drawer-hamburger {
        right: 24rem;
    }
    /*.drawer-open .drawer-hamburger-icon:after,*/
    /*.drawer-open .drawer-hamburger-icon:before {*/
    /*background-color: #fff;*/
    /*}*/

    /* drawer-nav */
    .drawer--right .drawer-nav {
        position: fixed;
        top: 0;
        right: -24rem;
        overflow: hidden;
        width: 24rem;
        height: 100%;
        color: #222;
        background-color: #323232;
        z-index: 2;
    }
    .drawer--right .drawer-nav .inner-wrap {
        position: relative;
    }

    /* drawer-nav > login-area */
    .drawer-nav .login-area {

    }

    /* drawer-nav > drawer-menu */
    .drawer-menu {
        background-color: #fff;
    }
    /* depth1 */
    .drawer-menu > li {
        position: relative;
        line-height: 1.1;
    }
    .drawer-menu-item {
        display: block;
        /*padding: 15px 30px 15px 20px;*/
        padding: 15px 10px;
        text-decoration: none;
        font-size: 15px;
        color: #333;
        border-bottom: 1px solid #dfdfdf;
    }
    .drawer-menu > li:last-child .drawer-menu-item {
        border-bottom: 0;
    }
    .drawer-dropdown .drawer-caret {
        position: absolute;
        right: 10px;
        top: 25px;
    }
    /* depth2 */
    .drawer-dropdown-menu-item {
        display: block;
        padding: 10px 20px 10px 30px;
        line-height: 1.1;
        font-size: 13px;
        color: #767676;
        border-bottom: 1px solid #dfdfdf;
        background-color: #eee;
    }

    /* drawer-nav > mobile-utility-area */
    .mobile-utility-area {
        padding: 0;
    }

    /* btn-language */
    .btn-language {
        width: 100%;
    }
    .btn-language > li {
        float: left;
        width: 50%;

    }
    .btn-language > li > a {
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        background-color: #3dcaa3;
    }
    .eng .btn-language > li > a {
        display: block;
        height: auto;
        padding: 10px;
        line-height: 1.3;
        text-align: center;
        font-size: 14px;
        color: #fff;
        background-color: #3dcaa3;
    }
    .btn-language > li.korean > a {
        border-right: 1px solid #5fd3b4;
    }
    .btn-language > li.english > a {
        border-left: 1px solid #39bf9a;
    }

    /*******************
        header
    *******************/
    #header {
        display: none !important;
    }

    /* *******************************************************************
        banner-area
    ******************************************************************* */
    .banner-area .inner-wrap {
        height: auto;
        padding: 30px 0;
    }

    /* host-list */
    .banner-area .inner-wrap .host-list {
        text-align: center;
    }
    .banner-area .inner-wrap .host-list ul {
        display: block;
        width: 230px;
        margin: 0 auto;
        text-align: left;
    }
    .banner-area .inner-wrap .host-list li {
        margin: 15px 0;
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    #footer {

    }
    #footer .inner-wrap {
        padding: 0 0 80px;
        background: none;
    }

    /* 개인정보 처리 방침 버튼 */
    .btn-privacy {
        position: static;
        display: block;
        margin: 0 0 30px;
        padding: 10px 10px;
        text-align: center;
        font-size: 13px;
        color: #767676;
        border: 0;
        border-bottom: 1px solid #dfdfdf;
        border-radius: 0;
        background-color: #fafafa;
    }
    .btn-privacy:hover {
        color: #767676;
        border: 0;
        border-bottom: 1px solid #dfdfdf;
    }

    /* address */
    address {
        margin: 0 0 10px;
        padding-left: 0;
        text-align: center;
    }
    address p {
        margin: 0 0 10px;
    }
    address p .title {
        display: block;
        margin: 0 0 20px;
        text-align: center;
        font-size: 16px;
    }
    .eng address p .title {
        padding-top: 40px;
    }

    /* copyright */
    .copyright {
        padding-left: 0;
        text-align: center;
        letter-spacing: -0.75px;
        font-size: 13px;
    }
    #footer .address {
        padding-bottom: 10px;
    }
    #footer .address li {
        margin: 0;
        letter-spacing: -0.75px;
        font-size: 13px;
    }
    .eng #footer .address li {
        padding: 0 20px;
    }

    /* back-to-top */
    .back-to-top {
        cursor: pointer;
        position: fixed;
        bottom: 20px;
        left: 50%;
        /*display: none;*/
        width: 46px;
        height: 46px;
        margin-left: -23px;
        padding-top: 10px;
        font-size: 12px;
        font-weight: 300;
        color: #fff;
        border: 0;
        border-radius: 100% !important;
        background-color: rgba(0,0,0,0.25);
    }
    .back-to-top:hover {
        color: #fff;
        background-color: rgba(0,46,102,0.85);
    }
    .ios-device.back-to-top {
        bottom: 30px;
    }
    .back-to-top i {
        margin: 0;
        line-height: 1.1;
        font-size: 24px;
    }

    /* back-to-back */
    .back-to-back {
        cursor: pointer;
        position: fixed;
        bottom: 20px;
        left: 20px;
        /*display: none;*/
        width: 46px;
        height: 46px;
        padding-top: 10px;
        font-size: 12px;
        font-weight: 300;
        color: #fff;
        border: 0;
        border-radius: 100% !important;
        background-color: rgba(0,0,0,0.25);
    }
    .back-to-back:hover {
        color: #fff;
        background-color: rgba(0,46,102,0.85);
    }
    .ios-device.back-to-back {
        bottom: 30px;
    }
    .back-to-back i {
        margin: 0;
        line-height: 1.1;
        font-size: 24px;
    }

    /* back-to-next */
    .back-to-next {
        cursor: pointer;
        position: fixed;
        bottom: 20px;
        right: 20px;
        /*display: none;*/
        width: 46px;
        height: 46px;
        padding-top: 10px;
        font-size: 12px;
        font-weight: 300;
        color: #fff;
        border: 0;
        border-radius: 100% !important;
        background-color: rgba(0,0,0,0.25);
    }
    .back-to-next:hover {
        color: #fff;
        background-color: rgba(0,46,102,0.85);
    }
    .ios-device.back-to-next {
        bottom: 30px;
    }
    .back-to-next i {
        margin: 0;
        line-height: 1.1;
        font-size: 24px;
    }

    /* back-to-list */
    .back-to-list {
        cursor: pointer;
        position: fixed;
        bottom: 80px;
        /*left: 50%;*/
        left: auto;
        right: 20px;
        /*display: none;*/
        width: 46px;
        height: 46px;
        /*margin-left: -23px;*/
        padding-top: 10px;
        font-size: 12px;
        font-weight: 300;
        color: #fff;
        border: 0;
        border-radius: 100% !important;
        background-color: rgba(0,0,0,0.25);
    }
    .back-to-list:hover {
        color: #fff;
        background-color: rgba(0,46,102,0.85);
    }
    .ios-device.back-to-list {
        bottom: 90px;
    }
    .back-to-list i {
        margin: 0;
        line-height: 1.1;
        font-size: 24px;
    }

}

/* ----------- Tablet ----------- */
/* Portrait and Landscape */
@media only screen
and (min-width: 768px)
and (max-width: 1024px) {

}

/* Portrait */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: portrait) {

}

/* Landscape */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: landscape) {

}

/* ----------- Phone ----------- */
/* max-width: 767px */
@media only screen
and (max-width: 767px) {

}

/* max-width: 639px */
@media only screen
and (max-width: 639px) {

}

/* max-width: 480px */
@media only screen
and (max-width: 480px) {

    /*******************
        #footer
    *******************/
    /* address */
    address p {
        display: inline;
        font-weight: 400;
        color: #8c8c8c;
    }
    /*address p:last-child:before {*/
    /*    display: inline-block;*/
    /*    margin-right: 5px;*/
    /*    content: ' / ';*/
    /*}*/

    /* copyright */
    .copyright {

    }

    .mobile-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}

/* max-width: 320px */
@media only screen
and (max-width: 320px) {

}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(가로)
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /*******************
        layout
    *******************/
    #wrap {
        min-width: 100%;
    }
    /* inner layout box */
    #wrap .inner-wrap {
        width: 100%;
        padding: 0 50px;
    }
    #wrap #header .inner-wrap {
        padding: 0;
    }

    /* #wrap.main */
    #wrap.main {
        min-width: 100%;
        background: none;
        background-size: cover;
    }

    /* *******************************************************************
        #header
    ******************************************************************* */
    /* utility-area */
    .utility-area {
        margin: 0 0 10px;
    }
    .utility-area ul.utility-list {
        width: 500px;
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    #footer .inner-wrap {
        padding: 40px 50px 80px;
        background: url(/images/bg/bg_footer_logo.png) 50px 35px no-repeat;
        background-size: 240px;
    }

    /* address */
    address {
        padding-left: 320px;
    }

    /* copyright */
    .copyright {
        padding-left: 320px;
    }

}

/* ----------- iPad Pro 10.5" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {

    /*******************
        layout
    *******************/
    #wrap {
        min-width: 100%;
    }
    /* inner layout box */
    #wrap .inner-wrap {
        width: 100%;
        padding: 0 50px;
    }
    #wrap #header .inner-wrap {
        padding: 0;
    }

    /* #wrap.main */
    #wrap.main {
        min-width: 100%;
        background: none;
        background-size: cover;
    }

    /* *******************************************************************
        #header
    ******************************************************************* */
    /* utility-area */
    .utility-area {
        margin: 0 0 10px;
    }
    .utility-area ul.utility-list {
        width: 500px;
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    #footer .inner-wrap {
        padding: 40px 50px 80px;
        background: url(/images/bg/bg_footer_logo.png) 50px 35px no-repeat;
        background-size: 240px;
    }

    /* address */
    address {
        padding-left: 320px;
    }

    /* copyright */
    .copyright {
        padding-left: 320px;
    }

}

/* ----------- iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {

    /*******************
        layout
    *******************/
    #wrap {
        min-width: 100%;
    }
    /* inner layout box */
    #wrap .inner-wrap {
        width: 100%;
        padding: 0 50px;
    }
    #wrap #header .inner-wrap {
        padding: 0;
    }

    /* #wrap.main */
    #wrap.main {
        min-width: 100%;
        background: none;
        background-size: cover;
    }

    /* *******************************************************************
        #header
    ******************************************************************* */
    /* utility-area */
    .utility-area {
        margin: 0 0 10px;
    }
    .utility-area ul.utility-list {
        width: 500px;
    }

    /* *******************************************************************
        #footer
    ******************************************************************* */
    #footer .inner-wrap {
        padding: 40px 50px 80px;
        background: url(/images/bg/bg_footer_logo.png) 50px 35px no-repeat;
        background-size: 240px;
    }

    /* address */
    address {
        padding-left: 320px;
    }

    /* copyright */
    .copyright {
        padding-left: 320px;
    }

}