html {overflow-x:hidden;}
body {min-width: 320px; width:100%; padding-top:60px;}

/*==========================================================================
                                공용
==========================================================================*/
.inwrap {max-width: 1840px; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.inwrap:after {content:''; display:block; clear:both;}
.rel-box {position:relative;}
.blinde {width:1px; height:1px; overflow:hidden; display:block;}
.hide {display:none;}
.clearB:after {content: ''; display: block; clear: both;}
.shadow-box {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0;}
.color-w {color:#fff !important;}
.info-txt {padding-left:20px; background: url('/resources/img/common/info-txt.png') no-repeat center left; background-size:13px; color:#d20505; font-weight: 500;}



.point-color01 {color:#055ED2 !important;}
.point-color02 {color:#83b2ef !important;}
.point-color03 {color:#efd915 !important;}



.sec-tit {font-size:30px; line-height: 1em; font-weight:500; color:#000; position:relative; padding-left:20px; margin-bottom:30px;}
.sec-txt {font-size:20px; font-weight:500; color:#000; position:relative; word-break: keep-all;}
.sec-tit.eng {font-weight:600;}
.sec-tit:before {content:''; width:10px; height:10px; position:absolute; top:50%; left:0; transform: translateY(-50%); background:#055ED2; display: block;}
.sec-tit.no-ico {padding-left:0;}
.sec-tit.no-ico:before {display:none;}

.centerBox {text-align: center; margin-bottom:30px;}
.centerBox .sec-tit {padding-left:0; margin-bottom:10px;}
.centerBox .sec-tit:before {display: none;}



/* ----------------------------------------------
 * Generated by Animista on 2021-7-7 11:15:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}





/* ----------------------------------------------
 * Generated by Animista on 2021-7-8 12:26:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-top
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}



/*==========================================================================
                                header
==========================================================================*/
#header {min-width:320px; width:100%; height:60px; background: #fff; padding:10px 0; box-sizing: border-box; border-bottom:1px solid #ccc; position:fixed; top:0; left:0; z-index: 99999;}
#header .inwrap {position: relative; height: 100%;}
.m-gnbBtn {display: none;}
.head-top-leftBox, .head-top-rightBox {position:absolute; top:50%; transform: translateY(-50%);}
.head-top-leftBox {left:20px;}
.head-top-rightBox {right:20px;}
.logo {width: 250px; height: 40px; display: inline-block; background: url('/resources/img/common/logo_m.png') no-repeat center; background-size: contain;}
.head-top-rightBox {float:right;}
.navi-box {width:calc(100% - 292px); padding-left:208px; padding-right:84px; display: block; text-align: center;}
.m-memBox {display: none;}
.navi-box .navi-menu {display: inline-block; margin-top:6px;}
.navi-box .navi-menu:after {content:''; display: block; clear: both;}
.navi-box .navi-menu li {float:left; margin-left:50px;}
.navi-box .navi-menu li:first-child {margin-left:0;}
.navi-box .navi-menu li > a span {font-size:18px; color:#000; font-weight:500; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;}
.navi-box .navi-menu li > a:hover span {color:#055ED2; border-bottom:2px solid #055ED2;}


.head-top-rightBox {}
.counsel-btn {padding:11px 16px; background:#055ED2; border-radius: 3px;}
.counsel-btn span {color:#fff;}




/*==========================================================================
                                footer
==========================================================================*/
#footer {padding:60px 0 80px; background:#333; position: relative;}
#footer .top-btn {width: 60px; height: 60px; border-radius: 50%; position: absolute; top: -80px; right: 20px; background: #d20505; display: block; text-align: center; opacity: 0; visibility: hidden; transition: 0.2s ease-out; -webkit-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -o-transition: 0.2s ease-out;}
#footer .top-btn span {color:#fff; line-height: 60px;}
#footer .top-btn.top-active {opacity: 1; visibility: inherit;}
#footer .inwrap {position: relative;}
#footer .inwrap:after {content: ''; display: block; clear: both;}
#footer .left-box {float:left;}
#footer .left-box .f-txtBox li {color:#fff; font-size:13px; line-height: 1.9em;}

#footer .right-box {position:absolute; top:0; right:20px;}
#footer .terms-list:after {content:''; display: block; clear: both;}
#footer .terms-list li {margin-left:10px; margin-top:0; padding-left:10px; float: left; position: relative;}
#footer .terms-list li:before {content:''; width:1px; height:80%; background:#fff; position:absolute; top:50%; left:0; transform: translateY(-50%);}
#footer .terms-list li:first-child {margin-left:0; padding-left:0;}
#footer .terms-list li:first-child:before {display: none;}
#footer .terms-list li a span {color:#fff; font-size:13px;}
.android-btn {max-width: 195px; width: 100%; padding: 14px 24px; background: #000; display: table; box-sizing: border-box; margin:20px 0 0 auto;}
.android-btn .logoBox, .android-btn .txtBox {display: table-cell; vertical-align: middle;}
.android-btn .logoBox {padding-right:10px;}
.android-btn .txtBox .s-txt {font-size: 12px; color: #999; letter-spacing: 0;}
.android-btn .txtBox .b-txt {font-size: 12px; font-weight: bold; letter-spacing: 0; color: #fff;}



/*==========================================================================
                                progress-Box
==========================================================================*/
.progress-Box {width: 100%; height:515px; overflow: hidden;}
.mul-table {width:100%;}
.mul-table:after {content:''; display:block; clear: both;}
.mul-table li {height:45px; float: left; text-align: center; padding:10px; box-sizing: border-box; border:1px solid #ccc; border-left:none; border-top:none;}
.mul-table li:first-child {border-left:1px solid #ccc;}
.mul-table li.name {width:10%;}
.mul-table li.class {width:45%;}
.mul-table li.loca {width:10%;}
.mul-table li.num {width:20%;}
.mul-table li.date {width:25%;}
.mul-table li > p {color:#000; font-size:16px;}

.progress-tit .mul-table li {float: left; text-align: center; background: #055ed2;}
.progress-tit .mul-table li > p {color:#fff;}


.progress-slide {opacity: 0;}
.progress-slide.slick-initialized {opacity: 1;}



/*==========================================================================
                            ★ Tablet (반응형) ★
==========================================================================*/
@media screen and (max-width:1200px) {


    .sec-tit {font-size: 25px; margin-bottom: 20px;}
    .sec-tit:before {width:10px; height:10px;}
    .sec-txt {font-size: 18px;}



    /*==========================================================================
                                    header
    ==========================================================================*/
    .logo {width: 160px; height: 32px;}
    .m-gnbBtn {width: 38px; height: 22px; display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); z-index: 20; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out;}
    .m-gnbBtn > span {width:28px; height:2px; background:#000; text-indent:-99999px; display:block; margin-left:auto; position:relative; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; font-size:0;}
    .m-gnbBtn > span:before {content:''; width:38px; height:2px; background:#000; position:absolute; top:10px; right:0; }
    .m-gnbBtn > span:after {content:''; width:22px; height:2px; background:#000; position:absolute; top:20px; right:0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out;}

    .m-gnbBtn.active {width:40px; height:40px;}
    .m-gnbBtn.active span {width:100%; -webkit-transform: translateY(19px) rotate(45deg); -ms-transform: translateY(19px) rotate(45deg); -o-transform: translateY(19px) rotate(45deg); transform: translateY(19px) rotate(45deg);}
    .m-gnbBtn.active span:before {opacity: 0;}
    .m-gnbBtn.active span:after {width:100%; -webkit-transform: translateY(-20px) rotate(-90deg); -ms-transform: translateY(-20px) rotate(-90deg); -o-transform: translateY(-20px) rotate(-90deg); transform: translateY(-20px) rotate(-90deg);}

    .navi-box {width: calc(100% - 208px); padding-left: 208px; padding-right: 0; display: block; text-align: inherit;}
    .navi-box .m-navi-container {display: none; width:100%; height: calc(100vh - 50px); padding:40px 20px; position: absolute; top: 50px; left: 0; background: #fff; box-sizing: border-box;}
    .m-memBox {display: block; width: 100%; border-bottom: 1px dashed #555; padding-bottom:20px; margin-bottom:20px;}
    .m-memBox:after {content:'' ; display: block; clear: both;}
    .m-memBox a {width: calc((100% - 10px) / 2); margin-left:10px; float: left; display: block; padding:10px; text-align: center; box-sizing: border-box; border-radius: 5px;}
    .m-memBox a:first-child {margin-left:0;}
    .m-memBox a.login {background:#055ED2;}
    .m-memBox a.logout {background:#d20505;}
    .m-memBox a.join {background:#D18A04;}
    .m-memBox a span {font-size: 16px; color:#fff;}
    .navi-box .navi-menu {display: block; width: 100%; margin-top: 0;}
    .navi-box .navi-menu li {float:none; width: 100%; margin:20px 0 0 0;}
    .navi-box .navi-menu li:first-child {margin-top:0;}
    .navi-box .navi-menu li a span {font-size: 25px;}
    .navi-box .navi-menu li a:hover span {color:#000; border-bottom:none;}
    .head-top-rightBox {display: none;}
}



/*==========================================================================
                            ★ mobile (반응형) ★
==========================================================================*/
@media screen and (max-width:980px) {


    .sec-tit {font-size: 20px; margin-bottom: 20px;}
    .sec-tit:before {width:8px; height:8px;}
    .sec-txt {font-size: 14px;}



    /*==========================================================================
                                    footer
    ==========================================================================*/
    #footer {padding:40px 0 60px; background:#333; position: relative;}
    #footer .top-btn {width: 40px; height: 40px; border-radius: 0; top: -40px; right: 0px;}
    #footer .top-btn span {line-height: 40px; font-size:12px;}



    #footer .right-box {position: relative; top: 0; right: 0; text-align: center;}
    #footer .right-box .terms-list {display: inline-block; width: inherit;}
    .android-btn {margin: 20px auto; text-align: left;}
    #footer .left-box {float: none; text-align: center;}



    /*==========================================================================
                                    progress-Box
    ==========================================================================*/
    .mul-table li.name {width:20%;}
    .mul-table li.class {width:45%;}
    .mul-table li.loca {display: none;}
    .mul-table li.num {display: none;}
    .mul-table li.date {width:35%;}
    .mul-table li > p {font-size:14px;}
}