@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
.box2_1 { width: 100%; background-color: #004F9F; color: #fff; padding: 30px 0; margin: 20px 0; line-height: 1.5; }
.box2_1wrap { width: 90%; margin:0 auto; max-width: 1080px; display: flex; flex-direction: column; }
.box2_1wrap > .left { width: 100%; margin: 0 auto; padding: 10px 0; }
.box2_1wrap > .right { width: 100%; margin: 0 auto; padding: 10px 0; }
.box2_1 h5 { font-size: 20px; font-weight: bold; padding-bottom: 30px; }
.box2_1wrap > .left > p { padding-bottom: 5px; font-size: 17px; }
.box2_1wrap > .right > p { padding-bottom: 10px; font-size: 16px; }

.section1_2 { background-color: #004F9F; -webkit-background-color: #004f9fd6; -moz-background-color: #004f9fd6; /*background-color: #004f9fd6; */padding: 10px 0; } /*004F9F*/
.section1_2 > ul { max-width: 1080px; margin: 0 auto; width: 95%; }
.section1_2 > ul > li { border: 1px solid #fff; border-radius: 5px; height: 40px; max-width: 300px; }
.section1_21 { width: 30%; }
.section1_22 { width: 30%; margin: 0 4%; }
.section1_23 { width: 30%; }
.section1_2 > ul > li:hover { background-color: #fff; }
.section1_2 > ul > li > a { width: 100%; height: 100%; display: block; color: #fff; text-align: center; line-height: 40px; }
.section1_2 > ul > li:hover > a { color: #333; }

.busanimg { width: 100%; max-width: 900px; margin: 0 auto; padding: 20px 0; text-align: center; }
.busanimg > img { width: 100%; }

.kdt_ar { width: 100%; margin: 0 auto; overflow: hidden; font-family: 'Noto Sans KR', sans-serif; word-break: keep-all; }

.projectBox_color1 { background-color: #FACD63; }
.projectBox_color2 { background-color: #B09DEF; }
.projectBox_color3 { background-color: #F7798E; }

.projectbox_fontColor1 { color: #FACD63; font-weight: bold !important;}
.projectbox_fontColor2 { color: #B09DEF; font-weight: bold !important;}
.projectbox_fontColor3 { color: #F7798E; font-weight: bold !important;}


.kdt_ar .bigtitle { width: 100%; height: 400px; background-color: #020611; background-image: url(/assets/_img/kdt_gn/headerbg.png); background-repeat: no-repeat; color: #fff; background-position: left; }
.kdt_ar .bigtitle > .hbg { width: 100%; height: 400px; background: rgba(0,0,0,0.7); }
.kdt_ar .bigtitle > .hbg > .wrap { width: 90%; max-width: 1080px; margin: 0 auto; padding-top: 80px; }
.kdt_ar .bigtitle > .hbg > .wrap > .hflex { display: flex; align-items: center; text-align: left; line-height: 1.5; }
.kdt_ar .bigtitle > .hbg > .wrap > .hflex > .himg { width: 5%; }
.kdt_ar .bigtitle > .hbg > .wrap > .hflex > div > h5 { font-size: 18px; font-weight: 500; }
.kdt_ar .bigtitle > .hbg > .wrap > .hflex > div > h3 { color: #30FFB7; font-size: 22px; padding-top: 8px; font-weight: 500; line-height: 1.2;}
.kdt_ar .bigtitle > .hbg > .wrap > h1 { padding: 10px 0; font-size: 25px; line-height: 1.35; font-weight: bold; }
.kdt_ar .bigtitle > .hbg > .wrap > h5 {font-size: 12px; text-align:left; font-weight:400;color:#FACD63;line-height: 1.3;}


/* box1 */
.kdt_ar .box1 { padding: 27px; text-align: center; }
.kdt_ar .box1 > img { object-fit: contain; }
/* box2 */
.kdt_ar .box2 { width: 90%; margin: 0 auto; max-width:1080px; display: flex; flex-direction: column; align-items: center; }
.kdt_ar .box2 .arimg1 { display: none; }
.kdt_ar .box2 > .text > h5 { font-size: 18px; font-weight: bold; color: #707070; padding: 20px 0; line-height: 1.5; }

.kdt_ar .box2 > .text > .textwrap { width: 100%; margin: 0 auto; }
.kdt_ar .box2 > .text > .textwrap > .line1 { width: 100%; display: flex; flex-direction: column; }
.kdt_ar .box2 > .text > .textwrap > .line2 { width: 100%; display: flex; flex-direction: column; }
.kdt_ar .box2 > .text > .textwrap > .line3 { width: 100%; display: flex; flex-direction: column; }

.kdt_ar .box2 > .text > .textwrap > .line1 > .flex1 { width: 100%; border-top: 1px solid #707070; }
.kdt_ar .box2 > .text > .textwrap > .line1 > .flex2 { display: none; }
.kdt_ar .box2 > .text > .textwrap > .line1 > .flex3 { width: 100%; border-bottom: 1px dashed #707070; }

.kdt_ar .box2 > .text > .textwrap > .line2 > .flex1 { width: 100%; }
.kdt_ar .box2 > .text > .textwrap > .line2 > .flex2 { display: none; }
.kdt_ar .box2 > .text > .textwrap > .line2 > .flex3 { width: 100%; border-bottom: 1px dashed #707070; }

.kdt_ar .box2 > .text > .textwrap > .line3 > .flex1 { width: 100%; }
.kdt_ar .box2 > .text > .textwrap > .line3 > .flex2 { display: none; }
.kdt_ar .box2 > .text > .textwrap > .line3 > .flex3 { width: 100%; border-bottom: 1px solid #707070; }


.kdt_ar .box2 > .text > .textwrap > .line1 > .flex1 > p { font-size: 16px; font-weight: 500; color: #727476; padding-top: 15px; padding-bottom: 10px; }
.kdt_ar .box2 > .text > .textwrap > .line1 > .flex3 > span { font-size: 16px; font-weight: 400; color: #727476; line-height: 1.5; display: block; padding-bottom: 15px; }

.kdt_ar .box2 > .text > .textwrap > .line2 > .flex1 > p { font-size: 16px; font-weight: 500; color: #727476; padding-top: 20px; padding-bottom: 10px; }
.kdt_ar .box2 > .text > .textwrap > .line2 > .flex3 > span { font-size: 16px; font-weight: 400; color: #727476; line-height: 1.5; display: block; padding-bottom: 15px; }

.kdt_ar .box2 > .text > .textwrap > .line3 > .flex1 > p { font-size: 16px; font-weight: 500; color: #727476; padding-top: 20px; padding-bottom: 10px; }
.kdt_ar .box2 > .text > .textwrap > .line3 > .flex3 > span { font-size: 16px; font-weight: 400; color: #727476; line-height: 1.5; display: block; padding-bottom: 15px; }


/* box3 */
.kdt_ar .box3 { position: relative; width: 100%; margin: 25px 0; }
.kdt_ar .box3 .graybg_box3 { width: 100%; height: 543px; background-color:#f2f2f2; }
.kdt_ar .box3 .box3_absolut { position: absolute; top: 0; left: 0; width: 100%; margin: 0 auto; }
.kdt_ar .box3 .box3_absolut > div { width: 90%; max-width: 1080px; margin: 0 auto; }
.kdt_ar .box3 .box3_absolut > div > .left { margin-bottom: 24px; }
.kdt_ar .box3 .box3_absolut > div > .left > img { margin-top: 5px; }
.kdt_ar .box3 .box3_absolut > div > .left > h3 { font-size: 30px; line-height: 1.35; color:
#3f3f3f; font-weight: 400; letter-spacing: -1.44px; margin-bottom: 24px; }
.kdt_ar .box3 .box3_absolut > div > .left > h3 > span { font-weight: bold; }
.kdt_ar .box3 .box3_absolut > div > .left > p { font-size: 15px; line-height: 22px; letter-spacing: -0.32px; font-weight: 400; color:
#292a2d; }
.kdt_ar .box3 .box3_absolut > div > .left > p > span { font-weight: bold; }
.kdt_ar .box3 .box3_absolut > div > .right { width: 100%; }
.kdt_ar .box3 .box3_absolut > div > .right { width: 100%; }


.kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { position: absolute; top: 88%; left: 16%; }
.kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { position: absolute; top: 89%; left: 18.5%; }
.kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { position: absolute; top: 84%; left: 12%; font-size: 14px; }



/* box4 */
.kdt_ar .box4 { width: 100%; margin-top: 60px; margin-bottom: 41px; }
.kdt_ar .box4 > .wrap { width: 90%; max-width:400px; margin: 0 auto; }
.kdt_ar .box4 > .wrap > h4 { text-align: center; font-size: 16px; font-weight: bold; padding: 20px 0; }

.kdt_ar .box4 > .wrap > .cont1 { width: 100%; }
.kdt_ar .box4 > .wrap > .cont2 { width: 100%; }
.kdt_ar .box4 > .wrap > .cont1gridbox  { 
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 10px; column-gap: 10px;

}
.kdt_ar .box4 > .wrap > .cont1 > .cont1griditem {
  line-height: 1.3; background-color: #707070; text-align: center; color:#fff; font-size: 14px; padding: 5px 20px; box-sizing: border-box; 
  display:flex; align-items: center; justify-content: center;
}

.kdt_ar .box4 > .wrap > .cont2 > div > .left { width:53.5%; height: 27.03px; background-color: #707070; text-align: center; color:#fff; font-size: 14px; padding: 3px; box-sizing: border-box; }
.kdt_ar .box4 > .wrap > .cont2 > div > .right { width: 45%; height: 27.03px; background-color: #707070; text-align: center; color:#fff; font-size: 14px; padding: 3px; box-sizing: border-box; }
.kdt_ar .box4 > .wrap > .cont2 > div > p { width: 100%; height: 27.03px; background-color: #707070; text-align: center; color:#fff; font-size: 14px; padding: 3px; box-sizing: border-box; }


/* box5 */
.kdt_ar .box5 { width: 100%; margin-bottom: 41px; }
.kdt_ar .box5 > .wrap { width: 85%; margin: 0 auto; }
.kdt_ar .box5 > .wrap > h5 { padding: 20px 0; font-size: 16px; font-weight: bold; text-align: center; }
.kdt_ar .box5 > .wrap > table { border: 1px solid #707070; width: 100%; text-align: center; border-collapse: collapse; }
.kdt_ar .box5 > .wrap > table > thead { width: 100%; background-color: #B2A791; }
.kdt_ar .box5 > .wrap > table th { border-right: 1px solid #707070; line-height: 25px; }
.kdt_ar .box5 > .wrap > table .catagory { width: 1%; }
.kdt_ar .box5 > .wrap > table .jungu { width: 10%; }
.kdt_ar .box5 > .wrap > table .pj { width: 3%; }

.kdt_ar .box5 > .wrap > table tr { padding: 5px 0; border-bottom: 1px solid #707070; }
.kdt_ar .box5 > .wrap > table tr td { border-right: 1px solid #707070; font-size: 12px; font-weight: 400; padding: 10px 0; }

.kdt_ar .box5 > .wrap > table tr td.color1 { background-color: #F2F2D1; vertical-align: middle; }
.kdt_ar .box5 > .wrap > table tr td.color2 { background-color: #BFDDB2; vertical-align: middle; }
.kdt_ar .box5 > .wrap > table tr td.color3 { background-color: #D3E7E8; vertical-align: middle; }
.kdt_ar .box5 > .wrap > table tr td.color4 { background-color: #FACD63; vertical-align: middle; }
.kdt_ar .box5 > .wrap > table tr td.color5 { background-color: #84B6F3; vertical-align: middle; }
.kdt_ar .box5 > .wrap > table tr td.color6 { background-color: #F7798E; vertical-align: middle; }

.kdt_ar .box5 > .wrap > table tr td.boldt { font-weight: bold; vertical-align: middle; }


/* box5-1 */
.kdt_ar .box5-1 { display: none; }


/* box6 */
.kdt_ar .box6 { position: relative; width: 100%; margin: 25px 0; }
.kdt_ar .box6 .graybg_box6 { width: 100%; height: 640px; background-color:#f2f2f2; }
.kdt_ar .box6 .box6_absolut { position: absolute; top: 0; left: 0; width: 100%; margin: 0 auto; }
.kdt_ar .box6 .box6_absolut > div { width: 90%; margin: 0 auto; }
.kdt_ar .box6 .box6_absolut > div > .left { display: none; }
.kdt_ar .box6 .box6_absolut > div > .right { margin-left: 0px !important; margin-top: 30px; }
.kdt_ar .box6 .box6_absolut > div > .right > h2 { font-weight: 500; font-size: 27px; margin-bottom: 20px; line-height: 1.35; }
.kdt_ar .box6 .box6_absolut > div > .right > h2 > span { font-weight: bold; font-size: 38px; }
.kdt_ar .box6 .box6_absolut > div > .right > ul { line-height: 1.65; }
.kdt_ar .box6 .box6_absolut > div > .right > ul > li { display: flex; }
.kdt_ar .box6 .box6_absolut > div > .right > ul > li > .dot { width: 5%; }
.kdt_ar .box6 .box6_absolut > div > .right > ul > li > p { width: 90%; font-size: 15px; color: #020611; }
.kdt_ar .box6 .box6_absolut > div > .right > ul > li > p > span { font-weight: bold; }

.kdt_ar .box6 .box6_absolut > div > .right > .bottombox { margin-top: 20px; border-top: 1px solid #A7A7A7; border-bottom: 1px solid #A7A7A7; background-color: #fff; padding:10px; }
.kdt_ar .box6 .box6_absolut > div > .right > .bottombox > h5 { font-size: 14px; color: #727476; margin-bottom: 8px; }
.kdt_ar .box6 .box6_absolut > div > .right > .bottombox > p { font-size: 13px; color: #727476; line-height: 1.5; }


/* box7 */
.kdt_ar .box7 { width: 100%; }
.kdt_ar .box7 > .wrap { width: 90%; max-width: 1080px; margin: 0 auto; }

.kdt_ar .box7 > .wrap > .title {height: 150px; margin: 0 auto; position: relative; color: #261907; }
.kdt_ar .box7 > .wrap > .title > h2 { position: absolute; top:45px; left: 16%; font-size: 27px; font-weight: 400; line-height: 1.25; }
.kdt_ar .box7 > .wrap > .title > h2 > span { font-size: 38px; font-weight: bold; }

.kdt_ar .box7 > .wrap > .content { width: 100%; }
.kdt_ar .box7 > .wrap > .content > .projectBox1 { position: relative; max-width: 400px; width: 100%; height: 380px; margin: 0 auto; border: 1px solid #707070; margin-bottom: 100px; }
.kdt_ar .box7 > .wrap > .content > .projectBox1 > .pjimg { width: 100%; text-align: center; padding: 60px 0; }
.kdt_ar .box7 > .wrap > .content > .projectBox1 > p { width: 100%; text-align: center; position: absolute; top: 57%; font-size: 14px; color: #3A187A; }

.kdt_ar .box7 > .wrap > .content > .projectBox1 > .colorbox { position: absolute; top: 68%; left: 23px; width: 86%; height: auto; background-color: #FACD63; padding: 13px; box-sizing: border-box; z-index: 10;}
.kdt_ar .box7 > .wrap > .content > .projectBox1 > .colorbox > h5 { font-size: 18px; font-weight: 500; padding-bottom: 20px; text-align: center; line-height: 1.5; }
.kdt_ar .box7 > .wrap > .content > .projectBox1 > .colorbox > p { font-size: 15px; font-weight: 400; text-align: center; line-height: 1.5; }


.kdt_ar .box7 > .wrap > .content > .projectBox2 { position: relative; max-width: 400px; width: 100%; height: 380px; margin: 0 auto; border: 1px solid #707070; margin-bottom: 100px; }
.kdt_ar .box7 > .wrap > .content > .projectBox2 > .pjimg { width: 100%; text-align: center; padding: 39px 0; }
.kdt_ar .box7 > .wrap > .content > .projectBox2 > p { width: 100%; text-align: center; position: absolute; top: 52%; font-size: 14px; color: #3A187A; }

.kdt_ar .box7 > .wrap > .content > .projectBox2 > .colorbox { position: absolute; top: 68%; left: 23px; width: 86%; height: auto; background-color: #B09CEF; padding: 13px; box-sizing: border-box; }
.kdt_ar .box7 > .wrap > .content > .projectBox2 > .colorbox > h5 { font-size: 18px; font-weight: 500; padding-bottom: 20px; text-align: center; line-height: 1.5; }
.kdt_ar .box7 > .wrap > .content > .projectBox2 > .colorbox > p { width: 100%; text-align: center; font-size: 15px; font-weight: 400; line-height: 1.5; }



.kdt_ar .box7 > .wrap > .content > .projectBox3 { position: relative; max-width: 400px; width: 100%; height: 380px; margin: 0 auto; border: 1px solid #707070; margin-bottom: 200px; }
.kdt_ar .box7 > .wrap > .content > .projectBox3 > .pjimg { width: 100%; text-align: center; padding: 59px 0; }
.kdt_ar .box7 > .wrap > .content > .projectBox3 > p { width: 100%; text-align: center; position: absolute; top: 57%; font-size: 14px; color: #3A187A; }

.kdt_ar .box7 > .wrap > .content > .projectBox3 > .colorbox { position: absolute; top: 68%; left: 23px; width: 86%; height: auto; background-color: #FC7A8E; padding: 13px; box-sizing: border-box; }
.kdt_ar .box7 > .wrap > .content > .projectBox3 > .colorbox > h5 { font-size: 18px; font-weight: 500; padding-bottom: 20px; text-align: center; line-height: 1.5; }
.kdt_ar .box7 > .wrap > .content > .projectBox3 > .colorbox > p { font-size: 15px; font-weight: 400; text-align: center; line-height: 1.5; }


/* box8 */
.kdt_ar .box8 { width: 100%; background-color: #ededed; padding-bottom: 150px; }
.kdt_ar .box8 img { width: 100%; }
.kdt_ar .box8 > .wrap { width: 90%; margin: 0 auto; }
.kdt_ar .box8 > .wrap > h5 { text-align: center; padding: 20px 0; font-size: 16px; }
.kdt_ar .box8 > .wrap > .java { border: 1px solid #707070; padding-bottom: 25px; }
.kdt_ar .box8 > .wrap > .java > .jtitle { text-align: center; background-color: #FACD63; color: #3A187A; font-weight: bold; padding: 5px 0; font-size: 16px; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 { display: flex; justify-content: center; align-items: center; flex-direction: column; }

.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > h5 { padding-top: 30px; padding-bottom: 10px; font-size: 14px; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > .jimg > div { margin: 5px 5px; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .mline { height: 2%; padding: 10px 0; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .mline > p { width: 90%; margin: 0 auto; height: 1px; background-color: #707070; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > h5 { padding: 10px 0; font-size: 14px; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > .jimg > div { display: flex; justify-content: center; align-items: center; margin: 5px 0; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > .jimg > div > img { width: 100%; max-width: 200px; }


.kdt_ar .box8 > .wrap > .android { border: 1px solid #707070; margin-top: 20px; padding-bottom: 25px; }
.kdt_ar .box8 > .wrap > .android > .atitle { text-align: center; background-color: #B09CEF; color: #3A187A; font-weight: bold; padding: 5px 0; font-size: 16px; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 { display: flex; justify-content: center; align-items: center; flex-direction: column; }

.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 > h5 { padding-top: 30px; padding-bottom: 10px; font-size: 14px; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 > .aimg > div { margin: 5px 5px; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .middleline { height: 2%; padding: 10px 0; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .middleline > p { width: 90%; margin: 0 auto; height: 1px; background-color: #707070; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > h5 { padding: 10px 0; font-size: 14px; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > .aimg > div { display: flex; justify-content: center; align-items: center; margin: 5px 0; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > .aimg > div > img { width: 100%; max-width: 200px; }


.kdt_ar .box8 > .wrap > .arpj { border: 1px solid #707070; margin-bottom: 50px; margin-top: 20px; padding-bottom: 25px; }
.kdt_ar .box8 > .wrap > .arpj > .atitle { text-align: center; background-color: #FC7A8E; color: #3A187A; font-weight: bold; padding: 5px 0; font-size: 16px; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative;}
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > h5 { padding-top: 30px; padding-bottom: 10px; font-size: 14px; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > h5 { padding: 15px 0; font-size: 14px; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > h5 { padding: 15px 0; font-size: 14px; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > div { margin: 5px 5px; text-align: center; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > h5 { font-size: 14px; margin: 15px 0; text-align: center; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > div > h5 { margin: 15px 0; font-size: 14px; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .middleline { height: 2%; padding: 10px 0; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .middleline > p { width: 90%; margin: 0 auto; height: 1px; background-color: #707070; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > .middleline { height: 2%; padding: 10px 0; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > .middleline > p { width: 90%; margin: 0 auto; height: 1px; background-color: #707070; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > .aimg > div { display: flex; justify-content: center; align-items: center; margin: 5px 0; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > .aimg > div > img { width: 100%; max-width: 200px; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 { display: flex; justify-content: center; align-items: center; flex-direction: column; }


/* box9 */
.kdt_ar .box9 { width: 100%; position: relative; }
.kdt_ar .box9 > .wrap { width: 95%; margin: 0 auto; background-color: #2A343D; }

.kdt_ar .box9 > .wrap > .b9title { width: 100%; color: #fff; }
.kdt_ar .box9 > .wrap > .b9title > .left1 { width: 100%; padding:10px 20px 30px 20px; background-color: #29B6F6; }
.kdt_ar .box9 > .wrap > .b9title > .left1 > div > p { font-size: 30px; }
.kdt_ar .box9 > .wrap > .b9title > .left1 > .onestop { padding: 5px 0; line-height: 1; }
.kdt_ar .box9 > .wrap > .b9title > .left1 > div > span { font-size: 38px; font-weight: bold; }


.kdt_ar .box9 > .wrap > .b9title > .left2 { padding-left: 34%; font-size: 14px; padding-top: 17px; height: 120px; }
.kdt_ar .box9 > .wrap > .text { width: 85%; margin: 0 auto; }
.kdt_ar .box9 > .wrap > .text > h5 { font-size: 16px; font-weight: bold; color: #29B6F6; padding-bottom: 20px; line-height: 1.5; }
.kdt_ar .box9 > .wrap > .text > p { font-size: 16px; color: #fff; padding-bottom: 20px; line-height: 1.5; font-size: 14px; }
.kdt_ar .box9 > .wrap > .b9title > .left2 > p { line-height: 1.75; }
.kdt_ar .box9 > .wrap > .b9title > .left2 > p > span { font-weight: bold; }


.kdt_ar .box9 > .wrap > .b9title > .left3 { position: absolute; top:6.5%; left: 4%; padding: 10px 5px; background-color: #29B6F6; }
.kdt_ar .box9 > .wrap > .b9title > .left3 > img { width: 100%; max-width: 80px; }



/* boxGroup */
.kdt_ar .box9 > .wrap > .contbox > .boxGroup { display: grid; grid-template-columns: repeat(1,1fr); grid-row-gap: 35px; margin-top: 40px;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 { position: relative; width: fit-content; margin: 0 auto; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox > h3 { font-size: 22px; font-weight: bold; text-align: center; padding: 15px 0; color: #EFB533; letter-spacing: 2px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent { text-align: center; width: 281px; height: 275px; margin: 0 auto; position: relative;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > img {width: 100%; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div {
  width: 100%; height: 100%;
  margin: 0 auto; position: absolute;
  top: 0%; left: 0%; line-height: 1.5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div > h5 { text-align: center; color: #fff; font-size: 18px; font-weight: bold; padding: 10px 0; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div > img { text-align: center; margin-top: 10px; }

.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div > div { width: 100%; display: flex; align-items: center; justify-content: center; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div > div > p { text-align: left; color: #fff; padding-top: 25px;  font-size: 14px; }

.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 { position: relative; width: fit-content;  margin: 0 auto; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox > h3 { font-size: 22px; font-weight: bold; text-align: center; padding: 15px 0; color: #FD983B; letter-spacing: 2px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent { text-align: center; width: 281px; height: 275px; margin: 0 auto; position: relative;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > img {width: 100%; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0%;
  left: 0%;
  line-height: 1.5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div > h5 { text-align: center; color: #fff; font-size: 18px; font-weight: bold; padding: 10px 0; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div > img { text-align: center; margin-top: 10px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div > div { width: 100%; display: flex; align-items: center; justify-content: center; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div > div > p { text-align: left; color: #fff; padding-top: 25px;  font-size: 14px; }


.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 { position: relative; width: fit-content;  margin: 0 auto; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox > h3 { font-size: 22px; font-weight: bold; text-align: center; padding: 15px 0; color: #FD668B; letter-spacing: 2px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent { text-align: center; width: 281px; height: 275px; margin: 0 auto; position: relative;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > img {width: 100%; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0%;
  left: 0%;
  line-height: 1.5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div > h5 { text-align: center; color: #fff; font-size: 18px; font-weight: bold; padding: 10px 0; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div > img { text-align: center; margin-top: 10px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div > div { width: 100%; display: flex; align-items: center; justify-content: center; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div > div > p { text-align: left; color: #fff; padding-top: 25px;  font-size: 14px; }

.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 { position: relative; width: fit-content;  margin: 0 auto; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox > h3 { font-size: 22px; font-weight: bold; text-align: center; padding: 15px 0; color: #42D1B5; letter-spacing: 2px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent { text-align: center; width: 281px; height: 275px; margin: 0 auto; position: relative;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > img { width: 100%;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0%;
  left: 0%;
  line-height: 1.5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div > h5 { text-align: center; color: #fff; font-size: 18px; font-weight: bold; padding: 10px 0; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div > img { text-align: center; margin-top: 10px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div > div { width: 100%; display: flex; align-items: center; justify-content: center; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div > div > p { text-align: left; color: #fff; padding-top: 25px;  font-size: 14px; }

.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 { position: relative; width: fit-content;  margin: 0 auto; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox > h3 { font-size: 22px; font-weight: bold; text-align: center; padding: 15px 0; color: #40D3E2; letter-spacing: 2px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent { text-align: center; width: 281px; height: 275px; margin: 0 auto; position: relative;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > img {width: 100%; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0%;
  left: 0%;
  line-height: 1.5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div > h5 { text-align: center; color: #fff; font-size: 18px; font-weight: bold; padding: 10px 0; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div > img { text-align: center; margin-top: 10px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div > div { width: 100%; display: flex; align-items: center; justify-content: center; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div > div > p { text-align: left; color: #fff; padding-top: 25px;  font-size: 14px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 { position: relative; width: fit-content;  margin: 0 auto; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox > h3 { font-size: 22px; font-weight: bold; text-align: center; padding: 15px 0; color: #41A3E0; letter-spacing: 2px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent { text-align: center; width: 281px; height: 275px; margin: 0 auto; position: relative;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > img {width: 100%; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0%;
  left: 0%;
  line-height: 1.5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div > h5 { text-align: center; color: #fff; font-size: 18px; font-weight: bold; padding: 10px 0; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div > img { text-align: center; margin-top: 10px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div > div { width: 100%; display: flex; align-items: center; justify-content: center; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div > div > p { text-align: left; color: #fff; padding-top: 25px; font-size: 14px; }

.bottomtext { color: #fff; font-weight: bold; font-size: 29px; width: 100%; margin: 0 auto; text-align: center; padding: 100px 0; background-color: #2A343D; line-height: 1.5; }
.bottomtext > p { width: 90%; margin: 0 auto; }


/* ---------------------------------------------------------------------------------------------------------------- */
@media all and (min-width: 420px) {
.kdt_ar .bigtitle > .hbg > .wrap > h5 {font-size: 14px; text-align:right; margin-top: 10px;}

.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div > p,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div > p,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div > p,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div > p,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div > p,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div > p{ padding-left: 14%; font-size: 16px; }
.kdt_ar .box9 > .wrap > .contbox > .boxGroup { margin-top: 55px;}

.kdt_ar .box9 > .wrap > .b9title > .left3 {left: 8%;}

.kdt_ar .box7 > .wrap > .content > .projectBox1 > .colorbox,
.kdt_ar .box7 > .wrap > .content > .projectBox2 > .colorbox,
.kdt_ar .box7 > .wrap > .content > .projectBox3 > .colorbox{ left: 7%; }

.kdt_ar .box7 > .wrap > .content > .projectBox1 > img,
.kdt_ar .box7 > .wrap > .content > .projectBox2> img,
.kdt_ar .box7 > .wrap > .content > .projectBox3 > img{ left: 34%; }

.kdt_ar .box6 .graybg_box6 { height: 570px; }
}

@media all and (min-width:540px){
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { left: 14%; }
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { left: 15.5%; }
}

@media all and (min-width:640px) {
  .kdt_ar .box4 > .wrap{max-width: 1080px;}
  .kdt_ar .box4 > .wrap > .cont1gridbox {grid-template-columns: repeat(2, 1fr);}

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-row-gap: 25px;
    margin: 0 auto;
    margin-top: 50px;
  }
  .kdt_ar .box9 > .wrap > .b9title > .left3 {top: 11.2%;}
}

@media all and (min-width: 768px) {
.summer22_wrap { width: 100%; max-width: 900px; margin: 0 auto; }
.box2_1wrap > .left > p,
.box2_1wrap > .right > p{ padding-bottom: 20px; }
.kdt_ar .bigtitle { text-align: left; background-position: left; }

.kdt_ar .bigtitle > .hbg > .wrap > .hflex { display: flex; }
.kdt_ar .bigtitle > .hbg > .wrap > .hflex > .himg { width: 3%; }
.kdt_ar .bigtitle > .hbg > .wrap > .hflex > div > h5 { font-size: 20px; }
.kdt_ar .bigtitle > .hbg > .wrap > .hflex > div > h3 { font-size: 28px; color: #30FFB7; font-weight: 500; }
.kdt_ar .bigtitle > .hbg > .wrap > h1 { padding-top: 30px; font-size: 32px; font-weight: bold; }
.kdt_ar .bigtitle > .hbg > .wrap > h1 > .smallt { font-size: 36px; }
.kdt_ar .bigtitle > .hbg > .wrap > h5 {font-size: 16px; margin-top:20px;padding-right:30px;}


/* box2 */
.kdt_ar .box2 .arimg1 { display: block; margin-bottom: 25px; }
.kdt_ar .box2 .arimg1 > img { margin-top: 12px; width:100%; max-width:363px; }
.kdt_ar .box2 {padding-bottom: 60px; }
.kdt_ar .box2 > .text > h5 { color:#4E4F51; padding: 5px 0 0 19px; padding-bottom: 7px; font-size: 20px; }



.kdt_ar .box2 > .text > .textwrap > .line1 { border-bottom: 1px dashed #707070; border-top: 1px solid #707070;}
.kdt_ar .box2 > .text > .textwrap > .line2 { border-bottom: 1px dashed #707070; }
.kdt_ar .box2 > .text > .textwrap > .line3 { border-bottom: 1px solid #707070; }
.kdt_ar .box2 > .text > .textwrap > .line1,
.kdt_ar .box2 > .text > .textwrap > .line2,
.kdt_ar .box2 > .text > .textwrap > .line3{ flex-direction: row; padding: 10px 0; }




.kdt_ar .box2 > .text > .textwrap { width: 95%; margin: 0 auto; }
.kdt_ar .box2 > .text > .textwrap > .line1 > .flex1 {border-top: 0;}
.kdt_ar .box2 > .text > .textwrap > .line1 > .flex1,
.kdt_ar .box2 > .text > .textwrap > .line2 > .flex1,
.kdt_ar .box2 > .text > .textwrap > .line3 > .flex1 { width: 20%; padding-left: 10px; padding-top: 2px;}

.kdt_ar .box2 > .text > .textwrap > .line1 > .flex2,
.kdt_ar .box2 > .text > .textwrap > .line2 > .flex2,
.kdt_ar .box2 > .text > .textwrap > .line3 > .flex2 { display: block; padding-top: 4px; width: 2%; }

.kdt_ar .box2 > .text > .textwrap > .line1 > .flex3,
.kdt_ar .box2 > .text > .textwrap > .line2 > .flex3,
.kdt_ar .box2 > .text > .textwrap > .line3 > .flex3 { width: 78%; border-bottom: 0; }

.kdt_ar .box2 > .text > .textwrap > .line1 > .flex1 > p,
.kdt_ar .box2 > .text > .textwrap > .line2 > .flex1 > p,
.kdt_ar .box2 > .text > .textwrap > .line3 > .flex1 > p{ padding-top: 0; padding-bottom: 0; }

.kdt_ar .box2 > .text > .textwrap > .line1 > .flex3 > span,
.kdt_ar .box2 > .text > .textwrap > .line2 > .flex3 > span,
.kdt_ar .box2 > .text > .textwrap > .line3 > .flex3 > span{ padding-bottom: 0; }


 /* box3 */
.kdt_ar .box3 { margin-top: 93px; }
.kdt_ar .box3 .graybg_box3 { width: 72%; height: 293px; }
.kdt_ar .box3 .box3_absolut > div { display: flex;}
.kdt_ar .box3 .box3_absolut > div > .left { width: 51%; }
.kdt_ar .box3 .box3_absolut > div > .right { width: 50%; position: relative; }
.kdt_ar .box3 .box3_absolut > div > .left > h3 { margin-left: 20px; line-height: 1.35; }
.kdt_ar .box3 .box3_absolut > div > .left > h3 > span { font-size: 38px; }
.kdt_ar .box3 .box3_absolut > div > .left > p { margin-left: 20px; }
.kdt_ar .box3 .box3_absolut > div > .right > img { margin-top: 17px; }

.kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { top: 99.3%; left: 91%; }
.kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { top: 101%; left: 74.5%; }
.kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { top: 98.5%; left: 55.5%; }


/* box4 */

/* box5 */
.kdt_ar .box5 { display: none; }


/* box5-1 */
.kdt_ar .box5-1 { width: 100%; display: block; }
.kdt_ar .box5-1 > .wrap { width: 100%; max-width: 1080px; margin: 0 auto; }
.kdt_ar .box5-1 > .wrap > h5 { text-align: center; font-size: 16px; font-weight: bold; padding: 20px 0; }
.kdt_ar .box5-1 > .wrap > .pctable { width: 100%; border: 1px solid #707070; text-align: center; border-collapse: collapse; }
.kdt_ar .box5-1 > .wrap > .pctable th { border-bottom: 1px solid #707070; border-right: 1px solid #707070; padding: 10px 0; width: 14%; font-size: 14px; background-color: #B2A791; }
.kdt_ar .box5-1 > .wrap > .pctable tr td { border-right: 1px solid #707070; border-bottom: 1px solid #707070; padding: 15px 0; font-size: 14px; vertical-align: middle; }
.kdt_ar .box5-1 > .wrap > .pctable tr .textbold { font-weight: bold; vertical-align: middle; }
.wrap > .pctable tr .color1 { background-color: #F2F2D1; }
.wrap > .pctable tr .color2 { background-color: #BFDDB2; }
.wrap > .pctable tr .color3 { background-color: #D3E7E8; }
.wrap > .pctable tr .color4 { background-color: #FACD63; }
.wrap > .pctable tr .color5 { background-color: #B09DEF; }
.wrap > .pctable tr .color6 { background-color: #F7798E; }

/* box6 */
.kdt_ar .box6 { width: 100%; margin-top: 100px; }
.kdt_ar .box6 .graybg_box6 { width: 80%; height: 500; margin-left: 35%; overflow: hidden; }
.kdt_ar .box6 .box6_absolut { top: -25px; }
.kdt_ar .box6 .box6_absolut > div { width: 100%; max-width: 1080px; display: flex; align-items: center; }
.kdt_ar .box6 .box6_absolut > div > .left { display: block; padding-top: 52px; }
.kdt_ar .box6 .box6_absolut > div > .left > .bespin_course_point_img { max-width:402px; margin-right:50px;}

.kdt_ar .box6 .box6_absolut > div > .right > h2 { padding-left: 20px; font-size: 30px; color: #3F3F3F; }
.kdt_ar .box6 .box6_absolut > div > .right > h2 > span { font-size: 38px; color: #3F3F3F; }
.kdt_ar .box6 .box6_absolut > div > .right > ul { padding-left: 20px; }
.kdt_ar .box6 .box6_absolut > div > .right > .bottombox { margin-left: 20px; }
.kdt_ar .box6 .box6_absolut > div > .right > ul > li > .dot { width: 2%; }
.kdt_ar .box6 .box6_absolut > div > .right > ul > li > p { font-size: 16px; }

 /* box7 */
.kdt_ar .box7 > .wrap { position: relative; top: 0; z-index: 1; }
.kdt_ar .box7 > .wrap > .title { padding-bottom: 30px; }
.kdt_ar .box7 > .wrap > .title > h2 { left: 3%; top: 30%; }
.kdt_ar .box7 > .wrap > .content { display: flex; justify-content: space-between; column-gap: 20px;}
/* .kdt_ar .box7 > .wrap > .content > .projectBox1,
.kdt_ar .box7 > .wrap > .content > .projectBox2{ margin-right: 20px; } */
.kdt_ar .box7 > .wrap > .content > .projectBox1 > img,
.kdt_ar .box7 > .wrap > .content > .projectBox2 > img,
.kdt_ar .box7 > .wrap > .content > .projectBox3 > img{ left: 27%; }

.kdt_ar .box8 { margin: 0 auto; }
.kdt_ar .box8 > .wrap > .guiproject { width: 100%; }
.kdt_ar .box8 > .wrap > .guiproject > .contentbox { display: flex; }
.kdt_ar .box8 > .wrap > .guiproject > .contentbox > .left { border-bottom: 0px; border-right: 1px solid #707070; }


/* box8 */
.kdt_ar .box8 { width: 100%; }
.kdt_ar .box8 > .wrap { width: 100%; max-width: 1241px; margin: 0 auto; position: relative; top: 0; padding-top: 130px; }
.kdt_ar .box8 > .wrap > h5 { text-align: center; font-weight: bold; padding-bottom: 40px; font-size: 16px; }

/* java */
.kdt_ar .box8 > .wrap > .java { background-color: #fff; border: 1px solid #707070; margin-bottom: 50px; padding-bottom: 0; }
.kdt_ar .box8 > .wrap > .java > .jtitle { text-align: center; background-color:#FACD63; color: #3A187A; padding: 10px 0; font-weight: bold; font-size: 16px; }

.kdt_ar .box8 > .wrap > .java > .jimgbox { width: 100%; display: flex; margin: 0 auto; padding: 10px; box-sizing: border-box; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 { width: 49%; text-align: center }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > .jimg { display: flex; justify-content: space-around; align-items: center; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .mline { width: 2%; height: auto; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .mline > p { width: 1px; height: 100%; background-color: #020611; margin: 0 auto; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 { width: 49%; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > .jimg { display: flex; justify-content: space-around; align-items: center; text-align: center; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > .jimg > div { margin: 0 5px; flex-direction: column; }

/* android */
.kdt_ar .box8 > .wrap > .android { background-color: #fff; border: 1px solid #707070; margin-bottom: 50px; padding-bottom: 0; }
.kdt_ar .box8 > .wrap > .android > .atitle { text-align: center; background-color:#B09CEF; color: #3A187A; padding: 10px 0; font-weight: bold; font-size: 16px; }

.kdt_ar .box8 > .wrap > .android > .aimgbox { width: 100%; display: flex; margin: 0 auto; padding: 10px; box-sizing: border-box; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 { width: 49%; text-align: center }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 > .aimg { display: flex; justify-content: space-around; align-items: center; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .middleline { width: 2%; height: auto; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .middleline > p { width: 1px; height: 100%; background-color: #020611; margin: 0 auto; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 { width: 49%; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > .aimg { display: flex; justify-content: space-around; align-items: center; text-align: center; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > .aimg > div { margin: 0 5px; }

/* arpj */
.kdt_ar .box8 > .wrap > .arpj { background-color: #fff; border: 1px solid #707070; padding-bottom: 0; }
.kdt_ar .box8 > .wrap > .arpj > .atitle { text-align: center; background-color:#FC7A8E; color: #3A187A; padding: 10px 0; font-weight: bold; font-size: 16px; }

.kdt_ar .box8 > .wrap > .arpj > .aimgbox { width: 100%; display: flex; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 { text-align: center }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > .aimg { display: flex; justify-content: space-around; align-items: center; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .middleline { width: 3%; height: auto; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .middleline > p { width: 1px; height: 100%; background-color: #020611; margin: 0 auto; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > .aimg { display: flex; justify-content: space-around; align-items: center; text-align: center; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > .aimg > div { margin: 0 5px; }

.kdt_ar .box8 > .graybg { width: 100%; height: 1550px; background-color: #ededed; }


.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1,
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2,
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1,
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2,
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 { position: relative; }

.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > h5,
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > h5,
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 > h5,
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > h5,
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > h5,
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > h5,
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > h5{ position: absolute; font-size: 15px; font-weight: 400; }

.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > h5 { top: 7%; left: 3.5%; padding-top: 0; padding-bottom: 0; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > h5 { top: 7%; left: 3.5%; padding: 0; }

.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 > h5 { top: 3%; left: 3.5%; padding-top: 0; padding-bottom: 0; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > h5 { top: 5%; left: 3.5%; padding: 0; }

.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > h5 { top: 3%; left: 0.5%; padding-top: 0; padding-bottom: 0; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > h5 { top: 3%; left: 3.5%; padding: 0; }

.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > h5 { top: 7%; left: 3.5%; padding-top: 0; padding-bottom: 0; }

.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > .jimg,
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > .jimg,
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 > .aimg{ padding-top: 30px; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > .aimg { padding-top: 8px; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > .aimg { padding-top: 0; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > .aimg > div > .topimg { padding-top: 39; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > .aimg { padding-top: 40px; }

.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > h5,
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > div > h5{ font-weight: 400; font-size: 16px; padding: 10px 0; }

/* -------------------------- */
/* .kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 { position: relative; }

.kdt_ar .box8 > .wrap > .java > .jimgbox > .section1 > .jimg { padding-top: 30px; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 { position: relative; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > h5 { position: absolute; top: 7%; left: 3.5%; font-size: 15px; font-weight: 400; padding: 0; }
.kdt_ar .box8 > .wrap > .java > .jimgbox > .section2 > .jimg { padding-top: 30px; }


.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 { position: relative; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 > h5 { position: absolute; top: 3%; left: 3.5%; font-size: 15px; font-weight: 400; padding-top: 0; padding-bottom: 0; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section1 > .aimg { padding-top: 30px; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 { position: relative; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > h5 { position: absolute; top: 5%; left: 3.5%; font-size: 15px; font-weight: 400; padding: 0; }
.kdt_ar .box8 > .wrap > .android > .aimgbox > .section2 > .aimg { padding-top: 8px; }


.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 { position: relative; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > h5 { position: absolute; top: 3%; left: 0.5%; font-size: 15px; font-weight: 400; padding-top: 0; padding-bottom: 0; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > .aimg { padding-top: 0; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section1 > .aimg > div > .topimg { padding-top: 39; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 { position: relative; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > h5 { position: absolute; top: 3%; left: 3.5%; font-size: 15px; font-weight: 400; padding: 0; }
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section2 > .aimg { padding-top: 40px; }

.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > h5,
.kdt_ar .box8 > .wrap > .arpj > .aimgbox > .section3 > .aimg > div > h5{ font-weight: 400; font-size: 16px; padding: 10px 0; } */


/* box9 */
.kdt_ar .box9 { width: 100%; padding-top: 150px; position: relative; background-color: #2A343D; }
.kdt_ar .box9 > .wrap { max-width: 1080px; margin: 0 auto; }

.kdt_ar .box9 > .wrap > .b9title { width: auto; position: absolute; top: -40px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.kdt_ar .box9 > .wrap > .b9title > .left1 { background-color: #29B6F6; width: 50%; padding: 5px 15px 20px 40px; line-height: 1.35; }
.kdt_ar .box9 > .wrap > .b9title > .left1 > div > p { font-size: 30px;  font-weight: 500; }
.kdt_ar .box9 > .wrap > .b9title > .left1 > div > p.onestop { display: inline; font-size: 30px;  }
.kdt_ar .box9 > .wrap > .b9title > .left1 > div > span { font-size: 38px; font-weight: bold; }
.kdt_ar .box9 > .wrap > .b9title > .left1 > div{padding-left: 30px;}

.kdt_ar .box9 > .wrap > .b9title > .left2 { width: 25%; line-height: 1.5; padding-left: 0; }
.kdt_ar .box9 > .wrap > .b9title > .left2 > p { padding-top: 30px; }
.kdt_ar .box9 > .wrap > .b9title > .left2 > p > span { font-weight: bold; }

.kdt_ar .box9 > .wrap > .b9title > .left3 { width: 15%; position: relative; top: 0; left: 0; padding: 0; background-color: transparent; }
.kdt_ar .box9 > .wrap > .b9title > .left3 > div { position: absolute; top: -22px; left: 25px; width: 49px; height: 49px; background-color: #29B6F6; }
.kdt_ar .box9 > .wrap > .b9title > .left3 > img { padding-top: 40px; width: auto; max-width:150px; }


.kdt_ar .box9 > .wrap > .text { padding: 60px 0; line-height: 1.5; }
.kdt_ar .box9 > .wrap > .text > h5,
.kdt_ar .box9 > .wrap > .text > p{ padding-bottom: 5px; font-size: 16px; }

.kdt_ar .box9 > .wrap > .contbox > .boxGroup {margin-top: 80px; grid-row-gap: 40px;}
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div{ width: 100%; left: 0; }


/* boxGroup */
/* box01 ~ box06 */
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06{ position: relative; top: -70px; }

.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox{ padding: 5px 20px 0px 20px; width: auto;}

.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox > h3,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox > h3,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox > h3,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox > h3,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox > h3,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox > h3{ font-size: 24px;}

.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div,
.kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div{ width: 100%;}

.bottomtext { padding: 0 0 100px 0; line-height: 1.5; }
}


@media all and (min-width:840px) {
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox {left: 88%; }
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline {left: 73.5%; }
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p {left: 56%; }
}

@media all and  (min-width:900px) {
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup {grid-template-columns: repeat(3,1fr);}
}

@media all and (min-width :960px){
  .kdt_ar .box9 > .wrap > .text { width: 90%;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent { width: 291px;  height: 285px; }

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox > h3 { font-size: 26px;}

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div > div > p,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div > div > p,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div > div > p,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div > div > p,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div > div > p,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div > div > p{font-size: 16px;}

  /* .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox { width: 250px;} */

  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { top: 75.1%; left: 97%; }
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { top: 77%; left: 83.5%; }
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { top: 82.5%; left: 85%; }
}

@media all and (min-width:1000px) {
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox {left: 95%; }
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline {left: 82.5%; }
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p {left: 83%; }

  .kdt_ar .bigtitle > .hbg > .wrap > .hflex > div > h5{font-size: 22px;}
  .kdt_ar .bigtitle > .hbg > .wrap > .hflex > div > h3{ font-size: 34px; }
  .kdt_ar .bigtitle > .hbg > .wrap > h1 { padding-top: 15px; font-size: 38px;}
	.kdt_ar .bigtitle > .hbg > .wrap > h5 {font-size: 18px;}
}

@media all and (min-width: 1080px) {
  .box2_1wrap {flex-direction: row; }
  .box2_1wrap > .left,
  .box2_1wrap > .right{ width: 50%; }
  .kdt_ar .box2 {flex-direction: row;}
  .kdt_ar .box2 .arimg1 {margin-right: 3px; margin-bottom: unset;}

  .kdt_ar .box9 > .wrap > .text { width: 95%;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox { padding: 5px 58px 27px 59px; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox { padding: 5px 45px 27px 45px; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox { padding: 5px 31px 27px 31px; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox { padding: 5px 17px 27px 17px; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox { padding: 5px 58px 27px 59px; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox { padding: 5px 59px 27px 59px; }

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent{ top: -27px;}

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent { width: 291px; height: 285px; }
  
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .boxcontent > div > h5,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .boxcontent > div > h5,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .boxcontent > div > h5,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .boxcontent > div > h5,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .boxcontent > div > h5,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .boxcontent > div > h5{ font-size: 20px;}

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox { width: fit-content;}

  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { top: 65%; left: 87%;}
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { top: 71%; left: 79%; }
  .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { top: 58%; left: 81.6%; }

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox { background-color: #FFC639; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox { background-color: #FF983B; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox { background-color: #FF668B; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox { background-color: #42D1B5; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox { background-color: #40D3E2; }
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox { background-color: #41A3E0; }

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox::before,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox::before,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox::before,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox::before,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox::before,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox::before{content: ''; position: absolute; top: 0; left: -17%; width: 0; height: 0; border-top: 50px solid #FFC639; border-bottom: 50px solid #FFC639; border-left: 50px solid transparent; border-right: 50px solid transparent;}

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox::after,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox::after,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox::after,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox::after,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox::after,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox::after{ content: ''; position: absolute; top: 0; left: 95%; width: 0; height: 0; border-top: 51px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid transparent; }

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox::before{border-top: 50px solid #FFC639; border-bottom: 50px solid #FFC639;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox::before{border-top: 50px solid #FD983B; border-bottom: 50px solid #FD983B;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox::before{border-top: 50px solid #FD668B; border-bottom: 50px solid #FD668B;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox::before{border-top: 50px solid #42D1B5; border-bottom: 50px solid #42D1B5;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox::before{border-top: 50px solid #40D3E2; border-bottom: 50px solid #40D3E2;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox::before{border-top: 50px solid #41A3E0; border-bottom: 50px solid #41A3E0;}

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox::after{border-left: 50px solid #FFC639;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox::after{border-left: 50px solid #FD983B;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox::after{border-left: 50px solid #FD668B;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox::after{border-left: 50px solid #42D1B5;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox::after{border-left: 50px solid #40D3E2;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox::after{border-left: 50px solid #41A3E0;}

  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box01 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box02 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box03 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box04 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box05 > .colorbox > h3,
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup > .box06 > .colorbox > h3{ color: #fff; font-size: 28px; padding:20px 0;}
  .kdt_ar .box9 > .wrap > .contbox > .boxGroup{width: 100%; grid-row-gap: unset;}

  @media all and (min-width:1200px) {
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { left: 84.6%;}
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { left: 77%; }
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { left: 79.6%; }
  .kdt_ar .box9 > .wrap > .text { width: 100%;}
  }
  @media all and (min-width:1400px) {
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { left: 82.4%;}
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { left: 75%; }
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { left: 77.6%; }
  }
  @media all and (min-width:1500px) {
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { left: 80.4%;}
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { left: 74%; }
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { left: 76%; }
  }
  @media all and (min-width:1600px) {
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenbox { left: 78.2%;}
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > .greenline { left: 72%; }
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { left: 74%; }
  }
  @media all and (min-width:1800px) {
    .kdt_ar .box3 .box3_absolut > div > .greenabsolute > p { left: 74.7%; }
  }
}