@import url('font.css');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css");

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color:#333;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Pretendard', serif;
}
img{
    vertical-align: top;
    border:0;
}

a:focus,button:focus{
    outline: 0;
}
address,i,em{
    font-style: normal;
}
label,button{
    cursor: pointer;
}
.blind{
    position: absolute;
    top:-99999px;
}
table{
    border-collapse: collapse;
}
.wrapper {
    max-width: 1680px;
    margin: auto;
}
.wrapper-s {
    max-width: 1400px;
    margin: auto;
}
.wrapper-ss {
    max-width: 1200px;
    margin: auto;
}
.clearfix::after{
    content:"";
    display: block;
    clear: both;
}
.skip a{
    position: absolute;
    width: 100%;
    line-height: 50px;
    text-align: center;
    top:-999px;
}
.skip a:focus{
    top:0;
}
body{
    font-family: 'Pretendard';
    font-size:16px;
    line-height: 1;
}
body.hidden {
    overflow: hidden;
}
body.hidden .modal {
    display: block !important;
    
}
.modal {
    display: none;
    position: absolute;
    top: 100px;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    opacity: 0.5;
    z-index: 100;
}

.ani-top {
    opacity: 0;
    transform: translateY(150px);
    transition: 1s;
}

.ani-bottom {
    opacity: 0;
    transform: translateY(-150px);
    transition: 1s;
}
.fade-in {
    opacity: 1;
    transform: translateY(0);
}
.delay02 {transition-delay: 0.2s;}
.delay04 {transition-delay: 0.4s;}
.delay06 {transition-delay: 0.6s;}
.delay08 {transition-delay: 0.8s;}
.delay10 {transition-delay: 1.0s;}


/* 컬럼설계 */
.col-2 > * {float: left; width: 50%;}
.col-3 > * {float: left; width: 33.3333%;}
.col-4 > * {float: left; width: 50%;}
.col-5 > * {float: left; width: 33.3333%;}
.col-5 > *:nth-of-type(4), .col-5 > *:nth-of-type(5) {width: 50%;}
.col-6 > * {float: left; width: 33.3333%;}

/* 너비 설계 */
.w650 {max-width: 650px; margin: auto;}
.w720 {max-width: 720px; margin: auto;}
.w880 {max-width: 880px; margin: auto;}
.w920 {max-width: 920px; margin: auto;}
.w1080 {max-width: 1080px; margin: auto;}

.link {position: relative;}
.link::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    display: block;
    background-color: #ffde00;
}

.ft-depth2 .link::after {
    width: 75%;
    bottom: 10%;
}

/* 여백설계 */
.m40 {margin-bottom: 40px;}
.m60 {margin-bottom: 60px;}
.m80 {margin-bottom: 80px;}
.m100 {margin-bottom: 100px;}
.m120 {margin-bottom: 120px;}

/* tablet */
@media screen and (max-width: 767px) {
    .depth2 .link::after {
        background-color: #333;
        width: 40%;
        left: 50%;
        transform: translateX(-50%);
    }

    .ft-depth2 .link::after {
        width: 25%;
    }
}

@media screen and (min-width: 768px) {}

/* PC */
@media screen and (min-width: 1280px) {
    .col-4 > * {width: 25%;}
    .col-5 > * {width: 20%;}
    .col-5 > *:nth-of-type(4), .col-5 > *:nth-of-type(5) {width: 20%;}
    .col-6 > * {width: 16.6666%;}
}