/* 공용 */
#wrap{max-width:1920px; width:100%; margin:0 auto;}
.mo{display:none;}

header{max-width:1280px; padding:0 40px; width:100%; height:140px; margin:0 auto; display:flex; align-items: center; justify-content: space-between; position:relative; z-index: 2;}
header > .logo{width:195px; flex: 0 0 195px;}
header > .logo > a{display:flex;}
header > .logo > a > img{ height: 85px; object-fit: cover;}

nav{max-width:590px; width:100%; margin:0 20px;}
nav > ul{display:flex; align-items: center; justify-content: space-between;}
nav > ul > li > a{font-size:1.8rem; font-weight: 500;}

header > .leftArea{height:100%; display: flex; align-items: center;}
header > .leftArea > .pc{display:flex; align-items: center; justify-content: space-between;}
header > .leftArea > .pc > .btnIcon{width:2.5rem; height:2.5rem; background:url(../images/pc_user.png) no-repeat center / cover; margin-right:10px;}
header > .leftArea > .pc > ul{display:flex; align-items: center;}
header > .leftArea > .pc > ul > li{font-size:1.4rem;}
header > .leftArea > .pc > ul > li + li::before{content:"/"; padding:0 5px;}

header > .leftArea > .mo{display:none; align-items: center; height: 100%;}
header > .leftArea > .mo > .btnIcon{width:30px; height:100%; background:url(../images/m_user.svg) no-repeat center / contain; margin-right:2rem;}
header > .leftArea > .mo > .navBtn{height:100%; display: flex; align-items: center; }
header > .leftArea > .mo > .navBtn > ul{width:25px; height:25px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
header > .leftArea > .mo > .navBtn > ul > li{width:100%; height:2px; background:#111; transition: all 0.5s;}
header > .leftArea > .mo > .navBtn.on > ul{justify-content: center;}
header > .leftArea > .mo > .navBtn.on > ul > li{width: 33.36px; transition: all 0.5s;}
header > .leftArea > .mo > .navBtn.on > ul > li:first-child{transform:rotate(45deg) translateY(1px); transform-origin: center center;}
header > .leftArea > .mo > .navBtn.on > ul > li:last-child{transform:rotate(-45deg) translateY(-1px); transform-origin: center center;}
header > .leftArea > .mo > .navBtn.on > ul > li:nth-of-type(2){display:none;}

.mo_navWrap{position:fixed; background:#fff; z-index: 10; left:0px; right:0; top:95px; bottom:0; display: none;}
.mo_navWrap div{display: flex; flex-direction: column;}
.mo_navWrap div > a{font-size:15px; padding:15px 30px; font-weight: 500; border-bottom:1px solid #bbb;}

footer{background:#fff; border-top:1px solid #dddddd;}
footer.on{margin-bottom:50px;}
footer .wrap{max-width:1280px; width:100%; margin:0 auto; padding:50px 40px;}
footer .wrap > div{display: flex; justify-content: space-between;}

.footTop{margin-bottom:40px;}
.footTop > .footLogo{width:195px; flex: 0 0 195px;}
.footTop > .footNav{display: flex;}
.footTop > .footNav > li:first-child > a{font-weight: 700;}
.footTop > .footNav > li > a{font-size:14px; font-weight: 300;}
.footTop > .footNav > li + li{margin-left:20px;}

.footBottom{align-items: end;}
.footBottom > .info{color:#777; font-weight: 300;}
.footBottom > .info > ul{display:flex; flex-wrap: wrap; max-width: 550px; width: 100%; gap: 10px 0;}
.footBottom > .info > ul > li{font-size:14px;}
.footBottom > .info > ul > li:not(:last-of-type){margin-right:20px;}
.footBottom > .info > .copy{margin-top:25px;}
.footBottom > .snsList{display: flex;}
.footBottom > .snsList > li > a{ display: inline-block; width:40px; height:40px; border-radius: 50%; background:#ddd; display: flex; justify-content: center; align-items: center;}
.footBottom > .snsList > li > a > img{width:20px; height: 20px; object-fit: contain;}
.footBottom > .snsList > li + li{margin-left:20px;}

section > .itemArea{max-width:1280px; width:100%; margin:0 auto; padding:0 40px;}
section > .itemArea.flexBox{display:flex;}
section + section{margin-top:16rem;}


/* modalPopW */
.modalPopWrap{display:none; position:fixed; top:0; left:0; right:0; bottom:0; justify-content: center; align-items: center; background:rgba(0,0,0,0.5); z-index: 10;}
.modalPopWrap.on{display: flex;}
.modalPopWrap > .modalPopArea{background:#fff; width:90%; max-width: 600px; max-height:90%; overflow-y: auto; border-radius: 2rem;}
.modalPopWrap > .modalPopArea > .header{display: flex; justify-content: space-between; align-items: center; padding:3rem 4rem; background: #fff; z-index: 1; position:sticky; top:0;}
.modalPopWrap > .modalPopArea > .header > .tit{font-size:2.4rem; font-weight: 600;}
.modalPopWrap > .modalPopArea > .header > .closeBtn{font-size: 0px;}
.modalPopWrap > .modalPopArea > .header > .closeBtn::after{content: "\e921"; display: inline-block; font-family: 'xeicon'; font-size: 3rem; color:#777777;}
.modalPopWrap > .modalPopArea > .con{padding:0 4rem 4rem;}
.modalPopWrap > .modalPopArea > .con > form > button{margin-top:30px; width:100%;}

.hopeAreaPop .stickyBox{position:sticky; top:89.6px; background:#fff; z-index:2; padding-bottom:20px;}

@media (min-width: 769px) {
    /* 스크롤바 리뉴얼 */
    .modalPopWrap > .modalPopArea .viewArea::-webkit-scrollbar,
    .modalPopWrap > .modalPopArea::-webkit-scrollbar{
        width:5px;
    }

    .modalPopWrap > .modalPopArea .viewArea::-webkit-scrollbar-thumb,
    .modalPopWrap > .modalPopArea::-webkit-scrollbar-thumb{
        background:#999;
        border-radius: 10px;
    }

    .modalPopWrap > .modalPopArea .viewArea::-webkit-scrollbar-track{background:rgba(0,0,0,0);}
    .modalPopWrap > .modalPopArea::-webkit-scrollbar-track{
        background:rgba(0,0,0,0);
        margin:20px 0;
    }
}