.wrap{
  min-width: 320px;
}
.l_inner{
  width: 1200px;
  height: 100%;
  max-width: calc(100% - 80px);
  margin: 0 auto;
}
::selection{background-color: #38f1dc;}
img::selection{background-color: transparent;}


/* 한글 텍스트 -> font 적용 */
.what_is_ryde, .sub_banner_title, .sub_banner_desc{font-family: 'AppleSDGothicNeoM', Arial, Helvetica, sans-serif;}
.what_is_ryde{letter-spacing: -.05rem}
.sub_banner_title{letter-spacing: -0.05rem; word-spacing: .3rem}
.sub_banner_desc{letter-spacing: -0.05rem; word-spacing: .1rem}


/* header 영역 */
.header{ position: fixed; width: 100%; height: 120px; background-color: rgba(0,0,0,1); z-index: 999;}
.header_res_box{height: 100%;}
.header .l_inner{ display: flex; justify-content: space-between; align-items: center; }
.wrap_ryde_identity{display: flex; align-items: center; padding-right: 100px}
.ryde_text_logo{font-size: 1rem;}
.ryde_text_logo img{width: 100%; min-width: 190px;}
.what_is_ryde{margin-left: 20px; white-space: nowrap; font-size: 2.4rem; color: #fff;}
.wrap_download{display: flex;}
/* .hamburgar_menu, .download, .lb_menu{display: none;} */
.wrap_download > a{display: inline-block; }
.wrap_download > a:last-child{margin-left: 10px;}
.wrap_download img{width: 200px;}
@media screen and (max-width: 1100px){
  .header{height: auto; padding-top: 10.91%;}
  .header_res_box{position: absolute; left:0; top:0; width:100%;}
  .wrap_ryde_identity{width: 60%;}
  .wrap_download{width: 40%;}
  .wrap_download img{width: 100%;}
}
@media screen and (max-width: 1019px){ .what_is_ryde{font-size: 2rem;} }
@media screen and (max-width: 767px){ .what_is_ryde{font-size: 1.6rem;} }



/* main_banner 영역 */
.main_banner{height: 800px; padding-top: 120px; background: #000 url(../img/main_bg.png) no-repeat center bottom / cover;}
.main_banner > .l_inner{position: relative;}
.ryde{position: absolute; left:50%; bottom: 50%; transform: translate(-50%, 50%);}
.ryde_meaning{margin-top: 45px; text-align: center; color: #fff; font-family: 'malgunbd'; font-size: 3rem; font-weight: bold;}
.em_text{color: #38f1dc;}
.frame{position: absolute;}
.lt_frame, .lb_frame{left:8%;}
.rt_frame, .rb_frame{right:8%;}
.lb_frame, .rb_frame{bottom:10%;}
.meta_info{position: absolute; left: 8%; padding: 35px 0 0 35px;}
.meta_info_list > dt{ margin-bottom: 2px; color: rgba(255,255,255,.6); font-size: 1.4rem;}
.meta_info_list > dd{ margin-bottom: 15px; color: #fff;}
.meta_info_list > dd:nth-of-type(1){ display:inline-block; padding: 0 5px 1px; background-color: rgba(255,255,255,.2);}
.publishing_company{position: absolute; right: 8%; padding: 40px 40px 0 0; color: rgba(255,255,255,.6); font-size: 1.2rem;}
.gt_sign{position: relative; top: -1px;}
.lt_frame, .rt_frame, .meta_info, .publishing_company{top:10%;} 
@media screen and (max-width: 1100px){ 
  .main_banner{height: auto; position: relative; padding-bottom: 61.8%;} 
  .main_banner > .l_inner{position: absolute; width:100%; left: 50%; bottom: 0; transform: translateX(-50%);}
  .ryde{bottom: 43%;}
  .ryde img{width: 250px}
  .ryde_meaning{font-size: 2.4rem;}
  .lt_frame, .rt_frame, .meta_info, .publishing_company{top:20%;}
}



/* sub_banner 영역 */

/* 1) sub_banner layout 잡기 */
.sub_banner_full_width .l_inner{ display: flex; height: 800px; justify-content: space-between; }
.scd_sub_banner,
.fourth_sub_banner{background-color: #f3f3f3;}
.fst_sub_banner .l_inner{ padding: 160px 0 0 200px;}
.scd_sub_banner .l_inner{ padding: 88px 50px 0}
.trd_sub_banner .l_inner{ height: 950px; padding-top: 230px;}
.fourth_sub_banner .l_inner{ padding-top: 80px;}
@media screen and (max-width: 1300px){ .fst_sub_banner .l_inner{ padding-left: 15%;} }
@media screen and (max-width: 1100px){
  .sub_banner_full_width{position: relative; padding-top: 72%}
  .trd_sub_banner{padding-top: 86.3%}
  .sub_banner_full_width .l_inner{height: 100%; position: absolute; left:50%; top:0; transform: translateX(-50%);}
  .fst_sub_banner .l_inner{padding-top: 10%;}
  .trd_sub_banner .l_inner{padding-top: 20%;}
  .capture_desc{width:100%;}
  .res_box{width:100%; position: relative;}
  .fst_sub_banner .res_box{width:50%; padding-top: 67.5%}
  .scd_sub_banner .res_box{padding-top: 87.8%}
  .trd_sub_banner .res_box{padding-top: 112.1%}
  .fourth_sub_banner .res_box{width: 60%; padding-top: 47.1%}

  .record_screen, .mood_screen, .statics_screen01, .statics_screen02, .vlog_screen{position: absolute; left:0; top:0; width: 100%;}
}



/* 2) sub_banner 텍스트 영역 css */
.fst_sub_banner .capture_desc{margin-top: 180px;}
.scd_sub_banner .capture_desc{margin-top: 230px;}
.trd_sub_banner .capture_desc{width: 100%; margin-top: 180px;}
.fourth_sub_banner .capture_desc{margin-top: 27%;}

.capture_desc{white-space: nowrap;}
.capture_desc .sub_banner_title{font-size: 4.8rem; font-weight: 600; line-height: 1.25;}
.capture_desc .sub_banner_desc{font-size: 2.4rem; color: #7f7f7f; }
.fst_sub_banner .sub_banner_title,
.fst_sub_banner .sub_banner_desc,
.trd_sub_banner .sub_banner_title,
.trd_sub_banner .sub_banner_desc{text-align: right;}
.sub_banner_full_width .sub_banner_desc{margin-top: 20px;}

/* .sub_banner_full_width img{height: fit-content;} */

@media screen and (max-width: 1150px){
  .capture_desc .sub_banner_title{font-size: 4rem;}
  .capture_desc .sub_banner_desc{font-size: 2rem;}
}
@media screen and (max-width: 1100px){
  .fourth_sub_banner .capture_desc{width: 40%;}
}
@media screen and (max-width: 1050px){
  .scd_sub_banner .capture_desc{margin-top: 150px;}
  .trd_sub_banner .capture_desc{margin-top: 150px;}
}
@media screen and (max-width: 1000px){
  /* .scd_sub_banner .res_box{ min-width: 320px} */
}

@media screen and (max-width: 960px){
  .fst_sub_banner .capture_desc{margin-top: 120px;}
  /* .scd_sub_banner .res_box{ min-width: 280px} */
  .capture_desc .sub_banner_title{font-size: 3.4rem;}
  .capture_desc .sub_banner_desc{font-size: 1.6rem;}
  
  /* .l_inner .res_box .mood_screen{min-width: 340px;}
  .l_inner .res_box .vlog_screen{min-width: 400px;} */

  /* .wrap_statics_img img:first-child{margin-left: 100px;}
  .wrap_statics_img img:last-child{display: none;} */
}
@media screen and (max-width: 890px){
  /* .scd_sub_banner .res_box{ min-width: 260px} */
  
}
@media screen and (max-width: 800px){
  .trd_sub_banner .capture_desc .sub_banner_title{font-size: 3.2rem;}
}
@media screen and (max-width: 767px){
  .sub_banner_full_width .l_inner{flex-wrap: wrap;}  
}






/* sub_banner datail css*/

/* fst_sub_banner, "매일 당신의 일상을 영상으로 기록해보세요" */


/* scd_sub_banner, "오늘 하루의 기분은 어땠나요?" */
.mood_area{display: flex; flex-wrap: wrap; max-width: 480px; margin-top: 30px; }
.mood_list{display: flex; align-items: center; width: 50%; padding-bottom: 20px;}
.mood_list dd{ padding-left: 10px; font-size: 2rem;}
@media screen and (max-width: 960px){
  .mood_list{padding-bottom: 10px;}
  .mood_list img{width: 20px;}
  .mood_list dd{font-size: 1.8rem;}
}

/* trd_sub_banner, "기분, 요일, 장소에 따른 다양한 통계를 제공합니다" */
.wrap_statics_img{display: flex; width: 100%;}
.wrap_statics_img .res_box{position: relative}
.wrap_statics_img .res_box:first-child{z-index: 1;}
.wrap_statics_img .res_box:last-child{margin-left: -30px;}
@media screen and (max-width: 1100px){
  .statics_screen01, .statics_screen02{max-width: 232px;}
}



/* fourth_sub_banner, "일상의 영상들을 모아 VLOG로 만들어 보세요" */



/* footer 영역 */
.footer{height: 120px; background-color: rgba(0,0,0,.8);}
.footer_res_box{height: 100%;}
.footer .l_inner{position: relative;}
.to_devrock, .to_email { position: absolute; top: 50%;}
.to_devrock{ left: 0; transform: translateY(-50%);}
.to_email{ right: 0; transform: translateY(-50%); padding: 10px; font-size: 0;}
@media screen and (max-width: 1100px){
  .footer{position: relative; height: auto; padding-bottom: 10.91%;}
  .footer_res_box{position: absolute; left:0; top:0; width:100%;}
}
@media screen and (max-width: 900px){
  .footer img{width: 80%}
  .to_email{padding: 5px;} 
}





/* Mobile Version */
@media screen and (max-width: 767px){
.l_inner{max-width: calc(100% - 40px);}

/* header 영역 */
.header{height: 70px; padding:0;}
.ryde_text_logo img{min-width: 100px;}
.what_is_ryde{font-size: 1rem; margin-left: 10px;}
.wrap_download{display: flex; justify-content: flex-end;}
.wrap_download #android{width: 32px; height: 32px;}
.wrap_download #ios{width: 32px; height: 32px;}
/* .wrap_download
 {
   display: block;
   height: 100%;
   position: relative;
   z-index: 10;
   -webkit-user-select: none;
   user-select: none;
 } 
 .wrap_download a{display: none;} 

 .wrap_download .download{
   display: block;
   position: absolute;
   top: 50%;
   transform: translateY(-60%);
   right: 87px;    
   z-index: 11; 
}
.hamburgar_menu{
   display: block;
   width: 110px;
   height: 24px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 0;   
   cursor: pointer;   
   opacity: 0; 
   z-index: 12; 
   -webkit-touch-callout: none;

   background-color: tomato;
 }
 .lb_menu{
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;    
  z-index: 11; 
  color: #fff;
  font-size: 1.5rem;
  text-decoration: underline;
 }
 */
 /* .wrap_download span
 {
   display: inline-block;
   width: 25px;
   height: 2px;
   position: absolute;
   right: 0;   
   background: #cdcdcd;
   border-radius: 3px;   
   z-index: 11;   
   transform-origin: 4px 0px;   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.55s ease;
 }
.wrap_download span:nth-of-type(1){
  top: 50%;
  transform: translateY(-9px);
  transform-origin: 100% 0%;
 }
.wrap_download span:nth-of-type(2){
  top: 50%;
  transform: translateY(-50%);
 }
.wrap_download span:nth-of-type(3){
  top: 50%;
  transform: translateY(7px);
  transform-origin: 100% 100%;
} */
 
/* .wrap_download .hamburgar_menu:checked ~ span:nth-of-type(1){
  transform: rotate(-45deg) translate(3px, -14px)
}
.wrap_download .hamburgar_menu:checked ~ span:nth-of-type(2){
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
.wrap_download .hamburgar_menu:checked ~ span:nth-of-type(3){
  transform: rotate(45deg) translate(-1px, 9px)
} */

/* 
.menu_box{
  position: absolute;
  top: 0;
  right: -20px;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  margin: 0 -360px 0  0;
  background-color: rgba(0,0,0,.9);
  opacity: 0;
  transition: .5s;
}

.wrap_download .hamburgar_menu:checked ~ .menu_box{
  margin: 0;
  opacity: 1;
}
.wrap_download .hamburgar_menu:checked ~ a{
  display: block;
  position: fixed;
  z-index: 11;
  right: 50%;
  transform: translateX(50%);
}
.wrap_download .hamburgar_menu:checked ~ a:nth-of-type(1){
  top: 30%;
  
}
.wrap_download .hamburgar_menu:checked ~ a:nth-of-type(2){
  bottom: 30%;
} */



/* main_banner 영역 */
.main_banner{padding: 100px 0 100%;}
.ryde img{width: 150px;}
.ryde_meaning{margin-top: 30px; font-size: 1.6rem;}
.frame{transform: scale(0.5);}
.lt_frame, .lb_frame{left:0;}
.rt_frame, .rb_frame{right:0;}
.lb_frame, .rb_frame{bottom:0;}
.lt_frame, .rt_frame, .meta_info, .publishing_company{top:5%;} 
.meta_info{padding: 0; left: 10%; top: 20%;}
.meta_info_list > dt{margin:0; font-size: 1rem;}
.meta_info_list > dd{margin-bottom: 5px; font-size: 1.2rem;}
.publishing_company{top: 20%; right: 10%; padding: 0; font-size: 1rem;}


.sub_banner_full_width{position: static; padding-top: 0; height: 675px}
.sub_banner_full_width .l_inner{display: block; position: static; padding:0; transform: translateX(0);}
.capture_desc{white-space: normal;}
.capture_desc .sub_banner_title, .capture_desc .sub_banner_desc{text-align: center;}
.fst_sub_banner .res_box{width: 100%; padding-top: 50px; position: static;}
.fst_sub_banner .capture_desc{margin-top: 50px;}
.record_screen, .mood_screen, .statics_screen01, .statics_screen02, .vlog_screen{position: static; width: 180px;}
.res_box{text-align: center;}


.sub_banner_full_width.scd_sub_banner{height: 800px}
.scd_sub_banner .capture_desc{padding-top:50px; margin:0;}
.mood_area{margin-top: 15px;}
.mood_list{padding-left: 20px;}
.scd_sub_banner .res_box{padding-top: 10px;}
.mood_screen{width: 230px}


.wrap_statics_img .res_box{padding-top: 60px;}
.wrap_statics_img .res_box img{width: 100%; max-width: 180px;}
.trd_sub_banner{height: 750px;}
.trd_sub_banner .capture_desc{margin-top: 50px;}

.fourth_sub_banner .capture_desc{width: 100%; padding-top: 60px; margin-top: 0}
.fourth_sub_banner .res_box{width: 100%; padding-top: 50px;}
.vlog_screen{width: 100%; max-width:350px;}


.footer{height: 70px; position: static; padding: 0;}
.footer_res_box{position: static;}
.to_devrock img{width: 130px;}
.to_email img{width: 20px;}
}







@media screen and (min-width: 768px){
  .record_screen, .fst_sub_banner .sub_banner_title, .fst_sub_banner .sub_banner_desc{display: none;}

  .scd_sub_banner .sub_banner_title, .scd_sub_banner .sub_banner_desc{opacity: 0; margin-left: -40vw;}
  .mood_area{opacity: 0; margin-left: -40vw;}
  
  .statics_screen02{opacity: 0; margin-left: -150px;}
  .trd_sub_banner .sub_banner_title, .trd_sub_banner .sub_banner_desc{display: none;}
  
  .fourth_sub_banner .sub_banner_title, .fourth_sub_banner .sub_banner_desc{opacity: 0; margin-left: -40vw;}
}