@charset "utf-8";

@font-face {
    font-family: 'KOTRA_SONGEULSSI';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/KOTRA_SONGEULSSI.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
    min-width:320px;
}

/*레이아웃*/
.mobbr{
    display:none;
}

.pc{
    display:block;
}

/* -- desktop( 1300px ~ ? ) -- */
    .pen{
          font-family: 'KOTRA_SONGEULSSI';
          font-size:18px !important;
          font-weight:600;
    }

    .pop_up {
        position: fixed;
    }

   /* 서브 공통 */
    .subBanner {
        width: 100%;
        height: 35vh;
        position: relative;
        border-bottom:1px solid #eaeaea;
    }

    .subBanner1 {
        background: url('../img/subbg1-1.jpg') no-repeat;
        background-size: 100%;
        background-attachment: fixed;
    }


    .subBanner2 {
        background: url('../img/subbg2.jpg') no-repeat;
          background-size: 100%;
         background-attachment: fixed;
   
    }

    .subBanner3 {
      background: url('../img/subbg3-1.jpg') no-repeat;
      background-attachment: fixed;
      background-position:top center;
	  background-size:100%
    }

    .submaintit {
        width: 100%;
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
        opacity:0;
        transition:1.5s;
        animation: reveal 0.8s  ;
        animation-fill-mode:forwards;
        animation-timing-function:ease-in
        }
        
        @keyframes reveal {
           
            100% {
            transform: translate(0,-60%);
            opacity:1;
            height:auto;
            }
        }    




        .subBanner .title {
		font-weight:600;
        font-size: 50px;
        color: #fff;
        text-align: center;
        letter-spacing:1px;
       }



    .submaintit{
       margin-top:30px;
    }


    .subBanner .sub_tit {
        font-size: 20px;
        color: #fff;
        text-align: center;
        font-weight: normal;
        margin-top: 22px;
    }

    .subcon {
        padding: 80px 0;
    }

    .leftBar {
        font-size: 2.1em;
        font-weight: bold;
        position: relative;
        padding-left: 20px;
    }

    .leftBar::before {
        content: '';
        display: inline-block;
        background: #ff5629;
        width: 6px;
        height: 30px;
        position: absolute;
        top: 8px;
        left: 0;
    }

    .subtit2 {
        white-space: pre;
        margin-top: 40px;
        font-size: 1.3em;
    }



    /* intro_service */
    .goOrder {
        margin-top: 80px;
        background: url('../img/goorderbg-1.jpg') no-repeat;
        background-size: cover;
        height: 400px;
        position: relative;
        padding:20px;
    }

    .goOrderWrap {
        width: 100%;
        position: absolute;
        top: 70%;
        transform: translateY(-100%);
        text-align: center;
        left:0;
    }

    .goOrderWrap p {
        color: #fff;
        font-size: 34px;
    }

    .goOrderWrap div {
        display: inline-block;
        color: #fff;
        background: #ff5629;
        padding: 10px 30px;
        margin-top: 30px;
        font-size: 18px;  
   


    }

    .goOrderWrap a{
    display:inline-block;
    width:100%;
    height:100%;
    transform-origin:center bottom;
    color:#FFFFFF;
    cursor:pointer;
    transform: skewX(-11deg);
    transition: transform 0.5s ease;
    -ms-transform-origin: center bottom

    }

     .goOrderWrap a:hover{
    -ms-transform: skewX(0deg);
    transform: skewX(0deg);

     }


    .goOrderWrap a img {
        width: 50px;
        height: auto;
        vertical-align: middle;
        margin-left: 10px;
    }

    .howPay {
        display: inline-block;
        width: 100%;
        margin: 80px 0;
    }

    .howPay ul li {
        margin-top: 50px;
        width: 25%;
        float: left;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }

    .howPay ul li p:nth-child(2) {
        font-size: 20px;
    }

    .process {
        margin-top: 50px;
        margin-bottom: 100px;
    }

    .process p:nth-child(2) {
        margin-top: 50px;
        text-align: center;
    }


    /* order_service */
    .orderform {
        margin-top: 50px;
        border-top: 2px solid #333;
    }

    .orderform input {
        border: 1px solid #ccc;
        background: #fff;
        padding: 10px;
        border-radius: 3px;
        width: 100%;
    }

    .orderform table {
        width: 100%;
    }

    .orderform table tbody tr th {
        text-align: left;
        width: 15%;
    }

    .orderform table tbody tr td {
        width: 85%;
    }

    .orderform table tbody tr th, .orderform table tbody tr td {
        padding: 20px 30px;
        border-bottom: 1px solid #e5e5e5;
        vertical-align: middle;
    }

    .must {
        color: #1dade4;
        margin-left: 5px;
    }

    .name td input {
        width: 52%;
    }

    .email td p {
        float: left;
    }
    
    .email td p:nth-child(1) {
        width: 24%;
    }

    .email td p:nth-child(2) {
        width: 4%;
        text-align: center;
        padding-top: 5px;
    }

    .email td p:nth-child(3) {
        width: 60%;
    }

    .email td p:nth-child(3) input {
        width: 40%;
    }

    .email td p:nth-child(3) select {
        width: 40%;
        height: 40px;
        padding: 0 10px;
        border-radius: 3px;
        border: 1px solid #ccc;
        margin-left: 10px;
        /*화살표 배경 넣기*/
        background: url(../img/nav_arrowOff.png) no-repeat 94% 49% transparent;
        background-size: 12px auto;

    }

    .phone td p {
        float: left;
    }

    .phone td p:nth-child(odd) {
        width: 14.7%;
    }

    .phone td p:nth-child(even) {
        text-align: center;
        width: 4%;
        padding-top: 8px;
    }

    .address td p {
        float: left;
    }

    .address td p:nth-child(odd) {
        width: 18%;
    }

    .address td p:nth-child(2) {
        width:4%;
        text-align: center;
        padding-top: 8px;
    }

    .address td {
        border-bottom: none !important;
        padding: 20px 30px 5px 30px !important;
    }

    .address td div {
        width: 11%;
        display: inline-block;
        margin-left: 10px;
    }

    .address td div input {
        cursor: pointer;
    }

    .address_detail td {
        border-bottom: none !important;
        padding: 5px 30px 5px 30px !important;
    }
    
    .address td div input {
        border: 1px solid #ccc;
        background: #f5f5f5;
    }

    .address_write td {
        padding: 5px 30px 20px 30px !important;
    }

    .question th, .question td {
        border-bottom: 2px solid #333 !important;
    }

    .question td textarea {
        width: 100%;
        height: 500px;
        padding: 20px 10px;
        overflow-y: scroll;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
        resize:none;

    }

    .ordernotice {
        background: #ebebeb;
        margin-top: 30px;
        padding: 30px;
        border-radius: 5px;
        line-height: 26px;
    }

    .orderBtnWrap {
        display: inline-block;
        width: 100%;
    }

    .orderBtn {
        float: right;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .orderBtn input {
        width: 150px;
        height: 50px;
        border: 1px solid #ff5629;
        background: #ff5629;
        font-size: 16px;
        cursor: pointer;
        color: #fff;
    }

    .orderBtn input:nth-child(1) {
        margin-right: 10px;
        border: 1px solid #ff5629;
        background: #fff;
        color: #333;
    }


    /* question */
    .cstime {
        font-weight: bold;
        font-size: 20px;
    }

    .pre-notice {
        white-space: pre;
        margin-top: 15px;
    }

    .ps {
        margin-top: 15px;
    }


    /* loaction */
    .locaform  {
        margin-top: 30px;
    }

    .locaform table {
        width: 100%;
        border: 1px solid #ccc;
    }

    .locaform table tbody tr th {
        width: 20%;
        border-right: 1px solid #ccc;
        background: #f5f5f5;
    }

    .locaform table tbody tr td {
        width: 80%;
    }

    .locaform table tbody tr th, .locaform table tbody tr td {
        padding: 20px 30px;
        border-bottom: 1px solid #ccc;
    }

    .root_daum_roughmap {
        margin-top: 30px !important;
    }

    .wrap_map{width:100% !important}
    #daumRoughmapContainer1697499925598{width:100% !important}

    /* notice */
    .notice_board .noticeform.no_form {
        margin-top: 30px;
    }
    .notice_board .noticeform.no_form table {
        width: 100%;
        border-top: 2px solid #333;
    }

    .notice_board .noticeform.no_form table thead tr th {
        background: #f0f0f0;
    }

    .notice_board .noticeform.no_form table thead tr th, .notice_board .noticeform.no_form table tbody tr td {
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

    .notice_board .noticeform.no_form table thead tr th:nth-child(1), .notice_board .noticeform.no_form table tbody tr td:nth-child(1) {
        border-left: none;
    }

    #tbNotice tr td:nth-child(2) {
        cursor: pointer;
    }

    td.tit {
        text-align: left !important;
        padding: 10px 30px !important;
    }

    .pgWrap {
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }

    .pgWrap span a {
        margin: 0 5px;
        text-align: center;
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 3px;
        cursor: pointer;
    }

    span.current {
        background: #ff5629;
        color: #fff;
        border: 1px solid #ff5629;
        text-align: center;
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 3px;
        cursor: pointer;
    }


    /* notice_detail */
    .noticeDform {
        margin-top: 30px;
    }

    .noticeDform table {
        width: 100%;
        border-top: 2px solid #333;
    }

    .noticeDform table tbody tr th {
        width: 10%;
        background: #f0f0f0;
        border-right: 1px solid #ccc;
    }

    .noticeDform table tbody tr td {
        width: 40%;
    }

    .noticeDform table tbody tr th, .noticeDform table tbody tr td {
        padding: 10px 30px;
        border-bottom: 1px solid #ccc;
    }
    .noticetxt {
        padding: 20px 0;
    }

    .goListWrap {
        display: inline-block;
        width: 100%;
    }

    .goList {
        float: right;
        margin-top: 10px;
    }

    .goList input {
        width: 150px;
        height: 50px;
        border: 1px solid #ff5629;
        background: #ff5629;
        font-size: 16px;
        cursor: pointer;
        color: #fff;
    }

    

    /* ceo */
    .ceobgWrap {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-top:40px;
    }
    .companyImg {
        float: right;
        width: 80%;
        height: 350px;
        background: url('../img/ceobg.jpg') no-repeat;
        background-size: cover;
    }

    .ceoHi::before {
        content: 'WANNA PAYMENTS';
        background: linear-gradient(to right, #b01f84, #1daee4);
		-webkit-background-clip: text;
		color:transparent;
        position: absolute;
        top: -80px;
        font-size: 50px;
        font-weight: bold;
        left: 0;
    }

    .ceoHi {
        position: relative;
        display: inline-block;
        width: 75%;
        background: #fff;
        padding: 80px 50px;
        white-space: pre;
        box-shadow: 5px 5px 50px rgba(0,0,0,.1);
        margin-top: -200px;
        font-size:1.1em;
    }

    .ceoHi .pen {
        font-size: 30px;
    }


    /* often */

	.acordianWrap {
        width:100%; 
        margin:0 auto; 
        overflow:hidden;
        border-top: 2px solid #333;
        margin-top: 30px;
	}

	.acordian {
        width:100%; 
        margin-left:0%; 
        overflow:hidden; 
        display:none;
	}

    .acordian li {
        width: 100%; 
        line-height: 60px; 
        font-size: 16px;
    }

    .acordian li p {
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        font-size: 18px;
    }

	.acordian li p a {
        display: inline-block; 
        vertical-align: middle;
        width: 100%;
        padding-left: 30px;
        box-sizing:border-box;
        font-weight: bold;
	}

    .img {
        float: right;
        vertical-align: middle; 
        width: 30px; 
        height: auto;
        cursor: pointer;
        margin-top: 13px;
        margin-right: 20px;
    }

	.acordian li div {
        padding: 0 30px;
        display:none; 
        background-color:#f2f2f2;
	}

	.acordian li div a {
        display:block; 
        width:100%; 
        line-height:40px; 
        font-size: 16px; 
        padding:0 5%; 
        box-sizing:border-box; 
        border-bottom:1px solid #ccc;
	}


    /* group */
    .groupbgWrap {
        display: inline-block;
        position: relative;
        width: 100%;
    }

    .groupImg {
        position: relative;
        float: right;
        width: 80%;
        height: 350px;
        background: url('../img/groupbg.jpg') no-repeat;
        background-size: cover;
    }

    .groupImg::before {
        content: 'WANNA PAYMENTS';
        background: linear-gradient(to right, #b01f84, #1daee4);
		-webkit-background-clip: text;
		color:transparent;
        /* color: #ff5629; */
        position: absolute;
        font-size: 50px;
        font-weight: bold;
        top: 130px;
        left: -250px;
    }

    .groupconWrap {
        margin-top: 100px;
    }

    .group {
        margin-top: 80px;
        margin-bottom: 80px;
        text-align: center;
    }

    .group img {
        width: 80%;
        height: auto;
    }



    /* history */
    
    /*.yearBar {
        margin-top: 30px;
        display: inline-block;
        width: 3px;
        height: 500px;
        background: #ccc;
    }*/

    .imgWrap{
        width:100%;
        margin-top:10px;
        position:relative;
    }
    .imgWrap:after{
        content:'';
        display:block;
        clear:both;
    }

    
    .hisImg{
        width:45% ;
        float:left;
        height:auto;
    }

    .hisImg img{
        width:100%;
    }


    .history {

        float:left;
        display: inline-block;
        width: calc(55% - 2%);
        margin-left:2%;
        text-align:center;
    }


    .historyWrap > div {
        display: inline-block;
        vertical-align: top;
    }

    .year{width:25%; 
         color: #ff5629;
        font-weight: 700;
        font-size: 48px;
        top:-10px;
        vertical-align:text-top;
        border-right:1px solid #eaeaea;
        padding-right:30px;
    }
    .mon{
        width:20%;
        font-size:1.3em;
        padding-left:30px;
        position:relative;


    }

    .mon:before{
        content:'';
        display:inline-block;
        width:8px;
        height:8px;
        border-radius:50%;
        margin-left:10px;
        position:absolute;
        background:#eaeaea;
        left:-14px;
    }
    .hisyear {
        width:100%;
        position:relative;
        margin-top:20%;
    }

    .hisyear table{
        width:100%;
        table-layout:fixed;
    }

    .hisyear table td{
        padding-top:10px;
        padding-bottom:10px;
        vertical-align:top;
    }

    .hisyear table td:last-child{
       padding-left:30px;
       font-size:16px;
       color:#797979;
       text-align:left;
    }

    /*.y2020 ul::before {
        content: '2020';
        position: absolute;
        left: calc( -35% - 80px);
        color: #ff5629;
        font-weight: 700;
        font-size: 48px;
        top:-10px;
    }*/

    /*.year div ul li {
        line-height: 50px;
        text-align: left;
    }

   .year div ul li:nth-child(1)::before {
        content: '';
        position: absolute;
        top: 24px;
        left: -100px;
        width: 80px;
        height: 1px;
        background: #ccc;
    }

    .year div ul li p {
        display: inline-block;
        font-size: 20px;
    }
    .year div ul li p:nth-child(1) {
        margin-right: 30px;
    }

   .year div ul li p::before {
        content: '●';
        position: absolute;
        left: -20px;
        color: #ccc;
        font-weight: 700;
        font-size: 8px;
    }*/

    .hisImg {
        position: relative;
        margin-top: 80px;
        display:inline-block;
    }
        



/* -- tablet( 768px ~ 1179px ) -- */
@media screen and  (max-width: 1179px) {
    .subBanner{  height:35vh;background-size:auto}
   
    .subcon{padding-top:40px;}
     .submaintit{
         margin-top:0;
     }
  .subBanner h1{
      font-size:40px;
      margin-top:60px;
  }
  .innerWrap{
      width:90%;
      margin:0 auto;
     
  }

  .companyImg{
      width:100%;
      float:none;
      height:230px;
      border: 1px solid #eaeaea;

  }
  .ceoHi{
      width:100%;
      float:none;
      background:none;
      margin-top:-7px;
      padding:30px;
      white-space:pre-wrap;
      word-break:keep-all;
      box-shadow:none;

  }

  .ceoHi::before {
      top:-50px ;
      left:-8px
  }


  .groupImg{
      margin-top:40px;
      width:100%;
      height:230px;
      float:none;
  }

  .groupImg::before{
  left:0;
   top:178px;
  }
  .subtit2{
      white-space:normal;
      word-break:break-word;
      overflow-wrap:break-word;
      word-wrap:break-word;

  }
  
  .goOrder{
      height:300px;
  }


  /*서비스신청*/
  .orderform table tbody tr th{
      width:25%;
  }


  /*고객센터*/
  .subBanner2{background-size:auto;
              background-position:70% -45%;
  }

    #tbInfo th:nth-of-type(4),  #tbInfo td:nth-of-type(4){
    
   display:none;
  }

    .noticeDform table tbody tr th{
        width:20%;
    }

  .hisImg {
      width:40%;
  }

  .hisImg img{
      width:100%;
  }

 .year{
     font-size:40px;
 }

 
}

   




/* -- mobile( ? ~ 767px ) -- */
@media screen and (max-width: 767px) {
    .mobbr{ display:block;}
    .pc{display:none;}
    body{
        overflow-x:hidden;
    }

    .process{ margin-top:0;}
    /*레이아웃*/
.subcon.innerWrap{ padding-top:40px; padding-bottom:40px;}
.subtit2 {font-size:1em; margin-top:20px;}
.howPay{margin-top:50px;}

    /*텍스트 사이즈*/


 .leftBar{font-size:22px;}
 .leftBar::before{
     height:22px;
 }


  .subBanner{ height:25vh;}
  
   .subBanner1 { background-size:160%; 

   }


  .innerWrap{
      width:90%;
      margin:0 auto;
  }
  
 .companyImg{
      width:100%;
      background-size:cover;
      background-position:center;
      position:relative;
      height:180px;
      opacity:0.8;
  }

 .companyImg:before{
      content: 'WANNA PAY MENTS';
        background-color: #ff5629;
        position: absolute;
        font-size: 30px;
        font-weight: bold;
        color:#FFFFFF;
        padding:5px;
        left: 0;
        bottom:0;
        width:90%;
        opacity:0.8
 }
    
  .ceoHi:before{
      content:none;
  }

  .ceoHi{
      background:none;
      box-shadow:none;
      width:100%;
      margin-top:20px;
      white-space:pre-wrap;
      text-wrap:normal;
      padding:20px 10px;
      }

  .submaintit h1{
      font-size:2rem;
      margin-top:56px;
  }


    .groupImg{
      width:100%;
      height:230px;
      float:none;
  }

  .groupImg::before{
  left:0;
   top:178px;
   font-size: 40px;
  }

  .group img{
      width:100%;
  } 

  .howPay ul li img{
      width:90px;
  }

  .howPay ul li p:nth-child(2){
      font-size:18px;
  }

  .goOrderWrap{
      top:70%;
  }

 .goOrderWrap p{
     font-size:24px;
     margin-top:20px;
 }

   .goOrder{
      height:220px;
      margin-top:30px;
  }



  .goOrderWrap a{
   padding:10px 20px;
   font-size:16px;
   transform:skewX(0deg);
   position:relative;
   padding-top:3px;

  }

   .goOrderWrap div{
       margin-top:20px;
       padding:0;
   border-radius:5px; 
   }

  
  .goOrderWrap p{
      display:inline-block;
      margin-top:0;
      /*margin-left:-40px;*/
      font-size:22px;
      line-height:36px;
      width:60%;
      float:left;
      
  }

  .goOrderWrap div img{
      display:none;

  }

  .goOrderWrap a:before{
      content:'' ;
      display:inline-block;
      width:32px;
      height:32px;
      background:url(../img/service_apply.png) no-repeat;
      background-size:contain;
      margin-right:14px;
      position:relative;
      top:6px;

  }

  /*서비스신청*/
   .orderform table tbody tr th, .orderform table tbody tr td{
       display:block;
       width:100%;
   }

   .email td:after ,.phone td:after{
       content:'';
       display:block;
       clear:both;

   }
  .orderform table tbody tr th, .orderform table tbody tr td{
      padding:10px 20px;
      position:relative;
  }

 .orderform table tbody tr th:after{
     content:'';
     display:block;
     width:100%;
     height:100%;
     background:#f5f5f5;
     position:absolute;
     top:0; 
     left:0;
     z-index:-1;
 }
 .name td input{width:100%;}

.email td p:nth-child(1){
    width: calc(50% - 64px);
  }

.email td p:nth-child(3) {
    width: 56%;
}

.email td p:nth-child(3) input {
    width: 46.5%;
}

.email td p:nth-child(3) select {
    width: 46.5%;
}

  .email td p:nth-child(2){
      width:auto;
      margin-left:6px;
      margin-right:6px;
  }

  .phone td p:nth-child(odd){
      width:30%
  }

  .address td p:nth-child(odd){
      width:30%;
  }

  .address td div{
      width:30%;
  }

  /*공지사항*/
  .noticeDform table tbody tr th{
      display:none;
  }

  .noticetit{
      background:#f5f5f5;
  }

  .noticetxt{
      padding-top:40px;
      padding-bottom:40px;
  }


  .pre-notice{
      white-space:pre-wrap;
  }

  .year{
      display:block;
  }

  .hisImg img{
     display:none;
  }

  .hisImg{
      width:100%;
      background:url(../img/history.jpg) no-repeat;
      height:250px;
      background-position:bottom;
      margin-top:20px;
  }

  .historyWrap{width:100%;}

 .historyWrap table td{
     display:block;
     width:100% !important;
 }

 .history{
     width:100%;
     float:none;
     margin-left:0;
     text-align:left;
 }

  .historyWrap > div{
      display:block;
      width:100%;
  }

  .year{
      border-right:none;
  }

  .hisyear{
      margin-top:50px;
  }

  .year{
      border-top:1px solid #eaeaea;
      border-bottom:1px solid #eaeaea;
      text-align:center;
      font-size:1.8rem;
      padding-top:6px !important;
      padding-bottom:6px !important;
  }

  .mon:before{
      content:none;
  }

 .locaform table, .locaform table tr , .locaform table td ,.locaform table th{
     display:block;

 }

 .locaform table tbody{ width:100%; display:block}

 .locaform table tbody tr td, .locaform table tbody tr th{width:100%; padding:10px;}
  .locaform table tbody tr th{border-right:none; text-align:left;}
  .locaform table tbody tr:last-of-type td{border-bottom:none;}


}


 @media screen and (max-width: 448px) {
     .ceobgWrap{
         margin-top:0px;
     }
    .ceoLetter{
        border: 1px solid #eaeaea;
    padding: 10px;
    padding-top: 30px;
    }
  

    .subBanner .sub_tit{
        margin-top:6px;
    }

  .innerWrap{
      width:98%;
  }

  .ceoHi{
      margin-top:0;
      padding:2% 10px;
  }
   .ceoHi::before{
       font-size:2em;
       margin-left:10px;
       top:-10px;

   }

   .pen{
        
       text-align:center;
       display:inline-block;
       
   }

   .pen:before{
       content:'';
       display:block;
       width:24px;
       height:24px;
       background:url(../img/quote.png) no-repeat;
       background-size:cover;
       background-position-x:1px;
       margin:0 auto;
       margin-bottom:14px;
   }

   
   .pen:after{
       content:'';
       display:block;
       width:24px;
       height:24px;
       background:url(../img/quote.png) no-repeat;
       background-size:cover;
       background-position-x:-26px;
       margin:0 auto;
       margin-top:14px;
   }

   .groupImg{
       height:180px;
   }

  .groupImg:before{
     font-size:2em;
     top:-38px;

  }
  .groupconWrap{
      margin-top:40px;
  }

.howPay ul li{
    width: calc( 50% - 10px );
    border: 1px solid #eaeaea;
    border-radius:10px;
    margin-top:20px;
}

.howPay ul li:nth-of-type(2n-1){
    margin-right:10px;
}
.howPay ul li:nth-of-type(2n){
    margin-left:10px;
}

.orderBtnWrap{

}

.orderBtn{
    float:none;
    text-align:center;
}

.orderBtn input{
    width: calc(50% - 10px)
}

.goListWrap{
    text-align:center;
    margin-top:20px;
}

.goList{
    float:none;

}

.groupbgWrap{
    display:none;
}

.groupconWrap{
    margin-top:0;
}

 .goOrderWrap p{
     font-size:20px;
     line-height:38px
 }

 .subcon{
     padding-top:20px;
 }
 .subcon.innerWrap{ padding-top:20px;}
 .orderform{margin-top:30px;}

}


 @media all and (max-width:320px){
  #tbInfo th:nth-of-type(1){display:none}
  #tbInfo  td:nth-of-type(1){display:none}
  #tbInfo td {
      padding:4px 2px 4px 2px;
        }
    #tbInfo th:nth-of-type(2){border-left:0;}
  #tbInfo  td:nth-of-type(2){border-left:0;}
 }


@media all and ( max-width:px){ .subBanner1 { background-size:130%; background-position:right top }}

   @media screen and (max-width: 501px){
     .subBanner1{background-size:200%; background-position:top right;
     }
   } 


 @media all and (max-width:600px) {
   .goOrder{
       position:relative;
   } 
   .goOrderWrap{position:relative;
                width:100%;
                height:100%;
                top:0;
                transform:translateY(0)
   }


   .goOrderWrap p{
       width:100%;
       right:0;
       font-size:18px;
       text-align:right;
       float:none;
       position:absolute;
        top:0;
      

   }


   .goOrderWrap div{
       position:absolute;
       bottom:0;
       right:0;
   }

 }

   
 /********************애니메이션********************************/
 
[data-aos="reveal-right"]:before {
     content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    transform-origin: top right;
    z-index: 2;
    transform: scale(1, 1);

    transition: transform 1.5s cubic-bezier(0.84, -0.01, 0.48, 0.995);
        transition-delay:0.5s;
}


[data-aos="reveal-right"] .image-bg {
 position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center center;
    transform: translate(-40px, 0);
    transition: transform 0.9s 0.1s cubic-bezier(0.84, -0.01, 0.48, 0.995);
}

/*애니적용후*/

[data-aos="reveal-right"].aos-animate .image-bg {
       transform: translate(0, 0);
}


[data-aos="reveal-right"].aos-animate:before{
      transform: scale(0, 1);
}
.at-content{padding:0}
.list-page{margin-bottom:0 !important}
.pagination-sm>li>a, .pagination-sm>li>span{padding:0;width:30px;height:30px;margin:0 5px;display:flex;align-items: center;justify-content: center;border-radius:3px !important;font-size:16px !important}
.pagination li.active a{background:#ff5629 !important;border-color:#ff5629 !important}
.panel-default{border-top:0}

.board_list .boardform {margin-top: 30px}
.board_list .boardform table {width: 100%; border-top: 2px solid #333;}
.board_list .boardform table thead tr th {background: #f0f0f0; }
.board_list .boardform table thead tr th, .board_list .boardform table tbody tr td {text-align: center;padding: 10px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; }
.board_list .boardform table thead tr th:nth-child(1), .board_list .boardform table tbody tr td:nth-child(1) {border-left: none;}

.board_view .view-content{border-bottom:2px solid #333;padding:30px 0 30px 15px;margin-bottom:10px}

.write_wrap{}
.write_wrap form{border-top:2px solid #333;margin-top:50px}
.write_wrap .qe_notice{border-top:2px solid #333;padding-top:20px}
.write_box{width:100%;display:flex;align-items:center;border-bottom:1px solid #e5e5e5}
.write_box .wr_label{width:15%;line-height:80px;padding:0 15px;font-size:16px}
.write_box .answer{width:calc(100% - 15%);padding-left:15px}
.write_box .answer input, .write_box .answer select, .write_box .answer textarea{width:50%;height:40px;border:1px solid #ccc;background:#fff;box-shadow:0 0 0;border-radius:3px !important;padding:0 15px;font-size:13px}
.write_box .answer textarea{resize:none}
.write_wrap .well{box-shadow:0 0 0;background:#ebebeb;border:0;border-radius:5px !important}
.write_wrap.write-wrap .write-btn{display:flex;align-items:center;justify-content: center;margin:30px 0 0}
.write_wrap .write-btn button, .write_wrap .write-btn a{width:150px;height:50px;line-height:48px;padding:0;text-align:center;font-size:16px}
.write_wrap .write-btn a.cance_btn.btn-black{border-color:#ff5629 !important;background:#fff !important;color:#ff5629 !important}
.write_wrap .write-btn button.qe_btn.btn-color{background:#ff5629 !important;border-color:#ff5629 !important;margin-left:10px}

.notice_view{}
.notice_view .view-head{border-bottom:0;margin-bottom:0}
.notice_view .view-head #trFile .list-group{margin-bottom:0 !important}
.notice_view .view-head #trFile .list-group-item{border:0;padding:0;font-size:16px}

.qe_write{}
.write_box.tel_box .answer{display:flex;align-items:center}
.write_box.tel_box .answer div{width:14.14%}
.write_box.tel_box .answer div input{width:100%}
.write_box.tel_box .answer div + div{position:relative;margin-left:20px;padding-left:20px;width:16%}
.write_box.tel_box .answer div + div::after{content:"-";display:block;position:absolute;left:-2px;top:50%;transform:translateY(-50%);color:#666}
.write_box.email_box{}
.write_box.email_box .answer{display:flex;align-items:center}
.write_box.email_box .answer div{width:23%}
.write_box.email_box .answer div input, .write_box.email_box .answer div select{width:100%}
.write_box.email_box .answer .email{}
.write_box.email_box .answer .email + .email{width:24.861%;position:relative;margin-left:20px;padding-left:20px}
.write_box.email_box .answer .email + .email::after{content:"@";display:block;position:absolute;left:-5px;top:50%;transform:translateY(-50%);}
.write_box.email_box .answer .e_se{margin-left:15px}
.write_box.email_box .answer .e_se select{color:#333;background: url(../img/nav_arrowOff.png) no-repeat 94% 49% transparent;background-size: 12px auto;}
.write_box.content_box{border-bottom:0}
.write_box.content_box .answer{padding:25px 0 25px 15px}
.write_box.content_box .answer textarea{width:90%;height:350px;padding:15px}

.service_write .write_box.url_box .answer input{width:100%}
.service_write .write_box.add_box .answer{padding:25px 0 25px 15px}
.service_write .write_box.add_box .top{display:flex;align-items:center;margin-bottom:10px}
.service_write .write_box.add_box .top input#sample3_postcode{width:17%}
.service_write .write_box.add_box .top input#search_postcode{width:11%;margin-left:10px;background:#f5f5f5;border:1px solid #ccc}
.service_write .write_box.add_box .bottom input{width:100%}
.service_write .write_box.add_box .bottom input + input{margin-top:10px}
.service_view .noticeDform table tbody tr th, .service_view .noticeDform table tbody tr td{padding:10px 15px}
.service_view .noticeDform table tbody tr th{text-align:center}

@media(max-width:991px){

	.write_box .wr_label{width:20%}
	.write_box .answer{width:calc(100% - 20%)}

	.board_list .boardform table tbody tr td .mob_cont > div{display:inline-block}
	.board_list .boardform table tbody tr td .mob_cont > div + div{margin-left:2px}

}
@media(max-width:768px){
	.table-responsive{border-bottom:0}
	.notice_board .table-responsive{;overflow-x:hidden}
	.write_box{flex-direction:column;align-items:flex-start}
	.write_box .wr_label{width:100%;line-height:45px;background:#f5f5f5;border-bottom:1px solid #e5e5e5}
	.write_box .answer{width:100%;padding:10px 15px}	
	.write_box .answer input, .write_box .answer select, .write_box .answer textarea{width:100%}

	.write_box.email_box .answer div{width:30%}
	.write_box.email_box .answer .email + .email{width:35.861%}

	.write_box.tel_box .answer div{width:30.14%}
	.write_box.tel_box .answer div + div{width:33%}

	.write_box.content_box .answer textarea{width:100%}

	.service_write .write_box.add_box .top input#sample3_postcode{width:33%}
	.service_write .write_box.add_box .top input#search_postcode{width:25%}

	.write_box.content_box .wr_label{border-bottom:2px solid #333}


}