@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: 16px;
    line-height:1em;
    letter-spacing: 0px;
    word-spacing: 0px;
    margin:0 auto;
    color:#222222;
    background-color:#FFF;
    width: 100%;
}

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: 100%;margin: 0 auto;padding:0;display: grid;grid-template-columns: 1fr;grid-gap:40px;}
.din > div[data-dinnum] {width:100%;overflow: hidden;}
.din.din100 {width: 100%;} /* 하위 영역에서 폭을 지정할 경우 */


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

.m-hide{display: none;}

/* 1단 */
.din.din1 {grid-template-columns: 1fr;}


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

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

/* main */
main {width: 100%;}

/* footer */
footer {width: 100%;}

/* bg color */
.m-bg-red {background-color: #b10f0f;padding: 20px;}
.m-bg-red .box .box_title .name {color: #FFF;}
.m-bg-red .box .box_title .more {color: rgba(255,255,255,0.7);}
.m-bg-red .box .title {color: #FFF;}
.m-bg-red .box .desc {color: rgba(255,255,255,0.7);}
.m-bg-red .box .cat {color: rgba(255,255,255,0.7);}


/* padding */
.m-p-t-10 {padding-top:10px;}
.m-p-t-20 {padding-top:20px;}
.m-p-t-30 {padding-top:30px;}
.m-p-t-40 {padding-top:40px;}
.m-p-t-50 {padding-top:50px;}
.m-p-t-60 {padding-top:60px;}
.m-p-t-70 {padding-top:70px;}
.m-p-t-80 {padding-top:80px;}
.m-p-t-90 {padding-top:90px;}
.m-p-lr-10 {padding-left:10px;padding-right:10px;}
.m-p-lr-12 {padding-left:12px;padding-right:12px;}
.m-p-lr-15 {padding-left:15px;padding-right:15px;}
.m-p-lr-20 {padding-left:20px;padding-right:20px;}


/* 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;}