@charset "utf-8";
/* latest version 20110201 */
/* ************************************** *
 * common layout
 * ************************************** */
#wrap { max-width: 640px; margin: 0 auto;}




/* ************************************** *
 * header layout
 * ************************************** */
/* header */
#header { position: relative; z-index: 30; width: 100%;}
#header h1 { padding: 25px 0; text-align: center;}
/* lnb&gnb */
.btn-call { position: absolute; top: 18px; left: 3%;}
.btn-sitemap { position: absolute; top: 18px; right: 3%;}
.sitemap-over { display: none; z-index: 201; position: fixed; top: 0; right: 0; width: 50%; height: 100%; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); -ms-box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.sitemap-over .btn-close { z-index: 202; position: absolute; top: 35px; right: 35px; cursor: pointer;}
.sitemap-navi { padding: 100px 35px 40px;}
.sitemap-navi > li > a { display: block; padding-left: 4%; box-sizing: border-box; font-size: 27px; font-weight: 200; letter-spacing: -0.075em; line-height: 70px; color: #222; border-top: solid 1px #ccc;}
.sitemap-navi > li.on > a { font-weight: bold; color: #7953c0;}
.sitemap-dep2 { display: none; padding: 10px 0; background: #f1f1f1; border-top: solid 1px #ccc;}
.sitemap-dep2 li a { display: block; padding-left: 7%; font-size: 14px; line-height: 30px; color: #555;}
#lnb { z-index: 200; position: relative; width: 100%;}
#lnb .lnb-navi > li { float: left; width: 20%; text-align: center;}
#lnb .lnb-navi > li > a { display: block; line-height: 58px; background: #7953c0; font-weight: 500; font-size: 17px; color: #fff; letter-spacing: -0.04em; box-sizing: border-box; border-left: solid 1px rgba(255,255,255,.2);}
#lnb .lnb-navi > li.on > a { color: #9f8fe9; background: #222;}
#lnb .lnb-dep2 { display: none; z-index: 200; position: absolute; left: 0; top: 58px; width: 100%; padding: 20px 5%; box-sizing: border-box; background: rgba(0,0,0,.7); text-align: left;}
#lnb .lnb-dep2 > li { float: left; width: 48%; margin: 3px 1%;}
#lnb .lnb-dep2 > li > a { display: block; font-size: 15px; padding: 0 15px; color: #fff; line-height: 38px; background: #222;}
#lnb .lnb-dep2 > li > a:hover,
#lnb .lnb-dep2 > li.on > a { background: #7953c0;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:480px) {
    /* header */
    #header h1 { padding: 17px 0; text-align: center;}
    #header h1 img { width: 170px;}
    /* lnb&gnb */
    .btn-call img,
    .btn-sitemap img { width: 45px;}
    .sitemap-over { width: 70%;}
    .sitemap-over .btn-close { top: 25px; right: 25px;}
    .sitemap-over .btn-close img { width: 22px;}
    .sitemap-navi { padding: 70px 25px 30px;}
    .sitemap-navi > li > a { font-size: 18px; line-height: 50px;}
    #lnb .lnb-navi > li > a { line-height: 46px; font-size: 13px;}
    #lnb .lnb-dep2 { top: 46px; padding: 15px 5%;}
    #lnb .lnb-dep2 > li a { font-size: 13px; line-height: 32px;}
}





/* ************************************** *
 * main layout
 * ************************************** */
/* 공통 */
h2.tit-main { display: inline-block; margin: 70px auto 40px; border-bottom: solid 1px #333; font-size: 30px; color: #333; text-transform: uppercase; line-height: 1.2em;}
/* 메인비주얼 */
.main-visual { text-align: center;}
.main-visual img { max-width: 100%;}
/* 커리큘럼 */
.curriculum { width: 100%; margin: 0 auto 80px;}
.curriculum li { position: relative; float: left; width: 50%; background-size: cover !important; background-position: left bottom !important;}
.curriculum li:nth-of-type(1) { background: url('image-renew/bg-hair-curr.jpg') no-repeat;}
.curriculum li:nth-of-type(2) { background: url('image-renew/bg-makeup-curr.jpg') no-repeat;}
.curriculum li:nth-of-type(3) { background: url('image-renew/bg-nail-curr.jpg') no-repeat;}
.curriculum li:nth-of-type(4) { background: url('image-renew/bg-esthetic-curr.jpg') no-repeat;}
.curriculum li:nth-of-type(5) { background: url('image-renew/bg-special-curr.jpg') no-repeat;}
.curriculum li:nth-of-type(6) { background: url('image-renew/bg-college-curr.jpg') no-repeat;}
.curriculum li a { display: block; width: 100%; height: 230px;}
.curriculum li div { position: absolute; left: 9%; top: 37%;}
.curriculum li h3 { font-size: 23px; color: #333; letter-spacing: -0.05em;}
/* 작은롤링 */
.mini-rolling { width: 100%; padding-bottom: 30px; text-align: center;}
.mini-rolling img { max-width: 100%;}
/* 뉴스 */
.news-rolling { width: 75%; margin: 0 auto;}
.news-rolling .news-in .img-box { overflow: hidden; max-width: 100%; height: 250px; border: solid 1px #dbdbdb; box-sizing: border-box;}
.news-rolling .news-in .img-box i { display: block; height: 100%; transform: scale(1,1); transition: all 0.3s ease-out 0s;}
.news-rolling .news-in .img-box:hover i { transform: scale(1.1,1.1);}
.news-rolling .news-in a { display: block;}
.news-rolling .news-in a .p-subject { padding-top: 25px; overflow: hidden; max-height: 50px; font-size: 18px; color: #222; letter-spacing: -0.03em; line-height: 1.4em;}
.news-rolling .news-in a .p-con { padding: 15px 0; font-size: 14px; color: #555; letter-spacing: -0.03em; line-height: 1.7em;}
.news-rolling .news-in a .p-date { font-size: 14px; color: #888; letter-spacing: -0.03em;}
/* 포트폴리오 */
.portfolio-wrap { position: relative; margin-bottom: 80px;}
.portfolio-wrap .btn-more { position: absolute; top: 85px; right: 0; font-size: 13px; color: #939393;}
.portfolio-box { overflow-x: scroll; padding-bottom: 20px;}
.portfolio-box::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -ms-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -o-box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 10px; background-color: #F5F5F5;}
.portfolio-box::-webkit-scrollbar { height: 7px; background-color: #F5F5F5;}
.portfolio-box::-webkit-scrollbar-thumb { border-radius: 7px; box-shadow: inset 0 0 6px rgba(0,0,0,.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -ms-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -o-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #999;}
.portfolio-box ul { width: 990px;}
.portfolio-box li { float: left; width: 22%; margin: 0 1.5%; text-align: center;}
.portfolio-box li .img-box { overflow: hidden; max-width: 100%; height: 150px; border: solid 1px #dbdbdb; box-sizing: border-box;}
.portfolio-box li .img-box i { display: block; height: 100%; transform: scale(1,1); transition: all 0.3s ease-out 0s;}
.portfolio-box li .img-box:hover i { transform: scale(1.1,1.1);}
.portfolio-box li a { display: block;}
.portfolio-box li a .p-subject { padding-top: 15px; font-size: 16px; color: #333; letter-spacing: -0.03em; word-break: break-all; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.no-img { position: relative; width: 100%; height: 100%; background: #eee; text-align: center;}
.no-img span { position: absolute; top: 50%; left: 50%; color: #797979; font-weight: bold; font-size: 15px; letter-spacing: 0; text-transform: uppercase; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}
/* 메인게시판 */
.main_board .tab_nav li { float: left; width: 31.33%; margin: 0 1%;}
.main_board .tab_nav a { display: block; line-height: 45px; background: #fff; border: 2px solid #7953c0; font-size: 17px; letter-spacing: -0.05em; text-align: center; color: #444;}
.main_board .tab_nav li.on a { color: #fff; background: #7953c0; font-weight: bold;}
.main_board .tab_cont { padding-top: 20px;}
.main_board .tab_cont > li { display: none;}
.main_board .tab_cont > li.on { display: block;}
.main_board .tab_cont > li p { padding-left: 20px; margin-bottom: 10px; background: url("image/ico_list_dot.gif") no-repeat 5px center; box-sizing: border-box;}
.main_board .tab_cont > li p a { display: block; color: #555; font-size: 18px; letter-spacing: -0.04em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:480px) {
    /* 공통 */
    h2.tit-main { margin: 50px auto 30px; font-size: 22px;}
    /* 커리큘럼 */
    .curriculum { margin: 0 auto 50px;}
    .curriculum li a { height: 140px;}
    .curriculum li h3 { font-size: 17px;}
    /* 뉴스 */
    .news-rolling .news-in .img-box { height: 150px;}
    .news-rolling .news-in a .p-subject { max-height: 42px; font-size: 16px;}
    .news-rolling .news-in a .p-con { padding: 10px 0; font-size: 13px; max-height: 55px; overflow: hidden;}
    .news-rolling .news-in a .p-date { padding-top: 10px; font-size: 12px;}
    /* 포트폴리오 */
    .portfolio-wrap { margin-bottom: 50px;}
    .portfolio-wrap .btn-more { top: 55px;}
    .portfolio-box::-webkit-scrollbar { height: 4px;}
    .portfolio-box li a .p-subject { padding-top: 10px; font-size: 14px;}
    /* 메인게시판 */
    .main_board .tab_nav a { line-height: 34px; font-size: 14px;}
    .main_board .tab_cont { padding-top: 15px;}
    .main_board .tab_cont > li p { padding-left: 17px;}
    .main_board .tab_cont > li p a { font-size: 14px;}
}





/* ************************************** *
 * sub layout
 * ************************************** */
/* 컨텐츠영역 */
#container { z-index: 1; width: 100%;}
#content { min-height: 500px; width: 90%; margin: 0 auto 80px; overflow: hidden;}
#content img { max-width: 100%; height: auto;}
/* stle */
#stle h2 { padding: 45px 0 20px 0; margin-bottom: 40px; font-size: 32px; background:url('image/bg_stle.gif') no-repeat bottom center; font-weight: lighter; letter-spacing: -0.075em; text-align: center;}
/* tab */
.tab ul { margin: 0 auto 40px; width: 100%;}
.tab ul:after { content: ""; display: block; clear: both;}
.tab li { float: left; width: 32%; margin: .5%;}
.tab li a { display: block; padding: 7px 0; font-size: 11px; border: solid 1px #aaa; color: #444; text-align: center;}
.tab .on a { border: solid 1px #7953c0; background: #7953c0; color: #fff; font-weight: bold;}
.wd50 li { width: 49%;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:480px) {
    /* 컨텐츠영역 */
    #content { margin: 0 auto 50px;}
    /* stle */
    #stle h2 { padding: 30px 0 20px 0; margin-bottom: 30px; font-size: 26px;}
}





/* ************************************** *
 * footer layout
 * ************************************** */
/* footer */
.foo-call { padding: 23px 0; background: #e9e9e9; text-align: center;}
.foo-call a { display: inline-block; padding-left: 140px; height: 90px; margin: 0 auto; background: url('image-renew/bg-bot-call.png') no-repeat left center; box-sizing: border-box;}
.foo-call p:nth-of-type(1) { padding-top: 12px; font-size: 14px; color: #7849d0; letter-spacing: -0.04em;}
.foo-call p:nth-of-type(2) { font-size: 37px; font-weight: 700; color: #111;}
.btn-kakao a { display: block; width: 100%; background: #ffc50c; font-size: 27px; font-weight: bold; line-height: 90px; text-align: center; color: #3a2020;}
#footer { width: 100%; padding: 40px 0; border-top: 1px solid #3e3e3e; z-index: 1; letter-spacing: -0.03em;}
#footer .foo-links,
#footer .foo-quick { display: table; margin: 0 auto;}
#footer .foo-links li { float: left; margin-right: 20px;}
#footer .foo-links li a { display: block; font-size: 16px; color: #333;}
#footer address { padding: 25px 0 35px; font-size: 16px; color: #555; line-height: 1.7em; text-align: center;}
#footer address span { margin-right: 20px;}
#footer address a { color: #7849d0;}
#footer .foo-quick li { float: left; margin: 0 3px;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:480px) {
    /* footer */
    .foo-call { padding: 17px 0;}
    .foo-call a { padding-left: 80px; height: 55px; background-size: 65px;}
    .foo-call p:nth-of-type(1) { padding-top: 0; font-size: 12px;}
    .foo-call p:nth-of-type(2) { font-size: 30px;}
    .btn-kakao a { font-size: 17px; line-height: 57px;}
    #footer { padding: 27px 0;}
    #footer .foo-links li a { font-size: 13px;}
    #footer address { padding: 15px 0 25px; font-size: 13px;}
    #footer .foo-quick li img { width: 45px;}
}









/* pop_policy */
.pop_policy { position:fixed; top:10%; left:10%; overflow:hidden; z-index:10; max-width:480px; width:70%; padding:20px; border:solid 1px #ccc; background:#fff; text-align:left;}
.pop_policy h1 { padding-bottom:15px; margin-bottom:15px; border-bottom:dotted 1px #333; font-weight:bold; font-size:15px; letter-spacing:-0.05em; text-align:center;}
#mainPolicy .privacy_box { height:200px; overflow-y:scroll;}
#emailReject .privacy_box { height:120px;}
.pop_policy .privacy_box h2 { color:#7849d0; font-size:13px; font-weight:bold; letter-spacing:-0.05em; line-height:2.0em;}
.pop_policy .privacy_box p { font-size:11px; color:#434343; letter-spacing:-0.05em; line-height:1.5em; padding-bottom:15px;}
.pop_policy .privacy_box .list li { padding:0 0 5px 0; color:#797979; font-size:11px; letter-spacing:-0.05em; line-height:1.4em;}

/* css3 버튼공통 */
.btn_comment_save input { display:inline-block; width:125px; height:32px; padding-left:20px; margin-top:-2px; border:0; font-size:13px; font-weight:bold; background:url('./image/btn_comment_save.gif') no-repeat; color:#2a2a2a; letter-spacing:-0.075em; vertical-align:middle;}

/* CSS 버튼 기본 */
.btn { font-weight:400; position:relative; display:inline-block; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; text-align:center; white-space:nowrap; border-width:1px; border-style:solid; border-color:transparent; background-image:none; -o-user-select:none;}
.btn { border-radius: 3px; min-width:34px;}
.btn.active, .btn:active { outline:0; background-image: none; -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125); box-shadow:inset 0 3px 5px rgba(0,0,0,.125);}
.btn { -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out;}

/* CSS 버튼 크기 */
.btn_small { font-size:11px; padding:0 10px; line-height:20px; min-width:40px; height:22px;}
input.btn_small,
button.btn_small { font-size:11px; padding:0 10px; line-height:20px; min-width:40px; height:24px; vertical-align:top;}
.btn_medium { font-size:13px; padding:0 10px; line-height: 28px; height: 30px;}
input.btn_medium,
button.btn_medium { font-size:13px; padding:0 10px; line-height: 28px; height: 32px; vertical-align:top;}
.btn_large { font-size:14px; padding:0 20px; line-height:32px; height:34px;}
input.btn_large,
button.btn_large { font-size:14px; padding:0 20px; line-height:32px; height:36px; vertical-align:top;}
.btn_grand { font-size:16px; padding:0 16px; line-height:46px; min-width:100px; height:48px;}
input.btn_grand,
button.btn_grand { font-size:16px; padding:0 16px; line-height:46px; min-width:136px; height:48px; vertical-align:top;}

/* CSS 버튼 색상 */
.btn_white { font-weight:bold; border-color:#dee0e3; background:#fefeff; color:#727374;}

/* active 상태 속성 */
.btn_white.active,
.btn_white.disabled,
.btn_white.disabled.active,
.btn_white.disabled:active,
.btn_white.disabled:focus,
.btn_white.disabled:hover,
.btn_white:active,
.btn_white:focus,
.btn_white:hover,
.btn_white[disabled],
.btn_white[disabled].active,
.btn_white[disabled]:active,
.btn_white[disabled]:focus,
.btn_white[disabled]:hover{ color:#2b2f33; border-color:#bfc8d1; background:#f3f3f9;}


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

        .main_content { padding:15px 0;}
        .main_content .class_info .tab_nav { position:absolute; top:0; left:0; width:80px;}
        .main_content .class_info .tab_nav li { width:100%;}
        .main_content .class_info .tab_nav a { height:23px; padding:9px 0 0 8px; font-size:12px;}
        .main_content .class_info .tab_cont > li { padding:5px 20px 20px 100px; height:140px;}
        .main_content .class_info .tab_cont p img { padding:5px 0 5px 0;}
        .main_content .class_info .tab_cont > li li { display:inline-block; padding-left:10px; margin-bottom:1px; background:url('image/ico_list_dot.gif') no-repeat left 50%;}
        .main_content .class_info .tab_cont > li li a { display:block; color:#4e4e4e; font-size:11px;}
        .main_content .class_info .tab_cont > li li a:hover { text-decoration:underline;}
        .main_content .class_info .tab_cont > li li .time { color:#802f84; font-weight:bold;}
        .main_content .class_info .tab_cont > .make { background:url('image/bg_makeup.jpg') no-repeat right top; background-size:50% 100%;}
        .main_content .class_info .tab_cont > .nail { background:url('image/bg_nail.jpg') no-repeat right top; background-size:50% 100%;}
        .main_content .class_info .tab_cont > .esth { background:url('image/bg_esthetic.jpg') no-repeat right top; background-size:50% 100%;}
        .main_content .class_info .tab_cont > .hair { background:url('image/bg_hair.jpg') no-repeat right top; background-size:50% 100%;}
        .main_content .class_info .tab_cont > .scal { background:url('image/bg_scalp.jpg') no-repeat right top; background-size:50% 100%;}

        .main_board {padding:10px 0 0 0;}
        .main_board .tab_nav a { font-size:13px; letter-spacing:-0.05em; padding-top:5px; height:23px;}

        .main_board .tab_cont{ padding:5px 0;}
        .main_board .tab_cont>li p{ padding:3px 0 3px 15px;}
        .main_board .tab_cont>li p a{ font-size:13px;}

    }