@charset "utf-8";
/*
 * Name     : main.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-08-06
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. HERO
    02. ABOUT
    03. VIDEO
    04. BANNERS
    05. MEDIA QUERIES
---------------------------------------------------
*/

/* ------------------------------
 * HERO
------------------------------ */
.hero {position: relative; background-color: #f5df4d; background-size: cover; background-repeat: no-repeat; background-position: center}
.hero .container-xl {position: relative; z-index: 10}
.hero .caption .px-heading-01 {line-height: 1.23}
.hero .button-start {position: relative}
.hero .button-start::after {content: '\F138'; position: absolute; font-family: 'bootstrap-icons'; top: 50%; right: 1.75rem; transform: translate(-6px,-50%); transition: transform .25s ease-in-out}
.hero .button-start:hover::after {transform: translate(0,-50%)}
.hero .object-wrapper {position: absolute; bottom: 86px; left: 50%; width: 90%; max-width: 1300px; transform: translateX(-65%); z-index: 5}
.hero .object-container {position: relative; padding-bottom: 53.645833333333333%}
.hero .object-wrapper img {position: absolute; display: block}
.hero .object-wrapper .object-bg {bottom: 0; left: 0; width: 100%}
.hero .object-wrapper .object-roof {bottom: 7.269142074128539%; left: 2.109375%; width: 44.509334491099671%; z-index: 30}
.hero .object-wrapper .moving-truck, .hero .object-wrapper .moving-car {z-index: 20}
/* .hero .object-wrapper .moving-truck {bottom: 270px; left: 320px; width: 13.490662105042511%; animation: truckAnimation 14s linear infinite} */
/* % 기준 */
/* .hero .object-wrapper .moving-truck {bottom: 17.241379310344828%; left: 25.677083333333333%; width: 13.490662105042511%; animation: truckAnimation 14s linear infinite}
.hero .object-wrapper .moving-car {bottom: 11.708099438652767%; right: 18.59375%; width: 7.381280274257587%; animation: carAnimation 10s linear infinite} */

/* viewport 기준 */
.hero .object-wrapper .moving-truck {bottom: 21.556766150863942%; left: 25.504258180188256%; width: 13.490662105042511%; animation: truckAnimation 14s linear infinite}
.hero .object-wrapper .moving-car {bottom: 14.373339127237478%; right: 18.556701030927835%; width: 7.381280274257587%; animation: carAnimation 10s linear infinite}
.hero .object-wrapper img {user-select: none; pointer-events: none}

@keyframes truckAnimation {
    /* 0% {transform: translate(0,0)} */
    /* 20% {transform: translate(264px,86px)} */
    /* 50% {transform: translate(264px,86px)} */
    /* 20% {transform: translate(13.75vw,6.896551724137931vh)} */
    /* 50% {transform: translate(13.75vw,6.896551724137931vh)} */
    /* 80% {transform: translate(0,0)} */
    /* 100% {transform: translate(0,0)} */

    0% {bottom: 21.556766150863942%; left: 25.504258180188256%}
    20% {bottom: 13.871943576287333%; left: 38.547736441057822%}
    50% {bottom: 13.871943576287333%; left: 38.547736441057822%}
    80% {bottom: 21.556766150863942%; left: 25.504258180188256%}
    100% {bottom: 21.556766150863942%; left: 25.504258180188256%}
}

@keyframes carAnimation {
    0% {bottom: 14.373339127237478%; right: 18.556701030927835%}
    50% {bottom: 2.67370742956452%; right: 41.102644554011654%}
    100% {bottom: 14.373339127237478%; right: 18.556701030927835%}
}

/* ------------------------------
 * ABOUT
------------------------------ */
/* .about {background-color: #f4f4f4} */
.about {background-color:#f5e434;}
.about .about-card a {position: relative; display: block; padding-bottom: 176.65%; border-radius: 16px; background-color: #f9f5e2; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden}
.about .about-card a::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.0); z-index: 6}
/* .about .about-card a::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(to top, transparent 48%, #000); z-index: 6} */
.about .about-card a figure {position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin-bottom: 0; overflow: hidden; z-index: 5}
.about .about-card a figure img {position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; object-fit: cover; transition: transform .5s}
/* .about .about-card a .header {position: relative; z-index: 10} */
.about .about-card a .header {position: absolute; top: 0; left: 0; right: 0; padding: 42px 42px 0; z-index: 10}
.about .about-card a .header h3 {font-size: 35px; font-weight: 700; color: var(--black); letter-spacing: -0.03em; line-height: 1.56; /*text-shadow: 0 2px 4px rgba(0,0,0,.32)*/}
.about .about-card a .header h3::after {content: '\F285 \F285 \F285'; display: inline-block; font-family: 'bootstrap-icons'; font-size: 0.75em; font-weight: normal; color: rgba(0,0,0,.75); margin-left: 10px; vertical-align: -1px; opacity: 0; transition: opacity .5s}
.about .about-card a .footer {display: none; position: absolute; bottom: 0; left: 0; right: 0; padding: 0 42px 42px; z-index: 10}
.about .about-card a .footer h5 {font-size: 32px; font-weight: 700; color: var(--white); letter-spacing: -0.03em; text-shadow: 0 2px 4px rgba(0,0,0,.32)}
.about .about-card a .footer h5::after {content: '\F285'; display: inline-block; font-family: 'bootstrap-icons'; font-size: 0.75em; font-weight: normal; color: rgba(255,255,255,.75); margin-left: 10px; vertical-align: -1px; opacity: 0; transition: opacity .5s}
.section.hero.fp-section.fp-table.active.fp-completely, .section.hero.fp-section.fp-table.fp-completely{background-color:#f5df4d}
.about .about-card .card-sub-text {margin-top: 30px; padding-left: 10px; padding-right: 10px}
.about .about-card .card-sub-text h4 {font-size: 23px; font-weight: 700; margin-bottom: 12px}
.about .about-card .card-sub-text p {font-size: 19px; color: var(--grey-600); letter-spacing: -0.02em; line-height: 1.48}


		.cont{}
		.th_grid{position:relative;width:75%; height:155vw;left:50%;transform:translate(-50%,0%);}
		.th_box{border-radius:10px;width:100%;height:75%;}
		.th_grid .th_box .in_title{padding:8%;    font-size: 35px;    font-weight: 700;    color: var(--black);    letter-spacing: -0.03em;    line-height: 1.56;}
		.th_img{}
		.th_text{}
		.in_txt_title{padding: 5% 2%;font-size: 23px;font-weight: 700;}
		.in_txt_sub{padding: 0 2%;font-size: 19px;color: var(--grey-600);    letter-spacing: -0.02em;    line-height: 1.48;}
		#con_01{background-image:url('/theme/joops/assets/images/main/main_about_menu1.png');background-size:cover;background-position:center center;}
		#con_02{background-image:url('/theme/joops/assets/images/main/main_about_menu2.png');background-size:cover;background-position:center center;}
		#con_03{background-image:url('/theme/joops/assets/images/main/main_about_menu3.png');background-size:cover;background-position:center center;}

		/*좌우 화살표*/
		.arrow-prev,
		.arrow-next {
			position: relative;
			float:left;
			width:50px;
			height:60px;
			margin-right:1px;
		}

		.arrow-prev::after {
			position: absolute;
			left: 15px; 
			top: 20px;
			content: '';
			width: 25px; /* 사이즈 */
			height: 25px; /* 사이즈 */
			border-top: 5px solid #000; /* 선 두께 */
			border-right: 5px solid #000; /* 선 두께 */
			transform: rotate(225deg); /* 각도 */
		}

		.arrow-next::after {
			position: absolute;
			right: 15px; 
			top: 20px; 
			content: '';
			width: 25px; /* 사이즈 */
			height: 25px; /* 사이즈 */
			border-top: 5px solid #000; /* 선 두께 */
			border-right: 5px solid #000; /* 선 두께 */
			transform: rotate(45deg); /* 각도 */
		}


/* ------------------------------
 * VIDEO
------------------------------ */
.video {position: relative}
.video::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color:/*  rgba(0,0,0,.37) */; z-index: 10}
.video .video-caption {position: relative; text-align: center; z-index: 20}
.video .video-caption .link-join {display: inline-block; font-size: 18px; font-weight: 500; color: var(--white); letter-spacing: -0.03em}
.video .video-caption .link-join i {vertical-align: -1px}
.video .video-caption h2, .video .video-caption h3, .video .video-caption .link-join {text-shadow: 0 1px 3px rgba(0,0,0,.28)}

.video2 {position: relative}
.video2::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color:/*  rgba(0,0,0,.37) */; z-index: 10}
.video2 .video-caption {position: relative; text-align: center; z-index: 20}
.video2 .video-caption .link-join {display: inline-block; font-size: 18px; font-weight: 500; color: var(--white); letter-spacing: -0.03em}
.video2 .video-caption .link-join i {vertical-align: -1px}
.video2 .video-caption h2, .video .video-caption h3, .video .video-caption .link-join {text-shadow: 0 1px 3px rgba(0,0,0,.28)}
.video2 .type h2{display:inline;color:white;}
.video2 .type h3{display:inline;color:white;}
.video2 .btnContact{color:white; background-color:#ffffff85; width:150px;margin:auto;margin-top:10px;border-radius:30px;font-size: 25px;line-height:50px; cursor:pointer;transition:all .35s;}
.video2 .btnContact span{color:white !important; transition:all .35s;}
.video2 .btnContact::after{content:'   →';position:absolute;color:#fff0;transition:all .7s;}
.video2 .btnContact:hover{padding-right:20px;width:170px; transition:all .35s;}
.video2 .btnContact:hover::after{display:inline;transition:all .35s;color:#fff;}
.video2 .btnContact:hover span::after{content:'→'; transition:all .35s;}

#v_txt_mo {display:none}

#fullscreen-video {position: absolute; display: block; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; z-index: 5}
.type.t001 {position:relative}
.video .type.t001 h2{position:absolute; text-align:left;}
.type.t001 h3{text-align:right;}
.type.t001 span{color:#ebc727;}



#v_txt_mo h1 {
  font-size: calc( 1em + 10vmin );
  font-weight: 900;
  color: #ffc400;
  
  --x-offset: -0.0625em;
  --y-offset: 0.0625em;
  --stroke: 0.025em;
  --background-color: white;
  --stroke-color: #877d0a;
  
  text-shadow: 
    
    var(--x-offset)
    var(--y-offset)
    0px
    var(--background-color), 
    
    calc( var(--x-offset) - var(--stroke) )
    calc( var(--y-offset) + var(--stroke) )
    0px
    var(--stroke-color);
  
}
/* for browsers that support spread, added in
https://drafts.csswg.org/css-text-decor-4/#text-shadow-property
currently: none browsers! none of them!
I can't even find a test: 
https://wpt.fyi/results/css/css-text-decor */
@supports ( text-shadow: 1px 1px 1px 1px black ) {
#v_txt_mo h1 {
    text-shadow:
      
      var(--x-offset)
      var(--y-offset)
      0px
      0px
      var(--background-color), 
      
      var(--x-offset) 
      var(--y-offset)
      var(--stroke)
      0px
      var(--stroke-color);
    
  }
}

/* ------------------------------
 * BANNERS
------------------------------ */
.banners {background-color: #f1f3f5}
.banners .banner-top .banner-item a {display: -ms-flexbox; display: flex; padding: 24px; border-radius: 16px; background-color: var(--white); -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; transition: box-shadow .4s}
.banners .banner-top .banner-item a:hover {box-shadow: 0 8px 16px rgba(0,0,0,.09)}
.banners .banner-top .banner-item a .banner-text {width: calc(100% - 64px)}
.banners .banner-top .banner-item a .banner-text span {display: block; font-size: 16px; font-weight: 500; color: var(--grey-700); letter-spacing: -0.03em; margin-bottom: 4px}
.banners .banner-top .banner-item a .banner-text p {font-size: 22px; font-weight: 700; color: var(--grey-900); letter-spacing: -0.02em}
.banners .banner-top .banner-item a .banner-thumb {width: 64px}
.banners .banner-top .banner-item a .banner-thumb img {user-select: none; pointer-events: none}
.banners .banner-bottom {margin-top: 80px}
.banners .banner-bottom .banner-item {padding: 48px; border-radius: 16px; background-color: var(--white)}


.allowDown{position:absolute; bottom:5%;left:50%; transform:translate(-50%, 0);} 


#about_mo{display:none;}

/* ------------------------------
 * MEDIA POINT
------------------------------ */
.section.point{background-image:url('/theme/joops/assets/images/main/section_point.png'); background-size:cover; background-repeat:no-repeat; background-position:center center;}
.section.point h2{line-height:28px; text-align:center; color:white;}
.section.point .type.t001{transform: translatey(200px); }
/* ------------------------------
 * MEDIA QUERIES
------------------------------ */
@media (min-width: 576px) {
    .about .about-card a:hover figure img {transform: scale(1.1)}
    .about .about-card a:hover .footer h5::after {opacity: 1}
    .about .about-card a:hover .header h3::after {opacity:1}
}

@media (max-width: 991px) {
    .hero .object-wrapper {bottom: 90px; transform: translateX(-50%)}

    .about .about-card a .header {padding: 28px 28px 0}
    .about .about-card a .header h3 {font-size: 26px}
    .container-xl .card-sub-text h4 {font-size: 19px}
    .container-xl .card-sub-text p {font-size: 17px}
	#about_pc{display:none}
	#about_mo{display:block}
	#v_txt_pc{display:none}
	#v_txt_mo{display:block;}
}



@media (max-width: 767px) {
    .hero .caption .px-heading-01 {font-size: 36px}

    .section:not(.hero):not(#footer) {height: auto !important; padding-top: 60px; padding-bottom: 60px;     min-height: 100vh;}
    .fp-tableCell {height: 100% !important}
	.section.point .type.t001{transform: translatey(118px);}
	.section.point h2{font-size:24px;    line-height: 8px;}
}

@media (max-width: 575px) {
    .about .about-card + .about-card {margin-top: 48px}
    .about .about-card a {padding-bottom: 120%}
    .about .about-card a figure img {transform: translateY(-25%)}
    .about .about-card a .header {padding: 24px 24px 0}
    .about .about-card a .header h3 {font-size: 20px}
    .about .about-card .card-sub-text {margin-top: 24px}
    .about .about-card .card-sub-text h4 {font-size: 18px}
    .about .about-card .card-sub-text p {font-size: 15px}
}

/* ********인디케이터********* */
  .indicator{
    position:relative;
    width:50px;
    height:50px;
    
    transform:rotate(45deg);
	}
  .indicator span{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      box-sizing:border-box;
      border:none;
      border-bottom:3px solid #fff;
      border-right:3px solid #fff;
      animation:animate 1s linear infinite;
	}
      &:nth-child(1){
        top:-30px;
        left:-30px;
        animation-delay:0s;
      }
      &:nth-child(2){
        top:-15px;
        left:-15px;
        animation-delay:0.2s;
      }
      &:nth-child(3){
        top:0;
        left:0;
        animation-delay:0.4s;
      }
      &:nth-child(4){
        top:15px;
        left:15px;
        animation-delay:0.6s;
      }
      &:nth-child(5){
        top:30px;
        left:30px;
        animation-delay:0.8s;
      }    
@keyframes animate{
  0%{
    border-color:#fff;
    transform:translate(0,0);
  }
   20%{
    border-color:#fff;
     transform:translate(15px,15px);
  }
   20.1%,100%{
    border-color:#414042;
  }