@charset "utf-8"; html,
body { width: 100%; height: 100%; box-sizing: unset; } 
body { padding-bottom: 200px; background-color: var(--gray19); -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ } 

body::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } 

@media (max-width: 1023px) { 
  body { padding-bottom: 0; 
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */ } 
 }
/* logo */
 head { display: block; } 
 header { background-color: transparent; width: 100%; } 
 header.head { position: fixed; background-color: transparent; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 999; } 
 header.head > .header_wrap { background-color: transparent; } 
.header_wrap { /* position: fixed; */ } 
.header_wrap h1 a { background: url(/images/common/h1_logo.png) center / 20.5rem no-repeat; } 
.gnb > li > a { color: var(--grayed); } 
.hambuger_btn { background: url(/images/common/hamburger_white.svg) center / 3.6rem no-repeat; } 

@media (max-width: 1023px) { 
  header.head { position: relative; top: unset; left: unset; transform: unset; } 
 }

/* swiper - fullpage*/
.swiper { width: 100%; height: 100%; } 

.swiper-wrapper.bg { min-height: 100%; } 
.swiper-slide { } 
.swiper-container { width: 100%; height: 100%; /* margin-top: -88px; */ margin-left: auto; margin-right: auto; overflow: hidden; } 
.swiper-pagination { position: fixed !important; right: 5rem !important; top: 50% !important; z-index: 999 !important; transform: translateY(-50%) !important; } 
.swiper-pagination span { display: block; width: 5px; height: 1.875rem; border-radius: 2px; background-color: rgba(0, 0, 0, 0.1); margin-bottom: 0.625rem !important; transition: all 0.3s; opacity: 1; } 
.swiper-pagination span:hover,
.swiper-pagination span.swiper-pagination-bullet-active { background-color: var(--red); } 

