/* 공통 */
.out_a{display: block; width: 100%; height: 100%;}
body{background-color: #f5f5f5;}
.sec{background-color: #f5f5f5; }
.sec .title{text-align: center; margin-bottom: 85px;}
.sec .title b{font-size:55px;  font-family: 'Giants'; }
.sec .title p{font-size: 20px; opacity: 0.8; margin-top: 4px;}

.header2{position: absolute; border-bottom: 1px solid rgba(255,255,255,0.3); left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; z-index: 3; top: 0; width: 1440px; max-width: 100%; margin: 0 auto; padding:24px 0;}
.header2 .left{width: 120px;}
.header2 .right a{color: #fff; font-size:40px; font-weight: 700;font-family: 'Giants'; text-shadow: 0px 0px 8px rgba(0,0,0,0.3); }
.header2 .right a i{font-family: 'Giants';}
.header2 .right img{width: 45px; filter:invert(1); margin-right: 16px;margin-bottom: -3px;}

.header2 .left img {display:block}
/* sec01 */
.sec.sec01{padding: 0; position: relative;
   display: flex; align-items: center; min-height: 50vh;
   background:url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/DRIVE/16630971946233.png)no-repeat 80% 50% /cover;
}
.sec.sec01 .inner{
  /* position: absolute; left: 50%; top: 65%; transform: translate(-50%, -50%);  */
  width: 1440px; max-width: 100%; margin: 200px auto 0;}
.sec.sec01 .txt_wrap{font-size:85px;}
.sec.sec01 .txt_wrap .con1{font-size: 0.65em; margin-bottom: 16px;}
.sec.sec01 .txt_wrap .con3{font-size: 0.7em;}

.sec.sec01 b{ font-family: 'Giants'; color: #fff;  display: block; letter-spacing: 2px; line-height: 1.3;}
.sec.sec01 i{ font-family: 'Giants'; color: #25d0f4;}
.sec.sec01 p{color: #fff; font-size:26px; font-weight: 600; text-shadow: 1px 1px 8px rgba(0,0,0,0.4); margin:40px 0; letter-spacing: 1.5px;word-break: keep-all;}
.sec.sec01 a {color: #fff;display: block;border: 1px solid #ddd;font-size: 46px;font-weight: 700;padding: 20px;text-align: center;transition-duration: 0.3s;
  animation: ani 2s infinite 0s linear;
}
@keyframes ani{
  0%{background-color: transparent;}
  50%{background-color: #339be4;}
  100%{background-color: transparent;}

}

.appinfo-box {display:flex;flex-direction: column;gap:15px;}
.appinfo-box div {
  font-size:25px;background:#3E2723;color:#fff;padding:14px 16px;border:1px solid #2C1A15;line-height:1.5;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.sec.sec02 .ani {color: #fff;display: block;margin-top: 0px;border: 1px solid #ddd;font-size: 46px;font-weight: 700;padding: 20px;text-align: center;transition-duration: 0.3s; margin: 0 0 50px;
  animation: ani 2s infinite 0s linear;
}

.appbtn-wrap {display:flex; gap:15px; align-items:center; margin:16px 0;}
.appbtn-wrap button {
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%; height:56px;
  background:#000; color:#fff;
  font-size:18px;font-weight:500;
  border:0;border-radius:8px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.3);}


.sec .title p.app-intro{font-size:46px;}

.point-text {font-size:34px;color:yellow;display: block;}

.sec.sec01 a:hover{background-color: #339be4; border: 1px solid #339be4;}
.sec.sec01 a img{display: inline-block; vertical-align: middle; margin-top: -4px; margin-left: 8px;}
/* sec02 */
.sec02 {background: linear-gradient(to top, #064069, #000);}
.sec02 .title{position: relative; z-index: 3; color: #fff; margin-bottom: 16px;}
.sec02 .inner{ width: 1440px; max-width: 100%; margin: 0 auto; padding: 50px 0 100px; position: relative; z-index: 2;}
.sec02 ul{display: flex; width: 1260px; max-width: 100%; margin: 0 auto;}
.sec02 ul li{width: 33.333%; position: relative;}
.sec02 ul li .con_wrap{height: 100%; position: relative; z-index: 5; padding: 32px; background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
/* .sec02 ul li .con_wrap::after{content: ""; width: 30px; height: 30px; border: 4px solid #fff; background-color: #339be4; 
   box-shadow: 0px 0px 10px rgba(0,0,0,0.3); border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); bottom: -78px;

}  */
.sec02 ul li .con_wrap .img_wrap {text-align: center;}
.sec02 ul li .con_wrap .img_wrap img{width: 80%; margin: 0 auto;}
.sec02 ul li::after{content: ""; width: 92%; background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/DRIVE/166308787832341.png)no-repeat center center / cover; 
   position: absolute; left: 50%; bottom: -19px; height: 28px; transform: translateX(-50%); z-index: 1;
}
.sec02 h2{font-size: 50px; text-align: center; font-family: 'Giants'; display: block; margin-bottom: 60px;}
.sec02 ul li .con_wrap p{font-size: 20px; font-weight: 700; margin-top: 16px;}
.sec02 ul li .con_wrap b{border-radius: 55px; box-shadow: inset 3px 4px 0px rgba(0,0,0,0.3); padding:10px 32px; margin: 0 auto 32px auto; text-align: center;font-family: 'Giants'; background-color: #053658; color: #fff;}
.sec02 .last img{margin: 0 auto;}
.sec02 .last{text-align: center; margin-top: 60px; position: relative; z-index: 3;}
.sec02 .last02 {position: absolute;bottom: 0;top: 159px;left: 50%;z-index: 1;width: 134%;opacity: 0.2;transform: translateX(-50%);}
/* sec03 */
.sec03{position: relative; z-index: 3; background-color: #fff;}
.sec03 .title{text-align:left; width: 300px;}
.sec03 .title b{line-height: 1.4; display: block; margin-bottom: 24px;}
.sec03{background-color: #fff; padding: 120px 0;}
.sec03 .inner{width: 1440px;max-width: 100%; margin: 0 auto;}
.sec03 input{background-color: #f5f5f5; border: 1px solid #efefef; padding: 16px 16px; width: 100%; }
.sec03 input:focus{border: 1px solid #339be4; outline: 1px solid #339be4;}
.sec03 .inner .input_con{display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between;}
.sec03 .inner .input_con .in{width: 49%; margin-bottom: 32px;} 
.sec03 .inner .input_con .in p{margin-bottom: 8px; font-weight: 600;}
.sec03 .inner .input_con .in:last-child{width: 100%;}
.sec03 .inner textarea{padding: 16px 16px; background-color: #f5f5f5; border: 1px solid #efefef;}
.sec03 .inner textarea:focus{border: 1px solid #339be4; outline: 1px solid #339be4;}
.sec03 .inner button{background-color: #339be4; width: 120px;  color: #fff; padding:16px 16px; font-size: 16px; width: 100%; margin-top: 32px;}
.sec03 .inner .left{ display: flex; align-items: flex-start; width: 100%;}
.sec03 .inner .right{width:calc(100% - 300px); padding-left: 100px;}
.sec03 .inner .right input[type="file"]{display: none;}
.chk_box { display: block; position: relative; padding-left: 32px; margin-bottom: 10px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* 기본 체크박스 숨기기 */
.chk_box input[type="checkbox"] { display: none; }

/* 선택되지 않은 체크박스 스타일 꾸미기 */
.on { width: 20px; height: 20px; background: #ddd; position: absolute; top: 1px; left: 0; }

/* 선택된 체크박스 스타일 꾸미기 */
.chk_box input[type="checkbox"]:checked + .on { background: #339be4; }
.on:after { content: ""; position: absolute; display: none; }
.chk_box input[type="checkbox"]:checked + .on:after { display: block; }
.on:after { width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 7px; top:3px; }

.sec03 .btn_wrap i{font-size: 16px; font-weight: 500; padding-left: 32px; display: block;}
.sec03 .btn_wrap i span{opacity: 0.6; cursor: pointer;}


.privacy_modal .modal-body{border: 1px solid #ddd; padding: 32PX; background-color: #f7f7f7; max-height: 50vh; overflow-y: auto; overflow-x: hidden;}
.privacy_modal .modal-head{font-family: 'Giants'; font-size: 30px; text-align: center; margin-bottom: 32px;}
.privacy_modal .x-btn{position: absolute; z-index: 2; right: 10px; top: 0; font-size: 30px; font-weight: 600; cursor: pointer;}
.alert_modal {background-color:rgba(0,0,0,0.85) !important;}
.alert_modal .modal-wrap{border-radius: 3px; overflow: hidden;}
.alert_modal .modal-head{font-size: 24px; font-weight: 600; font-family: 'Giants'; text-align: center; margin-bottom: 16px;}
.alert_modal button{display: block; margin-top: 24px; width: 100px; max-width: 100%; border-radius: 55px; background-color: #339be4; color: #fff; padding: 12px 16px; margin: 24px auto 0 auto;}
.alert_modal i{opacity: 0.7;}

.footer02{display: flex; justify-content: space-between; width: 1240px; max-width: 100%; margin: 0 auto; background-color: #f5f5f5; border-top: 0;}
.footer02 .left{display: flex; flex-wrap: wrap; align-items: center;}
.footer02 .left p{margin-right: 8px; padding-right: 8px; opacity: 0.7; position: relative; font-size: 15px;}
.footer02 .left p::after{content: ""; width: 1px; height: 13px; background-color: #999; position: absolute; right: 0; top: 5px;}
.footer02 .left p:last-child{margin-right: 0;}
.footer02 .left p:last-child::after{display: none;}
.footer02 .right{width: 85px;}


.file_btn label{color: #fff; background-color: #339be4; padding: 12px 24px; font-size: 16px; cursor: pointer;}
.file_btn{display: flex; margin-bottom: 32px;}
.file_btn>div:first-child{margin-right: 32px; font-size: 18px; font-weight: 600;}
.file_btn .list{display: flex; align-items: center; flex-wrap: wrap;}
.file_btn .list p:last-child{margin-right: 0;}
.file_btn .list p {margin-right: 16px; display: flex; align-items: center;}
.file_btn .list p span:first-child{text-decoration: underline;}
.file_btn .list p .x_btn{width: 20px; height: 20px; background-color: #ddd; cursor: pointer; margin-left: 4px; display: flex; align-items: center; justify-content: center; text-decoration: none;}





/* ********************************************* *
 * 1660px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   
   
    
 }
 
 /* ********************************************* *
 * 1440px
 * ********************************************* */
 @media screen and (max-width: 1440px){

   .sec .inner{padding-left: 16px; padding-right:16px;}
   .header2{padding: 24px 16px;}
   .sec.sec01 .txt_wrap{font-size: 70px;} 
   .footer02{padding: 32px 16px;}
 
 }
 
 /* ********************************************* *
 * 1200px
 * ********************************************* */
 @media screen and (max-width: 1200px){

   .sec .title b{font-size: 46px;}
   .sec .title p{font-size: 19px;} 
   
   .sec.sec01 a img {width:90px;}

 }
 
 /* ********************************************* *
 * 1024px
 * ********************************************* */
 @media screen and (max-width: 1024px){
  .sec.sec01 a img {width:70px;}
   
 }
 
 
 /* ********************************************* *
 * 960px
 * ********************************************* */
 @media screen and (max-width: 960px){

  .sec.sec01 .inner {margin-top:150px;}

   .header2 .left{width: 75px;}
   .header2 .right a{font-size: 26px;}
   .header2 .right img{width: 24px;}
   .sec.sec01 .txt_wrap{font-size: 62px;}
   .sec.sec01 p{font-size: 18px; margin-top: 32px;}

   .sec .title b{font-size: 40px;}
   .sec .title p{font-size: 18px;}
   .sec02 ul li .con_wrap b{font-size: 16px;}
   .sec02 ul li .con_wrap p{font-size: 18px;}
   .sec02 ul li .con_wrap .img_wrap{text-align: center;}
   .sec02 ul li .con_wrap .img_wrap img{width:60%; margin: 0 auto;}

   .sec03 .inner .left{display: block;}
   .sec03 .inner .right{padding-left: 0;}
   .sec03 .btn_wrap{display: block;word-break:keep-all}
   .sec03 .btn_wrap button{width: 100%; margin-top: 32px; padding: 16px 16px;}

   .sec .title{text-align: center;}
   .footer02{display: block;}
   .footer02 .right{margin-top: 32px;}

   .sec.sec01 a{font-size: 34px;}
   .sec .title p.app-intro{font-size: 34px;}

   .sec02 ul li .con_wrap .img_wrap img{width: 80%;}

   .sec03 .title{width: 100%;margin-bottom:40px;}
   .sec03 .inner .right{width: 100%;}

   .sec.sec01 a img {width:50px;}

   .point-text {font-size:26px;}

   .sec02 .inner {padding-bottom:70px;}
   .sec03 {padding: 70px 0;}

   .appinfo-box div {font-size: 22px;}

 }
 
 
 /* ********************************************* *
 * 768px
 * ********************************************* */
 
 @media screen and (max-width: 768px){
  
  .sec.sec01 a{font-size:29px;}
  .sec .title p.app-intro{font-size:29px;}
  .sec02 ul li .con_wrap{padding: 24px 16px;}
  .sec02 ul li:first-child .con_wrap .img_wrap img{width: 50%;}
  .sec02 ul li .con_wrap b{padding:12px 24px; width: 100%;}

  .privacy_modal .modal-head{font-size: 22px;}

  .point-text {font-size:22px;}

  .sec02 .inner {padding-top:35px;padding-bottom:50px;}
  .sec.sec02 .ani {margin-bottom:35px;}
  .sec03 {padding:50px 0;}
  .appinfo-box div {font-size:20px;}
  .sec.sec01 a img {width:40px;}

 }
 
 
 /* ********************************************* *
 * 640px
 * ********************************************* */
 @media screen and (max-width: 640px){
  /* .sec .title b{font-size: 36px;}
   .sec.sec01 .txt_wrap{font-size: 50px;}
   .sec.sec01 p{font-size: 17px;}
   .sec.sec01{height: 72vh;}

   .sec.sec01 a{font-size: 23px; padding:24px 16px ; margin-top: 48px;}
   .sec .title p.app-intro{font-size: 23px;}
   .sec.sec01 a img{width: 45px;}
   .sec02{margin-top: -0;} */
 }
 
 
 /* ********************************************* *
 * 500px
 * ********************************************* */
 @media screen and (max-width: 500px){
 
   .sec.sec01 .txt_wrap{font-size: 42px;}
   .sec.sec01 p{font-size: 17px; word-break: keep-all;}

   .sec .title b{font-size: 30px;}  
   .sec02 ul {flex-wrap: wrap;}
   .sec02 ul li{width: 100%;}
   .sec02 ul li + li{margin-top: 24px;}
   .sec02 ul li .con_wrap .img_wrap img{width: 50%;}
   .sec02 .last{display: none;}
   .sec02 ul li .con_wrap::after{display: none;}

   .sec03 .inner .input_con .in{width: 100%; margin-bottom: 16px;}
   .footer02 .left{display: block;}
   .footer02 .left p::after{display: none;}

   .sec.sec01 .inner{top: 58%;}

   .privacy_modal .modal-head{font-size: 20px;}



  .sec.sec01 a,.sec .title p.app-intro {font-size:24px;}
  .point-text {font-size:20px;}
  .appinfo-box div {font-size: 18px;}
  .appbtn-wrap button {height:50px;font-size:16px;gap:5px;}
  .appbtn-wrap {flex-direction: column;}


 }
 
 /* ********************************************* *
 * 400px
 * ********************************************* */
 @media screen and (max-width: 400px){

   .sec.sec01 .txt_wrap{font-size: 34px;}
   .sec .title p{font-size: 16px;} 
   .sec.sec01 p{font-size: 16px;}
   .sec .title b{font-size: 28px;}  
   .sec02 ul li .con_wrap b{padding: 10px 24px; font-size: 14px;}

   .header2 .right a{font-size: 22px;}
   .header2 .left{width: 65px;}

   .sec.sec01 a{font-size: 19px;}
   .sec .title p.app-intro{font-size: 19px;}
   .sec.sec01 a{padding: 16px 8px;}
   .sec.sec01 .inner{top: 61%;}

   .privacy_modal .modal-head{font-size: 18px;}
   .point-text {font-size:16px;}
   .appinfo-box div {font-size:16px;}
   
 }

  
 /* ********************************************* *
 * 300px
 * ********************************************* */
 /* @media screen and (max-width: 300px){

  .sec.sec01 a{font-size: 16px;}
  .sec .title p.app-intro{font-size: 16px;}
  .sec.sec01 a img{width: 27px;}
  .sec.sec01 a{padding: 16px 8px;}

  .sec .title b{font-size: 25px;}
  .sec .title p{font-size: 15px;}
  .sec02 ul li .con_wrap p{font-size: 16px;}
  .sec03 .inner button{font-size: 15px;}
  .chk_box i{font-size: 15px;}
  .file_btn label{font-size: 14px;}

 }

  */