@media screen and (max-width: 540px){
    body {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    }

    h2 {  font-size: 2.2rem; }
    h5 {  font-size: 1.2rem; }
    p { font-size: 1rem; text-align: justify;}
    .btn {
        font-size: 0.9rem !important;
        padding: 9px 26px !important;
    }
    .step-top h2 {
        color: #fff;
        font-weight: 700;
        text-align: center;
        width: 100%;
        position: absolute;
        top: 110px;
        left: 0;
        font-size: 1.6rem !important;
    }

    .form-check-label{font-weight:400;}
    #heads-top-blank {
        height: 180px;
    }
    /* .header .navbar .container .nav-left {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .header .logo {
        width: 60%;
        position: absolute;
        left: 20px;
    }
    .header .logo a {
        font-size: 1.2rem;
        width: 100%;
    } */

    .header .menu-container {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .header .navbar-toggle {
        color:#000;
        width: 25px;
        height: 25px;
        border: none;
        padding: 0;
        margin: 0;
        position: absolute;
        right: 30px;
        top: 28px;
    }

    .header .navbar-toggle .toggle-icon:before {
        width: 26px;
        height: 2px;
        bottom: 12px;
        background: #000;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        transform: rotate(0);
        transition-duration: 300ms;
        transition-property: all;
    }


    .header .navbar-toggle .toggle-icon {
        position: relative;
        width: 26px;
        height: 2px;
        display: inline-block;
        background: #000;
        transition-duration: 300ms;
        transition-property: all;
    }

    .header .navbar-toggle .toggle-icon:after {
        width: 26px;
        height: 2px;
        top: -6px;
        background: #000;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        transform: rotate(0);
        transition-duration: 300ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    }



    .header .navbar-toggle:hover .toggle-icon {
        width: 26px;
        height: 2px;
        background: #000;
        transition-duration: 300ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    }
    .header .navbar-toggle:hover .toggle-icon:before, .header .navbar-toggle:hover .toggle-icon:after {
        width: 26px;
        height: 2px;
        background: #000;
        transition-duration: 300ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    }

    .header .nav-item-child {
        font-family: 'scdream';
        font-size: 1.0rem;
        font-weight: 600;
        color: inherit;
        line-height: 18px;
        padding: 14px;
        color: #000;
        padding-left: 30px;
    }
    .nav-group-right {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
    }
    .nav-group-right {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: flex-start;
        margin-top: 0px;
    }
    .header .navbar-nav .nav-item {
        float: none;
        margin-bottom: 20px;
    }

    .navbar-fixed-top .navbar-collapse {
        max-height: 640px;
    }
    .header .navbar .container .navbar-collapse {
        width: 100%;
        height: 50vh;
        background-color: #fff;
        position: absolute;
        top: 79px;
        right: 0;
        border-top: 1px solid #ddd;
    }
    .header .navbar-nav-right {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: flex-end;
        padding: 18px 0 0 0;
    }

    .header .navbar-nav-right .nav-group-center {
        display: flex;
        flex-direction: column;
        width: 60%;
        justify-content: space-around;
    }

    .carousel-inner>.item {
        z-index: 10;
    }
    .carousel-inner .main-first {
        background-color: #FFE618;
        background-size: 180%;
    }
    .carousel-centered h3 {
        padding-left: 0px;
        width: 80%;
        font-size: 1.4rem;
    }
    .carousel-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #000;
        line-height: 1.1;
        text-transform: uppercase;
    }
    .carousel-centered .btn {
        font-size: 18px !important;
        font-weight: 600;
        padding: 10px 50px !important;
        margin-left: 0px;
    }
    .area-full .area-left img {
        width: 100%;
        height: auto;
        margin-bottom:20px;
    }
    .text-box p {
        color: #000;
        font-weight: 400;
        line-height: 28px;
        text-align: justify;
        margin-bottom: 40px;
        font-size: 1rem;
    }

    .main-banner-section {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        width:94%;
        margin:0 auto;
        padding: 0px 20px;
    }
    .main-banner-section .banner-box {
        color: #fff;
        width: 100%;
        padding: 30px 0;
    }

    .main-banner-section img {
        width: 60%;
        height: auto;
    }

    .main-gusung-section {
        background-color: #FFF9E7;
        padding: 60px 15px;
    }

    .main-gusung-section .gusung-area {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #F8F9FF;
        border: 2px dashed #6F81F7;
        border-radius: 10px;
        padding: 20px;
    }
    .main-gusung-section .gusung-area .box-out {
        width: 100%;
        margin-bottom: 20px;
    }

    .main-gusung-section .gusung-area .box4 {
        width: 100%;
    }

    .gusung-area-text {
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .gusung-area-text div {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
    }
    .area-full {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
    }
    .area-full .area-left {
        width: 100%;
    }
    .area-full .area-right {
        width: 100%;
        padding-right: 0px;
    }

    .main-intro-section {
        padding: 100px 15px;
    }
    .register-section .register-form dl {
        flex-direction: column;
    }
    .register-section .register-form dl dt {
        width: 100%;
        background-color: rgba(220, 220, 243, 0);
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        padding: 20px 0 0 20px;
    }
    .register-section .register-form dl dd {
        width: 100%;
        padding: 6px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-height: 42px;
        font-size: 14px;
        font-weight: 400;
    }

    .register-section .register-form dl {
        display: flex;
        flex-direction: column;
        width: 100%;
        border:0px;
        margin: 0;
    }

    .full .form-inline-ik {
        flex-wrap: wrap;

    }
    .carousel-centered {
        margin-top: 160px;
    }

    .sub-intro .item p {
        font-weight: 500;
        padding: 0 0 30px 10px;
        width: 100%;
    }
    .step1-intro-section {
        height: 90vh;
        padding: 0 15px;
    }
    .sub-section-title h2 {
        font-size: 1.9rem;
        font-weight: 600;
        text-align: center;
        padding: 50px 20px;
        letter-spacing: -1px;
    }

    .ik-card {
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 30px 20px;
    }
    .ik-card .text-agree dl dd {
        margin-left: 0;
        padding: 0 10px 50px 20px;
        font-size: 0.85rem;
        line-height: 1.6rem;
    }

    .step2-intro-section {
        padding: 0 15px;
    }
    .ik-box-agree1 {
        border: 2px solid #000;
        padding: 80px 20px 40px 20px;
        margin: 30px 0px 40px 0px;
    }

    .ik-box-agree1 h3 {
        font-size: 2.1rem;
    }

    .fl-row {
        display: flex;
        flex-direction: column;
    }

    .btn-mid {
        padding: 14px 28px !important;
        font-size: 1.2rem !important;
    }


    .ik-box-agree1 .ik-box-st1 dl, .ik-box-agree1 .ik-box-st2 dl, .ik-box-agree1 .ik-box-st3 dl {
        display: flex;
        align-items: start;
        justify-content: start;
    }
    .ik-box-agree1 dt {
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        padding: 10px 0 5px 0;
    }
    .ik-box-agree1 .ik-box-st2 h6 {
        width: 100% !important;
    }

    .ik-box-agree1 dl dd {
        width: 100%;
    }
    .kbw-signature {
        width: 100%;
        height: 150px;
    }
    #sig canvas {
        border: 1px solid #ddd;
        width: 100%;
        height: 150px;
    }

    .step3-intro-section {
        padding: 50px 15px;
    }
    .exam-end-section {
        padding: 50px 15px;
    }
    .ik-card-white {
        border: 1px solid #ddd;
        padding: 20px 20px;
        border-radius: 20px;
        background-color: rgba(238, 238, 238, 0.2);
        text-align: justify;
        line-height: 2rem;
    }

    .josa-intro-section {
        padding: 50px 15px;
    }
    .josa-intro-section .ik-card-white-exam {
        width: 100%;
    }
    .ik-card-white-exam {
        border: 2px solid rgb(19, 151, 134);
        border-radius: 0px;
    }
    .ik-card-josa {
        padding: 20px 10px;
    }
    .josa-intro-section .josa-reply ul {
        flex-direction: column;
    }
    .josa-intro-section .josa-reply ul li {
        width: 100%;
    }
    .josa-intro-section .josa-reply ul li {
        margin-bottom: 40px;
    }
    .result-section {
        padding: 0 15px;
        margin-bottom: 100px;
    }
    .six-cell dl dt {
        width: 100%;
    }
    .six-cell dl dd {
        width: 100%;
    }

    .dl-table dl {
        flex-direction: column;
    }

    .dl-table dl dd {
        line-height: 20px;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 20px;
        text-align: right;
    }

    .dl-table dl dt {
        line-height: 16px;
        font-size: 13px;
        font-weight: 400;
        text-align: left;
        padding-right: 20px;
    }

    .btn-area-right {
        padding: 20px;
        display: flex;
        justify-content: center;
    }
    .ul-table ul.ul-body li {
        padding: 10px 5px;
    }
    .btns-wide {
        padding: 11px 40px;
    }

    .gusung-area-text div h5 img {
        width: 22px;
    }

   .result-section .btn-area-right .btn{font-size: 0.9rem !important; padding: 12px 20px !important;}
   .sub-first{background-size: 150%;}
   .btn-big { font-size: 1.3rem !important;}
   #heads-top { height: 180px;  }



    .footer .content .footer-area {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: space-between;
        padding: 10px 10%;
        margin-bottom: 40px;
    }
    .footer .content .footer-area .footer-logo {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .footer .content .footer-area .footer-contact {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
    }
    .footer .content .footer-area .footer-contact ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: space-around;
        font-weight: 400;
    }
    .footer .content .footer-area .footer-contact span {
        font-size: 1.1rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        margin-left: 0;
        margin-bottom: 15px;
    }
    .footer .content .footer-area .footer-contact ul li {
        list-style: none;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.8rem;
        margin-bottom: 18px;
        font-weight:400;
    }
    .footer .content .footer-area .footer-contact ul li img{
        height: 16px; margin-right:10px;
    }
    .footer .content .footer-copy {
        padding: 20px;
        border-top: 1px solid rgba(221, 221, 221, 0.2);
        font-size: 0.8rem;
        font-weight:400;
        color: rgba(255, 255, 255, 0.5);
    }
    .content {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .blank-area-section {
        margin: 60px 15px 80px 15px;
    }
    .blank-area-section .card {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
    }
    .card {
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 20px 10px;
    }

    .col-md-8{width:100%;}
    .login-form .login-input {
        margin: 10px 0;
        display: flex;
        flex-direction: column;
    }
    .login-form .login-input label {
        width: 1000%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .login-form .login-input .login-input-form {
        width: 100%;
        padding: 0 5%;
    }
    .login-form .btn-area {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0 2%;
    }
    .qna-area {
        padding: 0 2%;
    }
    .qna-area dl dt{font-size: 16px;}
    .qna-area dl dd{font-weight: 400;
        font-size: 14px;
        padding: 3px 0 20px 0;
    }

    .sign-table{width:100%;margin: 0 auto;}
    .sign-table tr{display: flex; flex-direction: column;width:100%;}
    .sign-table tr td{display: block; width:100%; text-align: left; padding:0;}
    .sign-table tr td.ag1{padding: 20px 0 0 0;}
    .sign-table colgroup{width:100%;}
    .sign-table colgroup col{width:0;}
    .sign-table tr td.m2 span{display: none;}
    .sign-table tr td.m3{margin-top:15px;}
    .sign-table tr td.m4 span{display: none;}
    .sign-table tr td.m5 span{}
    .sign-table tr td.m5 { margin-top: 15px; text-align: center;}
    .sign-table tr td.m6{display: none;}
    .sign-table tr td.m7{margin-top:15px;}

    .exam-end-section h3.end {
        font-size: 1.6rem;
    }
    .exam-end-section .bot-btn-area {display: flex;  flex-direction: column; }
    .exam-end-section .bot-btn-area .btns-primary {margin: 0 0 10px 0 !important; }
    .exam-end-section .bot-btn-area .btn-xbig {   padding: 20px 20px !important;     font-size: 1.4rem !important;   width: 100%;  }
    .exam-end-section .sub-stitle h3{font-size:1.8rem;}
    .exam-end-section h4 {
        font-weight: 600;
        font-size: 1.1rem;
        margin: 20px 0;
    }

    #sign-modal{width:100%;}
    #sign-modal .modal-dialog {
        width: 100%;
        margin: 30px auto;
    }
    #sign-modal .btn{font-size: 0.9rem !important;     padding: 6px 26px !important;}
    #heads-top-result {
        height: 180px;
    }
    .graph-write-section h2 {
        font-weight: 700;
        font-size: 2.2rem;
        text-align: center;
        letter-spacing: 0px;
    }
    .ik-card-blue {
        border: 1px solid #ddd;
        padding: 50px 10px;
        border-radius: 20px;
        background-color: rgba(181, 204, 255, 0.2);
        text-align: justify;
        line-height: 2rem;
    }

    .graph-write-section .card-body-basic h3 {
        text-align: center;
        font-size: 2.0rem;
        letter-spacing: 0px;
        margin-bottom: 30px;
    }
    .graph-write-section .card-body-basic .intro-txt {
        padding: 0 10px;
    }

    .pr-top {
        margin-top: 120px;
    }
    .ik-card .card-body-layout {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .ik-card .card-body-layout .card-left {
        padding: 5px 0px 20px 0;
        width: 100%;
    }
    .ik-card .card-body-layout .card-right {
        width: 100%;
    }
    .graph1 table {
        transform: scale(0.46); /* 테이블을 50%로 축소 */
        transform-origin: top left; /* 축소 기준점 설정 */
    }

    .mon-avi video {
        background: rgba(255, 255, 255,0) !important; /* 배경을 투명하게 설정 */
       }

    .nav-group-right li a{margin-left:0px;}

    .ul-table-qna .ul-top{display: none;}
    .ul-table-qna ul.ul-body{border:1px solid #ddd; border-radius: 2px; padding:10px; margin-bottom:10px; display: inline-block;}
    .ul-table-qna ul.ul-body li{border:0px !important; float:left;}
    .ul-table-qna ul.ul-body li:nth-child(1){display: none;}
    .ul-table-qna ul.ul-body li:nth-child(2){width:100%;  text-align: left !important;}
    .ul-table-qna ul.ul-body li:nth-child(3){display: none;}
    .ul-table-qna ul.ul-body li:nth-child(4){clear: both; float:left; width:50%; text-align: left !important;}
    .ul-table-qna ul.ul-body li:nth-child(5){ float:right; width:50%; text-align: right !important;}
    .ul-table-qna ul.ul-body li.re-cont em{display: none;}
    .ul-table-qna ul.ul-body li.re-cont span{visibility: hidden;}
    .ul-table-qna ul.ul-body li.re-cont span:before {visibility: visible; content: '[RE]'; color:#337ab7; font-size:14px; padding: 0;  margin: 0 -12px 0 0;}

    
    /*추가*/
    #intro-new .intro-area .intro-box{flex-direction: column;}
    #intro-new .intro-area { margin-top: 20px !important;}
    #intro-new {padding: 0 20px; background-size: contain;}
    #intro-new .intro-top-logo{padding: 30px 0 !important;}
    #intro-new .intro-top-logo img{height:20px !important;}
    #intro-new .intro-area .intro-area-top img { height: 30px !important;  }
    #intro-new .intro-area .intro-box{width:100%; margin-top: 30px !important;}
    #intro-new .intro-area .intro-area-bottom {letter-spacing: -1px !important; }
    #intro-new .intro-area .intro-box a{width:100%; height:260px; display: inline-block; margin:0; text-decoration: none; }
    #intro-new .intro-area .intro-box a .box-sanup{   
        height: 260px;
        width: 100%;
        padding: 40px 20px;
        background-image: url(/img/intro_sanup_bg.png);
        background-size: contain;
        background-position: center;
        display: inline-block;
        background-repeat: no-repeat;
    }
  
    #intro-new .intro-area .intro-box a .box-hostc{
        height: 260px;
        width: 100%;
        padding: 40px 20px;
        background-image: url(/img/intro_hostc_bg.png);
        background-size: contain;
        background-position: center;
        display: inline-block;
        background-repeat: no-repeat;
       
    }
    .news_grid .news_bbs {
        padding: 20px 5px 0 5px !important;
    }
    .news_grid .news_bbs dl {
        padding: 10px 5px !important;
        flex-direction: column !important;
    }
    .news_grid .news_bbs dl dt {
        font-size: 1rem !important;
        width: 100% !important;;
    }
    .news_grid .news_bbs dl dd {
        width: 100% !important;
        justify-content: flex-start !important;
        font-size: 1rem !important;
        padding: 5px 0 0 0 !important;
    }
    .news_grid .news_bbs dl dd img{display: none;}

    .site_grid a {
        min-height: 70px !important;
    }

    /*메인*/
    #navbar{padding:0; border-bottom: 1px solid #ddd;}
    #navbar .navbar-collapse{flex-direction: column; background-color: #fff;z-index: 1000;}
    .navbar:hover .subpage{display: none;}
    .navbar>.container-fluid{padding:0px;}
    .navbar-collapse {
        width: 100%; height:70vh;
    }
    .header_nav .navbar {       
        height: 70px !important;
    }
    a.logo {
        height: 70px !important;
        display: flex;
        align-items: center;
        margin-left:10px;
    }
    .navbar-toggler { 
        margin-right:10px;
    }
    .navbar ul.topmenu{flex-direction: column; width:100%; margin-top: 30px;}
    .navbar ul.topmenu li {       
        width: 100%; height: 60px; display: flex; justify-content: flex-start; padding-left:15%; align-items: center;
     }
    .navbar-toggler:focus { box-shadow: 0 0 0 0; }

    .header_nav .toplogin {
        width: 100%;
        text-align: center;
        padding: 20px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    .fp-viewing-0 header {
        background: #fff;
        border-bottom: 0px solid #CBCBCB;
    }
    .fp-viewing-0 header:hover {
        background: #fff;
        border-bottom: 0px solid #CBCBCB;
    }
    #header #logo img { max-height: 25px !important;  }
    .layer .main-area { margin-top: 30vh !important;}
    .main-area h1 { font-size: 2.2rem; margin-bottom: 150px;  }
    .main_alram {  bottom: 20vh !important; padding: 0 5% !important; }
    .main_alram ul {flex-direction: column !important;    }
    .main_alram ul li {width: 100% !important; padding:10px 0; } /* height:46px !important;*/
    .navbar-toggler {
        padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
        font-size: var(--bs-navbar-toggler-font-size);
        line-height: 1;
        color: #000 !important;
        background-color: transparent;
        border: 1px solid #000 !important;
        border-radius: var(--bs-navbar-toggler-border-radius);
        transition: var(--bs-navbar-toggler-transition);
    }

    ul.mlogin-area{padding:0; margin:0px;}
    ul.mlogin-area li{height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 15%;
        font-size: 1.2rem;
        font-weight: 500;}

    .popuparea .left_nav {
        display: none !important;
    }

    .popuparea .memo_area {
        width: 100%;
        padding: 100px 5% 5% 5%;
    }
    .popuparea .memo_area .popup_grid{flex-direction: column;}
    .popuparea .popbox{margin-bottom: 20px;}

    .newsarea .left_nav {display: none !important; }
    .newsarea .memo_area {
        width: 100%;
        padding: 100px 5% 5% 5%;
    }
    .memo_area h7 {
        padding-bottom: 20px !important;
    }
    .memo_area h5 {
        font-size: 2.6rem !important;
    }
    .popuparea {flex-direction: column !important; }
    .site_grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 4%;
        row-gap: 10px !important;
    }

    footer { padding: 10px 10px !important; }
    footer .copyright_area { flex-direction: column;  }
    footer .copyright_area .copy_logo{display: flex; flex-direction: row;}
    footer .copyright_area .copy1, footer .copyright_area .copy2{width:30%; padding:10px 20px;}
    footer .copyright_area .copy1 img, footer .copyright_area .copy2 img{ height:36px; }
    footer .copyright_area .copy3 ul li {
        list-style: none;
        color: #fff;
        font-weight: 400;
        padding: 2px 0;
        letter-spacing: 1px;
        text-align: left;
        font-size: 0.8rem;
        letter-spacing: -1px;
    }
    footer .copyright_area .copy3 {
        width: 100% !important;
        padding: 0px !important;
        margin-top: 15px;
    
    }

    footer .copyright_area .copy3 ul li span {
        margin-right: 10px !important;
    }

/*서브*/
#head {
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}
#head h4.menu_title {
    display: inline;
    background-color: var(--color-point);
    padding: 12px 40px !important;
    border-radius: 36px;
    color: #fff;
    letter-spacing: -1px;
    font-size: 1.4rem !important;
    /* min-width: 220px !important; */
    text-align: center;
}

