@charset "utf-8";

body {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
.subConBox {position: relative}
.subConWrap {padding: 15px 12px}
.clear_fix::after{content:""; clear: both; display: block;}

/*폰트에서 span사용시 색지정
(span에 단독으로 스타일을 주면 모든 span 태그에 font-weight가 지정되므로 bold는 각각 지정함)_더 두껍게 할 시에는 고유클래스 아래에 지정 */
span.col_r{font-weight: 600; color:#ff1313}
span.col_g{font-weight: 600; color:#0575ff}
span.col_b{font-weight: 600; color:#0087ef}
span.col_o{font-weight: 600; color: #ff7b11}
span.col_p{font-weight: 600; color: #9600ff}
span.col_pk{font-weight: 600; color: #f86b96}
span.col_y{font-weight: 600; color: #ff7f0e}
span.col_bk{font-weight: 600; color:#000}

/* SUBVISUAL */
.subVisual .visual_wrap {position: relative; z-index: 20; background: #000}
.subVisual .visual_list .vimg {height: 150px}
.subVisual .visual_list .vimg::after{content: ""; clear: both; display: block; width: 100%; height: 100%; background: #000; opacity: 0.4}
.subVisual .visual_list .img01 {background: url(../images/sub/sub_v02.jpg) center center no-repeat}
.subVisual .visual_list .img02 {background: url(../images/sub/sub_v01.jpg) center center no-repeat}
.subVisual .visual_list .img03 {background: url(../images/sub/sub_v03.jpg) center bottom no-repeat}
.subVisual .v_txt {position: absolute; color: #fff; text-align: center; top:76px; z-index: 1; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9)}
.subVisual .v_txt dt {font-size: 18px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.07em; line-height: 140%; margin-bottom:5px}
.subVisual .v_txt dd {font-size: 13px; line-height: 140%}
.subVisual .slick-dots{display: none !important}

/* SUBLEFT */
#subLeft {position: absolute; left: 13px; top: 0; margin-top: -69px; z-index: 30}
#subLeft .leftTit h2 {color: #fff; font-size: 27px; font-weight: 400; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9)}

/* PAGENAVI */
#sub_guide {background: #0f5ba2}
.guide_wrap {position: relative; height: 50px; padding-left: 50px; max-width: 1250px; margin: 0 auto}
.guide_wrap .btn_home {position: absolute; left: 0; top: 0}
.guide_wrap .btn_home a {display: block; width: 50px; height: 50px; background: #02437d url(../images/sub/btn_home.png) 50% 50% no-repeat}
.guide_wrap .naviArea a {display: block; color: #fff}
.guide_wrap .naviArea > ul > li {float: left; position: relative}
.guide_wrap .naviArea > ul > li > a {height: 50px; line-height: 50px; padding-left: 6%; font-size: 16px; font-weight: 350; background: url(../images/sub/arw_pagenavi.png) 95% 50% no-repeat; text-overflow:ellipsis; white-space:nowrap}
.guide_wrap .subMn {position: absolute; left: 0; top: 50px; z-index: 20; background: #3684cc; width: 100%; display: none}
.guide_wrap .subMn ul {padding: 15px}
.guide_wrap .subMn li a {display: block; line-height: 1.4; padding: 6px 10px; border-top: 1px solid #559ada; color: #c1ddf8; font-weight: 100; transition: all .3s; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
.guide_wrap .subMn li:first-child a {border: 0}
.guide_wrap .subMn li:hover a {color: #fff; font-weight: 350}
.guide_wrap .btn_consult {position: absolute; right: 20px; top: 50%; margin-top: -9px}
.guide_wrap .btn_consult a {display: block; padding-left: 30px; line-height: 18px; color: #fff; background: url(../images/sub/btn_consult.png) 0 50% no-repeat}

/* SUBTOP */
.sub_top_wrap {padding: 15px 0; text-align: center; margin: 0 12px; border-bottom: 2px solid #dfdfdf; position: relative}
.sub_top_wrap:after {content:""; display: block; width: 110px; height: 4px; background: #1b69b1; position: absolute; left: 50%; bottom: 0; margin: 0 0 -2px -55px}
.sub_top_wrap .sub_h3 {font-size: 20px; font-weight: 400; color: #282828; margin-bottom: 10px}
.sub_top_wrap .sub_h3_eng {font-size: 13px; color: #a9a9a9; text-transform: uppercase}

.top_btn .btn_pop {display:none}

/* TABMENU */
/* #tabNavi {margin-bottom: 25px} */
#tabNavi ul {height: 53px; border: 1px solid #d9d9d9; margin: 0 auto; text-align: center}
#tabNavi li {display: inline-block; margin-top: -1px}
#tabNavi li a {display: inline-block; line-height: 55px; padding: 0 29px; font-size:14px; transition: background-color .3s}
#tabNavi li.on a,
#tabNavi li:hover a {color: #fff; font-weight: 400; background-color: #91be27}

/* 솔루션 */
.solution_top {display: none}
.solution_tit .tit_box {text-align: center; margin-bottom: 25px; padding: 30px 0 35px 0; border-bottom: 1px solid #ddd}
.solution_tit .tit_box .slt_tit {font-size: 22px; font-weight: 500; color: #282828; margin-bottom: 14px}
.solution_tit .tit_box .slt_sub {font-size: 15px; line-height: 1.4}
.solution_slide .slt_visual {position: relative; padding: 0 26px 0 26px}
.solution_slide .cont_box {width: 100%; max-width: 340px; padding: 40px 0 35px 0; text-align: center; margin: 0 auto; border: 3px solid #eaeaea;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
.solution_slide .slick-current .cont_box {border: 3px solid #000}
.solution_slide .cont_tit {font-size: 20px; font-weight: 500; color: #282828; margin-bottom: 16px}
.solution_slide .cont_sub {line-height: 1.4; margin-bottom: 15px; min-height: 76px}
.solution_slide .btn_more {width: 150px; margin: 0 auto}
.solution_slide .btn_more a {display: block; font-size: 15px; font-weight: 400; color: #fff; background: #ddd; padding: 10px 0}
.solution_slide .slick-current .btn_more a {background: #019fe9}
.solution_slide .slick-arrow {position: absolute; top: 50%; width: 23px; height: 20px; text-indent: -9999px; overflow: hidden; font-size: 0}
.solution_slide .slick-prev {background: url(../images/sub/slt_arw01.gif) 0 0 no-repeat; left: 0}
.solution_slide .slick-next {background: url(../images/sub/slt_arw02.gif) 0 0 no-repeat; right: 0}
.solution_bot {padding: 60px 0 0 0}
.solution_bot .bot_tit {text-align: center; font-size: 24px; font-weight: 500; color: #282828; margin-bottom: 66px}
.solution_bot .bot_sub {line-height: 1.4; text-align: center; padding: 0 40px; margin-bottom: 40px}
.solution_bot .bot_list {padding: 0 20px; margin-bottom: 50px}
.solution_bot .bot_list li {margin-top: 25px}
.solution_bot .bot_list li:first-child {margin: 0}
.solution_bot .list_tit {font-size: 17px; font-weight: 400; color: #282828; padding: 0 0 11px 18px; background: url(../images/sub/list_tit_blt.gif) 0 3px no-repeat; border-bottom: 1px solid #ddd}
.solution_bot .list_sub {padding-top: 12px; line-height: 1.3; min-height: 48px}
.solution_bot .price {background: #019fe9; text-align: center; padding: 50px 0; margin-bottom: 80px}
.solution_bot .price span {display: block; color: #fff; }
.solution_bot .price .ico {margin-bottom: 20px}
.solution_bot .price .big_txt {font-size: 40px; font-weight: 600; margin-bottom: 10px}
.solution_bot .price .sm_txt {font-size: 18px; font-weight: 100}
.solution_bot .price li {position: relative}
.solution_bot .price li::before {content:""; display: block; width: 50%; height: 1px; background: #fff; margin: 0 auto; margin: 25px auto}
.solution_bot .price li:first-child::before {display: none}
.solution_intro {padding-top: 60px; background: url(../images/sub/solution_intro_bg.gif) 0 0 repeat-x}
.solution_intro .si_tit {text-align: center; margin-bottom: 30px}
.solution_intro .si_tit h4 {font-size: 24px; line-height: 1.2; font-weight: 500; margin-bottom: 14px}
.solution_intro .si_tit span {color: #1e94cc}
.solution_intro .si_tit p {line-height: 1.4; padding: 0 14px}
.solution_intro .si_obj {text-align: center}
.solution_intro .si_obj li {line-height: 1.4; margin-top: 50px; padding-top:50px; position: relative}
.solution_intro .si_obj li::before {content:""; display: block; width: 36px; height: 36px; background: url(../images/sub/si_obj_plus.png) 0 0 no-repeat; position: absolute; left: 50%; top: 0; margin: -18px 0 0 -18px}
.solution_intro .si_obj li:first-child {margin: 0; padding: 0}
.solution_intro .si_obj li:first-child::before {display: none}
.solution_intro .si_ico {width: 99px; display: block; margin: 0 auto}
.solution_intro .big_txt {display: block; font-weight: 500; margin: 10px 0; font-size: 16px; color: #282828}
.solution_contact {background: url(../images/sub/solution_contact_bg.jpg) 50% 0 no-repeat; padding: 50px; color: #fff; text-align: center; margin-top: 50px; position: relative}
.solution_contact h4 {font-size: 24px; font-weight: 400; line-height: 1.2; margin-bottom: 20px}
.solution_contact li {font-size: 16px; line-height: 1.2}
.solution_contact li.req_btn {width: 240px; margin: 15px auto 0 auto}
.solution_contact li.req_btn a {display: block; color: #fff; padding: 10px 100px 10px 0; background: #019fe9 url(../images/sub/req_btn_bg.png) 85% 50% no-repeat}

/* 공통 타이틀 */
.common_tit_wrap {/*padding: 120px 0 60px 0;*/ padding:0 0 25px; text-align: center}
.common_tit_wrap:last-child{padding-bottom:0}
/* .common_tit_wrap:first-child {padding-top: 60px} */
.common_tit_wrap h4 {font-size: 20px; line-height:140%; font-weight: 500; color: #282828; word-break:keep-all}
.common_tit_wrap h4:after {content: ""; display: block; width: 40px; height: 2px; background: #000; margin: 16px auto}
.common_tit_wrap p {font-size: 15px; line-height: 160%; padding: 0 20px; word-break:keep-all}
.common_tit_wrap .upper {text-transform: uppercase}
.common_tit_wrap .col01 {color: #ce1616}

/* 회사소개 */
.intro_content {padding: 70px 20px; margin-bottom: 50px; background: url(../images/sub/intro_content_bg.jpg) 50% 0 no-repeat}
.intro_content ul {text-align: center}
.intro_content li {color: #fff; font-size: 40px; font-weight: 500; line-height: 60px}
.intro_content .since {text-align: center; color: #fff; text-transform: uppercase; font-size: 17px}
.intro_content .since::before {content:""; display: block; width: 150px; height: 1px; background: rgba(255, 255, 255, .6); margin: 16px auto}

.overview_wrap {position: relative}
.overview_wrap .ow_bg {display: block; width: 100%; max-width: 420px; margin: 0 auto 30px auto}
.overview_wrap .ow_bg img {width: 100%}
.overview_wrap table {border-top: 3px solid #1b69b1; width: 100%}
.overview_wrap th {font-weight: 400; color: #282828}
.overview_wrap th,
.overview_wrap td {padding: 15px 12px; border-bottom: 1px solid #ddd; font-size: 15px; line-height: 150%}

/* 사업영역 웹/모바일 개발 */
.field01 .bg {width: 361px ; position: absolute; right: 0; top: 50%; margin-top: -90px; z-index: 10}
.field01 .bg img {width: 100%}
.field01_slide {background: #4db1f1; margin-bottom: 60px}
.field01_slide .slide_item {color: #fff}
.field01_slide .slide_item dl {padding: 30px; background: #4db1f1}
.field01_slide .slide_item dt {font-size: 24px}
.field01_slide .slide_item dt:after {content:""; display: block; width: 40px; height: 2px; background: #fff; margin: 12px 0}
.field01_slide .slide_item .sm {font-size: 18px; display: block; margin-top: 10px}
.field01_slide .slide_item .slide_txt {line-height: 1.4}
.field01_slide .slick-dots {padding: 0 30px 30px 30px}
.field01_slide .slick-dots li {float: left; position: relative; opacity: .5;-webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; -ms-transition: opacity .3s; transition: opacity .3s;}
.field01_slide .slick-dots li button {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: none; text-indent: -9999px; overflow: hidden; font-size: 0; outline: none}
.field01_slide .slick-dots li::before {display: block; padding: 7px; border: 1px solid #fff; color: #fff; margin: 0 5px 2px 0}
.field01_slide .slick-dots li.slick-active, .field01_slide .slick-dots li:hover {opacity: 1}
.field01_slide .slick-dots li:nth-child(1)::before {content:"반응형 웹"}
.field01_slide .slick-dots li:nth-child(2)::before {content:"모바일"}
.field01_slide .slick-dots li:nth-child(3)::before {content:"유지관리"}
.field01_slide .slick-dots li:nth-child(4)::before {content:"솔루션"}
.field01_tit {text-align: center; font-size: 17px; text-align: center; padding: 0 20px; line-height: 1.2; font-weight: 400; margin-bottom: 40px}
.field01_tit br {display: none}
.field01_tit .col01 {color: #305fe7}
.field01_tit .col02 {color: #de6116}
.field01_tit::before,
.field01_tit:after {content:""; display: block; width: 20px; height: 20px; background: url(../images/sub/field_tit_dot.gif) 0 0 no-repeat}
.field01_tit::before {margin: 0 auto 20px auto}
.field01_tit:after {margin: 20px auto 0 auto}
.field01_list {margin-bottom: 60px}
.field01_list li {margin-top: 20px}
.field01_list li:first-child {margin-top: 0}
.field01_list li:nth-child(1) .field01_list_tit {background: url(../images/sub/field01_list_tit_bg01.gif) 0 100% no-repeat}
.field01_list li:nth-child(2) .field01_list_tit {background: url(../images/sub/field01_list_tit_bg02.gif) 0 100% no-repeat}
.field01_list li:nth-child(3) .field01_list_tit {background: url(../images/sub/field01_list_tit_bg03.gif) 0 100% no-repeat}
.field01_list li:nth-child(4) .field01_list_tit {background: url(../images/sub/field01_list_tit_bg04.gif) 0 100% no-repeat}
.field01_list .field01_list_tit {font-size: 17px; font-weight: 500; padding: 10PX 0 5px 60px; border-bottom: 1px solid #4b4b4b; line-height: 1.2; margin-bottom: 12px}
.field01_list .kr {display: block; color: #a79f9f}
.field01_list .en {display: block; color: #4f4040}
.field01_list .field01_list_sub {padding: 3px 6px; line-height: 1.4}
.field01_btns li {text-align: center; color: #fff; padding: 40px 0; font-size: 17px; float: left; width: 33.3%}
.field01_btns li a {display: block; width: 140px; height: 32px; border: 1px solid #fff; margin: 20px auto 0 auto; color: #fff; line-height: 32px; text-transform: uppercase; font-size: 12px; overflow: hidden; position: relative}
.field01_btns li .btn_more {display: block; padding-left: 140px; margin-left: -140px; background: url(../images/sub/field01_btns_arw.png) 0 50% no-repeat;-webkit-transition: margin .3s; -moz-transition: margin .3s; -o-transition: margin .3s; -ms-transition: margin .3s; transition: margin .3s}
.field01_btns li .btn_more:hover {margin-left: 0}
.field01_btns li:nth-child(1) {background: url(../images/sub/field01_btn_bg01.jpg) 50% 0 no-repeat}
.field01_btns li:nth-child(2) {background: url(../images/sub/field01_btn_bg02.jpg) 50% 0 no-repeat}
.field01_btns li:nth-child(3) {background: url(../images/sub/field01_btn_bg03.jpg) 50% 0 no-repeat}

/* 사업영역 방과후 컴퓨터 교육 */
.field02 {position: relative; margin-bottom: 50px}
.field02 .bg {width: 100%; max-width: 639px; margin: 0 auto}
.field02 .bg img {width: 100%}
.field02_list {padding: 30px 0 0 0}
.field02_list li {border-bottom: 1px solid #eaeaea; padding: 20px 0 20px 90px}
.field02_list li:first-child {margin-top: 0}
.field02_list li:nth-child(1) {background: url(../images/sub/field02_ico01.png) 0 50% no-repeat}
.field02_list li:nth-child(2) {background: url(../images/sub/field02_ico02.png) 0 50% no-repeat}
.field02_list li:nth-child(3) {background: url(../images/sub/field02_ico03.png) 0 50% no-repeat}
.field02_list li:nth-child(4) {background: url(../images/sub/field02_ico04.png) 0 50% no-repeat}
.field02_list .fl02_tit {font-size: 16px; font-weight: 600; color: #061e4a; line-height:130%; margin-bottom: 6px}
.field02_list .fl02_sub {line-height: 1.4}
.field02_chart01 {text-align: center; margin-bottom: 30px}
.field02_chart01 li {display: inline-block; width: 150px; position: relative}
.field02_chart01 li:nth-child(1)::before,
.field02_chart01 li:nth-child(3)::before {content:""; display: block; width: 35px; height: 17px; position: absolute; top: 35px; z-index: -1}
.field02_chart01 li:nth-child(1)::before {background: url(../images/sub/field02_chart01_arw01.png) 100% 0 no-repeat;  right: 0; margin: 0 -10px 0 0}
.field02_chart01 li:nth-child(3)::before {background: url(../images/sub/field02_chart01_arw02.png) 0 0 no-repeat;  left: 0; margin: 0 0 0 -10px}
.field02_chart01 .ico {width: 100px; display: block; margin: 0 auto; border: 2px solid #2ac178; background: #fff;-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;}
.field02_chart01 .ico img {width: 100%}
.field02_chart01 .txt {font-size: 15px; font-weight: 400; color: #000; line-height: 1.2; display: block; margin-top: 10px}
.field02_chart01 li:nth-child(2n) .ico{border-color:#6ab7e8}
.field02_chart01 li:nth-child(3n) .ico{border-color:#ff6850}
.field02_chart02 {text-align: center; margin-bottom: 30px}
.field02_chart02 li {display: inline-block; width: 71px; margin: 0 10px; padding: 10px 0; border: 1px solid #61a3e3; position: relative; color: #282828; font-weight: 400;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px;}
.field02_chart02 li::before {content:""; display: block; width: 40px; height: 1px; background: #d3d3d3; position: absolute; left: 0; top: 50%; margin: -0.5px 0 0 -34px}
.field02_chart02 li:first-child::before {display: none}
.field02_chart02 li:nth-child(2n) {border-color: #d3d3d3}
.field02_btns {text-align: center}
.field02_btns li a {display: block; font-size: 15px; border: 1px solid #dcdcdc; padding: 12px 0; margin: 10px 0; color: #282828; font-weight: 400;-webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;-webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s;}
.field02_btns li:hover a {border-color: #1d4da1; color: #fff; background: #1d4da1}

/* 사업영역 키즈캠퍼스 */
.berkly {background: #ffc22e; position: relative; margin-bottom: 50px}
.berkly .bg {width: 100%; margin: 0 auto}
.berkly .bg img {width: 100%; display: block}
.berkly_wrap {padding: 30px}
.berkly_wrap dl {color: #fff}
.berkly_wrap dt {font-size: 18px; line-height: 150%}
.berkly_wrap dt strong {display: block; font-weight: 400}
.berkly_wrap dt:after {content:""; display: block; width: 50px; height: 2px; background: #fff; margin: 20px 0 14px 0}
.berkly_wrap dd {line-height: 150%}
.berkly_tit {margin-bottom: 50px; padding: 44px 20px; text-align: center; font-size: 20px; font-weight: 400; position: relative}
.berkly_tit .col01 {color: #df3a3a}
.berkly_tit::before,
.berkly_tit:after {content:""; display: block; width: 20px; height: 20px; background: url(../images/sub/field_tit_dot.gif) 0 0 no-repeat}
.berkly_tit::before {margin: 0 auto 20px auto}
.berkly_tit:after {margin: 20px auto 0 auto}
.berkly_list li {margin-top: 25px}
.berkly_list li:first-child {margin-top: 0}
.berkly_list .berkly_img {width: 100%; max-width: 403px; margin-bottom: 15px}
.berkly_list .berkly_img img {width: 100%}
.berkly_list h5 {font-size: 18px; font-weight: 500; color: #4f4040; position: relative}
.berkly_list h5:after {content:""; display: block; width: 30px; height: 2px; background: #282828; margin: 12px 0 10px 0}
.berkly_list h5 .btn_go_home {display: block; font-size: 12px; font-weight: 300; padding:  8px 30px 8px 10px; position: absolute; right: 5px; top: 0; color: #333; border: 1px solid #ddd; background: url(../images/sub/new_page.gif) 92% 50% no-repeat;
-webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s;}
.berkly_list h5 .btn_go_home:hover {background: #68c08e url(../images/sub/new_page_w.gif) 92% 50% no-repeat;; border: 1px solid #68c08e; color: #fff}
.berkly_list .sub {font-size: 16px; font-weight: 400; color: #282828; margin-bottom: 15px}
.berkly_list .txt {line-height: 150%; margin-bottom: 15px}
.berkly_list .num a {display: block; position: relative; background: #68c08e; color: #fff; padding: 12px 16px; text-align: right; font-size: 15px; font-weight: 400; letter-spacing: 1px}
.berkly_list .num .tit {position: absolute; left: 16px; top: 0; display: inline-block; padding: 12px 0}
#produceInfo .intro01 {margin-bottom:65px}
#produceInfo .intro01:after {content:""; clear:both; display:block; height:0; visibility:none}
#produceInfo .intro01 .introImg {width:100%; background:url(../images/sub/introImg_m.jpg) no-repeat center center}
#produceInfo .intro01 .introBox {background:#f6f6f6}
#produceInfo .intro01 .introBox h3 {text-align:center; font-size:3.077em; font-weight:300; line-height:130%; padding:0 20px 70px 20px}
#produceInfo .intro01 .introBox h3 span {font-weight:500}
#produceInfo .intro01 .introBox ul {display:table; margin:0 auto}
#produceInfo .intro01 .introBox ul:after {content:""; clear:both; display:block; height:0; visibility:none}
#produceInfo .intro01 .introBox ul li {display:block; float:left; text-align:center; line-height:150%; background:url(../images/sub/intro_bar.gif) no-repeat left center}
#produceInfo .intro01 .introBox ul li img {display:block; margin:0 auto}
#produceInfo .intro01 .introBox ul li.bg_no {background:none}
#produceInfo .intro01 .introBox ul li span {font-weight:400; font-style:italic; font-size:1.077em; line-height:200%}
#produceInfo .intro01 .introBox ul .i_icon01 {padding:0 20px}
#produceInfo .intro01 .introBox ul .i_icon02 {padding:0 25px}
#produceInfo .intro01 .introBox ul .i_icon03 {padding:0 25px}
#produceInfo .intro01 .introBox ul .i_icon04 {padding:0 20px} 
#produceInfo .intro02 {padding:0 20px}
#produceInfo .intro02 h3 {font-size:32px; font-weight:400; color:#424242; text-align:center; line-height:160%; background:url(../images/sub/ct_line.gif) no-repeat center bottom; padding:0 20px 40px 20px; margin-bottom:34px}
#produceInfo .intro02 h3 .col01 {color:#0f5ba2}
#produceInfo .intro02 h3 .col02 {color:#6b920f}
#produceInfo .intro02 .introTxt {text-align:center; font-size:1.385em; line-height:140%; color:#4e4e4e; margin-bottom:45px}
#produceInfo .intro02 .introList ul {display:table; margin:0 auto; text-align:center}
#produceInfo .intro02 .introList ul li {padding:30px 0 70px}
#produceInfo .intro02 .introList ul li.arrow01 {background:url(../images/sub/intro_arrow_down.gif) no-repeat center bottom}
#produceInfo .intro02 .introList ul li.arrow02 {background:url(../images/sub/intro_arrow_up.gif) no-repeat center bottom; }
#produceInfo .intro02 .introList ul li>dl {width:230px; height:190px; background:url(../images/sub/ctList_bg.gif) no-repeat left top; padding-top:40px}
#produceInfo .intro02 .introList ul li>dl dt {color:#102ca6; font-size:1.231em; font-weight:400; padding-bottom:10px}
#produceInfo .intro02 .introList ul li>dl dt img {display:block; margin:10px auto}
#produceInfo .intro02 .introList ul li>dl dd {font-size:1.231em}
#produceInfo .intro03 h3 {font-size:32px; font-weight:400; color:#424242; text-align:center; line-height:160%; background:url(../images/sub/ct_line.gif) no-repeat center bottom; padding:0 20px 40px 20px; margin-bottom:34px}
#produceInfo .intro03 h3 .col03 {color:#13569a}
#produceInfo .intro03 .introTxt {text-align:center; font-size:1.385em; line-height:140%; color:#4e4e4e; margin-bottom:75px}
#produceInfo .intro03 ul:after {content:""; clear:both; display:block; height:0; visibility:none}
#produceInfo .intro03 ul li { width:100%; float:left}
#produceInfo .intro03 ul li>dl {margin:5px; padding:20px 10px 90px 20px}
#produceInfo .intro03 ul .service01>dl {background:#f3f3f3 url(../images/sub/service_icon01.gif) no-repeat 95% 85%}
#produceInfo .intro03 ul .service02>dl {background:#f3f3f3 url(../images/sub/service_icon02.gif) no-repeat 94% 85%}
#produceInfo .intro03 ul .service03>dl {background:#f3f3f3 url(../images/sub/service_icon03.gif) no-repeat 94% 85%}
#produceInfo .intro03 ul .service04>dl {background:#f3f3f3 url(../images/sub/service_icon04.gif) no-repeat 94% 85%}
#produceInfo .intro03 ul .service05>dl {background:#f3f3f3 url(../images/sub/service_icon05.gif) no-repeat 95% 85%}
#produceInfo .intro03 ul .service06>dl {background:#f3f3f3 url(../images/sub/service_icon06.gif) no-repeat 95% 85%}
#produceInfo .intro03 ul .service07>dl {background:#f3f3f3 url(../images/sub/service_icon07.gif) no-repeat 95% 85%}
#produceInfo .intro03 ul .service08>dl {background:#f3f3f3 url(../images/sub/service_icon08.gif) no-repeat 95% 85%}
#produceInfo .intro03 ul li>dl dt {font-size:1.538em; font-weight:500; background:url(../images/sub/serviceTit_underline.gif) no-repeat left bottom; padding-bottom:10px}
#produceInfo .intro03 ul li>dl dd {padding-top:10px; font-size:1.231em}
#produceInfo .intro04 {margin-top:65px}
#produceInfo .intro04 h3 {font-size:3.077em; font-weight:400; color:#424242; text-align:center; line-height:140%; background:url(../images/sub/ct_line.gif) no-repeat center bottom; padding:0 20px 40px 20px; margin-bottom:34px}
#produceInfo .intro04 h3 .col04 {color:#d55c12}
#produceInfo .intro04 h3 .col05 {color:#0a49b1}
#produceInfo .intro04 .introTxt {text-align:center; font-size:1.385em; line-height:140%; color:#4e4e4e; margin-bottom:75px; }
#produceInfo .intro04 .project {width:340px; margin:0 auto;  border: 1px solid #1b4ba3; text-align:center;  position: relative; overflow: hidden; z-index:10}
#produceInfo .intro04 .project span {display:inline-block; width:47px; vertical-align:middle; height:27px; background:url(../images/sub/hp_icon01.png) no-repeat 20px center; }
#produceInfo .intro04 .project a {display:block; font-size:1.385em; color:#1b4ba3; padding:17px 0; position: relative; z-index: 12; text-transform: uppercase;
-webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s}
#produceInfo .intro04 .project:after {content:""; display: block; width: 100%; height: 100%; position: absolute; left: -1px; top: 0; background: #1b4ba3; z-index: 11; margin-left: -100%; -webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s}
#produceInfo .intro04 .project:hover a {display:block; color: #fff}
#produceInfo .intro04 .project:hover:after {left:0; margin-left: 0}
#produceInfo .intro04 .project:hover span {background:url(../images/sub/hp_icon01_on.png) no-repeat 20px center; z-index: 12}

/* 서브페이지 레이어 */
.sub_layer {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2000; min-width: 320px}
.sub_layer.layer_bg {background: rgba(0, 0, 0, .8)}
.sub_layer .layer_content {position: absolute; left: 50%; top: 50%; width: 90%; max-width: 380px; max-height: 80%; background: #fff; overflow-y: auto;
-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%)}
.layer_content_wrap {padding: 15px}
.layer_content_wrap .layer_tit {text-align: center; border-bottom: 1px solid #ccc; margin-bottom: 20px}
.layer_content_wrap .layer_tit h4 {font-weight: 500; font-size: 20px; padding: 14px 0}
.layer_content_wrap .close_btn {position: absolute; right: 25px; top: 28px}
.layer_content_wrap .close_btn button {width: 20px; height: 20px; display: block; background: url(../images/sub/layer_close_btn.png) 0 0 no-repeat}
.layer_content_wrap .layer_noti {text-align: center; line-height: 150%; margin-bottom: 9px}
.layer_content_wrap .layer_noti strong {font-weight: 500}
.layer_content_wrap .layer_noti .col01 {color: #2f55c8}
.layer_content_wrap .layer_noti .col02 {color: #de4343}
.layer_content_wrap .input_sub_txt {line-height: 1.3; margin: 0 0 6px 0; padding-left: 10px; background: url(../images/sub/li_blt01.gif) 0 9px no-repeat; clear: both}
.layer_content_wrap .input_box {border: 1px solid #aaa; position: relative; height: 42px;border-radius: 4px}
.layer_content_wrap .input_tit {position: absolute; left: 0; top: 0; line-height: 40px; height: 40px; padding: 0 14px; color: #c9c9c9; font-weight: 100} 
.layer_content_wrap .init_input {border: 0; padding: 0; width: 100%; line-height: 40px; height: 40px; padding: 0 14px; box-sizing: border-box; background: transparent}
.pass_rule .pass_rule_tit {font-weight: 400; padding: 5px 16px 6px 16px; background: #5d2727; color: #fff; position: relative; display:none}
.pass_rule .pass_rule_tit:after {display: block; content: ""; width: 13px; height: 8px; position: absolute; right: 16px; top: 8px; background: url(../images/sub/pass_rule_tit_arw.png) 0 0 no-repeat; transition: transform .4s}
.pass_rule .pass_rule_list {padding:10px 5px;}
.pass_rule .pass_rule_list li {line-height: 1.3; margin-top: 6px; padding-left: 10px; background: url(../images/sub/li_blt01.gif) 0 6px no-repeat}
.pass_rule .pass_rule_list li:first-child {margin-top: 0}
.pass_rule .pass_rule_tit.view_list:after {transform: rotate(180deg);}
.layer_content_wrap .btn_box {padding: 16px 0; border-top: 1px solid #ddd; text-align: center}
.layer_content_wrap .btn_box button {width: 115px; color: #fff; font-size: 15px; padding: 6px 0 7px 0; margin: 0 5px;border-radius: 4px; box-sizing: border-box;}
.layer_content_wrap .btn_box .btn_confirm {background: #e23a3a}
.layer_content_wrap .btn_box .btn_cancle {background: #fff; color: #282828; border: 1px solid #ddd}
.layer_content_wrap .btn_box .btn_confirm02 {background: #4576db}
.layer_content_wrap .btn_box .btn_cancle02 {background: #565656}
.layer_content_wrap .info_tit {padding: 2px 0 2px 20px; margin-bottom: 10px; font-weight: 400; background: url(../images/sub/info_tit_blt.png) 0 0 no-repeat}
.layer_content_wrap .info_sub {line-height: 45px; padding: 0 16px; border: 1px solid #282828; font-weight: 400;border-radius: 4px}
.layer_content_wrap .info_sub.sub01 {color: #0b1c9e}
.layer_content_wrap .info_sub.sub02 {color: #c04317}
.layer_content_wrap .input_wrap {margin-bottom: 10px}
.layer_content_wrap .input_wrap .blt_tit {padding: 2px 0 2px 20px; margin-bottom: 10px; font-weight: 400; background: url(../images/sub/info_tit_blt02.png) 0 0 no-repeat; display: block}
.layer_content_wrap .manager_info{margin-bottom: 10px}

/*담당자 정보확인*/
.layerinfo_change.sub_layer .layer_content{max-height:86%}
.layerinfo_change .layer_content_wrap{padding:20px}
.layerinfo_change .layer_tit h4{padding: 0 0 14px 0}
.layerinfo_change .noti_txt br{display:none}
.layerinfo_change .layer_content_wrap .info_sub{line-height:32px}
.layerinfo_change .layer_content_wrap .input_box{height:32px; line-height:32px}
.layerinfo_change .layer_content_wrap .init_input{height:32px; line-height:32px}
.layerinfo_change .layer_content_wrap .btn_box{padding:16px 0 0}
.layerinfo_change .layer_content_wrap .layer_tit{margin-bottom:16px}


/*유지보수 알림*/
.layer_content_wrap .layer_alimi{margin-top: 25px}
.layer_alimi ul li{margin-bottom: 20px}
.layer_alimi ul li:last-child{margin-bottom: 0}
.layer_alimi ul li p a{display: block; width: 95%; padding: 70px 10px 10px 10px; margin:0 auto; border-radius: 5px; background-repeat: no-repeat; background-position: center 18px; box-sizing: border-box; text-align: center; font-size: 15px; font-weight: 600; color:#fff; transition: all .5s}
.layer_alimi ul li p span{display: block; padding:10px 5px; margin-top: 15px; border-radius: 50px; background: #fff; color:#000; transition: all .5s}
.layer_alimi ul li p.alimi1 a{background-image: url(../../images/layer/alimi_ico1.png); background-color: #1b69b1}
.layer_alimi ul li p.alimi1 a:hover{background-color: #084884}
.layer_alimi ul li p.alimi2 a{background-image: url(../../images/layer/alimi_ico2.png); background-color: #85bb37}
.layer_alimi ul li p.alimi2 a:hover{background-color: #5e9820}
.layer_alimi ul li p a:hover span{color:#ff4716}

/* 비전 */
.vision_tree .img_wrap {display: none}
.person_box li {margin-top: 40px}
.person_box li:first-child {margin-top: 0}
.person_box li br {display: none}
.person_box .person_wrap img {width: 100%; margin-bottom: 15px}
.person_box .person_wrap dt {font-size: 20px; font-weight: 500; color: #282828}
.person_box .person_wrap dt:after {content:""; display: block; width: 40px; height: 2px; margin: 12px 0; background: #000}
.person_box .person_wrap dd {font-size: 15px; line-height: 150%}
/* 비전2023 수정 */
.vision_tree2{margin-bottom: 50px}
.vision_tree2 .text_wrap{position: relative; height: 530px; background: url(../images/sub/vision_bg.gif) center top no-repeat}
.vision_tree2 .vision_logo{position: absolute; top:200px; left:50%; margin-left: -100px}
.vision_tree2 ul li{position: absolute}
.vision_tree2 .vs_item1{top:110px; left:50%; margin-left:-450px}
.vision_tree2 .vs_item2{top:110px; right:50%; margin-right:-450px}
.vision_tree2 .vs_item3{bottom:15px;  left:50%; margin-left:-100px}
.vision_tree2 ul li dl{position: relative; width: 300px; text-align: center}
.vision_tree2 ul li.vs_item3 dt{position: absolute; top:28px; left:-108px}
.vision_tree2 ul li dd{margin-top:-4px; padding: 20px 10px; border-radius: 3px 50px 50px 50px; border:3px solid #ccc; background: #fff; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.1); font-size: 15px; font-weight: 600; line-height: 160%; box-sizing: border-box}
.vision_tree2 ul li.vs_item1 dd{border-radius: 50px 3px 50px 50px; border-color: #196ab1}
.vision_tree2 ul li.vs_item2 dd{border-color: #ffb71d}
.vision_tree2 ul li.vs_item3 dd{border-color: #9ec43f}
.vision p.imgbox{overflow: hidden; width: 100%; height: 194px; margin-bottom: 20px; border-radius: 50px 0 50px 0}
.vision p.imgbox img{width: 100%; height:100%}

/* 클라이언트 */
.client .client_body{padding-bottom:0}
.client .client_list li {width: 20%; float: left; text-align: center; margin-bottom: 2px}
.client .client_list .img_box {width: 100%; max-width: 254px; display: block; margin: 0 auto; padding: 0 1px; box-sizing: border-box}
.client .client_list .img_box img {width: 100% !important}

/* 오시는 길 */
.comming .root_daum_roughmap_landing {width: 100% !important; height: 445px !important}
.comming .root_daum_roughmap .wrap_map {height: 445px !important}
.comming .root_daum_roughmap .wrap_controllers {display: none}
.comming .find_road {padding:30px 0; text-align: center}
.comming .find_road li {display: inline-block; margin: 0 10px; font-size: 16px}
.comming .find_road li a {display: inline-block; border: 1px solid #ccc; width: 215px}
.comming .find_road li a span {padding: 15px 0 16px 24px; display: inline-block; font-weight: 400}
.comming .find_road li:nth-child(1) a {border-color: #00c63b; color: #00c63b}
.comming .find_road li:nth-child(1) a span {background: url(../images/sub/naver_ico.gif) 0 50% no-repeat}
.comming .find_road li:nth-child(2) a {border-color: #4a89c8; color: #4a89c8}
.comming .find_road li:nth-child(2) a span {background: url(../images/sub/daum_ico.gif) 0 50% no-repeat}
.comming .txt_wrap {border: 1px solid #ddd; border-top: 2px solid #0f5ba2; padding: 15px 25px 25px 25px; margin-top: 34px; box-sizing: border-box}
.comming .txt_wrap:first-child {margin-top: 0}
.comming .map_tit {font-size: 18px; font-weight: 400; color: #0f5ba2; padding: 10px 0 10px 30px; border-bottom: 1px solid #eaeaea; margin-top: 24px; background-position: 0 50%; background-repeat: no-repeat}
.comming .map_tit:first-child {margin-top: 0}
.comming .map_sub {padding: 10px 0 0 0; margin-top: 10px}
.comming .map_sub:first-child {margin-top: 0}
.comming .map_sub dt {padding: 0 0 0 10px; line-height: 150%; margin-bottom: 7px; color: #282828; font-weight: 400; background: url(../images/sub/li_blt01.gif) 0 8px no-repeat}
.comming .map_sub dd {line-height: 150%; text-indent: -8px; padding-left: 8px}
.comming .map_tit.tit01 {background-image: url(../images/sub/map_tit_bg01.png)}
.comming .map_tit.tit02 {background-image: url(../images/sub/map_tit_bg02.png)}
.comming .map_tit.tit03 {background-image: url(../images/sub/map_tit_bg03.png)}

/* 개인정보처리방침 */
.protect_pi {padding: 0 100px}
.protect_pi .tit_wrap {padding: 50px 0 70px 0}
.protect_pi .tit_wrap h4 {text-align: center; font-size: 38px; color: #282828; font-weight: 600}
.protect_pi .content_wrap {padding: 20px 35px}
.protect_pi .pi_tit {position: relative; font-size: 17px; font-weight:600; color: #282828; padding: 2px 0}
.protect_pi .pi_sub_box {padding: 15px 0; position: relative}
.protect_pi .pi_tit:before,
.protect_pi .pi_sub_box:before {content:""; display: block; width: 1px; height: 100%; position: absolute; left: 0; top: 1px; margin-left: -35px}
.protect_pi .pi_tit:before {background: #ed1818}
.protect_pi .pi_sub_box:before {background: #eaeaea}
.protect_pi .pi_para {font-size: 15px; line-height: 1.3; margin-top: 10px}
.protect_pi .pi_para:first-child {margin-top: 0}
.protect_pi .pi_sub_box h6 {font-size: 15px; font-weight: 400; color: #282828; margin-top: 12px}
.protect_pi .pi_sub_box h6:first-child {margin-top: 0}
.protect_pi .pi_list {margin-top: 10px}
.protect_pi .pi_list li {font-size: 15px; line-height: 1.3; margin-top: 6px}
.protect_pi .pi_list li:first-child {margin-top: 0}
.protect_pi ul.pi_list li {padding-left: 12px; background: url(../images/sub/li_blt01.gif) 0 7px no-repeat}
.protect_pi .pi_list .inner_box {display: block; padding: 6px; border: 1px solid #eaeaea; margin-top: 6px; color: #02437d; font-size: 14px}
.protect_pi .pi_tbl {border: 1px solid #ddd; margin-top: 10px}
.protect_pi .pi_tbl th {border: 1px solid #ddd; padding: 10px 26px; background: #f3f3f3}
.protect_pi .pi_tbl td {border: 1px solid #ddd; padding: 10px 26px}

/* MJH 연혁 */
.history h4 {line-height:140%; margin-bottom:25px}
.history h4 span {display:inline-block; padding:0 90px; background:url(../images/sub/his_titblt01.gif) no-repeat left 0, url(../images/sub/his_titblt02.gif) no-repeat right 0}
.history .his_tb {position:relative; padding-top:120px}
.history .his_tb .his_titbtn {position:absolute; top:10px; width:50%; text-align: center}
.history .his_tb .his_titbtn h5 a {display:block; color:#c6c6c6; font-size:2.143em; font-weight:400; padding-bottom:15px; line-height:140%; position:relative; border-bottom:1px solid #dadada}
.history .his_tb .on .his_titbtn h5::before {content:''; display:block; width:100%; height:4px; position:absolute; top:55px; left:0; background:linear-gradient(to right, #00b9aa, #004eff); z-index: 1}
.history .his_tb .his_titbtn h5 a:hover, .history .his_tb .on .his_titbtn h5 a {color:#282828} 
.history .his_tb .his_titbtn h5 span:hover a:after {content:'';display: block;position:absolute; top:55px; left:0;width:100%;height:4px;background:linear-gradient(to right, #00b9aa, #004eff);transform: scaleX(0);visibility: hidden;transform-origin:center;transition: all .3s ease}
.history .his_tb .his_titbtn h5 > a:after {content:""; display: block; position: absolute; left: 0; top: 55px; width: 0; height:4px; background:linear-gradient(to right, #00b9aa, #004eff); transition: width .5s}
.history .his_tb .his_titbtn h5:hover > a:after {width: 100%}
.history .his_tb .his01 .his_titbtn {left:0}
.history .his_tb .his02 .his_titbtn {left:50%}
.history .his_lst_box {position:relative; border-bottom:2px dotted #e7e7e7; padding:3px 10px 25px 200px; margin-bottom:25px}
.history .his_txtbox .his_lst_box:last-child {border-bottom:0; padding:3px 10px 0 200px; margin-bottom:0}
.history .his_lst_box .his_lst {background:url(../images/sub/his_line.gif) repeat-y left 0; padding-left:65px}
.history .his_lst_box .his_lst::before {content:''; display:block; position:absolute; left:200px; width:3px; height:20px; background:#0072ff}
.history .his_lst_box h6 {font-size:1.500em; font-weight:450; text-align:left; position:absolute; left:10px; top:0}
.history .his_lst_box .his_lst li {line-height:150%; text-align:left; padding-left:25px; padding-bottom:5px; background:url(../images/sub/his_blt.gif) no-repeat 0 6px; font-size:1.143em; color:#282828; font-weight:350}
.history .his_lst_box .his_lst li:last-child {padding-bottom:0}

/* MJH 조직도 */
.chartwrap {background:url(../images/sub/chart_line.gif) repeat-y center 0; position:relative}
.chartwrap .chabox {border-radius:5px 0 5px 0; padding:12px 5px; background:url(../images/sub/chart_gray.png) no-repeat right top; margin-bottom:20px; font-size:1.143em; font-weight:450; color:#fff}
.chartwrap .chabox.box01 {background-color:#1b69b1}
.chartwrap .chabox.box02 {background-color:#838283}
.chartwrap .chabox.box03 {background-color:#2d8af3}
.chartwrap .chabox.box04 {background-color:#41c19b}
.chartwrap .chabox.box05 {background-color:#c1c1c1}
.chartwrap .wrap {padding:10px; border-radius:5px; border:2px solid #ddd; margin-bottom:12px; margin-top:-5px; background:#fff}
.chartwrap .wrap li {line-height:150%}
.chartwrap .wrap span {font-size:1.071em; background:url(../images/sub/chart_blt.gif) no-repeat 0 8px; padding:0 15px}
.chartwrap .wrap p {background:#ddd; border-radius:5px; font-weight:450; padding:10px 5px; margin-bottom:10px}
.chartwrap .chagroup li:last-child .box04  {margin-bottom:0}
.chart .charttablet {display:none}

/* MJH 이용약관 */
.protect_m .txtwrap {font-size:1.071em; line-height:150%; font-weight:350; margin-bottom:10px}
.protect_m .pi_tit:before {background:#006cff}

/*2021조직도*/
.cz_chart{position: relative; margin-top:23px}
.cz_chart::after{content:""; clear: both; display: block; position: absolute; top:0; left:50%; width:1px; height:345px; background: #cdcdcd; z-index: 1}
.cz_chart .cz01, .cz_chart .cz02{position: relative; margin: 0 auto; border-radius: 50px; box-sizing: border-box; text-align: center; z-index:5}
.cz_chart .cz01{position: relative; max-width: 310px; padding: 20px 10px; margin-bottom:20px;background: #fff; border:3px solid #125fab; font-size: 20px; font-weight: 600}
.cz_chart .cz01::after{content:""; clear: both; display: block; position: absolute; top:-28px; left:50%; margin-left: -75px; width:152px; height: 37px; background:url(../images/sub/chart_logo.gif) no-repeat left top}
.cz_chart .cz02{display: block; width: 200px; padding: 18px 10px; background: #125fab; color:#fff; font-size: 18px;font-weight: 500}
.cz_chart .cz_box01{position: relative; float: right; width: 209px; margin:15px 20px 0 0}
.cz_chart .cz_box01::after{content:""; clear: both; display: block; position: absolute; top:18px; left:-408px; width:408px; height:1px; background: #cdcdcd; z-index: 1}
.cz_chart .cz_box01 .czb_tit{ padding: 12px 10px; margin-bottom: 5px; background: #989898; text-align: center; color:#fff; font-size: 16px; font-weight: 500}
.cz_chart .cz_box01 ul{padding: 12px; background:#efefef}
.cz_chart .cz_box01 ul li{padding:7px 0 7px 17px; background:url(../images/sub/blt_chart.gif) no-repeat 0 8px; font-size: 15px; font-weight: 500}
.cz_chart .cz_lstbox{position: relative; margin-top: 234px}
.cz_chart .cz_lstbox::after{content:""; clear: both; display: block; position: absolute; top:-30px; left:50%; width:957px; height: 1px; margin-left: -479px; background: #cdcdcd}
.cz_chart .cz_lstbox > ul > li{ float: left; width: 25%}
.cz_chart .cz_lstbox .lst_wrap{position: relative; width: 95%; margin: 0 auto}
.cz_chart .cz_lstbox .lst_wrap::after{content:""; clear: both; display: block; position: absolute; top:-30px; left:50%; width:1px; height:100%; background: #cdcdcd; z-index: 1}
.cz_chart .lst_wrap .lst_tit{position: relative; padding:15px 10px; margin-bottom: 12px; border-radius: 50px; background: #fff; border:3px solid #989898; text-align: center; font-weight: 500; font-size: 17px; box-sizing: border-box; z-index:5}
.cz_chart .lst_wrap .lst_tit::after{content:""; clear: both; display: block; position: absolute; top:-7px; left:50%; margin-left: -5px; width:11px; height: 11px; background:url(../images/sub/dot_chart.png) no-repeat left top}
.cz_chart .lst_wrap .lst_box {position: relative; margin: 10px; z-index:5}
.cz_chart .lst_wrap .czb_tit, .cz_chart .lst_wrap .lst_box ul li{padding: 10px; text-align: center; font-weight: 500}
.cz_chart .lst_wrap .czb_tit{background: #95b521; color:#fff; font-size: 15px}
.cz_chart .lst_wrap .lst_box ul li{margin:7px 0; background: #efefef; color:#000; font-size: 14px}
.cz_chart .lst_wrap .lst_box ul li.bg_col{background:#989898; color: #fff}

/* 고객사 */
.client.client_sub ul {float:left; width:20%; border:1px solid #d9d9d9; border-top:0; border-left:0; box-sizing:border-box}
.client.client_sub ul:first-child {border-left:1px solid #d9d9d9}
.client.client_sub ul li {border-collapse: separate; border-spacing: 0; border-top: 1px solid #d9d9d9; background:#f3f3f3; vertical-align: middle; text-align:center; box-sizing:border-box}
.client.client_sub ul li img {margin:0 auto; text-align:center}

/* MOBILE LAYOUT */
@media only screen and (max-width:980px) {

/* SUBVISUAL */
.subVisual .v_txt {width: 100%; right: 0; top:60px}
.subVisual .v_txt dd, .subVisual .v_txt dt{transform: scale(80%)}
.subVisual .visual_list .vimg {height: 150px}

/* SUBLEFT */
#subLeft {display: none}

/* subnavi */
.guide_wrap .naviArea > ul.navsize2  > li {width:50% !important}
.guide_wrap .naviArea > ul.navsize3  > li {width:33.3% !important}
.guide_wrap .naviArea > ul > li > a {overflow:hidden; padding-right:20px}
.guide_wrap .subMn li a {padding:6px 0 6px 6px}
.guide_wrap .subMn ul {padding:12px 10px}

/* PAGENAVI */ 
.guide_wrap .naviArea > ul > li > a {border-left: 1px solid #578dbe}
.guide_wrap .naviArea > ul > li:first-child > a {border: none}
.guide_wrap .btn_consult {display: none}

#tabNavi ul {border:0; border-top:1px solid #d9d9d9; height: auto; text-align: left}
#tabNavi li {display: block}
#tabNavi li a {display: block; padding: 10px; line-height: 1.2; border: 1px solid #ddd; border-top: 0; box-sizing: border-box}
#tabNavi .tab_tit {display: block; width: 100%; padding: 10px; border: 1px solid #ddd; position: relative; box-sizing: border-box}
#tabNavi .tab_tit:after {content:""; display: block; width: 10px; height: 6px; background: url(../images/sub/btn_arrow.gif) 0 0 no-repeat; position: absolute; right: 10px; top: 50%; margin-top: -3px; transition: transform .4s;}
#tabNavi .tab_tit.active:after {transform: rotate(180deg)}

/* 사업영역 웹/모바일 개발 */
.field01 .bg {display: none}

/* 사업영역 키즈캠퍼스 */
.berkly_list .berkly_img {float: left; max-width: 250px; margin: 0 10px 10px 0}
.berkly_list .num {clear: both}

#produceInfo .intro01 .introImg {height:342px}
#produceInfo .intro01 .introBox {padding:60px 0}
#produceInfo .intro01 .introBox h3 {font-size:2.769em}
#produceInfo .intro02 h3, #produceInfo .intro03 h3, #produceInfo .intro04 h3 {font-size:2.154em}
#produceInfo .intro03 ul li {width:50%}
#produceInfo .intro04 .project {width:280px}
#produceInfo .intro01 .introTxt, 
#produceInfo .intro02 .introTxt, 
#produceInfo .intro03 .introTxt, 
#produceInfo .intro04 .introTxt  {font-size:1.231em}

/* 비전 
.vision_tree .text_wrap {background: url(../images/sub/vision_tree_line.gif) 50% 0 repeat-y}
.vision_tree .text_wrap h5 {width: 100%; height: 40px; background: #1b69b1 url(../images/sub/vision_tree_tit.png) 50% 50% no-repeat; padding: 10px 0}
.vision_tree .text_wrap li {padding: 16px; text-align: center; color: #fff; margin-top: 30px}
.vision_tree .text_wrap dl {padding: 20px}
.vision_tree .text_wrap li:nth-child(1) {background: #fcd7cb}
.vision_tree .text_wrap li:nth-child(2) {background: #d9edd2}
.vision_tree .text_wrap li:nth-child(3) {background: #d9ecfa}
.vision_tree .text_wrap li:nth-child(1) dl {background: #f57a54}
.vision_tree .text_wrap li:nth-child(2) dl {background: #80c469}
.vision_tree .text_wrap li:nth-child(3) dl {background: #81c1ed}
.vision_tree .text_wrap li dt {font-size: 26px; font-weight: 500}
.vision_tree .text_wrap li dt:after {content:""; display: block; width: 40px; height: 2px; background: #fff; margin: 14px auto}
.vision_tree .text_wrap li dd {font-size: 15px; line-height: 150%}*/

/* 클라이언트 */
.client .client_list li {width: 33.3%}

/* 개인정보처리방침 */
.protect_pi {padding: 0}
.protect_pi .content_wrap {padding: 10px 20px}
.protect_pi .pi_tit:before, .protect_pi .pi_sub_box:before {margin-left: -20px}

/* MJH 연혁 */
.history h4 {margin-bottom:50px}
.history h4 span {display:inline-block; padding:0 50px; background:url(../images/sub/his_titblt01m.gif) no-repeat left 0, url(../images/sub/his_titblt02m.gif) no-repeat right 0}
.history .his_lst_box {padding:0 0 20px 0}
.history .his_txtbox .his_lst_box:last-child {padding: 0 0 0 0}
.history .his_lst_box h6 {position:inherit; left:0; margin-bottom:18px}
.history .his_lst_box .his_lst {background:none; padding-left:0}
.history .his_lst_box .his_lst::before {width:20px; height:3px; left:0; top:27px}
.history .his_tb .his_titbtn h5 a {font-size:1.786em}
.history .his_tb .on .his_titbtn h5::before, .history .his_tb .his_titbtn h5 > a:after {top:49px}
.history .his_lst_box h6 {font-size:1.286em}
.history .his_lst_box .his_lst li {font-size:1em; background: url(../images/sub/his_blt.gif) no-repeat 0 3px; padding-left:20px}
.history .his_tb {padding-top:100px}

/* MJH 조직도 */
.chartwrap .chair img {width:140px; height:140px; display:block; margin:0 auto 20px}
.chartwrap .wrap {border-radius:0 0 5px 5px; margin-bottom:20px}
.chartwrap .chabox.box02,
.chartwrap .chagroup li:nth-child(1) .chabox.box04,
.chartwrap .chagroup li:nth-child(2) .chabox.box05 {margin-bottom:5px; border-radius:5px 0 0 0}

/* 고객사 */
.client.client_sub ul {width:100%; border:0}
.client.client_sub ul:first-child  {border:0; border-top:1px solid #d9d9d9}
.client.client_sub ul li {border:0; border:1px solid #d9d9d9; border-top:0}

}

/* TABLET LAYOUT */
@media only screen and (min-width:981px) and (max-width:1302px) {

.subConWrap {padding: 20px 12px 50px}

/* SUBVISUAL */
.subVisual .v_txt {right: 30px}
.subVisual .slick-dots {left: auto; right: 190px; margin-left: 0}
.subVisual .slick-prev {left: auto; right: 347px}

/* PAGENAVI */
.guide_wrap .naviArea > ul > li{width: 250px}
.guide_wrap .naviArea > ul > li > a{border-right: 1px solid #578dbe}

/* SUBTOP */
.sub_top_wrap {padding: 15px 0}
.sub_top_wrap .sub_h3 {font-size: 23px}
.sub_top_wrap .sub_h3_eng {font-size: 14px}

/* TABMENU */
#tabNavi {margin-bottom: 35px}
#tabNavi li a {padding:0 12px}

/* 솔루션 */
.solution_tit .tit_box .slt_tit {font-size: 36px}
.solution_tit .tit_box .slt_sub {font-size: 16px}
.solution_bot .bot_tit {font-size: 36px}
.solution_bot .bot_sub {font-size: 16px}
.solution_bot .bot_list li {width: 50%; float: left; margin: 10px 0}
.solution_bot .bot_list li:first-child {margin: 10px 0}
.solution_bot .bot_list li dl {padding: 0 10px}
.solution_bot .price li {float: left; width: 33.3%}
.solution_bot .price li::before {width: 1px; height: 100px; margin: -50px 0 0 0; position: absolute; left: 0; top: 50%}
.solution_intro .si_tit {margin-bottom: 60px}
.solution_intro .si_tit h4 {font-size: 36px}
.solution_intro .si_tit p {font-size: 16px}
.solution_intro .si_obj li {float: left; width: 33.3%; padding: 0; margin: 0}
.solution_intro .si_obj li::before {left: 0; top: 28%}
.solution_contact {height: 220px}
.solution_contact h4 {text-align: right; font-size: 36px}
.solution_contact .contact_box {position: absolute; right: 50px; bottom: 50px; width: 240px; text-align: left}
.solution_contact .contact_box li {line-height: 1.6; font-size: 20px}
.solution_contact .contact_box .req_btn {text-align: center}

/* 공통타이틀 */
.common_tit_wrap h4 {font-size: 36px}
.common_tit_wrap p {font-size: 16px}

/* 회사소개 */
.intro_content li {display: inline-block; margin: 0 10px; font-size: 46px}
.overview_wrap {padding-left: 444px}
.overview_wrap .ow_bg {position: absolute; left: 0; top: 0}

/* 사업영역 웹/모바일 개발 */
.field01 {padding-right: 330px; position: relative}
.field01_tit {font-size: 25px}
.field01_tit br {display: block}
.field01_list li {float: left; width: 50%; margin: 0 0 20px 0}
.field01_list .field01_list_sub {min-height: 57px}
.field01_list li .fl_wrap {padding: 0 10px}
.field01_btns li {font-size: 18px}
.field02_chart01 li {width: 244px}
.field02_chart01 li:nth-child(1)::before,
.field02_chart01 li:nth-child(3)::before {top: 64px; width: 80px}
.field02_chart01 .ico {width: 150px}
.field02_chart01 .txt {font-size: 18px}
.field02_chart02 li {width: 126px}
.field02_btns li {display: inline-block; width: 300px; margin: 0 10px}

/* 사업영역 키즈캠퍼스 */
.berkly .bg {width: 50%; float: right}
.berkly_wrap {padding: 60px 50px}
.berkly_wrap dt {font-size: 20px}
.berkly_wrap dd {padding-right: 60%}
.berkly_tit {font-size: 26px}
.berkly_list li {float: left; width: 32%; margin: 0 0 0 2%}
.berkly_list li:first-child {margin-left: 0}
.berkly_list .sub {min-height: 32px}
.berkly_list .txt {min-height: 76px}

#produceInfo .intro01 .introImg {float:left; width:50%; height:405px; background:url(../images/sub/introImg_pc.jpg) no-repeat center center}
#produceInfo .intro01 .introBox {float:right; width:50%; height:315px; padding:45px 0; text-align:center}
#produceInfo .intro01 .introBox h3 {padding-bottom:32px; font-size:2.462em}
#produceInfo .intro01 .introBox ul li {width:50%; margin:10px 0}
#produceInfo .intro01 .introBox ul .i_icon01 {padding:0}
#produceInfo .intro01 .introBox ul .i_icon02 {padding:0}
#produceInfo .intro01 .introBox ul .i_icon03 {padding:0; background:none}
#produceInfo .intro01 .introBox ul .i_icon04 {padding:0}
#produceInfo .intro03 ul li { width:50%} 


/* 비전 */
.vision_tree .text_wrap {position: fixed; left: 0; top: 0; font-size: 0; line-height: 0; visibility: hidden}
.vision_tree .img_wrap {display: block; width: 90%; max-width: 894px; margin: 0 auto}
.vision_tree .img_wrap img {width: 100%}
.person_box li {width: 33.3%; margin-top: 0; float: left; box-sizing: border-box}
.person_box li:nth-child(1) {padding: 0 2% 0 0}
.person_box li:nth-child(2) {padding: 0 1%}
.person_box li:nth-child(3) {padding: 0 0 0 2%}
/* 비전2023 수정 */
.vision p.imgbox{height: 164px}
.vision p.imgbox img{width: 100%; height:auto}

/* 클라이언트 
.client .client_list li {width: 25%}*/

/* 오시는 길 */
.comming .txt_wrap {padding: 35px 45px 45px 45px}

/* 개인정보처리방침 */
.protect_pi {padding: 20px}
.protect_pi .content_wrap {padding: 15px 25px}
.protect_pi .pi_tit:before, .protect_pi .pi_sub_box:before {margin-left: -25px}

/* MJH 조직도 */
.chart .charttablet {display:block}
.chart .charttablet img {width:100%}
.chart .chartwrap {display:none}

/* 고객사 */
.client.client_sub ul {width:100%; border:0;}
.client.client_sub ul li {float:left; width:33.3%; border:0; border:1px solid #d9d9d9; border-left:0; border-bottom:0}
.client.client_sub ul li:first-child {border-left:1px solid #d9d9d9}
.client.client_sub .client_body {border-bottom:1px solid #d9d9d9}

/*2021조직도*/
.cz_chart{width: 966px; margin: 60px auto 30px}
.cz_chart .cz_box01::after{left:-255px; width:255px}
.cz_chart .cz_lstbox::after{width:724px; margin-left: -362px}

}

/* PC LAYOUT */
@media only screen and (min-width:1303px) {

.subConWrap {padding:40px 0 0; max-width: 1276px; margin: 0 auto 60px}
/* #subPage{width: 1256px; margin: 0 auto} */

/* SUBVISUAL */
.subVisual .v_txt {right: 50%; margin-right: -639px}
.subVisual .slick-dots {margin-left: 384px}
.subVisual .slick-prev {margin-left: 214px; left: 50%}
.subVisual .slick-next {margin-left: 550px; left: 50%}

/* PAGENAVI */
.guide_wrap .naviArea > ul > li {width: 290px; border-right: 1px solid #578dbe}

/* SUBLEFT */
#subLeft {left: 50%; margin-left: -635px}

/* SUBTOP */
.sub_top_wrap {padding: 15px 0; max-width: 1276px; margin: 0 auto}
.sub_top_wrap .sub_h3 {font-size: 21px; font-weight: 600}
.sub_top_wrap .sub_h3_eng {font-size: 13px}

/* TABMENU */
#tabNavi {margin:0 0 40px}

/* 솔루션 */
.solution_top {display: block; width: 100%; height: 580px;  background: url(../images/sub/solution_top_bg.jpg) 50% 0 no-repeat; position: relative}
.solution_top li {width: 510px; height: 288px; position: absolute; left: 50%; top: 61px; margin: 0 0 0 -259px}
.solution_tit .tit_box {padding: 60px 0 40px 0; margin-bottom: 35px}
.solution_tit .tit_box .slt_tit {font-size: 40px}
.solution_tit .tit_box .slt_sub {font-size: 18px}
.solution_slide .slick-current .cont_box {border: 3px solid #eaeaea}
.solution_slide .slick-current+.slick-active .cont_box {border: 3px solid #000}
.solution_slide .slick-current .btn_more a {background: #ddd}
.solution_slide .slick-current+.slick-active .btn_more a {background: #019fe9}
.solution_bot {padding: 100px 0 0 0}
.solution_bot .bot_tit {font-size: 40px}
.solution_bot .bot_sub {font-size: 18px; margin:  0 0 70px 0}
.solution_bot .bot_list li {width: 33.3%; float: left; margin: 10px 0}
.solution_bot .bot_list li:first-child {margin: 10px 0}
.solution_bot .bot_list li dl {padding: 0 10px}
.solution_bot .price li {float: left; width: 33.3%}
.solution_bot .price li::before {width: 1px; height: 100px; margin: -50px 0 0 0; position: absolute; left: 0; top: 50%}
.solution_intro .si_tit {margin-bottom: 60px}
.solution_intro .si_tit h4 {font-size: 40px}
.solution_intro .si_tit p {font-size: 18px}
.solution_intro .si_obj li {float: left; width: 33.3%; padding: 0; margin: 0}
.solution_intro .si_obj li::before {left: 0; top: 28%}
.solution_contact {height: 220px}
.solution_contact h4 {text-align: right; font-size: 36px; padding-right: 30px}
.solution_contact .contact_box {position: absolute; right: 80px; bottom: 50px; width: 240px; text-align: left}
.solution_contact .contact_box li {line-height: 1.6; font-size: 20px}
.solution_contact .contact_box .req_btn {text-align: center}

/* 공통타이틀 */
.common_tit_wrap h4 {font-size: 25px}
.common_tit_wrap p {font-size: 15px}

/* 회사소개 */
.intro_content li {display: inline-block; margin: 0 10px; font-size: 46px}
.overview_wrap {padding-left: 444px}
.overview_wrap .ow_bg {position: absolute; left: 0; top: 0}
.overview_wrap .sm {display: block; font-size: 14px; margin-top: 5px}

/* 사업영역 웹/모바일 개발 */
.field01 {padding-right: 660px; position: relative}
.field01_slide .slide_item {position: relative; height: 330px}
.field01_slide .slide_item dl {padding: 60px 50px}
.field01_slide .slide_item dt {font-size: 30px}
.field01_slide .slide_item dt:after {margin: 20px 0}
.field01_slide .slide_item .slide_txt {width: 400px; font-size: 16px}
.field01 .bg {width: 722px; margin-top: -180px}
.field01_tit {font-size: 30px}
.field01_tit br {display: block}
.field01_list li {float: left; width: 25%; margin: 0 0 20px 0}
.field01_list li .fl_wrap {padding: 0 10px}
.field01_btns li {font-size: 20px}

/* 사업영역 방과후 컴퓨터 교육 */
.field02 {padding: 0 700px 0 0; margin-bottom: 100px}
.field02 .bg {position: absolute; right: 0; bottom: 0; margin: 0}
.field02_list .fl02_sub {min-height: 38px}
.field02_chart01 {margin-bottom: 50px}
.field02_chart01 li {width: 400px}
.field02_chart01 li:nth-child(1)::before,
.field02_chart01 li:nth-child(3)::before {top: 90px; width: 180px}
.field02_chart01 .ico {width: 200px}
.field02_chart01 .txt {font-size: 18px}
.field02_chart02 {margin-bottom: 60px}
.field02_chart02 li {width: 200px; font-size: 16px}
.field02_btns li {display: inline-block; width: 340px; margin: 0 10px}

/* 사업영역 키즈캠퍼스 */
.berkly .bg {width: 637px; float: right}
.berkly_wrap {padding: 60px 50px}
.berkly_wrap dt {font-size: 24px}
.berkly_wrap dd {padding-right: 60%; font-size: 16px}
.berkly_tit {font-size: 36px}
.berkly_list li {float: left; width: 32%; margin: 0 0 0 2%}
.berkly_list li:first-child {margin-left: 0}
.berkly_list .sub {min-height: 32px}
.berkly_list .txt {min-height: 76px}
#produceInfo .intro01 {margin-bottom:30px}
#produceInfo .intro01 .introImg {float:left; width:50%; height:393px; background:url(../images/sub/introImg_pc.jpg) no-repeat center center}
#produceInfo .intro01 .introBox {float:right; width:50%; padding:72px 0; text-align:center}
#produceInfo .intro01 .introBox h3 {padding-bottom:62px}
#produceInfo .intro02 {margin-top:100px}
#produceInfo .intro02 .introList ul {*zoom:1}
#produceInfo .intro02 .introList ul:after {content:""; clear:both; display:block; height:0; visibility:none}
#produceInfo .intro02 .introList ul li {float:left; padding:0; padding-left:50px}
#produceInfo .intro02 .introList ul li.arrow01 {background:url(../images/sub/intro_arrow_right.gif) no-repeat right center; padding-right:80px; padding-left:0}
#produceInfo .intro02 .introList ul li.arrow02 {background:url(../images/sub/intro_arrow_left.gif) no-repeat right center; padding-right:80px}
#produceInfo .intro03 {margin-top:100px}
#produceInfo .intro03 ul li { width:25%}
#produceInfo .intro04 {margin-top:100px}

/* 서브페이지 레이어 */
.sub_layer .layer_content {max-width: 660px}
.layer_content_wrap {padding: 30px}
.layer_content_wrap .layer_tit h4 {padding: 0 0 20px 0; font-size: 28px}
.layer_content_wrap .close_btn {right: 30px; top:32px}
.layer_content_wrap .layer_noti {padding-top: 50px}
.layer_content_wrap .input_row.btn_row {margin-top: 20px}
.layer_content_wrap .btn_box {padding: 20px 0 0 0}
.pass_rule_tit {display: none}
.pass_rule .pass_rule_list {display: block !important; border: none}
.layer_content_wrap .layer_noti.init_bg {background: url(../images/sub/init_bg.png) 50% 0 no-repeat}
/*.layer_content_wrap .layer_noti.manager_bg {background: url(../images/sub/manager_bg.png) 50% 0 no-repeat}*/
.layer_content_wrap .layer_noti.security_bg {background: url(../images/sub/security_bg.png) 50% 0 no-repeat}
.layer_content_wrap .layer_noti.info_change_bg {background: url(../images/sub/info_change_bg.png) 50% 0 no-repeat}
.layer_content_wrap .row_left {float: left; width: 49%}
.layer_content_wrap .row_right {float: right; width: 49%}

/*담당자 정보확인*/
.layerinfo_change .layer_content_wrap{padding:20px}
.layerinfo_change .layer_tit h4 span{display:inline-block; padding:7px 0 7px 55px; background: url(../images/sub/manager_bg.png) left center no-repeat}
.layerinfo_change .layer_noti {padding-top:0; font-size:14px}
.layerinfo_change .noti_txt br{display:block}

/*유지보수 알림*/
.layer_content_wrap .layer_alimi{margin-top: 30px}
.layer_alimi ul li{float: left; width: 50%; margin-bottom: 0}

/* 비전 */
.vision_tree .text_wrap {position: fixed; left: 0; top: 0; font-size: 0; line-height: 0; visibility: hidden}
.vision_tree .img_wrap {display: block; width: 90%; max-width: 894px; margin: 0 auto 40px}
.vision_tree .img_wrap img {width: 100%}
.person_box li {width: 33.3%; margin-top: 0; float: left; box-sizing: border-box}
.person_box li:nth-child(1) {padding: 0 2% 0 0}
.person_box li:nth-child(2) {padding: 0 1%}
.person_box li:nth-child(3) {padding: 0 0 0 2%}
.person_box li br {display: block}
/* 오시는 길 */
.comming .txt_wrap {padding: 35px 45px 45px 45px; width: 49%; height: 455px; margin: 0}
.comming .txt_wrap.left_wrap {float: left}
.comming .txt_wrap.right_wrap {float: right}
/* MJH 조직도 */
.chart {width:1077px; margin:0 auto}
.chartwrap {background:url(../images/sub/chart_bg.gif) no-repeat 4px 153px}
.chartwrap .chabox {width:247px; height:62px; line-height:62px; padding:0; font-size:1.714em}
.chartwrap .chabox.box01 {margin:40px auto 258px}
.chartwrap .wrap {width:247px; margin-top:-7px; box-sizing:border-box}
.chartwrap .wrap li {text-align:left; line-height:180%}
.chartwrap .wrap span {background: url(../images/sub/chart_blt.gif) no-repeat 0 10px; font-size:1.143em; color:#000; font-weight:350}
.chartwrap .side {position:absolute; right:159px; top:311px}
.chartwrap .chagroup > ul > li {float:left; width:25%}
.chartwrap .chagroup > ul > li > div > p {margin:0 auto 20px}
.chartwrap .chagroup > ul > li > div > div {margin:-7px auto}
.chartwrap .chabox.box05 {margin:-7px auto 20px}
.chartwrap .side .wrap {padding:15px}
.chartwrap .wrap p {font-size:1.143em}
}

/* LOWSET FIX */
@media only screen and (max-width:1120px) {
/* 비전 */
.person_box .person_wrap dt:after{margin: 12px auto }
.vision_tree .img_wrap img {width: 100%}
.person_box li {width: 100%; margin: 0 0 20px; float: none; text-align: center}
/* 비전2023 수정 */
.vision p.imgbox{width: 320px; height: 155px; margin: 0 auto 10px}
.vision p.imgbox img{height: 100%}
}

@media only screen and (max-width:960px) {
/* 비전2023 수정 */
.vision_tree2 .text_wrap{position: relative; height: auto; background: none}
.vision_tree2 .vision_logo{position: relative; top:0; left:0; margin:0 0 20px; text-align: center}
.vision_tree2 ul li{position: relative; margin: 0 0 20px}
.vision_tree2 .vs_item1{top:0; left:0; margin-left:0}
.vision_tree2 .vs_item2{top:0; right:0; margin-right:0}
.vision_tree2 .vs_item3{bottom:0;  left:0; margin-left:0}
.vision_tree2 ul li dl{position: relative; width: 100%; text-align: center}
.vision_tree2 ul li dt img{transform: scale(85%)}
.vision_tree2 ul li.vs_item3 dt{position: relative; top:0; left:0}
.vision_tree2 ul li dd{margin-top: -6px; border-radius:30px}
.vision_tree2 ul li.vs_item1 dd{border-radius: 30px}
}

@media only screen and (max-width:500px) {
.subVisual .v_txt dt {font-size: 20px}
.subVisual .v_txt dd {font-size: 14px}
.field01_btns li {width: 100%}
.field02_chart01 li {display: block; margin: 20px auto}
.field02_chart01 li::before {display: none !important}
.field02_chart02 li {width: 100%; margin: 10px 0}
.field02_chart02 li::before {width: 1px; height: 30px; left: 50%; top: 0; margin: -26px 0 0 -0.5px; z-index: 20}
.berkly_list .berkly_img {max-width: 500px; float: none}
/* 오시는길 */
.comming .find_road li a {width: 123px}
}

@media only screen and (max-width:996px) {
#sub_guide .btn_consult{display:none}
/*2021조직도-2021.05.14 KYJ추가*/
.cz_chart{position: relative;width: 700px; margin: 60px auto 30px}
.cz_chart::after{height: 340px}
.cz_chart .cz01{font-size: 17px}
.cz_chart .cz02{ font-size: 16px}
.cz_chart .cz_box01{position: relative; float: none; width: 209px; margin:15px auto; z-index: 5}
.cz_chart .cz_box01::after{display: none}
.cz_chart .cz_lstbox{ margin-top: 63px}
.cz_chart .cz_lstbox::after{width:351px; margin-left: -175px}
.cz_chart .cz_lstbox > ul > li{width: 50%; margin-bottom: 20px}
.cz_chart .lst_wrap .lst_tit{font-size: 15px}
}

@media only screen and (max-width:730px) {
/*2021조직도-2021.05.14 KYJ추가
.cz_chart{width: 400px}
.cz_chart .cz_lstbox::after{width:200px; margin-left: -99px}*/

.cz_chart{width:340px}
.cz_chart .cz_lstbox::after{width:170px; margin-left: -85px}
}

/* LOWSET FIX */
@media only screen and (min-width:0px) and (max-width:540px) {
#produceInfo .intro01 .introBox h3 {font-size:2.305em}
#produceInfo .intro03 ul li { width:100%}
}

@media only screen and (min-width:0px) and (max-width:600px) {
#produceInfo .intro01 .introBox h3 {padding-bottom:36px}
#produceInfo .intro01 .introBox ul li {width:50%; margin:10px 0}
#produceInfo .intro01 .introBox ul .i_icon01 {padding:0}
#produceInfo .intro01 .introBox ul .i_icon02 {padding:0}
#produceInfo .intro01 .introBox ul .i_icon03 {padding:0; background:none}
#produceInfo .intro01 .introBox ul .i_icon04 {padding:0}
}

@media only screen and (min-width:768px) and (max-width:930px) {
#produceInfo .intro01 .introBox h3 {padding:0 0 30px 0; font-size:2.154em}
#produceInfo .intro02 h3 {font-size:2.923em}
}

@media only screen and (min-width:0px) and (max-width:400px) {
.add_item .add_text .add_tit {font-size: 18px}
.add_item .add_text .add_sub {font-size: 14px; padding:0 20px 20px; word-break:keep-all} 
.layer_content_wrap .btn_box button {width: 100px}
}

/*개인정보 및 폰트 저작권안내*/
.c2zinfo .info_tb {position:relative}
.c2zinfo .info_tb .czinfo_btn {position:absolute; top:10px; width:50%; text-align: center}
.c2zinfo .info_tb .czinfo_btn a {display:block; color:#797979; font-size:20px; font-weight:500; padding-bottom:15px; line-height:140%; position:relative; border-bottom:1px solid #dadada}
.c2zinfo .info_tb .on .czinfo_btn a::before, .c2zinfo .info_tb .czinfo_btn a span:hover a:after, .c2zinfo .info_tb .czinfo_btn > a:after
{content:''; display:block; position:absolute; top:43px; left:0; height:3px; width:100%; background:linear-gradient(to right, #00b9aa, #004eff); z-index: 1}
.c2zinfo .info_tb .czinfo_btn a:hover, .c2zinfo .info_tb .on .czinfo_btn a {color:#000} 
.c2zinfo .info_tb .czinfo_btn a span:hover a:after {transform: scaleX(0);visibility: hidden;transform-origin:center;transition: all .3s ease}
.c2zinfo .info_tb .czinfo_btn > a:after {width: 0; transition: width .5s}
.c2zinfo .info_tb .czinfo_btn:hover > a:after {width: 100%}
.c2zinfo .czinfo01 .czinfo_btn{left:0}
.c2zinfo .czinfo02 .czinfo_btn{left:50%}
/*내용*/
.c2z_info .czif_tit{position: relative; padding: 15px; margin-bottom: 20px; border-radius: 30px 3px 3px 3px; background: #ff5842; font-size: 18px; font-weight: 500; color:#fff}
.c2z_info .czif_tit .num{position: absolute; top:-15px; display: block; width: 52px; height: 52px; line-height: 52px; border-radius: 50%; border:2px solid #ff5842; font-size: 20px; background: #fff; color:#000; font-weight: 600; text-align: center}
.c2z_info .czif_tit .txt{display: block; padding-left: 70px}
.c2z_info .czif_tb{margin: 10px 0 20px}
.c2z_info .czif_tb .tb_tit{margin-bottom: 10px; font-size: 16px; font-weight: 600}
.c2z_info .czif_tb .tb_tit span{display: inline-block; width: 35px; height: 35px; margin-right: 5px; line-height: 35px; border-radius: 50%; background: #ff5842; text-align: center; color:#fff}
.c2z_info .czif_tb .txt_line{padding: 10px; border:1px solid #cecece; font-size: 15px; line-height: 150%}
.c2z_info .czif_tb .point_box1{margin-top: 13px; padding: 10px 15px; background: #f1f1f1}
.c2z_info .point_box1 dl{padding:5px 0 5px 65px; background: url(../images/sub/ico_security.gif) left top no-repeat}
.c2z_info .point_box1 dt{display: inline-block; padding: 2px 30px; margin-bottom: 10px; border-radius: 50px; border:2px solid #6e6e6e; font-weight: 600}
.c2z_info .czif_tb .txt_line .deltit{display: inline-block; padding: 2px 30px; margin-bottom: 10px; border-radius: 50px; border:2px solid #ff5842; font-weight: 600}
.c2z_info .czif_tb .txt_line .deltit span{display: block; padding-left:25px; background: url(../images/sub/ico_delete.gif) left center no-repeat}
.c2z_info.czinfo02 .czif_tit{background: #328ecf}
.c2z_info.czinfo02 .czif_tit .num{border-color: #328ecf}
.c2z_info.czinfo02 .czif_tb .tb_tit span{background: #328ecf}
.c2z_info.czinfo02 .post_type{position: relative; margin-top: 10px; background: #929292}
.c2z_info.czinfo02 .post_type.deltype{background: #16486c}
.c2z_info.czinfo02 .post_type .tit{position: absolute; top:50%; left:0; margin-top: -11px; width: 166px; text-align: center; color:#fff}
.c2z_info.czinfo02 .post_type.deltype .tit{margin-top: -23px}
.c2z_info.czinfo02 .post_type .txt{margin-left: 166px; padding: 10px;  background:#f1f1f1}
.c2z_info .czif_warning{padding: 15px 15px 15px 45px; background:url(../images/sub/ico_warning.gif) 10px center no-repeat #328ecf; font-weight: 500; font-size: 15px; color:#fff; line-height: 150%}
.c2z_info .czif_warning span{font-weight: 600; color:#fff048}
@media only screen and (max-width:768px) {
.c2zinfo .info_tb {padding-top:80px}
.curiosity_page {margin-top:25px}
.curiosity_page .info_tb{padding-top:0}
.c2zinfo .info_tb .czinfo_btn a {font-size:16px; letter-spacing: -1px}   
.c2zinfo .info_tb .on .czinfo_btn a::before, .c2zinfo .info_tb .czinfo_btn a span:hover a:after, .c2zinfo .info_tb .czinfo_btn > a:after{top:37px} 
/*내용*/
.c2z_info .common_tit_wrap p{padding: 0; font-size: 14px}
.c2z_info .czif_tit{ margin-bottom: 10px; font-size: 15px}
.c2z_info .czif_tit .num{width: 42px; height: 42px; line-height: 42px; font-size: 17px}
.c2z_info .czif_tit .txt{display: block; padding-left: 55px}
.c2z_info .czif_tb{margin: 0 0 10px}
.c2z_info .czif_tb .tb_tit{font-size: 15px}
.c2z_info .czif_tb .txt_line{font-size: 14px}
.c2z_info.czinfo02 .post_type .tit{width: 120px}
.c2z_info.czinfo02 .post_type .txt{margin-left: 120px}
.c2z_info .czif_warning{font-size: 13px}
}

/*신학기 유지보수 안내*/
.new_semester .common_tit_wrap p{margin-bottom: 15px; padding: 0}
.new_semester .common_tit_wrap p:last-child{margin-bottom: 0}
.new_semester .prio_tit{padding: 13px; margin-bottom: 5px; background: #359755; text-align: center; color:#fff; font-size: 18px}
.new_semester .prio_top{margin: 10px 0 15px; padding: 10px 15px; background: #f1f1f1}
.new_semester .prio_top dl{padding:5px 0 5px 65px; background: url(../images/sub/ico_semester.gif) left 5px no-repeat; font-size: 15px}
.new_semester .prio_top dt{display: inline-block; padding: 5px 30px; margin-bottom: 8px; border-radius: 50px; border:2px solid #6e6e6e; font-weight: 600}
.new_semester .prio_top dd{line-height: 150%}
.new_semester .prio_top dd a:hover{text-decoration: underline}
.new_semester .prio_lst > ul > li{border-bottom: 1px solid #c6c6c6; padding-bottom: 15px; margin-bottom: 20px}
.new_semester .prio_lst dt{margin-bottom: 15px; font-size: 18px; font-weight: 600}
.new_semester .prio_lst dt span.num{display:inline-block; width: 60px; height: 40px; line-height: 40px; padding-left: 14px; margin-right: 10px; border-radius: 0 20px 20px 0; background: #2c4d69; font-size: 20px; color:#fff; box-sizing: border-box}
.new_semester .prio_lst dt span.point{font-size: 13px; color:#fd1e1e}
.new_semester .prio_lst dd{margin: 0 10px; padding-left: 18px; background: url(../images/sub/blt_semester.gif) left 5px no-repeat; font-size: 15px; font-weight: 500; line-height: 150%}
.new_semester .rule_info dd{padding: 0; background: none}
.new_semester .rule_info li{margin-bottom: 8px}
.new_semester .rule_info li:last-child{margin-bottom: 0}
.new_semester .rule_info li span.tit{display: inline-block; min-width: 210px; padding: 3px; margin-right: 7px; border-radius: 50px; border:2px solid #bdbdbd; text-align: center; font-weight: 600}
@media only screen and (max-width:768px) {
.new_semester .common_tit_wrap p{font-size: 14px}
.new_semester .prio_tit{padding: 10px; font-size: 15px}
.new_semester .prio_top dl{font-size: 14px}
.new_semester .prio_lst > ul > li{border-bottom: 1px solid #c6c6c6; padding-bottom: 10px; margin-bottom: 15px}
.new_semester .prio_lst dt{margin-bottom: 15px; font-size: 15px; font-weight: 600}
.new_semester .prio_lst dt span.num{width: 50px; height: 30px; line-height: 30px; padding-left: 12px; font-size: 16px}
.new_semester .prio_lst dt span.point{font-size: 13px}
.new_semester .prio_lst dd{font-size: 14px}
.new_semester .rule_info li span.tit{display: block; margin-bottom: 8px}
}

/* 유지보수 절차안내 */
.repair_intro .intro_content {padding: 70px 20px; margin-bottom: 50px; background: url(../images/sub/repair_intro_bg.jpg) 50% 0 no-repeat}
.repair_intro .intro_content li {color: #fff; font-size: 35px; margin: 0 20px}
.repair_intro .repair_step{margin-bottom: 50px}
.repair_intro .repair_step > ul:after{content:""; clear: both; display: block}
.repair_intro .repair_step > ul > li{float: left; width: 25%; text-align: center}
.repair_intro .repair_step .repstep{position: relative; width: 80%; margin: 0 auto}
.repair_intro .repair_step .repstep::after{content:""; clear: both; display: block; position: absolute; bottom:50%; right:-47px; width:38px; height: 38px; margin-bottom: -25px; background: url(../images/sub/replst_arw.png) 50% 0 no-repeat}
.repair_intro .repair_step li:last-child .repstep::after{display: none}
.repair_intro .repstep .tit{position: relative; padding: 15px 5px; margin-bottom: 8px; border-radius:10px 10px 0 0; font-size: 16px; font-weight: 600; color:#fff}
.repair_intro .repstep.step1 .tit{background:#4db2cb}
.repair_intro .repstep.step2 .tit{background:#52a7e2}
.repair_intro .repstep.step3 .tit{background:#3690cf}
.repair_intro .repstep.step4 .tit{background:#1d6ea6}
.repair_intro .repstep .tit::after{content:""; clear: both; display: block; position: absolute; bottom:-30px; right:8px; width:53px; height:47px}
.repair_intro .repstep.step1 .tit::after{background: url(../images/sub/replst_ico1.png) 50% 0 no-repeat}
.repair_intro .repstep.step2 .tit::after{background: url(../images/sub/replst_ico2.png) 50% 0 no-repeat}
.repair_intro .repstep.step3 .tit::after{background: url(../images/sub/replst_ico3.png) 50% 0 no-repeat}
.repair_intro .repstep.step4 .tit::after{background: url(../images/sub/replst_ico4.png) 50% 0 no-repeat}
.repair_intro .repstep .txt{padding: 30px 10px; border-radius:0 0 3px 3px; background: #ececec; font-size: 14px; line-height: 150%}
.repair_intro .repair_limit ol li {position: relative; padding: 10px; margin-bottom: 5px; border:1px solid #cecece}
.repair_intro .repair_limit span.num{position: absolute; top:10px; left:10px; display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 5px; background: #365265; text-align: center; font-weight: 600; color:#fff; font-size: 15px}
.repair_intro .repair_limit p.txt{padding: 10px 0; margin-left: 50px; font-size: 15px; font-weight: 600}
.repair_intro .repair_limit p.txt span{font-size: 13px; color:#575757}
@media only screen and (max-width:1100px) {
.repair_intro .intro_content { margin-bottom: 30px}
.repair_intro .intro_content li {color: #fff; font-size: 25px; margin: 0 10px}
.repair_intro .repair_step > ul > li{float:none; width: 100%; margin-bottom: 50px}
.repair_intro .repair_step > ul > li:last-child{margin-bottom: 0}
.repair_intro .repair_step .repstep{width: 100%}
.repair_intro .repair_step .repstep::after{bottom:0; right:50%; margin:0 -20px -45px 0; background: url(../images/sub/replst_arw_m.png) 50% 0 no-repeat}
.repair_intro .repstep .txt{padding: 15px 10px} 
}

/* 제작절차안내 */
.process_intro .process_step{position: relative; margin-bottom: 50px}
.process_intro .process_step::after{content:""; clear: both; display: block; position: absolute; top:50%; left:5%; width: 90%; height: 40px; margin-top: -17px; background: #ebebeb}
.process_intro .process_step ul:after{content:""; clear: both; display: block}
.process_intro .process_step ul li{position: relative; float: left; width: 16.6%}
.process_intro .process_step .prostep{position: relative; width: 176px; height: 176px; margin: 0 auto; border-radius: 50%; border:9px solid #ccc; background: #fff; box-sizing: border-box; text-align: center; z-index: 5}
.process_intro .process_step .prostep::after{content:""; clear: both; display: block; position: absolute; bottom:50%; right:-35px; width: 15px; height: 22px; margin-bottom: -13px; background: url(../images/sub/prod_arw1.gif) 50% 0 no-repeat}
.process_intro .process_step .prostep.step6::after{display: none}
.process_intro .prostep.step1{border-color:#50cbb2 !important}
.process_intro .prostep.step2{border-color:#43b5b9 !important}
.process_intro .prostep.step3{border-color:#4db2cb !important}
.process_intro .prostep.step4{border-color:#52a7e2 !important}
.process_intro .prostep.step5{border-color:#3690cf !important}
.process_intro .prostep.step6{border-color:#1d6ea6 !important}
.process_intro .prostep .num{margin-top:28px;  font-size: 17px; font-weight: 600}
.process_intro .prostep .txt{padding-top: 52px; margin-top:13px; background-repeat: no-repeat; background-position:center top; font-size: 16px; font-weight: 600}
.process_intro .prostep.step1 .txt{background-image: url(../images/sub/prod_step1.gif)}
.process_intro .prostep.step2 .txt{background-image: url(../images/sub/prod_step2.gif)}
.process_intro .prostep.step3 .txt{background-image: url(../images/sub/prod_step3.gif)}
.process_intro .prostep.step4 .txt{background-image: url(../images/sub/prod_step4.gif)}
.process_intro .prostep.step5 .txt{background-image: url(../images/sub/prod_step5.gif)}
.process_intro .prostep.step6 .txt{background-image: url(../images/sub/prod_step6.gif)}
.process_intro .prostep.step1 .num{color:#50cbb2}
.process_intro .prostep.step2 .num{color:#43b5b9}
.process_intro .prostep.step3 .num{color:#4db2cb}
.process_intro .prostep.step4 .num{color:#52a7e2}
.process_intro .prostep.step5 .num{color:#3690cf}
.process_intro .prostep.step6 .num{color:#1d6ea6}
.process_intro .protb_box{margin-bottom: 30px}
.process_intro .protb_tit{position: relative; padding: 15px; margin-bottom: 5px; border-radius: 30px 3px 3px 3px; background: #ccc; font-size: 18px; font-weight: 500; color:#fff}
.process_intro .protb_box.protb1 .protb_tit{background:#50cbb2}
.process_intro .protb_box.protb2 .protb_tit{background:#43b5b9}
.process_intro .protb_box.protb3 .protb_tit{background:#4db2cb}
.process_intro .protb_box.protb4 .protb_tit{background:#52a7e2}
.process_intro .protb_box.protb5 .protb_tit{background:#3690cf}
.process_intro .protb_box.protb6 .protb_tit{background:#1d6ea6}
.process_intro .protb_tit .num{position: absolute; top:-15px; display: block; width: 52px; height: 52px; line-height: 52px; border-radius: 50%; border:2px solid #ccc; font-size: 20px; background: #fff; color:#000; font-weight: 600; text-align: center}
.process_intro .protb_box.protb1 .num{border-color:#50cbb2}
.process_intro .protb_box.protb2 .num{border-color:#43b5b9}
.process_intro .protb_box.protb3 .num{border-color:#4db2cb}
.process_intro .protb_box.protb4 .num{border-color:#52a7e2}
.process_intro .protb_box.protb5 .num{border-color:#3690cf}
.process_intro .protb_box.protb6 .num{border-color:#1d6ea6}
.process_intro .protb_tit .txt{display: block; padding-left: 70px}
.process_intro .protb_box .protb_txt{padding: 10px 10px 10px 70px; border:1px solid #cecece; background-repeat: no-repeat; background-position:15px center; font-size: 15px; line-height: 150%}
.process_intro .protb_box.protb1 .protb_txt{background-image: url(../images/sub/prod_step1.gif)}
.process_intro .protb_box.protb2 .protb_txt{background-image: url(../images/sub/prod_step2.gif)}
.process_intro .protb_box.protb3 .protb_txt{background-image: url(../images/sub/prod_step3.gif)}
.process_intro .protb_box.protb4 .protb_txt{background-image: url(../images/sub/prod_step4.gif)}
.process_intro .protb_box.protb5 .protb_txt{background-image: url(../images/sub/prod_step5.gif)}
.process_intro .protb_box.protb6 .protb_txt{background-image: url(../images/sub/prod_step6.gif)}
.process_intro ul.detail_txt li{margin-top: 7px}
.process_intro ul.detail_txt span.tit{display: inline-block; width: 177px; margin-right: 10px; border-radius: 50px; border:2px solid #c0c; text-align: center}
.process_intro .protb_box.protb3 ul.detail_txt span.tit{border-color: #4db2cb}
.process_intro .protb_box.protb5 ul.detail_txt span.tit{border-color: #3690cf}
.process_intro ul.detail_step::after{content:""; clear: both; display: block}
.process_intro ul.detail_step li{float: left; width: 20%; box-sizing: border-box}
.process_intro ul.detail_step li span{position: relative; display: block; width: 90%; padding: 20px 0; margin: 0 auto; border-radius: 15px; border:2px solid #ccc; box-sizing: border-box; text-align: center}
.process_intro ul.detail_step li span::after{content:""; clear: both; display: block; position: absolute; bottom:50%; right:-20px; width: 10px; height: 14px; margin-bottom: -7px; background: url(../images/sub/prod_arw2.gif) 50% 0 no-repeat}
.process_intro ul.detail_step li:last-child span::after{display: none}
@media only screen and (max-width:1300px) {
/* 제작절차안내 */
.process_intro .process_step{margin-bottom: 30px}  
.process_intro .process_step::after{display: none}
.process_intro .process_step ul:after{content:""; clear: both; display: block}
.process_intro .process_step ul li{width: 33.3%}  
.process_intro .process_step .prostep{position: relative; width: 95%; height: 130px; margin: 0 auto 10px; border-radius: 20px; border:4px solid #ccc}
.process_intro .process_step .prostep::after{display: none}
.process_intro .process_step .prostep.step6::after{display: none}
.process_intro .prostep .num{margin-top:10px;  font-size: 16px}
.process_intro .prostep .txt{padding-top: 52px; margin-top:13px; font-size: 14px}
.process_intro ul.detail_step li{float: none; width: 100%; margin-bottom: 20px}
.process_intro ul.detail_step li:last-child{margin-bottom: 0}
.process_intro ul.detail_step li span{ width: 100%; padding: 5px}
.process_intro ul.detail_step li span::after{bottom:-18px; right:50%; width: 14px; height: 10px; margin:0 -7px 0 0; background: url(../images/sub/prod_arw2_m.gif) 50% 0 no-repeat}
.process_intro .protb_tit{font-size: 15px}
.process_intro .protb_tit .num{width: 42px; height: 42px; line-height: 42px; font-size: 17px}
.process_intro .protb_box .protb_txt{font-size: 14px}
.process_intro ul.detail_txt span.tit{display:block; width: 100%; margin: 0 0 5px}
}

/* 썸네일 이미지 회전현상 관련 안내 */
.img_rotate .top_info{padding: 10px; border-radius: 10px; background: #f1f1f1; text-align: center; font-size: 14px}
.img_rotate .top_info span{display: inline-block; padding: 8px 25px; margin-right: 5px; border-radius: 50px; background: #5a5a5a; color:#fff}
.img_rotate .rotate_top{margin: 40px 0 20px; border-top:2px solid #d7d7d7; border-bottom:2px solid #d7d7d7; text-align: center; font-size: 14px; line-height: 150%}
.img_rotate .rotate_top .tit{max-width: 460px; padding: 10px; margin: -17px auto 0; border-radius: 50px; background: #234560; color:#fff}
.img_rotate .rotate_top .txt{margin: 20px 10px}
.img_rotate .ex_img{margin-bottom: 20px; text-align: center}
.img_rotate .rotate_lst{font-size: 14px}
.img_rotate .rotate_lst dt{position: relative; padding-left: 38px; margin-bottom: 10px; font-size: 15px; line-height: 150%; font-weight: 600}
.img_rotate .rotate_lst dt .num{position: absolute; top:-4px; left:0; display:block; width: 28px; height: 28px; line-height: 28px; margin-right: 5px; border-radius: 50%; background: #1a364c; text-align: center; font-weight: 600; color:#fff; font-size: 14px}
.img_rotate .rotate_lst dd{position: relative; padding: 15px; margin-bottom: 25px; border:1px solid #cecece}
.img_rotate .rotate_lst dd .img{display: block; text-align: center}
.img_rotate .rotate_lst dd .reason1{line-height: 150%; margin-bottom: 20px; text-align: center; font-size: 15px}
.img_rotate .rotate_lst dd .reason2{line-height: 150%; padding: 15px; margin-top: 20px; border-radius: 10px; background: #f1f1f1}
.img_rotate .rotate_answer{margin-top: 60px}
.img_rotate .rotate_answer .rotate_top .tit{background:#2697cc}
.img_rotate .rotate_answer .rotate_lst dt .num{background:#2697cc}
.img_rotate .rotate_answer dd ol li{line-height: 150%}
.img_rotate .rotate_answer .img{margin-top: 15px}
.img_rotate .btm_txt{line-height: 150%; text-align: center; font-size: 15px}
@media only screen and (max-width:995px) {
.img_rotate .rotate_lst dt{font-size: 14px}
.img_rotate .rotate_lst dt br{display: none}
.img_rotate .rotate_answer .img img{width: 100%; height: auto}   
.img_rotate .rotate_lst dd .reason1, .img_rotate .btm_txt{font-size: 14px}
}
@media only screen and (max-width:825px) {
.img_rotate .top_info span{display:block; margin: 0 0 10px}
.img_rotate .rotate_lst dd .img img{width: 100%; height: auto}   
}
@media only screen and (max-width:480px) {
.img_rotate .ex_img img{width: 100%; height: auto}   
}

/* 학급홈페이지 초기화관련안내 */
.home_clear .top_info{padding: 10px; border-radius: 10px; background: #f1f1f1; text-align: center; font-size: 14px}
.home_clear .top_info span{display: inline-block; padding: 8px 25px; margin-right: 5px; border-radius: 50px; background: #5a5a5a; color:#fff}
.home_clear .clear_top{margin: 40px 0 40px; border-top:2px solid #d7d7d7; border-bottom:2px solid #d7d7d7; text-align: center; font-size: 14px; line-height: 150%}
.home_clear .clear_top .tit{max-width: 460px; padding: 10px; margin: -17px auto 0; border-radius: 50px; background: #ff6b49; color:#fff}
.home_clear .clear_top .txt{margin: 20px 10px}
.home_clear .clear_top ol{margin: 15px; padding: 15px; border-radius: 10px; background: #f1f1f1; line-height: 150%; text-align: left}
.home_clear .clear_top ol li{margin-bottom: 7px}
.home_clear .clear_top ol li p{font-size: 13px; color:#404040}
.home_clear .clear_top ol li:last-child{margin-bottom: 0}
.home_clear .clear_lst{font-size: 14px}
.home_clear .clear_lst dt{position: relative; padding-left: 38px; margin-bottom: 10px; font-size: 15px; line-height: 150%; font-weight: 600}
.home_clear .clear_lst dt .num{position: absolute; top:-4px; left:0; display:block; width: 28px; height: 28px; line-height: 28px; margin-right: 5px; border-radius: 50%; background: #1a364c; text-align: center; font-weight: 600; color:#fff; font-size: 14px}
.home_clear .clear_lst dd{position: relative; padding: 15px; margin-bottom: 25px; border:1px solid #cecece}
.home_clear .clear_lst dd .img{display: block; text-align: center}
.home_clear .clear_lst dd .reason{line-height: 150%; padding: 10px; margin-top: 20px; border-radius: 10px; background: #f1f1f1; text-align: center}
.home_clear .clear_answer{margin-top: 60px}
.home_clear .clear_answer .clear_top .tit{background:#2697cc}
.home_clear .clear_answer .clear_lst dt .num{background:#2697cc}
.home_clear .clear_answer dd ol li{line-height: 150%}
.home_clear .clear_answer .img{margin-top: 15px}
.home_clear .btm_txt{line-height: 150%; text-align: center; font-size: 15px}
@media only screen and (max-width:978px) {
.home_clear .clear_lst dt{font-size: 14px}
.home_clear .clear_lst dt br{display: none}
.home_clear .top_info span{display:block; margin: 0 0 10px}
.home_clear .clear_lst dd .img img{width: 100%; height: auto}   
}

/* 자주하는 질문 상단타이틀 테블릿 */
@media only screen and (min-width: 981px) and (max-width: 1302px){
.curiosity_page .common_tit_wrap h4{font-size: 25px}
}

.passrule_lst{padding:10px; margin-bottom:10px; border-radius:5px; background:#f1f1f1; line-height:130%}
.passrule_lst li{margin-bottom:3px;}
.passrule_lst li:last-child{margin-bottom:0}


/* 관리자일때 서브페이지 넓이조정 */
#subRight.swide .sub_top_wrap{max-width:1500px}
#subRight.swide .subConWrap{max-width:1500px}
#subRight.swide .repair_table table .numcell{width:5%}
#subRight.swide .repair_table table .servercell{width:4%}
#subRight.swide .repair_table table .orgcell{width:9%}
#subRight.swide .repair_table table .statucell{width:4%}
#subRight.swide .repair_table table .namecell{width:6%}
#subRight.swide .repair_table table .startcell{width:7%}
#subRight.swide .repair_table table .filecell{width:4%}
#subRight.swide .repair_table table .numtype{font-size:12px; letter-spacing:-0.5px}

/* MOBILE LAYOUT */
@media only screen and (max-width:980px) {
#subRight.swide .repair_table table .orgcell{width:20%}
}

/* 견적및상담요청안내-상단안내문구 변경*/
.counsel_info{position:relative; min-height:92px; width:100%; padding: 13px; border:1px solid #dedede; margin-bottom:20px; box-sizing: border-box}
.counsel_info .info_tit{width: 150px; text-align: center; font-size: 15px; font-weight: 600}
.counsel_info .info_tit span{display: block; padding-top: 50px; background:url(../images/sub/blt_counsel_ico.png)  center top no-repeat}
.counsel_info ul {margin: -50px 0 0 170px}
.counsel_info ul li {position: relative; padding-left: 15px; margin-bottom: 10px; font-weight: 600}
.counsel_info ul li:after{content:""; clear: both; display: block; position: absolute; top:5px; left:0; width: 5px; height: 2px; background: #7e7e7e}
.counsel_info ul li:last-child{margin-bottom: 0}
.counsel_info ul li span.tit{display: inline-block; padding: 3px 10px; margin-right: 5px; width: 70px; border-radius: 50px; background: #314b6b; text-align: center; color:#fff; font-weight: 500; box-sizing: border-box}
.counsel_info ul li span.lunch{font-weight: 600; font-size: 12px; color:#5d5d5d}
.counsel_info ul li:last-child span.tit{background: #acacac}

.counsel_boxwrap {min-height:280px; padding:60px 70px; background:url(../images/sub/bg_counsel_img.jpg) no-repeat 50% 0; box-sizing: border-box}
.counsel_boxwrap .cbox_tit {margin-bottom:25px; font-size:1.846em; font-weight:500; color:#fff}
.counsel_boxwrap .cbox_info {margin-bottom:25px}
.counsel_boxwrap .cbox_info li {display: flex; justify-content:flex-start; align-items: center; margin:8px 0}
.counsel_boxwrap .cbox_info li .ci_tit {min-width:120px; height:33px; line-height:31px; margin-right:15px; background:#fff; border-radius:50px; text-align: center; font-size:1.231em; font-weight:600}
.counsel_boxwrap .cbox_info li p.ci_tel a {font-size:2.923em; font-weight:500; color:#ffca12}
.counsel_boxwrap .cbox_info li p.ci_mail a {font-size:1.846em; font-weight:500; color:#ff9812}
.counsel_boxwrap .cbox_time li {display:flex; justify-content: flex-start; align-items: center; margin:5px 0}
.counsel_boxwrap .cbox_time li .ct_tit {min-width:100px; height:22px; line-height: 22px; margin-right:10px; color:#fff; font-size:1.154em; font-weight:500; border-radius:50px; border:1px solid rgba(255,255,255,0.3); box-sizing: border-box; text-align: center}
.counsel_boxwrap .cbox_time li .ct_txt {color:#fff; font-size:1.154em}


@media only screen and (max-width:936px) {
/* 견적및상담요청안내-상단안내문구 변경*/
.counsel_info{padding: 10px}
.counsel_info .info_tit{width: 100%; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #ccc; font-size: 14px}
.counsel_info .info_tit span{display: inline-block; padding:5px 0 5px 35px; background-size: 30px 21px; background-position: left center}
.counsel_info ul {margin: 0}
.counsel_info ul li span.tit{width: 60px}
    
.counsel_boxwrap {padding:50px 40px; min-height:inherit; text-align: center}
.cbox_info {width:400px; margin:0 auto 25px}
.counsel_boxwrap .cbox_tit {font-size:1.538em; word-break: keep-all}
.counsel_boxwrap .cbox_info li p.ci_tel a {font-size:1.692em}
.counsel_boxwrap .cbox_info li p.ci_mail a {font-size:1.385em}
.cbox_time {width:400px; margin:0 auto}
.counsel_boxwrap .cbox_info li .ci_tit {min-width:100px; height:28px; line-height:26px; font-size:1.077em}
.counsel_boxwrap .cbox_time li .ct_tit {font-size:1em}
.counsel_boxwrap .cbox_time li .ct_txt {font-size:1em}
    
}

@media only screen and (max-width:450px) {
    .counsel_boxwrap {padding:40px 20px}
    .counsel_boxwrap .cbox_info li {flex-direction:column; margin:0 0 10px}
    .cbox_info {width:100%}
    .cbox_time {width:100%}
    .counsel_boxwrap .cbox_time li {flex-direction:column; margin:0 0 10px}
    .counsel_boxwrap .cbox_info li .ci_tit {margin:5px 0 10px}
    .counsel_boxwrap .cbox_time li .ct_tit {margin:5px 0 10px}
}




/* 반배정 프로그램 css 240213 MHS */
/* 레이아웃 */
.class_wrap{margin: -380px auto 20px; font-family: PTD; max-width: 950px;}
.class_wrap .class_head{background: linear-gradient(to right, rgba(76,177,182,1) 0%, rgba(68,134,239,1) 50%, rgba(137,93,243,1) 100%); position: relative; overflow: hidden; height: 150px; box-sizing: border-box; padding: 44px 0 0 146px;}
.class_wrap .class_head::before, .class_wrap .class_head::after{content: ''; position: absolute; }
.class_wrap .class_head::before{background: url(../../images/guide/bg_class_head01.png) no-repeat; width: 163px; height: 150px; left: 0; bottom: 0;}
.class_wrap .class_head::after{background: url(../../images/guide/bg_class_head02.png) no-repeat; width: 261px; height: 389px; right: 0; top: calc(50% - 172px);}
.class_wrap .class_head .head_tit{color: #fff; font-weight: 500; text-shadow: 2px 2px 10% rgba(0, 0, 0, .35);}
/* 타이틀 */
.class_wrap .class_head .tt01 .col_g{font-weight: 800; font-size: 19px; color: #e0fdb0;}
.class_wrap .class_head .tt02{font-size: 32px; margin: 12px 0 0 72px;}
.class_wrap .class_head .tt02 .bold{font-weight: 900; color: #fff;}
.class_wrap .class_head .tt02 br{display: none;}
.class_wrap .class_body{position: relative;}
.class_wrap .class_body::before{content: ''; position: absolute; width: 137px; height: 195px; background: url(../../images/guide/img_class_head.png) no-repeat; right: 116px; top: -261px; z-index: 1;}
.class_wrap .class_body .sec_tit_box{margin: 50px 0 15px; text-align: center; position: relative;}
.class_wrap .class_body .sec_tit_box::before{content: ''; position: absolute; width: 332px; height: 1px; background: #ddd; top: 50%; left: calc(50% - 166px); z-index: -1;}
.class_body .sec_tit_box span.sec_tit{display: inline-block; padding: 0 26px; background: #fff; color: #111; font-size: 24px; font-weight: 700; position: relative;}
.sec_tit_box .sec_tit::before, .sec_tit_box .sec_tit::after{content: ''; position: absolute; width: 5px; height: 5px; border-radius: 5px; background: #b3e55f; top: -10px;}
.sec_tit_box .sec_tit::before{left: 33px;}
.sec_tit_box .sec_tit::after{left: 53px;}
.class_body_sec02 .sec_tit_box .sec_tit::before, 
.class_body_sec02 .sec_tit_box .sec_tit::after{background: #9b9ef5;}
.class_body_sec03 .sec_tit_box .sec_tit::before, 
.class_body_sec03 .sec_tit_box .sec_tit::after{background: #5fe8f0; }
/* 주요기능 */
.viewBody .class_body_sec01 .func_list .col_p{color: #5366e5; font-weight: 700;}
.viewBody .class_body_sec01 .func_list .col_m{color: #37cbbb; font-weight: 700;}
.viewBody .class_body_sec01 .func_list .col_b{color: #7248c0; font-weight: 700;}
.class_body_sec01 .func_list{display: flex; justify-content: center; margin: 50px 0;}
.class_body_sec01 .func_list > li{width: 33.33%; max-width: 240px; text-align: center;}
.class_body_sec01 .func_list > li > p{font-size: 16px; line-height: 1.5; padding-top: 130px; position: relative;}
.class_body_sec01 .func_list > li > p::before{content: ''; position: absolute; width: 100px; height: 100px; background-color: #fff; background-position: center; background-repeat: no-repeat; border-radius: 10px; top: 0; left: calc(50% - 50px);}
.func_list > li.li01 > p::before{background-image: url(../../images/guide/icon_classfunc01.png); box-shadow: 0 0 10px rgba(0, 172, 234, .25);}
.func_list > li.li02 > p::before{background-image: url(../../images/guide/icon_classfunc02.png); box-shadow: 0 0 10px rgba(0, 94, 234, .25);}
.func_list > li.li03 > p::before{background-image: url(../../images/guide/icon_classfunc03.png); box-shadow: 0 0 10px rgba(84, 44, 184, .25);}
/* 화면구성 */
.class_body_sec02 .class_screen .screen_tit{margin: 30px auto 20px; text-align: center; max-width: 320px; line-height: 26px; background: #555; color: #fff; border-radius: 20px; font-size: 16px; font-weight: 700;}
.class_body_sec02 .class_screen .screen_list li{margin: 20px 0; border: 1px solid #c5c5c5; overflow: hidden; position: relative;}
.class_screen .screen_list li::before{content: ''; display: block; padding-bottom: 21%;}
.class_screen .screen_list li.scli03::before{padding-bottom: 26%;}
.class_screen .screen_list li.scli04::before{padding-bottom: 23%;}
.class_screen .screen_list li img{margin: 0; position: absolute; left: 0; top: 0; min-height: 100%;}
.class_screen .screen_list li:nth-child(odd){border-radius: 0 100px 0 0} 
.class_screen .screen_list li:nth-child(even){border-radius: 100px 0 0 0} 
.class_screen .screen_list .screen_li_tit{position: absolute; line-height: 47px; background: #4487ef; font-size: 18px; font-weight: 700; color: #fff; padding: 0 50px 0 40px; bottom: 0; box-shadow: 0 -4px 10px rgba(0, 0, 0, .15);}
.class_screen .screen_list li:nth-child(odd) .screen_li_tit{background: url(../../images/guide/icon_class_txt.png) no-repeat 15px center #4487ef; border-radius: 0 40px 0 0; left: 0;}
.class_screen .screen_list li:nth-child(even) .screen_li_tit{background: url(../../images/guide/icon_class_txt.png) no-repeat 15px center #4aafbb; border-radius: 40px 0 0 0; right: 0;}
.screen_list .screen_info_txt{position: absolute; border-radius: 15px; box-shadow: 0 0 10px rgba(29, 104, 173, .25); z-index: 1; max-width: 520px; font-size: 17px; padding: 12px 25px; background: #fff;}
.screen_list .screen_info_txt span.bold{color: #000; font-weight: 700;}
.screen_list .scli03 .screen_info_txt{left: 36%; top: 85px;}
.screen_list .scli04 .screen_info_txt{top: 30px; right: 30px;}
/* 탑재비용 */
.class_body .sec_info_txt{font-size: 17px; padding-left: 23px; background: url(../../images/guide/icon_class_info.png) no-repeat 6px 0.3em; margin: 20px 0;}
.class_body_sec03 .price_box{margin: 30px 0 20px;}
.class_body_sec03 .price_box .price_box_list{display: flex; background: #69a1b3;}
.price_box .price_box_list > li{padding: 28px 25px; box-sizing: border-box; width: 50%; position: relative; color: #fff; text-align: center;}
.price_box .price_box_list > li + li::before{content: ''; width: 1px; height: 100px; left: 0; top: calc(50% - 50px); background: rgba(255, 255, 255, .5); position: absolute;}
.price_box .price_box_list .price_li_tit{padding-top: 45px; font-size: 40px; font-weight: 700; margin-bottom: 15px; line-height: 1;}
.price_box_list .price_li01 .price_li_tit{background: url(../../images/guide/nc_ser_icon01.png) no-repeat center top}
.price_box_list .price_li02 .price_li_tit{background: url(../../images/guide/nc_ser_icon02.png) no-repeat center top}
.price_box .price_box_list .price_li_info{font-size: 20px; font-weight: 300;} 
.price_box .price_box_list .price_li_info > span{font-size: 0.8em; color: #fff; font-weight: 300; display: block;}


/* 모바일 =========================================================================  */
@media only screen and (max-width:1024px) {
    /* 레이아웃 */
    .class_wrap{margin: -440px auto 20px;}
    .class_wrap .class_head{padding-left: 0; text-align: center;}
    .class_wrap .class_body::before{content: none;}
    .class_wrap .class_head .head_tit{position: relative; z-index: 2;}
    .class_wrap .class_head .tt02{margin: 8px 0 0 0;}
    .class_wrap .class_head::after{opacity: .5;}
    /* 타이틀 */
    .class_wrap .class_body .sec_tit_box{margin: 35px 0 10px;}
    /* 화면구성 */
    .class_screen .screen_list li img{min-height: auto; width: 100%;}
    .screen_list .screen_info_txt{font-size: 14px; max-width: 460px; padding: 10px 20px;}
    .screen_list .scli03 .screen_info_txt{top: 33px; }
}

@media only screen and (max-width:750px) {
    /* 레이아웃 */
    .class_wrap .class_head{height: 120px; padding-top: 32px;}
    .class_wrap .class_head::after{width: 100px; background-size: 100px auto; top: calc(50% - 65px)}
    .class_wrap .class_head .head_tit{font-size: 15px;}
    
    /* 타이틀 */
    .class_wrap .class_body .sec_tit_box::before{width: 90%; left: 5%;}
    .class_wrap .class_head .tt01 .col_g{font-size: 17px;}
    .class_wrap .class_head .tt02{font-size: 24px;}
    .class_body .sec_tit_box span.sec_tit{font-size: 21px;}
    /* 주요기능 */
    .class_body_sec01 .func_list{display: block; margin: 30px 0;}
    .class_body_sec01 .func_list > li{width: 100%; max-width: unset;}
    .class_body_sec01 .func_list > li + li{margin-top: 24px;}
    .class_body_sec01 .func_list > li > p{padding-top: 110px;}
    .class_body_sec02 .class_screen .screen_tit{margin: 20px auto 15px;}
    /* 화면구성 */
    .class_screen .screen_list .screen_li_tit{position: static; font-size: 15px; line-height: 1.2; height: 46px; display: flex; align-items: center;}
    /* 탑재비용 */
    .class_body_sec03 .price_box{margin: 20px 0 10px;}
    .price_box .price_box_list .price_li_tit{font-size: 30px;}
    .price_box .price_box_list .price_li_info{font-size: 17px;}
    .class_body .sec_info_txt{font-size: 15px; margin: 10px 0;}
}

@media only screen and (max-width:600px) {
    /* 레이아웃 */
    .class_wrap .class_head::before{height: 100px; background-size: auto 100px; opacity: .7;}
    /* 타이틀 */
    .class_wrap .class_head{padding-top: 25px;}
    .class_wrap .class_head .tt02{line-height: 1.1; margin: 0;}
    .class_wrap .class_head .tt02 br{display: block;}
    /* 화면구성 */
    .class_screen .screen_list li img{height: auto;}
    .class_body_sec01 .func_list > li > p{font-size: 14px;}
    .class_screen .screen_list li:nth-child(odd){border-radius: 0 60px 0 0} 
    .class_screen .screen_list li:nth-child(even){border-radius: 60px 0 0 0} 
    .screen_list .screen_info_txt{position: static; box-shadow: none; padding: 10px;  border-radius: 0;}
    .class_screen .screen_list li:nth-child(odd) .screen_li_tit{border-radius: 0 25px 0 0; left: 0;}
    .class_screen .screen_list li:nth-child(even) .screen_li_tit{border-radius: 25px 0 0 0;}
    /* 탑재비용 */
    .class_body_sec03 .price_box .price_box_list{display: block;}
    .price_box .price_box_list > li{width: 100%; padding: 20px;}
    .price_box .price_box_list > li + li::before{left: 5%; width: 90%; height: 1px; top: 0;}
    .price_box .price_box_list .price_li_tit{font-size: 26px; padding-top: 38px; margin-bottom: 10px;}
}



/*이용약관 부분 스타일 추가*/
.protect_pi p.rule_midtit{padding:10px; margin:0 0 10px; border-bottom:2px solid #ed1818; font-size:18px; font-weight:600; text-align:center}
.protect_pi ul.pi_list li ul.inner_box li, .protect_pi ul.pi_list li ol.inner_box li{position: relative; background:none; font-size:14px}
.protect_pi ul.pi_list li ol.inner_box li{padding:0}
.protect_pi ul.pi_list li ul.inner_box li::after{display:block; content: ''; clear: both; position: absolute; top:8px; left:0; width:5px; height: 2px; background:#02437d}
.protect_pi ul.pi_list li ul.inner_box2{margin:5px 0 10px; padding:8px; background:#f1f1f1}
.protect_pi ul.pi_list li ul.inner_box2 li{font-size:14px}
.protect_pi ul.pi_list li a{color:#1aa1ff; text-decoration: underline; text-underline-offset:3px; font-size:13px}