@charset "utf-8";

.service_visual01{background:url(../images/service/service_visual01.jpg) no-repeat 60%; background-size:cover;}
.service_visual02{background:url(../images/service/service_visual02.jpg) no-repeat 60%; background-size:cover;}
.service_visual03{background:url(../images/service/service_visual03.jpg) no-repeat 60%; background-size:cover;}
.txt_list p{position:relative; padding-left:15px; font-size:18px; color:#303030;}
.txt_list p::before{content: ''; position:absolute; top:12px; left:0; display: block; width: 4px; height: 4px; background-color: #073787;}

/* ITSM 서비스 */
.itsm_info{width:92%; max-width:1400px; margin:auto;}
.itsm_info ul{display:grid; gap: 40px; grid-template-columns: repeat(6, 1fr);}
.itsm_info ul li{position:relative; display:flex; justify-content: center; align-items: center; aspect-ratio: 1/1.125; background:url(../images/service/poly_bg.png) no-repeat; background-size:100% auto;}
.itsm_info ul li::after{content: ''; position:absolute; right: -25px; display: block; width: 10px; height: 10px; background-color: #257ff7; border-radius: 10px;}
.itsm_info ul li:last-child::after{display: none;}
.itsm_info ul li p{display: block; width: 100%; font-size: 24px; font-weight:500; color:#303030; text-align: center;}
.itsm_info_wrap{display: flex; gap:40px; max-width:1200px; margin:80px auto 0;}
.itsm_info_wrap .info_box{display: flex; justify-content: center; width:calc(50% - 20px);}
.itsm_info_wrap .info_box .tit{display: flex; justify-content: center; align-items: center; width:180px; height:100%; background-color: #257ff7; border-radius:20px 0 0 20px;}
.itsm_info_wrap .info_box .tit p{font-size:22px; font-weight: 500; color:#FFF;}
.itsm_info_wrap .info_box .txt_list{width:calc(100% - 180px); border:1px solid #ddd; border-left:none; border-radius: 0 20px 20px 0; padding:30px 40px; box-sizing: border-box;}
.itsm_service_area{margin:120px 0 0; background: #f6f6f6;}
.itsm_service_area .wrap{padding:120px 4% 150px;}
.itsm_service_area .itsm_service_con{display:flex; justify-content: center; align-items: center; gap: 60px; margin-top: 60px;}
.itsm_service_area .itsm_service_con .itsm_flatform{width:510px; height: 510px; background:url(../images/service/itsm_service_circle.png) no-repeat; background-size:100% auto;}
.itsm_service_area .itsm_service_con .itsm_flatform .img img{width: 100%;}
.itsm_service_area .itsm_service_con .itsm_flatform p{text-align: center; font-size: 22px; font-weight: 700; color:#257ff7;}
.itsm_service_area .itsm_service_con ul{display: flex; flex-direction: column; gap: 50px;}
.itsm_service_area .itsm_service_con ul li{position:relative; width:260px; line-height: 50px; font-size: 22px; font-weight: 500; color: #257ff7; background-color: #FFF; border:2px solid #257ff7; text-align: center; border-radius: 50px; cursor:pointer; transition:all 0.4s ease-in-out;}
.itsm_service_area .itsm_service_con ul li::before{content: ''; position: absolute; top: calc(50% - 1px); left:-62px; display: block; width: 60px; height: 2px; background-color: #ddd; transition:all 0.4s ease-in-out;}
.itsm_service_area .itsm_service_con ul li:nth-child(1),
.itsm_service_area .itsm_service_con ul li:nth-child(5){margin-left:-108px;}
.itsm_service_area .itsm_service_con ul li:nth-child(2),
.itsm_service_area .itsm_service_con ul li:nth-child(4){margin-left:-22px;}
@media (hover: hover){
.itsm_service_area .itsm_service_con ul li:hover{background-color: #257ff7; border:2px solid #257ff7; color: #FFF; transform: translateX(40px);}
.itsm_service_area .itsm_service_con ul li:hover::before{background-color: #257ff7; width: 100px; left: -102px;}
}
.itsm_strategy{padding: 120px 4%;}
.itsm_strategy .strategy_con{max-width: 1200px; margin: 60px auto 0; display:grid; grid-template-columns: repeat(4,1fr); gap: 32px;}
.itsm_strategy .strategy_con li{position: relative; text-align: center; transition:all 0.4s ease-in-out; cursor:pointer;}
.itsm_strategy .strategy_con li .hidden_con_mo{display:none;}
.itsm_strategy .strategy_con li dl{display: flex; flex-direction: column; height: 100%; position: relative;}
.itsm_strategy .strategy_con li dl dt{padding:15px 0; font-size: 18px; font-weight: 500; color:#303030; background-color: #e9eaec; border-radius: 20px 20px 0 0; transition:all 0.4s ease-in-out;}
.itsm_strategy .strategy_con li dl dd{display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 0 15px 40px; border:1px solid #ddd; border-top:none; border-radius: 0 0 20px 20px;}
.itsm_strategy .strategy_con li dl dd p{padding: 15px 15px; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: 400; color:#303030;}
.itsm_strategy .strategy_con li dl dd p:last-child{border-bottom:none;}
.itsm_strategy .strategy_con li.on dl dd{border:2px solid #257ff7; border-top: none;}
.itsm_strategy .strategy_con li.on dl dt{background-color:#257ff7; color:#FFF;}
.itsm_strategy .strategy_con li.on dl::after{content: ''; position: absolute; left: 50%; bottom: 0; display: block; width: 50px; height: 50px; border:2px solid #257ff7; box-sizing: border-box; border-radius: 50px; background:url(../images/service/phase_arrow.png) no-repeat #FFF; background-size: 17px auto; background-position:center 18px; transform: translate(-50%,50%);}
.itsm_strategy .hidden_con{display: none; grid-template-columns: repeat(4,1fr); max-width: 1200px; margin: 60px auto 0; border:2px solid #257ff7; border-radius: 20px; padding: 30px 0;}
.itsm_strategy .hidden_con .list{text-align: center; border-right:1px solid #ddd; padding:0 20px;}
.itsm_strategy .hidden_con .list:last-child{border-right:none;}
.itsm_strategy .hidden_con .list .tit{font-size:18px; font-weight: 500; color:#303030; letter-spacing: -1.6px;}
.itsm_strategy .hidden_con .list .icon{width: 82px; margin: 10px auto;}
.itsm_strategy .hidden_con .list .icon img{width: 100%;}
.itsm_strategy .hidden_con .list .desc{font-size:16px; color: #303030; font-weight: 400;}
.itsm_phase{background-color: #f6f6f6;}
.itsm_phase .wrap{max-width:1200px; margin: auto; padding:120px 4%;}
.itsm_phase ul{margin-top: 60px;}
.itsm_phase ul li{position: relative; display: flex; align-items: flex-start; padding:50px 50px; background-color: #FFF; border:2px solid #ddd; border-radius:20px; margin-top: -2px; transition:all 0.4s ease-in-out;}
.itsm_phase ul li::after{content: ''; position: absolute; left:50%; bottom: 0; display: block; width: 50px; height: 50px; border:2px solid #ccc; box-sizing: border-box; border-radius: 50px; background:url(../images/service/phase_arrow_g.png) no-repeat #FFF; background-size: 17px auto; background-position:center 18px; transform: translate(-50%,50%); z-index: 2;}
.itsm_phase ul li:last-child::after{display: none;}
.itsm_phase ul li.on{border:2px solid #257ff7; z-index: 1;}
.itsm_phase ul li.on::after{border:2px solid #257ff7; background:url(../images/service/phase_arrow.png) no-repeat #FFF; background-size: 17px auto; background-position:center 18px;}
.itsm_phase ul li .tit_con{display: flex; align-items: center; gap: 20px; width: 420px;}
.itsm_phase ul li .tit_con .icon{width: 50px;}
.itsm_phase ul li .tit_con .icon img{width: 100%;}
.itsm_phase ul li .tit_con dl dt{font-size: 16px; font-weight: 500; color: #257ff7;}
.itsm_phase ul li .tit_con dl dd{margin-top:10px; font-size: 20px; font-weight: 700; color: #303030;}
.itsm_phase ul li .txt_list{width: calc(100% - 420px); display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 30px;}
.itsm_phase ul li .txt_list p{font-size: 16px;}
.itsm_structure{padding: 120px 4%;}
.itsm_structure .img{max-width: 1400px; margin: 60px auto 0;}
.itsm_structure .img img{width: 100%;}
.itsm_optimized{background-color: #f6f6f6;}
.itsm_optimized .wrap{max-width: 1200px; margin: auto; padding: 120px 4%;}
.itsm_optimized ul{display: grid; grid-template-columns: repeat(2,1fr); gap: 40px; max-width: 1000px; margin: 60px auto;}
.itsm_optimized ul li{padding: 50px; border-radius: 20px; background-color: #FFF; border:1px solid #ddd;}
.itsm_optimized ul li dt{font-size: 28px; font-weight: 900; color: #303030;}
.itsm_optimized ul li dd{margin-top: 18px; font-size: 18px; color:#303030; line-height: 1.4;}
.itsm_optimized ul li dd em{font-weight: 500;}
.itsm_optimized ul li .txt_list{padding: 30px 0;}
.itsm_optimized ul li:first-child .txt_list{background:url(../images/service/itsm_opt01.png) no-repeat; background-size: 82px auto; background-position: right center;}
.itsm_optimized ul li:last-child .txt_list{background:url(../images/service/itsm_opt02.png) no-repeat; background-size: 82px auto; background-position: right center;}
.itsm_optimized ul li .per_btn{text-align: right; margin-top: 10px;}

/* TestOps 서비스 */
.testops_service_area{background-color: #f6f6f6;}
.testops_service_area .wrap{max-width: 1400px; margin:auto; padding: 120px 4%;}
.teskops_card_con{display: flex; justify-content: space-between; margin-top: 60px;}
.teskops_card_con li{position:relative; width: 320px; border: 1px solid #ddd;}
.teskops_card_con li::after{content: ''; position: absolute; left: 50%; bottom:40px; display: block; width: 28px; height: 17px; background:url(../images/service/testops_arrow.png) no-repeat center; background-size: 100% auto; transform: translateX(-50%);}
.teskops_card_con li .card_back{position:absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 320px; padding:0 30px; background-color: #257ff7; transform: scaleX(0); z-index: 10; top: 0; transition:all 0.3s ease-in-out; text-align: center; box-sizing: border-box;}
.teskops_card_con li:hover .card_back{transform: scaleX(1);}
.teskops_card_con li .card_back dt{font-size: 24px; font-weight: 700; margin-bottom: 30px; color:#FFF; line-height: 1.4;}
.teskops_card_con li .card_back dd{font-size: 20px; color: #FFF; line-height: 1.4;}
.teskops_card_con li .card_front{display: flex; gap: 20px; flex-direction: column; align-items: center; justify-content: center; height:320px; background-color: #FFF; padding-bottom: 40px; box-sizing: border-box;}
.teskops_card_con li .card_front .icon{width: 128px;}
.teskops_card_con li .card_front .icon img{width: 100%;}
.teskops_card_con li .card_front p{text-align: center; font-size: 24px; font-weight: 500; color:#303030; line-height: 1.4;}
.testops_phase{padding: 120px 4%;}
.testops_phase ul{max-width: 1200px; margin: 60px auto 0; display: flex; flex-direction: column; gap: 40px;}
.testops_phase ul li{position: relative; display: flex; align-items: flex-start; padding:50px 50px; background-color: #FFF; border:2px solid #ddd; border-radius:20px;}
.testops_phase ul li .tit_con{display: flex; align-items: center; gap: 20px; width: 380px;}
.testops_phase ul li .icon{width: 50px;}
.testops_phase ul li .icon img{width: 100%;}
.testops_phase ul li .tit_con dl dt{font-size: 16px; font-weight: 500; color: #257ff7;}
.testops_phase ul li .tit_con dl dd{margin-top:10px; font-size: 20px; font-weight: 700; color: #303030;}
.testops_phase ul li .txt_list{width: calc(100% - 380px); }
.testops_phase ul li .txt_list p{font-size: 16px;}
.testops_target{background-color: #f6f6f6;}
.testops_target .wrap{max-width: 1200px; margin: auto; padding: 120px 4%;}
.testops_target ul{display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 60px;}
.testops_target ul li{display: flex; flex-direction: column; background-color: #FFF; box-shadow: 10px 10px 10px rgba(0,0,0,0.05); border-radius: 20px; overflow: hidden;}
.testops_target ul li dl{position: relative; display: flex; flex-direction: column; flex: 1;}
.testops_target ul li dl::after{content: ''; position: absolute; left: 50%; bottom: 0; display: block; width: 50px; height: 50px; border: 2px solid #257ff7; box-sizing: border-box; border-radius: 50px; background:url(../images/service/phase_arrow.png) no-repeat #FFF; background-size: 17px auto; background-position: center 18px; transform: translate(-50%, 50%);}
.testops_target ul li dl dt{padding: 15px 0; background-color: #257ff7; text-align: center; font-size: 20px; font-weight: 500; color: #FFF;}
.testops_target ul li dl dd{display: flex; flex: 1; flex-direction: column; gap: 15px; padding: 40px 30px; justify-content: center;}
.testops_target ul li:nth-child(1) dl dd{background:url(../images/service/testops_target01.jpg) no-repeat; background-size: cover; background-position: center;}
.testops_target ul li:nth-child(2) dl dd{background:url(../images/service/testops_target02.jpg) no-repeat; background-size: cover; background-position: center;}
.testops_target ul li:nth-child(3) dl dd{background:url(../images/service/testops_target03.jpg) no-repeat; background-size: cover; background-position: center;}
.testops_target ul li dl dd p{position: relative; padding-left: 25px; font-size: 16px; font-weight: 400; color:#FFF;}
.testops_target ul li dl dd p::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 14px; height: 12px; background:url(../images/service/ic_quote.png) no-repeat; background-size: 100% auto;}
.testops_target ul li .sol_con{padding: 50px 40px 40px;}
.testops_target ul li .sol_con .tit{font-size: 20px; font-weight: 500; color: #257ff7; text-align: center;}
.testops_target ul li .sol_con .desc{margin-top: 10px; font-size: 16px; color:#303030;}
.testops_solution{padding: 120px 4%;}
.testops_solution .case_con{max-width: 1200px; margin: 60px auto 0;}
.testops_solution .case_con dl dt{display: flex; gap: 15px; align-items: center;}
.testops_solution .case_con dl dt span{display: inline-block; padding: 3px 10px; background-color: #257ff7; font-size: 20px; font-weight: 500; color: #FFF;}
.testops_solution .case_con dl dt p{font-size: 20px; font-weight: 500; color:#303030;}
.testops_solution .case_con dl dd{margin-top: 10px; font-size: 18px; color: #303030; line-height: 1.4;}
.testops_solution .case_con .solution_list{margin-top: 25px;}
.testops_solution .case_con .solution_list .head_con{display: grid; grid-template-columns: repeat(2, 1fr);}
.testops_solution .case_con .solution_list .head_con p{text-align: center; padding: 15px 0; color:#303030; border-radius: 20px 20px 0 0;}
.testops_solution .case_con .solution_list .head_con p em{display: block; margin-bottom: 5px; font-size: 18px;}
.testops_solution .case_con .solution_list .head_con p span{font-size: 16px;}
.testops_solution .case_con .solution_list .head_con p.before{background-color: #e9e9eb;}
.testops_solution .case_con .solution_list .head_con p.after{background-color: #257ff7; color:#FFF;}
.testops_solution .case_con .solution_list ul li{position: relative; display: grid; grid-template-columns: repeat(2,1fr); border-bottom: 1px solid #ddd; cursor: pointer;}
.testops_solution .case_con .solution_list ul li::after{content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 50px; height: 50px; border: 2px solid #257ff7; box-sizing: border-box; border-radius:50px; background:url(../images/service/case_arrow.png) no-repeat #FFF; background-size: auto 17px; background-position: 18px center; transform: translate(-50%, -50%);}
.testops_solution .case_con .solution_list ul li .before{padding: 15px 60px 15px 30px;}
.testops_solution .case_con .solution_list ul li .after{background-color: #edf6ff; padding: 15px 80px 15px 60px;}
.testops_solution .case_con .solution_list ul li .tit{font-size: 18px; font-weight: 500; color: #303030; padding: 20px 0 20px 30px; position: relative;}
.testops_solution .case_con .solution_list ul li .before .tit{background:url(../images/service/ic_before.png) no-repeat left center; background-size: 18px auto;}
.testops_solution .case_con .solution_list ul li .after .tit{background:url(../images/service/ic_after.png) no-repeat left center; background-size: 18px auto; color: #257ff7;}
.testops_solution .case_con .solution_list ul li .after .tit::after{content: ''; position: absolute; top: 50%; right: -50px; transform: translateY(-50%); display: block; width: 19px; height: 19px; background: url(../images/solution/gitlab_open_btn.png) no-repeat; background-size: 19px auto;}
.testops_solution .case_con .solution_list ul li .hidden_con{max-height: 0; overflow: hidden;}
.testops_solution .case_con .solution_list ul li .hidden_con p{font-size: 16px; color: #303030;}
.testops_solution .case_con .solution_list ul li .hidden_con p em{font-weight: 500;}
.testops_solution .case_con .solution_list ul li.on .hidden_con{max-height: 100%; transition:all 0.4s ease-in-out;}
.testops_solution .case_con .solution_list ul li.on .after .tit::after{background: url(../images/solution/gitlab_close_btn.png) no-repeat; background-size: 19px auto;}
.testops_pro{background-color: #f6f6f6;}
.testops_pro .wrap{max-width: 1400px; padding: 120px 4%; margin: auto;}
.testops_pro ul{display: grid; grid-template-columns: repeat(3,1fr); margin-top: 60px; gap: 40px;}
.testops_pro ul li{display: flex; flex-direction: column; gap: 30px; background-color: #FFF; border-radius: 20px; border:1px solid #ddd; padding: 40px;}
.testops_pro ul li .tit{font-size: 22px; font-weight: 700; color:#303030; letter-spacing: -2px;}
.testops_pro ul li .img{text-align: center; max-width: 300px; margin: auto;}
.testops_pro ul li .img img{width: 100%;}
.testops_pro ul li .txt_list{letter-spacing: -1px;}
.testops_pro ul li .per_btn{text-align: right;}

/* 기술지원 */
.spt_service{background-color: #f6f6f6;}
.spt_service .wrap{max-width: 1200px; padding: 120px 4%; margin: auto;}
.spt_service ul{display: grid; gap: 40px; grid-template-columns: repeat(5, 1fr); margin-top: 60px;}
.spt_service ul li{position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 1/1.125; background: url(../images/service/poly_bg.png) no-repeat; background-size:100% auto;}
.spt_service ul li::after{content: ''; position: absolute; right: -25px; display: block; width: 10px; height: 10px; background-color: #257ff7; border-radius: 10px;}
.spt_service ul li:last-child::after{display:none;}
.spt_service ul li dl{text-align: center;}
.spt_service ul li dl dt{font-size: 16px; font-weight: 500; color: #257ff7;}
.spt_service ul li dl dd{margin-top:10px; font-size: 18px; font-weight: 500; color: #303030;}
.spt_ser_con{padding: 120px 4%;}
.spt_ser_con .spt_ser_list{display: flex; flex-direction: column; gap: 80px; max-width: 1200px; margin: auto;}
.spt_ser_con .spt_ser_list li{display: flex; align-items: flex-start; gap:80px; padding-bottom: 80px; border-bottom: 1px solid #ddd;}
.spt_ser_con .spt_ser_list li:last-child{padding-bottom: 0; border-bottom:none;}
.spt_ser_con .spt_ser_list li .img_con{width: 500px; border:1px solid #ddd; border-radius: 20px; overflow: hidden; box-shadow: 10px 10px 10px rgba(0,0,0,0.05);}
.spt_ser_con .spt_ser_list li .img_con img{width: 100%;}
.spt_ser_con .spt_ser_list li .txt_con{display: flex; flex-direction: column; gap: 30px; width: calc(100% - 620px);}
.spt_ser_con .spt_ser_list li .txt_con dl dt{font-size: 16px; font-weight: 500; color: #257ff7;}
.spt_ser_con .spt_ser_list li .txt_con dl dd{margin-top:10px; font-size: 26px; font-weight: 700; color: #303030;}
.spt_ser_con .spt_ser_list li .txt_con .desc{font-size:22px; color: #303030;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info{display: flex; flex-direction: column; gap: 15px;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info .info_list{display: flex; gap: 10px;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info .info_list .icon{width: 30px;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info .info_list .icon img{width: 100%;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info .info_list p{width: calc(100% - 40px); font-size: 18px; color: #303030;}
.spt_ser_con .spt_ser_list li .txt_con .btn_wrap{display: flex; gap: 10px;}
.spt_ser_con .spt_ser_list li .txt_con .btn_wrap .per_btn:first-child p{background:none; padding-right: 0;}
.spt_ser_con .tech_ser_list{display: grid; grid-template-columns: repeat(2,1fr); column-gap:60px; max-width: 1200px; margin: 60px auto 0;}
.spt_ser_con .tech_ser_list ul li{border-bottom: 1px solid #ddd; cursor: pointer;}
.spt_ser_con .tech_ser_list ul li .tit_con{position: relative; display: flex; align-items: center; gap: 30px; padding: 30px 40px;}
.spt_ser_con .tech_ser_list ul li .tit_con::after{content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 19px; height: 19px; background: url(../images/solution/gitlab_open_btn.png) no-repeat; background-size: 19px auto;}
.spt_ser_con .tech_ser_list ul li .tit_con .icon{width: 70px;}
.spt_ser_con .tech_ser_list ul li .tit_con .icon img{width: 100%;}
.spt_ser_con .tech_ser_list ul li .tit_con p{font-size: 20px; font-weight: 500; color:#303030}
.spt_ser_con .tech_ser_list ul li .hidden_con{padding:0 30px; max-height: 0; overflow: hidden;}
.spt_ser_con .tech_ser_list ul li .hidden_con p{font-size: 17px; color: #303030;}
.spt_ser_con .tech_ser_list ul li.on .hidden_con{padding: 0 30px 30px; max-height: 100%; transition:all 0.4s ease-in-out;}
.spt_ser_con .tech_ser_list ul li.on .tit_con::after{background: url(../images/solution/gitlab_close_btn.png) no-repeat; background-size: 19px auto;}
.sol_list{background-color: #f6f6f6; padding: 120px 4%;}
.sol_list .sub_tt{margin-bottom: 50px;}
.sol_list ul{max-width: 1240px; font-size: 0; margin:auto; text-align: center;}
.sol_list ul li{display: inline-block; width: 300px; box-sizing: border-box; border:1px solid #ddd; margin:10px 5px 0;}
.sol_list ul li img{width: 100%;}
.sol_list .mo_list{display:none;}

/* 1400px 이상 해상도 */
@media screen and (max-width:1399px){
/* ITSM */
.itsm_info ul li p{font-size: 20px;}

/* TestOps */
.testops_pro ul li{padding:30px;}
.testops_pro ul li .tit br{display:none;}
.per_btn p{letter-spacing: -1.6px;}
.sol_list .pc_list{display:none;}
.sol_list .mo_list{display: block;}

/* 기술지원 */
.spt_ser_con .spt_ser_list li .txt_con .btn_wrap{flex-direction: column;}
}

/* 640px 이상 해상도 스타일 */
@media screen and (max-width:1199px){
/* ITSM */
.itsm_info ul{max-width: 600px; margin: auto; grid-template-columns: repeat(3,1fr);}
.itsm_info ul li:nth-child(3)::after{display: none;}
.itsm_info_wrap{flex-direction: column; max-width: 600px; margin:60px auto 0;}
.itsm_info_wrap .info_box{width: auto;}
.itsm_info_wrap .info_box .tit{height: auto; border-radius: 15px 0 0 15px;}
.itsm_info_wrap .info_box .tit p{font-size: 20px;}
.itsm_info_wrap .info_box .txt_list{padding: 20px 30px; border-radius: 0 15px 15px 0;}
.txt_list p{font-size: 16px;}
.txt_list p::before{top: 10px;}
.itsm_service_area{margin:100px 0 0;}
.itsm_service_area .wrap{padding: 100px 4%;}
.itsm_service_area .itsm_service_con .itsm_flatform{background:none; aspect-ratio: 1/1; max-width: 510px; width: auto; height: auto;}
.itsm_service_area .itsm_service_con .itsm_flatform p{font-size: 20px;}
.itsm_service_area .itsm_service_con{flex-direction: column; margin-top: 40px;}
.itsm_service_area .itsm_service_con ul{flex-direction: row; flex-wrap: wrap; gap: 20px; justify-content: center;}
.itsm_service_area .itsm_service_con ul li:nth-child(1), .itsm_service_area .itsm_service_con ul li:nth-child(5),.itsm_service_area .itsm_service_con ul li:nth-child(2), .itsm_service_area .itsm_service_con ul li:nth-child(4){margin-left: 0;}
.itsm_service_area .itsm_service_con ul li::before{display: none;}
.itsm_service_area .itsm_service_con ul li{width: calc(33.3333% - 13.3333px); font-size: 18px; box-sizing: border-box; line-height: 40px; border:1px solid #257ff7;}
.itsm_strategy{padding: 100px 4%;}
.itsm_strategy .hidden_con{display:none !important;}
.itsm_strategy .strategy_con{display: block; margin-top: 40px;}
.itsm_strategy .strategy_con li{margin-bottom: 40px;}
.itsm_strategy .strategy_con li:last-child{margin-bottom: 0;}
.itsm_strategy .strategy_con li dl dt{border-radius: 15px 15px 0 0;}
.itsm_strategy .strategy_con li dl dd p{font-size: 16px;}
.itsm_strategy .strategy_con li dl dd{padding: 0 15px; border-radius: 0 0 15px 15px;}
.itsm_strategy .strategy_con li.on dl dd{padding: 0 15px 15px;}
.itsm_strategy .strategy_con li.on dl::after{width: 40px; height: 40px; background-position:center 15px; background-size: 12px auto;}
.itsm_strategy .strategy_con li.on .hidden_con_mo{display:grid;}
.itsm_strategy .strategy_con li .hidden_con_mo{border:2px solid #257ff7; border-radius: 15px;}
.itsm_strategy .strategy_con li .hidden_con_mo{display: none; grid-template-columns: repeat(4,1fr); max-width: 1200px; margin: 40px auto 0; border:2px solid #257ff7; border-radius: 20px; padding: 30px 0;}
.itsm_strategy .strategy_con li .hidden_con_mo .list{text-align: center; border-right:1px solid #ddd; padding:0 20px;}
.itsm_strategy .strategy_con li .hidden_con_mo .list:last-child{border-right:none;}
.itsm_strategy .strategy_con li .hidden_con_mo .list .tit{font-size:16px; font-weight: 500; color:#303030; letter-spacing: -1.6px;}
.itsm_strategy .strategy_con li .hidden_con_mo .list .icon{width: 82px; margin: 10px auto;}
.itsm_strategy .strategy_con li .hidden_con_mo .list .icon img{width: 100%;}
.itsm_strategy .strategy_con li .hidden_con_mo .list .desc{font-size:16px; color: #303030; font-weight: 400;}
.itsm_phase .wrap{padding:100px 4%;}
.itsm_phase ul{margin-top: 40px;}
.itsm_phase ul li{flex-direction: column; padding: 30px 30px 40px; border-radius:15px;}
.itsm_phase ul li .tit_con{width: auto;}
.itsm_phase ul li .txt_list{width: auto; margin-top: 30px; grid-template-columns: repeat(1,1fr);}
.itsm_phase ul li .txt_list p br{display: none;}
.itsm_phase ul li::after{width: 40px; height: 40px; background-position: center 15px; background-size:12px auto;} 
.itsm_phase ul li.on::after{width: 40px; height: 40px; background-position: center 15px; background-size:12px auto;} 
.itsm_structure{padding: 100px 4%;}
.itsm_structure .img{margin-top: 40px;}
.itsm_optimized .wrap{padding:100px 4%;}
.itsm_optimized ul{margin-top: 40px; grid-template-columns: repeat(1,1fr); gap:30px;}
.itsm_optimized ul li{border-radius: 15px; padding: 40px;}
.itsm_optimized ul li dt{font-size: 24px;}
.itsm_optimized ul li dd{font-size: 16px;}
.itsm_optimized ul li .txt_list{padding: 20px 0;}

/* TestOps */
.testops_service_area .wrap{padding: 100px 4%;}
.teskops_card_con{margin-top: 40px; display: grid; grid-template-columns: repeat(2,1fr);}
.teskops_card_con li{background: #FFF; display: flex; flex-direction: column-reverse; width: auto; padding: 30px;}
.teskops_card_con li .card_front .icon{width: 80px;}
.teskops_card_con li .card_front p{font-size: 18px;}
.teskops_card_con li::after{display: none;}
.teskops_card_con li .card_back{position: static; height: auto; padding: 0; background-color: transparent; transform: scaleX(1);}
.teskops_card_con li .card_back dt{display:none;}
.teskops_card_con li .card_back dd{font-size: 16px; color: #303030;}
.teskops_card_con li .card_front{height: auto; padding-bottom: 20px;}
.testops_phase{padding: 100px 4%;}
.testops_phase ul{margin-top: 40px;}
.testops_phase ul li{padding: 30px; flex-direction: column; border-radius: 15px; border:1px solid #ddd;}
.testops_phase ul li .txt_list{width: auto; margin-top: 30px;}
.testops_target .wrap{padding: 100px 4%;}
.testops_target ul{margin: 40px auto 0; grid-template-columns: repeat(1,1fr); max-width:500px;}
.testops_target ul li{border-radius: 15px;}
.testops_target ul li dl dt{font-size: 18px;}
.testops_target ul li dl dd{padding: 60px 80px;}
.testops_target ul li dl::after{width: 40px; height: 40px; background-position: center 15px; background-size:12px auto;} 
.testops_target ul li .sol_con{padding: 40px 30px 30px;}
.testops_target ul li .sol_con .tit{font-size: 18px;}
.testops_solution{padding: 100px 4%;}
.testops_solution .case_con dl dt span{font-size: 18px;}
.testops_solution .case_con dl dt p{font-size: 18px;}
.testops_solution .case_con dl dd{font-size: 16px;}
.testops_solution .case_con .solution_list .head_con p em{font-size: 16px; margin-bottom: 0;}
.testops_solution .case_con .solution_list .head_con p span{font-size: 14px;}
.testops_solution .case_con .solution_list ul li .before{padding: 0 40px 0 15px;}
.testops_solution .case_con .solution_list ul li .after{padding: 0 60px 0 40px;}
.testops_solution .case_con .solution_list ul li .tit{font-size: 16px; line-height: 1.4; }
.testops_solution .case_con .solution_list ul li::after{width: 40px; height: 40px; background-position: 15px center; background-size: auto 12px;}
.testops_solution .case_con .solution_list ul li .after .tit::after{width: 15px; height: 15px; right: -30px; background-size: 15px auto;}
.testops_solution .case_con .solution_list ul li.on .after .tit::after{background-size: 15px auto;}
.testops_solution .case_con .solution_list ul li .before .tit, .testops_solution .case_con .solution_list ul li .after .tit{background-size: 15px auto; padding: 20px 0 20px 25px;}
.testops_solution .case_con .solution_list ul li .hidden_con p{font-size: 14px; padding-bottom: 20px;}
.testops_pro .wrap{padding: 100px 4%;}
.testops_pro ul{grid-template-columns: repeat(1,1fr); margin-top: 40px; gap: 30px;}
.testops_pro ul li .tit{font-size: 20px;}

/* 기술지원 */
.spt_service .wrap{padding: 100px 4%;}
.spt_service ul{display: flex; flex-wrap: wrap; margin: 40px auto 0; justify-content: center; max-width: 600px; row-gap: 0px;}
.spt_service ul li{width: calc(33.3333% - 26.7px);}
.spt_service ul li:nth-child(3)::after{display: none;}
.spt_service ul li dl dt{font-size: 14px;}
.spt_service ul li dl dd{font-size: 16px; margin-top: 5px;}
.spt_ser_con{padding: 100px 4%;}
.spt_ser_con .spt_ser_list{gap: 60px;}
.spt_ser_con .spt_ser_list li{gap: 0; justify-content: space-between; padding-bottom: 60px;}
.spt_ser_con .spt_ser_list li .txt_con{width: 45%;}
.spt_ser_con .spt_ser_list li .img_con{width: 50%; border-radius: 15px;}
.spt_ser_con .spt_ser_list li .txt_con dl dt{font-size: 14px;}
.spt_ser_con .spt_ser_list li .txt_con dl dd{font-size: 22px;}
.spt_ser_con .spt_ser_list li .txt_con .desc{font-size: 16px;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info{gap: 10px;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info .info_list{gap: 5px;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info .info_list .icon{width: 24px;}
.spt_ser_con .spt_ser_list li .txt_con .ser_info .info_list p{font-size: 16px;}
.spt_ser_con .tech_ser_list{column-gap: 40px;}
.spt_ser_con .tech_ser_list ul li .tit_con{padding: 25px 25px 25px 0; gap: 20px;}
.spt_ser_con .tech_ser_list ul li .tit_con .icon{width: 60px;}
.spt_ser_con .tech_ser_list ul li .tit_con p{font-size: 16px;}
.spt_ser_con .tech_ser_list ul li .tit_con::after{width: 15px; height: 15px; background-size: 15px auto;}
.spt_ser_con .tech_ser_list ul li.on .tit_con::after{background-size: 15px auto;}
.spt_ser_con .tech_ser_list ul li.on .hidden_con{padding: 0 0 30px;}
.spt_ser_con .tech_ser_list ul li .hidden_con p{font-size: 16px;}
.sol_list{padding: 100px 4%;}
.sol_list .sub_tt{margin-bottom: 40px;}
.sol_list .mo_list{display: flex; flex-wrap: wrap; gap: 2%; row-gap: 10px;}
.sol_list .mo_list li{margin:0; width:32%;}
}

/* 1200px 이상 해상도 스타일 */
@media screen and (max-width:639px){
/* ITSM */
.itsm_info ul{grid-template-columns: repeat(2,1fr); column-gap: 30px; row-gap: 15px; max-width: 360px;}
.itsm_info ul li:nth-child(3)::after{display:block;}
.itsm_info ul li:nth-child(even)::after{display:none;}
.itsm_info ul li::after{right: -20px;}
.itsm_info_wrap .info_box{flex-direction: column;}
.itsm_info_wrap .info_box .tit{width: 100%; padding: 10px 0; border-radius: 15px 15px 0 0;}
.itsm_info_wrap .info_box .tit p{font-size: 18px;}
.itsm_info_wrap .info_box .txt_list{width: auto; border-left: 1px solid #ddd; border-radius: 0 0 15px 15px;}
.itsm_service_area{margin: 80px 0 0;}
.itsm_service_area .wrap{padding: 80px 4%;}
.itsm_service_area .itsm_service_con{margin-top: 20px;}
.itsm_service_area .itsm_service_con .itsm_flatform p{font-size: 18px;}
.itsm_service_area .itsm_service_con ul{gap: 10px;}
.itsm_service_area .itsm_service_con ul li{width: calc(50% - 5px); font-size: 16px;}
.itsm_strategy{padding: 80px 4%;}
.itsm_strategy .strategy_con li .hidden_con_mo{grid-template-columns: repeat(2,1fr); padding:0;}
.itsm_strategy .strategy_con li .hidden_con_mo .list:nth-child(even){border-right: none;}
.itsm_strategy .strategy_con li .hidden_con_mo .list:nth-child(1),
.itsm_strategy .strategy_con li .hidden_con_mo .list:nth-child(2){border-bottom: 1px solid #ddd; padding: 20px 10px 15px;}
.itsm_strategy .strategy_con li .hidden_con_mo .list:nth-child(3),
.itsm_strategy .strategy_con li .hidden_con_mo .list:nth-child(4){padding:15px 10px 20px;}
.itsm_strategy .strategy_con li .hidden_con_mo .list .tit{line-height: 1.4;}
.itsm_strategy .strategy_con li .hidden_con_mo .list .desc{font-size:14px;}
.itsm_structure{padding: 80px 4%;}
.itsm_phase .wrap{padding: 80px 4%;}
.itsm_phase ul li .tit_con dl dt{font-size: 14px;}
.itsm_phase ul li .tit_con dl dd{font-size: 18px; margin-top: 5px;}
.itsm_optimized .wrap{padding: 80px 4%;}
.itsm_optimized ul li{padding: 30px;}
.itsm_optimized ul li dt{font-size: 22px;}

/* TestOps */
.testops_service_area .wrap{padding: 80px 4%;}
.teskops_card_con{grid-template-columns: repeat(1,1fr); gap: 20px;}
.testops_phase{padding: 80px 4%;}
.testops_phase ul{gap: 20px;}
.testops_phase ul li .tit_con dl dt{font-size: 14px;}
.testops_phase ul li .tit_con dl dd{font-size: 18px; margin-top: 5px;}
.testops_target .wrap{padding: 80px 4%;}
.testops_solution{padding: 80px 4%;}
.testops_solution .case_con{margin-top: 40px;}
.testops_solution .case_con .solution_list .head_con{display: none;}
.testops_solution .case_con .solution_list ul li{grid-template-columns: repeat(1,1fr);}
.testops_solution .case_con .solution_list ul li::after{display: none;}
.testops_solution .case_con .solution_list ul li .after{padding: 0 40px 0 15px;}
.testops_solution .case_con .solution_list ul li .after .tit::after{display: none;}
.testops_solution .case_con .solution_list ul li .before .tit::after{content: ''; position: absolute; top: 50%; right: -30px; transform: translateY(-50%); display: block; width: 15px; height: 15px; background: url(../images/solution/gitlab_open_btn.png) no-repeat; background-size: 15px auto;}
.testops_solution .case_con .solution_list ul li.on .before .tit::after{background:url(../images/solution/gitlab_close_btn.png) no-repeat;background-size: 15px auto;}
.testops_solution .case_con .solution_list{margin-top: 15px;}
.testops_pro .wrap{padding: 80px 4%;}

/* 기술지원 */
.spt_service .wrap{padding: 80px 4%;}
.spt_service ul{column-gap: 30px; row-gap: 15px; max-width: 360px;}
.spt_service ul li{width: calc(50% - 15px);}
.spt_service ul li:nth-child(3)::after{display: block;}
.spt_service ul li:nth-child(even)::after{display:none;}
.spt_service ul li::after{right: -20px;}
.spt_service ul li:last-child{margin-top: -30px;}
.spt_ser_con{padding: 80px 4%;}
.spt_ser_con .spt_ser_list li{flex-direction: column; gap: 30px;}
.spt_ser_con .spt_ser_list li .txt_con{width: auto;}
.spt_ser_con .spt_ser_list li .img_con{width: auto;}
.spt_ser_con .spt_ser_list li:nth-child(odd) .img_con{order:1;}
.spt_ser_con .spt_ser_list li:nth-child(odd) .txt_con{order:2;}
.spt_ser_con .tech_ser_list{margin-top: 40px; grid-template-columns: repeat(1,1fr);}
.sol_list{padding: 80px 4%;}
.sol_list .mo_list{justify-content: center;}
.sol_list .mo_list li{width: 48%;}
}