@charset "utf-8";

/* 공통 구조
**********************************************/

/* Global */
.area { position: relative; width: 1100px; margin: 0 auto;}

#wrap .only_tablet { display: none;}
#wrap .only_mobile { display: none;}

/* Header */
.header { position: absolute; left: 0; top: 0; z-index: 50; width: 100%;}
.header .global_bg { background-color: #07112d;}
.header .global { height: 40px; line-height: 40px;}
.header .global::after { display:block; clear:both; visibility:hidden; height:0; content:'.';}
.header .global .left { float: left;}
.header .global .left a { display: inline-block; height: 22px; padding: 0 8px; font-size: 12px; color: #a0a0a0; vertical-align: middle; line-height: 20px; border:1px solid #a0a0a0;}
.header .global .left button { display: inline-block; height: 22px; padding: 0 8px; font-size: 12px; color: #a0a0a0; vertical-align: middle; line-height: 20px; border:1px solid #a0a0a0;}
.header .global .right { float: right; position: relative;}
.header .global .right >a { display: inline-block; color: #a0a0a0; vertical-align: middle;}
.header .global .right >a.click { height:22px; margin-left:13px; padding: 0 8px; line-height:20px;}
.header .global .right >a.click.logout { font-size:12px; border:1px solid #a0a0a0;}
.header .global .right >a:hover { text-decoration: underline;}
.header .global .right .shortcut_toggle { display: inline-block; height: 40px; padding:0 14px; color: #fff; vertical-align: top; background-color: #136da2;}
.header .global .right .shortcut_toggle img { margin:-2px 0 0 5px; vertical-align: middle;}
.header .head_bg { height: 101px; padding-top:22px; text-align:center; border-bottom:1px solid #58595b; background-color: #fff; box-shadow:0 2px 5px rgba(0,0,0,.1);}
.header .head_bg h1 a { display: inline-block;}
.header .head_bg .head .menu { position: absolute; right: 0; top: 45px;}
.header .head_bg .head .menu a { display: inline-block; height: 32px; padding: 0 16px; color: #fff; line-height: 30px; vertical-align: middle; border:1px solid #fff; border-radius:6px;}
.header .head_bg .head .menu a:hover { color: #ffe155; border:1px solid #ffe155;}
.header .head_bg .head .menu button { display: inline-block; position:relative; height: 32px; margin-left:12px; padding: 0 14px 0 17px; color: #fff; vertical-align: middle;}
.header .head_bg .head .menu .menu_open_toggle span { display: block; position:absolute; left:5px; width:21px; height:2px; background-color: #fff; transition:all .3s ease;}
.header .head_bg .head .menu .menu_open_toggle span.stick_t { top:6px;}
.header .head_bg .head .menu .menu_open_toggle span.stick_c { top:14px;}
.header .head_bg .head .menu .menu_open_toggle span.stick_b { top:22px;}
.header .head_bg .head .menu .menu_open_toggle.active span.stick_t { top:14px; transform: rotate( 225deg );}
.header .head_bg .head .menu .menu_open_toggle.active span.stick_c { opacity:0;}
.header .head_bg .head .menu .menu_open_toggle.active span.stick_b { top:14px; transform: rotate( -45deg );}
.header .head_bg .poal { position: absolute; left: 0; top:12px;}
.header .head_bg .poal .menu_close { clear:left; overflow:hidden; position: absolute; left:0; top:-5px; z-index:-1; width:300px; background-color: #fff; opacity:0; transition:all .3s ease;}
.header .head_bg .poal .menu_close li { float: left;}
.header .head_bg .poal .menu_close li a { display: block; padding:0 8px;}
.header .head_bg .poal .menu_close li a:hover { text-decoration: underline;}
.header .head_bg .poal .menu_close li a p { margin-top: 4px;}
.header .head_bg .menu_open,
.header .head_bg .m_menu_open { display:block; width:38px;}
.header .head_bg .menu_open span,
.header .head_bg .m_menu_open span { display:block; height:4px; margin-top:10px; background-color: #58595b;}
.header .head_bg .menu_open span:first-child,
.header .head_bg .m_menu_open span:first-child { margin-top: 0;}
.header .head_bg .side_menu { clear:left; overflow:hidden; position: absolute; right: 0; top: 8px;}
.header .head_bg .side_menu li { float: left; margin-left: 24px;}
.header .head_bg .side_menu li a { display: block;}
.header .head_bg .side_menu li p { margin-top: 2px;}

/* GNB */
.gnb { display: none;}

/* LNB */
.lnb { position: absolute; left:0; top:0; width:200px;}
.lnb >li >a { display:block; padding:17px 0 16px; font-size: 16px; border-bottom: 1px solid #e3e3e3;}
.lnb >li ul { padding:7px 0; border-bottom: 1px solid #e3e3e3;}
.lnb >li ul li a { display:block; padding:8px 0 8px 16px;}
.lnb >li a.active { font-weight:bold; color: #3483b4;}


/* Footer */
.footer { padding: 10px 0 20px; border-top:1px solid #bfbfbf;}
.footer .gloabl_footer { clear: both; overflow: hidden;}
.footer .gloabl_footer .menu { float: left; padding-top: 7px;}
.footer .gloabl_footer .menu a { font-size: 12px;}
.footer .gloabl_footer .menu span { margin: 0 6px;}
.footer .gloabl_footer .link { float: right;}
.footer .gloabl_footer .link a { display: inline-block; margin-left: 2px; vertical-align: middle;}
.footer .gloabl_footer .link select { height: 24px; margin-left: 12px; font-size: 13px;}
.footer .adress { margin-top: 11px; border-top:1px solid #bfbfbf;}
.footer .adress .area { padding:28px 0 0 174px; font-size: 12px;}
.footer .adress .area img { position: absolute; left: 0; top:21px;}

/* Location */
.location { margin-bottom:8px; font-size:12px; text-align: right;}


/* 공통 STYLE
**********************************************/

.overflow { overflow: hidden;}

/* 패딩 */
.common_padding { padding-top: 155px; background-color: #fff;}

/* 정렬 */
.tal { text-align:left !important;}
.tac { text-align:center !important;}
.tar { text-align:right !important;}

.dib { display: inline-block;}
.vam { vertical-align: middle;}
.fwn { font-weight: normal;}

/* 클리어 */
.clear { clear: both; overflow: hidden;}

/* HR */
hr.h5 { height: 5px;}
hr.h7 { height: 7px;}
hr.h10 { height: 10px;}
hr.h11 { height: 11px;}
hr.h13 { height: 13px;}
hr.h15 { height: 15px;}
hr.h17 { height: 17px;}
hr.h20 { height: 20px;}
hr.h22 { height: 22px;}
hr.h25 { height: 25px;}
hr.h30 { height: 30px;}
hr.h35 { height: 35px;}
hr.h40 { height: 40px;}
hr.h45 { height: 45px;}
hr.h60 { height: 60px;}
hr.h80 { height: 80px;}

#wrap .mt0 { margin-top: 0;}
.ml10 { margin-left: 10px;}
.ml20 { margin-left: 20px;}

/* 어드민 용 */
#wrap .admin { background-color: #fff;}
#wrap .admin  .area { min-height:inherit; padding:20px 20px 110px;}

/* 헤딩 */
h2 { font-size: 28px;}
h2 .small_font { font-size: 20px; font-weight: normal;}
h2.admin { margin-bottom:-10px; padding-bottom:0; font-size: 21px; border-bottom:none;}
#wrap h3.fs18 { font-size: 18px;}
#wrap h3.fs18 .small { font-size: 14px;}
#wrap h3.fs18 .ssmall { font-size: 12px;}
h3.seedh { font-size: 21px; color: #2488a5; line-height: 23px;}
h3.sub_style { font-size: 18px; text-align: center;}

/* 색상 */
.color_red { color: #bc0000;}
.color_blue { color: #136da2;}
.color_lightblue { color: #3483b4;}
#wrap .color_yellow { color: #f1eac7;}

/* tab */
.tab { clear: left; overflow: hidden; margin-top: 40px; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3;}
.tab a { display: block; float: left; width: 33.33334%; padding: 15px 0; font-size: 18px; color: #6f6f6f; text-align: center;}
.tab a .round { display: inline-block; width:25px; height:25px; margin-right: 9px; padding-top: 6px; font-size: 16px; color: #fff; vertical-align: middle; background-color: #b3babf; border-radius: 50%;}
.tab a.active { color: #fff; background-color: #5b6770;}
.tab a.active .round { color: #6e6e6e; background-color:#fff;}

.tab2 { height:39px; border-bottom:1px solid #333;}
.tab2::after { display:block; clear:both; visibility:hidden; height:0; content:'.';}
.tab2 li { float: left;}
.tab2 li a { display: block; margin-left:-1px; padding:11px 0; text-align:center; border:1px solid #d8d8d8; border-bottom:none; background-color: #f7f7f7;}
.tab2 li a.active { position:relative; padding:12px 0; border:1px solid #136da2; border-bottom:none; background-color: #fff;}
.tab2.step3 li { width:33.33334%;}
.tab2.step5 li { width:20%;}

.tab3 { height:47px; border-bottom:2px solid #65a250;}
.tab3::after { display:block; clear:both; visibility:hidden; height:0; content:'.';}
.tab3 li { float: left; padding-top: 6px;}
.tab3 li a { display: block; margin-left:-1px; padding:13px 0 12px; font-size:13px; text-align:center; border:1px solid #d8d8d8; border-bottom:none;}
.tab3 li a.active { position:relative; margin-top:-6px; padding:15px 0; font-size:16px; color:#fff; border:none; border-bottom:none; background-color: #65a250;}
.tab3.step6 li { width:16.6666%;}

.tabmy { height:43px; text-align:right; border-bottom:1px solid #136da2;}
.tabmy li { display:inline-block; width: 156px; margin-left:-4px;}
.tabmy li a { display: block; padding:14px 0 13px; text-align:center; border:1px solid #e3e3e3; border-bottom:none; background-color: #f5f5f5;}
.tabmy li a.active { margin-right:1px; padding:14px 0; border:1px solid #136da2; border-bottom:none; background-color: #fff;}
.tabmy li:last-child a.active { margin-right: 0;} 


.print { position: fixed; left: 0; bottom: 0; width:100%; padding:15px 0; background-color: #f5f5f5;}

/* 버튼 */
#wrap .btn { display: inline-block; padding: 0 12px; font-size: 15px; color: #fff; text-align: center; line-height: 40px; border-radius: 5px; transition:all .3s ease;}
#wrap .btn.h35 { font-size: 14px; line-height: 35px;}
#wrap .btn.small { padding: 0 9px; font-size:14px; line-height: 30px;}
#wrap .btn.w100p { width:100%;}
#wrap .schoolLifeWrap .file button { line-height: 24px; font-size: 11px; color: #444; border: 1px solid #d3d3d3; margin-left: 4px; }

#wrap .btn.white { color:#777; background-color: #fff; border:2px solid #babec2;}
.btn.white { background-color: #eee;}
.btn.blue { background-color: #136da2;}
.btn.blue:hover { background-color: #0c5e8f;}
.btn.skyblue { background-color: #81bfe4;}
.btn.skyblue:hover { background-color: #6eaace;}
.btn.lightblue { background-color: #3483b4;}
.btn.lightblue:hover { background-color: #25709f;}
.btn.gray { background-color: #5b6770;}
.btn.gray:hover { background-color: #46535c;}
.btn.lightgray { background-color: #7691a1;}
.btn.lightgray:hover { background-color: #5a7281;}
.btn.semigray { background-color: #8f969c;}
.btn.semigray:hover { background-color: #6b757d;}
.btn.lessgray { background-color: #dcdcdc;}
.btn.lessgray:hover { background-color: #c8c3c3;}
.btn.orange { background-color: #ffa759;}
.btn.orange:hover { background-color: #f19a4d;}
.btn.green { background-color: #2db5a0;}
.btn.green:hover { background-color: #23a08d;}
.btn.lightgreen { background-color: #65a250;}
.btn.lightgreen:hover { background-color: #4f8b3a;}

.arrow_r { position: relative;}
.arrow_r::after { position: absolute; right:10px; top:15px; content:''; width:5px; height: 9px; background: url(../../images/front/ico_arrow_r.png) no-repeat;}
.arrow_l { position: relative;}
.arrow_l::after { position: absolute; left:10px; top:15px; content:''; width:5px; height: 9px; background: url(../../images/front/ico_arrow_l.png) no-repeat;}

/* Table */
.line_blue { border-top:3px solid #136da2; border-bottom:1px solid #40362a;}
.line_black { border-top:2px solid #40362a; border-bottom:1px solid #40362a;}
.line_black.notop { border-top:none;}

.wtable { border-bottom: 1px solid #40362a;}
.wtable tr.answer_tr { display: none;}
.wtable tr.active td { background-color: #eaf2fc;}
.wtable th { padding: 18px 5px; font-size:13px; border-top:3px solid #136da2; border-left:1px solid #e3e3e3; background-color: #f5f5f5;}
.wtable th:first-child { border-left:none;}
.wtable th.other { border-top:3px solid #72b1c8;}
.wtable td { padding: 13px 5px; font-size:13px; text-align: center; line-height: 18px; border-left:1px solid #e3e3e3; border-top:1px solid #e3e3e3;}
.wtable td:first-child { border-left:none;}
#wrap .wtable td.left { padding-left: 10px; text-align: left;}
.wtable td.left a { display: block;}
.wtable td.left a:hover { text-decoration: underline;}
.wtable td.font13 { font-size: 13px;}
.wtable td.answer { padding: 25px 9.6%; text-align: left; text-indent:-16px; line-height: 24px; background-color: #f5f5f5;}
.wtable td.bln { border-left: none;}
.wtable td.vat { padding-top:18px; vertical-align: top;}
.wtable td .corange { font-weight: 800; color: #ff6000;}
.wtable td .file li a { display: inline-block; padding:5px 0; color: #136da2;}
.wtable td .file li img { margin-left:10px; vertical-align: middle;}
.wtable td .btn { margin: 0 2px;}
.wtable td img.middle { width:14px; height:14px; margin-top:-2px; vertical-align: middle;}
.wtable.style { border-bottom:1px solid #e3e3e3;}
.wtable.none_border { border-bottom:none;}
.wtable.none_border th { border-top:none;}

.wtable2 th { padding:15px 0; font-size: 13px; border-top: 2px solid #35414d; border-bottom: 1px solid #35414d; background-color: #f9f9f9;}
.wtable2 td { padding:11px 0; font-size: 13px; color: #555; text-align: center; border-bottom: 1px solid #ccc;}
.wtable2 td a { display: block; text-align: left; line-height: 19px;}
.wtable2 td a:hover { text-decoration: underline;}
.wtable2 td.por { position: relative;}
.wtable2 td.por img { position: absolute; left: 50%; top:50%; width:16px; height:15px; margin:-7px 0 0 -8px;}
.wtable2 td >img { width:16px; height: auto;}

.mywtable th { padding:16px 5px; font-size:13px; line-height:18px; border-left:1px solid #e3e3e3; background-color: #f5f5f5;}
.mywtable th:first-child { border-left:none;}
.mywtable td { padding:11px 7px; font-size:13px; word-break:break-all; word-wrap:break-word; line-height:18px; border-left:1px solid #e3e3e3; border-top:1px solid #e3e3e3;}
.mywtable td:first-child { border-left:none;}
.mywtable td select,
.mywtable td input[type=text] { width:100%; padding:0 1px; text-align: center;}
.mywtable tr td.left { padding-left:20px; text-align: left;}
.mywtable td.bl { border-left:1px solid #e3e3e3;}
.mywtable td.bln { border-left:none;}
.mywtable td .pd { padding:0 20px;}
.mywtable td .hd { margin:4px 0; padding:0 20px;}
.mywtable td .q { padding:0 10px;}
.mywtable td .q .sub { font-size: 12px;}
.mywtable td .sub_input { margin-top: 3px; padding: 0 10px;}
.mywtable td .sub_input input[radio],
.mywtable td .sub_input input[checkbox] { margin-right: 10px;}
.mywtable td .sub_input label { display:inline-block; margin-top: 5px;}
.mywtable th .blet { margin-left:2px; color: #f5f5f5;}
.mywtable th .required { margin-left:2px; color: #bc0000;}
.mywtable td .btn.ml { margin-left: 7px;}
.mywtable tfoot td { background-color: #f5f5f5;}
.mywtable td.up img,
.mywtable td.middle img,
.mywtable td.down img { display:inline-block; width:23px; height: 23px; vertical-align:middle;}
.mywtable td.up span,
.mywtable td.middle span,
.mywtable td.down span { display: inline-block; margin-left:5px; padding-top:1px; font-weight:bold; vertical-align: middle;}
.mywtable td.up .icon { background-position: 0 -50px;}
.mywtable td.up span { color: #0072bc;}
.mywtable td.middle .icon { background-position: -50px -50px;}
.mywtable td.middle span { color: #009944;}
.mywtable td.down .icon { background-position: -100px -50px;}
.mywtable td.down span { color: #f26522}
.mywtable tr.bg_lightblue td,
.mywtable td.bg_lightblue { background-color: #ecfbff;}

.mywtable.td_center td { text-align: center;}
.mywtable.td_center tr.add_tr td { background-color: #f5f5f5;}
.mywtable.thpd7 th { padding:7px 5px;} /* th가 두줄일때 사용 */
.mywtable.thpd11 th { padding:11px 5px;}
.mywtable.tdpd5 td { padding: 5px;} /* 버튼이 있어서 간격을 줄여야 할 경우 */
.mywtable.tdpd15 td { padding:15px 7px;}

.htable .size1 { width:155px;}
.htable th { padding: 18px 20px 0; text-align: left; vertical-align: text-top; border-top:1px solid #e3e3e3; background-color: #f5f5f5;}
.htable tr:first-child th { border-top:none;}
.htable td { padding: 7px 15px; line-height: 18px; border-top:1px solid #e3e3e3;}
.htable tr:first-child td { border-top:none;}
.htable td strong { display:block; padding-top:2px; font-size:18px;}
.htable td.left a { display: block;}
.htable td.left a:hover { text-decoration: underline;}
.htable td.left { padding-left: 10px; text-align: left;}
.htable td.bl { border-left:1px solid #e3e3e3;}
.htable td.bl_none { border-left:none;}
.htable th .strong { color:#ff0000;}
.htable td .input_por { position: relative; margin-right:4px;}
.htable td .input_por input { margin-right: 0;}
.htable td #div_sch .poa { overflow-x:hidden; overflow-y:scroll; width:100%; max-height:120px; margin-top:10px; border:1px solid #699fc1; background-color: #fff;}
.htable td #div_sch .poa a { display: block; padding: 10px 6px; border-bottom: 1px solid #e3e3e3;}
.htable td .otherstyle .ul >li { margin-top: 6px;}
.htable td .otherstyle .ul >li span { display: inline-block; width:80px; text-align: center; vertical-align: middle;}
.htable td .otherstyle .ul >li input { margin:0 4px;}
.htable td .otherstyle .ul >li:first-child { margin-top: 12px;}
.htable td .lh { padding: 8px 0;}
.htable td .mh35 { min-height: 35px; line-height: 35px;}
.htable.bt {  border-top:1px solid #e3e3e3;  border-bottom:1px solid #40362a;} /* 공지사항 이전, 다음글에 사용 */
.htable .guide { margin-top: 5px; font-size: 13px;}
.htable.thpd18 th { padding: 18px 0;}
.htable.center th { padding:13px 0; text-align: center;}
.htable.center td { text-align: center;}
.htable.tdbl td { border-left:1px solid #e3e3e3;}

.mtable th { padding: 16px 19px; font-size:13px; font-weight: 400; text-align: left; border-top:1px solid #e3e3e3; background-color: #f5f5f5;}
.mtable td { padding: 7px 14px; font-size:13px; line-height: 18px; border-top:1px solid #e3e3e3;}
.mtable td input[type="text"],
.mtable td select { margin-right: 4px;}
.mtable td .guide { margin-top: 13px; font-size: 12px;}
.mtable td .guide2 { margin-bottom: 5px; font-size: 12px;}
.mtable.style th { padding: 16px 0; text-align: center;}
.mtable.style td { padding: 0 24px;}

/* 페이지 넘버 */
.pagenumber { position:relative; text-align: center;}
.pagenumber a { display: inline-block; width:27px; height: 27px; padding-top: 9px; font-size: 12px; cursor: pointer;}
.pagenumber >span { display: inline-block;}
.pagenumber a.active { color: #fff; background-color: #7691a1;}

.pagenumber .search { position: absolute; left: 0; top:0; z-index: 1;}
.pagenumber .search input { width:116px; height: 24px;}
.pagenumber .search button { display:inline-block; width:24px; height:24px; margin-left:1px; vertical-align:middle; background-color: #428cb9;}
.pagenumber .search button img { width:24px; height: 24px;}

.n_pagenum { position:relative; height:24px; text-align: center;}
.n_pagenum .poal { position: absolute; left: 0; top: 0;}
.n_pagenum .poal input { display:inline-block; width:156px; height: 24px; vertical-align:middle;}
.n_pagenum .poal button { display:inline-block; width:24px; height:24px; margin-left:2px; vertical-align:middle; background-color: #428cb9;}
.n_pagenum .poal button img { width:24px; height: 24px;}
.n_pagenum .poar { position: absolute; right: 0; top: 0;}
.n_pagenum .poar a:hover { text-decoration: underline;}
.n_pagenum a { font-size: 12px;}
.n_pagenum a.nolink { color: #929292;}
.n_pagenum >a { margin: 0 13px;}

/* 교과 추가하기 */
.comm_add { text-align:center; border-top:5px solid #cdd1d4;}
.comm_add .add { display: inline-block; width:145px; height:34px; margin-top:-5px; font-weight:700; color:#777; border:1px solid #b5b7b9; border-top:none; background-color: #f5f5f5; border-radius:0 0 5px 5px;}
.comm_add .add img { margin-right: 5px;}
.comm_add .btn { margin:0 2px;} 
#wrap .comm_add .white { padding:0 7px; line-height: 26px;}

/* Controls */
.controls { position:relative; margin: 25px 0 10px;}
.controls .left { position: absolute; left:0; top:0;}
.controls .left select { margin-left: 8px;}

/* 인쇄용 새창 */
.pop_head { position: relative; text-align: center;}
.pop_head .mobile_body >img { width:100%; height: auto;}
.pop_head .look { position: absolute; left: 0; bottom:16px; width: 100%; font-size:0; text-align: center;}
.pop_head .look li { display: inline-block; position: relative; vertical-align: top;}
.pop_head .look li.a { padding-left:92px;}
.pop_head .look li.b { padding-left:83px;}
.pop_head .look li.b img { top:9px;}
.pop_head .look li.c { padding-left:94px;}
.pop_head .look li.c img { top:7px;}
.pop_head .look li.etc { width:1px; margin:0 0 0 25px; padding:7px 0 0;}
.pop_head .look li.etc img { position: inherit; left: inherit; top: inherit;}
.pop_head .look li img { position: absolute; left: 30px; top:0;}
.pop_head .look li .t { margin-top:1px; font-size:14px; font-weight:bold; color: #9295fc; text-align: left;}
.pop_head .look li .b { font-size:18px; font-weight:bold; color: #fff; text-align: left;}
.pop_head .poa { position: absolute; left: 20px; top:20px;}
.pop_head .poa .f { font-size:22px; font-weight:bold; color: #fff;}
.pop_head .poa .b { font-weight:bold; color: #fff;}

.be >li { margin-top: 15px;}
.be >li:first-child { margin-top: 0;}
.be >li dt { padding:18px 20px; border:1px solid #eaeaea; background-color: #f5f5f5;}
.be >li dd { margin-top:-1px; padding:15px 65px; border:1px solid #eaeaea;}
.be >li .q {  padding-left: 44px; font-size:16px; font-weight: bold; text-indent: -44px;}
.be >li .q span { display:inline-block; width:36px; margin-right:5px; text-align: right;}
.be >li .a { font-size:16px; font-weight: bold; color: #20358c;}
.be >li ul li { margin-top:6px; padding:0 43px; font-size: 12px; line-height: 16px;}

/* View */
.n_view { padding-top:10px; border-top:1px solid #e3e3e3;}
.n_view .date { font-size: 12px; color: #555; text-align: right;}
.n_view .title { margin-top:20px; font-size: 24px; color:#222; text-align: center;}

.keyword { clear: left; overflow: hidden; margin-top: 40px;}
.keyword li { float: left; margin-left: 15px;}
.keyword li a { display: inline-block; padding:5px 10px; font-size:13px; background-color: #f2f2f2;}
.keyword li:first-child { margin-left: 0;}

.dn { position:relative; padding:10px 0 10px 65px; font-size:13px; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3;}
.dn div.vam { position: absolute; left:10px; top:10px;}
.dn img { width:14px; height:auto; margin-top:-2px; vertical-align: middle;}
.dn ul li { margin-top: 5px;}
.dn ul li:first-child { margin-top: 0;}
.dn ul li a { display:inline-block; font-size:13px; color: #136da2;}


/* 레이어
**********************************************/

.layer { position: fixed; left:0; top: 0; z-index: 100; overflow-x:hidden; width: 100%; height:100%; padding:20px; background-color: rgba(0, 0, 0, .6);}
.layer .area { position:absolute; left:50%; top:50%; z-index:100; min-height:430px; padding:20px; background-color:#fff; transform:translate(-50%, -50%);}
.layer .contents { position: relative;}
.layer .contents .close { display:block; position: absolute; right:-52px; top:-20px; width:32px; height:32px; background-color: #b2b2b2;}
.layer h3 { padding-top:10px; font-size: 18px;}
.layer .btns { margin-top:11px; text-align: center;}
.layer .btns .btn { width:95px; margin:0 2px;}

.layer .search { padding:16px 0; text-align:center; background-color: #f5f5f5;}
.layer .search input { width:142px; margin:0 5px;}
.layer .search input.md { margin-right: 20px;}
.layer .search .btn { width:75px; margin-left: 10px;}

/* 성적분석 - 교과성적 분석 */
.layer .etcmt { margin-top:-18px; text-align: right;}
.layer .etcmt .btn { min-width: 95px; margin-left: 7px;}

/* 회원 탈퇴 */
.layer .confirm { padding-top:35px; font-size: 34px; text-align: center;}
.layer .ct { margin-top:6px; text-align: center;}
.layer .cp { margin:26px -20px 0; text-align: center; border-top:1px solid #e3e3e3;}
.layer .cp input { width:60%; margin-top: 40px;}
.layer .cp .cpt { margin-top: 36px;}
#wrap .layer .cp .btn { width:60%; font-size:15px; line-height: 40px;}


/* 로그인
**********************************************/

.login .area { width:600px; padding: 50px 0 100px;}
.login h2 { padding-bottom:0; font-size:34px; text-align:center; border-bottom:none;}
.login .st { margin-top: 14px; text-align: center;}
.login .contents { margin-top: 36px; border-top:1px solid #e3e3e3;}
.login .contents .space { width:368px; margin: 0 auto;}
.login .contents .space input[type=text],
.login .contents .space input[type=password] { display: block; width: 100%; height:40px; margin-top: 10px;}
.login .contents .check { margin-top: 20px;}
.login .contents .btns { clear: both; overflow: hidden;}
.login .contents .btns .left { float: left; width: 48%;}
.login .contents .btns .right { float: right; width: 48%;}
.login .contents .other_login { overflow:hidden; height:40px; padding-top:10px; font-size:17px; font-weight:bold; text-align:center; background-color: #ffeb00; border-radius:5px;}
.login .contents .other_login img { display: inline-block; margin-top:-2px; vertical-align: middle;}
.login .contents .other_login span { display: inline-block; vertical-align: middle;}
.login .contents .other_login:hover { background-color: #ffde00;}
.login .contents .find { margin-top: 30px; color: #666; text-align: center;}
.login .contents .find a { color: #666;}
.login .contents .find span { margin: 0 38px;}

.login .com_title { margin-top: 70px; font-size: 20px; color: #333; text-align: center;}
.login .com_sub { margin-top: 15px; font-size: 15px; text-align: center;}
.login .contents .btns.style { text-align: center;}
.login .contents .btns.style .btn { width:195px; margin: 0 4px;}

/* 아이디/비밀번호 찾기 */
.login .contents .idpwse .ft { font-size:20px; text-align: center;}
.login .contents .idpwse .btns { width:370px; margin: 30px auto 0;}
.login .contents .pwt { font-size: 20px; text-align: center;}
.login .contents .pws { font-size: 15px; text-align: center;}
.login .contents .space.style { width:400px;}


/* 메인
**********************************************/

.main { padding-top: 150px;}
.main .flexslider { margin: 0; border: none;}

.main .mp { clear: left; overflow: hidden;}
.main .mp li { float: left; width: 22.7%; margin-left: 3.06%;}
.main .mp li:first-child { margin-left: 0;}
.main .mp li a { display: block; padding:20px 0 8px; color: #fff; text-align: center;}
.main .mp li a.bg { background-color: #6bd18f;}
.main .mp li a.bg:hover { background-color: #52b876;}
.main .mp li a.bp { background-color: #b1a1ec;}
.main .mp li a.bp:hover { background-color: #9684d9;}
.main .mp li a.bo { background-color: #ffc34f;}
.main .mp li a.bo:hover { background-color: #edb13c;}
.main .mp li a.bb { background-color: #6ec2d1;}
.main .mp li a.bb:hover { background-color: #58adbc;}
.main .mp li a p { margin-top:5px; font-size: 24px; font-weight: 400;}

.main .youtube { margin-top: 40px; padding:22px 38px; border:1px solid #dadada; background-color: #f3f3f3;}
.main .youtube h3 { display: inline-block; padding:9px 21px 6px; font-weight:normal; background-color: #ee0000; border-radius:19px;}
.main .youtube h3 span { display: inline-block; font-size:22px; color:#fff; vertical-align: middle;}
.main .youtube h3 img { display: inline-block; margin:-2px 0px 0 7px; vertical-align: middle;}
.main .youtube .clear { clear: both; overflow: hidden; margin-top: 9px;}
.main .youtube .clear .left { float:left; width:526px; padding:17px; background: url(/images/front/main_youtube_bg.png) no-repeat center center; border-radius:15px;}
.main .youtube .clear .right { float:right; width:432px;}
.main .youtube .clear .right ul { clear: left; overflow: hidden; margin:-15px 0 0 -10%;}
.main .youtube .clear .right ul li { float: left; width:40%; margin:15px 0 0 10%;}
.main .youtube .clear .right ul li a { display: block; overflow: hidden;}
.main .youtube .clear .right ul li img { width:100%; height:auto; border: 1px solid #000;}
.main .youtube .clear .right ul li p { height:33px; margin-top:6px; line-height: 16px;}

.main .info { margin-top:40px; padding:26px 39px 22px; border: 1px solid #dadada;}
.main .info .left { float: left; position:relative; width: 151px; padding-top:9px; border-top:1px solid #000;}
.main .info .left h3 { padding-left:1px; font-size: 24px; color: #000;}
.main .info .left ul { margin-top:40px; border-top: 1px solid #e5e4e2;}
.main .info .left ul li { border-bottom: 1px solid #e5e4e2;}
.main .info .left ul li a { display: block; padding:17px 19px; font-size:15px; color: #555;}
.main .info .left ul li a.active { font-weight:bold; color: #fff; background-color: #3483b4;}
.main .info .left .poa { display:inline-block; position: absolute; right: 0; top: 13px;}
.main .info .right { float: right; width: 830px;}
.main .info .right ul { clear: left; overflow: hidden; margin-top: 15px;}
.main .info .right ul li { float: left; width: 250px; margin-left: 40px;}
.main .info .right ul li:first-child { margin-left: 0;}
.main .info .right ul li a { display: block; overflow: hidden; height: 204px;}
.main .info .right ul li a .title { overflow:hidden; height:38px; font-size: 17px; font-weight: bold; line-height: 21px;}
.main .info .right ul li a .con { margin-top:12px; font-size: 15px; color: #666; line-height: 24px;}

.main .bottom_promote { margin-top: 50px; background-color: #f4f4f4;}
.main .bottom_promote .slides li a { display: block; padding: 19px 0; text-align: center;}
.main .bottom_promote .slides li a img { width: inherit; margin: 0 auto;}
.main .bottom_promote .flexslider  { padding:0 20px; background-color: inherit;}
.main .bottom_promote .flex-direction-nav .flex-prev { left:0; width:13px; height:21px; margin-top:-10px; text-indent:-99999px;  background: url(../../images/front/ico_smallbanner_left.png) no-repeat center center; opacity:1;}
.main .bottom_promote .flex-direction-nav .flex-next { right:0; width:13px; height:21px; margin-top:-10px; text-indent:-99999px; text-align:inherit;  background: url(../../images/front/ico_smallbanner_right.png) no-repeat center center; opacity:1;}

.main .aside { position: fixed; left:50%; top:300px; margin-left: 484px;}
.main .aside .close { position: absolute; right:28px; bottom:3px;}
.main .aside a { display: block;}
.main .aside img { vertical-align: top;}

.main_popup { position: fixed; left: 50%; top:50%; z-index:200; margin:-222px 0 0 -540px;}
.main_popup img { max-width: 100%; height: auto;}
.main_popup .poa { position: absolute; left: 24px; bottom: 27px;}
.main_popup .poa input { display: none;}
.main_popup .poa input +label { display: inline-block; height: 28px; padding: 12px 0 0 30px; background:url(../../images/front/main_popup_checkbox.png) no-repeat; cursor: pointer;}
.main_popup .poa input:checked +label { background-position: 0 -50px;}
.main_popup .poa label { font-size:12px; color: #fff;}
.main_popup .poa button { margin-left:10px; padding: 2px 8px; font-size:12px; color:#fff; letter-spacing:-1px; border:1px solid #000; background-color: #091781; border-radius: 4px;}

.main_popup2 { position: fixed; left: 50%; top:50%; z-index:190; margin:-222px 0 0 103px;}
.main_popup2 img { max-width: 100%; height: auto;}
.main_popup2 .poa { position: absolute; left: 24px; bottom: 10px;}
.main_popup2 .poa input { display: none;}
.main_popup2 .poa input +label { display: inline-block; height: 28px; padding: 12px 0 0 30px; background:url(../../images/front/main_popup_checkbox2.png) no-repeat; cursor: pointer;}
.main_popup2 .poa input:checked +label { background-position: 0 -50px;}
.main_popup2 .poa label { font-size:12px; font-weight:bold; color: #004c08;}
.main_popup2 .poa button { margin-left:10px; padding: 2px 8px; font-size:12px; color:#fff; letter-spacing:-1px; background-color: #097959; border-radius: 4px;}



/* 입시정보
**********************************************/

/* 공통 */
.notice .area { position:relative; min-height:600px; padding: 0 0 100px 230px;}

.notice .article_main_list { position: relative;}
.notice .article_main_list li { margin-top: 25px;}
.notice .article_main_list li:first-child { margin-top: 0;}
.notice .article_main_list li a { display: block; overflow:hidden; max-height: 114px;}
.notice .article_main_list li .subject { display:inline-block; font-size: 18px; line-height: 28px;}
.notice .article_main_list li .text { margin-top: 8px; color:#888; line-height: 25px;}
.notice .article_main_list li .l_date { font-size: 12px; color: #555;}
.notice .article_main_list li .link { position: absolute; right:0; bottom:0;}
.notice .article_main_list li .etc { margin-top: 5px;}
.notice .article_main_list li .etc .left { float: left; font-size: 12px; color: #3483b4;}
.notice .article_main_list li .etc .right { float: right; }
.notice .article_main_list li .etc .right a { display: block; font-size: 12px; color: #3483b4;}
.notice .article_main_list li.thumbnail { position:relative; min-height:130px; margin-top:30px; padding-left: 157px;}
.notice .article_main_list li.thumbnail:first-child { margin-top: 0;}
.notice .article_main_list li.thumbnail img { position: absolute; left: 0; top:0; width: 130px; height: 130px;}
.notice .article_main_list li.thumbnail .subject { margin-top: -5px; line-height: 28px;}
.notice .article_main_list li.thumbnail a { max-height: 108px;}

.notice .stack { clear: both; overflow: hidden; margin-top: 30px; font-size: 12px;}
.notice .stack span { display:inline-block; padding-top:2px; vertical-align: middle;}
.notice .stack .left { float: left;}
.notice .stack .right { float: right;}
.notice .stack .right select { height: 20px; font-size: 12px;}

.notice .downlist { display:flex; flex-wrap: wrap; align-items: center; margin-right: -2px;}
.notice .downlist li { position:relative;  width:20%; padding:7px 0 7px 14px; border-right:1px solid #e3e3e3;}
.notice .downlist li p { padding-right: 30px;}
.notice .downlist li a { position: absolute; right:11px; top:50%; margin-top: -9px;}
.notice .downlist li.prepare { width:100%; text-align: center;}

.notice .analysis .left { float: left;}
.notice .analysis .left ul { clear: left; overflow: hidden;}
.notice .analysis .left ul li { float: left; margin-left: 10px;}
.notice .analysis .left ul li:first-child { margin-left: 0;}
.notice .analysis .left ul li a { display: block;}
.notice .analysis .left ul li a img { width: 130px; height:130px;}
.notice .analysis .right { float: right;}

.notice .region_t { clear: left; overflow: hidden; border-left:1px solid #e3e3e3; border-top:1px solid #e3e3e3;}
.notice .region_t li { float: left; width: 16.6666%;}
.notice .region_t li a { display: block; padding:13px 0 13px 20px; color:#58595b; border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; background-color: #f3f3f3;}
.notice .region_t li a:hover { text-decoration: underline;}
.notice .region_t li a.blank { height:41px;}
.notice .region_t li a.active { color:#fff; background-color: #3483b4;}

.notice .region_s span { display: inline-block; vertical-align: middle;}
.notice .region_s .box { padding: 6px 36px; font-size:16px; font-weight:bold; color:#3483b4; border:1px solid #73a8c9; background-color: #f3f3f3;}
.notice .region_s .sub { margin-left:14px; font-size:12px;}

.notice .region_l { clear: left; overflow: hidden;}
.notice .region_l li {float: left; width: 33.3334%; }
.notice .region_l li a { display: block; padding: 11px 0;}
.notice .region_l li a:hover { text-decoration: underline;}

.notice .vcon { padding: 30px 20px;}
.notice .vcon img { width:inherit !important; height:inherit !important; max-width: 100%;}



/* 피기맘
**********************************************/

.piggy .area { position:relative; min-height:600px; padding: 20px 0 100px 230px;}
.piggy .intro .top img { max-width: 100%; height: auto;}
.piggy .intro .top p { margin-top:15px; font-size: 16px; line-height: 30px;}
.piggy .intro .service { clear: both; overflow: hidden;}
.piggy .intro .service h3 { display:inline-block; width:170px; margin:0 auto 17px; padding:7px 0; font-size:18px; color:#fff; text-align:center; background-color: #2cb5a0; border-radius:16px;}
.piggy .intro .service h3.mt { margin-top: 94px;}
.piggy .intro .service ul li { padding:5px 0 5px 15px; color: #6e6e6e;}
.piggy .intro .service .t { padding-left:15px; font-size: 16px;}
.piggy .intro .service .phone { position: relative; min-height:175px; padding-left: 140px;}
.piggy .intro .service .phone.mt { margin-top: 15px;}
.piggy .intro .service .phone .poa { position: absolute; left: 35px; top:0;}
.piggy .intro .service .left { float: left; width: 50%;}
.piggy .intro .service .right { float: right; width: 50%;}
.piggy .intro .app { margin-top:70px; padding:25px 0; text-align:center; background-color: #f4f4f4;}
.piggy .intro .app p { display: inline-block; margin:0 4px; font-size:15px; vertical-align: middle; line-height: 25px;}
.piggy .intro .app a { display: inline-block; margin:0 8px; vertical-align: middle;}


/* 평가/진단
**********************************************/

.seed .area { position:relative; min-height:600px; padding: 20px 0 100px 230px;}

/* SEED 소개 */
.seed .decoration { background: url(../../images/front/seed_decoration.png) no-repeat right 15px;;}
.seed .decoration p { line-height: 30px;}
.seed .decoration p.t { font-size: 18px; color: #001893;}
.seed .btns { text-align: center;}
#wrap .seed .btns.pdstyle .btn { padding:0 52px;}

/* 이용안내 */
.seed .guide .head { font-size: 15px;}
.seed .guide .underline { border-bottom: 1px solid #efd4d4;}
.seed .guide h3 { margin-top:40px; font-size: 18px;}

.seed .guide .step1 { margin-top: 20px;}
.seed .guide .step1 ol { clear: left; overflow: hidden;}
.seed .guide .step1 ol li { float: left; position:relative; width:21.25%; padding-top: 31px;}
.seed .guide .step1 ol li >p { position:absolute; left:50%; top:0; width:90px; height:90px; margin-left:-45px; padding-top:10px; font-size:24px; color: #fff; text-align:center; line-height:18px; background-color: #81bfe4; border-radius:45px;}
.seed .guide .step1 ol li h4 { font-size:18px; color:#fff; text-align:center; line-height:59px; background-color: #136da2;}
.seed .guide .step1 ol li a { display: block; padding:8px 11px; color:#fff; text-align: right; background-color: #8f969c;}
.seed .guide .step1 ol li a:hover { background-color: #666;}
.seed .guide .step1 ol li .lay { position: relative; z-index: 1;}
.seed .guide .step1 ol li .body { min-height:91px; padding:8px 13px; background-color: #f5f5f5;}
.seed .guide .step1 ol li .body p { font-size: 13px;}
.seed .guide .step1 ol li.arrow { width:5%; padding-top:90px; text-align: center;}
.seed .guide .step1 .description { margin-top:50px; text-align: center;}
.seed .guide .step1 .description p { display:inline-block; width:477px; padding:10px 0; font-size:18px; color:#fff; text-align:center; line-height:24px; background-color: #525c65; border-radius:32px;}
.seed .guide .step1 .description img { display: block; margin: 0 auto;}

.seed .guide .step2 { margin-top: 20px;}
.seed .guide .step2 .clear { clear: both; overflow: hidden;}
.seed .guide .step2 .clear h4 { display:inline-block; width:190px; padding:7px 0 6px; font-size:18px; color:#fff; text-align:center; background-color: #2cb5a0; border-radius:16px;}
.seed .guide .step2 .clear ul { float: left; width:300px;}
.seed .guide .step2 .clear ul li { margin-top: 45px;}
.seed .guide .step2 .clear ul li:first-child { margin-top:0;}
.seed .guide .step2 .clear ul li p { padding:10px 14px; color: #6e6e6e;}
.seed .guide .step2 .clear .img { float: right; width:522px;}
.seed .guide .step2 .clear .img img { max-width: 100%; height: auto;}
.seed .guide .step2 .description { margin-top:4px; text-align: center;}
.seed .guide .step2 .description p { display:inline-block; width:477px; padding:10px 0; font-size:18px; color:#fff; text-align:center; line-height:24px; background-color: #176da2; border-radius:32px;}

.seed .guide .step3 { margin-top: 5px;}
.seed .guide .step3 p { padding-left: 20px; color: #6e6e6e;}
.seed .guide .step3 .clear { clear: both; overflow: hidden; margin-top: 25px;}
.seed .guide .step3 .clear img { max-width: 100%; height: auto;}
.seed .guide .step3 .clear .left { float: left; width:48%; border: 3px solid #d3d3d3;}
.seed .guide .step3 .clear .right { float: right; width:48%; border: 3px solid #d3d3d3;}

/* 초중수학 : 수엘학기인증 */
.seed .newc .mt { font-size: 16px; color: #2488a5; line-height: 24px;}
.seed .newc .ot { margin-top: 22px; line-height: 26px;}
.seed .newc .st { margin-top:8px; font-size: 17px;}
.seed .newc .clear .left { float:left; width:48%; text-align: center;}
.seed .newc .clear .right { float:right; width:48%; text-align: center;}
.seed .newc .clear img { width:100%; height:auto;}
.seed .newc .border { border:10px solid #eee;}
.seed .newc .ml { margin-top: 12px; font-size: 16px; color: #5658a5;}
.seed .newc .ml a { display: inline-block; margin-left: 5px; padding: 3px 9px; font-size: 12px; color: #fff; background-color: #00c4d6; border-radius:12px; transition:all .3s ease;}
.seed .newc .ml a:hover { background-color: #5658a5;}
.seed .newc .btns { margin-top: 55px; text-align: center;}
.seed .newc .btns a { display: inline-block; width: 368px; padding: 16px 0; font-size: 18px; font-weight: 700; color: #fff; text-align: center; background-color: #5658a5; transition:all .3s ease;}
.seed .newc .btns a:hover { background-color: #00c4d6;}


/* TICKL
**********************************************/

.tickl .area { position:relative; min-height:600px; padding: 20px 0 100px 230px;}
.tickl .intro .top img { max-width: 100%; height: auto;}
.tickl .intro .top p { margin-top:25px; font-size: 16px; line-height: 30px;}
.tickl .intro .desc { margin-top:65px; text-align: center;}
.tickl .intro .desc img { max-width: 100%; height: auto;}
.tickl .intro .app { margin-top:70px; padding:25px 0; text-align:center; background-color: #f4f4f4;}
.tickl .intro .app p { display: inline-block; margin:0 4px; font-size:15px; vertical-align: middle; line-height: 25px;}
.tickl .intro .app a { display: inline-block; margin:0 8px; vertical-align: middle;}
.tickl .intro .app .m_block { margin-left: 80px;}

.tickl .newc .mt { font-size: 16px; color: #2488a5; line-height: 24px;}
.tickl .newc .ot { margin-top: 22px; line-height: 26px;}
.tickl .newc .st { margin-top:8px; font-size: 17px;}
.tickl .newc .clear .left { float:left; width:48%; text-align: center;}
.tickl .newc .clear .right { float:right; width:48%; padding-top:46px; text-align: center;}
.tickl .newc .clear img { width:100%; height:auto;}
.tickl .newc .border { border:10px solid #eee;}
.tickl .newc .ml { margin-top: 12px; font-size: 16px; color: #5658a5;}
.tickl .newc .ml a { display: inline-block; margin-left: 5px; padding: 3px 9px; font-size: 12px; color: #fff; background-color: #00c4d6; border-radius:12px; transition:all .3s ease;}
.tickl .newc .ml a:hover { background-color: #5658a5;}
.tickl .newc .btns { margin-top: 55px; text-align: center;}
.tickl .newc .btns a { display: inline-block; width: 368px; padding: 16px 0; font-size: 18px; font-weight: 700; color: #fff; text-align: center; background-color: #5658a5; transition:all .3s ease;}
.tickl .newc .btns a:hover { background-color: #00c4d6;}


/* 맴버
**********************************************/

.member .area { padding: 50px 0;}
.member h2 { padding-bottom:0; font-size:34px; text-align:center; border-bottom:none;}
.member .st { margin-top: 14px; text-align: center;}

/* 회원가입 */
.member h3 { margin-top: 60px; font-size: 16px;}
.member h3.mt { margin-top: 40px;}
.member .sterm { overflow-y: scroll; overflow-x: hidden; height: 190px; margin-top: 15px; padding: 15px; font-size:13px; color:#777; line-height:20px; border:1px solid #d6d6d6;}
.member .select { margin-top: 20px; text-align: right;}
.member .select input { margin-left: 25px;}
.member .other { margin-top: 10px; border-top:2px solid #bebebf;}
.member .other th { padding: 19px 0; font-weight: 400; border-left: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; background-color: #f1f1f1;}
.member .other th:first-child { border-left: none;}
.member .other td { padding: 15px 25px; text-align: center; line-height: 24px; border-left: 1px solid #cecece; border-bottom: 1px solid #cecece;}
.member .other td:first-child { border-left: none;}

.member .btns { text-align: center;}
.member .btns .btn { width:155px; margin: 0 4px;}
.member .btns.w120 .btn { width:120px;}

.member .strong { font-size: 12px; color: #ff0000;}
.member .summ { margin: 17px 0 7px; font-size: 12px; color: #666;}
.member .com_title { margin-top: 70px; font-size: 20px; color: #333; text-align: center;}
.member .com_sub { margin-top: 15px; font-size: 15px; text-align: center;}
.member .com_guide { margin-top: 45px; font-size: 15px; text-align: center;}
.member .member_space { height: 20px;}

/* 이메일 인증  */
.member .box { margin-top:38px; padding-top:38px; text-align:center; border-top:1px solid #e3e3e3;}
.member .box .bt { font-size: 16px;}
.member .box .bs { margin-top:10px; font-size: 16px;}
.member .box .bs input { width:120px; margin:0 3px;}
.member .box .bs .btn { margin-left: 5px;}
.member .box .bs .color_red { color: #db3900;}
.member .box .bs.style { width:370px; margin:60px auto 0; font-size: 14px; text-align: left;}
.member .box .btns .btn { width:370px;}

/* 이메일 무단 수집 거부 */
.member .email { padding-top:40px; text-align: center;}
.member .email p { margin-top:34px; line-height: 30px;}
.member .email p span { color: #136da2; border-bottom:1px solid #136da2;}

/* 회원탈퇴 */
.member .wt { font-size: 16px; text-align: center;}
.member .wtit { margin-top: 30px; font-size: 16px;}
.member .check { margin-top:25px; text-align: center;}


/* 전형정보 (SEED에 포함됨)
**********************************************/

.school .area { position:relative; min-height:600px; padding: 20px 0 100px 230px;}


/* 성적분석 (SEED에 포함됨)
**********************************************/

.analysis .area { position:relative; min-height:600px; padding: 20px 0 100px 230px;}
.analysis h3 { font-size: 16px;}
.analysis h3.mt { margin-top: 30px;}
.analysis .btns { text-align: center;}
.analysis .btns .btn { width:120px; margin: 0 4px;}
.analysis .explan { padding:16px; line-height:21px; background-color: #f5f5f5;}
.analysis .explan p { padding-left:10px; font-size:13px; text-indent:-10px;}

/* 교과 성적분석 */
.analysis .helper { margin:25px 0 0; font-size: 13px;}
.analysis .chart { padding:10px 0; text-align: center;}
.analysis .chart img { max-width:100%; height: auto;}

/* 학생부종합전형 분석 */
.analysis .over { clear: both; overflow: hidden;}
.analysis .over .left { float: left; width:50%;}
.analysis .over .right { float: right; width:50%; text-align: center;}

/* 성적분석 통합 */
.analysis .als { font-size:13px; text-align: center;}
.analysis .als2 { font-size:12px; color: #666;}

.analysis .st3box { position:relative; padding:16px 0; border:1px solid #eee; background-color: #fefefe;}
.analysis .st3list { clear:left;}
.analysis .st3list::after { display:block; clear:both; visibility:hidden; height:0; content:'.';}
.analysis .st3list li { float: left; position:relative; width:32%;}
.analysis .st3list li.a { padding-left: 99px;}
.analysis .st3list li.a .t { margin-top:6px; font-weight:bold; color: #0072bc;}
.analysis .st3list li.a .poa { left:44px;}
.analysis .st3list li.a .poa p { margin-top:-3px; font-size:21px; font-weight:bold; text-align: center; color: #0072bc;}
.analysis .st3list li.b { width:36%; padding-left: 93px;}
.analysis .st3list li.b .t { margin-top:6px; font-weight:bold; color: #00a651;}
.analysis .st3list li.b .poa { left:40px;}
.analysis .st3list li.b .poa p { margin-top:-3px; font-size:21px; font-weight:bold; text-align: center; color: #00a651;}
.analysis .st3list li.c { padding-left: 57px;}
.analysis .st3list li.c .t { margin-top:6px; font-weight:bold; color: #f26522;}
.analysis .st3list li.c .poa { left:3px;}
.analysis .st3list li.c .poa p { margin-top:-3px; font-size:21px; font-weight:bold; text-align: center; color: #f26522;}
.analysis .st3list li .poa { position: absolute; top:1px;}
.analysis .st3list li.b .poa .icon { background-position: -50px 0;}
.analysis .st3list li.c .poa .icon { background-position: -100px 0;}
.analysis .st3list li .b { margin-top:6px; font-size: 12px; color: #666; line-height: 15px;}
.analysis .st3box .line_left { position: absolute; left:288px; top:18px;}
.analysis .st3box .line_right { position: absolute; right:304px; top:18px;}
.analysis .st3box.style li { padding-left:85px; background: url(../../images/front/analysis_ico5.png) no-repeat left center;}
.analysis .st3box.style li:first-child { background:none;}
.analysis .st3box.style li.a { width:32%;}
.analysis .st3box.style li.b { width:32%;}
.analysis .st3box.style li.c { width:36%;}
.analysis .st3box.style li .poa { left:35px;}
.analysis .st3box.style .line_left,
.analysis .st3box.style .line_right { display: none;}

.analysis .bline { border:1px solid #bbb;}
.analysis .over .st_liet { float: left; width:49%;}
.analysis .over .st_right { float: right; width:49%;}

.analysis .twice .bp { display:inline-block; width:100px; height:30px; color:#136da2; vertical-align:middle; border:2px solid #136da2; border-radius:4px;}
.analysis .twice .bo { display:inline-block; width:100px; height:30px; margin-left:7px; padding-top:8px; color:#fff; text-align:center; vertical-align:middle; background-color: #136da2; border-radius:4px;}
.analysis .twice.big .bp { width:160px; height:40px; font-size: 15px;}
.analysis .twice.big .bo { width:160px; height:40px; padding-top:13px; font-size: 15px;}


/* 마이페이지
**********************************************/

.mypage .area { position:relative; min-height:600px; padding: 0 0 100px 230px;}
.mypage h3 { font-size: 16px;}
.mypage h3.mt { margin-top: 30px;}
.mypage h3.fs20 { font-size: 20px;}
.mypage .btns { margin-top: 40px; text-align: center;}
.mypage .btns .btn { width:160px; margin: 0 4px;}
.mypage .btns.w190 .btn { width:190px;}
.mypage .btns.mt20 { margin-top: 20px;}
.mypage .helper { margin: 25px 0 10px; color:#bc0000;}
.mypage .helper_style { margin: 25px 0 10px; font-size: 13px;}

/* 수시합격 예측 서비스 */
.mypage .rating { position:relative;}
.mypage .rating a { display:block;}
.mypage .rating img { max-width: 100%; height: auto;}
.mypage .rating .clear .left { float: left; width: 50%;}
.mypage .rating .clear .right { float: right; width: 50%;}
.mypage .rating .aside { position: fixed; left:50%; top:300px; margin-left: 484px;}
.mypage .rating .aside .close { position: absolute; right:28px; bottom:3px;}
.mypage .rating .aside img { max-width: inherit;}

/* 교과 */
.mypage .por { position: relative;}

/* 비교과 */
.mypage .guide li { position:relative; margin-top: 20px; padding:14px 15px 14px 58px; border:2px solid #6bb0e0; border-radius:6px;}
.mypage .guide li span { position: absolute; left: 9px; top:13px; font-size: 48px; font-weight: 300; color: #6bb0e0;}
.mypage .guide li .title { font-size: 16px; font-weight: bold;}
.mypage .guide li .sub { margin-top: 1px; line-height:24px;}
.mypage .guide li.etc { padding-top: 16px;}
.mypage .guide li.etc span { top:7px;}
.mypage .guide li:nth-child(odd) { border:none; background-color: #d5e5f0;}
.mypage .guide li:nth-child(odd) span { color:#fff;}
.mypage .guide li:first-child span { left: 14px;}
.mypage .fs13 { font-size:13px; line-height: 20px;}
.mypage .fs13.black { color:#111;}
.mypage .number { font-size:13px; text-align: right;}
.mypage .box { margin-top:2px; border:2px solid #c0c9d1;}
.mypage .box .head { padding:25px 28px 27px; line-height:26px; background-color: #f4f4f4;}
.mypage .box .head h4 { font-size:16px;}
.mypage .box .head .choice { margin-top:9px; padding:0 19px 0 16px;}
.mypage .box .head .choice li { margin-top:3px; padding-left:53px; font-size:14px; text-indent:-53px; line-height: 23px;}
.mypage .box .head .choice li b { color: #279e8c;}
.mypage .box .list { margin:11px 0 8px; padding: 0 100px;}
.mypage .box .list li { clear:both; overflow:hidden; position:relative; padding:6px 44px 8px 50px; font-size:16px; color:#333232; border-top:1px solid #e3e3e3;}
.mypage .box .list li::after { position: absolute; left:27px; top:50%; content:''; width:11px; height: 11px; margin-top:-6px; background-color: #136da2; border-radius:50%;}
.mypage .box .list li:first-child { border-top:none;}
.mypage .box .list li input[type=checkbox] {display: none;}
.mypage .box .list li input[type=checkbox] +label { display: block; float:right; width:40px; height: 35px; background:url(../../images/front/ico_checkbox.png) no-repeat; cursor: pointer;}
.mypage .box .list li input[type=checkbox]:checked + label { font-weight:bold; color:#136da2; background-position: 0 -65px;}
.mypage .box .list li input[type=checkbox] +label span { display: block; position: absolute; left:50px; top:50%; transform:translate(0, -50%);}
.mypage .box .list li input[type=radio] {display: none;}
.mypage .box .list li input[type=radio] +label { display: block; float:right; width:40px; height: 35px; background:url(../../images/front/ico_radio.png) no-repeat; cursor: pointer;}
.mypage .box .list li input[type=radio]:checked + label { font-weight:bold; color:#136da2; background-position: 0 -65px;}
.mypage .box .list li input[type=radio] +label span { display: block; position: absolute; left:50px; top:50%; padding-right:100px; transform:translate(0, -50%);}


.mypage .explan { margin-top:20px; padding-bottom:20px; border-bottom:1px solid #e3e3e3;}
.mypage .explan .title { font-size: 16px;}
.mypage .explan .sub { margin-top:2px; font-size: 13px;} 

/* 모의고사/수능 */
.mypage .subtitle { clear:both; overflow:hidden; margin:35px 0 5px;}
.mypage .subtitle .fs18 { float: left;}
.mypage .subtitle .st { float:right; font-size: 13px; color: #bc0000;}

/* 수시모의 지원 추가 */
.mypage .fs16_lh24 { font-size: 16px; line-height: 24px;}
.mypage .sbox { width:100%; padding:41px 28px 35px; text-align:center; border:2px solid #e1e1e1;}
.mypage .sbox ul li { float: left; position: relative;}
.mypage .sbox ul li.li { display:table; width:20%; background-color: #f1f1f1; border-radius:10px;}
.mypage .sbox ul li.li p { display:table-cell; height:82px; font-size:16px; font-weight:bold; vertical-align:middle;}
.mypage .sbox ul li.li p .blue { color:#3484b4;}
.mypage .sbox ul li.li p .small { display:inline-block; width:75px; font-size: 12px; line-height: 15px;}
.mypage .sbox ul li.li.tal { padding-left:18px;}
.mypage .sbox ul li.arrow { width:6.6666%; padding-top: 27px;}
.mypage .sbox ul li.arrow i { display: block; width:21px; height: 27px; margin: 0 auto; background: url(../../images/front/rating_arrow.png) no-repeat;}
.mypage .sbox ul li .ce { position: absolute; left:50%; top:-16px; width:74px; margin-left:-37px; padding:7px 0; color:#fff; text-align:center; background-color: #65a250; border-radius:14px;}
.mypage .sbox ul li .etc { position: absolute; right:0; top:0;}
.mypage .seo a { width: 140px;}
.mypage .sam a { width: 250px;}

.mypage .nstip::after { display:block; clear:both; visibility:hidden; height:0; content:'.';}
.mypage .nstip li { float: left; position: relative;}
.mypage .nstip li.li { width:240px; padding-left: 23px;}
.mypage .nstip li.arrow { width:75px; padding-top: 10px;}
.mypage .nstip li.arrow i { display: block; width:21px; height: 27px; margin: 0px 11px; background: url(../../images/front/rating_arrow.png) no-repeat;}
/* .mypage .nstip li p { padding:11px 0 11px 63px; font-size:16px; background-color: #f1f1f1; border-radius:9px;} */
.mypage .nstip li p { padding:11px 0 11px 37px; font-size:16px; background-color: #f1f1f1; border-radius:9px;}
.mypage .nstip li .st { position:absolute; left:28px; top:10px; display:inline-block; width:73px; padding:6px 0; color:#fff; text-align:center; background-color: #8f969c; border-radius:13px;}
/* .mypage .nstip li.active p { padding:9px 0 9px 63px; border:2px solid #65a250; box-shadow:3px 3px 3px #ddd;} */
.mypage .nstip li.active p { padding:9px 0 9px 37px; border:2px solid #65a250; box-shadow:3px 3px 3px #ddd;}
.mypage .nstip li.active p span { color: #136da2;}
.mypage .nstip li.active .st { background-color: #65a250;}

.g_guide { border-top:1px solid #e3e3e3;}
.g_guide .t { font-size: 16px; color: #136da2;}
.g_guide .t span { display:inline-block; margin-top:-1px; padding-top:7px; border-top:1px solid #5a5a5a;}
.g_guide .s { margin-top:2px; font-size: 12px; line-height: 18px;}


/* ETC
**********************************************/

.etc .area  { padding: 50px 0;}
.etc h2 { padding-bottom:0; font-size:34px; text-align:center; border-bottom:none;}
.etc h3 { margin-top:40px; font-size: 15px;}
.etc h4 { margin-top: 40px;  font-size: 15px;}
.etc h4 +p { margin-top: 10px;}
.etc .st { margin-top: 14px; text-align: center;}
.etc .contents { margin-top: 36px; border-top:1px solid #e3e3e3;}


/* 이용약관 */
.etc .contents .hsub { margin-top: 15px;}
.etc .contents >ol >li { margin-top: 25px; padding-left: 25px; color: #777;}
.etc .contents >ol >li .ms { margin-top: 10px;}
.etc .contents >ol >li >ol { margin-top: 10px;}
.etc .contents >ol >li >ol >li { margin-top: 5px; padding-left:18px; text-indent:-18px;}
.etc .contents >ol >li >ol >li ul li,
.etc .contents >ol >li >ol >li ol li { margin-top: 10px; padding-left:18px; text-indent:-18px;}



@media all and (max-width:767px){
  /* 공통 */
  .area {
    width: 100%;
  }
  .payment .area {
    padding: 20px 10px;
  }
  .mypage .area {
    padding: 20px 10px;
  }
  .lnb {
    display: none;
  }
}