@charset "utf-8";

/* input */
input {}
input[type="checkbox"] {appearance: none; border: none; width: 22px; height: 22px; border: 1px solid #E5E5EC; border-radius: 0;}
input[type="checkbox"]:checked {background: #000 url(/img/com/input_chked.svg) center no-repeat; border-color: #000;  }

@media screen and (max-width: 768px) {
    input[type="checkbox"] {width: 18px; height: 18px;}
}


/* btn */
.btn {display: flex; align-items: center; justify-content: center; transition: 0.3s;}
.btn.normal {height: 48px; padding: 0 var(--gap24); font-size: var(--font16); color: #fff; line-height: 1; font-weight: 600; background: #111; color: #fff; border-radius: 24px;}
.btn.normal:hover {background: #FFD905; color: #111; }
@media screen and (max-width: 768px){
  .btn.normal {height: 36px;}
}


/* layer */
.layer {display: none;}
.layer .layer-wrap {position: relative; box-shadow: 12px 4px 30px rgba(0,0,0,0.06); background: #fff; }
.layer .ly-tit {height: 76px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--font24); text-align: center; padding: 0 54px; }
.layer .ly-cont {padding: var(--gap24) var(--gap32); font-size: var(--font16); overflow: auto; max-height: 60vh;}
.layer .ly-close {position: absolute; width: 26px; height: 26px; background: url(/img/com/icon_close.svg) center no-repeat; background-size: cover; top: 25px; right: 18px; cursor: pointer;}
@media screen and (max-width:768px){
    .layer .ly-tit {height: 50px; padding: 0 46px;}
    .layer .ly-close {width: 20px; height: 20px; top: 16px; right: 16px;}
}

/* title ani */
.title-ani .title {font-family: var(--barlow); font-weight: 600; font-size: 236rem; letter-spacing: -0.02em; text-transform: uppercase; line-height: 0.9; overflow: hidden;}
@media screen and (max-width:768px) {
  .title-ani .title {font-size: 270rem;}
}

.rise-title {}
.rise-title .line {overflow: hidden;}
.rise-title .line span {display: block;}


/* com */
#wrap {background: #fff; }
.w-100 {width: 100% !important;}

/* s:header */
#header {position: fixed; left: 0; top: 0; width: 100%; z-index: 900; mix-blend-mode: difference;} 
#header .header {padding: 0 2.8%; display: flex; justify-content: end; align-items: center; }
#header .header .gnb {display: flex; align-items: center;  gap: 98px; mix-blend-mode: difference;}
#header .header .gnb a {display: block; line-height: max(100rem, 70px); font-family: var(--barlow); font-size: max(22rem, 16px); font-weight: 500; color: #fff; letter-spacing: 0;}

.yj-logo {width: max(44rem, 30px); display: flex; height: max(100rem, 70px); align-items: center; position: fixed; left: 2.8%; top: 0; z-index: 901; }
.yj-logo img {width: 100%;}

@media screen and (max-width:768px) {
  #header .header .gnb {gap: 24px;}

  .yj-logo {width: 26px;}
}
/* e:header */


/* s:footer */
#footer {}
#footer .footer {padding: 0 2.8%;}
#footer ul {display: flex; align-items: center; justify-content: space-between; height: max(126rem, 80px); font-family: var(--barlow); font-size: max(18rem, 14px); color: #111; line-height: 1;}
#footer ul a { font-family: inherit; font-size: inherit; position: relative; display: inline-block; }
#footer ul a::before {content:""; width: 100%; height: 1px; background: #111; position: absolute; left: 0; bottom: 0;}
#footer ul p {color: #333; }
@media screen and (max-width:768px) {
  #footer .footer {padding: 24px 2.8%; }
  #footer ul { height: auto; gap: 7px; flex-direction: column;}
  #footer ul li:nth-child(4) { margin-top: 14px;}
}
@media screen and (max-width:480px) {
  #footer .logo img {width: 100px;}
  /* #footer ul li {width: 100%; text-align: left;} */
}
/* e:footer */


/* s:quick */
#quick {position: fixed; right: 54px; bottom: 0px; padding-bottom: 54px; z-index: 300;}
#quick > ul > li {margin-top: 8px;}
#quick .qitem {font-size: 0; border-radius: 28px;  background: #333; min-height: 56px;}
#quick .qitem > a {display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;}

#quick .sns-box {font-size: 0; border-radius: 28px;  background: #333; min-height: 56px; text-align: center; padding-bottom: 56px; position: relative;}
#quick .sns-box a {width: 100%;}
#quick .sns-box a.more {display: flex; justify-content: center; height: 56px; position: absolute; left: 0; bottom: 0; align-items: center;}
#quick .sns-box .list {display: none; padding-top: 13px; position: relative; z-index: 1; margin-bottom: -5px;}
#quick .sns-box .list .sns {margin-top: 8px;}
#quick .sns-box .list a {display: block; text-align: center; margin: auto; width: 100%; font-size: 0;}

/* #quick .sns-box.active a.more {padding: 8px 0 14px; } */
#quick .sns-box.active .list {}

#quick .qitem.top {background: #fff; }
#quick .qitem.top a { position: relative;}
#quick .qitem.top a .line {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-90deg); width: 100%; height: 100%; font-size: 0;}
#quick .qitem.top a .line circle {width: 100%; height: 100%; stroke: #333; fill: rgba(0,0,0,0);  stroke-dasharray:172.5084686279297; stroke-dashoffset:172.5084686279297;}
@media screen and (max-width:1024px) {
  #quick {right: 3%; padding-bottom: 24px;}
  #quick .qitem {min-height: 48px; }
  #quick .qitem > a {width: 48px; height: 48px;}
  #quick .sns-box {min-height: 48px; padding-bottom: 48px;}
  #quick .sns-box a.more {height: 48px;}
  #quick .sns-box .list {padding-top: 6px;}
}
@media screen and (max-width:480px) {
  /* #quick {right: 3%; padding-bottom: 24px;} */
  #quick .qitem {min-height: 36px; }
  #quick img {width: 20px;}
  #quick .qitem > a {width: 36px; height: 36px;}
  #quick .sns-box {min-height: 36px; padding-bottom: 36px;}
  #quick .sns-box a.more {height: 36px;}
  #quick .sns-box .list {padding-top: 3px;}
}
/* e:quick */