/* header */
header{position:fixed; left:0; top:0; width:100%; z-index: 10;  transition: all 0.3s;}
header.on{background:rgba(0,0,0,0.8); transition: all 0.3s;}
header.on > .headerArea{padding:2.5rem 4rem; transition: all 0.3s;}

header .headerArea{ transition: all 0.3s; display:flex; justify-content: space-between; align-items: center; max-width: 1720px; width:100%; padding:3.6rem 4rem; margin:0 auto;}
header .headerArea > .logo{width:20rem;}
header .headerArea > .logo > a{display: flex; align-items:center;}
header .headerArea > .logo > a > img{width:100%; height:100%; object-fit: contain;}

header .headerArea > .leftArea{display:flex; align-items: center;}

header .headerArea > .leftArea > ul:first-of-type{margin-right:10px;}
header .headerArea > .leftArea > ul:first-of-type > li > a{font-size:2rem;}

header .headerArea > .leftArea > ul{margin-left:8px; display:flex; gap:0 2.1rem; align-items:center;}
header .headerArea > .leftArea > ul > li > a{color:#fff; font-size:2.5rem; font-weight:bold;}
header .headerArea > .leftArea > ul > li + li{position:relative;}
header .headerArea > .leftArea > ul > li + li::before{content:''; width:1px; background:#fff; height:1.8rem; position:absolute; top:50%; left:-1.1rem; transform: translateY(-50%);}

header .headerArea > .leftArea > ul > li > .navBtn{cursor:pointer;}
header .headerArea > .leftArea > ul > li > .navBtn > .xi{font-size:3.5rem; color:#fff;}

/* nav */
.navWrap{position:fixed; top:0; right:0; bottom:0; width:100%; max-width:400px; background:rgba(0,0,0,0.8); display:none; z-index:11;}
.navWrap.view{display:inline-block;}
.navWrap > .header{display:flex; justify-content:end; align-items:center; padding:10px 20px;}
.navWrap > .header > .navClose{cursor:pointer;}
.navWrap > .header > .navClose > .xi{font-size:3rem; color:#fff;}

.navWrap > .navTop{padding:0 20px;}
.navWrap > .navTop > .profill{color:#fff; display:flex; justify-content:center; align-items:center; gap:10px; font-size:2rem; font-weight:600;}
.navWrap > .navTop > .profill > img{height:100%; width:auto; object-fit:contain;}
.navWrap > .navTop > ul{display:flex; justify-content:center; align-items:center; margin-top:3px;}
.navWrap > .navTop > ul > li + li::before{content:''; display:inline-block; width:1px; height:10px; background:#fff; margin:0 10px;}
.navWrap > .navTop > ul > li > a{color:#fff; font-size:13px;}

.navWrap > .nav{margin:40px 0px 0px; border-top:1px solid #fff; height:calc(100% - 91.2px - 43.8px); overflow:auto;} 
.navWrap > .nav > a{color:#fff; font-size:15px; display:block; text-align:center; padding:10px; border-bottom:1px solid #fff;}

/* footer */
.index > footer,
.login > footer{display:none;} 
footer{width:100%; background:var(--blackColor); border-top:1px solid #bbb;}
footer > .footArea{max-width: calc(1200px + 8rem); padding:8rem 4rem; margin:0 auto; display: flex; align-items:start; justify-content: space-between;}

.footArea > .footLogo{width:20rem;}
.footArea > .footLogo > a{display: inline-block;}
.footArea > .footLogo > a > img{width:100%; object-fit: cover; margin-bottom:-3px;}

.footArea > .footInfo{color:#bbb; font-size:1.6rem; max-width:700px; width:calc(100% - 250px);}
.footArea > .footInfo > .tit{font-weight: bold;}
.footArea > .footInfo > .con{margin:2rem 0 4.8rem;}
.footArea > .footInfo > .con > ul{margin-top:10px; display: flex; justify-content: space-between;}
.footArea > .footInfo > .con > ul > li > div + div{margin-top:10px;}
.footArea > .footInfo > .con > ul > li > div > .t{font-weight: bold; margin-right:10px;}

/* main */
.mainSwiper{width:100%; height:100vh; font-size:20px; overflow: hidden;}
.mainSwiper .section{font-size: 20px;}

.section .innerWrap{max-width: calc(1200px + 8rem); width:100%; padding:0 4rem; margin:0 auto;}
.section .innerWrap.flex{display:flex;}

/* sub */
.sub{background:#000;}
.sub header{background:rgba(0,0,0,0.8); position:sticky;}
.sub header > .headerArea{padding:2.5rem 4rem; transition: all 0.3s;}
.sub .subWrap{background:#fff;}
.sub .subWrap .innerWrap{max-width: calc(1200px + 8rem); width:100%; padding:4rem; margin:0 auto;}

/* Login */
.login > header{display:none;}
.login > main{background:url(../images/slideBg01.jpg) no-repeat center center / cover; display:flex; align-items:center; justify-content:center; height:100vh;}
.login > main > .loginArea{background:#fff; display:inline-block; padding:40px 25px; border-radius:10px; width:450px; max-height:80%; max-width:80%;}
.login > main > .loginArea .inputBox{background:#fff; border:1px solid #bbb; overflow:hidden; border-radius: 6px}
.login > main > .loginArea .inputBox + .inputBox{margin-top:10px;} 
.login > main > .loginArea .inputBox input{background:#fff !important;}

.login > main > .loginArea > .logo{margin:0 auto 40px; display:block;}

.login > main > .loginArea ul{display:flex; justify-content:space-between; margin:15px 0;}
.login > main > .loginArea ul > li > a{font-size:13px;}
.login > main > .loginArea ul > li > a:hover{color:var(--mainColor);}
.login > main > .loginArea .btnArea .btn{width:100%;}
.login > main > .loginArea .btnArea .btn + .btn{margin-top:10px;} 

/* modal팝업 */
.modalWrap{display:none; justify-content:center; align-items:center; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);}
.modalWrap.view{display:flex;}
.modalWrap > .modalArea{background:#fff; border-radius:10px; overflow:hidden; max-width:90%; max-height:80%;}
.modalWrap > .modalArea .header{display:flex; justify-content:space-between; align-items:center; height:60px; padding:0 20px; border-bottom:1px solid #ddd;}
.modalWrap > .modalArea .header > .popClose{height:100%; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.modalWrap > .modalArea .header > .popClose > .xi{font-size:25px;}

.modalWrap > .modalArea .con{padding:20px;}
.modalWrap > .modalArea .con > .tabMenu{display:flex; margin:-20px -20px 20px;}
.modalWrap > .modalArea .con > .tabMenu > li{width:50%; text-align:center; font-size:15px; font-weight:600; cursor:pointer; padding:15px 10px; background:#ddd; color:#777;}
.modalWrap > .modalArea .con > .tabMenu > li.on{background:var(--blackColor); color:#fff;}

.modalWrap > .modalArea .btnArea{padding-top:40px; display:flex; justify-content:center; align-items:center; gap:5px;}

.tabArea{display:none;}
.tabArea.on{display:block;}