@charset 'utf-8';

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}
    
html,body {width:100%;margin:0;padding:0;border:0;min-width:320px;scroll-behavior: smooth;overflow-x: hidden}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
address, code, em, img,
small, strong, sub, sup, var, button,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, mark, video, a, a:visited, a:active {margin:0;padding:0;font-family: 'Poppins', sans-serif;font-size:16px;word-break: normal;font-weight:400;line-height:1; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;box-sizing:border-box;-moz-box-sizing: border-box; -webkit-box-sizing: border-box;word-break:keep-all;color:#2D2D2D}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
a, a:hover, a:visited, a:active {text-decoration:none;}
a {-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
a:hover {color:#0F4C81}
img,iframe,table {border:0}
img,input,select,button,textarea {vertical-align:middle}
ol,ul,li {list-style:none}
tr,td {vertical-align:middle}
em,address,optgroup {font-style:normal}

p,li {line-height:1.4}

::-moz-selection{color:#fff;background:#2D2D2D}
::selection {color:#fff;background:#2D2D2D}

svg {height:auto}

@media all and (max-width:320px) {
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
address, code, em, img,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, mark, video, a {font-size:13px}
}

/* 인풋 기본 스타일 제거 */
textarea,
input,
select,
button {-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-border-radius:0;border-radius:0;border:0;line-height:normal;}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none;-moz-appearance:none;appearance:none}
input:focus,textarea:focus,button:focus,select:focus {outline: none}
select::-ms-expand {display:none}
textarea {width:100%;background:none;resize:none}
button {border:0;background:none;cursor: pointer;}
select {cursor:pointer;background-color:#fff;outline :none;overflow :hidden;width:100%;background:#fff url('/_public/images/board/bg_select.gif') no-repeat 90% center}

/* placeholder css 적용하기 */
input::placeholder,
textarea::placeholder {color: #313131;opacity: 1; /* 파이어폭스에서 뿌옇게 나오는 현상을 방지하기 위한 css */}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {color: #313131}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {color: #313131 }
input:-mos-input-placeholder,
textarea:-mos-input-placeholder {color: #313131;}

/* placeholder 포커스시 감추기*/
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; }
input:focus:-moz-placeholder, 
textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; } 
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; }
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; }

/* Padding & Margin  */
.p0 {padding:0px !important}
.pt0 {padding-top:0px !important}
.pr0 {padding-right:0px !important}
.pb0 {padding-bottom:0px !important}
.pl0 {padding-left:0 !important}
.m0 {margin-top:0 !important}
.mt0 {margin-top:0 !important}
.mr0 {margin-right:0 !important}
.mb0 {margin-bottom:0 !important}
.ml0 {margin-left:0 !important}

/* Float */
.fl {float:left}
.fr {float:right}
.cb {clear:both !important}
.clear::after {content:"";display:block;clear:both}

/* Display */
.db {display:block !important}
.di {display:inline !important}
.dib {display:inline-block !important}
.dibw100 {width:100%;display:inline-block;}

/* Alaign */
.tac {text-align:center}

/* Absolute align */
.xyalign {position:absolute;top:50%;left:50%;-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.yalign {position:absolute;top:50%;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.xalign {position:absolute;left:50%;-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);}

/* Border */
.b0 {border:0 !important}
.bt0 {border-top:0 !important}
.bl0 {border-left:0 !important}
.br0 {border-right:0 !important}
.bb0 {border-bottom:0 !important}

/* Popup */
.popup {width:90%;height:auto;display:inline-block;position:absolute; z-index:1000000;max-width:500px}
.popup .popuparea {width:100%;height:auto;position:relative}
.popup .popuparea .ppimg {width:100%;display:inline-block;border:1px solid #fff;overflow:hidden}
.popup .popuparea img {width:100%;object-fit: cover;}
.popup .popuparea .ppclose {position:absolute;font-size:40px;color:#fff;right:-3.5rem;top:-0.5rem;opacity:0.8}
.popup .popuparea .ppclose:hover {opacity:1}
.popup .ppcheck {width:100%;display:inline-block;border:1px solid #fff;line-height:2;text-align:center;background-color:rgba(0,0,0,0.4);color:#fff;}
.popup .ppcheck:hover {background-color:#333;color:#fff;}
.popup .ppcheck i {font-size:1.214rem}
.popup .ppcheck:hover i {font-size:1.214rem;color:#fff;}
.popup .close {width:30px;height:30px;text-align:center;display:inline-block;position:absolute;background-color:#555555;right:0;z-index:9999999;border-radius:100%;right:3%;top:1.8rem}
.popup .close .line {display: inline-block;position:relative;padding: 0;width:2px;height:14px;background:#fff;transform: rotate(45deg);margin-top:0}
.popup .close .line:before {display: block;content: "";position: absolute;top:6px;left:-6px;height:2px;width:14px;background:#fff}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    svg {height:100%}
}

/* float 관련 */
.clear::after {content: ""; display: block; clear: both}
.leftbox {float: left}
.rightbox {float: right}

/* box-shadow */
.shadow {
    -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.1);
}
/* 말줄임 */
.dot {
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}
/* 효과 */
.effect1 {
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
}

/* flex-box */
.flex-nowrap {display: -webkit-flex;display: flex;flex-wrap: nowrap;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;}
.flex-wrap {display: -webkit-flex;display: flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;}
.flex-between {justify-content: space-between;}
.flex-around {justify-content: space-around}
.flex-center {display: -webkit-flex;display: flex;align-items: center;justify-content: center;}

/*  Scroll Top */
a.scrolltop {width:50px;position: fixed;right:20px;bottom: 4rem; display: none; z-index:3; opacity:0.5;}
a.scrolltop:hover {opacity:1;
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;
    -webkit-animation-name:tong;
    animation-name:tong;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
a.scrolltop img {width:100%;}

@keyframes tong {
    0% {
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    
    20% {
        -webkit-transform:translateY(-3px);
        transform:translateY(-3px)
    }
    40% {
        -webkit-transform:translateY(0px);
        transform:translateY(0px)
    }
    60% {
        -webkit-transform:translateY(-3px);
        transform:translateY(-3px)
    }
    80% {
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
    /*  Scroll Top 미디어쿼리 */
    @media all and (max-width: 1000px) {
        a.scrolltop {width:40px;right:10px;bottom:4.6rem}
    }
    @media all and (max-width: 640px) {
        a.scrolltop {display:none}
    }