/* Common **********************************************************************/ /* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); <-- 기존에 있던 것 */ /* Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'Juache'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff'); font-weight: normal; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; } /* Common **********************************************************************/ html,body {width:100%; scroll-behavior: smooth;} html {overflow-y:scroll; box-sizing:border-box;} *, *:before, *:after{box-sizing:inherit;} *{ -webkit-text-size-adjust:none; -webkit-text-size-adjust - auto | none | N% (default auto) }body {word-break:break-all;-ms-word-break:break-all; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0;} fieldset,img {border:0px none; vertical-align:top;} dl,ul,ol,menu,li {list-style:none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;} button {border:0 none; background-color:transparent; cursor:pointer;} body { background:#fff;} body,th,td,input,select,textarea,button {font-size:13px; line-height:1.6; font-family: 'Pretendard'; color:#7d7d7d;} input, select, textarea, button{vertical-align:middle; } a:link,a:active,a:visited{color:#7d7d7d; text-decoration:none; border:0px;} a:hover,a:focus{color:#333; text-decoration:none} table {border-collapse:collapse; border-spacing:0;} address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;} summary, caption, legend, hr {width:0; height:0; font-size: ; line-height: ; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;} caption {position:static;} /* label hidden 처리 */ .invisible, .hide{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;} label.invisible{*position:Absolute;} .center{text-align:center;} .pc_img {display:block;} .tab_img {display:none;} .mob_img {display:none;} .pc {display:block;} .tab {display:none;} .mob {display:none;} :root { --co01: #7fff00; }::selection{background: var(--co01); color: #000;} .fj{font-family: 'Juache';} /* ==main== */ #wrap{ position: relative; width: 100%; max-width: 100%; min-width: 1500px; margin: 0 auto; overflow: hidden;word-break: keep-all; background: #000; z-index: 100;} .inner{width: 1480px; margin: 0 auto; max-width:100%;} .line_svg{position: absolute;top: 100vh;left: -100px;pointer-events: none;z-index: -1;} .top_bg_wrap{position: relative;z-index: 1;} .top_bg_wrap .bg01{position: absolute;top: 0; left: 0;z-index: -1;} .top_bg_wrap .bg02{position: absolute;bottom: 0; right:0;z-index: -1;} .top_bg_wrap .bg03{position: absolute;bottom: 0; right:0;z-index: -1;} /* header */ #header{position: relative;z-index: 8000; line-height: 1; background: rgba(17,17,17,.5);} #header .inner{display: flex;align-items: center;justify-content: space-between; height: 80px;} #header ul.gnb{display: flex;gap:126px;} #header ul.gnb li{position: relative;} #header ul.gnb li span a{position: relative;font-size: 18px; color: #fff;} #header ul.gnb li span a::after{content:'';position: absolute;left: 0;bottom: -10px; width: 0%; height: 2px; background: var(--co01);transition:.4s;} #header ul.gnb li.on span a::after{width: 100%;} #header ul.gnb .lnb_sub{position: absolute; top: 50px; left: 50%; transform:translateX(-50%);z-index: 100; width: 180px; background: rgba(127,255,0,.7); border-radius:16px;} #header ul.gnb .lnb_sub ul{display: none;padding: 30px 0px;} #header ul.gnb .lnb_sub ul li a{display: block;color: #222;font-size: 18px;text-align: center;font-weight: 500;} #header ul.gnb .lnb_sub ul li:not(:last-child){margin-bottom: 20px;} #header .log_wrap{display: flex;align-items: center;} #header .log_wrap a{display: flex; align-items: center;justify-content: center;padding: 0px 20px;height: 36px; font-size: 16px; color: #ddd;font-weight: 500;border-radius:18px;} #header .log_wrap a.join{background: var(--co01); color: #222; } /* navi */ .nav_btn{display: none;} .navigation{display: none;} /* visual_wrap */ #visual_wrap{line-height: 1;padding-top: 60px;} #visual_wrap ul.visual{border-radius:50px; border:1px solid #333; overflow: hidden;} #visual_wrap ul.visual li{position: relative;} #visual_wrap ul.visual .img_wrap{background: #000;} #visual_wrap ul.visual .img_wrap img{width: 100%;} #visual_wrap ul.visual .txt_wrap{position: absolute;top: 50%;left: 0;transform:translateY(-50%);padding: 0 100px;} #visual_wrap ul.visual .txt_wrap span{display: block;font-size: 16px; color: var(--co01); font-weight: 700; text-transform:uppercase; margin-bottom: 30px;} #visual_wrap ul.visual .txt_wrap p{font-size: 75px; color: #fff; line-height: 80px;} #visual_wrap ul.visual .txt_wrap p b{font-weight: 400;color: var(--co01);} #visual_wrap ul.visual ul.slick-dots{position: absolute;left: 50%;transform:translateX(-50%);bottom: 30px;display: flex; gap:20px;align-items: center;} #visual_wrap ul.visual ul.slick-dots li{text-indent: -9999px;width: 8px; height: 8px; border:1px solid var(--co01); border-radius:50%;} #visual_wrap ul.visual ul.slick-dots li.slick-active{width: 20px; height: 20px; background: url(/assets/images/main/vis_dots_pc.png)center no-repeat; background-size: cover; border:none; border-radius:0;} #visual_wrap .mid_txt{display: flex;align-items: center;gap:20px; justify-content: center;margin: 60px 0;} #visual_wrap .mid_txt .id_flex{display: flex;} #visual_wrap .mid_txt .id_wrap{width: 50px;height: 50px;border-radius:50%; overflow: hidden;} #visual_wrap .mid_txt .id_wrap img{width: 100%; height: 100%; object-fit:cover;} #visual_wrap .mid_txt .id_wrap:not(:first-child){margin-left: -10px;} #visual_wrap .mid_txt p{font-size: 20px; color: #fff;} #visual_wrap .mid_txt p strong{color: var(--co01);} #visual_wrap .btn_flex{display: flex;gap:65px;} #visual_wrap .btn_flex .btn{position: relative; border:1px solid #333; border-radius:20px; background: #111;transition:.3s;} #visual_wrap .btn_flex .btn a{display: flex;align-items: flex-end;justify-content: center;width: 120px; height: 120px;padding-bottom: 20px;} #visual_wrap .btn_flex .btn .icon{position: absolute;top: 38%;left: 50%;transform:translate(-50%,-50%);} #visual_wrap .btn_flex .btn p{font-size: 16px; color: #ddd;transition:.3s;} #visual_wrap .btn_flex .btn:after{content:'';opacity: 0;position: absolute;top: 0;left: 0;width: 100%; height: 100%; border-radius:20px; pointer-events: none;transition:.3s;} #visual_wrap .btn_flex .btn01::after{border:2px solid var(--co01);} #visual_wrap .btn_flex .btn02::after{border:2px solid #60a5fa;} #visual_wrap .btn_flex .btn03::after{border:2px solid #c084fc;} #visual_wrap .btn_flex .btn04::after{border:2px solid #e36baa;} #visual_wrap .btn_flex .btn05::after{border:2px solid #e5ba15;} #visual_wrap .btn_flex .btn06::after{border:2px solid #818cf8;} #visual_wrap .btn_flex .btn07::after{border:2px solid #fb7185;} #visual_wrap .btn_flex .btn08::after{border:2px solid #2bc9b5;} #visual_wrap .btn_flex .btn:hover:after{opacity: 1;} #visual_wrap .btn_flex .btn01:hover{box-shadow:0px 0px 10px rgba(127,255,0,.6);} #visual_wrap .btn_flex .btn02:hover{box-shadow:0px 0px 10px rgba(96,165,250,.6);} #visual_wrap .btn_flex .btn03:hover{box-shadow:0px 0px 10px rgba(192,132,252,.6);} #visual_wrap .btn_flex .btn04:hover{box-shadow:0px 0px 10px rgba(227,107,170,.6);} #visual_wrap .btn_flex .btn05:hover{box-shadow:0px 0px 10px rgba(229,186,21,.6);} #visual_wrap .btn_flex .btn06:hover{box-shadow:0px 0px 10px rgba(129,140,248,.6);} #visual_wrap .btn_flex .btn07:hover{box-shadow:0px 0px 10px rgba(251,113,133,.6);} #visual_wrap .btn_flex .btn08:hover{box-shadow:0px 0px 10px rgba(43,201,181,.6);} #visual_wrap .btn_flex .btn01:hover p{color: var(--co01);} #visual_wrap .btn_flex .btn02:hover p{color: #60a5fa;} #visual_wrap .btn_flex .btn03:hover p{color: #c084fc;} #visual_wrap .btn_flex .btn04:hover p{color: #e36baa;} #visual_wrap .btn_flex .btn05:hover p{color: #e5ba15;} #visual_wrap .btn_flex .btn06:hover p{color: #818cf8;} #visual_wrap .btn_flex .btn07:hover p{color: #fb7185;} #visual_wrap .btn_flex .btn08:hover p{color: #2bc9b5;} /* section */ .section{line-height: 1;padding-bottom: 60px;} .sec_tit01{display: flex;align-items: center;justify-content: space-between;margin-bottom: 40px;} .sec_tit01.mb0{margin-bottom: 0;} .sec_tit01 p{font-size: 35px; color: #fff;font-family: 'Juache';} .sec_tit01 a{font-size: 18px; color: #ddd; font-weight: 700;} .slide_wrap_st01 .slick-track{margin: 0;} .slide_wrap_st01 .slick-list{width: calc(100% + 30px);padding: 40px 0px;} .slide_wrap_st01 ul.slide01 li.list{position: relative;margin-right: 30px; background: #111; border-radius:20px; border:1px solid #333;} .slide_wrap_st01 ul.slide01 li.list::after{content:'';opacity: 0;position: absolute;top: 0; left: 0; width: 100%; height: 100%;box-shadow:0px 0px 10px rgba(127,255,0,.6); border-radius:20px; border:2px solid var(--co01);pointer-events:none;transition:.3s;z-index: 10;} .slide_wrap_st01 ul.slide01 li.list:hover::after{opacity: 1;} .slide_wrap_st01 ul.slide01 li.list .top{position: absolute;display: flex;align-items: center;justify-content: space-between;z-index: 100;padding: 20px;width: 100%;pointer-events: none;} .slide_wrap_st01 ul.slide01 li.list .top .tag_wrap{display: flex;gap:5px;} .slide_wrap_st01 ul.slide01 li.list .top .tag_wrap em{display: flex;align-items: center;height: 22px;padding: 0 10px;font-size: 13px; color: #fff; font-weight: 500; border-radius:4px;} .slide_wrap_st01 ul.slide01 li.list .top .tag_wrap em.tag01{background: #fb7185;} .slide_wrap_st01 ul.slide01 li.list .top .tag_wrap em.tag02{background: #818cf8;} .slide_wrap_st01 ul.slide01 li.list .top .tag_wrap em.tag03{background: #c084fc;} .slide_wrap_st01 ul.slide01 li.list .top .tag_wrap em.tag04{background: #60a5fa;} .slide_wrap_st01 ul.slide01 li.list .top .tag_wrap em.tag05{background: #e5ba15;} .slide_wrap_st01 ul.slide01 li.list .top .tag_wrap em.tag06{background: #2bc9b5;} .slide_wrap_st01 ul.slide01 li.list .top a.wish{position: relative;width: 23px; height: 20px;pointer-events: auto;} .slide_wrap_st01 ul.slide01 li.list .top a.wish.w02{height: 22px;} .slide_wrap_st01 ul.slide01 li.list .top a.wish img{position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%);transition:.3s;} .slide_wrap_st01 ul.slide01 li.list .top a.wish img.on{opacity: 0;} .slide_wrap_st01 ul.slide01 li.list .top a.wish.on img.off{opacity: 0;} .slide_wrap_st01 ul.slide01 li.list .top a.wish.on img.on{opacity: 1;} .slide_wrap_st01 ul.slide01 li.list .img_box{position: relative;border-bottom: 1px solid #333;} .slide_wrap_st01 ul.slide01 li.list .img_wrap{position:relative; width:100%; padding-bottom:57.42%;overflow: hidden; border-radius:20px 20px 0 0;} .slide_wrap_st01 ul.slide01 li.list .img_wrap::before{content:'';position: absolute;bottom: 0;left: 0;width: 100%; height: 100%;background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.5) 100%);z-index: 1;} .slide_wrap_st01 ul.slide01 li.list .img_wrap::after{content:'';position: absolute;top: 0;left: 0;width: 100%; height: 100%;background: rgba(0,0,0,.2);} .slide_wrap_st01 ul.slide01 li.list .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .slide_wrap_st01 ul.slide01 li.list .cat_wrap{position: absolute;left: 20px; bottom: 20px; display: flex;gap:5px;z-index: 2;} .slide_wrap_st01 ul.slide01 li.list .cat_wrap em{display: flex;align-items: center;height: 22px;font-size: 13px; color: #fff; font-weight: 500; border-radius:11px;background: rgba(0,0,0,.6);padding: 0 10px;} .slide_wrap_st01 ul.slide01 li.list .txt_box{position: relative;padding: 20px 20px 30px;} .slide_wrap_st01 ul.slide01 li.list .txt_box p{font-size: 18px; color: #fff; font-weight: 700;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .slide_wrap_st01 ul.slide01 li.list .txt_box ul{margin-top: 20px;} .slide_wrap_st01 ul.slide01 li.list .txt_box ul li{display: flex;align-items: center;gap:10px;} .slide_wrap_st01 ul.slide01 li.list .txt_box ul li:not(:last-child){margin-bottom: 12px;} .slide_wrap_st01 ul.slide01 li.list .txt_box ul li .icon{width: 16px;display: flex; justify-content: center;} .slide_wrap_st01 ul.slide01 li.list .txt_box ul li span{font-size: 14px; color: #ddd;} .slide_wrap_st01 ul.slide01 li.list .txt_box em.new{position: absolute;bottom: 30px; right: 20px; font-size: 16px; color: var(--co01); font-weight: 500;} .slide_wrap_st01 ul.slide01 .slick-arrow{position: absolute;top: 50%;transform:translateY(-50%);text-indent: -9999px;width: 48px; height: 48px; z-index: 100;} .slide_wrap_st01 ul.slide01 .slick-prev{left: -25px; background: url(/assets/images/main/prev01_pc.png)center no-repeat; background-size: cover;} .slide_wrap_st01 ul.slide01 .slick-next{right: -25px; background: url(/assets/images/main/next01_pc.png)center no-repeat; background-size: cover;} .slide_wrap_st01 ul.slide01-2 li.list{background: transparent; border:0;} .slide_wrap_st01 ul.slide01-2 li.list .img_box{border-bottom: 0;} .slide_wrap_st01 ul.slide01-2 li.list .img_box::after{content:'';opacity: 0;position: absolute;top: 0; left: 0; width: 100%; height: 100%;box-shadow:0px 0px 10px rgba(127,255,0,.6); border-radius:20px; border:2px solid var(--co01);pointer-events:none;transition:.3s;} .slide_wrap_st01 ul.slide01-2 li.list:hover .img_box::after{opacity: 1;} .slide_wrap_st01 ul.slide01-2 li.list .img_wrap{padding-bottom: 115.27%;border-radius:20px; border:1px solid #333;} .slide_wrap_st01 ul.slide01-2 li.list .txt_box{padding: 0;padding-top: 20px;} .slide_wrap_st01 ul.slide01-2 li.list::after{display: none;} /* section01 */ #section01{padding-top: 100px;padding-bottom: 60px;} /* section02 */ #section02{position: relative;} #section02::after{content:'';position: absolute;bottom: 0;left: 0;background: url(/assets/images/main/ch_bg02_pc.png)center no-repeat; background-size: cover; width: 367px; height: 357px;z-index: -1;} #section02 .date_wrap .scr_wrap{display: flex;gap:30px;} #section02 .date_wrap .date a{position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;gap:5px;text-align: center;width: 190px;height: 132px;z-index: 1;} #section02 .date_wrap .date a::after{content:'';position: absolute;top: 50%; left: 50%;transform:translate(-50%,-50%);background: url(/assets/images/main/tab_icon01_pc.png)center no-repeat; width: 219px; height: 166px; background-size: cover;z-index: -1;pointer-events: none;} #section02 .date_wrap .date span{display: block;font-size: 18px; color: #fff; margin-bottom: 5px;text-transform:uppercase;} #section02 .date_wrap .date em{display: block;font-size: 20px; color: #fff;} #section02 .date_wrap .date p{font-size: 26px;color: #fff;} #section02 .date_wrap .date.on span{color: var(--co01);} #section02 .date_wrap .date.on a::after{background: url(/assets/images/main/tab_icon01_on_pc.png)center no-repeat; background-size: cover;width: 224px; height: 168px;top: 51%;left: 52%;} #section02 .date_wrap .date.on em{color: var(--co01);} #section02 .date_wrap .date.on p{color: var(--co01);} /* section03 */ #section03{position: relative;} #section03::after{content:'';position: absolute;bottom: 0;right: 0;background: url(/assets/images/main/ch_bg03_pc.png)center no-repeat; background-size: cover; width: 256px; height: 340px;z-index: -1;} /* section05 */ #section05{position: relative;} #section05::after{content:'';position: absolute;bottom: 0;left: 0;background: url(/assets/images/main/ch_bg04_pc.png)center no-repeat; background-size: cover; width: 459px; height: 355px;z-index: -1;} a.chat_btn{position: absolute; right: 60px; bottom: 410px;display: flex;align-items: center;justify-content: center;width: 70px; height: 70px; border-radius:50%;background: linear-gradient(90deg,rgba(184, 242, 71, 1) 0%, rgba(25, 199, 71, 1) 100%);z-index: 5000;} /* footer */ #footer{position: relative;padding: 60px 0px 60px;line-height: 1; border-top: 1px solid #333; background: #000;z-index: 100;} #footer .f_con{display: flex; justify-content: space-between;} #footer .f_con .left{display: flex;align-items: center;gap:70px;} #footer .f_con .left address ul li{display: flex;} #footer .f_con .left address ul li:not(:last-child){margin-bottom: 15px;} #footer .f_con .left address ul li p{width: 85px;font-size: 16px; color: #fff; font-weight: 500;} #footer .f_con .left address ul li span{font-size: 16px; color: #999;} #footer .f_con .right .btn_box{display: flex;gap:10px;} #footer .f_con .right .btn_box .site_wrap{position: relative;} #footer .f_con .right .btn_box .site_wrap em{display: flex;align-items: center;justify-content: space-between;width: 240px; height: 44px;padding: 0 15px; border-radius:6px; border:1px solid #333;font-size: 16px; color: #fff; font-weight: 500; cursor:pointer;} #footer .f_con .right .btn_box .site_wrap em .arr{position: relative;display: block;width: 10px; height: 10px;} #footer .f_con .right .btn_box .site_wrap em .arr::before{content:'';position: absolute;top: 50%; left: 0; transform:translateY(-50%);width: 100%; height: 2px; background: #fff;} #footer .f_con .right .btn_box .site_wrap em .arr::after{content:'';position: absolute;top: 0; left: 50%; transform:translateX(-50%);width: 2px; height: 100%; background: #fff;transition:.3s;} #footer .f_con .right .btn_box .site_wrap em.on .arr::after{transform:translateX(-50%) rotate(90deg);} #footer .f_con .right .btn_box .site_wrap ul{display: none;position: absolute;bottom: calc(100% + 10px);left: 0;width: 100%; padding: 15px; background: #000; border:1px solid #333; border-radius:6px;} #footer .f_con .right .btn_box .site_wrap ul li:not(:last-child){margin-bottom: 10px;} #footer .f_con .right .btn_box .site_wrap ul li a{font-size: 16px; color: #fff; } #footer .f_con .right .btn_box .top_btn{display: flex; align-items: center;justify-content: center; width: 44px; height: 44px; border-radius:6px; background: #333;} #footer .f_con .right .sns_wrap{display: flex;justify-content: flex-end;gap:10px;margin-top: 20px;} #footer .f_con .right .sns_wrap a{display: flex;align-items: center;justify-content: center; width: 40px; height: 40px; border-radius:50%; background: #333;} #footer .bot{display: flex;justify-content: space-between;margin-top: 120px;} #footer .bot p.copy{font-size: 15px; color: #999;} #footer .bot .a_wrap{display: flex;justify-content: flex-end;gap:30px;} #footer .bot .a_wrap a{font-size: 16px; color: #fff; font-weight: 700;} /* ======sub======================================================= */ #sub_contents{padding: 160px 0 100px;} .contop{margin-bottom: 60px;line-height: 1;} .contop h3{font-size: 50px; color: #fff ;font-weight: 700; text-align: center;} .contop span{display: block;font-size: 18px; color: #666; line-height: 1.5;text-align: center; margin-top: 20px;} /* 공통 */ h3.h3_tit01{position: relative;font-size: 30px; color: #fff; font-weight: 700; margin-bottom: 30px; padding-left: 40px;} h3.h3_tit01::after{content:'';position: absolute;top: 50%;left: 0;transform:translateY(-50%); background: url(/assets/images/sub/txt_icon01.png)center no-repeat; width: 27px; height: 28px; background-size: cover;} h4.h4_tit01{font-size: 26px; color: #fff; font-weight: 700;margin-bottom: 24px;} .sub_tit01{margin-bottom: 35px;text-align: center;} .sub_tit01.left{text-align: left;} .sub_tit01 p{font-size: 30px; color: #fff;font-weight: 700;} .sub_tit01 p em{display: inline-block;font-size: 18px; color: #666;padding-left: 10px;} .sub_tit01 span{display: block;font-size: 18px; color: #666; line-height: 28px; font-weight: 500; margin-top: 25px;} .sub_tit01 span b.co01{color: var(--co01);font-weight: 500;} .tag_wrap_st01{display: flex;justify-content: center;gap:10px;} .tag_wrap_st01 em{display: flex;align-items: center; height: 40px;padding: 0 20px;font-size: 16px; border-radius:20px;} .tag_wrap_st01 em.em01{background: #111;color: #fff;box-shadow:0px 0px 10px rgba(127,255,0,.6); text-transform:uppercase;} .tag_wrap_st01 em.em01 b{display: inline-block;margin-right: 10px;width: 6px; height: 6px; background: var(--co01); border-radius:50%;} .tag_wrap_st01 em.em01 strong{display: inline-block;margin: 0 5px; color: var(--co01); font-weight: 700;} .tag_wrap_st01 em.em02{background: var(--co01);color: #222; font-weight: 700; text-transform:uppercase;} .btn_wrap_st01{display: flex;justify-content: center;gap:10px;} .btn_wrap_st01 a{display: flex;align-items: center;justify-content: center;width: 240px; height: 60px; border-radius:12px;font-size: 18px; color: #222; font-weight: 500; background: var(--co01);transition:.3s;} .btn_wrap_st01 a.btn02{width: 160px;border:1px solid var(--co01); background: transparent;color: var(--co01);} .btn_wrap_st01 a.wh{background: #fff;} .btn_wrap_st01 a:hover{box-shadow:0px 0px 10px rgba(127,255,0,.6);} .cate_wrap_st01{display: flex;margin-bottom: 30px;flex-wrap:wrap;gap:10px 0;} .cate_wrap_st01 a{display: flex;align-items: center;justify-content: center; height: 40px;padding: 0 20px;font-size: 16px; color: #fff; font-weight: 500; border-radius:20px;} .cate_wrap_st01 a.on{background: #111; box-shadow:0px 0px 10px rgba(127,255,0,.6);color: var(--co01);} .search_wrap_st02{display: flex;justify-content: center;gap:10px;line-height: 1; margin-top: 30px;} .search_wrap_st02 select{width: 240px;height: 60px;background: url(/assets/images/sub/select_icon01.png)right 20px center no-repeat #111;font-size: 18px; color: #666; border:0;border-radius:12px;padding: 0px 20px ;border:1px solid #333;-webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none;} .search_wrap_st02 select:focus{outline:0;} .search_wrap_st02 input[type="text"]{height: 60px;width: 660px; max-width: 100%;background: #111;font-size: 18px; color: #666; border:0;border-radius:12px;padding: 0px 20px ;border:1px solid #333;} .search_wrap_st02 input[type="text"]::placeholder{color: #666; } .search_wrap_st02 input[type="text"]:focus{outline:0;} .search_wrap_st02 a.search_btn{display: flex;align-items: center;justify-content: center;width: 130px; height: 60px; font-size: 18px; color: #fff; border-radius:12px; background: #333;} ul.tab_st01{display: flex;justify-content: center;gap:10px; margin-top: 60px;} ul.tab_st01 li a{display: flex;align-items: center;justify-content: center;width: 240px; height: 60px; font-size: 18px; color: #fff;font-weight: 500; border:1px solid #333; background: #111; border-radius:12px;} ul.tab_st01 li.on a{border:1px solid var(--co01); color: var(--co01);} table.tbl_st01{width: 100%;table-layout: fixed;} table.tbl_st01 .center{text-align: center;} table.tbl_st01 th{padding: 10px 20px;font-size: 16px; color: #fff;font-weight: 700;text-align: left; background: #333;font-weight: 600;} table.tbl_st01 td{padding: 10px 20px;font-size: 16px; color: #999;border:1px solid #333;} table.tbl_st01 td:first-child{border-left: 0;} table.tbl_st01 td:last-child{border-right: 0;} a.more_btn_st01{display: flex;align-items: center;justify-content: center;font-size: 18px; color: #fff; font-weight: 500;width: 100%; height: 60px; background: #333; border-radius:12px; margin-top: 40px;} .ra_wrap_st01{display: flex;gap:5px;} .ra_wrap_st01 input.ra_st01{display: none;} .ra_wrap_st01 input.ra_st01 + label{display: flex;align-items: center;justify-content: center;height: 24px;border-radius:8px; padding: 0px 20px;font-size: 14px; color: #fff;font-weight: 500; border:1px solid #333; cursor:pointer;} .ra_wrap_st01 input.ra_st01.co01:checked + label{background: #2bc9b5; border:1px solid #2bc9b5;} .ra_wrap_st01 input.ra_st01.co02:checked + label{background: #fb7185; border:1px solid #fb7185;} .ra_wrap_st01 input.ra_st01.co03:checked + label{background: #e5ba15; border:1px solid #e5ba15;} .chk_wrap_st01{display: flex;flex-wrap:wrap;gap:20px;} .chk_wrap_st01 input{display: none;} .chk_wrap_st01 input + label{display: flex;align-items: center;justify-content: center; width: calc((100% - 180px) / 10);height: 60px; font-size: 18px; color: #666; border:1px solid #333; background: #111; border-radius:12px; cursor:pointer;} .chk_wrap_st01 input:checked + label{color: var(--co01); border:1px solid var(--co01);} .chk_wrap_st01.flex01{gap:10px;} .chk_wrap_st01.flex01 input + label{flex:1;} /* 리스트 */ .slide_wrap_st01 ul.slide01.list01{display: flex;flex-wrap:wrap;gap:60px 30px;} .slide_wrap_st01 ul.slide01.list01 .list{width: calc((100% - 90px) / 4);margin-right: 0;} .slide_wrap_st01 ul.slide01-2.list01{display: flex;flex-wrap:wrap;gap:60px 30px;} .slide_wrap_st01 ul.slide01-2.list01 .list{width: calc((100% - 90px) / 4);margin-right: 0;} .search_wrap_st01{display: flex;gap:10px;line-height: 1; margin-bottom: 60px;} .search_wrap_st01 .input{display: flex;align-items: center;height: 60px;width: calc(100% - 340px); border:1px solid #333; border-radius:12px;padding: 0px 20px 0px 30px;} .search_wrap_st01 .input input[type="text"]{width: calc(100% - 24px);background: transparent;font-size: 18px; color: #666; border:0;} .search_wrap_st01 .input input[type="text"]::placeholder{color: #666; } .search_wrap_st01 .input input[type="text"]:focus{outline:0;} .search_wrap_st01 .btn_wrap{display: flex;gap:10px;} .search_wrap_st01 .btn_wrap a{display: flex;align-items: center;justify-content: center;gap:10px; width: 160px; height: 60px; border-radius:12px;font-size: 18px; color: #fff;} .search_wrap_st01 .btn_wrap a.f_btn{background: #fb7185; } .search_wrap_st01 .btn_wrap a.s_btn{background: #818cf8;} .pop_st01{display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.5);z-index: 9000;} .pop_st01 .pop_box{position: absolute;top: 50%; left: 50%; transform:translate(-50%,-50%); width: 620px; max-height: 90vh; max-width: calc(100% - 20px); overflow-y: scroll; border:1px solid #333; padding: 40px; border-radius:20px; background: #111;} .pop_st01 .pop_box::-webkit-scrollbar {width: 8px; /* 스크롤바의 너비 */} .pop_st01 .pop_box::-webkit-scrollbar-thumb{height: 30%; /* 스크롤바의 길이 */background: #333; /* 스크롤바의 색상 */border-radius: 10px;} .pop_st01 .pop_box::-webkit-scrollbar-track {background: transparent; /*스크롤바 뒷 배경 색상*/} .pop_st01 .pop_box .box .tit{margin-bottom: 20px;} .pop_st01 .pop_box .box .tit p{font-size: 20px; color: #fff; font-weight: 700;} .pop_st01 .pop_box .box:not(:last-child){margin-bottom: 30px;} .pop_st01 .pop_box .box .select{display: flex;gap:10px;} .pop_st01 .pop_box .box .select:not(:last-child){margin-bottom: 10px;} .pop_st01 .pop_box .box input.ra01{display: none;} .pop_st01 .pop_box .box input.ra01 + label{display: flex;align-items: center;justify-content: center;height: 40px;flex:1;font-size: 15px; color: #666; border-radius:8px; border:1px solid #333; cursor:pointer;} .pop_st01 .pop_box .box input.ra01:checked + label{border:1px solid var(--co01); color: var(--co01);} .pop_st01 .pop_box .box a.tab_btn{display: flex;align-items: center;justify-content: center;height: 40px;flex:1;font-size: 15px; color: #666; border-radius:8px; border:1px solid #333;cursor:pointer;} .pop_st01 .pop_box .box a.tab_btn.on{border:1px solid var(--co01); color: var(--co01);} .pop_st01 .pop_box .box .cal_wrap{width: 100%; padding: 20px 55px 30px; border:1px solid #333;border-radius:8px;} .pop_st01 .pop_box .box .cal_wrap .cal_btn{display: flex;align-items: center;justify-content: center;gap:40px;} .pop_st01 .pop_box .box .cal_wrap .cal_btn strong{font-size: 18px; color: #fff; font-weight: 500;} .pop_st01 .pop_box .box .cal_wrap .cal_box table{width: 100%; table-layout: fixed;} .pop_st01 .pop_box .box .cal_wrap .cal_box table p{display: flex;align-items: center;justify-content: center;width: 60px;height: 40px; border-radius:20px;font-size: 15px; color: #666; font-weight: 500; cursor:pointer;} .pop_st01 .pop_box .box .cal_wrap .cal_box table th{font-weight: 500;} .pop_st01 .pop_box .box .cal_wrap .cal_box table td{text-align: center;} .pop_st01 .pop_box .box .cal_wrap .cal_box table td.active p{background: var(--co01);color: #333;} .pop_st01 .pop_box .box .cal_wrap .cal_box table td.start p{border-radius:20px 0 0 20px;} .pop_st01 .pop_box .box .cal_wrap .cal_box table td.end p{border-radius:0px 20px 20px 0;} .pop_st01 .pop_box .box .cal_wrap .cal_box table td.start.end p{border-radius:20px;} .pop_st01 .pop_box .box .cal_wrap .cal_box table td.middle p{border-radius:0;} .pop_st01 .pop_box .box .region_wrap .select_tab .select{flex-wrap:wrap;} .pop_st01 .pop_box .box .region_wrap .select_tab .select:not(:last-child){margin-bottom: 0;} .pop_st01 .pop_box .box .region_wrap .select_tab .select input.ra01 + label{flex:initial;width: calc((100% - 60px) / 7);} .pop_st01 .pop_box .box .cate_wrap .select{flex-wrap:wrap;} .pop_st01 .pop_box .box .cate_wrap .select input.ra01 + label{flex:initial;width: calc((100% - 30px) / 4);} .pop_st01 .pop_box .search_box{display: flex;align-items: center;justify-content: space-between;width: 100%; height: 40px;border-radius:8px; border:1px solid #333;padding: 0 20px;} .pop_st01 .pop_box .search_box input[type="text"]{width: calc(100% - 18px);font-size: 15px; color: #666; font-weight: 300; border:0; background: transparent;} .pop_st01 .pop_box .search_box input[type="text"]::placeholder{color: #666;} .pop_st01 .pop_box .search_box input[type="text"]:focus{outline:0;} .pop_st01 .pop_box .recent_wrap{display: flex;padding-top: 30px;} .pop_st01 .pop_box .recent_wrap h4{width: 90px;font-size: 15px; color: #fff;} .pop_st01 .pop_box .recent_wrap ul{width: calc(100% - 90px);} .pop_st01 .pop_box .recent_wrap ul li{display: flex;align-items: center;gap:10px;} .pop_st01 .pop_box .recent_wrap ul li:not(:last-child){margin-bottom: 10px;} .pop_st01 .pop_box .recent_wrap ul li a{font-size: 15px; color: #666; font-weight: 300;width: calc(100% - 94px);} .pop_st01 .pop_box .recent_wrap ul li .del_btn{display: flex;align-items: center;justify-content: center;width: 50px; height: 24px; font-size: 13px; color: #999; font-weight: 300; border-radius:8px; background: #333; } .pop_st01 .btn_wrap{display: flex;gap:10px; margin-top: 40px;} .pop_st01 .btn_wrap a{display: flex;align-items: center;justify-content: center;width: calc((100% - 10px) / 2);height: 40px;font-size: 15px; color: #333; font-weight: 500; border-radius:8px; background: var(--co01);} .pop_st01 .btn_wrap a.pop_x_btn{background: #fff;} .pop_st01 .pop_btn_flex{display: flex;justify-content: center;gap:10px; margin-top: 40px;} .pop_st01 a.p_pop_btn{display: flex;align-items: center;justify-content: center; width: 265px; height: 60px; border-radius:12px; background: var(--co01);font-size: 16px; color: #222; font-weight: 500;} .pop_st01 a.p_pop_x_btn{display: flex;align-items: center;justify-content: center; width: 265px; height: 60px; border-radius:12px; background: var(--co01);font-size: 16px; color: #222; font-weight: 500;} .pop_st01 a.p_pop_x_btn.wh, .pop_st01 a.p_pop_btn.wh{background: #fff;} /*sub0101_view*/ .sub0101_view_wrap{padding-bottom: 100px;line-height: 1;} .sub0101_view_wrap .top_con{display: flex;gap:80px;align-items: center;} .sub0101_view_wrap .top_con .img_box{position: relative;width: 520px;border-radius:20px;overflow: hidden; border:1px solid #333;} .sub0101_view_wrap .top_con .img_wrap{position:relative; width:100%; padding-bottom:57.69%;} .sub0101_view_wrap .top_con .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .sub0101_view_wrap .top_con .img_wrap::before{content:'';position: absolute;bottom: 0;left: 0;width: 100%; height: 100%;background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.5) 100%);z-index: 1;} .sub0101_view_wrap .top_con .img_wrap::after{content:'';position: absolute;top: 0;left: 0;width: 100%; height: 100%;background: rgba(0,0,0,.2);} .sub0101_view_wrap .top_con .img_box .top{position: absolute;display: flex;align-items: center;justify-content: space-between;z-index: 100;padding: 20px;width: 100%;pointer-events: none;} .sub0101_view_wrap .top_con .img_box .top .tag_wrap{display: flex;gap:5px;} .sub0101_view_wrap .top_con .img_box .top .tag_wrap em{display: flex;align-items: center;height: 30px;padding: 0 12px;font-size: 15px; color: #fff; font-weight: 500; border-radius:4px;} .sub0101_view_wrap .top_con .img_box .top .tag_wrap em.tag01{background: #fb7185;} .sub0101_view_wrap .top_con .img_box .top .tag_wrap em.tag02{background: #818cf8;} .sub0101_view_wrap .top_con .img_box .top .tag_wrap em.tag03{background: #c084fc;} .sub0101_view_wrap .top_con .img_box .top .tag_wrap em.tag04{background: #60a5fa;} .sub0101_view_wrap .top_con .img_box .top .tag_wrap em.tag05{background: #e5ba15;} .sub0101_view_wrap .top_con .img_box .top .tag_wrap em.tag06{background: #2bc9b5;} .sub0101_view_wrap .top_con .img_box .cat_wrap{position: absolute;left: 20px; bottom: 20px; display: flex;gap:5px;z-index: 2;} .sub0101_view_wrap .top_con .img_box .cat_wrap em{display: flex;align-items: center;height: 30px;font-size: 14px; color: #fff; font-weight: 500; border-radius:15px;background: rgba(0,0,0,.6);padding: 0 14px;} .sub0101_view_wrap .top_con .txt_box{width: calc(100% - 600px);} .sub0101_view_wrap .top_con .txt_box h4{font-size: 30px; line-height: 1.4; color: #fff; font-weight: 700;padding-bottom: 30px;margin-bottom: 30px;border-bottom: 1px solid #333;} .sub0101_view_wrap .top_con .txt_box ul li{display: flex;align-items: center;gap:20px;} .sub0101_view_wrap .top_con .txt_box ul li:not(:last-child){margin-bottom: 20px;} .sub0101_view_wrap .top_con .txt_box ul li .icon{display: flex;align-items: center;justify-content: center;width: 22px;} .sub0101_view_wrap .top_con .txt_box ul li p{width: calc(100% - 42px);font-size: 18px; color: #ddd;} .sub0101_view_wrap .con02{display: flex;gap:80px;margin-top: 60px;padding-top: 60px; border-top: 1px solid #333;} .sub0101_view_wrap .con02 .left{width: 260px;} .sub0101_view_wrap .con02 .prof_wrap{display: flex;align-items: center;justify-content: center;flex-direction: column;gap:30px;padding: 30px;border-radius:20px;} .sub0101_view_wrap .con02 .prof_wrap.level01{background: linear-gradient(90deg,rgba(240, 238, 233, 1) 0%, rgba(222, 214, 197, 1) 100%);} .sub0101_view_wrap .con02 .prof_wrap.level02{background: linear-gradient(90deg,rgba(204, 255, 1, 1) 0%, rgba(127, 255, 0, 1) 100%);} .sub0101_view_wrap .con02 .prof_wrap.level03{background: linear-gradient(90deg,rgba(204, 204, 255, 1) 35%, rgba(129, 140, 248, 1) 100%);} .sub0101_view_wrap .con02 .prof_wrap.level04{background: linear-gradient(90deg,rgba(136, 136, 137, 1) 0%, rgba(205, 205, 205, 1) 100%);} .sub0101_view_wrap .con02 .prof_wrap .prof_img{width: 70px; height: 70px; border-radius:50%; box-shadow: 0px 0px 8px rgba(0,0,0,.15); overflow: hidden;} .sub0101_view_wrap .con02 .prof_wrap .prof_img img{width: 100%; height: 100%; object-fit:cover;} .sub0101_view_wrap .con02 .prof_wrap .txt01 em{display: flex;justify-content: center;align-items: center;gap:10px; font-size: 18px; color: #818cf8; font-weight: 700;} .sub0101_view_wrap .con02 .prof_wrap .txt01 p{font-size: 20px; font-weight: 700;margin: 10px 0px 20px;text-align: center;color: #222; line-height: 1.3;} .sub0101_view_wrap .con02 .prof_wrap .txt01 strong{display: block;text-align: center;font-size: 16px; color: #222;} .sub0101_view_wrap .con02 .prof_wrap .txt01 strong b{color: #818cf8; font-weight: 700;} .sub0101_view_wrap .con02 .prof_wrap .txt02 p{font-size: 16px; line-height: 26px; color: #222;text-align: center;} .sub0101_view_wrap .con02 .right{width: calc(100% - 340px);} .sub0101_view_wrap .con02 .right .tab-menu-wrap{display: flex;gap:20px;margin-bottom: 60px;} .sub0101_view_wrap .con02 .right .tab-menu-wrap a{flex:1;display: flex;align-items: center;justify-content: center; height: 60px; border:1px solid #333;font-size: 18px; color: #666; font-weight: 500; border-radius:12px; background: #111;} .sub0101_view_wrap .con02 .right .tab-menu-wrap a.on{color: var(--co01); border:1px solid var(--co01);} .sub0101_view_wrap .con02 .right .tab-con{font-size: 18px; color: #fff; line-height: 1.6;} .sub0101_view_wrap .con02 .right .tab-con .box:not(:last-child){margin-bottom: 60px;} .sub0101_view_wrap .con02 .right .tab-con .box .edit_wrap{padding: 30px;background: #111; border-radius:12px; min-height: 240px;} .sub0101_view_wrap .fix_con{position: fixed; left: 0;bottom: 0;width: 100%;padding: 20px 0; background: #111;z-index: 100;} .sub0101_view_wrap .fix_con.rel{position: absolute;bottom: 397px;} .sub0101_view_wrap .fix_con .inner{display: flex;gap:20px;} .sub0101_view_wrap .fix_con .txt{display: flex;align-items: center;justify-content: center; width: 260px; height: 60px; background: #333; border-radius:12px;} .sub0101_view_wrap .fix_con .txt p{font-size: 18px; color: #fff;font-weight: 500;} .sub0101_view_wrap .fix_con .txt p b{color: var(--co01); font-weight: 700;} .sub0101_view_wrap .fix_con a.btn01{display: flex;align-items: center;justify-content: center;width: calc(100% - 420px); background: var(--co01);font-size: 18px; color: #222; font-weight: 500; border-radius:12px;} .sub0101_view_wrap .fix_con .btn_wrap{display: flex;gap:10px;} .sub0101_view_wrap .fix_con .btn_wrap a{display: flex;align-items: center;justify-content: center;width: 60px; height: 60px; border:1px solid #333; border-radius:12px;} .sub0101_view_wrap .fix_con .btn_wrap a.wish span{position: relative;width: 23px; height: 20px;pointer-events: auto;} .sub0101_view_wrap .fix_con .btn_wrap a.wish img{position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%);transition:.3s;} .sub0101_view_wrap .fix_con .btn_wrap a.wish img.on{opacity: 0;} .sub0101_view_wrap .fix_con .btn_wrap a.wish.on img.off{opacity: 0;} .sub0101_view_wrap .fix_con .btn_wrap a.wish.on img.on{opacity: 1;} /* 회원가입 */ .join01_wrap{display: flex;justify-content: center;gap:20px;line-height: 1;} .join01_wrap a{display: flex;align-items: center;justify-content: flex-end;flex-direction: column;padding-bottom: 50px;width: 290px; height: 364px; background: #111; border:1px solid #333; border-radius:12px;transition:.3s;} .join01_wrap a p{font-size: 18px; line-height: 28px; color: #fff; font-weight: 500;text-align: center; margin-top: 50px;} .join01_wrap a p strong{color: var(--co01);} .join01_wrap a:hover{box-shadow:0px 0px 10px rgba(127,255,0,.6); border:1px solid var(--co01);} .join02_wrap{width: 600px;margin: 0 auto; max-width: 100%;} .join02_wrap .con:not(:last-child){margin-bottom: 60px;} .join02_wrap .con .tit{margin-bottom: 25px;} .join02_wrap .con .tit p{font-size: 26px; color: #fff; font-weight: 700;} .join02_wrap .con .tit span{font-size: 18px; color: #666;font-weight: 400;vertical-align: middle;} .join02_wrap .con .flex_wrap{display: flex;align-items: center;} .join02_wrap .con .flex_wrap:not(:last-child){margin-bottom: 10px;} .join02_wrap .con .flex_wrap strong{display: block; width: 100px;font-size: 18px; color: #fff;font-weight: 700;} .join02_wrap .con .flex_wrap strong b{display: inline-block;margin-left: 5px;color: var(--co01); font-weight: 700; } .join02_wrap .con .flex_wrap .input_wrap{display: flex;align-items: center;gap:10px;width: calc(100% - 80px);} .join02_wrap .con .flex_wrap .input_wrap em{font-size: 18px; color: #666;} .join02_wrap .con .input{display: flex;align-items: center; width: 100%; height: 60px;padding: 0 20px; background: #111; border:1px solid #333; border-radius:12px; position: relative;} .join02_wrap .con .input .icon{width: 40px;} .join02_wrap .con input[type="text"], .join02_wrap .con input[type="password"]{width: calc(100% - 40px);font-size: 18px; color: #666; border:0; background: transparent !important;} .join02_wrap .con input[type="text"]:focus, .join02_wrap .con input[type="password"]:focus{outline:0;} .join02_wrap .con a.v_btn{display: flex;align-items: center;justify-content: center;width: 100%; height: 60px; background: #fff; border-radius:12px;font-size: 18px; color: #222; font-weight: 500;} /* 자동완성스타일커스텀 */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { font-size: 18px !important; -webkit-text-fill-color: #666; -webkit-box-shadow: 0 0 0px 1000px transparent inset; box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s;} input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active { font-size: 18px !important; -webkit-text-fill-color: #666; -webkit-box-shadow: 0 0 0px 1000px transparent inset; box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s;} .join02_wrap .con01 .input{margin-bottom: 30px;padding: 0px 30px;} .join02_wrap .con02 .ra_wrap{display: flex; gap:20px; margin-bottom: 30px;} .join02_wrap .con02 .ra_wrap input[type="radio"]{display: none;} .join02_wrap .con02 .ra_wrap input[type="radio"] + label{display: flex;align-items: center;justify-content: center;flex:1; height: 60px; border-radius:12px; background: #111; border:1px solid #333 ;font-size: 18px; color: #666; cursor:pointer;} .join02_wrap .con02 .ra_wrap input[type="radio"]:checked + label{color: var(--co01);box-shadow:0px 0px 10px rgba(127,255,0,.6); border:1px solid var(--co01);} .join02_wrap .con02 .input:not(:first-child){margin-top: 10px;} .join02_wrap .con02 .addr{display: flex;gap:10px;} .join02_wrap .con02 .addr a{display: flex;align-items: center;justify-content: center;width: 130px;height: 60px; background: #333; border-radius:12px; font-size: 18px; color: #fff;} .join02_wrap .con02 .addr .input{width: calc(100% - 140px);} .join02_wrap .con03 .box{display: flex;gap:10px;} .join02_wrap .con03 .box .input{width: calc(100% - 140px);} .join02_wrap .con03 .box a{display: flex;align-items: center;justify-content: center; width: 130px; height: 60px;background: #333; border-radius:12px; font-size: 18px; color: #fff;} .join02_wrap .con03 .bot_txt{margin-top: 20px;} .join02_wrap .con03 .bot_txt p{font-size: 16px; color: #666;line-height: 28px;} .join02_wrap .con03 .bot_txt p strong{font-size: 18px; color: var(--co01);} .join02_wrap .con04 .agree_wrap input[type="checkbox"]{display: none;} .join02_wrap .con04 .agree_wrap input[type="checkbox"] + label{position: relative;font-size: 18px; color: #fff;padding-left: 25px;font-weight: 700;} .join02_wrap .con04 .agree_wrap input[type="checkbox"] + label::after{content:'';position: absolute;left: 0;top: 52%; transform:translateY(-50%); width: 16px; height: 16px; border:1px solid #fff; border-radius:4px;} .join02_wrap .con04 .agree_wrap input[type="checkbox"]:checked + label::after{content:'✓';text-align: center; color: var(--co01);line-height: 14px;border:1px solid var(--co01);font-size: 12px;} .join02_wrap .con04 .agree_wrap .all_wrap{padding: 30px 20px;margin-bottom: 2px;background: #333; border-radius:12px;} .join02_wrap .con04 .agree_wrap .chk_wrap{padding: 30px;background: #333; border-radius:12px;} .join02_wrap .con04 .agree_wrap .chk_wrap .chk{display: flex;align-items: center;justify-content: space-between;} .join02_wrap .con04 .agree_wrap .chk_wrap .chk:not(:last-child){margin-bottom: 30px;} .join02_wrap .con04 .agree_wrap .chk_wrap input[type="checkbox"] + label{font-size: 16px;} .join02_wrap .con04 .agree_wrap .chk_wrap input[type="checkbox"] + label span{color: #999;font-weight: 400;} .join02_wrap .con04 .agree_wrap .chk_wrap .chk img{display: block;} .join02_wrap .con04 a.join_btn{display: flex;align-items: center;justify-content: center;height: 60px; background: var(--co01); border-radius:12px;font-size: 18px; color: #222; font-weight: 500; margin-top: 30px;} /* 로그인 */ .login_wrap .top{margin-bottom: 30px;} .login_wrap .top img{display: block; margin: 0 auto 35px;} .login_wrap .top p{font-size: 25px; color: #fff; font-weight: 700;text-align: center;} .login_wrap .con01 .input:first-child{margin-bottom: 30px;} .login_wrap .con01 .input{margin-bottom: 0;} .login_wrap .con01 .btn_wrap{display: flex;align-items: center;justify-content: space-between; margin-top: 20px;} .login_wrap .con01 .btn_wrap .left{display: flex;align-items: center;gap:20px;} .login_wrap .con01 .btn_wrap .left input[type="checkbox"]{display: none;} .login_wrap .con01 .btn_wrap .left input[type="checkbox"] + label{position: relative;font-size: 16px; color: #666;padding-left: 25px;font-weight: 700;} .login_wrap .con01 .btn_wrap .left input[type="checkbox"] + label::after{content:'';position: absolute;left: 0;top: 52%; transform:translateY(-50%); width: 16px; height: 16px; border:1px solid #333; border-radius:3px; background: #111;} .login_wrap .con01 .btn_wrap .left input[type="checkbox"]:checked + label::after{content:'✓';text-align: center; color: var(--co01);line-height: 14px;border:1px solid var(--co01);font-size: 12px;} .login_wrap .con01 .btn_wrap .right{display: flex;gap:22px;} .login_wrap .con01 .btn_wrap .right a{position: relative;font-size: 16px; color: #666;} .login_wrap .con01 .btn_wrap .right a:not(:last-child)::after{content:'|';position: absolute;top: 50%;right: -13px;transform:translateY(-50%);} .login_wrap .con a.btn01{display: flex;align-items: center;justify-content: center; height: 60px; background: var(--co01); border-radius:12px;font-size: 18px; color: #333; font-weight: 500; margin-top: 30px;} .login_wrap .con a.join_btn{background: #fff;} .join_pop_wrap .tit{margin-bottom: 40px;text-align: center;} .join_pop_wrap .tit p{font-size: 20px; color: #fff; line-height: 32px;font-weight: 700;} .join_pop_wrap .tit span{display: block;font-size: 16px; line-height: 26px;color: #666; line-height: 26px; margin-top: 15px;} .join_pop_wrap .box_wrap .box{display: flex;justify-content: space-between;align-items: center;} .join_pop_wrap .box_wrap .box:not(:last-child){margin-bottom: 25px;} .join_pop_wrap .box_wrap .box .txt p{font-size: 16px; color: #fff; font-weight: 700;} .join_pop_wrap .box_wrap .box .txt ul{margin-top: 10px;} .join_pop_wrap .box_wrap .box .txt ul li{position: relative;font-size: 16px; color: #666; line-height: 1.4;padding-left: 12px ;} .join_pop_wrap .box_wrap .box .txt ul li::after{content:'-';position: absolute;left: 0;top: 0;} .join_pop_wrap .box_wrap .box em{display: block;background: url(/assets/images/sub/login_icon02.png)center no-repeat; width: 58px; height: 48px;} .join_pop_wrap .box_wrap .box:hover em{background: url(/assets/images/sub/login_icon01.png)center no-repeat; } .join_pop_wrap .bot_txt{margin-top: 40px;} .join_pop_wrap .bot_txt p{font-size: 16px; color: #666; line-height: 26px;text-align: center;} .join_pop_wrap .bot_txt p strong{color: #fff; font-weight: 700;} .join_pop_wrap a{display: flex;align-items: center;justify-content: center; width: 300px; height: 60px; border-radius:12px; background: var(--co01);font-size: 16px; color: #222; font-weight: 500;margin: 40px auto 0;} /* 패널티 */ .penalty_wrap{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 100px 0; line-height: 1;min-height: 100vh;background: #000;} .penalty_wrap .icon{display: block; width: fit-content;margin: 0 auto 30px;} .penalty_wrap .txt p{font-size: 26px;font-weight: 600; color: #fff; line-height: 40px;text-align: center;} .penalty_wrap .txt p strong{color: #df5153 ;font-weight: 600; } .penalty_pop .pop_box{display: flex;align-items: center;justify-content: center;flex-direction: column;gap:30px;} .penalty_pop .pop_box .txt{text-align: center;} .penalty_pop .pop_box .txt p{font-size: 18px; color: #fff; font-weight: 600; line-height: 28px;} .penalty_pop .pop_box .txt p strong{color: var(--co01);font-weight: 600;} .penalty_pop .pop_box .txt span{display: block;font-size: 16px; color: #666; line-height: 1.4; margin-top: 20px;} /*sub0301*/ .sub0301_wrap{position: relative;line-height: 1;} .sub0301_wrap .con{position: relative;position: relative;} .sub0301_wrap .con:not(:last-child){margin-bottom: 100px;} .sub0301_wrap .bg01{position: absolute;top: -200px;z-index: -1;pointer-events: none;} .sub0301_wrap .bg02{position: absolute;bottom: -300px;right: 0;z-index: -1;pointer-events: none;} .sub0301_wrap .con01 .txt_wrap{margin: 50px 0;text-align: center;} .sub0301_wrap .con01 .txt_wrap p{font-size: 50px; font-weight: 600; color: #fff;} .sub0301_wrap .con01 .txt_wrap p strong{color: var(--co01);font-weight: 600;} .sub0301_wrap .con01 .txt_wrap span{display: block; font-size: 18px; color: #666; line-height: 28px; margin-top: 20px;font-weight: 600;} .sub0301_wrap .con01 .txt_wrap span strong{color: #fff;font-weight: 600;} .sub0301_wrap .con02 .box_wrap{display: flex;justify-content: space-around;} .sub0301_wrap .con02 .box_wrap .box{display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;} .sub0301_wrap .con02 .box_wrap .box .icon{height: 70px;} .sub0301_wrap .con02 .box_wrap .box p{font-size: 26px; font-weight: 700;} .sub0301_wrap .con02 .box_wrap .box span{display: block;font-size: 18px; color: #666; margin-top: 10px;} .sub0301_wrap .con02 .box_wrap .box01 p{color: #60a5fa;} .sub0301_wrap .con02 .box_wrap .box02 p{color: #c084fc;} .sub0301_wrap .con02 .box_wrap .box03 p{color: #e36baa;} .sub0301_wrap .con02 .box_wrap .box04 p{color: #e5ba15;} .sub0301_wrap .con03 .box_wrap{display: flex;gap:40px;} .sub0301_wrap .con03 .box_wrap .box{width: calc((100% - 80px) / 3); padding: 30px; border:1px solid #333; border-radius:12px; background: #111;} .sub0301_wrap .con03 .box_wrap .box .top{display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 30px;} .sub0301_wrap .con03 .box_wrap .box .top p{font-size: 16px; color: #666;} .sub0301_wrap .con03 .box_wrap .box .top p strong{font-weight: 700;} .sub0301_wrap .con03 .box_wrap .box01 .top p strong{color: #818cf8;} .sub0301_wrap .con03 .box_wrap .box02 .top p strong{color: #fb7185;} .sub0301_wrap .con03 .box_wrap .box03 .top p strong{color: #2bc9b5;} .sub0301_wrap .con03 .box_wrap .box .bot p{font-size: 20px; color: #fff; font-weight: 700;} .sub0301_wrap .con03 .box_wrap .box .bot span{display: block;font-size: 15px; color: #666; line-height: 26px; margin-top: 15px;} .sub0301_wrap .con04 .box_wrap{display: flex;gap:40px;} .sub0301_wrap .con04 .box_wrap .box{width: calc((100% - 80px) / 3); padding: 30px 30px 20px; box-shadow:0px 0px 10px rgba(127,255,0,.6);border-radius:12px; background: #111;} .sub0301_wrap .con04 .box_wrap .box .top{display: flex;align-items: center;justify-content: center;flex-direction: column;gap:25px; margin-bottom: 20px;padding-bottom: 25px; border-bottom: 1px solid #333;} .sub0301_wrap .con04 .box_wrap .box .top p{font-size: 16px; height: 52px; color: #666; line-height: 26px;text-align: center;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;} .sub0301_wrap .con04 .box_wrap .box .bot{display: flex;align-items: center;justify-content: space-between;} .sub0301_wrap .con04 .box_wrap .box .bot .left{display: flex;align-items: center;gap:20px;} .sub0301_wrap .con04 .box_wrap .box .bot .left .icon{width: 50px; height: 50px; border-radius:50%; overflow: hidden;} .sub0301_wrap .con04 .box_wrap .box .bot .left .icon img{width: 100%; height: 100%;object-fit:cover;} .sub0301_wrap .con04 .box_wrap .box .bot .left p{font-size: 18px; color: #fff; font-weight: 500;} .sub0301_wrap .con04 .box_wrap .box .bot .left span{display: block;font-size: 13px; color: #666; margin-top: 12px;} .sub0301_wrap .con04 .box_wrap .box .bot .right em{display: flex;align-items: center;justify-content: center;height: 22px; padding: 0 10px;background: rgba(127,255,0,.6); border-radius:11px;font-size: 13px; color: #fff;font-weight: 500;} .sub0301_wrap .con05 .box_wrap{position: relative;display: flex;z-index: 10;} .sub0301_wrap .con05 .box_wrap::after{content:'';position: absolute;top: 75px;left: 0;width: 100%;height: 1px; background: #333;z-index: -1;} .sub0301_wrap .con05 .box_wrap .box{position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;flex:1;} .sub0301_wrap .con05 .box_wrap .box em{font-size: 16px; font-weight: 700;text-transform:uppercase;} .sub0301_wrap .con05 .box_wrap .box .icon{margin: 30px 0;} .sub0301_wrap .con05 .box_wrap .box .txt p{font-size: 18px; color: #fff; font-weight: 700;} .sub0301_wrap .con05 .box_wrap .box .txt span{display: block;font-size: 16px; color: #666; line-height: 26px; margin-top: 15px;} .sub0301_wrap .con05 .box_wrap .box strong{display: flex;align-items: center;justify-content: center;height: 40px;padding: 0px 20px;margin: 15px auto 0;font-size: 16px; background: #111; border-radius:20px;} .sub0301_wrap .con05 .box_wrap .box01::after{content:'';position: absolute;top: 58px;right: -18px; background: url(/assets/images/sub/sub0301_arr01.png)center no-repeat; width: 37px; height: 34px; background-size: cover;} .sub0301_wrap .con05 .box_wrap .box02::after{content:'';position: absolute;top: 58px;right: -18px; background: url(/assets/images/sub/sub0301_arr02.png)center no-repeat; width: 37px; height: 34px; background-size: cover;} .sub0301_wrap .con05 .box_wrap .box01 em{color:#2bc9b5;} .sub0301_wrap .con05 .box_wrap .box02 em{color:#60a5fa;} .sub0301_wrap .con05 .box_wrap .box03 em{color:#e36baa;} .sub0301_wrap .con05 .box_wrap .box01 strong{color:#2bc9b5;box-shadow:0px 0px 10px rgba(43,201,181,.6);} .sub0301_wrap .con05 .box_wrap .box02 strong{color:#60a5fa;box-shadow:0px 0px 10px rgba(96,165,250,.6);} .sub0301_wrap .con05 .box_wrap .box03 strong{color:#e36baa;box-shadow:0px 0px 10px rgba(227,107,170,.6);} .sub0301_wrap .con06 .box_wrap{display: flex;flex-wrap:wrap;gap:20px;} .sub0301_wrap .con06 .box_wrap .box{width: calc((100% - 60px) / 4);padding: 20px 30px 30px;border:1px solid #333; background: #111; border-radius:20px;text-align: center;transition:.3s;} .sub0301_wrap .con06 .box_wrap .box .top{display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 30px; padding-bottom: 30px;border-bottom: 1px solid #333;} .sub0301_wrap .con06 .box_wrap .box .top .tit{margin: 10px 0px 20px;} .sub0301_wrap .con06 .box_wrap .box .top .tit p{font-size: 20px; color: #fff;font-weight: 700;} .sub0301_wrap .con06 .box_wrap .box .top .tit span{display: block;font-size: 16px; margin-top: 10px;font-weight: 700;} .sub0301_wrap .con06 .box_wrap .box .top strong{display: block;font-size: 16px; color: #666; font-weight: 400;} .sub0301_wrap .con06 .box_wrap .box .bot p{font-size: 16px;} .sub0301_wrap .con06 .box_wrap .box .bot p b{font-weight: 700;} .sub0301_wrap .con06 .box_wrap .box .co01{color: var(--co01);} .sub0301_wrap .con06 .box_wrap .box .co02{color: #60a5fa;} .sub0301_wrap .con06 .box_wrap .box .co03{color: #c084fc;} .sub0301_wrap .con06 .box_wrap .box .co04{color: #e36baa;} .sub0301_wrap .con06 .box_wrap .box .co05{color: #e5ba15;} .sub0301_wrap .con06 .box_wrap .box .co06{color: #818cf8;} .sub0301_wrap .con06 .box_wrap .box .co07{color: #fb7185;} .sub0301_wrap .con06 .box_wrap .box .co08{color: #2bc9b5;} .sub0301_wrap .con06 .box_wrap .box01:hover{box-shadow:0px 0px 10px rgba(127,255,0,.6);} .sub0301_wrap .con06 .box_wrap .box02:hover{box-shadow:0px 0px 10px rgba(96,165,250,.6);} .sub0301_wrap .con06 .box_wrap .box03:hover{box-shadow:0px 0px 10px rgba(192,132,252,.6);} .sub0301_wrap .con06 .box_wrap .box04:hover{box-shadow:0px 0px 10px rgba(227,107,170,.6);} .sub0301_wrap .con06 .box_wrap .box05:hover{box-shadow:0px 0px 10px rgba(229,186,21,.6);} .sub0301_wrap .con06 .box_wrap .box06:hover{box-shadow:0px 0px 10px rgba(129,140,248,.6);} .sub0301_wrap .con06 .box_wrap .box07:hover{box-shadow:0px 0px 10px rgba(251,113,133,.6);} .sub0301_wrap .con06 .box_wrap .box08:hover{box-shadow:0px 0px 10px rgba(43,201,181,.6);} .sub0301_wrap .con06 a.btn01{display: flex;align-items: center;justify-content: center;margin: 50px auto 0; width: 240px;height: 60px;border:1px solid var(--co01); border-radius:12px;font-size: 18px; color: var(--co01);font-weight: 500; background: #111;transition:.3s;} .sub0301_wrap .con06 a.btn01:hover{box-shadow:0px 0px 10px rgba(127,255,0,.6);} .sub0301_wrap .con07 .box_wrap{display: flex;} .sub0301_wrap .con07 .box_wrap .box{position: relative; flex:1;display: flex;align-items: center;justify-content: center;flex-direction: column;gap:25px;padding: 30px 0 50px;} .sub0301_wrap .con07 .box_wrap .box:not(:last-child)::after{content:'';position: absolute;top: 0; right: 0; width: 1px; height: 100%; background: #333;} .sub0301_wrap .con07 .box_wrap .box p{font-size: 50px; color: #818cf8; font-weight: 700;font-weight: 700;} .sub0301_wrap .con07 .box_wrap .box span{font-size: 18px; color: #666;} .sub0301_wrap .con08 .box_wrap{position: relative;} .sub0301_wrap .con08 .box_wrap::after{content:'';position: absolute;top: 0; left: 0;width: 100%;height: 1px;box-shadow: 0px 0px 15px 2px rgba(127, 255, 0, .6); background: var(--co01);} .sub0301_wrap .con08 .box_wrap .box{display: flex;align-items: center;padding: 50px 0;border-bottom: 1px solid #333;} .sub0301_wrap .con08 .box_wrap .box a{display: flex;align-items: center;} .sub0301_wrap .con08 .box_wrap .box .tit{position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;width: 440px;} .sub0301_wrap .con08 .box_wrap .box .tit::after{content:'';position: absolute;top: 50%;right: 0;transform:translateY(-50%);width: 1px; height: 40px; background: #333;} .sub0301_wrap .con08 .box_wrap .box .tit p{font-size: 26px; color: #fff;font-weight: 600;} .sub0301_wrap .con08 .box_wrap .box .tit strong{display: block;font-size: 20px;margin-top: 20px;color: #fff;} .sub0301_wrap .con08 .box_wrap .box .tit strong em{font-size: 16px;font-weight: 600;margin: 0px 10px;} .sub0301_wrap .con08 .box_wrap .box .tit strong b{color: var(--co01);font-weight: 600;} .sub0301_wrap .con08 .box_wrap .box .txt{width: calc(100% - 440px);padding: 0px 40px;} .sub0301_wrap .con08 .box_wrap .box .txt p{font-size: 16px;color: #666;line-height: 26px;} .sub0301_wrap .con09 .box_wrap{display: flex;align-items: center;justify-content: center;flex-direction: column;height: 540px;background: url(/assets/images/sub/sub0301_bg01.png)center no-repeat; background-size: cover; border-radius:30px;} .sub0301_wrap .con09 .box_wrap .sub_tit01{margin-bottom: 25px;margin-top: 30px;} .sub0301_wrap .con09 .box_wrap .sub_tit01 span{font-size: 16px; line-height: 26px;} /* sub0301_2 */ .sub0301_2_wrap{line-height: 1;} .sub0301_2_wrap .con:not(:last-child){margin-bottom: 100px;} .sub0301_2_wrap .con01{padding: 60px 0;background: url(/assets/images/sub/maker_bg01.png)center no-repeat #111; height: 600px;} .sub0301_2_wrap .con01 .img{width: fit-content; margin: 40px auto;} .sub0301_2_wrap .con01 .txt{text-align: center;} .sub0301_2_wrap .con01 .txt p{font-size: 18px; color: #fff; font-weight: 500;} .sub0301_2_wrap .con01 .txt p strong{color: var(--co01);} .sub0301_2_wrap .con01 .txt span{display: block;font-size: 16px; color: #fff;font-weight: 500; margin-top: 15px; line-height: 26px;} .sub0301_2_wrap .con02 .box_wrap{display: flex;flex-wrap:wrap;gap:40px;} .sub0301_2_wrap .con02 .box_wrap .box{display: flex;align-items: center;justify-content: center;flex-direction: column;width: calc((100% - 80px) / 3);padding: 30px 30px 35px;box-shadow:0px 0px 10px rgba(129,140,248,.6); border-radius:12px;text-align: center;} .sub0301_2_wrap .con02 .box_wrap .box em{position: relative;display: block;padding-bottom: 20px;margin-bottom: 30px;font-size: 18px; color: #818cf8; font-weight: 700;} .sub0301_2_wrap .con02 .box_wrap .box em::after{content:'';position: absolute;bottom: 0;left: 50%;transform:translateX(-50%);width: 20px; height: 2px; background: #818cf8;} .sub0301_2_wrap .con02 .box_wrap .box p{font-size: 20px;color: #fff; font-weight: 700;} .sub0301_2_wrap .con02 .box_wrap .box span{display: block;font-size: 16px; color: #666; line-height: 26px; margin-top: 12px;} .sub0301_2_wrap .con03 .box_wrap{display: flex;flex-wrap:wrap;justify-content: center;gap:10px 12px;} .sub0301_2_wrap .con03 .box_wrap .box{display: flex;align-items: center;justify-content: center;width: calc((100% - 36px) / 4); height: 60px; border:1px solid #333; background: #111; border-radius:30px;} .sub0301_2_wrap .con03 .box_wrap .box p{font-size: 16px; color: #e5ba15;} .sub0301_2_wrap .con04 .box_wrap .box p{color: #2bc9b5;} .sub0301_2_wrap .con05 .txt_wrap{width: 100%;} .sub0301_2_wrap .con05 .txt_wrap .sub_tit01{/* padding-bottom: 20px; margin-bottom: 15px;border-bottom: 1px solid #333; */} .sub0301_2_wrap .con05 .txt_wrap .txt{margin-bottom: 40px;text-align: center;} .sub0301_2_wrap .con05 .txt_wrap .txt p{font-size: 17px; color: #fff; line-height: 28px;} .sub0301_2_wrap .con05 .txt_wrap .item strong{display: flex;align-items: center;justify-content: center; height: 40px; padding: 0px 20px; font-size: 16px; color: var(--co01); background: #111; border-radius:20px;width: fit-content;box-shadow:0px 0px 10px rgba(127,255,0,.6); border:1px solid var(--co01); margin: 0 auto 25px;} .sub0301_2_wrap .con05 .txt_wrap .item p{font-size: 16px; color: #666; line-height: 26px;text-align: center;} .sub0301_2_wrap .con06 .box_wrap{display: flex;align-items: center;justify-content: center;flex-direction: column;height: 540px;background: url(/assets/images/sub/sub0301_bg01.png)center no-repeat; background-size: cover; border-radius:30px;} .sub0301_2_wrap .con06 .box_wrap .sub_tit01{margin-bottom: 25px;margin-top: 30px;} .sub0301_2_wrap .con06 .box_wrap .sub_tit01 span{font-size: 16px; line-height: 26px;} /* faq */ .faq_wrap{line-height: 1;} .faq_wrap .faq_box_wrap{position: relative;} .faq_wrap .faq_box_wrap::after{content:'';position: absolute;top: 0; left: 0;width: 100%;height: 1px;box-shadow: 0px 0px 15px 2px rgba(127, 255, 0, .6); background: var(--co01);} .faq_wrap .faq_box_wrap .box{border-bottom: 1px solid #333;} .faq_wrap .faq_box_wrap .box .f_box{display: flex;cursor:pointer;} .faq_wrap .faq_box_wrap .box .f_box .cate{display: flex;align-items: center;justify-content: center;width: 220px;padding: 40px 0;} .faq_wrap .faq_box_wrap .box .f_box .cate p{font-size: 18px; color: #fff;font-weight: 700;} .faq_wrap .faq_box_wrap .box .f_box .txt{position: relative;display: flex;width: calc(100% - 220px);padding: 40px 80px 40px 30px;} .faq_wrap .faq_box_wrap .box .f_box .txt em{display: block;width: 40px;font-size: 26px; color: var(--co01);font-weight: 700;} .faq_wrap .faq_box_wrap .box .f_box .txt p{width: calc(100% - 40px);font-size: 18px; color: #fff;line-height: 1.5;} .faq_wrap .faq_box_wrap .box .f_box .txt .arr{position: absolute;top: 50%;transform:translateY(-50%); right: 30px;transition:.3s;} .faq_wrap .faq_box_wrap .box .f_box .txt .arr img{display: block;} .faq_wrap .faq_box_wrap .box .f_box .txt.on .arr{transform:rotate(180deg);} .faq_wrap .faq_box_wrap .box .a_box{display: none;padding: 35px 40px;background: #333;font-size: 18px; color: #fff; line-height: 1.6;} /* sub0401 */ .sub0401_wrap .none_box{display: flex;align-items: center;justify-content: center;flex-direction: column;gap:25px;text-align: center;margin-top: 100px;} .sub0401_wrap .none_box img{display: block;margin-bottom : 15px;} .sub0401_wrap .none_box p{font-size: 26px; color: #fff;font-weight: 700;} .sub0401_wrap .none_box span{display: block;font-size: 16px; color: #666; line-height: 26px;} /*sub0402*/ .sub0402_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box{position: relative;padding: 20px 20px 90px 20px;} .sub0402_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box .stat{position: absolute;bottom: 10px;left: 50%;transform:translateX(-50%);display: flex;align-items: center; justify-content: center;width: calc(100% - 20px); height: 60px; border-radius:12px;} .sub0402_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box .stat p{font-size: 16px; color: #fff; font-weight: 600;} .sub0402_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box .stat.rejected{background: rgba(51,51,51,.5);} .sub0402_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box .stat.rejected p{color: #999;} .sub0402_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box .stat.approved{background: rgba(127,255,0,.5);} .sub0402_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box .stat.pending{background: rgba(96,165,250,.5);} .sub0402_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box ul{margin-top: 10px;} /*sub0403*/ .sub0403_wrap .slide_wrap_st01 ul.slide01 li.list .txt_box{padding: 20px 20px 160px 20px;} .sub0403_wrap .slide_wrap_st01 ul.slide01 li.list .a_wrap{position: absolute;bottom: 10px;left: 50%;transform:translateX(-50%);width: calc(100% - 20px); z-index: 100;} .sub0403_wrap .slide_wrap_st01 ul.slide01 li.list .a_wrap a{display: flex;align-items: center; justify-content: center;width: 100%;height: 60px; border-radius:12px;font-size: 16px; color: #fff; font-weight: 600;} .sub0403_wrap .slide_wrap_st01 ul.slide01 li.list .a_wrap a:not(:last-child){margin-bottom: 10px;} .sub0403_wrap .slide_wrap_st01 ul.slide01 li.list .a_wrap a.btn01{background: rgba(129,140,248,.5);} .sub0403_wrap .slide_wrap_st01 ul.slide01 li.list .a_wrap a.btn03{background: rgba(251,113,133,.5);} .sub0403_wrap .slide_wrap_st01 ul.slide01 li.list .a_wrap a.done{background: rgba(51,51,51,.5);pointer-events: none;color: #999;} /* mypage 공통*/ .mypage_wrap{width: 1000px;max-width: 100%;margin: 0 auto; line-height: 1;} .mypage_contop .contop{margin-bottom: 40px;} .mypage_contop .profile_wrap .tit{display: flex;align-items: center;justify-content: space-between; margin-bottom: 20px;} .mypage_contop .profile_wrap .tit p{font-size: 26px; color: #fff; font-weight: 700;} .mypage_contop .profile_wrap .tit a{display: flex;align-items: center;justify-content: center;width: 120px; height: 40px; background: #fff; border-radius:8px;font-size: 15px; color: #333; font-weight: 500;} .mypage_contop .profile_wrap .con_box{display: flex;gap:40px;padding: 40px;background: #111;border:1px solid #333; border-radius:12px;} .mypage_contop .profile_wrap .con_box .img_box{width: 180px; height: 180px; border:1px solid #333; border-radius:50%;overflow: hidden;} .mypage_contop .profile_wrap .con_box .img_box img{display: block; width: 100%; height: 100%; object-fit:cover;} .mypage_contop .profile_wrap .con_box .txt_box{width: calc(100% - 220px);} .mypage_contop .profile_wrap .con_box .txt_box .top{display: flex;align-items: center;justify-content: space-between;margin-bottom: 25px;} .mypage_contop .profile_wrap .con_box .txt_box .top .badge_wrap{display: flex;gap:10px; flex-wrap:wrap;width: calc(100% - 130px);} .mypage_contop .profile_wrap .con_box .txt_box .top .badge_wrap em{display: flex;align-items: center; padding: 0px 20px; height: 24px; font-size: 14px; color: #fff; border:1px solid #333; background: #111; border-radius:8px;} .mypage_contop .profile_wrap .con_box .txt_box .top .a_wrap{display: flex;gap:30px;} .mypage_contop .profile_wrap .con_box .txt_box .top .a_wrap a{position: relative;font-size: 14px; color: #999;} .mypage_contop .profile_wrap .con_box .txt_box .top .a_wrap a:not(:last-child)::after{content:'|';position: absolute;right: -16px; top: 0;color: #333;} .mypage_contop .profile_wrap .con_box .txt_box .name_wrap{display: flex;gap:20px;align-items: flex-end;} .mypage_contop .profile_wrap .con_box .txt_box .name_wrap strong{display: block;font-size: 20px; color: #fff ;font-weight: 700;} .mypage_contop .profile_wrap .con_box .txt_box .name_wrap span{display: block;font-size: 14px; color: #999;} .mypage_contop .profile_wrap .con_box .txt_box .level_wrap{display: flex;align-items: center;justify-content: space-between; margin-top: 15px;} .mypage_contop .profile_wrap .con_box .txt_box .level_wrap p{display: flex;gap:20px;align-items: flex-end;} .mypage_contop .profile_wrap .con_box .txt_box .level_wrap strong{font-size: 30px; color: #818cf8; font-weight: 700;} .mypage_contop .profile_wrap .con_box .txt_box .level_wrap span{display: flex;align-items: center;padding: 0px 13px;height: 22px;font-size: 14px; color: #fff; background: #818cf8; border-radius:11px;} .mypage_contop .profile_wrap .con_box .txt_box .level_wrap span b{display: inline-block;font-weight: 700;margin: 0px 4px;} .mypage_contop .profile_wrap .con_box .txt_box .level_wrap a{display: flex;align-items: center;gap:4px;font-size: 13px; color: #999;font-weight: 500;} .mypage_contop .profile_wrap .con_box .txt_box ul.detail_wrap{margin-top: 30px;} .mypage_contop .profile_wrap .con_box .txt_box ul.detail_wrap li{display: flex;} .mypage_contop .profile_wrap .con_box .txt_box ul.detail_wrap li:not(:last-child){margin-bottom: 6px;} .mypage_contop .profile_wrap .con_box .txt_box ul.detail_wrap li p{width: 80px; font-size: 14px; color: #999; line-height: 1.5;} .mypage_contop .profile_wrap .con_box .txt_box ul.detail_wrap li span{font-size: 14px; color: #ddd; font-weight: 500; line-height: 1.5;} .mypage_wrap .con:not(:last-child){margin-bottom: 100px;} /* 그래프 */ .mypage_wrap .graph_box{position: relative; display: flex;align-items: center;justify-content: center; flex-direction: column;background: #111; border:1px solid #333; border-radius:12px;padding: 20px;} .mypage_wrap .graph_box .chart_wrap{width: 500px; height: 360px;} .mypage_wrap .graph_box em{display: block;font-size: 14px; color: var(--co01); font-weight: 700;margin-left: auto;} .mypage_wrap .graph_box .alert{display: flex;align-items: center;justify-content: center;margin: 20px 0;width: 600px; height: 60px; font-size: 18px; color: var(--co01); font-weight: 500; box-shadow:0px 0px 10px rgba(127,255,0,.6); border:1px solid var(--co01); background: #111; border-radius:30px;} /* 피스 모임 리스트 */ .speqx_box_wrap .tab_btn{display: flex;gap:10px;} .speqx_box_wrap .tab_btn a{display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;width: calc((100% - 40px) / 5); height: 200px; border-radius:12px; border:1px solid #333;transition:.3s;cursor:pointer;} .speqx_box_wrap .tab_btn a strong{display: block;font-size: 50px;font-weight: 700;} .speqx_box_wrap .tab_btn a span{display: block;font-size: 18px;margin-top: 10px;} .speqx_box_wrap .tab_btn a p{font-size: 26px; font-weight: 700; margin-top: 40px;} .speqx_box_wrap .tab_btn a.a01{color: #60a5fa;} .speqx_box_wrap .tab_btn a.a02{color: #c084fc;} .speqx_box_wrap .tab_btn a.a03{color: #e36baa;} .speqx_box_wrap .tab_btn a.a04{color: #e5ba15;} .speqx_box_wrap .tab_btn a.a05{color: #818cf8;} .speqx_box_wrap .tab_btn a.a01.on{box-shadow:0px 0px 10px rgba(96,165,250,.6);border:1px solid #60a5fa;} .speqx_box_wrap .tab_btn a.a02.on{box-shadow:0px 0px 10px rgba(192,132,252,.6);border:1px solid #c084fc;} .speqx_box_wrap .tab_btn a.a03.on{box-shadow:0px 0px 10px rgba(227,107,170,.6);border:1px solid #e36baa;} .speqx_box_wrap .tab_btn a.a04.on{box-shadow:0px 0px 10px rgba(229,186,21,.6);border:1px solid #e5ba15;} .speqx_box_wrap .tab_btn a.a05.on{box-shadow:0px 0px 10px rgba(129,140,248,.6);border:1px solid #818cf8;} .speqx_box_wrap .tab_btn a.a01:hover{box-shadow:0px 0px 10px rgba(96,165,250,.6);border:1px solid #60a5fa;} .speqx_box_wrap .tab_btn a.a02:hover{box-shadow:0px 0px 10px rgba(192,132,252,.6);border:1px solid #c084fc;} .speqx_box_wrap .tab_btn a.a03:hover{box-shadow:0px 0px 10px rgba(227,107,170,.6);border:1px solid #e36baa;} .speqx_box_wrap .tab_btn a.a04:hover{box-shadow:0px 0px 10px rgba(229,186,21,.6);border:1px solid #e5ba15;} .speqx_box_wrap .tab_btn a.a05:hover{box-shadow:0px 0px 10px rgba(129,140,248,.6);border:1px solid #818cf8;} .speqx_list_wrap{margin-top: 40px;} .speqx_list_wrap .list_wrap{margin-bottom: 40px;} .speqx_list_wrap .list_wrap .tit{position: relative;} .speqx_list_wrap .list_wrap .tit::after{content:'';position: absolute;top: 50%; left: 0; transform:translateY(-50%);width: 100%; height: 1px;z-index: -1;} .speqx_list_wrap .list_wrap .tit p{width: 220px;font-size: 26px; font-weight: 700; background: #000;} .speqx_list_wrap .list_wrap .tit p em{display: inline-block;margin: 0 8px;font-size: 20px;font-weight: 700; line-height: 26px;vertical-align: bottom;} .speqx_list_wrap .list_wrap .list{border-bottom: 1px dashed #333;} .speqx_list_wrap .list_wrap .list a{display: block;padding: 30px 10px;transition:.3s;} .speqx_list_wrap .list_wrap .list a:hover{opacity: .8;} .speqx_list_wrap .list_wrap .list .top p{font-size: 18px; font-weight: 700;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .speqx_list_wrap .list_wrap .list .top span{display: block;font-size: 16px; color: #999; font-weight: 700; margin-top: 10px;} .speqx_list_wrap .list_wrap .list .bot ul{margin-top: 20px;} .speqx_list_wrap .list_wrap .list .bot ul li{font-size: 16px; line-height: 24px;} .speqx_list_wrap .list_wrap .list .bot ul li strong{display: inline-block;color: #fff;margin-right: 15px;font-weight: 400;} .speqx_list_wrap .list_wrap .list .bot ul li span{color: #666;} .speqx_list_wrap .list_wrap.type01 .tit{color: #60a5fa;} .speqx_list_wrap .list_wrap.type01 .tit::after{border-bottom: 1px dashed #60a5fa;} .speqx_list_wrap .list_wrap.type01 .list .top p{color: #60a5fa;} .speqx_list_wrap .list_wrap.type02 .tit{color: #c084fc;} .speqx_list_wrap .list_wrap.type02 .tit::after{border-bottom: 1px dashed #c084fc;} .speqx_list_wrap .list_wrap.type02 .list .top p{color: #c084fc;} .speqx_list_wrap .list_wrap.type03 .tit{color: #e36baa;} .speqx_list_wrap .list_wrap.type03 .tit::after{border-bottom: 1px dashed #e36baa;} .speqx_list_wrap .list_wrap.type03 .list .top p{color: #e36baa;} .speqx_list_wrap .list_wrap.type04 .tit{color: #e5ba15;} .speqx_list_wrap .list_wrap.type04 .tit::after{border-bottom: 1px dashed #e5ba15;} .speqx_list_wrap .list_wrap.type04 .list .top p{color: #e5ba15;} .speqx_list_wrap .list_wrap.type05 .tit{color: #818cf8;} .speqx_list_wrap .list_wrap.type05 .tit::after{border-bottom: 1px dashed #818cf8;} .speqx_list_wrap .list_wrap.type05 .list .top p{color: #818cf8;} .speqx_list_wrap02{margin-top: 40px;} .speqx_list_wrap02 .list{display: flex;align-items: center;justify-content: center; height: 50px;background: #111; border:1px solid #333; border-radius:12px;} .speqx_list_wrap02 .list:not(:last-child){margin-bottom: 10px;} .speqx_list_wrap02 .list p{font-size: 16px; color: #fff;} .speqx_list_wrap02 .list.type01 p strong{color: #60a5fa;} .speqx_list_wrap02 .list.type02 p strong{color: #c084fc;} .speqx_list_wrap02 .list.type03 p strong{color: #e36baa;} .speqx_list_wrap02 .list.type04 p strong{color: #e5ba15;} .speqx_list_wrap02 .list.type05 p strong{color: #818cf8;} /* 피스메이커 */ .mypage_wrap.maker .con01 .box_wrap{display: flex;gap:20px; margin-top: 20px;} .mypage_wrap.maker .con01 .box_wrap .box{display: flex;flex-direction: column;justify-content: space-between;gap:50px;padding: 30px;width: calc((100% - 20px) / 2); border-radius:12px; border:1px solid #333;background: #111;transition:.3s;} .mypage_wrap.maker .con01 .box_wrap .box:hover{box-shadow:0px 0px 10px rgba(127,255,0,.6); border:1px solid var(--co01);} .mypage_wrap.maker .con01 .box_wrap .box p{font-size: 20px; color: #fff ;font-weight: 700;} .mypage_wrap.maker .con01 .box_wrap .box strong{display: block;font-size: 26px;color: var(--co01);font-weight: 700;text-align: right;} .mypage_wrap.maker .con01 .tbl_wrap{margin-top: 40px;} .mypage_wrap.maker .con01 .tbl_wrap .col01{} .mypage_wrap.maker .con01 .tbl_wrap .col02{width: 200px;} .mypage_wrap.maker .con02 .speqx_box_wrap{margin-top: 60px;} .mypage_wrap.maker .con03 .slide_wrap_st01 ul.slide01{gap:20px;} .mypage_wrap.maker .con03 .slide_wrap_st01 ul.slide01 li.list{width: calc((100% - 40px) / 3);} .mypage_wrap.maker .con03 .slide_wrap_st01 ul.slide01 li.list .txt_box{padding: 20px 20px 100px 20px;} .mypage_wrap.maker .con03 .slide_wrap_st01 ul.slide01 li.list .a_wrap{position: absolute;bottom: 10px;left: 50%;transform:translateX(-50%);display: flex;gap:10px;width: calc(100% - 20px); z-index: 100;} .mypage_wrap.maker .con03 .slide_wrap_st01 ul.slide01 li.list .a_wrap a{display: flex;align-items: center; justify-content: center;width: 100%;height: 60px; border-radius:12px;font-size: 16px; color: #fff; font-weight: 600;} .mypage_wrap.maker .con03 .slide_wrap_st01 ul.slide01 li.list .a_wrap a.btn01{background: rgba(129,140,248,.5);} .mypage_wrap.maker .con03 .slide_wrap_st01 ul.slide01 li.list .a_wrap a.btn02{background: rgba(251,113,133,.5);} .mypage_wrap.maker .con03 .slide_wrap_st01 ul.slide01 li.list .a_wrap a.btn03{background: rgba(43,201,181,.5);} .pop_st01 .pop_box{width: 1000px;max-width: calc(100% - 40px);} .pop_st01.prop .pop_box table.tbl_st01 .col01{} .pop_st01.prop .pop_box table.tbl_st01 .col02{width: 200px;} .pop_st01.prop .pop_box table.tbl_st01 td .level{display: flex;align-items: center;justify-content: center;gap:10px;font-weight: 700;color: #818cf8;} .pop_st01.check .cate_wrap{display: flex;flex-wrap:wrap;gap:10px; margin-bottom: 40px;} .pop_st01.check .cate_wrap a{display: flex;align-items: center;justify-content: center;width: calc((100% - 50px) / 6); height: 40px;font-size: 16px; color: #666; font-weight: 500; border:1px solid #333; border-radius:12px;} .pop_st01.check .cate_wrap a.on{color: var(--co01);border:1px solid var(--co01);} .pop_st01.check .list_wrap .list{display: flex; align-items: center;justify-content: space-between;height: 65px;padding: 0px 20px;border:1px solid #333; border-radius:8px; background: #222;} .pop_st01.check .list_wrap .list:not(:last-child){margin-bottom: 5px;} .pop_st01.check .list_wrap .list .left{display: flex;align-items: center;gap:20px;} .pop_st01.check .list_wrap .list .left p{font-size: 16px; color: #fff;} .pop_st01.check .list_wrap .list .left em{display: flex;align-items: center;gap:10px;font-size: 16px; font-weight: 700;color: #818cf8;} .pop_st01.check .list_wrap .list .left em img{display: block;width: 20px;} .pop_st01.check .list_wrap .list .ra_wrap_st01 input.ra_st01 + label{display: flex;align-items: center;gap:5px; padding: 0px 15px;} .pop_st01.check .list_wrap .list .ra_wrap_st01 input.ra_st01 + label img{display: block;} .pop_st01.mvp .list_wrap{display: flex;flex-wrap:wrap;gap:30px;} .pop_st01.mvp .list_wrap a{display: block; width: calc((100% - 180px) / 7);} .pop_st01.mvp .list_wrap a .img_wrap{width: 100px; height: 100px; border-radius:50%; border:1px solid #333; overflow: hidden;margin: 0 auto;} .pop_st01.mvp .list_wrap a .img_wrap img{width: 100%; height: 100%; object-fit:cover;} .pop_st01.mvp .list_wrap a p{font-size: 16px; color: #ddd;font-weight: 500; margin-top: 15px;text-align: center;} .pop_st01.mvp .list_wrap a.on .img_wrap{border:2px solid var(--co01);} /* 피스메이트 */ .mypage_wrap.mate .tit_wrap{display: flex;align-items: center;justify-content: space-between; margin-bottom: 20px;} .mypage_wrap.mate .tit_wrap span{display: block;font-size: 18px; color: #666;font-weight: 500;} .mypage_wrap.mate .tit_wrap a{display: flex;align-items: center;gap:10px; font-size: 14px; color: var(--co01); font-weight: 700;} .mypage_wrap.mate .graph_box{padding: 40px;} /* 활동후기 */ .review_list_wrap{line-height: 1;} .review_list_wrap .top_box{display: flex;align-items: center;justify-content: center;flex-direction: column;gap:20px; padding: 30px; background: #111; border-radius:12px; border:1px solid #333; margin-bottom: 100px;} .review_list_wrap .top_box em{display: flex;align-items: center;gap:10px;color: var(--co01);font-size: 16px; font-weight: 700;} .review_list_wrap .top_box em img{display: block;} .review_list_wrap .top_box .txt{text-align: center;} .review_list_wrap .top_box .txt p{font-size: 20px; color: #fff;font-weight: 700;} .review_list_wrap .top_box .txt span{display: block;font-size: 16px; color: #666; font-weight: 500; margin-top: 12px;} .review_list_wrap .btn_wrap{display: flex;align-items: center;justify-content: space-between; margin-bottom: 30px;} .review_list_wrap .btn_wrap .cate_wrap_st01{margin-bottom: 0;} .review_list_wrap .btn_wrap a.write_btn{display: flex;align-items: center;justify-content: center; width: 160px; height: 40px; background: #fff; border-radius:8px;font-size: 15px; color: #222; font-weight: 500;} .review_list_wrap .list_wrap{display: flex;flex-wrap:wrap;gap:40px;} .review_list_wrap .list_wrap .list{width: calc((100% - 120px) / 4);} .review_list_wrap .list_wrap .list .img_box{position: relative;} .review_list_wrap .list_wrap .list .img_wrap{position:relative; width:100%; padding-bottom:100%; overflow: hidden; border-radius:30px;} .review_list_wrap .list_wrap .list .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .review_list_wrap .list_wrap .list .img_box a.wish{position: absolute;left: 20px; bottom: 20px;display: flex;align-items: center;gap:10px;font-size: 18px; color: #fff;pointer-events: auto;} .review_list_wrap .list_wrap .list .img_box a.wish em{position: relative;display: block;width: 23px; height: 20px;} .review_list_wrap .list_wrap .list .img_box a.wish.w02 em{height: 22px;} .review_list_wrap .list_wrap .list .img_box a.wish img{position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%);transition:.3s;} .review_list_wrap .list_wrap .list .img_box a.wish img.on{opacity: 0;} .review_list_wrap .list_wrap .list .img_box a.wish.on img.off{opacity: 0;} .review_list_wrap .list_wrap .list .img_box a.wish.on img.on{opacity: 1;} .review_list_wrap .list_wrap .list .txt_box{margin-top: 20px;} .review_list_wrap .list_wrap .list .txt_box a{display: block;font-size: 18px; color: #fff;line-height: 28px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;} /* 활동후기_view */ .review_view_wrap{line-height: 1;} .review_view_wrap .con_wrap{display: flex;gap:80px;} .review_view_wrap .con_wrap .img_con{position: relative;width: 660px;} .review_view_wrap .con_wrap .img_wrap{position:relative; width:100%; padding-bottom:100%; overflow: hidden; border-radius:30px;} .review_view_wrap .con_wrap .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;} .review_view_wrap .con_wrap .img_con .slick-dots{position: absolute;bottom: 30px;left: 0;width: 100%;display: flex;align-items: center;justify-content: center;gap:20px;} .review_view_wrap .con_wrap .img_con .slick-dots li{text-indent: -9999px;width: 8px; height: 8px; border:1px solid var(--co01); border-radius:50%;} .review_view_wrap .con_wrap .img_con .slick-dots li.slick-active{width: 20px; height: 20px; background: url(/assets/images/main/vis_dots_pc.png)center no-repeat; background-size: cover; border:none; border-radius:0;} .review_view_wrap .con_wrap .img_con .slick-dots li:only-child{display: none;} .review_view_wrap .con_wrap .txt_con{width: calc(100% - 750px);} .review_view_wrap .con_wrap .txt_con .txt_wrap{padding-top: 40px;} .review_view_wrap .con_wrap .txt_con .txt_wrap h5{display: block;font-size: 16px; margin-bottom: 20px; color: var(--co01); font-weight: 700;} .review_view_wrap .con_wrap .txt_con .txt_wrap .writer_wrap{display: flex;align-items: center;gap:20px;margin-bottom: 35px;} .review_view_wrap .con_wrap .txt_con .txt_wrap .writer_wrap .img{width: 70px; height: 70px; border-radius:50%; overflow: hidden;} .review_view_wrap .con_wrap .txt_con .txt_wrap .writer_wrap .img img{width: 100%; height: 100%; object-fit:cover;} .review_view_wrap .con_wrap .txt_con .txt_wrap .writer_wrap .txt p{font-size: 20px; color: #fff; font-weight: 700;} .review_view_wrap .con_wrap .txt_con .txt_wrap .writer_wrap .txt span{display: block;font-size: 16px; color: #666; margin-top: 15px;} .review_view_wrap .con_wrap .txt_con .txt_wrap .p_wrap{padding-bottom: 30px;} .review_view_wrap .con_wrap .txt_con .txt_wrap .p_wrap p{font-size: 18px; color: #fff; line-height: 28px;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap{display: flex;gap:20px;align-items: center;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap p{font-size: 18px; color: #fff;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap a.wish{position: relative;display: flex;align-items: center;gap:10px;font-size: 18px; color: #fff;pointer-events: auto;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap a.wish em{position: relative;display: block;width: 23px; height: 20px;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap a.wish.w02 em{height: 22px;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap a.wish img{position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%);transition:.3s;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap a.wish img.on{opacity: 0;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap a.wish.on img.off{opacity: 0;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap a.wish.on img.on{opacity: 1;} .review_view_wrap .con_wrap .txt_con .txt_wrap .btn_wrap .re_icon{display: flex;align-items: center;gap:10px;} .review_view_wrap .con_wrap .txt_con .reply_wrap{padding: 0px 10px;margin-top: 20px;border-top: 1px solid #333;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply{display: flex;align-items: center;justify-content: space-between;gap:20px;padding-bottom: 20px;padding-top: 30px;margin-top: 0;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply .img{width: 50px; height: 50px;border-radius:50%; overflow: hidden;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply .img img{width: 100%; height: 100%; object-fit:cover;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply .txt{width: calc(100% - 113px);} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply .txt strong{display: block;font-size: 18px; color: #fff; font-weight: 700;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply .txt strong span{display: inline-block; font-size: 16px; color: #666;margin-left: 10px;font-weight: 400;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply .txt p{font-size: 16px; color: #fff; line-height: 1.5;margin: 8px 0px 5px;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply .txt a{font-size: 16px; color: #666;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply a.wish{position: relative;width: 23px; height: 20px;pointer-events: auto;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply a.wish.w02{height: 22px;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply a.wish img{position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%);transition:.3s;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply a.wish img.on{opacity: 0;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply a.wish.on img.off{opacity: 0;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply a.wish.on img.on{opacity: 1;} .review_view_wrap .con_wrap .txt_con .reply_wrap .reply.re{padding-left: 70px;padding-top: 0;} .review_view_wrap .write_wrap{margin-top: 30px;padding-top: 30px; border-top: 1px solid #333;} .review_view_wrap .write_wrap textarea{display: block;width: 100%; height: 120px;font-size: 18px; color: #999;border:1px solid #333; background: #111; border-radius:12px;resize:none; padding: 20px;} .review_view_wrap .write_wrap textarea::placeholder{color: #666;} .review_view_wrap .write_wrap textarea:focus{outline:0;} .review_view_wrap .write_wrap .write_btn{display: flex;align-items: center;justify-content: center; width: 110px; height: 48px; background: #333; border-radius:8px; font-size: 18px; color: #fff; margin-left: auto; margin-top: 20px;} .review_view_wrap .re_reply_wrap .write_wrap{margin-top: 0;padding-top: 0; border-top: 0;padding-left: 70px;} .review_view_wrap .re_reply_wrap .write_wrap .write_btn{width: 100px;margin-top: 15px;font-size: 16px;} /* 활동후기_form */ .review_form_wrap{line-height: 1;} .review_form_wrap .box:not(:last-child){margin-bottom: 30px;} .review_form_wrap .box{width: 100%;} .review_form_wrap .box .tit{display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;} .review_form_wrap .box .tit p{font-size: 18px; color: #fff; font-weight: 600;} .review_form_wrap .box .input{width: 100%;} .review_form_wrap .box input[type="text"]{width: 100%;height: 60px;font-size: 18px; color: #ddd;border:1px solid #333; border-radius:12px; background: #111;padding: 0 20px;} .review_form_wrap .box input[type="text"]::placeholder, .review_form_wrap .box textarea::placeholder{color: #666;} .review_form_wrap .box input:focus, .review_form_wrap .box textarea:focus{outline:0;} .review_form_wrap .box textarea{width: 100%;height: 480px;font-size: 18px; color: #ddd;border:1px solid #333; border-radius:12px; background: #111;padding: 20px;resize:none;} .review_form_wrap .box .file_wrap{display: flex;gap:20px;} .review_form_wrap .box input[type="file"]{display: none;} .review_form_wrap .box input[type="file"] + label{display: flex;align-items: center;justify-content: center;width: 200px; height: 200px; border-radius:12px; background: #111; border:1px solid #333; cursor:pointer;} .review_form_wrap .box .file_box .img_flex{display: flex;gap:20px; flex-wrap:wrap;} .review_form_wrap .box .file_box .img_flex .img{position: relative;display: flex;align-items: center;justify-content: center;width: 140px; height: 140px; border-radius:12px; overflow: hidden;} .review_form_wrap .box .file_box .img_flex .img > img{width: 100%; height: 100%; object-fit:cover;} .review_form_wrap .box .file_box .img_flex .img .del_btn{position: absolute;top: 6px; right: 6px;} .review_form_wrap .btn_wrap_st01{margin-top: 100px;} /* 모임만들기 */ .group_form_wrap{line-height: 1;} .group_form_wrap .con:not(:last-child){margin-bottom: 100px;} .group_form_wrap .con .input_wrap{display: flex;flex-wrap:wrap;gap:30px 20px;} .group_form_wrap .con .input_wrap .box{width: calc((100% - 20px) / 2);} .group_form_wrap .con .input_wrap .box.w02{width: 100%;} .group_form_wrap .con .input_wrap .box .tit{display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;} .group_form_wrap .con .input_wrap .box .tit p{font-size: 18px; color: #fff; font-weight: 600;} .group_form_wrap .con .input_wrap .box .tit p em{color: var(--co01);font-weight: 600;vertical-align: middle;} .group_form_wrap .con .input_wrap .box .tit p span{color: #666;font-weight: 400;} .group_form_wrap .con .input_wrap .box .tit .a_wrap{display: flex;gap:20px;} .group_form_wrap .con .input_wrap .box .tit .a_wrap a{font-size: 18px; font-weight: 500;} .group_form_wrap .con .input_wrap .box .tit .a_wrap a.add{color: #818cf8;} .group_form_wrap .con .input_wrap .box .tit .a_wrap a.del{color: #fb7185;} .group_form_wrap .con .input_wrap .box .input{width: 100%;} .group_form_wrap .con .input_wrap .box input[type="text"], .group_form_wrap .con .input_wrap .box input[type="date"], .group_form_wrap .con .input_wrap .box select{width: 100%;height: 60px;font-size: 18px; color: #ddd;border:1px solid #333; border-radius:12px; background: #111;padding: 0 20px;} .group_form_wrap .con .input_wrap .box textarea{width: 100%;height: 300px;font-size: 18px; color: #ddd;border: 1px solid #333;border-radius: 12px;background: #111;padding: 15px 20px;resize: none;} .group_form_wrap .con .input_wrap .box input[type="text"]::placeholder, .group_form_wrap .con .input_wrap .box input[type="date"]::placeholder, .group_form_wrap .con .input_wrap .box input[type="file"]::placeholder{color: #666;} .group_form_wrap .con .input_wrap .box input[type="text"]:focus, .group_form_wrap .con .input_wrap .box input[type="date"]:focus, .group_form_wrap .con .input_wrap .box input:focus, .group_form_wrap .con .input_wrap .box textarea:focus, .group_form_wrap .con .input_wrap .box select:focus{outline:0;} .group_form_wrap .con .input_wrap .box .input.date{display: flex; align-items: center;} .group_form_wrap .con .input_wrap .box .input.date input[type="date"]{position: relative;width: calc((100% - 20px) / 2);color: #fff;} .group_form_wrap .con .input_wrap .box .input.date input[type="date"]::-webkit-calendar-picker-indicator{position: absolute;top: 50%;transform:translateY(-50%);right: 20px;background: url(/assets/images/sub/cal_icon02.png)center;background-repeat: no-repeat;} .group_form_wrap .con .input_wrap .box .input.date span{display: block;font-size: 18px; color: #fff;text-align: center; width: 20px;} .group_form_wrap .con .input_wrap .box select{background: url(/assets/images/sub/select_icon01.png)center right 20px no-repeat;-webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none;} .group_form_wrap .con .input_wrap .box select option{background: #000;} .group_form_wrap .con .input_wrap .box select option:checked{background: #7fff00;color: #222;} .group_form_wrap .con .input_wrap .box input[type="file"]{display: none;} .group_form_wrap .con .input_wrap .box .filebox{display: flex;gap:10px;} .group_form_wrap .con .input_wrap .box .filebox .upload-name{width: calc(100% - 140px);height: 60px;font-size: 18px; color: #ddd;border:1px solid #333; border-radius:12px; background: #111;padding: 0 20px;} .group_form_wrap .con .input_wrap .box .filebox label{display: flex;align-items: center;justify-content: center;width: 130px; height: 60px; background: #333; border-radius:12px;font-size: 18px; color: #fff;cursor:pointer;} .group_form_wrap .con .input_wrap .box .input.flex{display: flex;gap:10px;} .group_form_wrap .con .input_wrap .box .input.flex:not(:last-child){margin-bottom: 20px;} .group_form_wrap .con .input_wrap .box .input.flex input[type="text"].w01{width: 250px; } .group_form_wrap .con .input_wrap .box .input.flex input[type="text"].w02{width: 140px;} .group_form_wrap .con .input_wrap .box .input.flex input[type="text"].w03{width: 200px;} .group_form_wrap .con01 .ra_wrap{display: flex;gap:20px;} .group_form_wrap .con01 .ra_wrap input[type="radio"]{display: none;} .group_form_wrap .con01 .ra_wrap input[type="radio"] + label{display: flex;align-items: center;justify-content: center;width: calc((100% - 20px) / 2); height: 60px; font-size: 18px; color: #fff;font-weight: 500; background: #111; border:1px solid #333; border-radius:12px; cursor:pointer;} .group_form_wrap .con01 .ra_wrap input[type="radio"]:checked + label{background: #fff; border:1px solid #fff;color: #222;} .group_form_wrap .con02 .box_wrap{display: flex;flex-wrap:wrap;gap:20px;} .group_form_wrap .con02 .box_wrap .box{position: relative;width: calc((100% - 60px) / 4);padding: 20px 30px 30px;border:1px solid #333; background: #111; border-radius:20px;text-align: center;transition:.3s; cursor:pointer;} .group_form_wrap .con02 .box_wrap .box .top{display: flex;align-items: center;justify-content: center;flex-direction: column;} .group_form_wrap .con02 .box_wrap .box .top .tit{margin: 10px 0px 20px;} .group_form_wrap .con02 .box_wrap .box .top .tit p{font-size: 20px; color: #fff;font-weight: 700;} .group_form_wrap .con02 .box_wrap .box .top .tit span{display: block;font-size: 16px; margin-top: 10px;font-weight: 700;} .group_form_wrap .con02 .box_wrap .box .top strong{display: block;font-size: 16px; color: #666; font-weight: 400; line-height: 26px;} .group_form_wrap .con02 .box_wrap .box .co01{color: var(--co01);} .group_form_wrap .con02 .box_wrap .box .co02{color: #60a5fa;} .group_form_wrap .con02 .box_wrap .box .co03{color: #c084fc;} .group_form_wrap .con02 .box_wrap .box .co04{color: #e36baa;} .group_form_wrap .con02 .box_wrap .box .co05{color: #e5ba15;} .group_form_wrap .con02 .box_wrap .box .co06{color: #818cf8;} .group_form_wrap .con02 .box_wrap .box .co07{color: #fb7185;} .group_form_wrap .con02 .box_wrap .box .co08{color: #2bc9b5;} .group_form_wrap .con02 .box_wrap .box01:hover{box-shadow:0px 0px 10px rgba(127,255,0,.6);} .group_form_wrap .con02 .box_wrap .box02:hover{box-shadow:0px 0px 10px rgba(96,165,250,.6);} .group_form_wrap .con02 .box_wrap .box03:hover{box-shadow:0px 0px 10px rgba(192,132,252,.6);} .group_form_wrap .con02 .box_wrap .box04:hover{box-shadow:0px 0px 10px rgba(227,107,170,.6);} .group_form_wrap .con02 .box_wrap .box05:hover{box-shadow:0px 0px 10px rgba(229,186,21,.6);} .group_form_wrap .con02 .box_wrap .box06:hover{box-shadow:0px 0px 10px rgba(129,140,248,.6);} .group_form_wrap .con02 .box_wrap .box07:hover{box-shadow:0px 0px 10px rgba(251,113,133,.6);} .group_form_wrap .con02 .box_wrap .box08:hover{box-shadow:0px 0px 10px rgba(43,201,181,.6);} .group_form_wrap .con02 .box_wrap .box.on::after{content:'';position: absolute;top: 0; left: 0; width: 100%; height: 100%;border-radius:20px;} .group_form_wrap .con02 .box_wrap .box01.on::after{border:2px solid var(--co01);box-shadow:0px 0px 10px rgba(127,255,0,.6);} .group_form_wrap .con02 .box_wrap .box02.on::after{border:2px solid #60a5fa;box-shadow:0px 0px 10px rgba(96,165,250,.6);} .group_form_wrap .con02 .box_wrap .box03.on::after{border:2px solid #c084fc;box-shadow:0px 0px 10px rgba(192,132,252,.6);} .group_form_wrap .con02 .box_wrap .box04.on::after{border:2px solid #e36baa;box-shadow:0px 0px 10px rgba(227,107,170,.6);} .group_form_wrap .con02 .box_wrap .box05.on::after{border:2px solid #e5ba15;box-shadow:0px 0px 10px rgba(229,186,21,.6);} .group_form_wrap .con02 .box_wrap .box06.on::after{border:2px solid #818cf8;box-shadow:0px 0px 10px rgba(129,140,248,.6);} .group_form_wrap .con02 .box_wrap .box07.on::after{border:2px solid #fb7185;box-shadow:0px 0px 10px rgba(251,113,133,.6);} .group_form_wrap .con02 .box_wrap .box08.on::after{border:2px solid #2bc9b5;box-shadow:0px 0px 10px rgba(43,201,181,.6);} .group_form_wrap .con04 .chk_wrap_st01{margin-bottom: 30px;}