@media (max-width: 1023px){
 .swiper-wrapper.bg { display: flex; flex-direction: column; } 
 .swiper-container { overflow: unset; margin-top: -70px; height: auto; } 
 .swiper-pagination { display: none;}
 }

 /* section 공통 */
 .section01 { background-color: #00144b; } 
 .section02 { background-color: #fff; } 
 .section03 { background: #005c92 url(/images/main/safety_bg.png) bottom / cover no-repeat;; } 
 .section04 { background: #00acc1 url(/images/main/partner_bg.png) bottom / cover no-repeat; } 
 .section02,
 .section03,
 .section04 { padding-top: 8.8rem; /*  padding-top: 18.8rem; padding-bottom:10rem; */ display: flex; align-items: center; justify-content: center; } 
 .section02 .section_contents,
 .section03 .section_contents,
 .section04 .section_contents
 { width: min(100%, 131.2rem); padding-left: 6.4rem; padding-right: 6.4rem; position: relative;} 
 @media (max-width: 1023px){ 
  .section02 .section_contents,
  .section03 .section_contents,
  .section04 .section_contents { margin-bottom: 8.8rem; padding-left: 2.6rem; padding-right: 2.6rem; }

 }

 .h2-wrap { } 
 .h2-wrap h2 { font-family: 'OneMobile-Title'; font-size: 4.8rem; color: var(--white); } 
 .h2-wrap p { font-size: 2rem; color: var(--white); line-height: 1.4; margin-top: 2.5rem; } 

/* main visual */
.section01 { position: relative; width: 100%; /* height: 100vh; */ overflow: hidden; } 
.main_visual .swiper-pagination { position: fixed !important; right: 15rem !important; top: 50% !important; z-index: 10 !important; transform: translateY(-50%) !important; } 
.main_visual .swiper-pagination span { display: block; width: 5px; height: 1.875rem; border-radius: 2px; background-color: rgba(0, 0, 0, 0.1); margin-bottom: 0.625rem !important; transition: all 0.3s; opacity: 1; } 
.main_visual .swiper-paginatio span:hover,
.main_visual .swiper-pagination span.swiper-pagination-bullet-active { background-color: var(--red); } 
.section01 .main_visual img { width: 100%; height: 100vh; object-fit: cover; position: relative; } 
.section01 .main_visual img:before { content: ''; background: linear-gradient(42deg, rgba(0,20,69,1) 14%, rgba(0,20,69,0) 50%); position: absolute; left: 0; height: 100%; width: 100%; } 
.section01 .main_visual .title_wrap { width: min(100%, 131.2rem); padding-left: 6.4rem; padding-right: 6.4rem; position: absolute; left: 50%; top: 300px; transform: translateX(-50%); } 
.section01 .main_visual .title_wrap p { font-family: 'OneMobile-Title'; font-size: 72px; color: var(--grayed); line-height: 1.4; text-align:center} 
.section01 .main_visual .title_wrap span { font-size: 20px; color: var(--grayed); line-height: 1.6; margin-top: 2rem; display: block; text-align:center} 
.section01 .main_visual .button-wrap { width: min(100%, 131.2rem); padding-left: 6.4rem; padding-right: 6.4rem; position: absolute; top: 480px; left: calc(50% - 2rem); transform: translateX(-50%); z-index: 1; } 
.section01 .main_visual .button-wrap .swiper-button-prev,
.section01 .main_visual .button-wrap .swiper-button-next { width: 3.6rem; height: 2.4rem; background-size: 3.4rem; background-position: center; background-repeat: no-repeat; position: absolute; top:16rem; cursor: pointer; } 
.section01 .main_visual .button-wrap .swiper-button-prev::after,
.section01 .main_visual .button-wrap .swiper-button-next:after { display: none; } 
.section01 .main_visual .button-wrap .swiper-button-prev { background-image: url(/images/main/arrow_left.svg); left: calc(50% - 3rem); } 
.section01 .main_visual .button-wrap .swiper-button-next { background-image: url(/images/main/arrow_left.svg); transform: rotate(-180deg); left: calc(50% + 3rem); } 
.section01 .main_visual .swiper-scrollbar { background-color: rgba(255, 255, 255, .5); } 
.section01 .main_visual .swiper-scrollbar-drag { background-color: #1900e6; } 
.scroll-down {/* width: min(100%, 131.2rem);*/ height: 8.1rem; /*padding-left: 6.4rem; padding-right: 6.4rem;*/ position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%);  z-index: 1; opacity: .8;} 
.scroll-down .scroll-downbtn a { width: 3.6rem; height: 8.1rem; border: 1px solid var(--white); border-radius: 1.8rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.scroll-down .scroll-downbtn span { writing-mode: vertical-rl; font-size: 1.2rem; color: var(--grayed); }
.scroll-down .scroll-downbtn i { display: inline-block; width: 1.2rem; height: .7rem; animation: scroll-down .5s linear infinite;}
@keyframes scroll-down { 
  0% { transform: translateY(0); opacity: 0;}
  100% { transform: translateY(.5rem); opacity: 1;}
}

@media (max-width: 1023px) { 
  .section01 .main_visual .title_wrap { top: 260px;}
  .section01 .main_visual .title_wrap p { font-size: 58px;}
  .section01 .main_visual .button-wrap { top: 410px;}
  .scroll-down { display: none;}
}
@media (max-width: 820px) { 
  .section01 .main_visual .title_wrap { top: 240px;}
  .section01 .main_visual .title_wrap p { font-size: 42px;}
  .section01 .main_visual .title_wrap p > br,
  .section01 .main_visual .title_wrap span { display: none;}

}
@media (max-width: 414px) { 
  .section01 .main_visual .title_wrap p { font-size: 38px;}
}

/* 메인푸터 */
footer { padding: unset; } /* 풀페이지 footer 영역 */
.foot_main { position: fixed; display: flex; /* 상단여백 */
 flex-direction: column; align-items: flex-end; left: 0px; right: 0px; top: 100vh; z-index: 100; transition: top 0.3s ease-in-out; /* height: calc(var(--vh, 1vh) * 100); */
 height: 100vh; background-color: transparent; } 

.foot_main.transition-up { top: 0px; } 
.footer_main_area { background-color: var(--gray19); margin-top:50px;} 
.footer-wrap { margin: 0 auto; } 
.foot_main .footer_main_area { margin-top: auto; width: 100%; padding: 5rem 6.4rem; } 

@media (max-width: 1023px) { 
  footer { padding: 5rem 1.6rem; } 
 }

/* 사업분야 */
.section02 { flex-direction: column; }
.business { display: flex; align-items: center; justify-content: space-between; gap: 2rem; position: relative; z-index: 1;}
.card_wrap { width: 100%; height: 424px; margin-top: 8rem; }
.card { width: 100%; height: 424px; border-radius: 1.6rem; position: relative; perspective: 1000px; cursor: pointer;}
.card img { max-width: 100%; height: 424px; object-fit: cover; border-radius: 1.6rem; }
.card > div{ border-radius: 1.6rem; position: absolute; top: 0; left: 0; transition: .5s;}
.card .front { }
.card .front p { font-size: 3.6rem; font-weight: 700; color: var(--white); position: absolute; left: 50px; top: 50px;}
.card .back { background: var(--primary); height: 100%; padding: 50px; color: var(--white); transform: rotateY(-180deg); backface-visibility: hidden;}
.card .back p { font-size: 3.6rem; font-weight: 700; color: var(--white);}
.card .back em { font-size: 1.6rem; font-weight: 400; color: var(--white); line-height: 1.4; margin-top: 3.5rem; display: block;}
.card .btn_more { display: block; width: 14rem; border-radius: 19rem; border: 1px solid var(--white); position: relative; margin-top: 7rem; } 
.card .btn_more::after { content: ''; width: 3rem; height: 3rem; border-radius: 50%; background: #dbdbdb url(/images/main/arrow_right.svg) center / 1.5rem no-repeat; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.card .btn_more span { font-size: 1.6rem; color: var(--white); line-height: 3.7rem; padding-left: 1.5rem; opacity: 1; } 
.card:hover .front { transform: rotateY(180deg)}
.card:hover .back { transform: rotateY(0)}

.movewrap { width: 100%; min-height: 11rem; position: absolute; bottom: -25px; }
/* .movewrap > div { padding-bottom: 40%; width: 100%;} */
.moving { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(/images/main/business_txt.png) bottom / cover repeat-x; animation: moveright 180s linear infinite;}
@keyframes moveright { 
  0% { background-position: 0% center;}
  100% { background-position: 600% center;}
}
@media (max-width: 1280px) {
  .card .back em { font-size: 1.4rem}
 }
@media (max-width: 1023px) { 
  .business { flex-direction: column;}
  .card img { width: 100%;}
  .card .front { width: 100%;}
  .card_wrap:nth-child(2),
  .card_wrap:nth-child(3) { margin-top: 2rem;}
}

 /* 안전분야 */
 .safety { margin-top: 8rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: nowrap; } 
 .safety li { flex: 1; height: 50rem; padding: 5rem; border-radius: 1.6rem; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; transition: all 0.3s;  cursor: pointer; } 
 .safety li::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 1.6rem; } 
 .safety li:nth-child(1)::before { background: url(/images/main/safety_img01.png) center / cover no-repeat; } 
 .safety li:nth-child(2)::before { background: url(/images/main/safety_img02.png); } 
 .safety li:nth-child(3)::before { background: url(/images/main/safety_img03.png); } 
 .safety p { font-size: 3.6rem; font-weight: 700; color: var(--white); transition: all 0.3s; z-index: 1;} 
 .safety em { font-size: 1.6rem; color: var(--white); margin-top: 3rem; opacity: 0; transition: all 0.3s; z-index: 1;}
 .safety .btn_more { display: block; width: 14rem; border-radius: 19rem; border: 1px solid var(--white); position: relative; margin-top: 7rem; } 
 .safety .btn_more::after { content: ''; width: 3rem; height: 3rem; border-radius: 50%; background: #dbdbdb url(/images/main/arrow_right.svg) center / 1.5rem no-repeat; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
 .safety .btn_more span { font-size: 1.6rem; color: var(--white); line-height: 3.7rem; padding-left: 1.5rem; opacity: 1; } 
 
 .safety li:hover { flex: 2.4; align-items: flex-start; } 
 .safety li:hover .btn_more::after { background: #dbf2fb url(/images/main/arrow_right.svg) center / 1.5rem no-repeat; }
 .safety li:hover em { opacity: 1; }
 @media (max-width: 1023px) {
  .safety { flex-direction: column; ;}
  .safety li { width: 100%; align-items: flex-start}
  .safety li:hover { flex: 1;}
  .safety em { opacity: 1;}
  .safety li:nth-child(3)::before { background-position-y: center; }
 }

 /* 파트너쉽 */
 .partner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; margin-top: 8rem; } 
 .partner li { background-color: var(--white); border-radius:1.6rem; min-height: 14rem; padding: 0 1rem; display: flex; align-items: center; justify-content: center; } 
 .partner li img { max-width: 100%;}
 @media (max-width: 820px) {
  .partner { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 414px) {
  .partner { grid-template-columns: repeat(1, 1fr); }
 }




.section03 {
  .safety-wrap {
    height: 500px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    margin-top: 8rem;
  }
  
  .safety_card {
    width: 210px;
    border-radius: .75rem;
    background-size: cover;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2rem;
    margin: 0 10px;
    padding: 5rem;
    display: flex;
    align-items: center;
    transition: .6s cubic-bezier(.28,-0.03,0,.99);
    box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);
  }
  
  .safety_card > .row {
    color: white;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* flex-wrap: nowrap; */
  }
  
  .safety_card > .row > h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    transition: all 0.3s;
    z-index: 1;
  }
  
  .safety_card > .row > .description {
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    /* height: 80px; */
    width: 520px;
    /* opacity: 0; */
    display: none;
    transform: translateY(30px);
    transition-delay: .3s;
    transition: all .3s ease;

  }
  
  .description p {
    font-size: 1.6rem;
    color: var(--white);
    /* text-transform: uppercase; */
	line-height:1.6;
  }
  
  /* .description a {
    color: var(--white);
    padding-top: 5px;
  } */
  .description .btn_more { display: inline-block; width: 14rem; border-radius: 19rem; border: 1px solid var(--white); position: relative; margin-top: 7rem; } 
  .description .btn_more::after { content: ''; width: 3rem; height: 3rem; border-radius: 50%; background: #dbdbdb url(/images/main/arrow_right.svg) center / 1.5rem no-repeat; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
  .description .btn_more span { font-size: 1.6rem; color: var(--white); line-height: 3.7rem; padding-left: 1.5rem; opacity: 1; } 

  input {
    display: none;
  }
  
  input:checked + label {
    width: 820px;
  }
  input:checked + label h3{
    font-size: 3.6rem !important;
  }
  
  input:checked + label .description {
    /* opacity: 1 !important; */
    display: block !important;
    transform: translateY(0) !important;
  }
  
  .safety_card[for="c1"] {
    background-image: url('/images/main/safety_img01.png');
  }
  .safety_card[for="c2"] {
    background-image: url('/images/main/safety_img02.png');
  }
  .safety_card[for="c3"] {
    background-image: url('/images/main/safety_img03.png');
  }
}


@media (max-width: 820px) { 
  .section03 .safety-wrap { flex-direction: column; flex-wrap: wrap; gap: 2rem;}
  .section03 .safety_card { width: 100% !important;}
  .section03 .safety_card[for="c3"] { background-position: center;}
}