@charset "utf-8";

.at1 .bttmline {position:relative;}
.at1 .bttmline::after {content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:30px; height:5px; background-color:#ff6902;}
.at1 .half_wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content: space-between; }
.at1 .half { width:50%; }

.at1 .half.order1 {order:1;}
.at1 .half.order2 {order:2;}
/**텍스트 부분 */
.at1 .cont_box .boxCont { position:relative; font-size: 1.8rem; font-weight:500; padding:7px 0 7px 30px;  } 
.at1 .cont_box .boxCont:before {content:""; position:absolute; top:8px; left:0; width:20px; height:20px; background-image:url('./check_box.svg'); background-repeat:no-repeat; background-size:contain;}
.at1 .ment_wrap { padding-left:150px; padding-bottom:0; }
.at1 .ment_wrap .cont_p_big {padding-bottom:50px;}

/**이미지 부분 */
.at1 .halfimg_cont { position:relative; width:100%; height:0; padding-bottom:76%; overflow:hidden; background-color:#f9f9f9; border-radius:20px; }
.at1 .halfimg_cont img { width:100%; height: 100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

/**순서 */
.at1 .secBg {width:100%;background-color:#f6f6f6;}
.at1 .setpIcon ul.stepUl {display:flex; flex-wrap:wrap; justify-content: space-between; }
.at1 .setpIcon ul.stepUl li {position:relative; width:calc(33% - 30px);  padding:40px 20px; background-color:#ffffff; border-radius:20px; }
.at1 .setpIcon ul.stepUl li::after {content:""; position:absolute; top:50%; right:-35px; transform:translateY(-50%); width:30px; height:30px; background-image:url('./step_arrow.svg'); background-position:center; background-size:contain; background-repeat:no-repeat ; }
.at1 .setpIcon ul.stepUl li:last-child::after {display:none;}
  /**아이콘 */
  .at1 .setpIcon ul.stepUl li .topIcon {position:relative; margin:0 auto 30px; background-color:#f9f9f9; text-align:center; width:130px; height:130px; line-height:132px; border-radius:50%; z-index:0;}
  .at1 .setpIcon ul.stepUl li .topIcon img {position:relative; height:5em; z-index:1;}
  .at1 .setpIcon ul.stepUl li .topIcon::after {content:""; }
  /**텍스트 */
  .at1 .setpIcon ul.stepUl li .bttm_txt {text-align:center;}
  .at1 .setpIcon ul.stepUl li .bttm_txt h4 {padding-bottom:5px;}
  .at1 .setpIcon ul.stepUl li .topNum {text-align:center;}



  .iconBox {width:100%; display:flex; flex-wrap:wrap; justify-content: space-between;}
  .iconBox .boxCont {width:32%; padding:50px 45px; margin-bottom:20px; border:1px solid #ddd; border-radius:20px; text-align:center; }

  .iconBox .boxCont .text { width:100%;}
  .iconBox .boxCont .text h4 { position:relative; font-size: 2.4rem; font-weight:500; display:inline-block; }
  .iconBox .boxCont .text h4:after { content:""; position:absolute; bottom:-5px; left:0; width:100%; height:10px; background-color:rgb(255, 168, 98, .5); z-index:-1; }

  .iconBox .boxCont .text p { font-size:2rem; color:#787878; padding-top:20px; word-break:keep-all;}


  .ulIcon ul.iconUl {display:flex; flex-wrap:wrap; justify-content: space-between; }
  .ulIcon ul.iconUl li {position:relative; width:calc(25% - 30px);  padding:40px 20px; background-color:#ffffff; border-radius:20px; }

  /**아이콘 */
  .ulIcon ul.iconUl li .topIcon {position:relative; margin:0 auto 30px; background-color:#f9f9f9; text-align:center; width:130px; height:130px; line-height:132px; border-radius:50%; z-index:0;}
  .ulIcon ul.iconUl li .topIcon img {position:relative; height:5em; z-index:1;}
  .ulIcon ul.iconUl li .topIcon::after {content:""; }
  /**텍스트 */
  .ulIcon ul.iconUl li .bttm_txt {text-align:center;}
  .ulIcon ul.iconUl li .bttm_txt h4 {padding-bottom:5px;}
  .ulIcon ul.iconUl li .topNum {text-align:center;}

@media screen and (max-width:1200px){
  .at1 .half.ment_wrap { padding-left:70px; }
}

@media screen and (max-width:1024px){
  .at1 .half.order1 {order:2;}
  .at1 .half.order2 {order:1;}
  .at1 .half { width:100%; }
  .at1 .halfCont {width:90%; margin:0 auto;}
  .at1 .halfimg_wrap { flex-wrap:wrap; }
  .at1 .halfimg_cont { padding-bottom:70%; }
  .at1 .half.ment_wrap { padding-left:10px; padding-right:10px; padding-bottom:70px; }
  .at1 .cont_box .boxCont { font-size: 1.7rem; padding:7px 0 7px 35px;  } 
  .at1 .cont_box .boxCont:before {top:9px; left:0; width:18px; height:18px;} 

  .setpIcon ul.stepUl li {width: calc(33.333% - 30px); margin-bottom:20px;}
}
@media screen and (max-width:768px){
  .at1 .halfCont {width:100%;}
  .at1 .half.ment_wrap {padding-bottom:50px; } 
  .at1 .halfCont .half.ment_wrap { padding-left:10px; padding-right:10px;}
  .at1 .cont_box .boxCont { font-size: 1.5rem; padding:4px 0 4px 35px;  } 
  .ment_wrap .cont_p_big {padding-bottom:30px;}

  .ulIcon ul.stepUl li {width: calc(50% - 10px); }
  .ulIcon ul.stepUl li::after {display:none;}
  .ulIcon ul.stepUl li.topIcon img {height:4.5em;}

  .ulIcon ul.stepUl li {width: calc(50% - 10px); }
  .ulIcon ul.stepUl li::after {display:none;}
  .ulIcon ul.stepUl li.topIcon img {height:4.5em;}
}

@media screen and (max-width:560px){
  .setpIcon ul.stepUl li .topIcon {width:100px; height:100px; line-height: 102px;}
  .ulIcon ul.stepUl li .topIcon {width:100px; height:100px; line-height: 102px;}
  
  .iconBox .boxCont { flex-wrap:wrap; }
  .iconBox .boxCont .icon { padding-bottom:20px; }
  .iconBox .boxCont .text { width:100%; padding:20px 0 0 0px;} 
}