#submenu {
    height: 40px;
    border-top: 1px solid rgba(238, 238, 238, 0.3);
    border-bottom: 1px solid #ddd;
    padding: 0 5px !important;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}
#submenu ul {
    justify-content: space-around !important;
    width: 100% !important;
}
#submenu ul li {
    margin-right: 0px !important;
    font-size: 1.0rem !important;
}

#subimg {
    margin-bottom: 30px !important;
    height: 0px;
}
#subimg img{display: none;}
#content-15 {
    padding: 0 20px !important;
}
.hello_area {
    flex-direction: column !important;
}
.hello_area .hello_left {
    width: 100% !important;
    margin-right: 0px !important;
    text-align: justify;
}
.hello_area p {
    font-size: 1.1rem !important;
}

.hello_area .hello_right {
    width: 100% !important;
    text-align: center;
    padding-top: 20px;
}

.history_area h3 {
    font-size: 2.0rem !important;
}

.row{padding-left:0px !important; padding-right: 0px !important;}
/* .row>* {padding-left:0px !important; padding-right: 0px !important;} */

.group_area .jo-1st{display: flex;  justify-content: center;  width: 100%;}
.jo-1st .txt-1st {
    width:100%;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    padding: 16px 50px;
    margin: 0px;
}
.jo-2st .liner {
    height: 60px;
    margin: 0 0 0 50% !important;
    border-left: 1px solid var(--color-border) !important;
    border-right:0px !important;
}
.jo-3st .linetrl {
    height: 0px !important;
    border-right: 0px solid var(--color-border) !important;
    border-left: 0px solid var(--color-border) !important;
    border-top: 0px solid var(--color-border) !important;
}
.jo-4st {
    display: flex;
    flex-direction: column !important;
    justify-content: space-between;
}
.sort-destination {
    display: grid;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 3%;
    row-gap: 30px !important;
}

