@charset "utf-8";

/* contents */

#content {}
#content h2 {font-size:30px; font-weight:700; word-break:keep-all;}
#content h2.row2 br {display:none;}
#content h3 {padding-bottom:10px; font-size:20px; font-weight:700; word-break:keep-all;}
#content h3:before {content:''; display:block; width:36px; height:4px; margin-bottom:5px; background:#ff6780;}

.sub_header {position:relative; height:400px; padding-top:220px; background:url('../images/main/main_visual_bg.jpg') no-repeat 50%; background-size:cover; text-align:center; box-sizing:border-box;}
.sub_header h2 {padding-bottom:10px; color:#333;}
.sub_header p {color:#333;}

.sub_cont {padding:80px 0;}
.sub_cont .sect {padding-bottom:80px;}

/* snb */
#snb {padding-bottom:40px;}
#snb ul {overflow:hidden;}
#snb ul li {float:left; width:100%; margin-bottom:10px; padding:0 0.5%; box-sizing:border-box;}
#snb ul li a {display:block; padding:20px 0; border:1px solid #ccc; background:#f9f9f9; text-align:center;}
#snb ul li.cur a {border-color:#30206b; background:#30206b; 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:#ff6780; background:#ff6780; color:#fff;}
#snb .col2 > li {width:50%;}
#snb .col3 > li ,
#snb .col6 > li {width:33.3%;}
#snb .col4 > li,
#snb .col8 > li {width:25%;}
#snb .col5 > li {width:20%;}


/* 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;}

/* 로그인 */
.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:#30206b; 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 {height:47px; margin-bottom:8px; padding:5px 0; color:#666; font-size:14px; box-sizing:border-box;}
.join .join_area .pw_check {height:47px; 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:0; 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:#30206b; 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:#30206b; 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 .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_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 .class_info .thumb img {max-width:400px;}
.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:#ff6780; color:#fff; font-weight:700;}
.class_detail .btn_area .btn_list {background:#eee;}

/* 원격강의 */
.remote_class .btn_area .btn_view {margin-right:5px; background:#30206b; color:#fff; font-weight:700;}
.remote_class .link_list {width:100%; padding:40px; background:#f9f9f9; border-radius:10px; 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:#fff; text-align:center;}
.remote_class .link_list ul li a:hover {border-color:#ff6780; background:#ff6780; 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%;}

/* 마이페이지 */
.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;}

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

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

	.class_detail .class_info {min-height:360px; padding-left:330px;}
	.class_detail .class_info .thumb {width:300px;}
	.class_detail .class_info .thumb img {max-width:300px;}
	.class_detail .info_area .subject {font-size:30px;}

}

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

	#content h2 {font-size:24px;}
	#content h2.row2 {margin-top:-10px; font-size:22px;}
	#content h2.row2 br {display:inline;}
	#content h3 {font-size:18px;}
	#content h3:before {width:34px; height:3px; margin-bottom:3px;}

	.sub_header {height:auto; padding:120px 0 40px;}
	.sub_header h2 {padding-bottom:0;}
	.sub_header p {font-size:14px;}

	#snb ul li {margin-bottom: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 .col4 > li,
	#snb .col5 > li {width:50%;}

	.sub_cont {padding:40px 0;}
	.sub_cont .sect {padding-bottom:40px;}

	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_detail .class_info {/* min-height:100%; */min-height:auto; padding-left:0;}
	.class_detail .class_info .thumb {position:relative; top:auto; left:auto; width:100%;}
	.class_detail .class_info .thumb img {width:100%; max-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 .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 {padding: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;}

	.myinfo .input_wrap .btn {height:40px; line-height:40px;}
	
	.myout p,
	.myout ul li {font-size:14px;}

	.qna .password_area {padding:40px 20px;}

}