@media screen and (max-width:767px) {
/*로그인스킨*/
#login_wrap {width:100%;  background:#f7f7f7; padding:30px;}
.login_top {width:100%; height:auto; border-bottom:1px solid #eaeaea; margin-bottom:20px; padding-bottom: 20px;}
.login_top h2 {font-size:20px; color:#4b4f58; line-height:1; font-weight:600;}
.login_top h2 span {display: block; font-size:12px; font-weight:400; margin-top: 5px; line-height: 18px}
.login_mid {display: block; justify-content: space-between; width:100%; overflow: hidden;}
.login_mid .login_con { width:100%; height:100%; }
.login_mid .login_con h2 {text-align:center; color:#222; font-size:40px; margin-bottom:20px;}
.login_mid .login_con .login_id {width:100%; height:35px; background:#fff; border:1px solid #fff; margin-bottom:10px;}
.login_mid .login_con .login_id #mb_id {height:100%; width:90%; border:none; background:none; font-size:14px; color:#666; line-height:40px; vertical-align: top;}
.login_mid .login_con .login_pw {width:100%; height:35px; background:#fff; border:1px solid #fff; margin-bottom:20px;}
.login_mid .login_con .login_pw #mb_pass {height:100%; width:90%; border:none; background:none; font-size:14px; color:#666; line-height:40px; vertical-align: top;}
.login_mid .login_con span {display:inline-block;width:10%; height:100%; text-align:center; line-height:40px; }
.login_mid .login_con span img {vertical-align:0; width: 14px;}
.login_mid .login_con input::placeholder {font-size:12px; color:#c3c3c3;}
.login_mid .login_con input::-webkit-input-placeholder { /* Chrome/Opera/Safari */font-size:12px; color:#c3c3c3;}
.login_mid .login_con input::-moz-placeholder { /* Firefox 19+ */font-size:12px; color:#c3c3c3;}
.login_mid .login_con input:-ms-input-placeholder { /* IE 10+ */font-size:12px; color:#c3c3c3;}
.login_mid .login_con input:-moz-placeholder { /* Firefox 18- */font-size:12px; color:#c3c3c3;}
.login_mid .login_btn {width:100%; height:45px; margin-top:20px;}
.login_mid .login_btn button {width:100%; height:100%; background:#4b4f58; border:1px solid #4b4f58; text-align:center; color:#fff; font-size:15px; line-height:43px;}
.login_mid .login_bottom {text-align:center;}
.login_mid .login_bottom li {display:inline-block; margin-left:8px; padding-left:10px; position:relative; line-height:1;}
.login_mid .login_bottom li::before {width:1px; height:10px; background:#ddd; content:''; position:absolute; left:0; top:2px;}
.login_mid .login_bottom li:first-child {margin-left:0; padding-left:0;}
.login_mid .login_bottom li:first-child::before {display:none;}
.login_mid .login_bottom li a {color:#666; font-size:12px; line-height:15px;}
.login_mid .login_bottom li a img {vertical-align:middle; margin-right:5px;}
.login_mid .login_bottom li label {color:#666; font-size:12px; line-height:15px;}
.login_mid .login_bottom li input[type="checkbox"] {vertical-align:-3px;}
.login_mid .login_bottom li .naver_login {display:inline-block; background: #00ce38; width: 200px; height: 35px; font-size: 14px; color: #fff; text-align: center; 
line-height: 35px; border-left: 1px solid #DDD; border-radius: 5px; vertical-align: middle;}
.login_mid .login_bottom li .naver_login img {vertical-align:-1px;}
.login_mid .login_img {width:100%; margin-top: 20px;}
.login_mid .login_img .img_wrap{position:relative; padding-bottom: 42.3%;}
.login_mid .login_img .img_wrap img{position:Absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height:100%;}

.center{text-align:center;}
.pc_img {display:none;}
.tab_img {display:none;}
.mob_img {display:block;}
.pc {display:none;}
.tab {display:none;}
.mob {display:block;}

/* === Main === */
#wrap {position:relative; width:100%; max-width:767px; min-width: 375px; margin:0 auto; overflow:hidden; word-break: keep-all;}
.inner{width:100%; margin:0 auto; padding: 0 2.66%;}

/* header */
#header{height: 60px;}
#header .inner{height: 100%;}
#header h1 a{width: 150px; height: 29px;}
#header .h_right{gap:20px;}
#header .h_right a{font-size: 0.813rem; white-space: nowrap;}
#header .h_right a img{width: 12px; margin-right: 8px;}
#header .h_right a:not(:last-child)::after{right: -10px;}

#header.on{background: var(--co02);}

.nav_btn{position: relative; display: block; width: 20px; height: 14px; display: flex; flex-direction: column; justify-content: space-between;}
.nav_btn span{width: 100%; height: 2px; background: #fff; border-radius:2px;}

.nav_btn.on {justify-content: center;}
.nav_btn.on span:nth-child(1) {transform: rotate(45deg);position: absolute;}
.nav_btn.on span:nth-child(2) {opacity: 0;}
.nav_btn.on span:nth-child(3) {transform: rotate(-45deg);position: absolute;}


/* navigation */
.navigation{position: fixed;left: 0;top: 60px;width: 100%;height: 100%;z-index: 3500; display:none;}
.navigation .lnb{position:absolute; top: 0; z-index:5000; width:50%;background-color:#fff;height:100%; right: 0px; }
.navigation.on{display:block;}
.navigation h3{width:100%;}
.navigation h3.active a:after{background:url(/images/main/main_nav_arw_tab.png)center no-repeat; background-size:cover; width: 13px; height: 7px;}
.navigation h3 a{position: relative;line-height: 45px;width:100%; display: flex;align-items: center;padding: 0 10px;color:#222222;font-size:0.875rem;font-weight: 600; border-bottom:1px solid #dddddd;}
.navigation h3.active a{border-bottom: 1px solid var(--co01);}
.navigation h3 a:after{content:"";position: absolute;top: 50%;transform:translateY(-50%);right: 20px;width: 13px;height: 7px;background:url(/images/main/main_nav_arw2_tab.png)center no-repeat;background-size:cover ;}
.navi_bg{display: none;position: absolute;top: 60px;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 1000;} 


/* visual */
#visual_wrap{position: relative;}
#visual_wrap .txt_wrap{position: absolute; right: 8%; top: 60%; transform:translateY(-50%); /* transform:translate(-50% , -50%); */}
#visual_wrap .txt_wrap p{font-size: 1.5rem; font-family: 'roboto'; font-style: italic; line-height: 1.4; color: #fff; text-align: right; word-break:keep-all;}
#visual_wrap .txt_wrap h2{font-size: 2.5rem; font-weight: 700; line-height: 1.4; padding-top: 0; color: #fff; text-align: right; word-break:keep-all;}


/* footer */
#footer{background: var(--co01); padding-block:30px;}
#footer .inner{display: flex; justify-content: space-between; flex-direction: column-reverse; gap:15px;}
#footer h2 img{width: 150px;}
#footer .footer_info ul{display: flex; gap:20px;}
#footer .footer_info ul li{position: relative;}
#footer .footer_info ul li:not(:last-child)::after{content:''; position: absolute; right: -10px; top: 50%; transform:translateY(-50%); width: 1px; height: 80%; background: #fff;}
#footer .footer_info ul li a{font-size: 0.75rem; color: #eee;}
#footer .add_wrap{width: 100%; display: flex; gap:2px 15px; flex-wrap:wrap; margin-block:10px; color: #fff; font-size: 0.75rem;}
#footer .add_wrap p{position: relative; line-height: 1.4;}
#footer .add_wrap p:not(:last-child)::after{content:''; position: absolute; right: -7px; top: 4px; transform:none; width: 1px; height: 10px; background: rgba(221, 221, 221, 0.87);}
#footer .copy{font-size: 0.75rem; color: rgba(221, 221, 221, 0.87);}

/* sub */
#header.sub_header{position: relative; background: var(--co02);}

#sub_visual_wrap {position:relative;}
#sub_visual_wrap .visual_bg{height: 250px;}
#sub_visual_wrap .txt_wrap {position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; line-height:1;}
#sub_visual_wrap .txt_wrap h2 {margin-bottom:30px; font-size:2rem; color:#fff; font-weight:600;}

#sub_contents{padding-block: 70px 100px;}

.sub0101_wrap .img_box{display: flex; flex-direction: column; align-items: center;}
.sub0101_wrap .img_box img{width: 100%;}

.sub0201_wrap .img_box img{width: 100%;}

}