.text_type1{margin-bottom:30px}
.mt40{margin-top:40px}
.pd70{padding:70px 0 20px}
.h3_title {display:flex;align-items: center;justify-content: center;font-weight:800}
.h3_title span img{width:50px;margin-right:10px}
.m0auto{margin:0 auto;}
.ai_guide_box{border-radius:20px;padding:40px 30px;margin-bottom:20px;}
.ai_guide_box.box1 div{display:flex;justify-content: space-between;align-items: center}
.ai_guide_box.box1 div dl{flex-basis: 45%;padding:150px 20px 20px 20px;border-radius:20px;}
.ai_guide_box.box1 div dl dt{font-size:20px;margin-bottom:20px;color:#333;font-weight:700;text-align:center}
.ai_guide_box.box1 div dl dd{border-radius:20px;padding:20px;height:140px}
.ai_guide_box.box1 div dl.before{background: #f0f0f5 url("/pages/kjcareer/img/sub/ai_guide_icon01.png") no-repeat center top}
.ai_guide_box.box1 div dl.after{background: #eaeafc url("/pages/kjcareer/img/sub/ai_guide_icon02.png") no-repeat center top}
.ai_guide_box.box1 div dl.before dd{background: #dde0e8}
.ai_guide_box.box1 div dl.after dd{background:#d2dbf5}
 span.arrow{width:100px;height:100px;background:url("/pages/kjcareer/img/sub/ai_guide_arrow.png") no-repeat center center}
span.line{display:block;width:100%;height:1px;background:#f2f2f2;margin:30px 0;}
.ai_guide_box.box2 > dl{display:flex;justify-content: center;flex-direction: column;align-items: center}
.ai_guide_box.box2 > dl dt{background:#4f5bda;border-radius:30px;padding:10px 20px;color:#fff;font-size:17px;font-weight:600;margin-bottom:10px;display:inline-block;}
.ai_guide_box.box2 > dl dd{padding:10px 0 20px;font-size:20px;font-weight:300;margin:20px 0 30px}
.ai_guide_box.box2 .flexbox {gap:10px;margin-bottom:10px}
.ai_guide_box.box2 .flexbox dl{width:50%;border:1px solid #ddd;border-radius:20px;padding:20px}
.ai_guide_box.box2 .flexbox dl dt{background:#333;border-radius:30px;padding:10px 20px;color:#fff;font-size:17px;font-weight:600;margin-bottom:10px;display:inline-block;}
.examplebox{background:#f3f3fd;border-radius:20px;margin:10px 0;padding:30px}
.examplebox > div{;align-items: center}
.examplebox > div > div{width:45%}
.examplebox .before{padding:20px;border-radius:20px;background:#fff}
.examplebox .before h4{margin-bottom:20px}
.examplebox .before h5{width:15%;font-size:16px;}
.examplebox .before textarea{border:1px solid #ddd;resize: none;height:150px;width:100%;padding:10px;border-radius:10px}
.examplebox .before button{margin:0 auto}
.examplebox .after .question_card{border-radius:20px;padding:25px 15px;margin:10px 0;}
.examplebox .after .question_card h4{font-size:16px;color:#111;margin-bottom:10px}
.examplebox .after .question_card .flexbox{justify-content: flex-start;align-items: center;margin:0}
.examplebox .after .question_card span{text-align:center;width:80px;height:80px;display:block;border-radius:50%;padding:15px 0}
.examplebox .after .question_card span em{display:block}
.examplebox .after .question_card.card1{background: #e7ebfa}
.examplebox .after .question_card.card1 span{color: #2d57bf;font-weight:700;background:#cfd5ed;}
.examplebox .after .question_card.card2{background: #f3e4e4}
.examplebox .after .question_card.card2 span{color: #b42b2b;font-weight:700;background:#eacece;}
.examplebox .after .question_card.card3{background: #d3f1e1}
.examplebox .after .question_card.card3 span{color: #386749;font-weight:700;background:#a8dec0;}
.examplebox img{max-width: 100%;margin-bottom:20px;border-radius:20px}

.evaluation_box{;display:flex;gap:30px}
.evaluation_box .leftbox{width:300px;padding:50px; position: relative;border-radius:20px;box-shadow: 0 0 15px rgba(0,0,0,.05);background:linear-gradient(120deg, #fff, transparent);}
.evaluation_box .leftbox p{font-size:70px;font-weight:700;line-height:80px}
.evaluation_box .leftbox svg{width:260px;height:260px}
.evaluation_box .leftbox .txt{position: absolute;text-align: center;left:52%;top:42%;color:#333}
.evaluation_box .leftbox .h3_title{margin-top:20px;margin-bottom:0;font-weight:300;flex-direction: column}
.evaluation_box .leftbox .h3_title span{font-weight:800;display:block;}
.evaluation_box .rightbox {background:linear-gradient(120deg, #fff, transparent);padding:35px;flex:1;border-radius:20px}
.evaluation_box .rightbox p{padding:10px 0 30px}

.circle-wrap {margin:0 auto;width: 150px;height: 150px;background: conic-gradient(#2563eb 0deg 180deg, #e5e7eb 180deg 360deg);border-radius: 50%;display: flex; align-items: center;justify-content: center;}
.circle-inner {width: 110px; height: 110px; background: #fafafe; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.grade {font-size: 28px;font-weight: bold;color: #2563eb;}
.label {font-size: 14px;color: #555;margin-top: 5px;}

.graphbox{margin:60px 0}
.graphbox div{border-radius:20px;background:#f0f0f0;padding:30px;gap:30px;margin-top:30px}
.graphbox div > div{background:#fff;padding:40px;margin:0}
.graphbox div img{border-radius:20px;width:100%}

.ai_guide_box.box3 .stepbox{background: #fffaf8;padding:30px;border-radius:20px}
.ai_guide_box.box3 dl{text-align:center;width:30%;padding-top:100px; }
.ai_guide_box.box3 dl.item01{background:url("/pages/kjcareer/img/sub/ai_guide_3icon01.png") no-repeat center top / 90px}
.ai_guide_box.box3 dl.item02{background:url("/pages/kjcareer/img/sub/ai_guide_3icon02.png") no-repeat center top / 90px}
.ai_guide_box.box3 dl.item03{background:url("/pages/kjcareer/img/sub/ai_guide_3icon03.png") no-repeat center top / 90px}
.ai_guide_box.box3 dl dt {font-size:30px;line-height:30px;font-weight:700;color:#333;margin-bottom:20px}
.ai_guide_box.box3 dl dt span{font-size:17px;font-weight:700;color:#111;display:block;}
.ai_guide_box.box3 .flexbox{align-items: center}

/****** Mobile ******/
@media screen and (min-width:320px) and (max-width:690px) {
 .ai_guide_box{padding:0}
 .ai_guide_box div{flex-direction: column;gap:0}
 .ai_guide_box.box1 div dl.before{background-size:70px;padding-top:80px}
 .ai_guide_box.box1 div dl.after{background-size:70px;padding-top:80px}
 .ai_guide_box.box1 div dl dd{height:auto;}
 span.arrow{transform: rotate(90deg);margin:0 auto;width:50px;height:50px;background-size:50px;}

 .ai_guide_box.box2 .flexbox dl{width:100%;padding:10px}
 .question_card{text-align:center}
 .examplebox{padding:15px}
 .examplebox > div > div{width:100%;margin-bottom:30px}
 .examplebox .before h5{width:100%}

 .evaluation_box .leftbox{width:100%;margin-bottom:30px}

 .ai_guide_box.box3 .stepbox{padding:10px;gap:10px}
 .ai_guide_box.box3 dl{width:100%}
 .ai_guide_box.box3 span.arrow{display:none;}
 .ai_guide_box.box3 dl {background-size:50px !important;display:flex;gap:20px;align-items:center;background-position: left center !important;padding:10px 0 10px 70px;background-color:#fff !important;text-align:left;border-radius:15px}
 .ai_guide_box.box3 dl dt{margin-bottom:5px}

 .graphbox div{padding:10px;margin:0;gap:10px}
}

/****** tablet ******/
@media screen and (min-width:691px) and (max-width:1180px) {
 .ai_guide_box.box1 div dl dd{height:250px;}
 .ai_guide_box.box1 div dl.before{background-size:70px;padding-top:80px}
 .ai_guide_box.box1 div dl.after{background-size:70px;padding-top:80px}

 span.arrow{margin:0 auto;width:50px;height:50px;background-size:50px;}

 .ai_guide_box.box2 .flexbox dl{width:100%;padding:10px}
 .ai_guide_box.box2 .examplebox .flexbox{flex-direction: column;}
 .ai_guide_box.box2 .examplebox .flexbox span.arrow{transform: rotate(90deg);}

 .examplebox{padding:15px}
 .examplebox > div > div{width:100%}
 .examplebox .before h5{width:100%}

 .examplebox .after{display:flex;gap:10px}
 .examplebox .after .question_card{text-align:center;width:33%}
}

/****** desktop*****/
@media screen and (min-width:1181px) and (max-width:1600px){

 .ai_guide_box.box1 div dl dd{height:180px}
 span.arrow{width:70px;height:70px;background-size:70px}
.question_card .flexbox div{flex:1}

.evaluation_box .rightbox{flex:1}

}