@charset "utf-8";
@import url("font.css");
/* style reset */
* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

body {width:100%; overflow-x:hidden; color: #666; font-size: 16px; font-family: 'ns'; line-height: 26px;}
a {cursor:pointer; color: #666; font-size: 16px; text-decoration:none;}
em, address, i {font-style:normal}
caption {visibility:hidden; width:0; height:0; overflow:hidden; font-size:0}
hr {display:none}
select {border-radius:0}
button {cursor:pointer; background:transparent; border:0; vertical-align:middle;}
/*button:focus {outline: none;}*/
pre {white-space:pre-line; word-break:break-all}
img {border:0}
input.txt, .optionbox select, .calenbox .input_type {width: 100%; height: 100%; background-color:#fff; border:0; border-radius:0}
input.txt:focus {outline: none;}
input.file {padding:0; background:#fff; border:0; border-radius:0}
input.radio {vertical-align:middle}
input.checkbox {vertical-align:middle}										 
/*input::-ms-clear {display:none}*/
input::-webkit-input-placeholder {color:#999 !important; font-weight: 600;}
input:-moz-placeholder {color:#999 !important; font-weight: 600;}
input::-moz-placeholder {color:#999 !important; font-weight: 600;}
input:-ms-input-placeholder {color:#999 !important; font-weight: 600;}

textarea {overflow-x:hidden; overflow-y:auto; resize:none; background:#fff}
textarea::-webkit-input-placeholder {color:#c6c5c5 !important;}
textarea:-moz-placeholder {color:#c6c5c5 !important;}
textarea::-moz-placeholder {color:#c6c5c5 !important;}
textarea:-ms-input-placeholder {color:#c6c5c5 !important;}
img, input, button, select, textarea {vertical-align:middle}
fieldset {margin:0; padding:0; border:0; background:0}
fieldset legend {visibility:hidden; font-size:0; line-height:0}
table {border-collapse:collapse}

.transparents-layer {display: none;}

.btn {padding: 0 10px; min-width: 80px; height: 45px; font-size: 18px; font-weight: 600;}
.btn2 {width: 68px; height: 35px; font-size: 15px;}
.btn3 {width: 65px; height: 25px; font-size: 13px; font-weight: 600;}
.btn4 {width:45px; height:45px; border: 1px solid #14b3ad; background-position: center center; background-repeat: no-repeat; font-size: 0; text-indent: -999px;}
.btn5 {padding: 0 50px; min-width: 80px; height: 55px; font-size: 18px; font-weight: 600;}
.btn6 {width: 150px; min-width: 80px; height: 55px; font-size: 18px; font-weight: 600;}
.btn7 {width: 70px; height: 30px; font-size: 12px; font-family: 'dotum'; border-radius: 3px; color: #fff; background-color: #6b6e7b;}


.btn_green {color: #fff; background: #2f76c2;}
.btn_green {color: #fff; background: #14b3ad;}
.btn_linegreen {color: #14b3ad; border: 1px solid #14b3ad;}
.btn_gray {color: #fff; background: #717171;}
.btn_sgray {color: #fff; background: #444;}
.btn_white {color: #14b3ad; border: 1px solid #14b3ad;}
.btn_prev {background-image: url('../images/arrow_prev3.png');}
.btn_next {background-image: url('../images/arrow_next3.png');}
.btn_down {width: 20px; height: 21px; background: url('../images/icon_file.png') no-repeat ;}

.f_w {font-weight: 600 !important;}
.f_w400 {font-weight: 400 !important;}
.p_r {position: relative !important;}

.d_block {display: block;}
.d_inblock {display: inline-block;}
.d_none {display: none;}
.d_table {display: table;}
.d_cell {display: table-cell; vertical-align: middle; text-align: center;}
.d_itable{display: inline-table;}

.color_r {}
.bg_blue {}

.padding0 {padding: 0 !important;}
.margin0 {margin: 0 !important;}
.mt50 {margin-top:50px !important}
.mt40 {margin-top:40px !important}
.mt30 {margin-top:30px !important}
.mt20 {margin-top:20px !important}
.mt10 {margin-top:10px !important}
.mt5 {margin-top:5px !important}
.mb2 {margin-bottom:2px !important}
.mb5 {margin-bottom:5px !important}
.mb10 {margin-bottom:10px !important}
.mb15 {margin-bottom:15px !important}
.mb20 {margin-bottom:20px !important}
.mb25 {margin-bottom:25px !important}
.mb30 {margin-bottom:30px !important}
.mb35 {margin-bottom:35px !important}
.mb40 {margin-bottom:40px !important}
.mb50 {margin-bottom:50px !important}
.mb55 {margin-bottom:55px !important}
.mb60 {margin-bottom:60px !important}
.mr5 {margin-right:5px !important}
.mr10 {margin-right:10px !important}
.mr15 {margin-right:15px !important}
.mr20 {margin-right:20px !important}
.mr25 {margin-right:25px !important}
.ml5 {margin-left:5px !important}
.ml10 {margin-left:10px !important}
.ml20 {margin-left:20px !important}
.pl10 {padding-left:10px !important}
.pl15 {padding-left:15px !important}
.pl20 {padding-left:20px !important}
.pl30 {padding-left:30px !important}
.pt10 {padding-top:10px !important}
.pt15 {padding-top:15px !important}
.pt20 {padding-top:20px !important}
.pt30 {padding-top:30px !important}
.pt33 {padding-top:33px !important}
.pt40 {padding-top:40px !important}
.pb10 {padding-bottom:10px !important}
.pb40 {padding-bottom:40px !important}
.w80 {width: 80px !important}
.w100 {width: 100px !important}
.w200 {width: 200px !important}
.w300 {width: 300px !important}
.w_25 {width: 25% !important}
.w_30 {width: 30% !important}
.w_35 {width: 35% !important}
.w_100 {width: 100% !important}

.al {text-align: left !important;}
.ac {text-align: center!important;}
.ar {text-align: right!important;}

.cl_bo {clear: both !important;}
.f_l {float: left !important;}
.f_r {float: right !important;}
.over_h {overflow: hidden !important;}
.wb_keep {word-break: keep-all !important;}

dl.skipnavi {position:relative;z-index: 500;}
dl.skipnavi dt {display:none}
dl.skipnavi dd a {position:absolute; left:0; top:-50px; font-size:0}
dl.skipnavi dd a:active, dl.skipnavi dd a:focus {display:block; left:0; top:0; z-index:51; width:400px; height:30px; padding-top:9px; text-align:center; background:#333; line-height:14px; text-decoration:none; color:#fff; font-size:12px; font-weight:bold}



/*서브*/
.sub_contents {width: 100%; overflow: hidden; position: relative;}
.sub_top {position: relative; width: 100%; height: 236px; text-align: center;}
.sub_top.sub1 {background-image: url('../images/sub_img01.jpg');}/*교육원소개*/
.sub_top.sub2 {background-image: url('../images/sub_img02.jpg');}/*교육과정*/
.sub_top.sub3 {background-image: url('../images/sub_img03.jpg');}/*수강신청*/
.sub_top.sub4 {background-image: url('../images/sub_img04.jpg');}/*출신작가활동현황*/
.sub_top.sub5 {background-image: url('../images/sub_img05.jpg');}/*자료실*/
.sub_top.sub6 {background-image: url('../images/sub_img06.jpg');}/*커뮤니티-게시판*/
.sub_top.sub7 {background-image: url('../images/sub_img07.jpg');}/*마이페이지*/
.sub_top.sub8 {background-image: url('../images/sub_img08.jpg');}/*멤버쉽*/
.sub_top h2 {padding-top: 90px; color: #fff; font-size: 45px;}
.sub_top .bg{position: absolute; width: 100%; height: 48px; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.8);}
.lnb_box {position: absolute; z-index: 80; width: 1250px; left: 50%; top: 188px; transform: translateX(-50%);}
.lnb_box > ul {clear: both;}
.lnb_box > ul > li {float: left; position: relative;}
.lnb_box > ul > li > a {display: table; width: 100%; height: 48px;}
.lnb_box > ul > li > a > span {padding: 0 10px; color: #fff; font-size: 18px; line-height: 22px;}
.lnb_box > ul > li.active > a > span {background: #14b3ad;}
.lnb_box > ul > li > ul {display: none; position: absolute; z-index: 85; width: 100%; height: auto; left: 0; top: 48px; border: 1px solid #dfdfdf; background: #fff;}
.lnb_box > ul > li > ul > li {overflow: hidden; border-bottom: 1px solid #dfdfdf; background-color: #fff;}
.lnb_box > ul > li > ul > li:last-child {border-bottom: 0;}
.lnb_box > ul > li > ul > li > a {display: block; padding: 10px; text-align: center; font-size: 15px; font-weight: 600;}
.lnb_box > ul.sub1 > li {width: 12.5%;}
.lnb_box > ul.sub2 > li {width: 14.258%;}
.lnb_box > ul.sub3 > li {width: 25%;}
.lnb_box > ul.sub4 > li {width: 12.5%;}
.lnb_box > ul.sub5 > li {width: 14.258%;}
.lnb_box > ul.sub6 > li {width: 33.2%;}
.lnb_box > ul.sub7 > li {width: 49.5%;}

.contents_title {padding: 50px 0; width: 1150px; margin: 0 auto; text-align: center;}
.contents_title h2 {position: relative; padding-bottom: 20px; margin-bottom: 15px; color: #000; font-size: 34px;}
.contents_title h2:after {content: ''; display: inline-block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 65px; height: 1px; background: #000;}
.contents_title .nav {height: 18px;}
.contents_title .nav a, .contents_title .nav span {color: #000; font-size: 14px; line-height: 18px;}
.contents_title .nav a {display: inline-block; padding-right: 18px; margin-right: 5px; background: url('../images/nav_arrow.png') right center no-repeat;}
.contents_title .nav a.home img {position: relative; top: -1px;}
.contentsarea {position: relative; overflow: hidden; padding-bottom: 50px; width: 1150px; min-height: 450px; margin: 0 auto;}


/*로그인*/
.login_area{width: 450px; margin:60px auto ; position: relative; overflow: hidden;}
.login_area .icon_login{margin: 0 auto; background: url('../images/icon_login.png')no-repeat; width: 68px; height: 68px;} 

.login_area input.txt {padding: 0 10px; height: 40px; border: 1px solid #cecece;}
.login_area select {padding: 0 10px; width: 100%; height: 40px; border: 1px solid #cecece; background: url('../images/icon_arrow.png') right 10px center no-repeat #fff;}
.login_area .login {padding: 0 10px; margin-top: 60px;}
.login_area fieldset {padding-bottom: 35px;}
.login_area fieldset.box1 input.txt {margin-bottom: 10px;}
.login_area button.log, .login_area button.id, .login_area button.pass
 {width: 100%; height: 55px; color: #fff; font-size: 18px; font-weight: 600;}
.login_area .login .log_find {margin-top: 10px; text-align: center;}
.login_area .login .log_find li {display: inline-block; font-size: 14px;}
.login_area .login .log_find li a {display: block; font-size: 14px;}
.login_area .login .log_find li span {margin: 0 55px;}

/*아이디 비밀번호 찾기*/
.login_area .icon_id_id{margin: 0 auto; background: url('../images/icon_id1.png')no-repeat; width: 68px; height: 68px;} 
.login_area .icon_id_mail{margin: 0 auto; background: url('../images/icon_id2.png')no-repeat; width: 68px; height: 68px;} 
.login_area .icon_id_pass{margin: 0 auto; background: url('../images/icon_pass1.png')no-repeat; width: 68px; height: 68px;} 
.login_area .icon_id_phone{margin: 0 auto; background: url('../images/icon_pass2.png')no-repeat; width: 68px; height: 68px;} 

.login_area .serch {padding: 0 10px; margin-top: 30px;}
.login_area fieldset.box1 h3 {margin: 0 0 60px 0; font-size: 16px; font-weight: normal; text-align: center;}
.login_area fieldset.box1 dt {width: 15%; display: inline-block;}
.login_area fieldset.box1 dd{width: 84%; display: inline-block;}
.login_area button.id_find {width: 48%; height: 50px; font-size: 18px; font-weight: 600;}

/*수강신청*/
.joinin_area{width: 100%; margin:60px auto ; position: relative; overflow: hidden; background-color: #fafafa;}
.joinin_area .notice_box{width: 1150px; margin: 0 auto; position: relative; overflow: hidden; padding: 45px 0; background: url('../images/notice_bg.png') no-repeat;}
.joinin_area .notice_box p{text-align: center; padding-bottom: 8px;}
.joinin_area .notice_box p.big{font-size: 22px;}


.application_box{}
.board_top{line-height: 22px; overflow: hidden; clear: both;}
.board_top h4{border-left: 4px solid #14b3ad; padding-left: 15px; font-size: 22px; color: #000; margin-bottom: 15px; font-weight: normal; float: left;}
.board_top h4 span{font-size: 14px; color: #14b3ad;}

.board_top .right_box{float: right; margin-bottom: 8px;}
.board_top .right_box li{display: inline-block; width: 40px; padding: 6px 0;}
.board_top .right_box li.sort_jaum{border: 1px solid #ececec; text-align: center;}
.board_top .right_box li.sort_jaum a{ font-size: 13px;}

.borderwhite{border-top: 2px solid #14b3ad; padding-top: 18px; overflow: hidden;}

.application_box .btn_box{ margin-top: 65px;}
.application_box .btn_box button{margin: 0 5px;}

.application_box .certification_list{overflow: hidden; width: 850px; margin: 65px auto;}
.application_box .certification_list li{position: relative; float: left; margin: 0 35px; padding-top: 120px; width: 350px; height: 355px; text-align: center; border:1px solid #ececec; background-color: no-repeat;}
.application_box .certification_list li:hover{border:1px solid #14b3ad;}
.application_box .certification_list li.phone{background: url(../images/icon_sort1.png) no-repeat; background-position:  center 60px;}
.application_box .certification_list li.ipin{background: url(../images/icon_sort2.png) no-repeat; background-position:  center 60px;}
.application_box .certification_list li h4{font-size: 22px; margin: 65px; font-weight: normal;}
.application_box .certification_list li button{width: 90%; height: 55px; color: #fff; font-size: 18px; font-weight: 600;}

/*step일반*/
.step_box{overflow: hidden; margin: 60px 0;}
.step_box li{float: left; width: 20%; text-align: center; background: url(../images/application_line.png) no-repeat; background-position: right top 15px;}
.step_box li:last-child{background: none;}
.step_box li .d_itable{ width: 100px; height: 100px; }
.step_box li p{margin-top: 15px;}
.step_box li .d_itable .d_cell{overflow: hidden; width: 100%; height: 100%; background-color: #c3c3c3; border-radius: 15px;}
.step_box li.on .d_itable .d_cell{background-color: #14b3ad;}

/*step재원생*/
.step_box2{overflow: hidden; margin: 60px 0;}
.step_box2 li{float: left; width: 25%; text-align: center; background: url(../images/application_line.png) no-repeat; background-position: right top 15px;}
.step_box2 li:last-child{background: none;}
.step_box2 li .d_itable{ width: 100px; height: 100px; }
.step_box2 li p{margin-top: 15px;}
.step_box2 li .d_itable .d_cell{overflow: hidden; width: 100%; height: 100%; background-color: #c3c3c3; border-radius: 15px;}
.step_box2 li.on .d_itable .d_cell{background-color: #14b3ad;}


.borderwhite .check_list{border:1px solid #ececec; padding: 25px 15px; font-family: 'dotum'; font-size: 12px; }
.borderwhite .check_agree{background-color: #fafafa; border-bottom: 1px solid #ececec; padding: 15px 5px; text-align: right;}
.borderwhite .check_agree .radio_box,
.borderwhite table.join td .radio_box {display: inline-block; margin-right: 20px;}


.borderwhite table.join tr td.meeting .optionbox{width: 140px;}
.borderwhite table.join tr td.meeting p{display: inline-block;}

.borderwhite table.join tr td .weekly{overflow: hidden; width: 100%;}
.borderwhite table.join tr td .weekly li{float: left; margin: 5px 8px 0 0;}
.borderwhite table.join tr td .weekly li span{vertical-align: text-bottom;}


/*마이페이지*/
.borderwhite table.rowline td{text-align: center;}
.borderwhite table.rowline td span{color: #ff2727;}

.application_box .passnotice{margin-top: 80px; clear: both; line-height: 1.6em;}
.application_box .passnotice span{font-size: 18px; font-weight: 600; color: #14b3ad;}
.application_box .borderwhite span.bold{font-weight: 600;}
.application_box .borderwhite .process{overflow:hidden; width: 100%; margin: 80px auto 50px;}
.application_box .borderwhite .process li{display: inline-block; width: 29%; text-align: center; vertical-align: top;}
.application_box .borderwhite .process li:first-child{width: 40%;}
.application_box .borderwhite .process li .d_itable{ width: 140px; height: 140px; }
.application_box .borderwhite .process li .d_itable .d_cell{overflow: hidden; width: 100%; height: 100%; background-color: #88d9d6; border-radius:150px; padding-top: 10px;}
.application_box .borderwhite .process li dt{margin-top: 30px; font-size: 20px;}
.application_box .borderwhite .process li dl{margin-top: 20px; font-size: 14px;}

/*교육과정*/
.borderwhite .teach{width: 100%;}
.borderwhite .teach li{display: inline-block; width: 24.7%; padding: 15px 0;}
.borderwhite .teach li img{max-width: 100%;}
.borderwhite .teach li:nth-child(odd){width: 200px;}
.borderwhite .teach li:nth-child(even){vertical-align: top;}
.borderwhite .teach li dt{border-left: 3px solid #14b3ad; padding-left: 8px; line-height: 18px; font-size: 18px; margin-bottom: 15px; font-weight: 600;}

.broadcast_info{ overflow: hidden; position: relative; margin-bottom: 45px; margin-top: 50px;}
.broadcast_info li{float: left;}
.broadcast_info li.img_space{width: 40%; margin-left: 40px;}
.broadcast_info li.text_space{width: 45%; padding-top: 80px; padding-left: 80px;}
.broadcast_info li.text_space p.ttl_top{font-size: 28px; color: #14b3ad; padding-bottom: 20px;}
.broadcast_info li.text_space p.ttl_mid{font-size: 20px; font-style: italic; padding-bottom: 30px;}


/*faq*/
.faq .check_list {width:100%; table-layout:fixed; margin-top: 28px;}
.faq .check_list > li{overflow: hidden; position: relative; padding:0; border-bottom: 1px solid #ececec; border-top: 1px solid #ececec; }
.faq .check_list > li.active{border-bottom:none;}
.faq .check_list > li > a{overflow: hidden; width: 100%; display:block; background-color: #fafafa; padding: 15px 20px;}
.faq .check_list > li > a h3{float: left;font-size: 14px; font-weight: 600; padding-left: 15px;}
.faq .check_list > li > a p{float: left; }
.faq .check_list > li > a span{color: #14b3ad; text-align: right; font-weight: 800; font-size: 1.8em; float: right;}
.faq .check_list > li > ul{display: none; padding: 25px 50px; overflow: hidden; font-size: 14px; border-top: 1px solid #ececec; }
.faq .check_list > li > ul > li dt,
.faq .check_list > li > ul > li dl{display: inline-block;}
.faq .check_list > li > ul > li dt{vertical-align: top;}
.faq .check_list > li > ul > li dl{padding-left: 15px;}
.faq .check_list .ico_text{color: #14b3ad; text-align: left; font-weight: 800; font-size: 1.8em;}


/*서브공통*/

/*탭메뉴*/

@media screen and (max-width:1017px) {
	.sub_top {height: 100px;}
	.sub_top h2 {padding-top: 40px; font-size: 30px;}
	.sub_top .lnb_box {display: none;}
	.contents_title {padding: 30px 0; width: 100%;}
	.contents_title h2 {padding-bottom: 10px; margin-bottom: 10px; font-size: 26px;}
	.contentsarea {padding: 0 10px 30px 10px; width: 100%;}

	.sub_top .bg,
	.lnb_box{display: none;}

	.joinin_area{width: 100%; margin: 30px 0;}
	.joinin_area .notice_box{width:100%; padding: 20px 0; background:none;}
	.joinin_area .notice_box p{text-align: center; padding-bottom: 3px; font-size: 14px;}
	.joinin_area .notice_box p.big{font-size: 18px;}

	.application_box .certification_list{width: 100%; margin: 35px auto 0;}
	.application_box .certification_list li{overflow: hidden; margin: 0 5px; padding-top: 100px; width: calc(50% - 10px); height: 250px;}
	.application_box .certification_list li.phone{background-size: 50px; background-position: center 50px;}
	.application_box .certification_list li.ipin{background-size: 45px; background-position: center 40px;}
	.application_box .certification_list li h4{font-size: 18px; margin: 35px; font-weight: normal;}
	.application_box .certification_list li button{height: 35px; font-size: 16px; font-weight: normal;}

	.broadcast_info li{float: none;}
	.broadcast_info li.img_space{position: relative; width: 450px; margin: 0 auto;}
	.broadcast_info li.text_space{width: 100%; padding-top: 50px; padding-left: 10px;}
	.broadcast_info li.text_space p.ttl_top{font-size: 28px; color: #14b3ad; padding-bottom: 20px;}
	.broadcast_info li.text_space p.ttl_mid{font-size: 20px; font-style: italic; padding-bottom: 30px;}	

}
@media screen and (min-width:320px) and (max-width:784px){
	.btn {min-width: 50px; height: 30px;}
	.btn4 {width:30px; height:30px; background-size: 10px;}

}
@media screen and (min-width:320px) and (max-width:640px){

}
@media screen and (min-width:320px) and (max-width:480px){
	.application_box .certification_list li h4{font-size: 14px; }


	
}
@media screen and (min-width:320px) and (max-width:360px){
	
}


