@charset "utf-8";
/* font-family: 'Future_tree', sans-serif;
 */

.sub_title_ment{
  font-size:13pt;
  padding-top:20px;
  line-height:30px;
  
  }


/* s_visual */
 #sub_visual {
    position: relative;
     box-sizing: border-box;
     z-index: 50;
     padding-top: 100px;
}
 #sub_visual.col2 {
    background-color: #f5f5f5;
}
 #sub_visual .slogan {
     display:table;
     width:100%;
     table-layout:fixed;
     box-sizing:border-box;
     /*padding: 136px 0 59px;*/
     padding: 42px 0 58px;
}
 #sub_visual .slogan > .title_box{
     display:table-cell;
     vertical-align:middle;
     position: relative;
     padding: 0 20px;
}
 #sub_visual .slogan .title_box > .bg_img {
    position: absolute;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
     -webkit-transition: all 1s;
     -moz-transition: all 1s;
     transition: all 1s;
     transform: scale(1.2);
}
 #sub_visual .slogan .title_box > .bg_img.on {
    transform: scale(1);
}
 #sub_visual .slogan > .title_box .title {
    display:block;
     text-align: center;
     font-size: 48px;
     color: #111111;
     font-weight:bold;
     word-break: keep-all;
     font-weight: 800;
}
 #sub_visual .slogan > .title_box .sub_tit {
    text-align: center;
     position: relative;
     margin-top: 23px;
}
 #sub_visual .slogan > .title_box .sub_tit span {
    font-size: 20px;
     color: #0383a2;
     font-weight: 700;
     
     word-break: keep-all;
     word-break: keep-all;
     line-height: 29px;
}
 #sub_page #container .inner_box {
    max-width: 1200px;
     width: calc(100% - 80px);
     margin: 0 auto;
     box-sizing: border-box;
}
 #sub_page #container .box {
    padding-bottom: 140px;
}
 #sub_page #container .title_box {
    text-align: center;
     padding: 135px 0 63px;
}
 #sub_page #container .title_box strong {
    font-size: 48px;
     color: #111111;
     font-weight: 800;
     word-break: keep-all;
     display: block;
}
 #sub_page #container .title_box.col2 strong {
    color: #fff;
}
 #sub_page #container .title_box p {
    font-size: 20px;
     color: #0383a2;
     font-weight: 700;
     
     word-break: keep-all;
     margin: 24px auto 0;
}
 #sub_page #container .title_box.col2 p {
    color: #fff;
}


.sub_bottom{
  margin-bottom:100px
  }




.card_box_flex{
  display:flex;
  width:100%;
  box-sizing:border-box; 
  justify-content:center;
  align-items:center;
  text-align: center;
  flex-direction:row;
  }
