@charset "utf-8";

/*이미지 확대 버튼*/
.pic_btn a{display: none;}
.pic_btn a:hover{background-color:#e45348;/*border-color:#348c01;*/color:#fff;transition: all 300ms ease-out }
@media(max-width:767px){
    .pic_btn a {display: block;width: 60%;margin: 10px auto 0;padding: 10px 40px;border: 1px solid #ddd;background: #fff;text-align: center;}
    .pic_img{text-align: center;}
}
@media(max-width:560px){
    .pic_btn a {width: 75%;}
}
@media(max-width:450px){
    .pic_btn a {width: 100%;}
}
.mailto {cursor: pointer;}

/* 배너 바로가기 및 다운로드 링크 공통 */
.ui-banner__box .item .ui-banner__title {word-break: keep-all;}

/* 절차도 공통 */
@media (max-width:1023px) {
    .process_ty2 .prc.type2 > li:last-child .inner:before {display: none;}
}

/* top-banner */
.top-banner {padding: 100px 20px; background-size: cover; background-repeat: no-repeat; background-position: center; text-align: center;}
.top-banner strong {display: inline-block; position: relative; margin-bottom: 30px; padding: 6px 35px; font-family: 'score'; font-size: 28px; font-weight: 300; color: #fff;}
.top-banner strong:before, .top-banner strong:after {content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 38px;}
.top-banner strong:before {background: url(/images/ctl/sub03/left.png) no-repeat; left: 0;}
.top-banner strong:after {background: url(/images/ctl/sub03/right.png) no-repeat; right: 0;}
.top-banner p {margin-top: 0; font-size: 24px; color: #fff; line-height: 1.4;}

.top-banner {background-image: url(/images/ctl/common/top_banner_img01.jpg);}
.top-banner01 {background-image: url(/images/ctl/common/top_banner_img01.jpg); background-position: center 39%;}
.top-banner02 {background-image: url(/images/ctl/common/top_banner_img02.jpg); background-position: center 39%;}
.top-banner03 {background-image: url(/images/ctl/common/top_banner_img03.jpg); background-position: center 55%;}
.top-banner04 {background-image: url(/images/ctl/common/top_banner_img04.jpg); background-position: center 55%;}
.top-banner05 {background-image: url(/images/ctl/common/top_banner_img05.jpg); background-position: center 55%;}

@media (max-width:767px) {
    .top-banner p {font-size: 20px;}
    .top-banner p br {display: none;}
    .top-banner strong {padding: 6px 25px;}
}


/* sub010101 신임교원 워크숍 */
@media (max-width:1329px) and (min-width:1024px) {
    .s010101 .prc.type2 > li .inner {min-height: 184px;}
}
/* sub010101 신임교원 워크숍 End */

/* sub010201 교원역량강화워크숍 */
@media (max-width:1329px) and (min-width:1024px) {
    .s010201 .prc.type2 > li .inner {min-height: 184px;}
}
/* sub010201 교원역량강화워크숍 End */

/* sub010301 수업(설계)컨설팅 */
@media (max-width:1338px) and (min-width:1200px) {
    .s010301 .prc.type2 > li .inner {min-height: 184px;}
}
@media (max-width:1154px) and (min-width:1024px) {
    .s010301 .prc.type2 > li .inner {min-height: 184px;}
}
/* sub010301 수업(설계)컨설팅 End */

/* sub020101 학습역량 워크숍 소개 */
@media (min-width:768px) {
    .s020101 .prc.type2 > li {width: calc(33.3333% - 30px);}
}
/* sub020101 학습역량 워크숍 소개 End */

/* sub020201 특화프로그램 소개 */
.s020201 .prc.type5 > li .inner {min-height: 135px;}
.s020201 .prc.type5 > li .prc__title {margin-bottom: 0; padding-bottom: 15px; border-bottom: none;}
@media (max-width:500px) {
    .s020201 .prc.type5 > li .inner {min-height: auto;}
}
/* sub020201 특화프로그램 소개 End */

/* sub020301 영어역량강화프로그램 */
@media (max-width:1379px) and (min-width:1024px) {
    .s020301 .prc.type2 > li .inner {min-height: 184px;}
}
/* sub020301 영어역량강화프로그램 End */

/* sub030101 화상수업 */
.s030101 .bodo-v .col{border: solid 1px #dddddd;min-height: 350px;padding: 20px;}
.s030101 .bodo-v .col .v_txt .tit > a {font-size: 18px;}
.s030101 .bodo-v img {width: auto;}
.s030101 .bodo-v .col .v_txt p {word-break: keep-all;}
@media (max-width:1024px) {
    .s030101 .bodo-v .col {width: calc(46% - 20px);}
}
@media (max-width:767px) {
    .s030101 .bodo-v .col {margin-bottom: 40px;width:100%;}
    
}
/* sub030101 화상수업 End */

/* sub030102 Flipped Learning */
.s030102 .prc.type2 > li .inner .prc__title span {margin-top: 10px; font-weight: normal;}
@media (min-width:768px) {
    .s030102 .prc.type2 > li {width: calc(33.3333% - 30px);}
    .s030102 .prc.type2 > li .inner {min-height: 200px;}
}
/* sub030102 Flipped Learning End */

/* sub030103 강의영상제작 */
.s030103 .prc.type5 > li .prc__title {padding-bottom: 8px; margin-bottom: 0; border-bottom: none;}
.s030103 .prc.type5 > li .inner {min-height: 113px; padding-top: 35px;}
.s030103 .bodo-v img {display: block;}
@media (max-width:1379px) and (min-width:501px) {
    .s030103 .prc.type5.step4 > li {width: calc(50% - 44px);}
    .s030103 .prc.type5.step4 > li:nth-child(2):before {display: block; top: auto; bottom: -24px; right: 0; left: 50%; margin-left: -16px; transform: rotate(90deg);}
    .s030103 .prc.type5.step4 > li:nth-child(3) {float: right;}
    .s030103 .prc.type5.step4 > li:nth-child(3):before {display: block; left: -32px; transform: translateY(-50%) rotate(-180deg);}
}
@media (max-width:581px) and (min-width:501px) {
    .s030103 .prc.type5 > li .inner {min-height: 156px;}
}
@media (max-width:500px) {
    .s030103 .prc.type5 > li .inner {min-height: auto;}
}
/* sub030103 강의영상제작 End */

/* sub030104 상호작용증진도구 */
.s030104 .bodo-v {display: flex; flex-wrap: wrap;}
.s030104 .bodo-v .col{border: solid 1px #dddddd;padding: 20px;}
.s030104 .bodo-v .col .v_txt .tit > a {font-size: 18px;}
.s030104 .bodo-v img {width: auto;}
.s030104 .bodo-v .col .v_txt p {word-break: keep-all;}
@media (max-width:767px) {
    .s030104 .bodo-v .col {margin-bottom: 40px;}
}
/* sub030104 상호작용증진도구 End */

/* sub030202 Global MOOC */
.s030202 .bodo-v .col:nth-child(4n + 1) {clear: both;}
.s030202 .bodo-v img {width: auto;}
.s030202 .bodo-v .col .v_txt p {word-break: keep-all;}
@media (max-width:767px) {
    .s030202 .bodo-v .col {margin-bottom: 40px;}
}
/* sub030202 Global MOOC End */

/* sub0303 자기주도학습콘텐츠 */
.s0303 .self_wrap {position: relative; padding: 85px 25px 95px; margin-top: 220px; background-color: #f9f5f5;}
.s0303 .self_wrap:before {content: ""; position: absolute; top: -172px; right: 30px; width: 232px; height: 186px; background:url(/images/kor/sub06/sub06_05_02_img01.png) no-repeat center; z-index: 10;}
.s0303 .self_wrap:after {content: "self-directed learning"; position: absolute; top: -95px; left: 0; width: 100%; text-align: center; font-family: 'score'; font-size: 50px; font-weight: bold; color: #fff; text-shadow: -1px 0 #f2a594, 0 1px #f2a594, 1px 0 #f2a594, 0 -1px #f2a594; letter-spacing: 9px;}
.s0303 .self_wrap .self_inner {text-align: center;}
.s0303 .self_wrap .self_inner .inner_title strong {display: block; font-size: 31px; font-weight: 300; font-family: 'score'; word-break: break-all;}
.s0303 .self_wrap .self_inner .inner_title p {font-size: 16px; color: #5f5f5f;}
.s0303 .self_wrap .self_inner .inner_title p.txt-tip {display: inline-block; font-size: 15px;}

.s0303 .inner-items {display: flex; flex-wrap: wrap;}
.s0303 .inner-items .landing_se05b {width: calc(33.3333% - 13.3333px); margin-top: 150px; background-color: #fff;}
.s0303 .inner-items .landing_se05b:after {background-size: 80%; top: -119px; left: 52%;}
.s0303 .inner-items .landing_se05b:not(:first-child) {margin-left: 20px;}
.s0303 .inner-items .landing_se05b .landing-inner {padding: 75px 0 85px;}
.s0303 .inner-items .landing_se05b .landing-top {margin-bottom: 50px;}
.s0303 .inner-items .landing_se05b .landing-top .top-title {font-size: 28px;}
.s0303 .inner-items .landing_se05b .title {top: -70px; font-size: 40px; letter-spacing: 15px;}
.s0303 .inner-items .landing_se05b .landing-img {width: 280px; height: 227px;}
.s0303 .inner-items .landing_se05b .landing-img span.square {width: 267px; top: 5px; left: 7px;}

@media (max-width:1240px) {
    .s0303 .self_wrap:after {font-size: 30px;}
    .s0303 .self_wrap:before {right: auto; left: calc(50% - 72px);}
    .s0303 .inner-items .landing_se05b {width: 100%;}
    .s0303 .inner-items .landing_se05b:not(:first-child) {margin-left: 0; margin-top: 160px;}
}
@media (max-width:767px) {
    .s0303 .self_wrap:after {letter-spacing: 10px; text-indent: 10px;}
}
@media (max-width:460px) {
    .s0303 .self_wrap {padding:85px 20px 95px;}
	.s0303 .inner-items .landing_se05b .btn-lg.btn-icon {right: auto; right: 0; width: 100px; height: 100px; padding: 21px; font-size: 15px;}
	.s0303 .inner-items .landing_se05b .landing-img {width:240px; height:194px;}
	.s0303 .inner-items .landing_se05b .landing-img span.square {width:228px; top:4px; left: 6px;}
}
/* sub0303 자기주도학습콘텐츠 End */