@charset "utf-8";

/* 0101 인사말 */
.greeting{position:relative;}
.greeting .greet_top{position:relative; width:100%; padding-bottom:20px;}
.greeting .greet_top:before {content:""; display:block; position:absolute; right:0; bottom:0; width:750px; height:250px; background:url("/images/web/djupm/sub_cnt/img_greeting.png") no-repeat; background-size:cover;}
.greeting .greet_top .topTxt{position:relative; display:inline-block; min-width:440px; max-width:50%; min-height:150px; padding:45px 30px 60px; color:#fff; line-height:1.4; background:#002f67 url("/images/web/djupm/sub_cnt/bg_greeting.png") no-repeat right bottom; box-shadow:3px 3px 5px 0 rgba(0, 0, 0, 0.35); }
.greeting .topTxt h3 {font-size:34px; font-family:'NotoM';  word-break:keep-all;} 
.greeting .topTxt p {font-size:17px; margin-top:20px; word-break:keep-all} 
.greeting .topTxt .topTeng {position:absolute; right:30px; bottom:30px; padding-left:90px; letter-spacing:3px; font-size:15px; color:#87a3c5;  font-family:'NotoM';}
.greeting .topTxt .topTeng:before {content:""; display:block; position:absolute; left:0; top:10px; width:80px; height:1px; background:#4d6e95;}
.greeting .txt {margin-top:40px;}
.greeting .txt p {font-size:16px; line-height:1.8; word-break:keep-all;}
.greeting p.sign{margin-top:30px;text-align:right; font-size:17px;  word-break:keep-all;}
.greeting p.sign strong {font-family:'NotoB';}

/* 0103 비교과란? */
.aboutInfo dl{position:relative; margin:10px 0;}
.aboutInfo dt{position:absolute; left:0; top:0; width:120px; height:100%; background:#002f67; color:#fff; text-align:center; font-size:18px;}
.aboutInfo dt::before{content:""; position: absolute; right:-22px; top:50%; width:15px; height:30px; margin-top:-15px; background:url('/images/web/djupm/sub_cnt/arrow01.png') no-repeat center;}
.aboutInfo dt span{position:relative; display:block; left:0%; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.aboutInfo dd{position:relative; margin-left:150px; background:#f1f1f1; padding:10px; word-break: keep-all;}
.aboutInfo dd ul{display:table; width:100%; table-layout: fixed;  border-spacing: 10px;}
.aboutInfo dd ul li{display:table-cell; background:#fff; text-align:center; padding:20px 0; font-family: 'NotoM';}
.aboutInfo dd p{text-align:center; font-size:16px;}
.aboutInfo .info p.tit_1,
.aboutInfo .info p.tit_2{position:absolute; top:10px; height:calc(100% - 20px); width:15px; padding:0 15px; background:#fff; text-align:center; word-break:break-all; font-family: 'NotoM'; color:#111;}
.aboutInfo .info p.tit_1{left:10px;}
.aboutInfo .info p.tit_2{right:10px;}
.aboutInfo .info p.tit_1 span,
.aboutInfo .info p.tit_2 span{position:relative; display:block; left:0%; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.aboutInfo .info .core{margin:0 60px;}
.aboutInfo .info .core .box{position:relative; overflow:hidden; margin:10px 0 0;}
.aboutInfo .info .core .box:before{content:""; position: absolute; left:36%; top:50%; width:28%; height:1px; border-top:1px dashed #216430;}
.aboutInfo .info .core .box:first-child{margin:0;}
.aboutInfo .info .core .box p{position:relative; width:35%; line-height:40px; text-align:center; color:#fff;}
.aboutInfo .info .core .box p:before{content:""; position:absolute; top:50%; width:5px; height:5px; border-radius:50%; margin-top:-2px; background:#216430;}
.aboutInfo .info .core .bk{float:left; background:#5b5e5c;}
.aboutInfo .info .core .bk:before{right:-2%; margin-right:-5px;}
.aboutInfo .info .core .gen{float:right; background:#57b299;}
.aboutInfo .info .core .gen:before{left:-2%; margin-left:-5px;}

/* 0202 프로그램 이용안내 */
.stepList{overflow:hidden;}
.stepList > li{position:relative; float:left; width:18.4%; margin-left:1%; padding-left:1%;}
.stepList > li:first-child{margin-left:0; padding-left:0;}
.stepList > li:before{content: ""; display: block; position: absolute; top:50%; right:100%; width:12px; height:12px; border:2px solid #888; border-left:0; border-bottom:0; box-sizing:border-box; -webkit-transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%);}
.stepList > li:first-child:before{display:none;}
.stepList > li .box{display:table; width:100%; height:100px; text-align:center; table-layout:fixed; color:#fff; font-family: 'NotoM'; background:#888;}
.stepList > li .box.step01{background:#73539e;}
.stepList > li .box.step02{background:#5857a0;}
.stepList > li .box.step03{background:#295991;}
.stepList > li .box.step04{background:#307996;}
.stepList > li .box.step05{background:#1c807b;}
.stepList > li p{display:table-cell; padding:0 10px; vertical-align:middle; word-break:keep-all;}

/* 0301 만족도조사안내 */
    /* 절차 01 */
    .stepList2{overflow:hidden;}
    .stepList2 > li{position:relative; float:left; width:23.5%; margin-left:1%; padding-left:1%;}
    .stepList2 > li:first-child{margin-left:0; padding-left:0;}
    .stepList2 > li:before{content: ""; display: block; position: absolute; top:50%; right:100%; width:12px; height:12px; border:2px solid #888; border-left:0; border-bottom:0; box-sizing:border-box; -webkit-transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%);}
    .stepList2 > li:first-child:before{display:none;}
    .stepList2 > li .box {display:table; width:100%; height:180px; text-align:center; color:#fff; font-family: 'NotoM'; background:#aaa;}
    .stepList2 > li .box ul{padding:10px; text-align:left; overflow:hidden; word-break:keep-all;}
    .stepList2 > li .box ul li{text-align:left;}
    .stepList2 > li .box.titTy{display:block; background:#f1f1f1;}
    .stepList2 > li .box.titTy p{display:block; line-height:40px;}
    .stepList2 > li .box.titTy .tit_1{background:#295991;}
    .stepList2 > li .box.titTy .tit_2{background:#1c807b;}
    .stepList2 > li .box.ptBox{background:#307996;}
    .stepList2 > li p{display:table-cell; padding:0 10px; vertical-align:middle; word-break:keep-all;}
    
    /* 모식도 01 */
    .digrm01{width:100%; font-size:0; line-height:0;}
    .digrm01 dl{position:relative; width:23.5%; margin-left:2%; display:inline-block; vertical-align:top; font-size:14px; line-height:1.2;}
    .digrm01 dl:after{content:""; position: absolute; left:-15px; top:50px; width:12px; height:12px; border:2px solid #888; border-left:0; border-bottom:0; box-sizing:border-box; -webkit-transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%);}
    .digrm01 dl.part01{margin-left:0;}
    .digrm01 dl.part01:after{display:none;}
    .digrm01 dl.line:before{content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#ccc; z-index:-1;}
    .digrm01 dt{position:relative; width:100px; height:100px; line-height:100px; margin:0 auto; border-radius:50%; text-align:center; border:5px solid #ccc; font-size:18px; font-family: 'NotoB'; background:#fff;}
    .digrm01 dd{position:relative; z-index:1;}
    .digrm01 dd:before{content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#ccc; z-index:-1;}
    .digrm01 .tit{margin-top:-5px; font-size:15px; text-align:center; border:1px solid #ccc; font-family: 'NotoM'; background:#fff;}
    .digrm01 .tit p{color:#fff; line-height:20px; min-height:40px; padding:10px 5px;}
    .digrm01 .tit span{display:block; line-height:18px; padding:10px 5px;}
    .digrm01 .box{background:#f1f1f1; margin:30px 0 0;}
    .digrm01 .box.topBox{margin:0; min-height:150px;}
    .digrm01 .box.arrCk::after{content:""; position: absolute; bottom:-13px; left:50%; display:block; width:11px; height:11px; margin-left:-4px; border:3px solid #097524; border-left:0; border-bottom:0; box-sizing:border-box; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
    .digrm01 .box p{line-height:20px; text-align:center; background:#777; color:#fff; padding:10px 5px; word-break: keep-all;}
    .digrm01 .box ul{padding:10px; overflow:hidden;}
    .digrm01 .boxWh{width:100%; margin:30px 0 0; border:1px solid #ccc; background:#fff; padding:10px; box-sizing:border-box; -webkit-box-sizing:border-box;}
    .digrm01 .botLine{position:relative; width:76%; padding:80px 0 0; border:1px solid #097524; border-top:0; margin:-50px auto 0; z-index:0;}
    .digrm01 .part01 dt,
    .digrm01 .part01 .tit{border-color:#1c807b;}
    .digrm01 .part01 .tit p{background:#1c807b;}
    .digrm01 .part01 .tit span{color:#1c807b;}
    .digrm01 .part02 dt,
    .digrm01 .part02 .tit{border-color:#295991;}
    .digrm01 .part02 .tit p{background:#295991;}
    .digrm01 .part02 .tit span{color:#295991;}
    .digrm01 .part03 dt,
    .digrm01 .part03 .tit{border-color:#307996;}
    .digrm01 .part03 .tit p{background:#307996;}
    .digrm01 .part03 .tit span{color:#307996;}
    .digrm01 .part04 dt,
    .digrm01 .part04 .tit{border-color:#48585e;}
    .digrm01 .part04 .tit p{background:#48585e;}
    .digrm01 .part04 .tit span{color:#48585e;}

/* 0402 학습역량평가 및 관리 */
.stepList3 {margin:10px -1% 0; overflow:hidden;}
.stepList3 dl{width:31.33%; margin:10px 1%; float:left; text-align:center; }
.stepList3 dt{background:#48585e; color:#fff; line-height:35px; font-size:16px; font-family: 'NotoM';}
.stepList3 dd{display:table; width:100%; height:120px; margin:5px 0 0; background:#f1f1f1;}
.stepList3 dd p{display:table-cell; padding:0 30px; vertical-align: middle; word-break:keep-all;}

/* 240620 센터소개 */
.flex_box {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.flex_box li {position: relative; width: 30%; padding:1.5rem 0rem 1rem; border-radius: 10px; background-color: #E7E6E6; overflow: hidden; margin-top: .5rem;}
.flex_box li span {position: absolute; top: 0; right: 0; display: block; padding: .3rem .5rem; color: #fff; border-radius: 0 0 0 10px;}
.flex_box li:nth-of-type(1) span {background-color: #FFC000;}
.flex_box li:nth-of-type(2) span {background-color: #4472C4}
.flex_box li:nth-of-type(3) span {background-color: #A5A5A5}
.flex_box li:nth-of-type(4) span {background-color: #92D050}
.flex_box li:nth-of-type(5) span {background-color: #F47956}
.flex_box li:nth-of-type(6) span {background-color: #3B7568}
@media screen and (max-width: 800px) {
    .flex_box li {width: 48%;}
}
@media screen and (max-width: 480px) {
    .flex_box li {width: 100%;}
}

@media screen and (max-width:1200px) {

    /* 0301 만족도조사안내 */
    .stepList2 > li .box {height:200px;}
}

@media screen and (max-width:980px) {
	 
	/* 0101_인사말 */
	.greeting .greet_top {padding:200px 0 0;}
	.greeting .greet_top:before {bottom:auto; top:0; width:100%; background-position:center top;}
	.greeting .greet_top .topTxt{display:block; min-width:auto; width:90%; max-width:100%; height:auto; margin:0 auto; padding:20px 30px 50px; box-sizing:border-box;}
	.greeting .topTxt p br {display:none;} 
    .greeting .topTxt .topTeng {bottom:20px; padding-left:90px; letter-spacing:0; }

    /* 0103 비교과란? */
    .aboutInfo .info .core .box:before{left:41%; width:18%;}
    .aboutInfo .info .core .box p{width:40%;}

    /* 0202 프로그램 이용안내 */
    .stepList > li{width:29%; margin:5px 0 5px 2%; padding-left:2%;}
    .stepList > li:first-child{margin-left:2%; padding-left:2%;}

    /* 0301 만족도조사안내 */
    .stepList2 > li .box {height:150px;}
    .stepList2 > li{width:46%; margin:5px 0 5px 2%; padding-left:2%;}
    .stepList2 > li:first-child{margin-left:2%; padding-left:2%;}
}

@media screen and (max-width:860px) {

    /* 0301 만족도조사안내 */
        /* 모식도 01 */
        .digrm01 {display:block;}
        .digrm01 dl {display:block; width:100%; margin:30px 0 0;}
        .digrm01 dl.part01 {margin:0;}
        .digrm01 dl:after{top:-20px; left:45px; transform: rotate(135deg); -webkit-transform: rotate(135deg);}
        .digrm01 dt{position:absolute; left:0; top:0; height:100%; border-radius:0; box-sizing:border-box; -webkit-box-sizing:border-box;}
        .digrm01 dt span{position:relative; left:50%; top:50%; display:block; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
        .digrm01 dd{margin-left:120px;}
        .digrm01 .box{margin:20px 0 0;}
        .digrm01 .box.topBox{min-height:0px;}
        .digrm01 dl.line:before,
        .digrm01 .box.arrCk::after,
        .digrm01 .botLine{display:none;}
        

    /* 0402 학습역량평가 및 관리 */
    .stepList3 dl{width:48%;}
    .stepList3 dd{height:100px;}
    .stepList3 dd p{padding:0 10px; font-size:14px;}

}

@media screen and (max-width:680px) {

    /* 0103 비교과란? */
    .aboutInfo dt{position:relative; left:auto; top:auto; width:auto; margin:0 0 40px;}
    .aboutInfo dt:before{ left:50%; top:auto; bottom:-35px; margin-top:0; margin-left:-10px; transform:rotate(90deg); -webkit-transform:rotate(90deg);}
    .aboutInfo dt span{left:auto; top:auto; transform:none; -webkit-transform:none; line-height:50px;}
    .aboutInfo dd{margin-left:0;}
    .aboutInfo .info p.tit_1,
    .aboutInfo .info p.tit_2{position:relative; height:auto; width:auto; top:auto; left:auto !important; right:auto !important; }
    .aboutInfo .info p.tit_1 span,
    .aboutInfo .info p.tit_2 span{left:auto; top:auto; transform:none; -webkit-transform:none; line-height:40px;}
    .aboutInfo .info .core{margin:10px 0;}
    .aboutInfo .info .core .box p{width:45%; font-size:14px;}
    .aboutInfo .info .core .box:before{left:46%; width:8%;}
}

@media screen and (max-width:590px) {

    /* 0301 만족도조사안내 */
    .stepList2 > li{width:100%; margin:15px 0 0; padding-left:0%; padding-top:25px;}
    .stepList2 > li:first-child{margin:0; padding:0;}
    .stepList2 > li:before{left:50%; top:-10px; -webkit-transform: rotate(135deg) translateY(-50%); -ms-transform: rotate(135deg) translateY(-50%); transform: rotate(135deg) translateY(-50%);}
    .stepList2 > li .box {height:auto; padding:15px 10px;}
    .stepList2 > li .box.titTy{padding:0;}        

    /* 0402 학습역량평가 및 관리 */
    .stepList3 dl{width:100%; margin:5px 0;}
    .stepList3 dd{height:auto;}
    .stepList3 dd p{padding:15px 10px;}

}

@media screen and (max-width:480px) {

    /* 0103 비교과란? */
    .aboutInfo dd p br{display:none;}
    .aboutInfo dd ul{display:block;}
    .aboutInfo dd ul li{display:block; padding:10px; margin:5px 0;}

    /* 0202 프로그램 이용안내 */
    .stepList > li{width:42%; margin:5px 0 5px 4%; padding-left:4%;}
    .stepList > li:first-child{margin-left:4%; padding-left:4%;}

    /* 0301 만족도조사안내 */
        /* 모식도 01 */
        .digrm01 dl:after{left:35px;}
        .digrm01 dt{width:80px; border-width:3px;}
        .digrm01 dd{margin-left:90px;}
}