@charset "utf-8";

*{ padding:0; margin:0; box-sizing:border-box; font-family:'notosans', sans-serif; letter-spacing:-0.05em; }

html,body { overflow-x:hidden; }
.clear:after { display:block; content:""; clear:both; }
ul { list-style:none; } 
a { display:block; text-decoration:none; color:#333; }
.container { width:1200px; margin:0 auto; }
.big-btn { width:250px; text-align:center; padding:15px; border-radius:50px;  font-size:20px; margin:0 auto;}
.green-btn { color:#fff; background:#31b261; }
.gray-btn { background:#e8e8e8; }
input:focus { outline:none; }
input[type="radio"] { display:none; }
input[type="radio"] + label { float:left; padding-left:25px; position:relative; margin-right:20px;} 
input[type="radio"] + label:before { content:""; width:16px; height:16px; position:absolute; left:0; top:4px; border:1px solid #333; border-radius:30px; }
input[type="radio"]:checked + label:after { content:""; width:8px; height:8px; position:absolute; left:5px; top:9px; border-radius:30px; background:#333; }

input[type="checkbox"] { display:none; }
input[type="checkbox"] + label { float:left; padding-left:25px; position:relative; margin-right:20px;} 
input[type="checkbox"] + label:before { content:""; width:16px; height:16px; position:absolute; left:0; top:4px; border:1px solid #333; border-radius:30px; }
input[type="checkbox"]:checked + label:after { content:""; width:8px; height:8px; position:absolute; left:5px; top:9px; border-radius:30px; background:#333; }

header { width:100%; background:#fff; height:100px;}
header .logo { float:left; padding-top:25px; }
header .menu { float:right; }
header .menu li { float:left; padding:35px 25px 0;}
header .menu li:last-child { padding-right:0; }
header .m_menu_btn { float:right; padding-top:27px; display:none; }

.page-num { text-align:center; padding:20px 0; }
.page-num ul { display:inline-block; }
.page-num ul li { float:left; padding:0 10px;}
.page-num ul li img { position: relative;    top: -2px; }
.page-num ul li.on a { font-weight:800; }

.m_menu { width:100%; height:100%; position:absolute; z-index:9; left:0; top:75px; border-top:1px solid #ddd; display:none; }
.m_menu .shadow { width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.5); }
.m_menu ul { width:100%; background:#fff; position:relative; z-index:10;}
.m_menu ul li a{ border-bottom:1px solid #ddd; padding:15px }

.main-top { width:100%; clear:both; background:url(../images/main_bg.jpg) no-repeat; background-size:cover; padding:200px 0; background-position:center;}
.main-top .main-txt { text-align:center; color:#fff; }
.main-top .main-txt h1 { font-size:40px; font-weight:300; line-height:1em; padding-bottom:40px;}
.main-top .main-txt h1 span { font-weight:700; }
.main-top .main-txt p { font-size:20px; line-height:30px; font-weight:300; }
.main-top .main-txt ul { display:inline-block; margin-top:30px; }
.main-top .main-txt ul li { float:left; margin:0 10px; }
.main-top .main-txt ul li a { border:2px solid #fff; border-radius:30px; padding:10px 30px; font-size:18px; color:#fff; transition:all 0.3s;}
.main-top .main-txt ul li a:hover { color:#333; background:#fff; }

.main-customer { width:100%; background:url(../images/customer_bg.jpg) no-repeat; background-size:cover; padding:80px 0; }
.main-customer h1 { font-size:40px; line-height:50px; font-weight:300; }
.main-customer h1 span { font-weight:700; }
.main-customer ul { margin-top:20px; }
.main-customer ul li { float:left; margin-right:10px; position:relative; }
.main-customer ul li a { padding:18px 40px; padding-left:75px; border-radius:30px; background:#31b261; color:#fff; font-size:20px;}

.main-customer ul li.kakao a { color:#000; background:#eac52b; }
.main-customer ul li:before { content:""; width:45px; height:45px; position:absolute; left:15px; top:10px; background-size:cover;} 
.main-customer ul li.call:before { background:url(../images/icon_call.png) no-repeat;background-size:cover; }
.main-customer ul li.kakao:before { background:url(../images/icon_kakao.png) no-repeat;background-size:cover; }
.main-customer ul li.blog:before { background:url(../images/icon_blog.png) no-repeat;background-size:cover; }
.main-customer ul li.talk:before { background:url(../images/icon_talk.png) no-repeat;background-size:cover; }

.main-case { padding:100px 0; }
.main-case h1 { font-size:30px; text-align:center; padding-bottom:100px; line-height:1em; }
.main-case .case-list { padding-bottom:100px; }
.main-case .case-list h2 { float:left; font-size:25px; }
.main-case .case-list a.more-btn { float:right;font-size:18px; padding:3px 20px; border:1px solid #333; border-radius:30px; transition:all 0.3s; }
.main-case .case-list a.more-btn:hover {  color:#fff; border:1px solid #31b261; background:#31b261;}
.main-case .case-list a.more-btn2 { font-size:14px; padding:8px 30px; border:1px solid #333; display:none; width:130px; margin:20px auto 0; text-align:center;}
.main-case .case-list ul { clear:both; padding-top:20px;}
.main-case .case-list ul li { float:left; width:23.5%; margin-right:2%; }
.main-case .case-list ul li:last-child { margin-right:0; }
.main-case .case-list ul li .img { width:100%; overflow:hidden; height:200px; background:#333; }
.main-case .case-list ul li .img img { width:100%; transition:all 0.3s; }
.main-case .case-list ul li .img:hover img { transform:scale(1.1); }
.main-case .case-list ul li .txt { text-align:center;font-size:16px; line-height:1em; padding-top:10px; } 

footer { width:100%; background:#3c3c3c; color:#a3a3a3; padding:50px 0;}
footer .f-logo { width:30%; float:left; text-align:right; padding-top:5px;}
footer .f-txt { width:70%; float:right; text-align:left; padding-left:30px; line-height:21px;}
footer .f-txt span { display:inline-block; width:1px; height:11px; background:#a3a3a3; margin:0 8px;  }

/* sub */

.sub-top { width:100%; padding:100px 0; text-align:center; background-size:cover; background-repeat:no-repeat;}
.sub-top h1 { color:#fff; font-size:30px; } 

.sub-top.sub-about { background-image:url(../images/about_bg.jpg); }
.sub-top.sub-apply { background-image:url(../images/apply_bg.jpg); background-position:right;}
.sub-top.sub-login { background-image:url(../images/login_bg.jpg); }
.sub-top.sub-company { background-image:url(../images/company_bg.jpg); }

.about-top { padding:100px 0; }
.about-top .about-txt { width:50%; float:left;   }
.about-top .about-txt p { font-size:16px; line-height:35px; margin-top:30px;}
.about-top .about-img { width:48%; float:right; height:350px; background:url(../images/pic_about.jpg) no-repeat; background-size:cover; }

h3.sub-title { font-size:25px; display:inline-block; position:relative; }
h3.sub-title:before { content:""; width:105px; height:2px; background:#333; position:absolute; right:-130px; top:18px; }

.about-tap { width:100%; background:#333; text-align:center;}
.about-tap ul { width:500px; margin:0 auto;}
.about-tap ul li { float:left; width:50%; }
.about-tap ul li a { padding:18px 0; color:#fff; font-size:25px; }
.about-tap ul li.on a { background:#fff; color:#333; }

.about-cont { padding:80px 0; }
.about-box h1 { font-size:25px; line-height:1em;   }
.about-box p { font-size:18px; padding:25px 0; }
.about-box .img { width:100%; margin-bottom:50px; }
.about-box .img li { width:49%; margin-right:2%; float:left; text-align:center;}
.about-box .img.one-img li { width:100%; }
.about-box .img li:last-child { margin-right:0; }
.about-box .img li img { width:100%; }
.about-box .img li span { display:inline-block; font-size:18px;  padding:5px 20px; border:1px solid #ddd; margin-top:10px; border-radius:50px;}
.price_tbl { width:100%; border-top:1px solid #ddd; border-left:1px solid #ddd; }
.price_tbl th { width:40%; background:#f5f5f5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:15px 0; }
.price_tbl td { width:60%; border-right:1px solid #ddd; border-bottom:1px solid #ddd; text-align:left; padding:15px; }


.apply-cont { padding:100px 0; }

.member-login { width:600px; margin: 0 auto; padding:80px 0;}
.member-login h1 { font-size:30px; text-align:center; line-height:1em;}
.login-box { background:#f9f9f9; border-top:2px solid #333; padding:80px; margin:50px 0; } 
.login-box.no-pb { padding-bottom:0; }
.login-box input[type="text"], 
.login-box input[type="password"] { width:100%; background:#fff; border-radius:40px; border:none; font-size:16px; padding:15px 30px; margin-bottom:20px; box-shadow:3px 3px 5px rgba(0,0,0,0.1); }
.login-box p { text-align:center; font-size:18px; padding-bottom:30px; }
.login-box p span { font-weight:700; color:#31b261;  }

.login-box .btn-list { padding:80px 0 30px; }
.btn-list { text-align:center; }
.btn-list ul { display:inline-block; }
.btn-list ul li { float:left; padding:0 15px; position:relative; }
.btn-list ul li:before { width:1px; height:15px; background:#333; position:absolute; right:-2px; top:6px; content:""; }
.btn-list ul li:last-child:before { display:none; }

.apply-box, .join-box, .find-box { border-top:3px solid #333; margin-top:50px; }
.apply-box h1 { width:100%; background:#333; color:#fff; padding:10px 20px; font-size:18px;}

.apply-btn, .join-btn { text-align:center; }
.apply-btn p { padding:50px 0 20px; font-size:18px;}
.apply-btn .btn-box { width:100%;  }
.apply-btn .btn-box a { display:inline-block; margin:0 5px;}

.main-tbl { width:100%; }
.main-tbl th { background:#f5f5f5; text-align:left; padding:20px; border-bottom:1px solid #ddd; width:20%; }
.main-tbl td { padding:20px; border-bottom:1px solid #ddd; }
.main-tbl td input[type="password"],
.main-tbl td input[type="text"] { border:none; font-size:16px; color:#333; width:220px; float:left; }
.main-tbl td input[type="password"]::placeholder,
.main-tbl td input[type="text"]::placeholder { font-size:16px; color:#bbb; }
.main-tbl select { border:1px solid #ddd; padding:10px; width:450px; background:url(../images/icon_select.png) #fff no-repeat 97% 50%;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;}


.join-cont { padding:80px 0; }
.join-btn { padding-top:50px; }
.join-btn p { padding:50px 0 20px; font-size:18px;}
.join-btn .btn-box { width:100%;  }
.join-btn .btn-box a { display:inline-block; margin:0 5px;}

.notice-form { width:100%; margin-top:30px; border-top:3px solid #333;}
.notice-form h4 { font-size:16px; font-weight:500; padding:10px; background:#f5f5f5; }
.notice-form .notice-txt { width:100%; border-bottom:1px solid #ddd; padding:20px; background:#fff; font-size:14px; height:150px; overflow-y:auto; line-height:24px; }
.notice-form .notice-bt { padding:10px 0;  }
.notice-form .notice-bt input[type="checkbox"] + label { font-size:14px; padding-left:20px; }
.notice-form .notice-bt input[type="checkbox"] + label:before { width:12px; height:12px;  }
.notice-form .notice-bt input[type="checkbox"]:checked + label:after { width:6px; height:6px; left:4px; top:8px; }

.find-cont { padding:80px 0; }
.find-btn { padding-top:50px; }
.find-box { margin-bottom:50px; }

.gray-notice { background:#f5f5f5; padding:80px; text-align:Center; font-size:20px;}
.gray-notice span { color:#31b261; font-weight:700; }

.company-top { padding:100px 0; }
.company-top .company-txt { width:50%; float:left;   }
.company-top .company-txt p { font-size:16px; line-height:35px; margin-top:30px;}
.company-top .company-img { width:48%; float:right; height:350px; background:url(../images/pic_company.jpg) no-repeat; background-size:cover; }

.err_btn {width:200px; background-color:#31b261; padding:15px; text-align:center; color:#fff; margin:0 auto; border-radius:50px; font-size:15px; cursor:pointer;}

.refresh_captcha { width:100px; padding:5px; background-color:#31b261; float:left; text-align:center; color:#fff; margin:0 auto; border-radius:50px; font-size:15px; cursor:pointer; }
.kakao_addr { width:100px; padding:5px; background-color:#31b261; float:left; text-align:center; color:#fff; border-radius:50px; font-size:14px; cursor:pointer; }

/* adm 관련 */
header.adm-hd { padding:0 20px; height:80px; border-bottom:1px solid #ddd;}
header.adm-hd .logo { padding-top:33px;transform:scale(0.7); transform-origin:left top; }
header.adm-hd .go-home { float:right; padding-top:15px; }
header.adm-hd .go-home a { padding:10px 30px; border:1px solid #333; color:#333; }

.adm-wrap { width:100%; clear:both; }

.adm-menu { width:15%; float:left; }
.adm-menu ul li { width:100%; }
.adm-menu ul li a { padding:20px; font-size:18px; border-bottom:1px solid #ddd;  }
.adm-menu ul li.on a { border-left:2px solid #333; }
.adm-cont { min-height:1000px; border-left:1px solid #ddd; width:85%; float:right; padding:40px; }

.adm-top h1 { font-size:25px; float:left; }
.mem-search { float:right; padding-top:6px; }
.mem-search label { float:left; font-size:16px; padding-right:10px; padding-top:2px; }
.mem-search input { float:left; font-size:14px; border:1px solid #333; border-radius:0; width:180px; padding:3px; }
.mem-search a { float:left; padding:4px 10px; font-size:14px; background:#333; color:#fff; }

.mem-search_sel { float:left; padding-top:6px; padding-bottom:6px;}
.mem-search_sel label { float:left; font-size:16px; padding-right:10px; padding-top:2px; }
.mem-search_sel select { float:left; font-size:14px; border:1px solid #333; border-radius:0; width:180px; padding:3px; }
.mem-search_sel a { float:left; padding:4px 10px; font-size:14px; background:#333; color:#fff; margin-left:10px;}

.adm-list {padding:30px 0 100px;}
.adm-list table { width:100%; border-top:1px solid #ddd; border-left:1px solid #ddd;border-right:1px solid #ddd;}
.adm-list table.txt_l th, .adm-list table.txt_l td { text-align:left; }
.adm-list table th { background:#333; color:#fff; padding:10px;}
.adm-list table td { padding:10px; text-align:center; border-bottom:1px solid #ddd;  transition:all 0.3s; }
.adm-list table tr:hover td { background:#f9f9f9; }
.adm-list table td a { width:50%; border:1px solid #ddd;  margin:0 auto; padding:5px 0; font-size:14px; transition:all 0.3s;}
.adm-list table td a:hover { background:#333; color:#fff; }
.adm-list table th.left, .adm-list table td.left { text-align:left; }
.adm-list table td input[type="text"] { border:1px solid #ddd; padding:3px; font-size:16px; }

.adm-btn { text-align:center; padding-top:20px; }
.adm-btn a { display:inline-block; width:150px;padding:7px 10px; border:1px solid #333; transition:all 0.3s;}
.adm-btn a:hover { background:#333; color:#fff; }

@media screen and (max-width : 1200px) {


.container { width:100%; padding:0 20px; }
.main-case .case-list ul li .img { height:120px; }


}

@media screen and (max-width : 940px) {

.main-customer ul li { width:48%; margin:0 1%; }
.main-customer ul li a { padding:18px 40px; padding-left:75px; border-radius:30px; background:#31b261; color:#fff; font-size:20px;text-align:center; margin-bottom:20px;}


}

@media screen and (max-width : 768px) {

header { height:75px; }
header .logo img{transform: scale(0.7);    transform-origin: left top;}
header .menu { display:none; }
header .m_menu_btn { display:block; }


.main-top { padding:120px 0; }
.main-top .main-txt h1 { font-size:25px; padding-bottom:25px; }
.main-top .main-txt p{ font-size:14px; line-height:23px; }

.main-top .main-txt ul li a { font-size:14px; }

.main-customer { padding:50px 0; }
.main-customer h1 { text-align:center; font-size:25px; line-height:35px;}
.main-customer ul li a { font-size:14px; text-align:center; padding:18px 20px; padding-left:60px;}
.main-customer ul li:before { width:40px; height:40px; }

.main-case { padding:60px 0; }
.main-case h1 { font-size:25px; padding-bottom:60px; }

.main-case .case-list ul li .img { height:180px; }
.main-case .case-list ul li .txt { font-size:16px; }
.main-case .case-list h2 { font-size:18px; }
.main-case .case-list a.more-btn { font-size:14px; }
.main-case .case-list { padding-bottom:60px; }

.main-case .case-list ul li { width:49%; margin-right:2%; margin-bottom:15px;}
.main-case .case-list ul li:nth-child(2n) { margin-right:0; }

.main-tbl select { width:100%; }

.member-login { width:100%; padding:50px 0; }
.member-login h1 { font-size:20px; } 
.login-box { margin:30px 0; padding:30px;}
.login-box input[type="text"], .login-box input[type="password"] { font-size:14px; padding:15px 20px;  }

.btn-list ul li a{ font-size:14px; }
.btn-list ul li:before { height:11px;  right:0;}
.login-box .btn-list { padding:50px 0 20px; }
.login-box p { font-size:14px; }
.login-box p span { display:block; }

.about-top .about-txt { width:100%; float:none; }
.about-top .about-img { width:100%; float:none; height:310px; margin-top:50px; }

.company-top .company-txt { width:100%; float:none; }
.company-top .company-img { width:100%; float:none; height:310px; margin-bottom:50px; }

.about-box h1 { font-size:20px;  }
.about-box p { font-size:16px; }
.about-box .img li span { display:inline-block; font-size:18px;  padding:5px 20px; border:1px solid #ddd; margin-top:10px; border-radius:50px;}

}

@media screen and (max-width : 600px) {

.main-case .case-list ul li .img { height:120px; }


footer .f-logo { width:100%; text-align:center;transform: scale(0.7);
    transform-origin: top;}
footer .f-txt { width:100%; padding:0; font-size:12px; text-align:center; }
footer .f-txt span { height:9px; }

.sub-top { padding:70px 0; }

.about-tap ul { width:60%; }
.about-tap ul li a { padding:14px 0; font-size:16px; }

.about-cont { font-size:14px; line-height:28px; font-weight:200; padding:30px 0; }
.about-top, .company-top  { padding:50px 0; }


.about-top .about-txt p { font-size:14px; line-height:28px; font-weight:200; margin-top:20px;}
.about-top .about-img {  height:160px; margin-top:20px; }

.company-top .company-txt p { font-size:14px; line-height:28px; font-weight:200; margin-top:20px; }
.company-top .company-img {  height:160px; margin-bottom:20px; }

.apply-cont, .join-cont, .find-cont { padding:50px 0; }

.apply-box h1 { font-size:16px; padding:15px; }
.main-tbl th { width:30%; font-size:14px; }
.main-tbl td { padding:15px;font-size:14px; }
.main-tbl td input[type="password"],
.main-tbl td input[type="text"] { width:100%;font-size:14px; }
.main-tbl td input[type="password"]::placeholder,
.main-tbl td input[type="text"]::placeholder { font-size:14px; }
.main-tbl td input[type="radio"] + label { margin:3px 0; margin-right:20px;} 
.main-tbl td input[type="radio"] + label:before { top:3px; }
.main-tbl td input[type="radio"]:checked + label:after { top:8px; }
.apply-btn p { font-size:14px; font-weight:200; padding:20px 0;}
.apply-btn p span { display:block; }

.kakao_addr, .refresh_captcha { font-size:14px; margin-top:10px; }


.gray-notice { padding:60px; font-size:18px;}
.about-box .img li span { font-size:14px; padding:3px 20px; margin-top:0; }

.apply-btn .btn-box a { margin:5px auto; display:block; font-size:16px; }
.join-btn .btn-box a { margin:5px auto; display:block; font-size:16px; }

.price_tbl th { width:60%; padding:10px 0; }
.price_tbl td { width:40%;padding:10px;}





}


@media screen and (max-width : 400px) {

.main-top .main-txt ul { width:100%; }
.main-top .main-txt ul li { width:50%; margin:0; padding:0 1%;}
.main-top .main-txt ul li a { font-size:14px; padding:10px; }

.main-customer ul li { width:100%;}
.main-customer ul li a { padding-left:20px;}



.main-case { padding:50px 0; }
.main-case h1 { font-size:20px; padding-bottom:40px; }

.main-case .case-list a.more-btn { display:none;} 
.main-case .case-list a.more-btn2 { display:block; }


.main-case .case-list ul li .img { height:100px; }
.main-case .case-list ul li .txt { font-size:14px; }
.main-case .case-list { padding-bottom:40px; }

/* sub */
.sub-top { padding:50px 0; }
.sub-top h1 { font-size:20px; }

h3.sub-title { font-size:18px; }
h3.sub-title:before { top:13px; } 

input[type="radio"] + label { font-size:14px; padding-left:20px;}
input[type="radio"] + label:before { width:12px; height:12px;  }
input[type="radio"]:checked + label:after { width:6px; height:6px; left:4px; top:8px; }

.big-btn { font-size:16px; padding:10px; width:220px; }



.about-tap ul { width:100%; }
.about-tap ul li a { font-size:14px; padding:14px 0;}

.apply-box, .join-box { margin-top:20px; }
.apply-box h1 { font-size:14px; padding:10px; }
.main-tbl th { padding:10px; }

.gray-notice { padding:40px; font-size:14px; }

.about-box h1 { font-size:18px; }
.about-box p { font-size:14px; line-height:22px; padding:20px 0; }

.about-box .img { margin-bottom:30px; }
.about-box .img li { width:100%; margin-right:0; margin-bottom:15px; }




}