/* 모든 스타일은 css 충돌방지를 위해 .page6을 기준으로 작성 하시면 됩니다. 예) .page6 .box {} */
.page6{}
.sub_top{background:url(../page6/images/sub_top2.jpg)no-repeat;background-size:cover;}
.page6 .sub{padding-bottom:0;}
.page6 .charac{display:flex;flex-wrap:wrap;width:1000px;margin:70px auto 130px auto;}
.charac li{width:46%;margin:20px;position:relative;border:1px solid #e4e4e4;border-radius:20px;padding:40px;}
.charac li span{position:absolute;top:-20px;left:50%;transform:translate(-50%);background:#417eae;text-align:center;width:40px;height:40px;font-size:15px;text-align:center;line-height:40px;font-weight:800;color:#fff;letter-spacing:1px;border-radius:50px;}
.charac li b{font-size:28px;text-align:center;display:block;}
.charac li p{font-size:18px;text-align:center;padding-top:15px;line-height:32px;}
.charac li a{    font-size: 16px;
  background: #000;
  color: #fff;
  padding: 5px 15px;
  border-radius: 50px;
  margin: 20px auto 0 auto;
  display: block;
  width: fit-content;font-weight:600;}

.charac li:first-child{padding-top:65px;}

.page6_1{background:url(../page6/images/page6_bg1.jpg)no-repeat;background-size:cover;padding:130px 0;}
.page6 h2{font-size:36px;font-weight:600;}
.page6 h2 p{font-size:18px;line-height:32px;padding-top:30px;}
.page6_ctt{display:flex;margin-top:50px;}
.page6_ctt .ctt_left{width:40%;}
.page6_ctt .ctt_left img{width:100%;}
.page6_ctt .ctt_right{width:60%;background:#417eae;padding:60px 80px;}
.page6_ctt .ctt_right h4{color:#fff;font-size:28px;padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,0.5);}
.page6_ctt .ctt_right p{font-size:18px;color:#fff;line-height:32px;}

.page6_2{background:url(../page6/images/page6_bg2.jpg)no-repeat;background-size:cover;background-position:0 -400px;width:100%;height:1000px;margin-top:-300px}
.page6_2 .container{padding-top:300px;}
.page6_3{background:url(../page6/images/page6_bg3.jpg)no-repeat;background-size:cover;width:100%;height:1100px;margin-top:-400px}
.page6_3 .container{padding-top:300px;}
.page6_3 h4{text-align:center;font-size:36px;font-weight:600;line-height:56px;}
.page6_3 h4 span{z-index:0;position:relative;}
.page6_3 h4 span:before{z-index:-1;position:absolute;content:"";display:inline-block;width:100%;height:15px;background:blue;bottom:0;}
.page6_3 h4 img{width: 600px;
    margin: 0 auto;
    height: auto;
    padding-top: 30px;}

.page6_3 img{width:400px;height:400px;display:block;margin:70px auto 0 auto;border-radius:20px;}
.page6_3 p{    font-size: 28px;
  width: fit-content;
  margin: 0 auto;position:relative;top:-25px;}
.page6_3 p span{padding:10px 0;width:200px;display:inline-block;font-weight:600;text-align:center;border:3px solid #417eae;background:#fff;border-radius:50px;}
.page6_3 p b{background:#417eae;color:#fff;text-align:center;width:35px;height:35px;line-height:35px;display:inline-block;border-radius:50px;}

.page6_4{padding:130px 0;background:url(../page6/images/page6_bg4.jpg)no-repeat;background-size:cover;}
.page6_4 h2{text-align:center;}
.years{    display: flex;
    justify-content: center;
    margin: 70px 0;
    width: 400px;
    background: rgba(255,255,255,0.5);
    border-radius: 30px;
    padding: 30px;
    margin: 40px auto;
    border: 1px solid #e4e4e4;}
.years > div{width:200px;border-right:1px solid #e4e4e4}
.years > div:last-child{border-right:0;}
.years b{font-size:28px;text-align:center;}
.years span{width:60px;height:35px;color:#fff;font-size:20px;line-height:35px;text-align:center;background:#ffb300;border-radius:30px;padding:0 15px;display:block;margin:15px auto;}

.ctt_right p b{color:#ffc209}

.page6_bt{background:linear-gradient(45deg, #3b9be7, #417eae)}
.page6_bt .container{display:flex;align-items:center;position:relative;padding:100px 0}
.bt_left{width:70%;}
.bt_left img{width:500px;}
.bt_left a{display:block;width:fit-content;font-size:20px;color:#fff;font-weight:600;border:2px solid #fff;border-radius:50px;padding:15px 30px;margin-top:40px;}
.bt_right{width:30%;}
.bt_right img{position:absolute;right:0;bottom:0;width:500px;}

.case{}
.case .swiper-button-prev, .case .swiper-button-next{
  width:50px;height:50px;background-color:#fff;opacity:0.5;background-size:15px;
}
.case .container3{padding:130px 0;overflow:hidden;width:830px;margin:0 auto;position:relative;}
.case h4{text-align:center;font-size:18px;line-height:32px;font-weight:500;;}
.case h4 span{display:block;font-size:36px;letter-spacing:2px;color:#ccc;font-weight:700;padding-bottom:25px;}
.ba_slide{margin-top:70px;}
.ba_more{    display: block;
  width: 200px;
  margin: 40px auto;
  font-size: 18px;
  text-align: center;
  background: #417eae;
  color: #fff;
  padding: 15px 0;
  border-radius: 50px;
  font-weight: 600;}

.qna{background:#f8f8f8;padding:130px 0;}
.qna h4{text-align:center;font-size:18px;line-height:32px;font-weight:500;;}
.qna span{display:block;font-size:36px;letter-spacing:2px;color:#000;font-weight:700;padding-bottom:25px;}

.qna ul{margin-top:70px;}
.qna ul li{background:#fff;padding:50px;border-bottom:1px solid #e4e4e4;}
.qna ul li p{font-size:20px;position:relative;font-weight:600;cursor:pointer;}
.qna ul li span{display:block;position: absolute;
    right: 20px;
    top: 0;
    font-size: 28px;

}
.answer{
  font-size: 17px;
  line-height: 34px;
  padding: 20px 40px;
  background: #f8f8f8;
  margin-top: 30px;
  font-weight: 500;
  border-radius: 10px;}

@media screen and ( max-width:799px){
  .page6 h2{font-size:26px;}
  .page6 h2 p{font-size:15px;line-height:28px;padding-top:20px;}
  .charac li:first-child{padding-top:0;padding:35px 20px;}
  .page6 .charac{width:100%;margin:50px auto 80px auto;}
  .charac{display:block;}
  .charac li{width:100%;padding:20px;text-align:left;font-size:15px;padding:35px 20px;}
  .charac li b{font-size:18px;}
  .charac li p{font-size:15px;padding-top:5px;}
  .charac li span{width:25px;height:25px;line-height:25px;top:-13px;font-size:12px;}
  .page6_1{padding:80px 0;}
  .page6_ctt{display:block;margin-top:30px;}
  .page6_ctt .ctt_left{width:100%;}
  .page6_ctt .ctt_right{width:100%;padding:30px;}
  .page6_ctt .ctt_right h4{font-size:18px;padding-bottom:20px;margin-bottom:20px;}
  .page6_ctt .ctt_right p{font-size:15px;line-height:26px;}
  
  .page6_2{margin-top:0;height:auto;padding:80px 0;background-position:center;}
  .page6_2 .container{padding-top:0;}
  
  .page6_3{margin-top:0;padding:80px 0;height:auto;}
  .page6_3 .container{padding-top:0;}
  .page6_3 h4{font-size:26px;line-height:40px;}
  .page6_3 h4 img{width:100%;}
  .page6_3 img{width:100%;height:auto;margin-top:50px;}
  .page6_3 p span{width:150px;font-size:15px;}
.page6_3 p {
    display: flex;
  align-items: center;}
  
  .page6_4{padding:80px 0;}
  .years{width:100%;padding:18px;border:1px solid #ccc;}
  .years > div{border-right:1px solid #ccc;}
  .years b{font-size:18px;}
  .years span {
    width: 55px;
    height: 26px;
    font-size: 17px;
    line-height: 26px;
    margin: 7px auto;}
  
  .bt_right img{position:relative;}
  .page6_bt .container{display:block;padding:80px 0 0 0;}
  .bt_left{width:100%;}
  .bt_left img{width:100%;}
  .bt_left a{font-size:16px;margin:30px auto;}
  .bt_right{width:100%;}
  .bt_right img{width:300px;margin:0 auto;display:block;}
  
  .case .container3{width:90%;padding:80px 0;}
  .case h4 span{font-size:26px;}
  .case h4{    font-size: 15px;
    line-height: 28px;}
  
  .qna{padding:80px 0;}
  .qna span{font-size:26px;}
  .qna h4{    font-size: 15px;
    line-height: 28px;}
  .qna ul{margin-top:50px;}
  .qna ul li{padding:25px;}
  .qna ul li p{font-size:16px;}
  .qna ul li span {
    font-size: 20px;right:0;}
  .answer{font-size:14px;padding:25px;line-height:25px;}
}