@charset "UTF-8";

@media screen and (max-width: 640px) {
    
    body { background-attachment: fixed; max-width: 100%; overflow-x: hidden;  overflow-y: scroll; word-break: keep-all !important; padding: 0 10px; }
    
#header { text-align: center; }
#header h1 { text-indent: -9999px; background: url('../img/logo.png') no-repeat center bottom; padding: 22px 0 0; width:100%; height: 52px; }
    
    
#title { margin-top: 50px; margin-left: 0; }
#title h2 { font-size: 30px; line-height: 35px; width: 100%; }
#title h3 { margin-top: 20px;  font-size: 18px; line-height: 25px; font-weight: 400;}
    
    
#gnb_box { position: static; left: 0; right: 0; width: 100%; margin: 30px 0 0; }
#gnb_box > li { clear:both; width: 100%;; height: auto; box-sizing: border-box; margin: 5px auto; }
#gnb_box li a { width: 100%; height: auto; padding: 15px; border: 14px solid rgba(255,255,255,0.6); }
#gnb_box li a p { clear: both;  font-size: 20px; text-transform: uppercase; font-weight: 800; line-height: 25px; letter-spacing: -0.02em;}
#gnb_box li a ul { position: static; margin: 10px 0 0; max-width: 100%; }
#gnb_box li a li { clear: both; background: url('../img/list_bar.png') no-repeat left top 10px; line-height: 21px; padding-left: 15px; font-size: 16px; font-weight: 300; }
#gnb_box li a:hover { border-color: #ffffff; }
#gnb_box li a:hover p { color: #ff9c00; }

#gnb_box #menu01 { margin-left: 328px;}

.footer { position: static; margin: 30px 0 20px; font-size: 14px; }


.ly_pop { padding: 70px 10px 50px; 10px; height: auto; }
.ly_pop .close_btn { width:30px; height: 30px; top: 20px; right: 20px;}
.ly_pop .close_btn img { width: 30px; height: 30px;}

.ly_pop h2 { margin-top: 20px; font-size: 30px; line-height: 35px; }
.ly_pop h3 { clear: both; font-size: 18px; line-height: 25px; margin-top: 20px; }
.ly_pop .img { clear: both; margin: 30px auto 50px; }
.ly_pop .img img { width: 100%;}
#menu02_pop .img { margin-top:20px;}

.ly_pop article { clear: both;  margin: 30px auto 0;}
.ly_pop article h4 { max-width: 100%; height: 50px; line-height: 30px; margin-bottom: 15px;
                    padding-left: 15px; border: 10px solid rgba(255, 255, 255, 0.6);
                    font-size: 18px;}
.ly_pop article h5 { font-size: 18px; margin: 20px auto 0;}
.ly_pop article li { font-size: 14px; line-height: 20px; clear: both; color: rgba(255, 255, 255, 0.6);
                    background: url('../img/list_bar.png') no-repeat left top 8px; padding-left: 10px; margin-left:15px;  }

.ly_pop article li .sub_list { margin-bottom: 15px;}
.ly_pop article li .sub_list li { font-size: 13px; line-height: 16px; background: none; list-style: disc; padding:0; margin-left: 15px; }


    .enterline { display: block;}

    /*mobile col*/
    .mcol, .col { float: left; padding: 0 5px 0; box-sizing: border-box; word-break: keep-all; word-wrap: break-word; }
    .mcol, .col * {  word-break: keep-all; word-wrap: break-word; }
    .mcol1 { width: 100% !important; padding: 0; }
    .mcol2 { width: 50% !important; }
    .mcol3 { width: 33.3% !important; }
    .mcol4 { width: 25% !important; }
    .mcol5 { width: 20% !important; }
    .mcol6 { width: 16.66% !important; }
    .mcol7 { width: 14.28% !important; }
    .mcol8 { left; width: 12.5% !important; }
    .mcol9 { left; width: 11.11% !important; }
    .mcol10 { left; width: 10% !important; }

    .mcol30 { width: 30% !important; }
    .mcol40 { width: 40% !important; }
    .mcol50 { width: 50% !important; }
    .mcol60 { width: 60% !important; }
    .mcol70 { width: 70% !important; }
    .mcol80 { width: 80% !important; }
    .mcol90 { width: 90% !important; }
    
    .mm_top0 { margin-top: 0px !important; }
    .mm_top10 { margin-top: 10px !important; }
    .mm_top20 { margin-top: 20px !important; }
    .mm_top30 { margin-top: 30px !important; }
    .mm_top40 { margin-top: 40px !important; }
    .mm_top50 { margin-top: 50px !important; }

    .mm_bottom0 { margin-bottom: 0px !important; }
    .mm_bottom10 { margin-bottom: 10px !important; }
    .mm_bottom20 { margin-bottom: 20px !important; }
    .mm_bottom30 { margin-bottom: 30px !important; }
    .mm_bottom40 { margin-bottom: 40px !important; }
    .mm_bottom50 { margin-bottom: 50px !important; }

    .mm_left0 { margin-left: 0px !important; }
    .mm_left10 { margin-left: 10px !important; }
    .mm_left20 { margin-left: 20px !important; }
    .mm_left30 { margin-left: 30px !important; }
    .mm_left40 { margin-left: 40px !important; }
    .mm_left50 { margin-left: 50px !important; }

    .mm_right0 { margin-right: 0px !important; }
    .mm_right10 { margin-right: 10px !important; }
    .mm_right20 { margin-right: 20px !important; }
    .mm_right30 { margin-right: 30px !important; }
    .mm_right40 { margin-right: 40px !important; }
    .mm_right50 { margin-right: 50px !important; }

    .mp_top0 { padding-top: 0px !important; }
    .mp_top10 { padding-top: 10px !important; }
    .mp_top20 { padding-top: 20px !important; }
    .mp_top30 { padding-top: 30px !important; }
    .mp_top40 { padding-top: 40px !important; }
    .mp_top50 { padding-top: 50px !important; }

    .mp_bottom0 { padding-bottom: 0px !important; }
    .mp_bottom10 { padding-bottom: 10px !important; }
    .mp_bottom20 { padding-bottom: 20px !important; }
    .mp_bottom30 { padding-bottom: 30px !important; }
    .mp_bottom40 { padding-bottom: 40px !important; }
    .mp_bottom50 { padding-bottom: 50px !important; }

    .mp_left0 { padding-left: 0px !important; }
    .mp_left10 { padding-left: 10px !important; }
    .mp_left20 { padding-left: 20px !important; }
    .mp_left30 { padding-left: 30px !important; }
    .mp_left40 { padding-left: 40px !important; }
    .mp_left50 { padding-left: 50px !important; }

    .mp_right0 { padding-right: 0px !important; }
    .mp_right10 { padding-right: 10px !important; }
    .mp_right20 { padding-right: 20px !important; }
    .mp_right30 { padding-right: 30px !important; }
    .mp_right40 { padding-right: 40px !important; }
    .mp_right50 { padding-right: 50px !important; }
}