@charset "utf-8";

/* contents */
#content {background:#f2f2f3; overflow:hidden;}

/* snb */
#snb {position:relative; z-index:5; padding-bottom:40px;}
#snb ul {overflow:hidden;}
#snb ul li {float:left; width:100%; margin-bottom:10px; margin-left:10px; box-sizing:border-box;}
#snb ul li:first-child {margin-left:0;}
#snb ul li a {display:block; padding:20px 0; border:1px solid #ccc; background:#ececed; text-align:center; font-size:18px;}
#snb ul li.cur a {border-color:#33333c; background:#33333c; color:#fff;}
#snb ul.sub_tab_list {padding-top:40px;}
#snb ul.sub_tab_list li a {padding:10px 0;}
#snb ul.sub_tab_list li.cur a {border-color:#33333c; background:#33333c; color:#fff;}
#snb .col2 > li {width:calc(50% - 5px);}
#snb .col3 > li ,
#snb .col6 > li {width:calc(33.3% - 6.66px);}
#snb .col4 > li,
#snb .col8 > li {width:calc(25% - 7.5px);}
#snb .col5 > li {width:calc(20% - 8px);}
#snb .col6 > li:nth-child(4),
#snb .col8 > li:nth-child(5) {margin-left:0;}

/* 서브페이지 상단 */
.sub_header {position:relative; padding:60px 0; text-align:center;}
.sub_header .title_text {margin-bottom:20px; padding-bottom:40px; background:url('../images/common/sub_header_arr.png') no-repeat 50% 100%; color:#fff; font-family:'Nanum Myeongjo'; font-size:45px; font-weight:400; line-height:1.2;}
.sub_header .sub_text {color:#fff; font-size:22px; line-height:1.4; word-break:keep-all;}
.sub_header .object {position:absolute; bottom:-205px; right:-80px; z-index:2;}
.sub_header .object img {vertical-align:top;}

/* 서브페이지 콘텐츠 */
.sub_cont {padding:90px 0 120px;}
.sub_cont .sect {padding-top:80px;}
.sub_cont .sect:first-child {padding-top:0;}
.sub_cont h3 {position:relative; margin-bottom:20px; font-family:'Nanum Myeongjo'; font-size:26px; font-weight:800; text-align:center; word-break:keep-all;}
.sub_cont h3:before {content:''; position:absolute; top:50%; left:0; right:0; display:block; width:100%; height:1px; background:#333; z-index:1;}
.sub_cont h3 span {position:relative; display:inline-block; padding:0 20px; background:#f2f2f3; z-index:2;}
.sub_cont h4 {padding-bottom:20px; font-size:20px; font-weight:400; word-break:keep-all;}

/* input */
input, select, textarea {display:inline-block; width:100%; margin-bottom:8px; border:1px solid #ccc; background:none; box-sizing:border-box; vertical-align:middle;}
input, select {height:47px; padding:0 15px;}
input[type="radio"],
input[type="checkbox"] {width:22px; height:22px; margin-bottom:0;}
select {width:auto;}
textarea {padding:15px;}
input::-webkit-input-placeholder {font-size:14px; color:#8d8d8d;}
input:-ms-input-placeholder {font-size:14px; color:#8d8d8d;}
input::placeholder {font-size:14px; color:#8d8d8d;}
label {vertical-align:middle;}

/* button */
.btn_wrap {text-align:center;}
.btn {display:inline-block; vertical-align:middle; text-align:center; box-sizing:border-box; cursor:pointer;}

/* 회원페이지 상단 */
.member .sub_header {background:url('../images/common/sub_header_bg01.jpg') no-repeat 50%; background-size:cover;}
.member .sub_cont h3 span {background:#f9f9f9;}

/* 로그인 */
.login .login_area {max-width:700px; padding:40px; background:#f9f9f9; border-radius:10px; margin:0 auto; box-sizing:border-box;}
.login .login_area .btn_login {height:60px; margin-top:20px; background:#01c08c; border:0; color:#fff; font-size:20px; font-weight:700;}
.login .login_area .btn_wrap {padding-top:20px; overflow:hidden;}
.login .login_area .btn_wrap .btn_join {float:left;}
.login .login_area .btn_wrap .btn_find_id {float:right;}

/* 회원가입 */
.join .join_area {padding:40px; background:#f9f9f9; border-radius:10px; margin:0 auto; box-sizing:border-box;}
.join .join_area .pw_guide {margin-bottom:8px; padding:5px 0; color:#666; font-size:14px; box-sizing:border-box;}
.join .join_area .pw_check {margin-bottom:8px; padding:5px 0; color:#e54141; font-size:14px; box-sizing:border-box;}
.join .join_area .pw_check._ok {color:#2659ff;}
.join .input_wrap {position:relative; width:100%; padding-right:140px; box-sizing:border-box;}
.join .input_wrap .btn {position:absolute; top:0; right:0; width:135px; height:47px; line-height:47px; text-align:center; background:#666; color:#fff; font-size:14px;}
.join .agree_area {position:relative; width:100%; height:55px; padding-top:10px; padding-right:140px; box-sizing:border-box;}
.join .terms {position:relative;}
.join .terms + .terms {margin-top:20px;}
.join .terms h3,
.join .terms h4 {padding-bottom:5px !important; font-size:16px !important; font-weight:400 !important;}
.join .terms h3:before {display:none !important;}
.join .terms .check {position:absolute; top:-3px; right:0;}
.join .terms .check label {position:relative; width:auto; margin-right:5px; text-indent:0; font-weight:300px; font-size:14px;}
.join .terms .check input[type="checkbox"] {width:20px; height:20px;}
.join .terms .box {height:94px; box-sizing:border-box; padding:15px; font-size:12px;}
.join .terms .terms_area ul,
.join .terms .privacy_area ul {padding-bottom:20px;}
.join .btn_submit {height:60px; margin-top:40px; background:#01c08c; border:0; color:#fff; font-size:20px; font-weight:700;}

/* 아이디/비밀번호 찾기 */
.find_id .find_area {max-width:700px; padding:40px; background:#f9f9f9; border-radius:10px; margin:0 auto; box-sizing:border-box;}
.find_id .find_area .sect {padding-bottom:40px;}
.find_id .find_area .btn_confirm {width:100%; height:47px; line-height:47px; background:#01c08c; border:0; color:#fff; font-size:18px; font-weight:700;}
.find_id .pw_check {padding:5px 0 20px; color:#e54141; font-size:14px;}
.find_id .pw_check._ok {color:#2659ff;}

/* 개인정보처리방침 및 서비스이용약관 */
.terms .box {height:300px; padding:20px; border:1px solid #ccc; overflow:auto;}
.terms .terms_area ul {padding-bottom:40px;}
.terms .terms_area ul li {padding-bottom:10px;}
.terms .terms_area ul li ul li {padding-bottom:5px;}
.terms .terms_area ul.list > li {padding-bottom:10px;;}
.terms .terms_area ul.list ul {padding:10px 0 0 10px;}
.terms .terms_area ul li p:first-child {padding-bottom:15px;}
.terms .terms_area ul li p.title {padding-bottom:10px;}
.terms .privacy_area ul {padding-bottom:40px;}
.terms .privacy_area ul li {padding-bottom:10px;}
.terms .privacy_area ul li ul li {padding-bottom:5px;}
.terms .privacy_area ul.list ul {padding-bottom:0;}
.terms .privacy_area ul li p:first-child {padding-bottom:15px;}
.terms .privacy_area ul li p.title {padding-bottom:10px;}

/* 학원소개 */
.intro .sub_header {background:url('../images/common/sub_header_bg01.jpg') no-repeat 50%; background-size:cover;}
.intro .img_area img._pc {display:inline-block;}
.intro .img_area img._mobile {display:none;}
.intro .map_area {position:relative; display:block;}
.intro .map_area > div{width:100% !important;}
.intro .map_area > div > .wrap_map{height:400px !important;}
.intro .map_area .root_daum_roughmap .wrap_btn_zoom {z-index:1 !important;}

/* 동영상강의 */
.class .sub_header {background:url('../images/common/sub_header_bg02.jpg') no-repeat 50%; background-size:cover;}
.class .sub_header .object {bottom:-180px; right:-60px;}
.class_detail #snb + .sect {padding-top:0;}
.class_detail .class_info {position:relative; width:100%; min-height:480px; padding-left:440px; box-sizing:border-box;}
.class_detail .class_info .thumb {position:absolute; top:0; left:0;}
.class_detail .info_area .subject {font-size:36px; font-weight:700;}
.class_detail .info_area .desc {padding:20px 0;}
.class_detail .info_area ul li {position:relative; margin:0 0 10px; padding-left:110px;}
.class_detail .info_area ul li > span {position:absolute; top:0; left:0; display:inline-block; width:90px;}
.class_detail .info_area ul li > span:after {content:''; position:absolute; right:0; top:50%; margin-top:-7px; display:inline-block; height:14px; border-left:1px solid #ccc;}
.class_detail .info_area ul li strong {color:#00a7b0;}
.class_detail .price_area {display:inline-block; vertical-align:top;}
.class_detail .price_area p.line-thr {text-decoration:line-through;}
.class_detail .price_area p.discount {color:#00a7b0; font-size:18px; font-weight:700;}
.class_detail .btn_area {margin-top:40px; padding-top:40px; border-top:1px solid #ccc; text-align:right;}
.class_detail .btn_area .btn {width:200px; height:60px; line-height:60px; font-size:20px;}
.class_detail .btn_area .btn_add {margin-right:5px; background:#f4dc62; font-weight:700;}
.class_detail .btn_area .btn_list {background:#eee; border:1px solid #ccc;}

/* 원격강의 */
.remote_class .sub_header {background:url('../images/common/sub_header_bg03.jpg') no-repeat 50%; background-size:cover;}
.remote_class .sub_header .object {bottom:-230px; right:-110px;}
.remote_class .btn_area .btn_view {margin-right:5px; background:#00a7b0; color:#fff; font-weight:700;}
.remote_class .link_list {width:100%; padding:40px; background:#f6f6f6; box-sizing:border-box;}
.remote_class .link_list ul {overflow:hidden;}
.remote_class .link_list ul li {float:left; padding:1%; box-sizing:border-box;}
.remote_class .link_list ul li a {display:block; padding:20px 0; border:1px solid #ccc; background:#ececed; text-align:center; font-size:18px;}
.remote_class .link_list ul li a:hover {border-color:#33333c; background:#33333c; color:#fff;}
.remote_class .link_list .col2 > li {width:50%;}
.remote_class .link_list .col3 > li,
.remote_class .link_list .col6 > li {width:33.3%;}
.remote_class .link_list .col4 > li,
.remote_class .link_list .col8 > li {width:25%;}
.remote_class .link_list .col5 > li {width:20%;}

/* 커뮤니티 */
.community .sub_header {background:url('../images/common/sub_header_bg04.jpg') no-repeat 50%; background-size:cover;}
.community .sub_header .object {bottom:-190px; right:-70px;}

/* Q&A */
.qna .password_area {max-width:700px; padding:40px; background:#f9f9f9; border-radius:10px; margin:0 auto; box-sizing:border-box}

/* 마이페이지 */
.myinfo .input_wrap {position:relative; width:100%; padding-right:125px; box-sizing:border-box;}
.myinfo .input_wrap .btn {position:absolute; top:0; right:0; width:120px; height:47px; line-height:47px; text-align:center; background:#666; color:#fff; font-size:14px;}
.myinfo .pw_guide {color:#666; font-size:14px;}
.myinfo .pw_check {padding-top:8px; color:#e54141; font-size:14px;}
.myinfo .pw_check._ok {color:#2659ff;}
.myout p.desc {padding-bottom:20px;}
.myout ul li {padding:5px 0;}
.myout input + label {padding-left:10px;}
.myout textarea {height:150px;}
.myout .inp_lg {width:calc(100% - 80px); height:30px; margin-left:10px;}
.myout .agree_txt {word-break:keep-all;}


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

	.sub_header .title_text {font-size:35px;}
	.sub_header .sub_text {font-size:18px;}
	.sub_header .object {bottom:-155px; right:-20px; width:200px; height:200px;}

	.sub_cont {padding:50px 0 80px;}

	.class .sub_header .object {bottom:-110px; right:-30px;}
	.class_detail .class_info {min-height:360px; padding-left:330px;}
	.class_detail .class_info .thumb {width:300px;}
	.class_detail .info_area .subject {font-size:30px;}

	.remote_class .sub_header .object {bottom:-155px; right:-40px;}

	.community .sub_header .object {bottom:-90px; right:-40px;}


}

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

	#snb ul li {margin-bottom:5px; margin-left:5px;}
	#snb ul li a {padding:10px 0; font-size:15px;}
	#snb ul.sub_tab_list {padding-top:20px;}
	#snb ul.sub_tab_list li a {padding:5px 0;}
	#snb .col2 > li,
	#snb .col4 > li,
	#snb .col5 > li,
	#snb .col8 > li {width:calc(50% - 2.5px);}
	#snb .col3 > li ,
	#snb .col6 > li {width:calc(33.3% - 3.33px);}
	#snb .col8 > li:nth-child(5) {margin-left:5px;}
	#snb .col4 > li:nth-child(odd),
	#snb .col5 > li:nth-child(odd),
	#snb .col8 > li:nth-child(odd) {margin-left:0;}

	.sub_header {padding:40px 0;}
	.sub_header .title_text {margin-bottom:15px; padding-bottom:20px; background-size:auto 10px; font-size:30px;}
	.sub_header .sub_text {font-size:16px;}
	.sub_header .object {bottom:-100px; right:-10px; width:110px; height:110px;}

	.sub_cont {padding:40px 0 60px;}
	.sub_cont .sect {padding-top:40px;}
	.sub_cont .sect:first-child {padding-top:0;}
	.sub_cont h3 {margin-bottom:15px; font-size:20px;}
	.sub_cont h4 {padding-bottom:15px; font-size:18px;}

	input, select {height:40px; padding:0 10px; font-size:14px;}
	input[type="radio"],
	input[type="checkbox"] {width:18px; height:18px;}
	textarea {padding:10px; font-size:14px;}

	.login .login_area {padding:40px 20px;}
	.login .login_area .btn_login {height:50px; font-size:18px;}

	.join .join_area {padding:40px 20px;}
	.join .join_area .pw_guide,
	.join .join_area .pw_check {height:auto; padding:0;}
	.join .input_wrap .btn {height:40px; line-height:40px;}
	.join .row .col6 {padding-bottom:0;}
	.join .terms {margin-top:20px;}
	.join .btn_submit {height:50px; font-size:18px;}

	.find_id .find_area {padding:40px 20px;}
	.find_id .find_area .btn_confirm {font-size:16px;}

	.terms .box {font-size:14px;}
	.terms .terms_area ul,
	.terms .privacy_area ul {padding-bottom:20px;}

	.intro .img_area img._pc {display:none;}
	.intro .img_area img._mobile {display:inline-block;}

	.class .sub_header .object {bottom:-95px; right:-20px;}
	.class_detail .class_info {min-height:100%; padding-left:0;}
	.class_detail .class_info .thumb {position:relative; top:auto; left:auto; width:100%;}
	.class_detail .class_info .thumb img {width:100%;}
	.class_detail .info_area {padding-top:20px; font-size:14px;}
	.class_detail .info_area .subject {font-size:22px;}
	.class_detail .info_area ul li {margin:0 0 5px; padding-left:85px;}
	.class_detail .info_area ul li > span {width:70px;}
	.class_detail .btn_area {overflow:hidden; margin-top:0; padding-top:20px; border-top:0; text-align:center;}
	.class_detail .btn_area .btn {float:left; width:49%; height:50px; line-height:50px; font-size:18px;}
	.class_detail .btn_area .btn_add {margin-right:2%;}

	.remote_class .sub_header .object {bottom:-100px; right:-20px;}
	.remote_class .btn_area .btn {float:none; width:100%; margin-bottom:5px;}
	.remote_class .btn_area .btn_add,
	.remote_class .btn_area .btn_view {margin-right:0;}
	.remote_class .link_list {margin:20px 0; padding:30px 20px;}
	.remote_class .link_list .col4 > li,
	.remote_class .link_list .col5 > li {width:50%;}
	.remote_class .link_list ul li {padding:2%;}
	.remote_class .link_list ul li a {padding:10px 0; font-size:16px;}
	
	.myinfo .input_wrap .btn {height:40px; line-height:40px;}

	.community .sub_header .object {width:90px; bottom:-100px; right:-10px;}

	.qna .password_area {padding:40px 20px;}
	
	.myout p,
	.myout ul li {font-size:14px;}

}