@charset "utf-8";
@layer swiper, base;

/* 스크롤 */
@media(prefers-reduced-motion:no-preference){
    html{ scroll-behavior: smooth; }
}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb { background: #f47321; border-radius: 10px;}
::-webkit-scrollbar-track { background: rgba(244, 115, 33, .18)}

/* reset */
@layer base{
    *{ box-sizing: border-box; outline-color: var(--primary); }
    :where(body, h1, h2, h3, h4, h5, h6, p, ul){ margin:0; padding: 0; }
    article :where(body, h1, h2, h3, h4, h5, h6, p, ul){ margin: unset; padding: unset; }
    :where(input,textarea,button,select){ font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; }
    a{ text-decoration: none; color: inherit; }
    address, em{font-style:normal;}
    button{ padding: 0; background: 0; border: 0; cursor:pointer; }
    caption, legend{ overflow:hidden; overflow: hidden; position: absolute; width: 0; height: 0; border: 0; }
    .hidden{width:0px; height:0px; padding:0; margin:0; overflow:hidden !important; text-indent:100%; white-space:nowrap; font-size:0;}
    figure{ margin: 0; }
    pre{ margin:0; font-family: inherit; white-space: pre-wrap; }
    summary::-webkit-details-marker{ display: none; }
    svg:focus, svg *:focus{ outline:none; }
    table{ border-spacing:0; border-collapse:collapse;}
    img {vertical-align: middle;}
    textarea{ resize: none; }
    ul,ol,li{list-style:none;}
    dl,dd {margin: 0;}
    article .conts{
        figure{ margin: unset; }
        img{ max-width: 100%; }
        :is(ul,ol,li){ list-style: unset; }
        a{ text-decoration: unset; color: unset; }
    }
}
body{ accent-color: var(--primary); font: 16rem/1.5 var(--font-pre); color:var(--black); overflow-wrap: break-word; word-break: keep-all; }

/* 루트 */
:root{
    --inr-narrow: 1280;
    --inr: 1500;
    --inr-wide: 1720;
    --inr-width: .92;
    --primary: #f47321;
    --white: #fff;
    --gray: #555;
    --black: #111;
    --font-pre: 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --font-pop: 'Poppins', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --fs65: clamp(35rem, calc( 65 / var(--inr) * 100vw ), 65rem);
    --fs60: clamp(35rem, calc( 60 / var(--inr) * 100vw ), 60rem);
    --fs55: clamp(30rem, calc( 55 / var(--inr) * 100vw ), 55rem);
    --fs50: clamp(30rem, calc( 50 / var(--inr) * 100vw ), 50rem);
    --fs48: clamp(28rem, calc( 48 / var(--inr) * 100vw ), 48rem);
    --fs45: clamp(25rem, calc( 45 / var(--inr) * 100vw ), 45rem);
    --fs42: clamp(25rem, calc( 42 / var(--inr) * 100vw ), 42rem);
    --fs40: clamp(25rem, calc( 40 / var(--inr) * 100vw ), 40rem);
    --fs35: clamp(25rem, calc( 35 / var(--inr) * 100vw ), 35rem);
    --fs30: clamp(22rem, calc( 30 / var(--inr) * 100vw ), 30rem);
    --fs28: clamp(20rem, calc( 28 / var(--inr) * 100vw ), 28rem);
    --fs25: clamp(18rem, calc( 25 / var(--inr) * 100vw ), 25rem);
    --fs24: clamp(18rem, calc( 24 / var(--inr) * 100vw ), 24rem);
    --fs22: clamp(18rem, calc( 22 / var(--inr) * 100vw ), 22rem);
    --fs20: clamp(18rem, calc( 20 / var(--inr) * 100vw ), 20rem);
    --fs18: clamp(16rem, calc( 18 / var(--inr) * 100vw ), 18rem);
    --fs17: clamp(15rem, calc( 17 / var(--inr) * 100vw ), 17rem);
}

/* 글자 크기 - clamp(각 영역의 최소, 기본, 최대 크기) */
@media(min-width:1921px){
    html{ font-size: clamp(0px, calc( ( 100 / 1920 ) * 1vw ), 500px ); }
}
@media(max-width:1920px) and (min-width:1280px){
    html{ font-size: clamp(0px, calc( ( 100 / ( var(--inr) / var(--inr-width) ) ) * 1vw ), 1px ); }
}
@media(max-width:1279px) and (min-width:768px){
    html{ font-size: clamp(0px, calc( ( 100 / 768 ) * .75vw ), 5px ); }
}
@media(max-width:767px){
    html{ font-size: clamp(0px, calc( ( 100 / 360 ) * .875vw ), 5px ); }
}

/* 검색엔진 고려한 숨기기, 로고, 제목, 링크 등, 버튼은 aria-label과 title */
.visually-hidden{ overflow: hidden; position: absolute; width: 0; height: 0; }

/* 선택자 */
::selection{ background: var(--primary); color: var(--white); }

/* 말줄임표 */
.ellipsis{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: normal; word-break: break-all; }
.ellipsis.e2{ -webkit-line-clamp: 2; }
.ellipsis.e3{ -webkit-line-clamp: 3; }

/* no image */
[class$="noImg"]{ position: relative; display: block; background: #eee url('/images/common/noImg.png') no-repeat 50%; }
[class$="noImg"] > img{ text-indent: -1000vw; }

/* show, hide */
@media(min-width: 768px){
    #wrap .show-mob{ display: none; }
}
@media(min-width: 1280px){
    #wrap .show-tab{ display: none; }
}
@media(min-width:2561px){
    #wrap .show-qhd{ display: none; }
}
@media(max-width:2560px){
    #wrap .hide-qhd{ display: none; }
}
@media(max-width: 1279px){
    #wrap .hide-tab{ display: none; }
}
@media(max-width: 767px){
    #wrap .hide-mob{ display: none; }
}