/* visual */
.visual{height: 100vh; display:flex; justify-content: center; align-items: center; background:url(../images/visualBg3.png) no-repeat center / cover; position:relative; background-attachment: fixed;}
.visual:after{content:''; background:rgba(0,0,0,0.3); position:absolute; top:0; left:0; bottom:0; right:0;}
.visual > .conArea{text-align: center; z-index: 1; color:#fff;}
.visual > .conArea > h2{width:200px; letter-spacing:3px; margin: 0 auto 2rem auto;}
.visual > .conArea > h2 > img{width:100%; object-fit: cover;}
.visual > .coconArean > p{font-size:1.5rem; max-width:600px;}
.visual > .conArea .localScroll{background:#fff; width:20px; height:20px; transform: rotate(45deg) translateX(-50%); position:absolute; left:50%; bottom:20px;}
.visual > .conArea .localScroll > a{display:block;}
.visual > .conArea .localScroll > a:after{animation-name: upDown; animation-duration:1s; animation-iteration-count: infinite; content: "\e942"; font-family: xeicon; display:inline-block; position:absolute; left:50%; top:50%; transform: rotate(-45deg) translateY(-50%); transform-origin: 50% 50%; font-size:18px;}

@keyframes upDown {
    0%{top:35%; left:35%;}
    50%{top:50%; left:50%;}
    100%{top:35%; left:35%;}
}

/* service */
.service{margin-top:30px;}
.service .conArea > .con + .con{margin-top:8rem;}
.service .conArea > .con > .sTit{font-size:2.5rem; margin-bottom:50px; text-align: center;}
.service .conArea > .con .t{font-weight: 600; font-size:2rem; margin-bottom:30px; color:var(--mainColor); text-align: center;}
.service .conArea > .con > p{font-size:1.5rem; max-width: 500px; margin: 0 auto; text-align: center;}

.service .conArea > .con.sec1 > .top_area{display:flex; justify-content: space-between; max-width:1200px; margin:0 auto;}
.service .conArea > .con.sec1 > .top_area > div{border:1px solid #ccc; border-radius: 5px; padding:20px; width:49%;}
.service .conArea > .con.sec1 > .top_area > div > p{font-size:1.6rem;}
.service .conArea > .con.sec1 > .top_area > div > p + p{margin-top:15px;}

.service .conArea > .con.sec1 > .foot_area{padding-top:20px; max-width:1200px; margin:0 auto;}
.service .conArea > .con.sec1 > .foot_area li{display:flex; align-items: center; padding:30px 0; border-top:1px solid #dbdbdb;}
.service .conArea > .con.sec1 > .foot_area li:last-child{border-bottom:1px solid #dbdbdb;}
.service .conArea > .con.sec1 > .foot_area li > span{font-size:4rem; color:var(--mainColor); font-weight:600; width:20vw;}
.service .conArea > .con.sec1 > .foot_area li > div{font-size:2rem; width:calc(100% - 20vw);}

.service .conArea > .con.sec2 > .content{text-align: center;}
.service .conArea > .con.sec2 > .content + .content{padding-top:50px;}

.service .conArea > .con.sec2 > .content > p{font-size:1.6rem; max-width:500px; margin:0 auto;}
.service .conArea > .con.sec2 > .content > img{margin-top:30px; width: 90%; max-width: 700px;object-fit: cover;}

.service .conArea > .con.sec2 > .content > .imgWrap{display:flex; justify-content: space-between; width:90%; max-width:1200px; margin:55px auto 0 auto;}
.service .conArea > .con.sec2 > .content > .imgWrap > div{width:45%; text-align: center; border:1px solid #ccc; border-radius: 5px; padding:40px 20px; position:relative;}
.service .conArea > .con.sec2 > .content > .imgWrap > div > .t{font-weight: 600; color:var(--blackColor); border:1px solid #ccc; padding:5px 15px; font-size:1.5rem; text-align: center; display: inline-block; background:#fff; position:absolute; left:50%; top:-26px; transform: translateX(-50%); width:300px;}
.service .conArea > .con.sec2 > .content > .imgWrap > div > img{width:100%; object-fit: cover;}
.service .conArea > .con.sec2 > .content > .imgWrap > div:nth-of-type(2){width:10%; border:none; position:relative;}
.service .conArea > .con.sec2 > .content > .imgWrap > div:nth-of-type(2):after{content:'VS'; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:50px; height:50px; display:inline-block; border-radius: 50%; background:var(--mainColor); color:#fff; font-weight: 600; font-size:2rem; line-height: 50px; box-shadow: 3px 3px 2px 0px rgba(168,204,227,1);}

.service .conArea > .con.sec2 > .content > .conList{display:flex; flex-wrap: wrap; max-width:1200px; margin:20px auto 0;}
.service .conArea > .con.sec2 > .content > .conList > div{width:calc((100% / 3)); display:flex; align-items: center; padding:15px 0; }
.service .conArea > .con.sec2 > .content > .conList > div > .num{display:inline-block; width:50px; height:50px; border-radius: 50%; color:#fff; font-size:2rem; font-weight:600; line-height: 50px;}
.service .conArea > .con.sec2 > .content > .conList > div > .num.type1{background:#e52a0a;}
.service .conArea > .con.sec2 > .content > .conList > div > .num.type2{background:#672699;}
.service .conArea > .con.sec2 > .content > .conList > div > .num.type3{background:#075a9e;}
.service .conArea > .con.sec2 > .content > .conList > div > .num.type4{background:#33941b;}
.service .conArea > .con.sec2 > .content > .conList > div > .num.type5{background:#0d97f6;}

.service .conArea > .con.sec2 > .content > .conList > div > .txt{text-align:left; font-size:14px; padding-left:10px; width:calc(100% - 50px);}
.service .conArea > .con.sec2 > .content > .conList > div > .txt > span{display:inline-block; width:100%; font-weight:600; font-size:1.7rem;}

.service .conArea > .con.sec2 > .content > .st{font-weight:600; font-size:17px; margin-bottom:15px;}
.service .conArea > .con.sec2 > .content > .txt{max-width:1200px;}
.service .conArea > .con.sec2 > .content > .txt + .st{margin-top:45px;}
.cowImg{width:600px !important;}


/* architecture */
.architecture{text-align: center;}
.architecture .conArea > p{font-size:1.7rem; max-width: 700px; margin: 0 auto; text-align: center;}
.architecture img{width: 90%; max-width: 700px; object-fit: cover; margin:60px auto 0 auto;}

/* token */
.token .chartWrap{display:flex; justify-content: space-between; align-items: center; max-width:1000px; margin:0 auto;}
.token .chartWrap > div{width:calc(50% - 5px);}
.token .chartWrap .st{font-weight:600; font-size:1.7rem; margin-bottom:15px; text-align: center;}
.token .chartWrap table{border-top:2px solid #000; width: 100%;}
.token .chartWrap table td{padding:15px 0; text-align: center; border-bottom:1px solid #000;}
.token .chartWrap table td:first-of-type{border-right:1px solid #000;}

.token .conArea > .con{max-width:1000px; margin:0 auto;}
.token .conArea > .con > .sTit{font-size:2.5rem; margin:60px 0 30px; text-align: center;}

.token .conArea > .con > ul{display:flex; gap:20px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.token .conArea > .con > ul > li{width:calc((100% / 5) - 20px);}
.token .conArea > .con > ul > li > a{display:inline-block; width: 100%;}
.token .conArea > .con > ul > li > a > img{width: 100%; object-fit: contain;}
.token .conArea > .con > ul > li > a > span{font-weight: 600; font-size:23px; text-align: center; display: block;}


.sbt_list .conArea > .con {max-width:1200px; margin:0 auto;}
.sbt_list .conArea { padding-top:20px; }
.sbt_list .conArea > .con > ul{display:flex; gap:20px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.sbt_list .conArea > .con > ul > li{width:calc((100% / 5) - 20px);}
.sbt_list .conArea > .con > ul > li > a{display:inline-block; width: 100%;}
.sbt_list .conArea > .con > ul > li > a > img{width: 100%; object-fit: contain;}
.sbt_list .conArea > .con > ul > li > a > span{font-weight: 600; font-size:23px; text-align: center; display: block;}
.sbt_list .conArea > .con > ul > li:nth-child(n+5):nth-child(-n+9) { display:none; }

.sTit2{font-weight:600; font-size:1.7rem; margin:30px 0 15px; text-align: center;}
table.type2{border-top:2px solid #000; width: 100%; table-layout: fixed;}
table.type2 tr:first-of-type > td{font-weight:bold; background:#f3f3f3;}
table.type2 td{padding:15px 0; text-align: center; border-bottom:1px solid #000;}
table.type2 td:not(:last-of-type){border-right:1px solid #000;}
table.type2 + table.type2{margin-top:20px;}


/* roadmap */
/*.roadmap{background:url(../images/roadmapBg.jpg) no-repeat center / cover; background-attachment: fixed; position:relative;}
.roadmap:after{content:''; background:rgba(255,255,255,0.7); position:absolute; top:0; left:0; bottom:0; right:0;}*/
.roadmap > .conArea{z-index: 1; position:relative;}
.roadMapList{max-width:800px; margin:0 auto; }
.roadMapList > li{display:flex;}
.roadMapList > li > .year{width:200px; border-right:1px solid #dbdbdb; font-size:3rem; color:var(--mainColor); font-weight:700; padding:5rem 0;}
.roadMapList > li > .con{width:calc(100% - 200px); padding:5rem 0 5rem 10rem}
.roadMapList > li > .con > div{display:flex; font-size:1.7rem;}
.roadMapList > li > .con > div + div{margin-top:3rem;}
.roadMapList > li > .con > div > .t{font-weight:600; color:var(--mainColor); margin-right:20px;}
.roadMapList > li > .con > div > .c > p{display:inline-block; width:100%;}
.roadMapList > li > .con > div > .c > p + p{margin-top:5px;}
.roadMapList > li > .con > div > .c > ul{margin-left:10px; margin-top:10px;}
.roadMapList > li > .con > div > .c > ul > li{padding-left:15px; position:relative;}
.roadMapList > li > .con > div > .c > ul > li::after{content:'-'; display:inline-block; position:absolute; left:0px; top:50%; transform: translateY(-50%);}
.roadMapList > li > .con > div > .c > ul > li + li{margin-top:5px;}

/* aboutus */
.aboutUs .conArea > .con + .con{margin-top:100px;}
.aboutUs .conArea > .con > .sTit{font-size:2.5rem; margin-bottom:30px; text-align: center;}
.aboutUs .conArea > .con .t{font-weight: 600; font-size:2rem; margin-bottom:15px; color:var(--mainColor); text-align: center;}

.aboutUs .conArea > .con > .content{text-align: center; max-width: 800px; margin:0 auto;}
.aboutUs .conArea > .con > .content + .content{padding-top:40px;}
.aboutUs .conArea > .con > .content > img{object-fit: cover; width:100%;}

.aboutUs .conArea > .con.sec1{text-align: center;}
.teamList{display: inline-block;}
.teamList > li{display:flex; align-items: center;}
.teamList > li + li{margin-top:25px;}
.teamList > li > .photo{width:120px; margin-right:30px;}
.teamList > li > .photo > img{height:85px; object-fit: cover;}
.teamList > li > .txt{text-align: left; width:calc(100% - 150px);}
.teamList > li > .txt > div + div{margin-top:5px; font-size:15px;}
.teamList > li > .txt > .name{font-size:2rem; font-weight:600; display:flex; align-items: center; margin-bottom:15px;}
.teamList > li > .txt > .name > span{display:inline-block; background:var(--mainColor); color:#fff; font-size:12px; padding:4px 10px; border-radius: 3px; margin-right:10px;}
.teamList > li > .txt > .job{font-weight:600;}
.teamList > li > .txt > .c > span{font-weight:700;}
.teamList > li > .txt > ul{margin:10px 0 0 10px;}
.teamList > li > .txt > ul > li{font-size:13px; margin-top:5px; position:relative; padding-left:20px; line-height: 1.2;}
.teamList > li > .txt > ul > li::before{display:inline-block; content: "\e929"; font-family:"xeicon"; margin-right:5px; position: absolute; left:0;}


/* 임시페이지 */
.teamWrap{max-width:1200px; margin:0 auto; padding:40px 0; height:100vh; display: flex; align-items: center;}
.teamWrap .teamList{display:flex; flex-wrap: wrap; align-items: start; justify-content: space-between;}
.teamWrap .teamList > li{width:48%; align-items: start;}
.teamWrap .teamList > li + li{margin-top:0px;}
.teamWrap .teamList > li:first-of-type,
.teamWrap .teamList > li:nth-of-type(2){margin-bottom:70px;}
.teamWrap .teamList > li ul{margin-top:20px;}
.teamWrap .teamList > li ul > li{padding-left: 15px; position:relative;}
.teamWrap .teamList > li ul > li + li{margin-top:5px;}
.teamWrap .teamList > li ul > li:after{content:'-'; display:inline-block; position:absolute; left:0px; top:0px;}

/* modalpop */
.modalWrap{position:fixed; top:0; left:0; right:0; bottom:0px; background:rgba(0,0,0,0.7); z-index: 10; display:flex; justify-content: center; align-items: center;}
.modalWrap > .modalArea{position:relative; max-width:90%; max-height: 90%;}
.modalWrap > .modalArea > .con{height:100%; width:100%; display:inline-block;}
.modalWrap > .modalArea > .header > .closeBtn{font-size:0px; cursor:pointer; position:absolute; top:10px; right:10px; z-index:10;}
.modalWrap > .modalArea > .header > .closeBtn:after{content: "\e921"; display: inline-block; font-family:xeicon; font-size:3rem;}
.modalWrap > .modalArea img{width:100%; height:100%; object-fit: contain;}
.modalWrap.none{display:none;}
.modalWrap .moImg{display:none;}
.modalWrap .pcImg{display:inline-block;}

/* modalpop */
.modalWrap.event{position:fixed; top:0; left:0; right:0; bottom:0px; background:rgba(0,0,0,0.7); z-index: 15; display:flex; justify-content: center; align-items: center;}
.modalWrap.event > .modalArea > .header{position: sticky; top: 0; z-index:1;}
.modalWrap.event > .modalArea > .header > .closeBtn{font-size:0px; cursor:pointer; position:absolute; top:10px; right:10px; z-index:10;}
.modalWrap.event > .modalArea{position:relative; max-width:90%; height: 90%;}
.modalWrap.event > .modalArea > .con{height:100%; width:652px;  display:inline-block; font-size: 0; overflow: hidden; overflow-y: auto;}
.modalWrap.event > .modalArea > .header > .closeBtn:after{content: "\e921"; display: inline-block; color: #fff; font-family:xeicon; font-size:3rem;}
.modalWrap.event > .modalArea img{width:100%; height:100%; object-fit: contain;}
.modalWrap.event.none{display:none;}

.modalArea .eventBtn{width:85px; height:85px; display:flex; align-items: center; font-weight: 700; box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); justify-content: center; border-radius: 50%; font-size:20px; background:#e52a0a; color:#fff; position:absolute; bottom:15px; right:15px; text-align: center;}

/* sbt */
.sbtList{display:flex; justify-content:space-between; gap:2rem;}
.token .conArea > .con > ul.sbtList > li{width:calc((100% / 4) - 15px);}
.sbt_list .conArea > .con > ul.sbtList > li{width:calc((100% / 4) - 15px);}
.sbtList > li > .imgArea > a{display:block;}
.sbtList > li > .imgArea > a > img{width:100%; object-fit:cover;}
.sbtList > li > .txtArea{text-align:center; margin-top:1.5rem; font-size: 2rem; font-weight: 400;}
.sbtList > li > .txtArea > span{display:block;}
.sbtList > li > .txtArea > span > a{color:var(--mainColor); font-weight:bold;}

/* quickMenu */
.quickMenu{position:fixed; right:0px; top:50%; transform: translate(120px, -50%); transition: transform 0.5s; padding:10px; background: rgba(0,0,0,0.8); border-radius: 5px 0 0 5px; z-index: 1;}
.quickMenu > .toggleBtn{background:rgba(0,0,0,0.8); height:100px; width:20px; border-radius: 5px 0 0 5px; display:flex; align-items: center; justify-content: center; position:absolute; top:50%; transform: translateY(-50%); left:-20px; cursor:pointer}
.quickMenu > .toggleBtn::after{content: "\e93c"; font-family:"xeicon"; font-size: 20px;; color:#fff;}
.quickMenu li > a{width:100px; display: inline-block;}
.quickMenu li > a > img{width:100%; object-fit: cover;}
.quickMenu li + li{margin-top:10px;}

.quickMenu.on{ transform: translate(0, -50%); transition: transform 0.5s;}
.quickMenu.on > .toggleBtn::after{content: "\e93f";}


/* 250711 메인 팝업추가 */
#main_popup{display: none; position: absolute;top: 80px;left: 30px; z-index: 2;width: 450px;border: 1px solid #ddd;}
#main_popup .close_btn02{position: absolute;top: 10px;right: 10px;width: 20px;height: 20px;cursor:pointer;}
#main_popup .close_btn02 span{position: absolute;top: 50%;left: 50%; display: block; width: 100%;height: 2px;background: #000;transform:translate(-50% , -50%) rotate(45deg) ;}
#main_popup .close_btn02 span:nth-child(2){transform:translate(-50% , -50%) rotate(-45deg);}
#main_popup img{display: block; width: 100%;}
#main_popup .close_box{display: flex;align-items: center;justify-content: space-between;gap:10px; width: 100%;height: 30px;background: #fff;padding: 0 15px;}
#main_popup .close_box .i_box{display: flex;align-items: center;gap:3px;}
#main_popup .close_box button{border: 0;background: transparent;padding: 0;cursor: pointer;font-size: 17px;}
#main_popup .close_box .i_box label{font-size: 15px;font-weight: 500;color: #000;margin-right: 0;}
#main_popup .close_box .i_box input[type="checkbox"]{width: 15px;background: #fff;appearance: auto;}

@media screen and (max-width:600px) {
    #main_popup{display: none; position: absolute;top: 70px;left: 50%;transform: translateX(-50%);z-index: 2;width: 90%;border: 1px solid #ddd;}
    #main_popup img{width: 100%;}
    #main_popup .close_box{display: flex;align-items: center;justify-content: space-between;gap:10px; width: 100%;height: 30px;background: #fff;padding: 0 15px;}
    #main_popup .close_box .i_box{display: flex;align-items: center;gap:3px;}
    #main_popup .close_box .i_box label{font-size: 13px;font-weight: 500;color: #000;margin-right: 0;}
    #main_popup .close_box .i_box input[type="checkbox"]{width: 15px;}
    #main_popup .close_box button{border: 0;background: transparent;padding: 0;cursor: pointer;font-size: 15px;}
}