.card_box{
  display:flex;

  flex-direction:column;
  align-items:center;

  border:20px solid #F1F1F1;
  /*background-color:#FCFCFC;*/
  background: linear-gradient( 180deg, #f1f1f1, #e7e7e7 );
  border-radius:50px;
  /*
  margin:50px;
  flex-basis: 0;
  flex-grow: 1;
  flex:auto;
  */
  flex-basis: 0;
  flex-grow: 1;
  margin-right:40px;
  box-sizing:border-box;
  height:500px;
  text-align: center;
  }

.card_box:nth-child(2){
  background: linear-gradient( 0deg, #f1f1f1, #e7e7e7 );
  }
.card_box:nth-child(3){
  margin-right:0px;
  }


.card_box_title{
  font-size:18pt;
  font-weight: 700;
  margin-top:50px;
  box-sizing: border-box;
  padding-top:10px;

  }
.card_box_bar{
  margin: 30px 70px 20px 70px;
  padding-bottom:30px;
  border-top:3px solid #02AFDA;
  width:60px;
  }

.card_box_con{
  font-size:14pt;
  font-weight: 500;
  line-height: 25px;
  box-sizing: border-box;
  margin: 0px 30px 0px 30px;
  line-height:40px;
  }


.panle_box{

  background: url(../images/sub/greeting.png) no-repeat ;
  overflow: hidden;
  /*height: 300px;*/
  box-sizing:border-box;
  margin-bottom:80px;
  }

.panle_inner{
  margin-top:400px;
  display:flex;
  width:100%;
  box-sizing:border-box; 
  justify-content:center;
  /*border:1px solid #000000;*/
  }

.panle_left_box{
  margin-left:50px;
  height:400px;
  background-color:#00AFDA;
  flex:1;
  top:-20px;
  padding:50px;
  box-sizing:border-box; 
  /* <offsetX> | <offsetY> | <blur-radius> | <spread-radius> | <color> */
  /*box-shadow: -10px 10px 5px 5px #D1F2FB;*/
  }

.panle_left_box_title{
  color:#ffffff;
  font-size:22pt;
  font-weight:700;
  text-shadow: 2px 2px 2px gray; 
  margin-bottom:20px;
  }

.panle_left_box_content{
  color:#ffffff;
  font-size:15pt;
  font-weight:400;
  text-shadow: 2px 2px 2px gray; 
  margin-bottom:20px;
  line-height:40px;
  }

.panle_center_box{

  margin-top:150px;
  margin-left:50px;
  margin-right:50px;
  flex:3;
  font-size:13pt;
  line-height:40px;

  }


























































 #about .box1 .img_box {
    overflow: hidden;
}
 #about .box1 .img_box img {
    max-width: 100%;
}
 #about .box1 p {
    text-align: center;
     font-size: 18px;
     color: #666666;
     line-height: 32px;
     
     word-break: keep-all;
     margin-top: 33px;
}
 #about .box2 {
    background-color: #f5f5f5;
}
 #about .box2 ul {
    display: flex;
     flex-flow: wrap;
     margin-bottom: -33px;
}
 #about .box2 ul li {
    width: calc(33.333% - 16px);
     margin-right: 24px;
     margin-bottom: 33px;
}
 #about .box2 ul li:nth-child(3n) {
    margin-right: 0;
}
 #about .box2 ul li .img_box {
    overflow: hidden;
}
 #about .box2 ul li .img_box img {
    max-width: 100%;
}
 #about .box2 ul li .text_box {
    display: flex;
     flex-flow: wrap;
     padding-top: 23px;
}
 #about .box2 ul li .text_box strong {
    width: 130px;
     font-size: 24px;
     color: #111111;
     font-weight: 700;
     word-break: keep-all;
}
 #about .box2 ul li .text_box div {
    width: calc(100% - 130px);
     margin-top: -2px;
}
 #about .box2 ul li .text_box div p {
    font-size: 18px;
     color: #666666;
     word-break: keep-all;
     padding-left: 10px;
     position: relative;
     line-height: 30px;
}
 #about .box2 ul li .text_box div p::before {
    content: '';
     width: 3px;
     height: 3px;
     background-color: #666666;
     position: absolute;
     left: 0px;
     top: 12px;
     border-radius: 50%;
}
 #about .box3 {
    background-color: #222b3a;
}
 #about .box3 ul {
    max-width: 1120px;
     width: 100%;
     box-sizing: border-box;
     margin: 0 auto;
     display: flex;
     flex-flow: wrap;
}
 #about .box3 ul li {
    width: 25%;
     text-align: center;
}
 #about .box3 ul li img {
    max-width: 100%;
}
 #about .box3 ul li div {
    font-size: 18px;
     color: #dddddd;
     line-height: 32px;
     word-break: keep-all;
     margin-top: 36px;
}
 #about .box3 ul li div strong {
    display: block;
     font-size: 24px;
     color: #ffffff;
     font-weight: 800;
     margin-bottom: 13px;
}
 #about .box4 .map_box {
    overflow: hidden;
}
 #about .box4 .map_box iframe {
    height: 560px;
}
 #about .box4 .map_box img {
    width: 100%;
}
 #about .box4 .info_box {
    text-align: center;
     padding-top: 50px;
}
 #about .box4 .info_box strong {
    display: block;
     font-size: 24px;
     color: #00afda;
     word-break: keep-all;
     font-weight: 700;
}
 #about .box4 .info_box .addr {
    font-size: 34px;
     color: #111111;
     font-weight: 800;
     word-break: keep-all;
     line-height: 43px;
     margin-top: 25px;
}
 #about .box4 .info_box ul {
    font-size: 0px;
     margin-top: 32px;
}
 #about .box4 .info_box ul li {
    display: inline-block;
     font-size: 14px;
     color: #666666;
     
     word-break: keep-all;
     padding: 0 9px;
     line-height: 22px;
}
 #about .box4 .info_box ul li span {
    display: inline-block;
     color: #111111;
     margin-right: 9px;
}
 #client ul {
    display: flex;
     flex-flow: wrap;
     margin-bottom: -44px;
}
 #client ul li {
    width: calc(12.5% - 21px);
     margin-right: 24px;
     margin-bottom: 44px;
}
 #client ul li:nth-child(8n) {
    margin-right: 0;
}
 #client ul li a {
    display:flex;
     justify-content:center;
     align-items:center;
     table-layout:fixed;
     height: 48px;
}
 #client ul li a img {
    max-width: 100%;
     max-height: 100%;
}
 #process .content_box {
    max-width: 1004px;
     width: 100%;
     margin: 0 auto;
     box-sizing: border-box;
     padding: 24px 62px;
     position: relative;
     display: flex;
     flex-flow: wrap;
}
 #process .content_box:nth-child(2n-1)::before {
    content: '';
     width: 2px;
     height: 100%;
     background-color: #aaa;
     position: absolute;
     right: 0px;
     top: 0px;
}
 #process .content_box:nth-child(2n-1)::after {
    content: '';
     width: 20px;
     height: 20px;
     background: url(../images/sub/process_arrow.png) no-repeat center;
     position: absolute;
     right: -9px;
     bottom: 33px;
     transform: rotate(90deg);
}
 #process .content_box:first-child {
    margin-top: -24px;
}
 #process .content_box:last-child {
    margin-bottom: -24px;
}
 #process .content_box .con_w {
    width: calc(25% - 60px);
     margin-right: 80px;
     text-align: center;
     position: relative;
     box-sizing: border-box;
}
 #process .content_box:nth-child(2n) .con_w:nth-child(1) {
    order: 4;
}
 #process .content_box:nth-child(2n) .con_w:nth-child(2) {
    order: 3;
}
 #process .content_box:nth-child(2n) .con_w:nth-child(3) {
    order: 2;
}
 #process .content_box:nth-child(2n) .con_w:nth-child(4) {
    order: 1;
}
 #process .content_box:nth-child(2n-1) .con_w:nth-child(4n) {
    margin-right: 0;
}
 #process .content_box:nth-child(2n) .con_w:first-child {
    margin-right: 0;
}
 #process .content_box .img {
    position: relative;
}
 #process .content_box .img::before {
    content: '';
     width: 80px;
     height: 2px;
     background-color: #aaaaaa;
     position: absolute;
     right: -80px;
     top: 50%;
     margin-top: -1px;
}
 #process .content_box:nth-child(2n-1) .con_w:last-child .img::before {
    width: 62px;
     right: -62px;
}
 #process .content_box:nth-child(2n) .con_w:first-child .img::before {
    width: 62px;
     right: -62px;
}
 #process .content_box .img::after {
    content: '';
     width: 20px;
     height: 20px;
     background: url(../images/sub/process_arrow.png) no-repeat center;
     position: absolute;
     right: -50px;
     top: 50%;
     margin-top: -10px;
}
 #process .content_box:nth-child(2n-1) .con_w:last-child .img::after {
    background: #fff;
     width: 2px;
     height: calc(50% + 23px);
     right: -62px;
     top: -24px;
     margin-top: 0;
}
 #process .content_box:nth-child(2n) .con_w:first-child .img::after {
    background: #aaa;
     width: 2px;
     height: calc(50% + 24px);
     right: -62px;
     top: -24px;
     margin-top: 0;
}
 #process .content_box:nth-child(2n) .con_w .img::after {
    transform: rotate(180deg);
}
 #process .content_box .img img {
    max-width: 100%;
}
 #process .content_box .txt {
    text-align: center;
     font-size: 18px;
     color: #666666;
     font-weight: 700;
     
     word-break: keep-all;
     padding-top: 28px;
}
 #process .content_box .txt strong {
    display: block;
     font-size: 24px;
     color: #111111;
     font-weight: 800;
     margin-bottom: 12px;
}
 #question_ok {
    background-color: #f5f5f5;
}
 #question_ok .content_box {
    background-color: #fff;
     text-align: center;
     padding: 64px 20px 50px;
}
 #question_ok .content_box .txt1 {
    font-size: 30px;
     color: #444444;
     font-weight: 800;
     
     word-break: keep-all;
     margin-top: 34px;
}
 #question_ok .content_box .txt1 span {
    color: #111111;
}
 #question_ok .content_box .txt2 {
    font-size: 18px;
     color: #666666;
     
     word-break: keep-all;
     margin-top: 16px;
}
 #question_ok .content_box .btn {
    font-size: 18px;
     color: #ffffff;
     font-weight: 800;
     
     word-break: keep-all;
     display: block;
     margin: 57px auto 0;
     width: 240px;
     line-height: 80px;
     background-color: #00afda;
}
/* DESKTOP */
 @media all and (min-width:1025px){
}
/* 태블릿&모바일 공통*/
 @media all and (max-width:1024px){
    /* 공통 */
     #sub_page #container .inner_box {
        width: calc(100% - 30px);
    }
     #sub_page #container .box {
        padding-bottom: 80px;
    }
     #sub_page #container .title_box {
        padding: 58px 0 38px;
    }
     #sub_page #container .title_box strong {
        font-size: 28px;
    }
     #sub_page #container .title_box p {
        margin-top: 14px;
         font-size: 16px;
         line-height: 24px;
    }
    /* about */
     #about .box1 .img_box img {
        width: 100%;
    }
     #about .box1 p {
        font-size: 13px;
         line-height: 20px;
         margin-top: 20px;
    }
     #about .box2 ul {
        margin-bottom: -20;
    }
     #about .box2 ul li {
        width: calc(33.333% - 13.33px);
         margin-right: 20px;
         margin-bottom: 20px;
    }
     #about .box2 ul li:nth-child(3n) {
        margin-right: 0;
    }
     #about .box2 ul li .text_box {
        padding-top: 15px;
    }
     #about .box2 ul li .text_box strong {
        font-size: 16px;
         width: 110px;
    }
     #about .box2 ul li .text_box div {
        width: calc(100% - 110px);
    }
     #about .box2 ul li .text_box div p {
        font-size: 12px;
         line-height: 20px;
         padding-left: 8px;
    }
     #about .box2 ul li .text_box div p::before {
        width: 2px;
         height: 2px;
         top: 8px;
    }
     #about .box3 ul {
        max-width: 750px;
    }
     #about .box3 ul li img {
        width: 80px;
    }
     #about .box3 ul li div {
        margin-top: 18px;
         font-size: 13px;
         line-height: 20px;
    }
     #about .box3 ul li div strong {
        margin-bottom: 8px;
         font-size: 16px;
    }
     #about .box4 .map_box iframe {
        height: 350px;
    }
     #about .box4 .info_box {
        padding-top: 26px;
    }
     #about .box4 .info_box strong {
        font-size: 16px;
    }
     #about .box4 .info_box .addr {
        margin-top: 14px;
         font-size: 22px;
         line-height: 32px;
    }
     #about .box4 .info_box ul {
        margin-top: 13px;
    }
     #about .box4 .info_box ul li {
        font-size: 12px;
         line-height: 24px;
         padding: 0 8px;
    }
     #about .box4 .info_box ul li span {
        margin-right: 8px;
    }
    /* 클라이언트 */
     #client ul {
        margin-bottom: -16px;
    }
     #client ul li {
        width: calc(25% - 7.5px);
         margin-right: 10px;
         margin-bottom: 16px;
    }
     #client ul li:nth-child(4n) {
        margin-right: 0;
    }
     #client ul li a {
        height: 38px;
    }
    /* 문의(프로세스) */
     #process .content_box {
        max-width: 620px;
         padding: 14px 30px;
    }
     #process .content_box:first-child {
        margin-top: -14px;
    }
     #process .content_box:last-child {
        margin-bottom: -14px;
    }
     #process .content_box:nth-child(2n-1)::before {
        width: 1px;
    }
     #process .content_box:nth-child(2n-1)::after {
        width: 16px;
         height: 16px;
         background-size: 16px 16px;
         right: -7px;
         bottom: 22px;
    }
     #process .content_box .img::before {
        height: 1px;
         margin-top: 0;
    }
     #process .content_box .img::after {
        width: 16px;
         height: 16px;
         right: -48px;
         margin-top: -8px;
         background-size: 16px 16px;
    }
     #process .content_box:nth-child(2n-1) .con_w:last-child .img::after {
        height: calc(50% + 24px);
         width: 1px;
         right: -30px;
    }
     #process .content_box:nth-child(2n) .con_w:first-child .img::after {
        width: 1px;
         right: -30px;
         top: -14px;
         height: calc(50% + 14px);
    }
     #process .content_box:nth-child(2n-1) .con_w:last-child .img::before {
        width: 30px;
         right: -29px;
    }
     #process .content_box:nth-child(2n) .con_w:first-child .img::before {
        width: 30px;
         right: -30px;
    }
     #process .content_box .img img {
        max-width: 80px;
    }
     #process .content_box .txt {
        padding-top: 18px;
         font-size: 13px;
    }
     #process .content_box .txt strong {
        margin-bottom: 11px;
         font-size: 16px;
    }
    /* 문의 완료 */
     #question_ok .content_box {
        padding: 40px 20px 25px;
    }
     #question_ok .content_box img {
        max-width: 65px;
         width: 100%;
    }
     #question_ok .content_box .txt1 {
        font-size: 18px;
         margin-top: 17px;
    }
     #question_ok .content_box .txt2 {
        font-size: 12px;
         margin-top: 8px;
    }
     #question_ok .content_box .btn {
        font-size: 12px;
         line-height: 40px;
         width: 120px;
         margin-top: 25px;
    }
}
/* 모바일 */
 @media all and (max-width:768px){
    /* about */
     #about .box1 p br {
        display: none;
    }
     #about .box2 ul li {
        width: 100%;
         margin-right: 0!important;
         display: flex;
         flex-flow: wrap;
    }
     #about .box2 ul li .img_box {
        width: 150px;
    }
     #about .box2 ul li .text_box {
        width: calc(100% - 150px);
         box-sizing: border-box;
         padding: 0 0 0 15px;
         display: block;
    }
     #about .box2 ul li .text_box strong {
        width: 100%;
         display: block;
         margin-bottom: 10px;
    }
     #about .box2 ul li .text_box div {
        width: 100%;
    }
     #sub_page #container #about .box3 .title_box.col2 p {
        max-width: 240px;
    }
     #about .box3 ul {
        margin-bottom: -27px;
         max-width: 450px;
    }
     #about .box3 ul li {
        width: 50%;
         margin-bottom: 27px;
    }
     #about .box4 .map_box iframe {
        height: 220px;
    }
    /* 클라이언트 */
     #client ul li a {
        height: 24px;
    }
    /* 문의(프로세스) */
     #process .content_box {
        padding: 0;
         max-width: 230px;
    }
     #process .content_box:first-child {
        margin-top: 0;
    }
     #process .content_box:last-child {
        margin-bottom: -28px;
    }
     #process .content_box:nth-child(2n-1)::after {
        display: none;
    }
     #process .content_box:nth-child(2n-1)::before {
        display: none;
    }
     #process .content_box .con_w {
        width: 50%;
         margin-right: 0;
         margin-bottom: 28px;
    }
     #process .content_box:nth-child(2n) .con_w:nth-child(1) {
        order: 1;
    }
     #process .content_box:nth-child(2n) .con_w:nth-child(2) {
        order: 2;
    }
     #process .content_box:nth-child(2n) .con_w:nth-child(3) {
        order: 3;
    }
     #process .content_box:nth-child(2n) .con_w:nth-child(4) {
        order: 4;
    }
     #process .content_box .img::after {
        display: none;
    }
     #process .content_box .img::before {
        display: none;
    }
}


/* 하단 버튼 */
 .btn_bottom {
    font-size: 0;
     text-align: center;
     margin-top: 80px;
}

 .btn_bottom a {
    display: inline-block;
     width: 240px;
     line-height: 80px;
     font-size: 18px;
     color: #ffffff;
     font-weight: 700;
     
     word-break: keep-all;
     text-align: center;
     background-color: #00afda;
     margin-right:40px;
}

/* 태블릿&모바일 공통*/
 @media all and (max-width:1024px){

     .btn_bottom a {
        width: 180px;
     margin-right:20px;
     line-height: 60px;
       /*  border:2px solid #ff0000 !important;*/
    }
 }
/* 모바일 */
 @media all and (max-width:768px){
    /*.btn_bottom {
         border:2px solid #ffff00 !important;
    }
    */
     .btn_bottom a {
        display: block;
         width: 100%;
         line-height: 50px;
         margin-bottom:5px;
    }

  .sub_title_ment{
    font-size:13pt;
    margin:0px;
    padding-top:20px;
    line-height:30px;
	letter-spacing:2px;
    }

}