@import url('sub.css'); 



/**** S:: TOTAL SOLUTION PROVIDER ****/
.solution_info{background:url('/solution/img/solution_bg.jpg') no-repeat center/cover; position: relative; overflow: hidden; padding: 30px 0 0;}
.solution_info .sub_info{}
.solution_info .sub_info .subtitle{padding: 0 0 10px;}
.solution_info .sub_info h2{color:var(--white); line-height: 120%; font-size:3.333rem;}
.solution_info .sub_info h3{font-weight: 300; color:var(--white);}
.solution_info .sub_info p{color:var(--basicW); padding: 10px 0 0;}

.solution_info .solution_style{position: relative; padding: 20px 0 280px;}
.solution_info .solution_in{position: relative;}
.solution_info .solution_obj{max-width:478px; margin: 0 auto; position: relative;}
.solution_info .solution_obj::after{content:''; display: block; width: 100%; height: 100%; background:url('/solution/img/logo_w.png') no-repeat center/190px auto; position: absolute; left:0; top:-2%;}
.solution_info .solution_obj img{width: 100%; height: auto;}
.solution_info dl{display: flex; max-width:540px; width: 100%; position: absolute; z-index: 9;}
.solution_info dl dt{width: 140px;}
.solution_info dl dt img{width: 140px; height: 140px; border-radius:50%; background:var(--main); border:1px solid rgba(255, 255, 255, 0.20); box-shadow: 0 0 30px rgba(243, 109, 7, 0.60); box-sizing:border-box;}
.solution_info dl dd{width: calc(100% - 140px); padding: 0 0 0 35px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.solution_info dl dd h4{font-weight: 800; color:var(--main); line-height: 120%;}
.solution_info dl dd strong{display: block; font-weight: 600; line-height: 140%; color:var(--white); padding: 8px 0 0;}
.solution_info dl dd p{padding: 12px 0 0; color:var(--basicW);}

.solution_info dl.one{flex-direction: row-reverse; right: 50%; margin-right: 135px; top:197px;}
.solution_info dl.one dd{padding: 0 35px 0 0; text-align:right; align-items: flex-end;}
.solution_info dl.two{flex-direction: row-reverse; right: 50%; margin-right: 80px; top:-30px;}
.solution_info dl.two dd{padding: 0 35px 0 0; text-align:right; align-items: flex-end;}
.solution_info dl.three{left: 50%; margin-left: 70px; top:-30px;}
.solution_info dl.four{left: 50%; margin-left: 135px; top:198px;}
.solution_info dl.five{flex-wrap:wrap; justify-content: center; left: 10px; top:350px; max-width:100%;}
.solution_info dl.five dd{width: 100%; padding: 35px 0 0; text-align:center; align-items: center;}




.solution_list{display: flex;}
.solution_list.ver2{flex-direction: row-reverse;}
.solution_list > div{box-sizing:border-box;}
.solution_list .txt_area{width: 40%; padding: 0 0 0 150px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.solution_list.ver2 .txt_area{padding: 0 100px 0 150px;}
.solution_list .txt_area h4{font-weight: 600; line-height: 140%; color:var(--main); padding: 0 0 5px;}
.solution_list .txt_area h3{line-height: 120%; font-family:var(--eng); letter-spacing:var(--letter-spacing-none);}
.solution_list .txt_area ul{padding: 40px 0 0; counter-reset: my-counter;}
.solution_list .txt_area ul li{font-size:1rem; letter-spacing: var(--letter-spacing-default); line-height: 150%; padding-left: 42px; box-sizing:border-box; position: relative;}
.solution_list .txt_area ul li::before{counter-increment: my-counter; content: counter(my-counter); display: block; width: 32px; line-height: 32px; aspect-ratio:1/1; border-radius:50%; background:var(--main); text-align:center; font-size:0.778rem; font-weight: 900; font-family:var(--eng); color:var(--white); position: absolute; left:0; top:0;}
.solution_list .txt_area ul li ~ li{margin-top: 18px;}
.solution_list .txt_area ul li strong{display: block; padding-bottom: 5px; font-size:1.111rem; font-weight: 600; color:var(--black); letter-spacing: var(--letter-spacing-default); line-height: 140%;}
.solution_list .img_area{width: 60%; aspect-ratio:3/1.8; overflow:hidden;}
.solution_list .img_area img{display:block; object-fit:cover; width: 100%; height: 100%;}
/**** E:: TOTAL SOLUTION PROVIDER ****/


/*******************************************************************************
    @media 1800px
*******************************************************************************/
@media all and (max-width:1800px){

/**** S:: TOTAL SOLUTION PROVIDER ****/

.solution_list{}
.solution_list .txt_area{padding: 0 0 0 100px;}
.solution_list.ver2 .txt_area{padding: 0 100px 0 0;}
.solution_list .txt_area ul li br{display:none;}
/**** E:: TOTAL SOLUTION PROVIDER ****/

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


/**** S:: TOTAL SOLUTION PROVIDER ****/

.solution_info{padding: 60px 0 0;}
.solution_info .sub_info{}
.solution_info .sub_info .subtitle{padding: 0 0 20px;}
.solution_info .sub_info p{padding: 10px 0 0;}

.solution_info .solution_style{padding: 40px 0 280px;}

.solution_info .solution_obj{max-width:435px;}
.solution_info .solution_obj::after{background-size:180px auto;}
.solution_info dl{max-width:470px; align-items:center;} 
.solution_info dl dt{width: 100px;}
.solution_info dl dt img{width: 100px; height: 100px;}
.solution_info dl dd{width: calc(100% - 100px); padding: 0 0 0 20px;}
.solution_info dl dd strong{padding: 5px 0 0;}
.solution_info dl dd p{padding: 8px 0 0;}

.solution_info dl.one{margin-right: 129px; top:185px;}
.solution_info dl.one dd{padding: 0 20px 0 0;}
.solution_info dl.two{margin-right: 70px; top:-34px;}
.solution_info dl.two dd{padding: 0 20px 0 0;}
.solution_info dl.three{margin-left: 58px; top:-39px;}
.solution_info dl.four{margin-left: 135px; top:185px;}
.solution_info dl.five{left: 10px; top:330px;}
.solution_info dl.five dd{padding: 20px 0 0;}



.solution_list{}
.solution_list .txt_area{width: 55%; padding: 0 0 0 50px;}
.solution_list.ver2 .txt_area{padding: 0 50px 0 0;}
.solution_list .txt_area ul{padding: 30px 0 0;}
.solution_list .img_area{width: 45%;}
/**** E:: TOTAL SOLUTION PROVIDER ****/

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/**** S:: TOTAL SOLUTION PROVIDER ****/
.solution_info dl{max-width:340px;}
.solution_info dl.one{margin-right: 119px; top:185px;}
.solution_info dl.two{margin-right: 80px; top:-61px;}
.solution_info dl.three{margin-left: 48px; top:-70px;}
.solution_info dl.four{margin-left: 135px; top:146px;}
.solution_info dl.five{left: 10px; top:340px;}
/**** E:: TOTAL SOLUTION PROVIDER ****/
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/**** S:: TOTAL SOLUTION PROVIDER ****/


.solution_info .sub_info{padding: 0;}
.solution_info .sub_info .subtitle{padding: 0 0 10px;}
.solution_info .solution_style{padding: 30px 0 80px;}

.solution_info .solution_obj{display: none;}
.solution_info dl{max-width:100%; position: static; margin: 0 !important; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.2); align-items:center;} 
.solution_info dl.five{border:0;} 

.solution_info dl.one{flex-direction: row;}
.solution_info dl.one dd{padding: 0 0 0 20px; text-align:left; align-items: flex-start;}
.solution_info dl.two{flex-direction: row;}
.solution_info dl.two dd{padding: 0 0 0 20px; text-align:left; align-items: flex-start;}
.solution_info dl.five{flex-wrap:wrap; justify-content: center;}
.solution_info dl.five dd{width: calc(100% - 100px); padding: 0 0 0 20px; text-align:left; align-items: flex-start;}



.solution_list{}
.solution_list .txt_area{padding: 0 0 0 30px;}
.solution_list.ver2 .txt_area{padding: 0 30px 0 0;}
.solution_list .txt_area ul{padding: 20px 0 0;}
.solution_list .txt_area ul li{padding-left: 32px;}
.solution_list .txt_area ul li::before{width: 24px; line-height: 24px;}
.solution_list .txt_area ul li ~ li{margin-top: 12px;}
/**** E:: TOTAL SOLUTION PROVIDER ****/

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/**** S:: TOTAL SOLUTION PROVIDER ****/

.solution_info{padding: 40px 0 0;}
.solution_info .sub_info h2{font-size:2.5rem;}
.solution_info .sub_info p{padding: 6px 0 0;}
.solution_info .solution_style{padding: 20px 0 50px;}

.solution_info dl{padding: 18px 0;} 
.solution_info dl dt{width: 70px;}
.solution_info dl dt img{width: 70px; height: 70px;}
.solution_info dl dd{width: calc(100% - 70px);}
.solution_info dl.five dd{width: calc(100% - 70px);}
.solution_info dl dd p{padding: 5px 0 0;}

.solution_list{flex-wrap:wrap;}
.solution_list .txt_area{width: 100%; padding: 30px 0 0;}
.solution_list.ver2 .txt_area{padding: 30px 0 0;}
.solution_list .txt_area h4{padding: 0 0 3px;}
.solution_list .txt_area ul{padding: 10px 0 0;}
.solution_list .txt_area ul li{padding-left: 25px;}
.solution_list .txt_area ul li::before{width: 20px; line-height: 20px; top:1px;}
.solution_list .txt_area ul li ~ li{margin-top: 10px;}
.solution_list .img_area{width: 100%;}
/**** E:: TOTAL SOLUTION PROVIDER ****/


}