.guideBannerBox{background-color: #d1edf4; border-radius: 12px; padding: 20px 12px 20px 20px; margin-bottom: 30px;}
.guideBannerBox .boxTit{color: #0067d3; font-size: 1.12rem; font-family: PretendardB, sans-serif; margin-bottom: 6px;}
.guideBannerBox p{color: #50646c; font-size: 1rem; line-height: 1.2em;}
.guideBannerBox.kocwImg{padding-right: 130px; background: #d1edf4 url(../../../image/sub/bannerImg1.png) no-repeat right 8px bottom 20px; background-size: 120px;}
.guideBannerBox.kocwguideImg{padding-right: 130px; background: #d1edf4 url(../../../image/sub/bannerImg4.png) no-repeat right 8px bottom 10px; background-size: 110px;}
.guideBannerBox.historyImg{padding-right: 130px; background: #d1edf4 url(../../../image/sub/bannerImg5.png) no-repeat right 8px bottom 10px; background-size: 140px;}
.guideBannerBox.copyRightImg{padding-right: 130px; background: #d1edf4 url(../../../image/sub/bannerImg6.png) no-repeat right 8px bottom 16px; background-size: 140px;}
@media screen and (max-width:640px) {
    .guideBannerBox.kocwImg{padding-right: 110px; background-size: 110px; background-position: right 0 bottom 16px;}
    .guideBannerBox.copyRightImg{padding-right: 120px; background-size: 110px; background-position: right 12px bottom 20px;}
}
@media screen and (max-width:400px) {
    .guideBannerBox{padding: 20px 4px 20px 16px;}
    .guideBannerBox.kocwImg{padding-right: 90px; background-size: 90px; background-position: right 0 bottom 16px;}
    .guideBannerBox.kocwguideImg{padding-right: 90px; background-size: 80px; background-position: right 6px bottom 6px;}
    .guideBannerBox.historyImg{padding-right: 120px; background-size: 120px; background-position: right 6px bottom 6px;}
    .guideBannerBox.copyRightImg{padding-right: 100px; background-size: 90px; background-position: right 6px bottom 16px;}
}

.guideCont1{margin-bottom: 30px;}
.guideCont1 p{color: #666666; font-family: PretendardL, sans-serif; font-size: 1rem; line-height: 1.4em; margin-bottom: 12px;}
.guideCont2{background-color: #f1f2f7; width: 100%; margin-left: -20px; margin-bottom: 30px; padding: 40px 20px 30px; position: relative;}
.guideCont2.bottomBg{margin-bottom: 0;}
.guideCont2.bottomBg::after{content: ""; display: block; width: 100%; height: 60px; position: absolute; left: 0; bottom: 0; transform: translateY(100%); background-color: #f1f2f7; z-index: -1;}

@media screen and (max-width:640px){
    .guideCont2{margin-left: -16px; padding: 40px 16px;}
}

.guideTit1{color: #151515; font-size: 1.25rem; font-family: PretendardM, sans-serif; margin-bottom: 12px;}

.guideSubTit1{padding: 4px 0 4px 12px; position: relative; margin-bottom: 12px;}
.guideSubTit1::after{content: ""; display: block; width: 4px; height: 100%; background-color: #6d41db; position: absolute; left: 0; top: 0;}
.guideSubTit1 p{font-size: 1.06rem; color: #434343; font-family: Pretendard, sans-serif; margin-bottom: 4px;}
.guideSubTit1 span{font-size: 0.87rem; color: #858585; font-family: Pretendard, sans-serif;}

.guide .videoBox{ width: 100%; height: 570px; margin-bottom: 16px; position: relative;}
.guide .videoBox video {width: 100%; height: 100%; border-radius: 5px; object-fit: fill; vertical-align: top;}
.guide .linkList{margin-bottom: 8px;}
.guide .linkList li{margin-bottom: 8px;}
.guide .linkList li a{color: #246ab2; font-size: 1rem; font-family: PretendardL, sans-serif; line-height: 1.2em;}
.guide .linkList li img{max-width: 17px; max-height: 15px; vertical-align: middle; margin: 0 1px;}
.guide .video{display: inline-block; background: url(../../../image/icon/service_video.png) no-repeat left top 1px; padding-left: 23px; background-size: 1.35em;}
.guide .pdf{display: inline-block; background: url(../../../image/icon/service_pdf.png) no-repeat left top; padding-left: 20px; background-size: 1.05em;}

@media (min-width:768px) and (max-width:1024px){
	.guide .videoBox{height: 570px;}
}

@media (min-width:0) and (max-width:767px){
    .guide .videoBox{width: 100%; height: auto;}
}

/* kocw란 - 활용안내 */
.colorCircleList li{position: relative; width: 70%; border: 1px solid #ddd; border-radius: 16px; padding: 28px 20px 28px 64px; margin-bottom: 24px; background-color: #f8f8fb; box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.1);  -moz-box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.1);  -webkit-box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.1); box-sizing: border-box;}
.colorCircleList li:nth-child(2n-1){margin-left: 40px; margin-right: auto;}
.colorCircleList li:nth-child(2n){margin-left: auto; margin-right: 0;}
.colorCircleList li:last-child{margin-bottom: 0;}
.colorCircleList li.school{border-color: #fae583;}
.colorCircleList li.university{border-color: #f9d3ed;}
.colorCircleList li.postgraduate{border-color: #d8d8d8;}
.colorCircleList li.leave{border-color: #bde9d9}
.colorCircleList li.graduate{border-color: #c9c7f8 ;}
.colorCircleList li.recruits{border-color: #a6d2ff ;}
.colorCircleList li.retiree{border-color: #d8d8d8;}
.colorCircleList .circle{width: 80px; height: 80px; border-radius: 50%; box-shadow: 13px 13px 35px 0px rgba(0, 0, 0, 0.18); -moz-box-shadow: 13px 13px 35px 0px rgba(0, 0, 0, 0.18); -webkit-box-shadow: 13px 13px 35px 0px rgba(0, 0, 0, 0.18); position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);}
.colorCircleList .school .circle{background-color: #fff5be;}
.colorCircleList .university .circle{background-color: #ffafe9;}
.colorCircleList .postgraduate .circle{background-color: #777674;}
.colorCircleList .leave .circle{background-color: #3edfa5}
.colorCircleList .graduate .circle{background-color: #b7b4f5 ;}
.colorCircleList .recruits .circle{background-color: #a1cfff ;}
.colorCircleList .retiree .circle{background-color: #d3d3d3;}
.colorCircleList .circle img{width: auto; height: 100%;}
.colorCircleList .school .circle img{width: 60%; height: auto; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.colorCircleList .university .circle img{position: absolute; bottom: 0; left: -10px;}
.colorCircleList .postgraduate .circle img{width: 90%; height: auto; position: absolute; left: -10px; bottom: 10px;}
.colorCircleList .leave .circle img{width: 70%; height: auto; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.colorCircleList .graduate .circle img{width: 100%; height: auto; position: absolute; bottom: 0;}
.colorCircleList .recruits .circle img{width: auto; height: 100%;}
.colorCircleList .retiree .circle img{width: auto; height: 100%;}
.colorCircleList .userEng{font-family: Pretendard, sans-serif; font-size: 0.7rem; margin-bottom: 4px;}
.colorCircleList .school .userEng{color: #ecd036;}
.colorCircleList .university .userEng{color: #ffa2e5;}
.colorCircleList .postgraduate .userEng{color: #a0a09f;}
.colorCircleList .leave .userEng{color: #2bdb9b}
.colorCircleList .graduate .userEng{color: #a8a2f6 ;}
.colorCircleList .recruits .userEng{color: #57a9fe ;}
.colorCircleList .retiree .userEng{color: #a3a3a3;}
.colorCircleList .user{font-family: PretendardB, sans-serif; font-size: 1.2rem; color: #232323; margin-bottom: 8px; line-height: 1.2em;}
.colorCircleList .use{font-family: PretendardM, sans-serif; font-size: 1rem; color: #7c7c7c; line-height: 1.2em;}
@media screen and (max-width:640px){
    .colorCircleList li{padding: 24px 16px 24px 52px;}
    .colorCircleList .circle{width: 70px; height: 70px;}
}
@media screen and (max-width:400px){
    .colorCircleList li{width: calc(90% - 30px); padding: 24px 16px 24px 42px;}
    .colorCircleList li:nth-child(2n-1){margin-left: 36px;}
    .colorCircleList .circle{width: 60px; height: 60px;}
}

/* kocw란 - 발자취 */
.historyMenu{display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px;}
.historyMenu > li{width: 100%; text-align: center;}
.historyMenu > li > a{color: #3b3b3b; font-size: 1.12rem; text-align: center; position: relative;}
.historyMenu > li > a::after{content: ""; opacity: 0; width: 100%; height: 4px; border-radius: 12px; background-color: #3b3b3b; position: absolute; left: 50%; transform: translateX(-50%); top: 100%;}
.historyMenu > li.on > a{color: #6435d9; font-family: PretendardM, sans-serif;}
.historyMenu > li.on > a::after{opacity: 1; width: 12px; height: 12px; background-color: #6435d9; top: -16px; transition: opacity 0.5s, width 0.5s, height 0.5s ease 0.5s ,top 0.5s ease 0.5s;}
.historyList{position: relative; padding-bottom: 160px;}
.historyList::after{content: ""; display: block; width: 100%; height: 240px; background: url(../../../image/sub/historyBg.png) no-repeat right -40px bottom; background-size:auto 100% ; position: absolute; right: 0; bottom: -90px;}
.historyList .listW{text-align: right; display: none;}
.historyList .listW.on{display: block;}
.historyList .listW .moreBtn{display: inline-block; background-color: #6435d9; overflow: hidden; color: #ffffff; font-size: 1rem; padding: 6px 28px 6px 14px; border-radius: 20px; margin-bottom: 8px; position: relative; image-rendering: -webkit-optimize-contrast;}
.historyList .listW .moreBtn::after{content: ""; display: block; width: 12px; height: 12px; background: url(../../../image/arrow/up4.png) no-repeat center center; background-size: 10px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotateZ(180deg); transition: all 0.3s;}
.historyList .listW.open .moreBtn::after{transform: translateY(-50%) rotateZ(0deg);}
.historyList .list{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.historyList .list li{width: calc(33% - 4px); margin-right: calc(4px*3/2); min-height: 150px; padding: 20px 40px; margin-bottom: 8px; box-sizing: border-box; border-radius: 20px; border:1px solid #dbe5eb; background-color: #fff; text-align: center; box-shadow: 5px 5px 9.8px 0.2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px 9.8px 0.2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px 9.8px 0.2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 5px 5px 9.8px 0.2px rgba(0, 0, 0, 0.1); display: none;}
.historyList .list li:nth-child(3n){margin-right: 0;}
.historyList .list li:nth-child(n):nth-child(-n+9){display: block;}
.historyList .listW.open .list li{display: block;}
.historyList .list .date{font-family: PretendardM, sans-serif; font-size: 1.06rem; color: #6435d9; margin-bottom: 12px;}
.historyList .list li p{margin-bottom: 0; line-height: 1.2rem;}
.historyList .list li p a{display: block; word-break: break-all;}
@media screen and (max-width:640px){
    .historyList .list li{width: calc(33% - 4px); min-height: 140px; padding: 20px 8px;}
}
@media screen and (max-width:450px){
    .historyList{padding-bottom: 140px;}
    .historyList::after{height: 200px;}
    .historyList .list li{width: calc(50% - 4px); margin-right: 8px; min-height: 140px; padding: 20px;}
    .historyList .list li:nth-child(2n){margin-right: 0px;}
    .historyList .list li:nth-child(3n){margin-right: 8px;}
    .historyList .list li:nth-child(6n){margin-right: 0px;}
}


/* 서비스도움말 */
.guideService{text-align: center; margin-bottom: 20px;}
.guideService img{width: 120px; margin-bottom: 12px;}
.guideService h4{color: #3b3b3b; font-size: 1.12rem; line-height: 1.2em; margin-bottom: 12px;}
.guideService p{color: #8b8b8b; font-size: 1rem; line-height: 1.4em;}

.guideServiceMenu{display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 20px;}
.guideServiceMenu li{width: calc(25% - 4px); height: 90px; margin-bottom: 4px; margin-right: 4px;}
.guideServiceMenu li a{display: block; width: 100%; height: 100%; text-align: center; color: #000000; font-size: 0.9rem; border-radius: 4px; border: 1px solid #d7d7d7; padding: 16px 4px; box-sizing: border-box;}
.guideServiceMenu li.on a{color: #fffefe; background-color: #44bad5; border-color: #44bad5;}
.guideServiceMenu li .image{display: block; height: 44px; text-align: center;}
.guideServiceMenu li .image img{max-width: 36px; max-height: 36px;}
.guideServiceMenu li .image img.on{display: none;}
.guideServiceMenu li.on .image img.on{display: inline-block;}
.guideServiceMenu li.on .image img.off{display: none;}