.container{padding-left:0px !important; padding-right:0px !important;}
.jangbi .jangbi-title h3 {
    color: #000;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: -1px;
    padding: 10px 0 10px 0;
}
.jangbi .row {
    display: flex;
    flex-direction: column !important;
    margin: 60px 0;
}
.jangbi-pic {
    width: 100% !important;
    height: 240px;
    object-fit: cover;
    overflow: hidden;
}

.jangbi-text {
    width: 100%  !important;;
    padding: 10px 30px;
}
.jangbi-pic img{width:100%;}
.jangbi h5 {
    color: var(--color-point);
    font-size: 22px !important; 
    font-weight: 500;
}
.jangbide {
    margin: 20px 0 50px 10px !important;
}
.detjangbi {
    flex-direction: column !important;
}
.detjangbi .jangbi-area {
    width: 100% !important;
}
.map_area .ik-card-map {
    padding: 20px 10px !important;
}
.partner_area dd img{width:100%;}
.hello_area img{width:100%;}


.grid-col-procedure{  grid-template-columns: repeat(3, 1fr);}

.grid-col-procedure .item2{
    grid-column: span 2; /* 모바일에서도 마지막 셀은 2열 차지 */
  }
.board-bt{border-bottom:1px solid #000;}

.login_section .card{margin:0 20px;}
.login_section .card .card-body{flex-direction: column !important; padding:0px;}
.login_section .card .card-body .login_left {
    width: 100% !important;
}
.login_section .card .card-body .login_right {
    width: 100% !important;
    padding: 30px 0 0 0;
}
.login_section .card .card-body .login_top .col-auto {
    margin: 0 20px !important;
}

.login_section {
    margin: 50px 0 !important;
}

.join_section {
    margin-top: 100px;
    margin-bottom: 80px;
    padding:0 20px !important;
}
.join_section a.btn-big{margin:15px 0;}
.joinfrm_section{padding:0 20px;}
.joinfrm_section .card .card-body {
    padding: 30px 0px !important;
}
.table-dl-form dl {
    flex-direction: column !important;
}
.table-dl-form dl dt {
    width: 100% !important; 
}
.table-dl-form dl dd {
    width: 100% !important; 
}
.form-group {
    width: 100%;
}
.form-froup .control-label{padding:0 10px;}
.col-xs-3{width:30%;}
.col-xs-5{width:50%;}
.table-dl-form{display: flex; flex-direction: column; border-top: 2px solid #000;padding:0;}
.table-dl-form dl{display: flex; flex-direction: row; width:100%; padding:0; border-bottom: 1px solid #eee; margin:0px !important;}
.table-dl-form dl dt{
    display: flex; align-items: center; color:#000;
    justify-content: flex-start; padding: 14px 10px 6px 5px; font-weight: 500;  font-size: 1rem;
  }

.mobile-dl-dt dl{display: flex; flex-direction: row !important;}
.mobile-dl-dt dl dt{width:25% !important;}
.mobile-dl-dt dl dd{width:25% !important;}

  .add-detail {
    flex-direction: column !important;
   }
  .add-detail div{padding:3px 0;}
  .table-dl-form dl dd{ padding: 0px 10px 10px 5px;display: flex; justify-content: flex-start; align-items: center; font-weight: 500; color: #3f3f3f; margin-bottom:0px !important;
  font-size: 1rem;} 
  .table-dl-form dl dd.full{padding: 0px 10px 4px 5px;display: flex; justify-content: flex-start; align-items: center; font-weight: 400; color: #3f3f3f;}
  .table-dl-form dl dd input[type="radio"]{margin-right: 8px;  margin-bottom: 5px;}
  .table-dl-form dl dd span{padding: 0 12px; color: #3f3f3f;}


  .table-dl-form dl dd.tel-form input{width:28%;}
  .table-dl-form dl dd.tel-form select{width:28%;}
  .table-dl-form dl dd.cm-form{width:80%;}
  .table-dl-form dl dd.cm-form span{font-weight:600;}
  .table-dl-form dl dd.cm-form input{width:20%;}
  .table-dl-form dl dd.cm-form span.cm-form-cm{margin-right: 20%;}
  .table-dl-form dl dd.grade-form{width:80%;}
  .table-dl-form dl dd.grade-form span{font-weight:600;}
  .table-dl-form dl dd.grade-form input{width:22%; margin-right:40px;}
  .table-dl-form dl dd.grade-form select{width:22%;}
  .table-dl-form dl dd.histroy-form{width:80%; display: flex; justify-content: space-between;}
  .table-dl-form dl dd.histroy-form div{display: flex; flex-direction: row; font-weight:400;}
  .table-dl-form dl dd.histroy-form div span{display: flex; justify-content: center; align-items:center ; font-weight:600;}
  .table-dl-form dl dd.histroy-form div select{width:120px;}
  .table-dl-form dl dd.histroy-form div input{margin-left: 20px; font-weight:400;}
  .table-dl-form dl dd.pic-form{width:80%;}
  .table-dl-form dl dd.pic-form img{height:46px; width:auto;}
  .table-dl-form dl dd.pic-form input{width:50%; margin-left:30px;}
  .table-dl-form dl dd.pw-form{width:80%;}
  .table-dl-form dl dd.pw-form input{width:40%;}
  .table-dl-form dl dd.pw-form span{width:60%;}
  .table-dl-form dl dd.name-form{width:80%;}
  .table-dl-form dl dd.name-form input{width:40%;}
  .table-dl-form dl dd.email-form{width:80%;}
  .table-dl-form dl dd.email-form input{width:20%;}
  .table-dl-form dl dd.email-form select{width:20%;margin-left:10px;}
  .table-dl-form dl dd.web-form{width:80%;}
  .table-dl-form dl dd.web-form input{width:50%;}
  .table-dl-form dl dd.birth-form{width:80%;}
  .table-dl-form dl dd.birth-form input{width:10%;}
  .table-dl-form dl dd.sex-form input{margin-left:20px;}

  .table-dl-form dl dt strong{color: rgb(226, 0, 0); font-weight: 800; width:10px; margin-left: 5px;}
  .table-dl-form dl dd.address{width:80% !important;}
  .table-dl-form dl dd.address div{display: flex; flex-direction: row; width:100%; margin:5px 0;}
  .table-dl-form dl dd.address div.add-zip input{width:15%;}
  .table-dl-form dl dd.address div.add-zip span{display: flex; justify-content: center; align-items: center;}
  .table-dl-form dl dd.address div.add-detail input:nth-child(1){margin-right:15px;}
  .table-dl-form dl dd.address div.add-detail input:nth-child(2){margin-left:15px;}
  .table-dl-form dl dd.address div.add-zip .btn-zip-find{
    height: 46px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color:var(--blue-color);
    border: 1px solid var(--dblue-color);
    box-shadow: none;
    border-radius: 6px;
    padding:5px 25px;
    line-height: 33px;
    margin-left: 10px;
  }

.address ul{padding:0; margin:0;}
.address ul li{list-style: none;}

  .ik-card .card-body-twocell{width:100%;}
  .ik-card .card-body-twocell dl{display: flex; flex-direction: column; font-size: var(--font-table);  color:var(--color-tbtxt); width:100%; margin:0px; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
  .ik-card .card-body-twocell dl dt{width:100%;padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: start;
    font-weight: 500;
    background: rgba(255, 255, 255, 0);}
  .ik-card .card-body-twocell dl dt strong{color:#c00000; margin-left:3px; font-weight: 600;}
  
  .ik-card .card-body-twocell dl dd{width:100%; padding: 8px 15px;  margin: 0; display: flex; align-items: center;} /*display: flex; align-items: center; */
  .ik-card .card-body-twocell dl dd.nofl{display: block !important;}
  .ik-card .card-body-twocell dl dd.full{width:100%;}
  .ik-card .card-body-twocell dl dd bold{font-weight:500; margin-left:10px; }
  .ik-card dl dd strong{font-weight:500; margin-left:10px; color:rgb(155, 49, 49);}
  .ik-card .card-body-twocell dl dd em{font-style: normal; text-wrap: nowrap; margin:0 20px 0 10px;}
  .ik-card .card-body-twocell dl.tb-top{border-top: 2px solid var(--color-tbbgtop);}

  .hong_area .videointro {
    width: 100%;
  }

  .hong_area .videointro .ik-card {  padding: 30px 0px;}
  .hong_area .videointro .ik-card iframe {
    width: 100%;
    height: 260px !important;
}












  #checkIdModal .modal-body {
    padding: 30px 10px;
  }
  #checkIdModal .modal-body .col-8{width:60%;}
  #checkIdModal .modal-body .col-4{width:40%;}

  #content {
    padding: 50px 20px 80px 20px;
 }

 .list-search-area-one form ul li input{width:60%;;}

.edu_acc_create #subimg{display: none;}
.edu_acc_create #content { padding: 0px 20px 80px 20px;}
.edu_acc_create #content .joinfrm_section{padding:0;}
.edu_acc_create #content .table-dl-form { border-top: 0px solid #eee;}
.edu_acc_create #content .joinfrm_section .card .card-body {    padding: 0px 0px !important;}

.edu_acc_create #content .grid-col-6{grid-template-columns: 20% 1fr 40%;}
.edu_acc_create #content .grid-col-6 .cell-btn a {margin-left: 0px;}
.edu_acc_create #content .grid-col-6 .cell {font-size: 0.9rem !important; padding: 10px 4px !important;}
.control-label {
    margin: 10px;
}













}
































/* 아이폰 SE */

@media only screen and (min-device-width : 320px) and (max-device-width : 374px) {

}

/* 스마트폰 모바일(세로) */

@media only screen and (min-device-width : 375px) and (max-device-width : 479px) {

}

/* 스마트폰 모바일(가로) */

@media only screen and (min-device-width : 480px) and (max-device-width : 821px) {

    .header .menu-container {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .header .navbar-toggle {
        color:#000;
        width: 25px;
        height: 25px;
        border: none;
        padding: 0;
        margin: 0;
        position: absolute;
        right: 30px;
        top: 28px;
    }

    .header .navbar-toggle .toggle-icon:before {
        width: 26px;
        height: 2px;
        bottom: 12px;
        background: #000;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        transform: rotate(0);
        transition-duration: 300ms;
        transition-property: all;
    }


    .header .navbar-toggle .toggle-icon {
        position: relative;
        width: 26px;
        height: 2px;
        display: inline-block;
        background: #000;
        transition-duration: 300ms;
        transition-property: all;
    }

    .header .navbar-toggle .toggle-icon:after {
        width: 26px;
        height: 2px;
        top: -6px;
        background: #000;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        transform: rotate(0);
        transition-duration: 300ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    }



    .header .navbar-toggle:hover .toggle-icon {
        width: 26px;
        height: 2px;
        background: #000;
        transition-duration: 300ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    }
    .header .navbar-toggle:hover .toggle-icon:before, .header .navbar-toggle:hover .toggle-icon:after {
        width: 26px;
        height: 2px;
        background: #000;
        transition-duration: 300ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    }

    .header .logo {
        width: 60%;
        position: absolute;
        left: 20px;
    }
    .header .logo a {
        font-size: 1.2rem;
        width: 100%;
    }

    .footer .content .footer-area .footer-contact ul {
        display: flex;
        flex-direction: column;
        padding-left: 40px;
    }
    .footer .content .footer-area .footer-contact ul li{padding:6px 0;}









































}