@charset "utf-8";


/* Common */
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
* {margin:0; padding: 0;text-size-adjust: none;-webkit-text-size-adjust: none;}
body {
    font-family: 'Pretendard Variable','Noto Sans KR','Apple SD Gothic Neo','Apple Gothic','AppleGothic','sans-serif','dotum';
    font-size:14px;
    line-height:1.6;
    letter-spacing: -0.5px;
    word-spacing: 0px;
    margin:0 auto;
    color:#222222;
    background-color:#FFF;
}

button {background-color: #0000;cursor: pointer;outline:none}
li {list-style:none;}
form, button {border:0; vertical-align:baseline;}
input {outline: none;border: 0;}
input::placeholder {color: #aaaaaa;}
img {border:0;outline: none;vertical-align:baseline;}
em, address{font-style:normal;}
a {color:#222222; text-decoration: none;outline: none; vertical-align:baseline;}
a:visited {color: #222222;}
a:active {color: #222222;}
a:hover {text-decoration: none;}

/* 면편집 레이아웃 */
.din {position: relative;clear: both;width: 1200px;min-width:1080px;max-width: 100%;margin: 0 auto;padding:0;display: grid;grid-template-columns: 1fr;grid-gap:40px;}
@media (min-width: 992px) {
    .din {
        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    }
}
.din > div[data-dinnum] {width:100%;overflow: hidden;}
.din.din100 {width: 100%;} /* 하위 영역에서 폭을 지정할 경우 */
.din .din {width: 100%;min-width: auto;}

/* grid-gap  기본 40px */
.grid-gap-10 {grid-gap: 10px;}
.grid-gap-20 {grid-gap: 20px;}
.grid-gap-30 {grid-gap: 30px;}
.grid-gap-50 {grid-gap: 50px;}
.grid-gap-60 {grid-gap: 60px;}
.grid-gap-column-10 {grid-gap: 10px 40px;}
.grid-gap-column-20 {grid-gap: 20px 40px;}
.grid-gap-column-30 {grid-gap: 30px 40px;}
.grid-gap-column-50 {grid-gap: 50px 40px;}
.grid-gap-column-60 {grid-gap: 60px 40px;}
.grid-gap-row-10 {grid-gap: 40px 10px;}
.grid-gap-row-20 {grid-gap: 40px 20px;}
.grid-gap-row-30 {grid-gap: 40px 30px;}
.grid-gap-row-50 {grid-gap: 40px 50px;}
.grid-gap-row-60 {grid-gap: 40px 60px;}

/* margin */
.margin-top-20{margin-top: 20px;}

/* 1단 */
.din.din1 {grid-template-columns: 1fr;}
.din.din1 > div[data-dinnum] {width:100%;}

/* 2단 1:1 */
.din.din2-11 {grid-template-columns: repeat(2, 1fr);}
.din.din2-11 > div[data-dinnum] {}
.din.din2-11 > div[data-dinnum="1"] {}
.din.din2-11 > div[data-dinnum="2"] {}

/* 2단 1:2 */
.din.din2-12 {grid-template-columns: 300px auto;}
.din.din2-12 > div[data-dinnum] {}
.din.din2-12 > div[data-dinnum="1"] {}
.din.din2-12 > div[data-dinnum="2"] {}

/* 2단 2:1 */
.din.din2-21 {grid-template-columns: auto 300px;}
.din.din2-21 > div[data-dinnum] {}
.din.din2-21 > div[data-dinnum="1"] {}
.din.din2-21 > div[data-dinnum="2"] {}

/* 3단 1:1:1 */
.din.din3-111 {grid-template-columns: repeat(3, 1fr);}
.din.din3-111 > div[data-dinnum] {}
.din.din3-111 > div[data-dinnum="1"] {}
.din.din3-111 > div[data-dinnum="2"] {}
.din.din3-111 > div[data-dinnum="3"] {}

/* 3단 1:2:1 */
.din.din3-121 {grid-template-columns:1fr 2fr 1fr;}
.din.din3-121 > div[data-dinnum] {}
.din.din3-121 > div[data-dinnum="1"] {}
.din.din3-121 > div[data-dinnum="2"] {}
.din.din3-121 > div[data-dinnum="3"] {}

/* 4단 */
.din.din4-1111 {grid-template-columns: repeat(4, 1fr);}
.din.din4-1111 > div[data-dinnum] {}
.din.din4-1111 > div[data-dinnum="1"] {}
.din.din4-1111 > div[data-dinnum="2"] {}
.din.din4-1111 > div[data-dinnum="3"] {}
.din.din4-1111 > div[data-dinnum="4"] {}

/* 5단 */
.din.din5-11111 {grid-template-columns: repeat(5, 1fr);}
.din.din5-11111 > div[data-dinnum] {}
.din.din5-11111 > div[data-dinnum="1"] {}
.din.din5-11111 > div[data-dinnum="2"] {}
.din.din5-11111 > div[data-dinnum="3"] {}
.din.din5-11111 > div[data-dinnum="4"] {}
.din.din5-11111 > div[data-dinnum="5"] {}


/* position */
.sticky {position: sticky;z-index: 2000;}
.fixed {position: fixed;z-index: 2000;}
.absolute {position: absolute;z-index: 2000;}

/* header */
header {width: 100%;margin: 0 auto;}
header.sticky {top: 0;}

/* main */
main {width: 100%;margin: 0 auto;}

/* footer */
footer {width: 100%;margin: 0 auto;}

/* bg color */
.bg-red {background-color: #b10f0f;width:100%;padding: 20px calc((100% - 1200px) / 2);}
.bg-red .box .box_title .name {color: #FFF;}
.bg-red .box .box_title .more {color: #FFFD;}
.bg-red .box .title {color: #FFF;}
.bg-red .box .desc {color: #FFFD;}
.bg-red .box .cat {color: #FFFD;}


/* padding */
.p-t-10 {padding-top:10px;}
.p-t-20 {padding-top:20px;}
.p-t-30 {padding-top:30px;}
.p-t-40 {padding-top:40px;}
.p-t-50 {padding-top:50px;}
.p-t-60 {padding-top:60px;}
.p-t-70 {padding-top:70px;}
.p-t-80 {padding-top:80px;}
.p-t-90 {padding-top:90px;}


/* popup */
.popup {min-width: 250px;display: flex;flex-direction: column;}
.popup.layer {position: fixed;z-index: 1000;border: 1px solid #000000;background-color: #ffffff;}
.popup .popup_content {width: 100%;height: calc(100% - 30px);overflow: auto;}
.popup img {max-width: 100%;}
.popup .popup_footer {height: 30px;line-height: 30px;padding-left: 10px;}
.popup .popup_footer button {background-color: #000000;color: #ffffff;float: right;height: 30px;padding: 3px;cursor: pointer;}