/* ------------------------------------------------------------- */
/* ------------------- 공통으로 들어가는 부분  ------------------- */
/* ------------------------------------------------------------- */
html{
    font-size:16px; scroll-behavior:smooth; height: 100%; margin: 0;
    position: relative; font-weight: 300;
}

p, a, h1, h2, h3, h4, h5, h6 {
    transform: skew(-0.1deg);
}

body{
    position: relative;
    font-weight: 500;
    color:#222;
    width:100%;
    font-family: 'Pretendard' sans-serif ;
    letter-spacing:-.02em !important;
    line-height: 1.6;
    font-size:1rem;
  
}

::selection{background-color: var(--c-01); color:#fff;}



/* -------- 헤더 -------- */
header {width: 100%; position: fixed; top: 0; left: 0; padding: 25px 0; border-bottom: 1px solid rgba(255,255,255,.3); background: linear-gradient(to bottom, #00000020, transparent); z-index: 100; transition: all .2s linear;}
header h1 { cursor: pointer;}
header h1 img {width: 100%; display: block; object-fit: contain; filter: brightness(1000000%);}
header h1 img.on {filter: brightness(100%); display: none;}
.hd_wrap {width: 100%; display: flex; align-items: center; gap: 120px;}
header nav{display: flex; align-items: center; justify-content: space-between; width: 100%;}
header nav > ul {display: flex; align-items: center; gap: 60px;}
header nav ul a {font-size: 18px; color: #fff; font-weight: 500; font-family: 'Montserrat'; font-weight: 500; transition: all .15s;}
header nav .depth1 > a:hover{color: var(--c-02);}
header nav li {position: relative;}
header nav .depth2 {position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 18px; border-radius: 10px; display: none; background-color: #ffffffee; backdrop-filter: blur(10px); width: 150px; box-shadow: 0 0 14px rgba(0,0,0,.08);}

header .depth2 ul {display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;}
header .depth2 ul li{width: 100%;}
header .depth2 a {text-align: center; display: inline-block; width: 100%; font-size: 16px; opacity: .8; color: #fff; font-family: 'Pretendard'; font-weight: 400; color: #222;}
header .depth2 a:hover {opacity: 1; font-weight: 500;}

header nav .open_menu {width: 40px; height: 40px; display: none; background: url(../img/open.svg) no-repeat center/contain;}

.download_sec{display: flex; align-items: center; gap: 8px;}
.download_sec button{color: #fff; font-size: 14px; padding: 10px 20px; border-radius: 50px; border: 1px solid rgba(255,255,255,.5); line-height: 1; transition: all .2s; font-family: 'Pretendard'; display: flex; gap: 8px; align-items: center;}
.download_sec a {color: #fff; font-size: 14px; padding: 10px 20px; border-radius: 50px; border: 1px solid rgba(255,255,255,.5); line-height: 1; transition: all .2s; font-family: 'Pretendard'; display: flex; gap: 8px; align-items: center;}
.download_sec button i{display: inline-block;}
.download_sec a i{display: inline-block;}
.download_sec button:hover{background-color: rgba(0,0,0,.15);}
.download_sec a:hover{background-color: rgba(0,0,0,.15);}

header.on, .wrap.sub header.on, .wrap.terms header {background: #ffffffdd; border-color: #eee; backdrop-filter: blur(10px);}
header.on nav ul a, .wrap.terms header nav ul a {color: #222;}
header.on nav .depth1 > a:hover{color: var(--c-01);}

header.on .depth2 a, .wrap.sub header .depth2 a, .wrap.terms header .depth2 a {color: #222;}
header.on h1 img.default, .wrap.terms header h1 img.default {display: none;}
header.on h1 img.on, .wrap.terms header h1 img.on {display: block;}
header.on nav .open_menu {background: url(../img/open_on.svg) no-repeat center/contain;}

header.on .download_sec button{border-color: #ddd; color: #555; background: #ffffff80;}
header.on .download_sec button:hover{background-color: #00000008;}
header.on .download_sec button i img{filter: brightness(50%);}


.wrap.sub header {background: transparent;}
/* .wrap.sub header nav ul a {color: #222;} */
.wrap.sub header .depth2 a {color: #fff;}
/* .wrap.sub header h1 img.default {display: none;}
.wrap.sub header h1 img.on {display: block;} */

.wrap.sub.terms header {background: #fff; border-color: #ddd;}
.wrap.sub.terms header nav ul a {color: #222;}
.wrap.sub.terms header .depth2 a {color: #fff;}
.wrap.sub.terms header h1 img.defualt {display: none;}
.wrap.sub.terms header h1 img.on {display: block;}





/* 버거메뉴 */
.burger {position: fixed; left: 100%; top: 0; width: 100vw; height: 100vh; background: #ffffffee; backdrop-filter: blur(16px); z-index: 500; transition: all .2s; }
.burger.on {left: 0;}


.burger .burger_top {width: 100%; padding: 30px 50px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; position: relative;}
.burger_top .logo {width: 110px;}
.burger_top .logo img {width: 100%; height: 100%; object-fit: contain;}
.burger_top .close_menu {width: 43px; height: 43px; background: url(../img/close_menu.svg) no-repeat center/cover; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);}

.bg_menu {width: 100%; display: flex; align-items: flex-end; padding: 70px 50px;}
.bg_menu .bg_list {width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
.bg_list dl {display: flex; align-items: baseline; gap: 60px; color: #333;}
.bg_list dt {font-size: 40px; font-weight: 600; font-family: 'Montserrat';}
.bg_list dd {display: flex; align-items: center; gap: 16px; font-size: 20px; opacity: .7;}



/* 사이드바 */
.sidemenu{position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 111;}
.sidemenu ul{display: flex; gap: 10px; flex-direction: column; } 
.sidemenu ul > a {display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.1);}
.sidemenu ul > a:first-child{background-color: #FEE500;}
.sidemenu ul > a .icon{width: 63%; width: max-content;}


/* -------- 푸터 -------- */
footer {background-color: #222; color: #fff; padding: 50px 0;}
footer .ft_wrap {width: 100%; display: flex; flex-direction: column;}
.ft_top {display: flex; width: 100%; justify-content: space-between; }
.ft_top .ft_info {display: flex; gap: 40px;}
.ft_info .ft_logo {display: block; width: 140px; flex-shrink: 0;}
.ft_info .ft_logo img {width: 100%; display: block; object-fit: contain;filter: brightness(100000%); opacity: .8;}
.ft_info > ul {display: flex; flex-wrap: wrap; row-gap: 4px;}
.ft_info ul li {font-size: 14px; font-weight: 400; opacity: .8; position: relative; display: flex; align-items: center;} 
.ft_info > ul li + li:before{content: ''; display: inline-block; background-color: #ffffff; opacity: .15; width: 1px; height: 14px; position: relative; margin: 0 8px; }
.copyright {width: 100%; opacity: .5 !important;}
.ft_info > ul > li:last-child:before{display: none;}

.ft_info > ul > ul{ width: 100%; display: flex; row-gap: 4px; margin-bottom: 16px;}
.ft_info > ul > ul li:first-child{opacity: 1; font-weight: 700;}

.ft_sns {display: flex; align-items: center; gap: 16px;}
.ft_sns a {display: block; width: 30px; aspect-ratio: 1;}

.ft_contact{font-family: 'Montserrat'; color: #fff; line-height: 1;}
.ft_contact p{font-size: 20px; font-weight: 700; margin-bottom: 8px;}
.ft_contact .contact_box{background-color: rgba(255,255,255,.1); border-radius: 4px; padding: 20px 24px;}
.ft_contact .contact_box dl{display: flex; align-items: center;}
.ft_contact .contact_box dl + dl{margin-top: 12px;}
.ft_contact .contact_box dl dt{width: 70px; opacity: .5;}
.ft_contact .contact_box dl dd{width: max-content;}
.admin{opacity: .3 !important;}




.top_btn {position: fixed; right: 20px; bottom: 20px; background-color: rgba(0,0,0,.4); width: 70px; height: 70px; aspect-ratio: 1; z-index: 150; display: none; cursor: pointer; border-radius: 50%; backdrop-filter: blur(8px);}
.top_btn::after {content: ""; display: block; width: 24px; height: 20px; background: url(../img/arrow_top_w.svg) no-repeat center/contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}




/* -------- 페이지 타이틀 -------- */
.page_tit {width: 100%; height: 100vh; position: relative; overflow: hidden;}
.page_wrap {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; position: relative; padding-top: 160px; gap: 100px;}
.page_top {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.page_top .depth1_tit {font-size: clamp(16px, 1.8vw, 22px); text-transform: uppercase; font-weight: bold; color: #fff; position: relative; display: inline-block; padding-left: 15px; line-height: 1;}
.page_top .depth1_tit::before {content: ""; display: block; width: 8px; border-radius: 2px; aspect-ratio: 1; background-color: #E81421; position: absolute; top: 2px; left: 0;}
.page_top .depth1_tit::after {content: ""; display: block; width: 8px; border-radius: 2px; aspect-ratio: 1; background-color: #121c57; position: absolute; bottom: 2px; left: 0;}

.page_top .bread {display: flex; align-items: center; justify-content: flex-end; gap: 24px;}
.page_top .bread span {font-size: clamp(14px, 1.8vw, 22px); color: #ffffff90; line-height: 1; position: relative;}
.page_top .bread span::after {content: ""; display: block; width: 2px; height: 60%; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); background: #ffffff50;}
.page_top .bread span:last-child::after {display: none;}
.page_top .bread span:nth-of-type(1) {font-family: "DM Sans", sans-serif; font-weight: bold;}

.page_title {width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; color: #fff; padding-top: 70px;}
.page_title span {font-size: clamp(28px, 5vw, 80px); font-weight: 700;}
.page_tit p {font-size: clamp(16px, 2.5vw, 22px); line-height: 1.4; font-weight: 500;}


.tab {width: 100%; display: flex; align-items: center; gap: 15px; row-gap: 12px; flex-wrap: wrap;}
.tab span {display: block; min-width: max-content; font-size: 20px; font-weight: 700; line-height: 1; color: #ffffff80; background: #00000050; backdrop-filter: blur(10px); padding: 12px 30px; border-radius: 60px; border: 2px solid #ffffff50; cursor: pointer;}
.tab span.on {background-color: #1A34C7; color: #fff; border-color: #1A34C7;}


.sub_scroll {position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;}
.sub_scroll .scr_arrow {animation: sub_scroll 1.7s ease-in-out infinite; position: absolute;}
.sub_scroll span {font-size: 15px; color: #ffffff80; line-height: 1;}

@keyframes sub_scroll {
    0% {bottom: calc(100% + 25px); opacity: 0;}
    100% {bottom: calc(100% + 10px); opacity: 1;}
}

.wrap.sub.promotion .page_tit {background: url(../img/sub/bg_promotion3.jpg) no-repeat center/cover;}
.wrap.sub.benefit .page_tit {background: url(../img/sub/bg_benefit2.jpg) no-repeat center/cover;}
.wrap.sub.job .page_tit {background: url(../img/sub/bg_job.jpg) no-repeat center/cover;}
.wrap.sub.cont .page_tit, .wrap.sub.cont_view .page_tit {background: url(../img/sub/bg_container.jpg) no-repeat center/cover;}
.wrap.sub.bulk .page_tit, .wrap.sub.bulk_view .page_tit {background: url(../img/sub/bg_bulk001.jpg) no-repeat center/cover;}
.wrap.sub.management .page_tit, .wrap.sub.management_view .page_tit {background: url(../img/sub/bg_management.jpg) no-repeat center/cover;}
.wrap.sub.it .page_tit, .wrap.sub.it_view .page_tit {background: url(../img/sub/bg_it.jpg) no-repeat center/cover;}
.wrap.sub.guide .page_tit {background: url(../img/sub/bg_apply.jpg) no-repeat center/cover;}





.com_box.terms {flex-direction: column;}
.com_box.terms .com_tit {width: 100%; align-items: center; gap: 30px; padding: 50px 0 20px;}
.com_box.terms .job_box {width: 100%;}
.com_box.terms .terms_list dl {border-bottom: none; padding: 0;}
.com_box.terms .terms_list dl dt {width: 22px;}
.com_box.terms .terms_list dl dd {width: calc(100% - 22px); font-size: 16px;}
.com_box.terms .terms_type1 {gap: 12px; font-size: 16px;}
.com_box.terms .terms_type2 {gap: 30px; font-size: 16px;}
.com_box.terms .terms_type2 .sub_list {padding-left: 22px;}
.com_box.terms .sub_list {display: flex; flex-direction: column; align-items: flex-end; gap: 10px;}
.com_box.terms .terms_list > .tit {padding-bottom: 15px;}
.com_box.terms .txt1 {font-size: 16px; font-weight: 400; color: #666;}

.com_box.terms .job_table + .job_table {border-top: none;}

.com_tit .terms_text {font-size: 16px; font-weight: 500; color: #444; line-height: 1.5; text-align: center;}




/* -------- 1440px -------- */
@media screen and (max-width: 1440px) {
    /* 헤더 */
    .hd_wrap{gap: 80px;}
    header nav ul a {font-size: 16px;}
    header nav > ul {gap: 40px;}
    header nav .depth2 {width: max-content; padding: 18px 30px;}
    header .depth2 ul {gap: 10px;}
    .download_sec button{padding: 9px 16px; font-size: 13px;}


    /* 페이지타이틀 */
    .page_title {padding-top: 40px;}
    .tab span {font-size: 18px; padding: 10px 25px;}

    /* 푸터 */
    .ft_info > ul > li:nth-last-child(2){width: 100%;}
    .ft_info > ul > li:nth-last-child(2):before{display: none;}


}



/* -------- 1200px -------- */
@media screen and (max-width: 1200px) {
    /* 헤더 */
    .hd_wrap{gap: 60px;}
    header nav > ul {gap: 30px;}

    /* 푸터 */
    .ft_contact p{font-size: 17px;}
    .ft_contact .contact_box{padding: 16px; font-size: 15px;}


  }




/* -------- 1080px -------- */
@media screen and (max-width: 1080px) {
    /* 헤더 */
    header{padding: 20px 0;}
    header h1 {width: 120px;}
    header nav > ul {display: none;}
    header nav .open_menu {display: block; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);}
    .download_sec{display: none;}
    .hd_wrap{gap: 0; justify-content: space-between;}
    header nav{width: max-content;}
    header h1 img, header h1 img.on {content: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170250382426505.png);}


    /* 푸터 */
    .ft_info .ft_logo {width: 120px;}
    .ft_info > ul {row-gap: 3px;}
    .ft_top .ft_info {gap: 30px;}
    .ft_bt .copy {font-size: 12px;}
    .ft_bt > ul {gap: 20px;}
    .ft_sns {gap: 12px;}
    .ft_sns a {width: 25px;}
    .ft_info > ul > li:nth-last-child(3){width: 100%;}
    .ft_info > ul > li:nth-last-child(3):before{display: none;}
    .admin{display: none !important;}

    /* 페이지타이틀 */
    .page_title {padding-top: 0;}
    .page_tit {height: 95vh;}
    .page_wrap {padding-top: 120px;}
    .page_top {flex-direction: column-reverse; align-items: flex-start; gap: 40px;}
    .page_top .bread {width: 100%;}
    .sub_scroll .scr_arrow {width: 20px;}
    .sub_scroll span {font-size: 14px;}
    /* .tab {margin-top: -30px;} */
    .tab span {font-size: 16px; padding: 10px 20px;}

}





/* -------- 750px -------- */
@media screen and (max-width: 750px) {
    /* 헤더 */
    header{padding: 16px 0;}
    header h1{width: 100px;}

    /* 버거메뉴 */
    .burger .burger_top {padding: 16px 16px;}
    .burger_top .logo {width: 100px;}
    .burger_top .close_menu {width: 40px; height: 40px; opacity: .7;}
    .bg_menu {padding: 32px 16px;}
    .bg_list dl {gap: 5px; flex-direction: column; align-items: flex-start;}
    .bg_list dt {font-size: 20px;}
    .bg_list dd {font-size: 15px;}

    .download_sec.download_sec_mo{position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; width: 100%; padding: 0 16px;}
    .download_sec.download_sec_mo button{border-color: #ddd; color: #555; justify-content: center; flex: .5; border-radius: 4px; background: #ffffff80; padding: 12px 0;} 
    .download_sec.download_sec_mo a{border-color: #ddd; color: #555; justify-content: center; flex: .5; border-radius: 4px; background: #ffffff80; padding: 12px 0;} 
    .download_sec.download_sec_mo button i img{filter: brightness(50%);}
    .download_sec.download_sec_mo a i img{filter: brightness(50%);}
    
    /* 푸터 */
    footer {padding: 40px 0 70px;}
    .ft_info > ul > li{width: 100%;}
    .ft_contact{width:100%;}
    .ft_info > ul li + li:before{display: none;}
    .ft_info > ul > ul{gap: 10px; flex-wrap: wrap;}
    .ft_top {flex-direction: column; align-items: flex-start; gap: 26px;}
    .ft_top .ft_info {flex-direction: column; align-items: flex-start; gap: 26px;}
    .ft_info .ft_logo {width: 110px;}
    .ft_bt {flex-wrap: wrap; align-items: flex-start; row-gap: 10px; flex-direction: column-reverse;}
    .ft_bt ul {flex-wrap: wrap; row-gap: 5px !important; gap: 15px;}
    .ft_info ul {row-gap: 5px;}
    .copyright{position: absolute !important; left: 16px; bottom: -40px; display: block !important;} 
    .ft_contact .contact_box{font-size: 14px;}    
    .ft_contact .contact_box dl dt{width: 64px; flex-shrink: 0;}

    .sidemenu{right: 10px}
    /* .sidemenu{right: 10px; top: auto; bottom: 100px; transform: translateY(0);} */
    /* 탑버튼 */
    .top_btn {width: 50px; height: 50px; right: 10px; bottom: 10px;}
    .top_btn::after{width: 20px; height: 20px;}

    /* 페이지타이틀 */
    .page_tit {height: 70vh; min-height: 540px;}
    .page_top {gap: 30px;}
    .page_wrap {gap: 30px;}
    .page_title {gap: 20px;}
    .sub_scroll {display: none;}
    .tab {gap: 12px;}


}


/* -------- 500px -------- */
@media screen and (max-width: 500px) {
  /* 푸터 */
  .ft_info ul{row-gap: 2px;}
  .ft_info ul li{font-size: 13px;}
  .copyright{font-size: 12px !important;}


  .sidemenu ul > a {width: 40px; height: 40px; border-radius: 6px; } 
  /* 탑버튼 */
  .top_btn {width: 50px; height: 50px; right: 10px; bottom: 10px;}

}