@charset "utf-8";
/* CSS Document */
/* new_com2zoa design : kdy 230823 수정 */

/* Common */
#wrap {font-size: 1.154em}
.clear_fix:after {content: ""; display: block; clear: both}
.hide{display: none}
.hidden{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}

/* Layout */
#subpage .basics_font{ font-weight: 500; color:#000; margin-top: 30px /*기준폰트 15px*/}
/*글이 많은페이지의 경우 모바일에서 해당 페이지 고유클래스 하위에 기준폰트 1.077em(14px)으로 변경-예)규정규칙 페이지*/
#sub_left {display: none}
#subpage {font-weight:500; color:#000; min-height: 600px; line-height: 150%}

/*Subtop */
#subtop {margin-top: -145px}
#subtop h3{font-weight:600; text-align: center; color:#fff}

/*비주얼 화살표*/
.visual_wrap .slick-prev.slick-arrow,.visual_wrap .slick-next.slick-arrow{display: none!important}

/* Guide */
#sub_guide{z-index:500}
#sub_guide .btn_home {display: none}
#sub_guide .submn {display: none}
#sub_guide .guide_wrap {position: relative}

/* Leftmn */
.leftmn{background:#1b69b1;height: 56px; margin-top:-14px}
.leftmn>ul{display: flex; justify-content: center; align-items: center; height: 100%}
.leftmn>ul li{position:relative}
.leftmn>ul li::after{content:''; display:inline-block; width: 1px; height: 29px; position: absolute; top:50%; transform: translateY(-50%); right:0; background:rgba(255,255,255,0.5)}
.leftmn>ul li:last-child::after{display: none}
.leftmn>ul li a{display: inline-block; min-width: 120px; padding:0 15px; text-align: center; color:#fff; font-size: 1.200em; font-weight: 400; height: 56px; line-height: 56px; box-sizing: border-box}
.leftmn ul li.on a, .leftmn ul li a:hover{color:#2cfff3; background:url(../images/sub/sub_tap_on.png) no-repeat center bottom; font-weight: 700}

/*quick_menu*/
#quick{position: absolute;top:249px; right:17px; z-index: 2}
#quick .slick-list{height:auto!important}
#quick  .slick-vertical .slick-slide{border:none}
.quick01 span.col_bl{color:#0b71da}
.quick01 span.col_red{color:#f74b22}
.quick01 span.col_or{color:#f58b00}
.quick01 .q1_v2.pc_none{display: none}
.quick01_wrap{background:#fff; width: 107px; position:relative}
.quick01_wrap .quick_item{display: flex; flex-direction: column;align-items: center; min-height: 113px; box-sizing: border-box}
.quick01_wrap .quick_item>a{display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 600; color:#252626; width: 100%; height: 100%;padding:17px 0; transition: 0.3s;border:1px solid #dadada; box-sizing: border-box}
.quick01_wrap .quick_item:first-child a{border-top:0; border-bottom: 0}
.quick01_wrap .quick_item:last-child a{border-bottom:0}
.quick01_wrap .quick_item>a::before{content:''; display: inline-block; background:url(../images/sub/sb_quick_icon01.png) no-repeat center center; width: 43px; height: 37px; margin-bottom: 13px }
.quick01_wrap .quick_item:nth-of-type(2)>a::before{background:url(../images/sub/sb_quick_icon02.png) no-repeat center center; width: 41px;height: 40px}
.quick01_wrap .quick_item:nth-of-type(3)>a::before{background:url(../images/sub/sb_quick_icon03.png) no-repeat center center; width: 38px; height: 41px}
.quick01_wrap .quick_item>a:hover{background: #9ec542; border-color:#9ec542}
.quick01_wrap .quick_item:last-child>a:hover{background: #ff9812; border-color:#ff9812}
.quick01_wrap .quick_item>a:hover::before{background:url(../images/sub/sb_quick_icon01_a.png) no-repeat center center; color:#fff}
.quick01_wrap .quick_item:nth-of-type(2)>a:hover::before{background:url(../images/sub/sb_quick_icon02_a.png) no-repeat center center; color:#fff}
.quick01_wrap .quick_item:nth-of-type(3)>a:hover::before{background:url(../images/sub/sb_quick_icon03_a.png) no-repeat center center; color:#fff}
.quick01_wrap .quick_item>a:hover span{color:#fff}
.quick01_wrap .quick_item>a span.qmn_name{text-align: center}
.quick01_wrap .btn_top a{background:#1e1e1e; border-radius: 50%; width: 55px; height: 55px; text-align: center; display: inline-block; color:#fff; font-weight: 600; position:absolute; left:50%; transform:translateX(-50%);z-index: -1; box-sizing: border-box; padding-top: 30px; bottom:-33px}
.quick_tit{display: none}

/******************************서브컨텐츠 영역**************************************/
/* -------------------컨텐츠 공통------------------- */
/****페이지 준비중****/
.sub_loding{min-height: 450px; background: url(../images/sub/page_loding.gif) no-repeat center center}
/****Blind****/
.blind {font-size:0; overflow:hidden; text-indent:-9999999px; height:0; width:0; line-height:0} 

/****LI,P 텍스트스타일,블릿****/

/****TIT****/
h4.sub_tit4::before{content:''; display:block; background:url(../images/sub/top_simbol.png) no-repeat; width: 200px; height: 27px; margin:0 auto; padding-bottom: 29px; margin-top: 82px}
h4.sub_tit4 {text-align: center; font-size: 2.000em;margin-bottom: 47px}
h4.sub_tit4 br{display: none}
.sub_tit_txt{text-align: center; font-size: 1.200em; font-weight: 500; line-height: 150%; margin-bottom:48px}

/****Table****/
.com2_table {width:100%; margin-bottom:25px; border-collapse:collapse; table-layout:auto; background:#f1f1f1; border-radius: 10px 10px 0 0}
.com2_table table{width: 100%}
.com2_table .txtleft {text-align: left}
/*모바일 아래에서 표 내용이 너무많을때 사이즈 고정후 스크롤 하기 테이블 감싸고 있는 div한테 table_scroll 클래스 주면됨*/	
.com2_table.table_scroll{overflow-x: auto; position: relative}
.com2_table.table_scroll > table {min-width:710px}
/*table_scroll 필요없을때*/
.com2_table.tb_border{overflow: hidden}
/*표_색상:회색(기본)*/
.com2_table thead th { line-height:150%; padding:8px;  border:1px solid #fff; border-top:1px solid #cacaca;  vertical-align:middle;text-align:center; font-weight:500; font-size: 1.077em; color:#fff}
.com2_table thead th:first-child {border-left:1px solid #cacaca}
.com2_table thead th:last-child {border-right:1px solid #cacaca}
.com2_table tbody th {line-height:150%; background:#f7f7f7; padding:8px; border:1px solid #cacaca;  text-align:center; font-weight:500; vertical-align:middle; color:#30302e}
.com2_table tbody td {line-height:150%; background:#fff; padding:8px; border:1px solid #cacaca;text-align:center; vertical-align:middle; color:#4d4d4d} 
/*표_색상:파랑*/
.com2_table .table_st01 {background:#53a1e3}

/* -------------------공통스타일시작 -------------------*/
/*col class 선언영역*/
.wdtfix{width:40px}
.wdt5{width: 5%}
.wdt6{width: 6%}
.wdt8{width: 8%}
.wdt9{width: 9%}
.wdt10{width: 10%}
.wdt15{width: 15%}
.wdt20{width: 20%}
.wdt25{width: 25%}
.wdt30{width: 30%}
.wdt33{width: 33.3%}
.wdt40{width: 40%}
.wdt50{width: 50%}
.wdt60{width: 60%}
.wdt70{width: 70%}
.wdt75{width: 75%}
.wdt80{width: 80%}
.wdt90{width: 90%}
.wdtauto{width: auto}

/*공통 타이틀 텍스트*/
.cont_intro{padding-top: 30px; text-align: center; font-size:1.071em; font-weight: 500}
.cont_intro .intro_txt{line-height: 150%; margin-bottom: 19px; font-size: 1.200em; word-break:keep-all}

/*공통 기능 탭*/
.cont_tab .history_box{position:relative}
.cont_tab .his_year .his_btn{position:absolute;width: calc(100% / 3 - 1px); top:0}
.cont_tab .his_year .his_btn a{display: block; width: 100%; background:#c5c5c5; color:#fff; text-align: center; padding:19px 0; transition: .2s; font-size: 1.333em}
.cont_tab .his_year.on .his_btn a{background:#279cee; width: 100%; position: relative}
.cont_tab .his_year.on .his_btn a::after{content:''; display: inline-block; background:url(../images/sub/tab_on_arrow.png) no-repeat center bottom 8px #279cee; width: 38px; height: 38px; border-radius: 50%; position: absolute; left:50%; transform: translateX(-50%); bottom:-18px; transition: 0s}
.cont_tab .his_year .his_btn a:hover{background:#279cee}
.cont_tab .his_year .his_btn a:hover::after{content:''; display: inline-block; background:url(../images/sub/tab_on_arrow.png) no-repeat center bottom 8px #279cee; width: 38px; height: 38px; border-radius: 50%; position: absolute; left:50%; transform: translateX(-50%); bottom:-18px; z-index:-2}
.cont_tab .his_year01 .his_btn{left:0}
.cont_tab .his_year02 .his_btn{left:401px}
.cont_tab .his_year03 .his_btn{right:0}
.cont_tab .his_year.on .his_txtbox{display: block}
.cont_tab .his_txtbox{display: none; padding-top: 82px}
.cont_tab .his_txtbox.no_tab{padding-top: 0}
.cont_tab .his_txtbox .tab_lst{display: flex; flex-wrap: wrap; border:1px solid #c5c5c5; box-sizing: border-box; border-bottom: 0}
.cont_tab .his_txtbox .tab_lst li{width: calc(100% / 3); height:113px; box-sizing: border-box; border-right:1px dashed #c5c5c5; border-bottom:1px solid #c5c5c5; padding:20px; position: relative}
.cont_tab .his_txtbox .tab_lst li:nth-of-type(3n){border-right:0}
.cont_tab .his_txtbox .tab_lst li .lst_tit{font-size: 1.200em; font-weight: 600; margin-bottom: 10px; box-sizing: border-box}
.cont_tab .his_txtbox .tab_lst li .lst_txt{font-size: 1.067em; font-weight: 500; color:#7c7c7c}

/*공통 기능리스트*/
.fun_list li{position: relative; margin-bottom: 54px; display: flex; justify-content: flex-end}
.fun_list li .fun_txt_box{background:#1b69b1; width: 555px; min-height: 226px; height: auto; box-sizing: border-box; position:relative; padding:52px 47px 38px; position:absolute; left:0; z-index: -1}
.fun_list li .fun_num{background:#002f5b; width: 60px; height: 60px; border-radius: 30px 30px 0 30px; font-size: 1.600em; color:#fff; font-weight: 700; text-align: center; line-height: 60px; position:absolute; left:27px; top:-30px}
.fun_list li .fun_txt_box .fun_tit{font-size:1.733em; color:#fff; font-weight: 700; line-height: 130%; margin-bottom: 16px}
.fun_list li .fun_txt_box .fun_txt{font-size:1.133em; color:rgba(255,255,255,0.5); font-weight: 500; line-height: 130%}
.fun_list li .fun_img_box{width: 772px; min-height:230px; height: auto; box-sizing: border-box; border:1px solid #c5c5c5; display: flex; justify-content: center; align-items: center; border-radius: 100px 0 0 0; background:#fff; padding:30px 0; margin-top:40px}
.fun_list li:nth-of-type(2n){justify-content: flex-start}
.fun_list li:nth-of-type(2n) .fun_txt_box{background:#002f5b; left:auto; right:0}
.fun_list li:nth-of-type(2n) .fun_img_box{border-radius: 0 100px 0 0}
.fun_list li:nth-of-type(2n) .fun_num{background:#279cee; left:auto; right:27px}
.fun_list li:nth-of-type(2n) .fun_txt_box .fun_tit,.fun_list li:nth-of-type(2n) .fun_txt_box .fun_txt{text-align: right}

/*공통 가격안내박스*/
.cont_box .price_bx{position: static; background:#14aee1; margin-top: 80px}
.cont_box .price_bx .price_lst{height: 257px}
.cont_box .price_bx .price_big_txt{margin:33px 0 33px; font-size: 3.000em}
.cont_box .price_bx .price_sm_txt{font-size: 1.333em; font-weight: 300}

/*공통 서비스신청 박스*/
.contact_bx.conline{padding:76px 0 63px; margin:0 0 40px; background:url(../images/sub/sub_coline01_bg.gif) no-repeat; min-height:352px }
.contact_bx .colline_txtbx{display: flex; flex-direction: column; align-items: center; padding:0; padding-bottom: 58px}
.contact_bx .col_txt{text-align: center; margin-bottom: 34px; font-size: 2.000em}
.contact_bx .ser_tel{font-size: 2.714em;font-weight: 700; color:#ffa735; display: flex; align-items: center}
.contact_bx .ser_tel span{background:#fff; color:#282828; padding:8px 28px; border-radius: 50px;  font-size:0.400em; margin-right: 18px}
.contact_bx .ser_btn_box{display: flex;justify-content: center}
.contact_bx .ser_btn_box p:first-child{margin-right: 13px}
.contact_bx .ser_btn_box p a{position: relative; bottom:auto; right:auto; color:#000000}
.contact_bx .ser_btn_box p a span.col_br,.contact_bx .ser_btn_box p a span.col_rd{display: inline;padding-left: 0; background: none}
.contact_bx .col_ser_btn a:hover{background: center #fff; color:#fff; z-index: 1}
.contact_bx .col_ser_btn a:hover .col_br,.contact_bx .col_ser_btn a:hover .col_rd{color: #fff}
.contact_bx .col_ser_btn:first-child a:hover::after{background-color:#0b71da}
.contact_bx .col_ser_btn:last-child a:hover::after{background-color:#f74b22}

/*느낌표 기울기*/
span.italic{font-style: italic}

/* -------------------공통스타일 끝 -------------------*/

/* -------------------컨텐츠 스타일 시작 -------------------*/

/***********교외체험학습*************/
.trip_box .cont_intro{background:url(../images/sub/cont_bg01.gif) no-repeat bottom center}

/*관리자 기능(기본 스타일)*/
.cont_tab .his_txtbox .tab_lst li::after{content:''; display: inline-block; background:url(../images/sub/cont_icon0101.png) no-repeat center center #a4d9fe; width: 49px; height: 49px; border-radius: 50%; position: absolute; top:31px; right:19px}
.cont_tab .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background:url(../images/sub/cont_icon0102.png) no-repeat left 11px top 11px #5cb7f7}
.cont_tab .his_txtbox .tab_lst li:nth-of-type(3n)::after{background:url(../images/sub/cont_icon0103.png) no-repeat center center #6ea2f8}

/*선생님 기능*/
.cont_tab .his_year02.on .his_btn a{background:#9ec542}
.cont_tab .his_year02.on .his_btn a::after{background-color:#9ec542}
.cont_tab .his_year02 .his_btn a:hover{background:#9ec542}
.cont_tab .his_year02 .his_btn a:hover::after{background-color:#9ec542}
.cont_tab .his_year02 .his_txtbox .tab_lst li::after{background-color:#beda7d}
.cont_tab .his_year02 .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background-color:#83cb6d}
.cont_tab .his_year02 .his_txtbox .tab_lst li:nth-of-type(3n)::after{background-color:#5ac2a1}

/*학생 기능*/
.cont_tab .his_year03.on .his_btn a{background:#fe9744}
.cont_tab .his_year03.on .his_btn a::after{background-color:#fe9744}
.cont_tab .his_year03 .his_btn a:hover{background:#fe9744}
.cont_tab .his_year03 .his_btn a:hover::after{background-color:#fe9744}
.cont_tab .his_year03 .his_txtbox .tab_lst li::after{background-color:#ffc470}
.cont_tab .his_year03 .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background-color:#ff986f}
.cont_tab .his_year03 .his_txtbox .tab_lst li:nth-of-type(3n)::after{background-color:#ff7e64}


/***********결석계*************/
.absence_box .cont_intro{background:url(../images/sub/cont_bg02.gif) no-repeat bottom center}

/*기능리스트*/
.absence_box .cont_tab .his_txtbox .tab_lst li::after{background-image: url(../images/sub/cont_icon0201.png)}
.absence_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background-image: url(../images/sub/cont_icon0202.png); background-position: left 14px center}
.absence_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n)::after{background-image: url(../images/sub/cont_icon0203.png)}

/***********가정통신문*************/
.absence_box .cont_intro{background:url(../images/sub/cont_bg03.gif) no-repeat bottom center}

/*기능리스트*/
.absence_box .cont_tab .his_txtbox .tab_lst li::after{background-image: url(../images/sub/cont_icon0301.png)}
.absence_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background-image: url(../images/sub/cont_icon0302.png); background-position: center center}
.absence_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n)::after{background-image: url(../images/sub/cont_icon0303.png)}

/***********방과후학교*************/
.after_box .cont_intro{background:url(../images/sub/cont_bg04.gif) no-repeat bottom center}
.after_box .cont_intro::after{background: url(../images/sub/cont_bg04.gif) no-repeat top center}

/*기능리스트*/
.after_box .cont_tab .his_year .his_btn{width: calc(100% / 2 - 1px)}
.after_box  .cont_tab .his_year02 .his_btn{left:auto; right:0}
.after_box .cont_tab .his_txtbox .tab_lst li::after{background-image: url(../images/sub/cont_icon0401.png)}
.after_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background-image: url(../images/sub/cont_icon0402.png); background-position: center center}
.after_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n)::after{background-image: url(../images/sub/cont_icon0403.png)}

/***********온라인전자투표*************/
.vote_box .cont_intro{background:url(../images/sub/cont_bg05.gif) no-repeat bottom center}
.vote_box .cont_intro::after{background: url(../images/sub/cont_bg05.gif) no-repeat top center}

/*기능리스트*/
.vote_box .cont_tab .his_txtbox .tab_lst li::after{background-image: url(../images/sub/cont_icon0501.png)}
.vote_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background-image: url(../images/sub/cont_icon0502.png); background-position: center center}
.vote_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n)::after{background-image: url(../images/sub/cont_icon0503.png)}

/***********우유급식*************/
.milk_box .cont_intro{background:url(../images/sub/cont_bg06.gif) no-repeat bottom center}
.milk_box .cont_intro::after{background: url(../images/sub/cont_bg06.gif) no-repeat bottom center}

/*기능리스트*/
.milk_box .cont_tab .his_txtbox .tab_lst li::after{background-image: url(../images/sub/cont_icon0601.png)}
.milk_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background-image: url(../images/sub/cont_icon0602.png); background-position: center center}
.milk_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n)::after{background-image: url(../images/sub/cont_icon0603.png)}

/***********온라인 설문조사*************/
.survey_box .cont_intro{background:url(../images/sub/cont_bg07.gif) no-repeat bottom center}
.survey_box .cont_intro::after{background: url(../images/sub/cont_bg07.gif) no-repeat center center}

/*기능리스트*/
.survey_box .cont_tab .his_txtbox .tab_lst li::after{background-image: url(../images/sub/cont_icon0701.png)}
.survey_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n-1)::after{background-image: url(../images/sub/cont_icon0701.png); background-position: center center}
.survey_box .cont_tab .his_txtbox .tab_lst li:nth-of-type(3n)::after{background-image: url(../images/sub/cont_icon0703.png)}

/*기능 안내 이미지 리스트*/
.survey_box .fun_list li:first-child .fun_img_box{overflow: hidden; padding:0; min-height: 390px}
.survey_box .fun_list li:first-child .fun_img_box a{display: block; background:url(../images/sub/survey_img01.gif) no-repeat top right; width: 100%; height: 100%}

/* MOBILE LAYOUT */
@media only screen and (max-width:1024px) {
#sub_left, #subtop, .basics_font {font-size:0.933em/*기준폰트 14px*/}
#subpage .basics_font{margin-top: 15px}
	
/* Visual*/
.subvisual .visual_wrap {position: relative; height: 162px; margin: 0 auto}
.visual .visual_item .img_box{position: relative; max-width: 1023px; height: 250px; margin: 0 auto}
.visual .visual_item .v_img{max-width: 1023px; height: 250px; margin: 84px auto 0; border-radius: 15px; box-shadow:2px 3px 5px rgba(0, 0, 0, 0.1)}
    
/* Layout */
#subright{position: relative; border-radius:10px 10px 0 0}
#subright.nomargin {margin-top:0 !important}
#subtop{width:100%; height:auto; border-radius: 10px 10px 0 0}
#subtop h3{position: relative; height: auto; padding:80px 0 39px; color:#000; font-size:1.867em}
#subpage {margin:10px 0 40px}

#footwrap .add .address {padding-bottom:0}

 /****TIT****/
h4.sub_tit4 {font-size: 1.429em}
h4.sub_tit4::before{margin-top: 41px}
.sub_tit_txt{padding:0 30px; margin-top: -20px; word-break: keep-all; font-size:1.143em}
 
/* leftmn */
.leftmn{font-size: 13px; margin:0 auto; width: 98%;  height: 40px}/* tab 기준폰트 13px*/
.leftmn>ul li{display: flex; align-items: center; justify-content: center; width: calc(100% / 3)}
.leftmn>ul li a{display: flex; align-items: center; justify-content: center; font-size:1.154em; padding:0; width: 100%; min-width:inherit; text-align: center; height: 40px}
.leftmn ul li.on a, .leftmn ul li a:hover{background-size:14px}
.leftmn>ul li a span {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    
/*quick_menu*/
#quick{position: fixed; top:auto!important; right:0; bottom:0; width: 100%}
#quick  .slick-slider .slick-track, .slick-slider .slick-list{width: auto!important}
.quick01 .quick_list{margin-left: 0; height: auto; display:flex}
.quick01_wrap{width: 100%; min-width: 320px}
.quick01_wrap .quick_item{display: flex; width: calc(100% / 3)!important; padding:0; position: relative; min-height: auto; height: 100%}
.quick01_wrap .quick_item>a{display: block; text-align:right; padding-top: 12px; padding-right: 16px; height: 54px; width: 100%; box-sizing: border-box; border:none}
.quick01_wrap .quick_item a{border-right:1px solid #cdcdcd}
.quick01_wrap .quick_item:last-child a{border-right:0}
.quick01_wrap .quick_item>a img{margin-top: 7px; margin-bottom: 0; width: 28px}
.quick01_wrap .quick_item>a::before{position:absolute; top:8px; left:6px; transform:scale(0.6)}
.quick01_wrap .btn_top a{top:-57px; z-index: 2; left: auto; transform: none; right:10px; width: 50px; height: 50px; font-size: 1em; background:#000;line-height: normal; padding-top: 12px; box-sizing: border-box}
.quick_tit{position:absolute; top:-27px; left:0; color:#fff; background:#000; width: 100%; padding:7px 0; font-size: 0.867em; font-weight: 600; display: block}
.quick_tit span{color:#787878; margin-left: 10px}
.quick01 .q1_v2.pc_none{display: block}
 
/* Footer */
#footwrap{margin-top:0; padding:0 10px 80px}
#footwrap .foot_area{padding: 0}

/******************************서브컨텐츠 영역**************************************/
#subtop h3{color:#fff}
    
/****페이지 준비중****/
.sub_loding{background: url(../images/sub/page_loding_m.gif) no-repeat center center}

/* -------------------컨텐츠 스타일 시작 -------------------*/
/*페이지 공통*/
.cont_box .cont_intro{background:none; position: relative}
.cont_intro::after{content:''; display: inline-block; background:url(../images/sub/cont_bg01.gif) no-repeat center center; width: 100%; height: 125px; position: absolute; bottom:0; left:50%; transform: translateX(-50%); z-index: -1}
.cont_intro .intro_img img{width: 600px}
.cont_intro .intro_txt{padding:0 10px; word-break: keep-all; font-size: 1.067em}
.cont_tab{margin:0 10px}
.cont_tab .his_year .his_btn{width: 33.2%}
.cont_tab .his_year02 .his_btn{left:33.4%}
.cont_tab .his_year03 .his_btn{right: 0}
.cont_tab .his_year.on .his_txtbox{margin-bottom: 41px}
.cont_tab .his_txtbox{padding-top: 60px}
.cont_tab .his_txtbox .tab_lst li{height: auto; min-height: 85px; padding:10px 20px}
.cont_tab .his_txtbox .tab_lst li::after{top:17px;right:10px; transform: scale(00.8)}
.cont_tab .his_txtbox .tab_lst li .lst_tit{margin-bottom: 2px; font-size: 1.143em}
.cont_tab .his_txtbox .tab_lst li .lst_txt{padding-right: 70px; line-height: 140%; font-size: 1em; word-break:keep-all}
.cont_tab .his_txtbox .tab_lst li .lst_txt br{display: none}
.cont_tab .his_year .his_btn a{font-size: 1.143em; padding:9px 0}
.cont_tab .his_year.on .his_btn a::after,.cont_tab .his_year .his_btn a:hover::after{width: 26px; height: 26px; bottom:-15px; background-size: 9px; background-position:center bottom 6px; z-index: -2}
.function_box{margin:0 10px}
.fun_list li{margin-bottom: 25px}
.fun_list li .fun_txt_box{width: 98%; padding:40px 21px 38px}
.fun_list li:nth-of-type(2n){justify-content: flex-end}
.fun_list li:nth-of-type(2n) .fun_num{right:auto;}
.fun_list li:nth-of-type(2n) .fun_txt_box .fun_tit, .fun_list li:nth-of-type(2n) .fun_txt_box .fun_txt{text-align: left} 
.fun_list li:nth-of-type(2n) .fun_txt_box{right:auto; left:0}
.fun_list li:nth-of-type(2n) .fun_img_box{border-radius: 0 30px 0 0}
.fun_list li .fun_num{width: 36px; height: 36px; line-height: 36px; font-size: 1.071em; left:16px; top:-16px}
.fun_list li .fun_txt_box .fun_tit{font-size:1.286em}
.fun_list li .fun_txt_box .fun_txt{font-size:1em; word-break: keep-all}
.fun_list li .fun_img_box{width: 98%; overflow: hidden; margin-top: 180px; min-height: auto; border-radius: 30px 0 0 0}
.fun_list li .fun_img_box img{width: 500px}
.cont_box .price_bx{display: block}
.cont_box .price_bx .price_big_txt{font-size: 1.857em}
.contact_bx.conline{padding:76px 30px 63px;background: url(../images/sub/sub_coline01_mbg.gif) no-repeat center center}
.contact_bx .col_ser_btn a:hover{color:#000}
.contact_bx .col_ser_btn a:hover .col_br{color:#0b71da}
.contact_bx .col_ser_btn a:hover .col_rd{color:#f74b22}

/***********온라인 설문조사*************/

/*기능 안내 이미지 리스트*/
.survey_box .fun_list li:first-child .fun_img_box{overflow:hidden; min-height:unset; position:relative}
.survey_box .fun_list li:first-child .fun_img_box::before{content:''; width:100%;  display:block; padding-top:50.5%; background:red; left:0; top:0}
.survey_box .fun_list li:first-child .fun_img_box a{background-size: cover; position:absolute; width:100%; height:100%; left:0; top:0;}

/* -------------------컨텐츠 스타일 시작 -------------------*/
}
/* PC LAYOUT */
@media only screen and (min-width:1025px) {
/* Layout */
#subcontainer{position: relative; z-index: 1}
.subconwrap{position: relative}
.subconbox {position: relative; width: 1200px; margin: 0px auto 0; z-index: 1}
#subright { position: relative;width: 1200px; margin:0 auto}
#subpage{margin:0}
    
/* Visual */
.subvisual{z-index: 1}
.subvisual .visual_wrap {position: relative; width: 100%; margin: 0 auto; background-position:center top; height: 278px}
.subvisual .visual_item{display: block; width:100%; height:490px}
.subvisual .visual_item .item_wrap{width: 100%}
.subvisual .visual_item .img_box{position: relative; float: right; width:1592px; height: 282px}
.subvisual .visual_item .v_img{float: right; width:1592px; height: 281px; margin:110px 0 0 13px; border-radius: 15px 0 0 15px; box-shadow:2px 3px 5px rgba(0, 0, 0, 0.1); box-sizing: border-box}
.subvisual .visual_item .v_img span{font-size: 0; text-indent: -9999px}
 
/*Subtop TIT */
#subtop{position: relative}
#subtop h3{padding: 40px 0 53px; width: auto; font-size:2.533em; font-weight:600}

/* PC guide*/
#sub_guide {position: absolute; top:-5px; left:0; z-index: 10}
#sub_guide:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
#sub_guide .navi_area{height: 25px; line-height: 25px}
#sub_guide .navi_area ul {text-align: center}
#sub_guide .navi_area li {display: inline-block; width:auto !important}
#sub_guide .navi_area li a { display: block;padding: 0 9px 0 13px; line-height: 19px; background: url(../images/sub/navi_arr_pc.png) 0 50% no-repeat; color:#fff; font-size: 0.933em; font-weight:400}
#sub_guide .navi_area li:first-child a {background: none; padding-left: 0}
#sub_guide .navi_area li.m_menu {display: none}
#sub_guide .navi_area li.page_on{ font-weight:700}
#sub_guide .navi_area > ul > li.nav_home a{width: 20px; padding:0 9px 0 0; height: 19px}

/* subtop_btn */
.subtop_btn {display: block; position:absolute; top:-9px; right:0; width: 135px; z-index: 1}
.subtop_btn dl.font{float: left; margin-right: 3px}
.subtop_btn dl.font > dt{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.subtop_btn dl.font > dd{float: left; margin-right: 5px}
.subtop_btn dl.font > dd:last-child{margin-right: 2px}

/*quick_menu*/
.quick01_wrap{background:#fff; width: 107px; position:relative;border-top:4px solid #1e1e1e; border-bottom: 4px solid #1e1e1e;box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1)}
    
/******************************서브컨텐츠 영역**************************************/
}

/* LOWSET FIX */
@media only screen and (min-width:1025px) and (max-width:1320px) {
.slick-dots {left:35px}
}

@media only screen and (max-width:920px) {
/*교외체험학습*/ 
.cont_tab .his_txtbox .tab_lst li{width:100%; padding:17px 25px 17px 13px; word-break:keep-all; border-right: 0; border-bottom:1px dashed #c5c5c5}
.cont_tab .his_txtbox .tab_lst li:last-child{border-bottom: 1px solid #c5c5c5}
.cont_tab .his_txtbox .tab_lst li::after,.cont_tab .his_txtbox .tab_lst li:nth-of-type(3n-1)::after,.cont_tab .his_txtbox .tab_lst li:nth-of-type(3n)::after{display:none}
.cont_tab .his_txtbox .tab_lst li .lst_txt{padding-right:0}
}

@media only screen and (max-width:710px) {
/*모바일 아래에서 표 내용이 너무많을때 사이즈 고정후 스크롤 하기*/	
.table_scroll::before {content: "SCROLL →"; display: block; padding: 4px; font-weight: 500; text-align: right; color: #ff5b40; font-weight:bold}
/****공통 Table****/
.table_scroll{overflow-x: auto; position: relative}
.table_scroll > table {min-width:710px}
.comtable .table_scroll table tbody th{background: #fff}
 /****TIT****/    
h4.sub_tit4 br{display: block}

/***********온라인 설문조사*************/

/*기능 안내 이미지 리스트*/
.survey_box .fun_list li:first-child .fun_img_box a{background-position:top right}
}

    
@media only screen and (max-width:600px) {
/****TIT****/    
.sub_tit_txt br{display: none}
    
/*교외체험학습*/
.cont_intro .intro_img img{width: 400px}
.cont_intro .intro_txt br{display: none}
.fun_list li .fun_img_box img{width: 370px}
.cont_box .price_bx{min-height: auto}
.cont_box .price_bx .price_lst{flex-direction: column; height: auto}
.cont_box .price_bx .price_lst li{width: 100%; position: relative;align-items: flex-end; box-sizing: border-box; padding:18px 15px 18px; border-bottom:1px solid rgba(255,255,255,0.5)}
.cont_box .price_bx .price_lst li:last-child{border-bottom:0}
.cont_box .price_bx .price_lst li img{position: absolute; left: 9px; width: 38px}
.cont_box .price_bx .price_big_txt{margin:0 0 5px}
.cont_box .price_bx .price_sm_txt{font-size: 1.071em; font-weight: 400}
.cont_box .price_bx .price_lst li span{display: block}
.contact_bx.conline{padding:50px 15px 50px}
.contact_bx .col_txt{font-size: 1.286em}
.contact_bx .col_txt{margin-bottom: 21px}
.contact_bx .colline_txtbx{padding-bottom: 38px}
.contact_bx .ser_btn_box{flex-direction: column; align-items: center}
.contact_bx .ser_btn_box p:first-child{margin-right: 0; margin-bottom: 8px}
.contact_bx .col_ser_btn{margin:0; width: 85%}
}
@media only screen and (max-width:450px) {
/*교외체험학습*/
.cont_intro .intro_img {padding-bottom: 28px}
.cont_intro .intro_img img{width: 330px}
.fun_list li .fun_img_box img{width: 300px}
.contact_bx .ser_tel{flex-direction: column}
.contact_bx .ser_tel span{margin-right: 0; margin-bottom: 20px}

.leftmn>ul li a span {width:88%; font-size:13px; letter-spacing:-1px}
}
    
@media only screen and (max-width:380px) {
.quick01_wrap .quick_item>a{text-align: center; padding-right: 0}
.quick01_wrap .quick_item:nth-of-type(1)>a::before,.quick01_wrap .quick_item:nth-of-type(2)>a::before,.quick01_wrap .quick_item:nth-of-type(3)>a::before{display: none}  
/*교외체험학습*/
.fun_list li .fun_txt_box .fun_txt br{display: none}
}

/* Leftmn */
@media only screen and (max-width:360px) {
.leftmn>ul li a{font-size:1.077em} 

    
/*교외체험학습*/
.fun_list li .fun_img_box img{width: 280px}
}