@charset "utf-8"; .pagecommon{font-size:15px;font-weight:600;line-height:1.8;color:#777;font-family:'Pretendard'} .key_link{color:var(--primary)} .code_cm{overflow:hidden} .code_cm *{word-break:keep-all} .code_cm .material-symbols-outlined{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24} .code_cm .sct{width:100%;padding:140px 0} .code_cm .sct.bg{background:#f5f5f5} .code_cm .sct .flex{display:flex;align-items:center;max-width:1320px;margin:0 auto} .code_cm .sct .flex > img{width:50%;border-radius:12px;box-shadow:6px 6px 24px rgba(0,0,0,.06)} .code_cm .sct .cont{width:50%;padding:0 20px 0 75px;font-size:16px;font-weight:600;color:#222} .code_cm .sct .cont .tit{margin-bottom:15px;font-size:38px;font-weight:700;white-space:pre-line;line-height:1.3} .code_cm .sct .cont .tit span{color:var(--primary)} .code_cm .sct .cont .ps{color:#777} .code_cm .sct dl{margin-top:25px} .code_cm .sct dl+dl{margin-top:16px} .code_cm .sct dl dt{line-height:2} .code_cm .sct dl dt:before{display:inline-block;margin-right:6px;vertical-align:-4px;;content:"";width:20px;height:20px;border-radius:50%;color:#fff;background:url('/sh_img/common/check.png') center no-repeat #222} .code_cm .sct dl dd{font-size:14px;font-weight:500;color:#777} .code_cm .sct dl dd a{text-decoration:underline;color:#777} .code_cm .sct dl dd svg{vertical-align:middle;width:14px;height:14px;margin-right:6px} .code_cm .sct dl dd .red{color:var(--pink)} .code_cm .sct .readme{flex:1;padding:15px 12px 15px 0;border-radius:12px;font-size:14px;font-weight:500;background:#fff} .code_cm .sct .readme .inner{overflow-y:auto;-ms-overflow-style:none;max-height:340px;padding:0 30px 30px 40px;white-space:pre-line} .code_cm .sct .readme .inner::-webkit-scrollbar{width:4px} .code_cm .sct .readme .inner::-webkit-scrollbar-thumb{background:#bbb} .code_cm .sct .readme .inner::-webkit-scrollbar-track{background:#fff} .code_cm .sct .readme p{font-size:16px;font-weight:600;color:#222} .code_cm .sct01 ul{margin-top:50px} .code_cm .sct01 ul li{display:flex;align-items:center;font-size:20px;color:#222} .code_cm .sct01 ul li+li{margin-top:15px} .code_cm .sct01 ul li span{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:15px;border-radius:50%;color:#fff;background:#222;transition:all .25s} .code_cm .sct01 ul li span svg{width:16px;height:16px;margin:auto} .code_cm .sct01 ul li img{width:28px;margin:auto 2px} .code_cm .sct02 .img{width:45%;padding:70px 50px 0;border-radius:12px;text-align:center;background:#f2f2f2} .code_cm .sct02 .img img{max-width:100%} .code_cm .sct02 ul{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:30px;padding-top:30px;border-top:1px solid #e1e1e1;font-size:14px} .code_cm .sct02 ul li{display:flex;flex-flow:column;gap:8px;width:50%} .code_cm .sct02 ul li:nth-child(n+3){margin-top:30px} .code_cm .sct02 ul li p{font-size:16px;font-weight:700;color:#222} .code_cm .sct02 ul li a{display:flex;align-items:center;width:150px;height:34px;padding:0 15px;border-radius:3px;border:1px solid #e9e9e9;line-height:32px;color:#777;box-shadow:2px 2px 3px rgba(0,0,0,.1);transition:all .15s} .code_cm .sct02 ul li a span{margin-right:8px;font-size:17px;color:#aaa} @media(hover:hover){ .code_cm .sct02 ul li a:hover{border-color:#f7f7f7;background:#f7f7f7;box-shadow:inset 2px 2px 3px rgba(0,0,0,.1)} } @media(max-width:1360px){ .code_cm .sct{padding:140px 25px} .code_cm .sct .cont{padding-left:40px} } @media(max-width:1024px){ .code_cm .sct{padding:100px 25px} .code_cm .sct .cont{padding-left:30px} .code_cm .sct .cont .tit{font-size:34px} .code_cm .sct01 ul{margin-top:30px} } @media(max-width:920px){ .code_cm .sct{padding:75px 25px} .code_cm .sct .flex{flex-flow:column;gap:30px} .code_cm .sct .flex > img{width:100%} .code_cm .sct .cont{order:-1;width:100%;padding:0} .code_cm .sct02 .img{width:100%} } @media(max-width:768px){ .code_cm .sct{padding:60px 25px} .code_cm .sct .cont{font-size:15px} .code_cm .sct .cont .tit{font-size:26px;text-align:center} .code_cm .sct .cont .ps{text-align:center} .code_cm .sct .readme .inner{max-height:220px} .code_cm .sct01 ul li{font-size:18px} .code_cm .sct01 ul li+li{margin-top:10px} .code_cm .sct01 ul li span{width:22px;height:22px;margin-right:8px} .code_cm .sct01 ul li span svg{width:14px;height:14px} .code_cm .sct02 ul li{align-items:center} .code_cm .sct02 .img{padding:50px 50px 0} } @media(max-width:480px){ .code_cm .sct{padding:60px 20px} .code_cm .sct .flex{gap:25px} .code_cm .sct .cont .tit{font-size:22px} .code_cm .sct01 ul li{align-items:baseline;font-size:16px} .code_cm .sct02 .img{overflow:hidden;padding:0;border-radius:12px} } @media(max-width:380px){ .code_cm .sct01 ul li img{display:none} .code_cm .sct02 ul li a{width:125px;padding:0 12px;font-size:13px} } /* 소스가이드 */ #code_guide{position:relative;font-weight:500} #code_guide *{word-break:keep-all} #code_guide .tit{margin-bottom:60px;font-size:18px;font-weight:700;color:#222} #code_guide .tit h1{margin-bottom:30px;font-size:38px;font-weight:700;line-height:1.4;white-space:pre-line} #code_guide .first{max-width:1320px;margin:0 auto;padding:140px 0;text-align:center} #code_guide .first ul{display:flex;justify-content:center;gap:40px} #code_guide .first ul li{display:flex;flex-flow:column;width:calc(100% / 3);min-height:420px} #code_guide .first ul li > p{position:relative;padding:15px 20px;border-radius:12px;font-size:20px;color:#222;line-height:1.45;white-space:pre-line;background:var(--pale);transition:all .2s} #code_guide .first ul li > p:before{display:block;content:"";position:absolute;left:30px;bottom:-7px;transform:rotate(55deg);width:15px;height:20px;background:var(--pale);transition:all .2s} #code_guide .first ul li > p span{font-weight:600;color:var(--primary)} #code_guide .first ul li .thum{width:100%;margin-top:25px;border:1px solid #e1e1e1;border-radius:12px} #code_guide .first ul li .ck{opacity:0;transform:translateY(5px);width:80px;margin:0 auto -20px;transition:all .2s} #code_guide .first ul li .rcmd{z-index:1;padding:30px 10px 35px;border-radius:12px;border:1px solid #e1e1e1;color:#777;background:#fff;transition:all .2s} #code_guide .first ul li .rcmd h2{margin-bottom:8px;font-size:22px;font-weight:700;color:#222} #code_guide .first ul li .rcmd span{display:block;width:max-content;margin:14px auto 0;padding:14px 22px;border-radius:30px;font-size:13px;font-weight:600;line-height:1;color:#fff;background:#111;transition:all .2s} #code_guide.w650{padding:0} #code_guide.w650 .tit{margin-bottom:40px;font-size:16px} #code_guide.w650 .tit p{margin-top:15px;font-size:22px} #code_guide.w650 .first{padding:60px 0} #code_guide.w650 .first ul{align-items:flex-end;gap:20px} #code_guide.w650 .first ul li{width:calc(50% - 10px);min-height:auto} #code_guide.w650 .first ul li > p{font-size:15px} #code_guide.w650 .first ul li > p+p{margin-top:15px} #code_guide.w650 .first ul li .ck{display:none} #code_guide.w650 .first ul li .rcmd{margin-top:15px;padding:20px 10px 25px} #code_guide.w650 .first ul li .rcmd p{font-size:20px} @media(hover:hover){ #code_guide .first ul li:hover > p{color:#fff;background:var(--primary)} #code_guide .first ul li:hover > p:before{background:var(--primary)} #code_guide .first ul li:hover > p span{color:var(--dark)} #code_guide .first ul li:hover .ck{opacity:1;margin:20px auto 0} #code_guide .first ul li:hover .rcmd{border-color:#f2f2f2;background:#f2f2f2} } @media(max-width:1360px){ #code_guide{padding:0 20px} } @media(max-width:1024px){ #code_guide{padding:0 20px} #code_guide .tit h1{font-size:34px} #code_guide .first{padding:75px 0} #code_guide .first ul{gap:20px} #code_guide .first ul li > p{font-size:15px} #code_guide .first ul li .rcmd h2{font-size:20px} } @media(max-width:768px){ #code_guide .tit{margin-bottom:40px;font-size:16px} #code_guide .tit h1{margin-bottom:15px;font-size:26px} #code_guide .first ul{flex-flow:column;gap:0} #code_guide .first ul li{width:100%;min-height:auto} #code_guide .first ul li+li{margin-top:50px} #code_guide .first ul li > p+p{margin-top:15px} #code_guide .first ul li .ck{display:none} #code_guide .first ul li .rcmd{margin-top:15px;padding:20px 10px 25px} #code_guide.w650 .tit{margin-bottom:20px;font-size:14px} #code_guide.w650 .tit p{margin-top:10px;font-size:16px} #code_guide.w650 .first{padding:40px 0} #code_guide.w650 .first ul{flex-flow:row} #code_guide.w650 .first ul li+li{margin-top:0} #code_guide.w650 .first ul li > p{padding:8px 15px;font-size:13px} #code_guide.w650 .first ul li .rcmd{padding:15px 10px 20px} #code_guide.w650 .first ul li .rcmd p{margin-bottom:0;font-size:16px} #code_guide.w650 .first ul li .rcmd span{padding:10px 22px;margin-top:10px;font-size:12px} } @media(max-width:480px){ #code_guide{font-size:14px} #code_guide .tit{font-size:15px} #code_guide .tit h1{font-size:22px} #code_guide .first ul li .rcmd h2{font-size:18px} #code_guide .first ul li > p{font-size:14px} #code_guide.w650 .first ul{flex-flow:column} #code_guide.w650 .first ul li{width:100%} #code_guide.w650 .first ul li+li{margin-top:20px} } /* 구매가이드 */ #buying_guide{position:relative;font-weight:500;line-height:1.65;background:rgb(34,193,195);background:linear-gradient(172deg, rgba(34,193,195,0.2) 11%, rgba(255,255,255,0) 50%);transition:all .5s} #buying_guide.on{background:var(--dark)} #buying_guide *{word-break:keep-all} #buying_guide .material-symbols-outlined{font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24} #buying_guide .emoji{width:24px;vertical-align:middle} #buying_guide .emoji_b{width:36px;vertical-align:middle} #buying_guide .intro{display:flex;align-items:center;justify-content:space-between;max-width:1320px;margin:0 auto;padding:140px 75px} #buying_guide .intro .tit{font-weight:700;line-height:1.4;color:#222} #buying_guide .intro .tit h1{margin-bottom:25px;font-size:38px;font-weight:700;line-height:1.4;white-space:pre-line} #buying_guide .intro .tit h2{font-size:22px;white-space:pre-line} #buying_guide .intro .tit .copy_btn{display:flex;align-items:center;justify-content:center;gap:6px;width:135px;height:50px;margin-top:40px;border:none;border-radius:30px;font-size:15px;font-weight:600;color:#222;background:#c0e4e4;transition:all .2s;font-family:'Pretendard'} #buying_guide .intro .tit .copy_btn span{font-size:18px} #buying_guide .intro.first .cont{display:flex;flex-flow:column;flex-grow:1;align-items:flex-end;gap:40px} #buying_guide .intro.first .cont dl{display:flex;gap:25px;transform:translateY(50px)} #buying_guide .intro.first .cont dl.aos-animate{transform:translateY(0)} #buying_guide .intro.first .cont dl dt{display:flex;align-items:flex-end;justify-content:center;width:110px;height:110px;padding-top:20px;border-radius:50%;background:var(--primary)} #buying_guide .intro.first .cont dl dt img{width:65%;transform:translateY(5px)} #buying_guide .intro.first .cont dl:nth-of-type(1){margin-right:40%} #buying_guide .intro.first .cont dl:nth-of-type(3){margin-right:20%} #buying_guide .intro.first .cont dl dd p{margin-bottom:10px;font-size:20px;font-weight:700;color:#222} #buying_guide .intro.first .cont dl dd div{min-width:225px;padding:15px 25px;border-radius:10px;font-size:14px;white-space:pre-line;background:#fff;box-shadow:6px 6px 24px rgba(0,0,0,.06)} #buying_guide .intro.second{padding:100px 75px 180px;align-items:flex-start} #buying_guide .intro.second .tit{position:sticky;top:0;padding-top:80px} #buying_guide .intro.second .tit h2{font-size:36px} #buying_guide .intro.second ul{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:80px;width:60%} #buying_guide .intro.second ul li{display:flex;flex-flow:column;width:260px;height:300px;transform:translateY(50px);padding:40px;border-radius:24px;background:#fff;box-shadow:6px 6px 24px rgba(0,0,0,.06)} #buying_guide .intro.second ul li.aos-animate{transform:translateY(0)} #buying_guide .intro.second ul li:nth-child(even){transform:translateY(150px)} #buying_guide .intro.second ul li.aos-animate:nth-child(even){transform:translateY(100px)} #buying_guide .intro.second ul li h3{margin-bottom:15px;font-size:22px;font-weight:700;color:#111;white-space:pre-line;line-height:1.4} #buying_guide .intro.second ul li div{white-space:pre-line} #buying_guide .intro.second ul li img{width:70px;margin:auto 0 0 auto} #buying_guide .step_wrap{position:relative;padding:140px 0} #buying_guide .step_wrap .tit{margin-bottom:60px;font-size:18px;font-weight:700;color:#222;text-align:center} #buying_guide .step_wrap .tit h2{margin-top:30px;font-size:38px;font-weight:700;line-height:1.4} #buying_guide .step_wrap .tit.on{color:#fff;transition:all 1s} #buying_guide .step_wrap .inner{display:flex;flex-flow:column;gap:80px} #buying_guide .step{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1170px;margin:0 auto;padding:75px;border-radius:12px;background:#fff;box-shadow:6px 6px 24px rgba(0,0,0,.1)} #buying_guide .step .txt > span{font-size:20px;font-weight:700;color:#222} #buying_guide .step .txt > h3{margin:30px 0;font-size:34px;font-weight:700;color:#222;line-height:1.4;white-space:pre-line} #buying_guide .step .txt > div{white-space:pre-line} #buying_guide .step .txt dl{margin-top:30px} #buying_guide .step .txt dl dt{width:max-content;padding:0 15px;margin-bottom:12px;border-radius:25px;font-size:13px;font-weight:500;line-height:25px;color:#fff;background:var(--dark)} #buying_guide .step .txt dl dd{font-size:14px;white-space:pre-line} #buying_guide .step.step01 .img{width:65%;border-radius:12px;box-shadow:6px 6px 24px rgba(0,0,0,.1)} #buying_guide .step.step02 .tabs{display:flex;flex-flow:column;gap:10px} #buying_guide .step.step02 .tabs span{width:max-content;height:auto;opacity:1;font-size:18px;font-weight:600;color:#aaa;background:none;transition:all .2s} #buying_guide .step.step02 .tabs span:before{opacity:0;display:inline-block;vertical-align:3px;content:"";width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--primary);transition:all .2s} #buying_guide .step.step02 .tabs span.on{color:var(--primary)} #buying_guide .step.step02 .tabs span.on:before{opacity:1} #buying_guide .step.step02 .step02_slide{width:560px;height:420px;margin-right:0;border-radius:12px;box-shadow:6px 6px 24px rgba(0,0,0,.1)} #buying_guide .step.step03 .img{width:65%;border-radius:12px;box-shadow:6px 6px 24px rgba(0,0,0,.1)} #buying_guide .step.step04{align-items:flex-start} #buying_guide .step.step04 .txt{padding-top:60px} #buying_guide .step.step04 .tab_wrap{width:65%} #buying_guide .step.step04 .tabs{display:flex;align-items:flex-end;height:48px} #buying_guide .step.step04 .tabs li{cursor:pointer;width:150px;height:43px;border-radius:12px 12px 0 0;line-height:43px;border:1px solid #e1e1e1;border-bottom:none;font-size:16px;font-weight:600;text-align:center;color:#aaa;background:#eee;transition:all .2s} #buying_guide .step.step04 .tabs li.on{height:48px;line-height:48px;border-color:var(--dark);color:#fff;background:var(--dark)} #buying_guide .step.step04 .tab_conts{overflow-y:auto;max-height:500px;padding:35px;border:1px solid #e1e1e1} #buying_guide .step.step04 .tab_conts::-webkit-scrollbar{width:4px} #buying_guide .step.step04 .tab_conts::-webkit-scrollbar-thumb{background:#aaa} #buying_guide .step.step04 .tab_conts::-webkit-scrollbar-track{background:#f2f2f2} #buying_guide .step.step04 .tab_cont{display:none;font-size:14px} #buying_guide .step.step04 .tab_cont .stit{display:flex;align-items:center;margin-bottom:12px;font-size:18px;font-weight:700;color:#222;letter-spacing:-.5px} #buying_guide .step.step04 .tab_cont .stit~.stit{margin-top:40px} #buying_guide .step.step04 .tab_cont .stit img{margin:0 0 5px 5px} #buying_guide .step.step04 .tab_cont ul{display:flex;flex-wrap:wrap;justify-content:space-between;border:1px solid #e1e1e1;padding:25px;margin-top:15px} #buying_guide .step.step04 .tab_cont ul+ul{margin-top:15px} #buying_guide .step.step04 .tab_cont ul li{display:flex;flex-flow:column;gap:8px;width:50%} #buying_guide .step.step04 .tab_cont ul li:nth-child(n+3){margin-top:30px} #buying_guide .step.step04 .tab_cont ul li p{font-size:15px;font-weight:700;color:#222} #buying_guide .step.step04 .tab_cont ul li a{display:flex;align-items:center;width:150px;height:34px;padding:0 15px;border-radius:3px;border:1px solid #e9e9e9;font-weight:600;line-height:32px;color:#777;box-shadow:2px 2px 3px rgba(0,0,0,.1);transition:all .15s} #buying_guide .step.step04 .tab_cont ul li a span{margin-right:8px;font-size:17px;color:#aaa} @media(hover:hover){ #buying_guide .intro .tit .copy_btn:hover{background:#fff} #buying_guide .step.step02 .tabs span:hover{color:#555} #buying_guide .step.step04 .tabs li:not(.on):hover{color:#555} #buying_guide .step.step04 .tab_cont ul li a:hover{border-color:#f7f7f7;background:#f7f7f7;box-shadow:inset 2px 2px 3px rgba(0,0,0,.1)} } @media (max-width:1200px){ #buying_guide .intro{padding:140px 30px} #buying_guide .intro.second ul{width:70%;gap:20px} } @media (max-width:1024px){ #buying_guide .intro{display:block;padding:75px} #buying_guide .intro .tit{margin-bottom:80px;text-align:center} #buying_guide .intro .tit h1{margin-bottom:15px;font-size:34px;white-space:normal} #buying_guide .intro .tit h2{font-size:21px;white-space:normal} #buying_guide .intro .tit .copy_btn{margin:25px auto 0} #buying_guide .intro.first .cont{gap:40px;align-items:center} #buying_guide .intro.first .cont dl:nth-of-type(1){margin-right:20%} #buying_guide .intro.first .cont dl:nth-of-type(2){margin-right:-30%} #buying_guide .intro.first .cont dl:nth-of-type(3){margin-right:0} #buying_guide .intro.second{padding:0 75px 100px} #buying_guide .intro.second .tit{position:relative;top:auto} #buying_guide .intro.second .tit h2{font-size:32px} #buying_guide .intro.second ul{width:100%;justify-content:center;gap:50px} #buying_guide .intro.second ul li{width:42%} #buying_guide .step_wrap .tit h2{margin-bottom:15px;font-size:34px} #buying_guide .step_wrap .inner{gap:45px;padding:0 25px} #buying_guide .step{display:block;padding:70px 50px 50px} #buying_guide .step .txt{margin-bottom:50px;text-align:center} #buying_guide .step .txt > h3{margin:10px 0 25px;font-size:30px;white-space:normal} #buying_guide .step .txt > div{white-space:normal} #buying_guide .step.step01 .img{width:100%} #buying_guide .step.step02 .tabs{flex-flow:wrap;justify-content:center;gap:30px} #buying_guide .step.step02 .step02_slide{width:100%} #buying_guide .step .txt dl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:15px;border-radius:5px;background:#f2f2f2} #buying_guide .step .txt dl dt{margin-bottom:0} #buying_guide .step .txt dl dd{white-space:normal} #buying_guide .step.step03 .img{width:100%} #buying_guide .step.step04 .txt{padding-top:0} #buying_guide .step.step04 .tab_wrap{width:100%} #buying_guide .step.step04 .tab_conts{max-height:375px} } @media (max-width:768px){ #buying_guide .intro{padding:80px 20px 60px} #buying_guide .intro .tit{margin-bottom:60px;font-size:16px} #buying_guide .intro .tit h1{margin-bottom:15px;font-size:26px} #buying_guide .intro .tit h2{font-size:19px} #buying_guide .intro .tit .copy_btn{width:120px;height:42px;font-size:14px} #buying_guide .emoji_b{width:26px;vertical-align:text-bottom} #buying_guide .intro.first .cont dl:nth-of-type(2){margin-right:-16%} #buying_guide .intro.first .cont dl dt{width:90px;height:90px} #buying_guide .intro.first .cont dl dd p{font-size:18px} #buying_guide .intro.second{padding:0 15px 0} #buying_guide .intro.second .tit h2{font-size:24px} #buying_guide .intro.second ul{gap:25px} #buying_guide .intro.second ul li{width:45%;height:auto;padding:30px} #buying_guide .intro.second ul li:nth-child(even){transform:translateY(0)} #buying_guide .intro.second ul li.aos-animate:nth-child(even){transform:translateY(0)} #buying_guide .intro.second ul li h3{font-size:20px} #buying_guide .step{padding:50px 25px 25px} #buying_guide .step_wrap .tit{margin-bottom:40px;font-size:16px} #buying_guide .step_wrap .tit h2{margin-top:15px;font-size:25px} #buying_guide .step .txt{margin-bottom:30px} #buying_guide .step .txt > span{font-size:15px} #buying_guide .step .txt > h3{margin:10px 0;font-size:22px} #buying_guide .step.step02 .tabs{gap:15px;margin-top:25px} #buying_guide .step.step02 .tabs span{font-size:15px} #buying_guide .step.step02 .tabs span:before{display:none} #buying_guide .step.step04 .tab_conts{padding:25px} #buying_guide .step.step04 .tab_cont ul li{width:48%} #buying_guide .step.step04 .tab_cont ul li a{width:100%;padding:0 10px;font-size:13px} #buying_guide .step.step04 .tab_cont ul li a span{font-size:15px} #buying_guide .step.step02 .step02_slide{height:auto} #buying_guide .step.step02 .step02_slide img{width:100%} } @media (max-width:480px){ #buying_guide .emoji{width:20px} #buying_guide .intro{padding:60px 20px 100px} #buying_guide .intro .tit{margin-bottom:40px;font-size:15px} #buying_guide .intro .tit h1{font-size:22px} #buying_guide .intro .tit h2{font-size:17px} #buying_guide .intro .tit .copy_btn{width:110px;height:38px;margin-top:15px;font-size:13px} #buying_guide .intro .tit .copy_btn span{font-size:16px} #buying_guide .intro.first .cont dl{display:block;margin:0!important;text-align:center} #buying_guide .intro.first .cont dl dt{width:90px;height:90px;margin:0 auto} #buying_guide .intro.first .cont dl dd p{padding-top:20px;font-size:16px} #buying_guide .intro.first .cont dl dd div{min-width:285px} #buying_guide .intro.second .tit{padding-top:0} #buying_guide .intro.second .tit h2{font-size:22px} #buying_guide .intro.second ul{gap:15px} #buying_guide .intro.second ul li{padding:20px;border-radius:10px;font-size:14px} #buying_guide .intro.second ul li h3{font-size:16px} #buying_guide .intro.second ul li img{width:60px} #buying_guide .step_wrap{padding:100px 0 80px} #buying_guide .step_wrap .inner{gap:20px;padding:0 15px} #buying_guide .step_wrap .tit{margin-bottom:30px} #buying_guide .step_wrap .tit h2{margin-top:15px;font-size:22px} #buying_guide .step{padding:30px 20px 20px} #buying_guide .step .txt{margin-bottom:15px} #buying_guide .step .txt > span{font-size:14px} #buying_guide .step .txt > h3{margin:0 0 10px;font-size:19px} #buying_guide .step.step02 .tabs{gap:5px} #buying_guide .step.step02 .tabs span{width:calc(50% - 2.5px);padding:5px 0;border-radius:3px;font-size:13px;background:#f2f2f2} #buying_guide .step.step02 .tabs span.on{color:#fff;background:var(--dark)} #buying_guide .step.step04 .tabs li{width:140px;font-size:15px} #buying_guide .step.step04 .tab_conts{padding:20px} #buying_guide .step.step04 .tab_cont{font-size:13px} #buying_guide .step.step04 .tab_cont .stit{display:block;font-size:15px} #buying_guide .step.step04 .tab_cont .stit img{width:18px;margin-left:2px} #buying_guide .step.step04 .tab_cont ul{padding:20px 0 0;border:none;border-top:1px solid #e1e1e1} #buying_guide .step.step04 .tab_cont ul+ul{margin-top:25px} #buying_guide .step.step04 .tab_cont ul li p{font-size:14px;line-height:1.35} #buying_guide .step.step04 .tab_cont ul li a{height:32px;font-size:12px;line-height:32px} #buying_guide .step.step04 .tab_cont ul li a span{margin-right:5px;font-size:13px} } @media (max-width:360px){ #buying_guide .step.step04 .tab_cont ul{gap:20px} #buying_guide .step.step04 .tab_cont ul li{width:100%} } /* 이용안내 */ #guide{padding:40px 4% 0;font-size:15px;font-weight:400} #guide .tit_area{margin-bottom:80px;font-size:19px;font-weight:500;text-align:center;line-height:1.45;word-break:keep-all} #guide .tit_area span{font-size:16px;font-weight:800;color:var(--primary)} #guide .tit_area p{margin:25px 0 18px;font-size:40px;font-weight:700;color:#111;white-space:pre-line} #guide .tit_area button{display:flex;align-items:center;justify-content:center;width:128px;height:45px;margin:40px auto 0;border:1px solid #e1e1e1;border-radius:30px;font-size:15px;font-weight:500;color:#999;background:none;font-family:'Pretendard'} #guide .tit_area button svg{width:18px;height:18px;margin-right:6px} #guide .list{display:flex;align-items:center} #guide .list+.list{margin-top:120px} #guide .list .cont{width:50%;padding-right:30px} #guide .list .cont b{color:var(--pink)} #guide .list .cont .stit{position:relative;padding:10px 30px;border-radius:30px;font-size:18px;font-weight:600;color:#fff;background:#111} #guide .list .cont .stit i{position:absolute;right:-20px;top:-15px;width:38px;height:38px;border-radius:50%;font-size:13px;font-weight:600;font-style:normal;text-align:center;line-height:38px;background:var(--primary)} #guide .list .cont .stit i.pay{background:var(--pink)} #guide .list .cont .stit i.month{right:-70px;width:auto;padding:0 15px;border-radius:19px} #guide .list .cont .tit{margin:25px 0 20px;font-size:24px;font-weight:700;color:#111} #guide .list .cont ul li{display:flex;align-items:baseline;line-height:1.45;word-break:keep-all} #guide .list .cont ul li+li{margin-top:10px} #guide .list .cont ul li span{flex-shrink:0;margin-right:20px;font-size:14px;font-weight:800;color:#111} #guide .list .cont ul li a{font-weight:500;text-decoration:underline} #guide .list .cont .sample{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center} #guide .list .cont .sample a{display:flex;align-items:center;height:35px;padding:0 20px;border:1px solid #222;border-radius:30px;font-size:14px;text-decoration:none;font-weight:600;background:#fff;transition:all .2s} #guide .list .cont .sample a+a{margin-left:6px} #guide .list .cont .sample a svg{width:16px;height:16px;margin:0 0 2px 10px} #guide .list .cont .sample a.disabled{border-color:#e9e9e9;color:#bbb;background:#e9e9e9} #guide .list .cont .sample .ps{margin:2px 0 0 6px} #guide .list .cont .ps{margin-top:15px;font-size:13px;font-weight:600;color:var(--pink);line-height:1.45;word-break:keep-all} #guide .list .img{overflow:hidden;display:flex;justify-content:center;align-items:flex-end;position:relative;width:560px;height:340px;margin-left:auto;border-radius:14px;background:#deecea} #guide .list .img.first{height:auto;border:1px solid #e1e1e1} #guide .list .img.first img{width:100%} #guide .list .img.hosting{height:auto;border:1px solid #e1e1e1} #guide .list .img.hosting img{width:100%} #guide .list .img .mov{transform:translateY(16px)} #guide .list .img .sir{position:absolute;left:50%;top:16%;margin-left:-150px} #guide .list .ho_link{display:flex;align-items:center;width:max-content;height:42px;padding:0 20px 0 25px;margin-top:10px;border-radius:40px;border:1px solid #111;font-size:15px;font-weight:600;line-height:55px;color:#222} #guide .list .ho_link svg{width:18px;height:18px;margin-left:10px;stroke-width:2.5px;transition:all .2s} @media(hover:hover){ #guide .list .cont .sample a:hover{background:#f2f2f2} #guide .list .ho_link:hover{background:#f2f2f2} } @media(max-width:1360px){ #guide{padding:40px 20px 0} } @media(max-width:1024px){ #guide{padding:20px 20px 0;font-size:14px} #guide .tit_area{margin-bottom:60px;font-size:14px} #guide .tit_area span{font-size:14px} #guide .tit_area p{font-size:26px} #guide .tit_area button{margin-top:25px;font-size:14px} #guide .list+.list{margin-top:80px} #guide .list .cont .stit{padding:10px 25px;font-size:15px} #guide .list .cont .tit{margin:20px 0 10px;font-size:20px} #guide .list .cont ul li span{margin-right:15px;font-size:13px} #guide .list .img{width:50%;height:290px} #guide .list .img img{max-width:100%} #guide .list:last-of-type .img img{max-width:115%} } @media(max-width:768px){ #guide .tit_area p{margin:20px 0 10px;font-size:22px} #guide .tit_area button{width:100px;height:32px;font-size:13px} #guide .tit_area button svg{width:14px;height:14px} #guide .list{flex-flow:column} #guide .list+.list{margin-top:40px;padding-top:40px;border-top:1px solid #e1e1e1} #guide .list .cont{width:100%;display:flex;flex-flow:column;align-items:center;padding:0} #guide .list .cont .stit{padding:6px 25px} #guide .list .cont .sample a{height:28px;padding:0 12px;font-size:12px} #guide .list .cont .sample a+a{margin-left:3px} #guide .list .cont .sample a svg{width:14px;height:14px;margin-left:4px} #guide .list .cont .ps{font-size:12px} #guide .list .img{width:100%;height:260px;margin-top:15px} #guide .list .img img{max-height:95%} #guide .list:last-of-type .img img{max-height:95%} } @media(max-width:480px){ #guide .tit_area p{white-space:pre-line;line-height:1.4} } @media(max-width:380px){ #guide .list .img{height:220px} } /* 호스팅 이용안내 */ #ho_guide .br{white-space:pre-line} #ho_guide .top_area{display:flex;align-items:center;height:620px;padding-left:calc((100% - 1320px) / 2);background:url(/sh_page/img/ho_guide_top.png) right center no-repeat #f9f7f3} #ho_guide .top_area .txt{padding-left:75px} #ho_guide .top_area .txt p{margin:0 0 40px;font-size:42px;font-weight:800;color:var(--dark);line-height:1.3} #ho_guide .top_area .txt p > b{display:block;margin-bottom:25px;font-size:19px;font-weight:600;color:var(--primary)} #ho_guide .top_area .txt h1{font-size:42px;font-weight:800;color:var(--dark);line-height:1.3} #ho_guide .top_area .txt h1 span{overflow:hidden;display:block} #ho_guide .top_area .txt h1 span b{display:block;font-weight:700} #ho_guide .top_area .txt > span{display:block;font-size:19px;font-weight:500;line-height:1.6;color:#777} #ho_guide .cont_wrap{max-width:1320px;margin:0 auto;padding:0 75px} #ho_guide .cont{display:flex;align-items:center;margin:140px 0;font-size:18px;font-weight:500;line-height:1.6} #ho_guide .cont .txt h3{margin-bottom:30px;font-size:34px;font-weight:700;line-height:1.35;color:var(--dark)} #ho_guide .cont .txt h3 span{position:relative} #ho_guide .cont .txt h3 span:before{opacity:.2;display:block;content:"";position:absolute;left:0;bottom:0;z-index:-1;width:100%;height:14px;background:var(--primary)} #ho_guide .cont .txt .btns{display:flex;margin-top:30px} #ho_guide .cont .txt .btns a{padding:15px 30px;border:1px solid var(--primary);border-radius:30px;font-size:16px;font-weight:600;line-height:1;color:#fff;background:var(--primary)} #ho_guide .cont .txt .btns a+a{margin-left:5px;color:var(--primary);background:#fff} #ho_guide .cont .img{flex-shrink:0;overflow:hidden;width:60%;margin-left:auto;padding:10px;border-radius:12px;border:4px solid #f1f1f1} #ho_guide .cont .img img{width:100%} #ho_guide .cont02{padding:120px 0;border-top:1px solid #e1e1e1} #ho_guide .cont02 .tit{margin-bottom:80px;font-size:36px;font-weight:700;color:var(--dark);text-align:center} #ho_guide .cont02 ul{display:flex;justify-content:center;justify-content:space-between;max-width:1320px;margin:0 auto;padding:0 75px} #ho_guide .cont02 ul li{display:flex;flex-flow:column;align-items:flex-start;font-size:16px;font-weight:400} #ho_guide .cont02 ul li p{margin-top:40px;font-size:25px;font-weight:700;color:#111} #ho_guide .cont02 ul li span{font-size:19px;font-weight:600;color:#111} #ho_guide .cont02 ul li div{margin:30px 0;word-break:keep-all;white-space:pre-line} #ho_guide .cont02 ul li a{min-width:140px;padding:15px 0;border-radius:30px;font-size:16px;font-weight:600;line-height:1;color:#fff;text-align:center;background:var(--dark)} #ho_guide .price{padding:120px 0 100px;background:#f5f5f5} #ho_guide .price .tit{font-size:18px;font-weight:500;line-height:1.6;text-align:center} #ho_guide .price .tit h2{margin-bottom:20px;font-size:36px;font-weight:700;color:var(--dark)} #ho_guide .price ul{display:flex;justify-content:center;max-width:1320px;margin:60px auto} #ho_guide .price ul li{overflow:hidden;display:block;width:26%;padding:50px 55px;border-radius:12px;font-size:15px;font-weight:500;color:#999;background:#fff;transition:all .3s} #ho_guide .price ul li+li{margin-left:35px} #ho_guide .price ul li dl dt{display:flex;align-items:center;margin-bottom:25px;font-size:26px;font-weight:700;color:#111} #ho_guide .price ul li dl dt span{width:40px;height:40px;margin-left:auto;border-radius:50%;font-size:14px;text-align:center;color:#fff;line-height:40px} #ho_guide .price ul li dl dt.standard span{background:#bbb} #ho_guide .price ul li dl dt.business span{background:#5087db} #ho_guide .price ul li dl dt.premium span{background:#e7ba0b} #ho_guide .price ul li dl dt.standard span:before{content:"S"} #ho_guide .price ul li dl dt.business span:before{content:"B"} #ho_guide .price ul li dl dt.premium span:before{content:"P"} #ho_guide .price ul li dl dd{display:flex;align-items:center;padding-right:4px} #ho_guide .price ul li dl dd span{margin-left:auto;font-weight:600;color:#111} #ho_guide .price ul li dl dd svg{width:13px;height:13px;margin-right:5px;color:#111} #ho_guide .price ul li p{display:flex;align-items:center;margin-top:20px} #ho_guide .price ul li p b{font-size:20px;font-weight:700;color:#111} #ho_guide .price ul li p span{padding:5px 12px 4px;margin-left:auto;border-radius:20px;font-size:11px;font-weight:600;color:#777;background:#f2f2f2} #ho_guide .price a{display:flex;align-items:center;width:max-content;height:70px;padding:0 32px 0 40px;margin:0 auto;border-radius:40px;font-size:18px;line-height:65px;color:#fff;background:var(--primary)} #ho_guide .price a svg{width:22px;height:22px;margin-left:8px;stroke-width:2.5px;transition:all .2s} @media(hover:hover){ #ho_guide .price ul li:hover{box-shadow:12px 12px 26px rgba(0,0,0,.1);transform:translateY(-15px)} #ho_guide .price a:hover svg{margin-left:14px} } @media(max-width:1280px){ #ho_guide .top_area{height:500px} #ho_guide .top_area:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);background:linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%)} #ho_guide .top_area .txt{position:relative;z-index:1} #ho_guide .top_area .txt p{color:#fff} #ho_guide .top_area .txt h1{color:#fff} #ho_guide .top_area .txt > span{color:rgba(255,255,255,.65)} #ho_guide .price ul li{width:30%} #ho_guide .cont02 ul{padding:0 30px} } @media(max-width:1024px){ #ho_guide .top_area{background-position:-20% center} #ho_guide .top_area .txt p{margin:0 0 20px;font-size:36px} #ho_guide .top_area .txt p > b{font-size:18px} #ho_guide .top_area .txt > span{font-size:18px} #ho_guide .top_area .txt h1{font-size:36px} #ho_guide .cont_wrap{padding:0 30px} #ho_guide .cont{margin:100px 0;font-size:16px} #ho_guide .cont .txt h3{font-size:28px} #ho_guide .cont .txt .btns a{padding:12px 25px;font-size:15px} #ho_guide .price{padding:80px 30px} #ho_guide .price .tit{font-size:16px} #ho_guide .price .tit h2{font-size:32px;font-weight:700} #ho_guide .price ul{margin:50px 0} #ho_guide .price ul li{width:calc(100% / 3);padding:25px 30px} #ho_guide .price ul li+li{margin-left:15px} #ho_guide .price ul li dl dt{font-size:22px} #ho_guide .price ul li p b{font-size:18px} #ho_guide .cont02{padding:80px 0} #ho_guide .cont02 .tit{margin-bottom:50px;font-size:32px} #ho_guide .cont02 ul li{width:31%} #ho_guide .cont02 ul li div{white-space:normal} #ho_guide .cont02 ul li p{margin-top:30px;font-size:22px} #ho_guide .cont02 ul li span{font-size:17px} #ho_guide .cont02 ul li a{min-width:130px;padding:12px 0;font-size:15px} } @media(max-width:768px){ #ho_guide .br{white-space:normal;word-break:keep-all} #ho_guide .top_area{height:380px;background-position:20% center} #ho_guide .top_area .txt{padding-left:30px} #ho_guide .top_area .txt p{font-size:26px;color:#fff} #ho_guide .top_area .txt p > b{font-size:16px} #ho_guide .top_area .txt h1{font-size:26px;color:#fff} #ho_guide .top_area .txt > span{font-size:16px;color:rgba(255,255,255,.65)} #ho_guide .cont{display:block;margin:60px 0;font-size:15px;text-align:center} #ho_guide .cont .txt h3{margin-bottom:15px;font-size:20px} #ho_guide .cont .txt .btns{justify-content:center;margin-top:15px} #ho_guide .cont .txt .btns a{font-size:14px} #ho_guide .cont .img{width:100%;margin-top:20px} #ho_guide .price{padding:60px 20px} #ho_guide .price .tit h2{margin-bottom:15px;font-size:26px} #ho_guide .price ul li{padding:15px 20px;font-size:14px} #ho_guide .price ul li dl dt{font-size:20px} #ho_guide .price ul li dl dt span{width:35px;height:35px;line-height:35px} #ho_guide .price ul li p b{font-size:16px} #ho_guide .price a{padding:0 30px;font-size:16px;height:60px} #ho_guide .price a svg{width:18px;height:18px} #ho_guide .cont02{padding:60px 0} #ho_guide .cont02 .tit{margin-bottom:40px;font-size:26px} #ho_guide .cont02 ul{display:block;padding:0 20px} #ho_guide .cont02 ul li{position:relative;width:100%;padding-left:100px;font-size:15px} #ho_guide .cont02 ul li+li{margin-top:40px;padding-top:40px;border-top:1px solid #e1e1e1} #ho_guide .cont02 ul li img{position:absolute;left:0} #ho_guide .cont02 ul li p{margin:0;font-size:20px} #ho_guide .cont02 ul li span{font-size:16px} #ho_guide .cont02 ul li div{margin:15px 0 20px;line-height:1.6} #ho_guide .cont02 ul li a{min-width:115px;font-size:14px} } @media(max-width:650px){ #ho_guide .price ul{display:block;padding:0 30px} #ho_guide .price ul li{width:100%} #ho_guide .price ul li+li{margin:15px 0 0} #ho_guide .price ul li dl dt{margin-bottom:12px} #ho_guide .price ul li p{margin-top:10px} } @media(max-width:480px){ #ho_guide .cont_wrap{padding:0 20px} #ho_guide .price ul{margin:20px 0;padding:0} #ho_guide .cont02 ul li{padding-left:70px} #ho_guide .cont02 ul li img{width:45px} } /* 용어설명 리스트 */ #videoList .pgtit{margin-bottom:10px;font-size:24px;font-weight:700;color:#111} #videoList .bnr{height:162px;border-radius:16px;font-size:17px;font-weight:700;line-height:1.4;color:rgba(0,0,0,.5);background:#e4f6f0;font-family:'Pretendard'} #videoList .bnr .flex{display:flex;justify-content:center;align-items:center;height:100%} #videoList .bnr .flex div{word-break:keep-all} #videoList .bnr p{margin-top:10px;font-size:26px;color:#111;letter-spacing:-.2px;word-break:keep-all} #videoList .bnr img{margin:auto 40px 0 0} #videoList .tabs{display:flex;margin:30px 0;background:#fff} #videoList .tabs a{line-height:38px;padding:0 15px;border-radius:20px;border:none;background:none;font-size:13px;font-weight:700;color:#111;background:#f4f4f5;font-family:'Pretendard'} #videoList .tabs a+a{margin-left:7px} #videoList .tabs a.on{color:#fff;background:var(--dark)} #videoList ul{display:flex;flex-wrap:wrap} #videoList ul li{width:calc(25% - 10.5px);margin:0 0 50px 14px} #videoList ul li:nth-child(4n+1){margin-left:0} #videoList ul li a{display:block} #videoList ul li .thum{overflow:hidden;position:relative;border-radius:16px;height:180px;margin-bottom:20px;background:center no-repeat;background-size:cover} #videoList ul li .thum:before{opacity:0;display:block;content:"";position:absolute;left:0;top:0%;width:100%;height:100%;background:rgba(0,0,0,.4);transition:all .2s} #videoList ul li .thum:after{content:url(/sh_img/include/inc02/video_play.png);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:1} #videoList ul li span{font-size:14px;color:var(--primary)} #videoList ul li p{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-right:30px;line-height:1.5;color:#111;word-break:keep-all} #videoList .more_btn{display:flex;justify-content:center;align-items:center;height:58px;margin:0 auto;padding:0 30px;border:1px solid var(--line);border-radius:30px;font-size:15px;font-weight:700;color:#111;background-color:#fff;transition:all .2s;font-family:'Pretendard'} #videoList .more_btn svg{width:20px;height:20px;margin-left:35px} /* 용어설명 뷰 */ #videoView .pgtit{margin-bottom:10px;font-size:24px;font-weight:700;color:#111} #videoView .flex{display:flex;justify-content:space-between} #videoView .video{width:calc(100% - 370px)} #videoView .video iframe{border-radius:16px} #videoView .video .tit{padding:20px 0;margin-bottom:20px;border-bottom:1px solid #e1e1e1} #videoView .video .tit span{color:var(--primary)} #videoView .video .tit p{margin-top:5px;font-size:24px;font-weight:700;line-height:1.4;color:#111} #videoView .video .cont{font-weight:500;white-space:pre-line} #videoView .latest ul{width:320px} #videoView .latest ul li+li{margin-top:40px} #videoView .latest ul li a{display:block} #videoView .latest ul li .thum{overflow:hidden;position:relative;border-radius:16px;height:180px;margin-bottom:20px;background:center no-repeat;background-size:cover} #videoView .latest ul li .thum:before{opacity:0;display:block;content:"";position:absolute;left:0;top:0%;width:100%;height:100%;background:rgba(0,0,0,.4);transition:all .2s} #videoView .latest ul li .thum:after{content:url(/sh_img/include/inc02/video_play.png);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:1} #videoView .latest ul li span{font-size:14px;color:var(--primary)} #videoView .latest ul li p{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-right:30px;line-height:1.5;color:#111;word-break:keep-all} #videoView .list_btn{display:flex;justify-content:center;align-items:center;width:160px;height:58px;margin:50px 0 0 auto;border:1px solid var(--line);border-radius:30px;font-size:15px;font-weight:700;color:#111;background-color:#fff;transition:all .2s;font-family:'Pretendard'} #videoView .list_btn svg{width:20px;height:20px;margin-right:25px} @media(hover:hover){ #videoList ul li:hover .thum:before{opacity:1} #videoList .more_btn:hover{border-color:#111} #videoView .latest ul li:hover .thum:before{opacity:1} #videoView .list_btn:hover{border-color:#111} } @media(max-width:1360px){ #videoList{padding:0 20px} #videoView{padding:0 20px} } @media(max-width:1230px){ #videoView .video{width:calc(100% - 340px)} #videoView .video iframe{height:450px} } @media(max-width:1024px){ #videoList ul li{width:calc((100% / 3) - 10.5px)} #videoList ul li:nth-child(4n+1){margin-left:14px} #videoList ul li:nth-child(3n+1){margin-left:0} #videoView .video iframe{height:350px} } @media(max-width:768px){ #videoList{padding:0 12px} #videoList .pgtit{font-size:18px} #videoList .tabs a{height:32px;padding:0 12px;font-size:12px;line-height:32px} #videoList .bnr{height:110px;padding:0 12px;border-radius:12px;font-size:13px} #videoList .bnr p{margin-top:8px;font-size:17px;font-weight:600} #videoList .bnr img{width:37%;margin-right:10px} #videoList ul{justify-content:space-between} #videoList ul li{width:calc(50% - 4px);margin:0 0 40px!important} #videoList ul li .thum{height:160px;margin-bottom:10px;border-radius:12px} #videoList ul li p{font-size:14px} #videoList ul li span{font-size:13px} #videoList .more_btn{height:50px;padding:0 25px;font-size:14px;line-height:48px} #videoView{padding:0 12px} #videoView .pgtit{font-size:18px} #videoView .flex{display:block} #videoView .video{width:100%} #videoView .video iframe{border-radius:12px} #videoView .video .tit span{font-size:14px} #videoView .video .tit p{font-size:15px} #videoView .video .cont{font-size:14px} #videoView .list_btn{width:140px;height:50px;margin:20px 0 40px auto;font-size:14px;line-height:48px} #videoView .latest ul{display:flex;justify-content:space-between;width:100%} #videoView .latest ul li{width:calc(50% - 4px)} #videoView .latest ul li:nth-child(3){display:none} #videoView .latest ul li+li{margin:0} #videoView .latest ul li .thum{height:160px;margin-bottom:10px;border-radius:12px} #videoView .latest ul li p{font-size:14px} } @media (max-width:480px){ #videoList .bnr{height:auto;text-align:center} #videoList .bnr .flex{position:relative;display:block} #videoList .bnr .flex div{position:relative;z-index:1;padding:20px 15px} #videoList .bnr img{position:absolute;right:0;bottom:0;width:auto;height:65%;margin-right:0;opacity:.3} #videoList .tabs{margin:20px 0} #videoList ul li .thum{height:130px} #videoView .video iframe{height:220px} #videoView .latest ul li .thum{height:120px} } @media(max-width:380px){ #videoList ul li .thum{height:100px} #videoView .latest ul li .thum{height:100px} } /* 제작의뢰 - 글쓰기 */ #ex_requestWrite #chk_area{display:none} #ex_requestWrite{max-width:1000px;margin:0 auto;font-size:16px;line-height:1.65} #ex_requestWrite .tit{position:relative;padding:60px 0 40px;margin-bottom:40px;border-bottom:2px solid #111;font-weight:500;color:#111} #ex_requestWrite .tit p{margin-bottom:30px;font-size:40px;font-weight:700;line-height:1.3;color:#111;white-space:pre-line} #ex_requestWrite .tit a{color:var(--primary)} #ex_requestWrite .tit img{position:absolute;right:8%;bottom:20px;z-index:-1;width:25%} #ex_requestWrite .tit span{font-size:13px;color:var(--pink)} #ex_requestWrite .stit{margin-bottom:20px;font-size:24px;font-weight:700;color:#111} #ex_requestWrite .stit~.stit{margin-top:50px;padding-top:40px;border-top:1px solid #e1e1e1} #ex_requestWrite .process{padding:15px;border-radius:4px;font-size:14px;font-weight:500;background:#f5f5f5} #ex_requestWrite ul{display:grid;grid-template-columns:repeat(2, 1fr);column-gap:30px;row-gap:25px} #ex_requestWrite ul li .sh_label{display:block;margin-bottom:6px;font-size:15px;font-weight:700;color:#111} #ex_requestWrite ul li .sh_label.rq:after{display:inline-block;content:"*";margin-left:5px;font-size:17px;color:#e91e63} #ex_requestWrite ul li .sh_input{width:100%;height:50px;padding:0 15px;border-radius:4px;border:1px solid #f5f5f5;font-size:15px;color:#777;background:#f5f5f5;transition:all .2s;font-family:'Pretendard'} #ex_requestWrite ul li .sh_input:focus, #ex_requestWrite ul li .sh_input:active{outline:none!important;border-color:#e1e1e1!important;background-color:#fff;box-shadow:none} #ex_requestWrite ul li .sh_select{cursor:pointer;-webkit-appearance:none;appearance:none;background:url(/sh_img/common/select_arr.png) calc(100% - 15px) center no-repeat #f5f5f5} #ex_requestWrite ul li .sh_input.txt{height:200px;padding:15px;line-height:1.4} #ex_requestWrite ul li.full{grid-column:span 2} #ex_requestWrite ul li.file_area .flex{display:flex} #ex_requestWrite ul li.file_area .upload-name{width:calc(100% - 120px)} #ex_requestWrite ul li.file_area label{cursor:pointer;width:120px;height:50px;margin:0 0 0 5px;border-radius:4px;font-weight:600;color:#fff;text-align:center;line-height:50px;background:#b1b1b1} #ex_requestWrite ul li.file_area input[type=file]{display:none} #ex_requestWrite ul li.ctf_area .flex{display:flex} #ex_requestWrite ul li.ctf_area input{width:75%} #ex_requestWrite ul li.ctf_area button{width:25%;height:50px;margin:0 0 0 5px;padding:0 12px;border-radius:4px;font-size:15px;font-weight:600;color:#fff;text-align:center;word-break:keep-all;line-height:50px;background:#b1b1b1} #ex_requestWrite .pvc_ck{display:flex;align-items:center;justify-content:center;margin:40px 0;font-size:15px;font-weight:500} #ex_requestWrite .pvc_ck .sh_ck{width:16px;height:16px;border:none;border-radius:4px;background:#e5e5e5;cursor:pointer;-webkit-appearance:none;-ms-appearance:none} #ex_requestWrite .pvc_ck .sh_ck:checked{background:url('/sh_img/common/check.png') center no-repeat #111;background-size:8px} #ex_requestWrite .pvc_ck label{margin:0 5px;cursor:pointer;font-size:15px;font-weight:500;color:#111} #ex_requestWrite .pvc_ck label span{color:var(--primary)} #ex_requestWrite .pvc_ck a{vertical-align:middle;color:#111;text-decoration:underline} #ex_requestWrite .inq_btn{display:flex;align-items:center;justify-content:center;width:240px;height:70px;margin:0 auto;font-size:18px;font-weight:600;border-radius:50px;color:#fff;background:var(--primary);transition:all .25s} @media(hover:hover){ #ex_requestWrite .inq_btn:hover{background:var(--primary)} } @media(max-width:1024px){ #ex_requestWrite{padding:0 30px 60px;font-size:15px} #ex_requestWrite .tit{padding-top:60px} #ex_requestWrite .tit p{font-size:34px} #ex_requestWrite .tit img{bottom:20px} #ex_requestWrite ul li.ctf_area input{width:calc(100% - 120px)} #ex_requestWrite ul li.ctf_area button{width:120px} } @media(max-width:768px){ #ex_requestWrite{font-size:14px} #ex_requestWrite .tit{padding-top:40px} #ex_requestWrite .tit p{font-size:24px} #ex_requestWrite .tit img{right:3%;bottom:0;top:30px;width:28%} #ex_requestWrite .stit{font-size:18px} #ex_requestWrite ul{column-gap:12px;row-gap:12px} #ex_requestWrite ul li .sh_label{font-size:14px} #ex_requestWrite ul li .sh_input{padding:0 10px;font-size:14px} #ex_requestWrite ul li .sh_input.txt{height:150px;padding:10px;font-size:14px} #ex_requestWrite ul li.file_area .upload-name{width:calc(100% - 80px)} #ex_requestWrite ul li.file_area label{width:80px} #ex_requestWrite ul li.ctf_area button{font-size:14px} #ex_requestWrite .pvc_ck{margin:15px 0 20px;font-size:14px} #ex_requestWrite .pvc_ck label{font-size:14px} #ex_requestWrite .inq_btn{width:100%;height:55px;padding:0 25px;font-size:16px} } @media(max-width:480px){ #ex_requestWrite{padding:0 15px 20px} #ex_requestWrite .tit{padding:20px 0;margin-bottom:20px} #ex_requestWrite .tit p{margin-bottom:20px} #ex_requestWrite .tit img{bottom:auto;top:15px} #ex_requestWrite .stit{margin-bottom:10px} #ex_requestWrite .stit~.stit{margin-top:25px;padding-top:20px} #ex_requestWrite ul{grid-template-columns:repeat(1, 1fr)} #ex_requestWrite ul li.full{grid-column:unset} #ex_requestWrite ul li .sh_input{height:45px} #ex_requestWrite ul li.file_area label{height:45px;line-height:45px} #ex_requestWrite ul li.ctf_area button{height:45px;line-height:45px} #ex_requestWrite ul li .sh_label{margin:0} } /* 제작의뢰 - 리스트 */ #requestList.all{padding-left:0} /* 제작의뢰 - 뷰 */ #ex_requestMbCk{max-width:480px;width:100%;margin:50px auto;padding:50px;border-radius:12px;border:1px solid #e1e1e1;font-weight:500;text-align:center} #ex_requestMbCk .stit{margin-bottom:15px;font-size:20px;font-weight:700;color:#111} #ex_requestMbCk .sh_input{width:100%;height:50px;padding:0 15px;border-radius:4px;border:1px solid #f5f5f5;font-size:15px;font-weight:500;color:#777;background:#f5f5f5;transition:all .2s;font-family:'Pretendard'} #ex_requestMbCk .sh_input:focus, #requestMbCk .sh_input:active{outline:none!important;border-color:#e1e1e1!important;background-color:#fff;box-shadow:none} #ex_requestMbCk .ps{margin:15px 0 30px;line-height:1.6} #ex_requestMbCk button{width:100%;height:55px;padding:0 30px;border:none;border-radius:4px;font-size:15px;font-weight:600;color:#fff;background:var(--dark);font-family:'Pretendard'} #requestView.all{padding-left:0} #requestView.ex .stit{margin-bottom:15px;font-size:20px;font-weight:700;color:#111} #requestView.ex .stit~.stit{margin-top:20px;padding-top:20px;border-top:1px solid #e1e1e1} #requestView.ex dl{display:flex;flex-wrap:wrap} #requestView.ex dl dt{min-width:90px;width:10%;font-weight:600} #requestView.ex dl dd{max-width:calc(100% - 90px);width:90%;color:#777;line-height:1.65} #requestView.ex dl dt~dt{margin-top:5px} #requestView.ex dl dd~dd{margin-top:5px} /* 고객센터 */ #cscenter{font-size:15px;font-weight:500} #cscenter, #cscenter *{word-break:keep-all} #cscenter .inner{max-width:1100px;margin:0 auto;padding:0 20px} #cscenter .tit{padding:60px 0 40px;font-size:16px;color:#111;text-align:center} #cscenter .tit p{margin-bottom:30px;font-size:40px;font-weight:700;color:#111;line-height:1.3} #cscenter .sch_wrap{max-width:740px;margin:0 auto 100px} #cscenter .sch_wrap p{display:flex;justify-content:space-between;border-bottom:2px solid #222} #cscenter .sch_wrap input{width:calc(100% - 60px);border:none;padding:0 15px;font-size:17px;font-family:'Pretendard'} #cscenter .sch_wrap input:focus, #cscenter .sch_wrap input:active{border:none!important;outline:none;box-shadow:none} #cscenter .sch_wrap button{width:60px;height:60px} #cscenter .sch_wrap .kwd{display:flex;column-gap:6px;margin-top:22px} #cscenter .sch_wrap .kwd a{padding:6px 20px;border:1px solid #f2f2f2;border-radius:30px;font-weight:600;color:#222;background:#f2f2f2;transition:all .2s} #cscenter .latest{display:flex;gap:40px} #cscenter .latest dl{width:50%} #cscenter .latest dl dt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:24px;font-weight:700;color:#111} #cscenter .latest dl dt a{display:flex;align-items:center;font-size:15px;font-weight:500;color:#aaa} #cscenter .latest dl dt a svg{width:15px;height:15px;margin-left:6px} #cscenter .latest dl dd{padding:30px 35px;border-radius:12px;border:1px solid #e1e1e1} #cscenter .latest dl dd ul li{display:flex;color:#111;line-height:1.6} #cscenter .latest dl dd ul li a{display:flex} #cscenter .latest dl dd ul li+li{margin-top:8px} #cscenter .latest dl dd ul.faq li span{margin-right:18px;font-weight:600;color:#aaa} #cscenter .latest dl dd ul.notice li{justify-content:space-between} #cscenter .latest dl dd ul.notice li span{font-size:13px;color:#aaa} #cscenter .tel_info{position:relative;padding:60px 0;margin:100px 0;background:#fff0e6} #cscenter .tel_info img{position:absolute;top:30%;left:calc(50% + 340px);width:160px} #cscenter .tel_info dl dt{font-size:24px;font-weight:700;color:#111} #cscenter .tel_info dl dd{display:flex;align-items:center;gap:50px;margin:15px 0 25px} #cscenter .tel_info dl dd p{font-size:42px;font-weight:800;line-height:1.2;color:#111} #cscenter .tel_info dl dd div{line-height:1.65} #cscenter .tel_info ul{display:flex;border-radius:12px;gap:7%;padding:35px 50px;color:#111;background:#fff} #cscenter .tel_info ul li{width:50%;font-size:14px;font-weight:600} #cscenter .tel_info ul li+li{padding-left:7%;border-left:1px solid #e9e9e9} #cscenter .tel_info ul li p{font-size:18px} #cscenter .tel_info ul li span{display:block;margin-bottom:5px;font-size:20px;font-weight:800} #cscenter .links{display:flex;column-gap:40px;max-width:1100px;margin:0 auto 50px;padding:0 20px} #cscenter .links li{width:calc(100% / 3);border:1px solid #e1e1e1;border-radius:12px;background:#fff;transition:all .2s} #cscenter .links li a{display:block;padding:40px} #cscenter .links li img{width:32px} #cscenter .links li p{margin:40px 0 15px;font-size:20px;font-weight:700;color:#111} #cscenter .links li div{white-space:pre-line;letter-spacing:-.2px;color:#777} @media(hover:hover){ #cscenter .sch_wrap .kwd a:hover{border-color:#e1e1e1;background:#fff} #cscenter .links li:hover{transform:translateY(-10px);box-shadow:10px 10px 30px rgba(0,0,0,.08)} } @media(max-width:1024px){ #cscenter{font-size:14px} #cscenter .tit p{font-size:36px} #cscenter .latest{gap:20px} #cscenter .tel_info dl dd p{font-size:38px} #cscenter .tel_info img{left:auto;right:20px} #cscenter .links{gap:20px} } @media(max-width:768px){ #cscenter{font-size:14px} #cscenter .tit{padding:30px 0 20px;font-size:15px} #cscenter .tit p{margin-bottom:20px;font-size:26px} #cscenter .sch_wrap{margin-bottom:60px} #cscenter .sch_wrap input{font-size:15px} #cscenter .sch_wrap button{width:50px;height:50px} #cscenter .sch_wrap .kwd{margin-top:15px} #cscenter .sch_wrap .kwd a{font-size:13px} #cscenter .latest{flex-flow:column} #cscenter .latest dl{width:100%} #cscenter .latest dl dt{font-size:20px} #cscenter .latest dl dt a{font-size:13px} #cscenter .latest dl dd{padding:20px;font-size:14px} #cscenter .tel_info{margin:60px 0;padding:40px 0} #cscenter .tel_info dl dt{font-size:20px} #cscenter .tel_info dl dd{gap:20px} #cscenter .tel_info dl dd p{font-size:32px} #cscenter .tel_info dl dd div{font-size:13px} #cscenter .tel_info ul{padding:25px;gap:0} #cscenter .tel_info ul li{font-size:13px} #cscenter .tel_info ul li p{font-size:16px} #cscenter .tel_info ul li span{font-size:18px} #cscenter .tel_info img{top:20px;left:auto;right:20px;width:25%;max-width:100px} #cscenter .tel_info ul li+li{margin:0} #cscenter .links li a{padding:25px} #cscenter .links li p{margin:15px 0 5px;font-size:18px} #cscenter .links li div{white-space:normal} } @media(max-width:480px){ #cscenter .tel_info dl dd{flex-flow:column;align-items:flex-start;gap:10px;margin:10px 0 15px} #cscenter .tel_info dl dd p{font-size:28px} #cscenter .tel_info ul{flex-flow:column;gap:15px;padding:20px 25px} #cscenter .tel_info ul li{width:100%} #cscenter .tel_info ul li+li{padding:15px 0 0;border:none;border-top:1px solid #e1e1e1} #cscenter .links{flex-flow:column} #cscenter .links li{width:100%} } /* ===================== 자주하는 질문 */ #shFaq{padding-bottom:100px} #shFaq .top_area{position:relative;z-index:1;padding:60px 0 40px;text-align:center} #shFaq .top_area .tit{max-width:var(--mainsize);margin:0 auto} #shFaq .top_area .tit span{font-size:20px;font-weight:600;color:var(--primary)} #shFaq .top_area .tit p{margin-top:25px;font-size:40px;font-weight:700;line-height:1.3;white-space:pre-line;color:var(--dark)} #shFaq .tabs{display:flex;justify-content:center} #shFaq .tabs a{height:50px;padding:0 25px;border-radius:30px;border:none;background:none;font-size:19px;font-weight:500;line-height:50px;color:#aaa;background:#fff;transition:all .25s} #shFaq .tabs a+a{margin-left:10px} #shFaq .tabs a.on{color:#fff;background:var(--primary)} #shFaq .faq_wrap{max-width:var(--mainsize);margin:0 auto} #shFaq .sch_area{display:flex;margin:30px 0} #shFaq .sch_area form{display:flex;align-items:center;width:360px;height:55px;padding:0 20px 0 25px;margin-left:auto;border-radius:30px;border:1px solid #e1e1e1;background:#fff} #shFaq .sch_area form input{width:calc(100% - 24px);height:100%;padding:0 10px 0 0;border:none;font-size:16px;font-weight:500;background:none;font-family:'Pretendard'} #shFaq .sch_area form input:focus, #shFaq .sch_area form input:active{box-shadow:none} #shFaq .sch_area form button{padding-top:1px;color:var(--dark)} #shFaq .sch_area form button svg{stroke-width:2.5px} #shFaq .sch_area form input:focus, #shFaq .sch_area form input:active{border:none!important} #shFaq .cont_faq{overflow:hidden;border-top:1px solid #e1e1e1} #shFaq .cont_q{display:block;position:relative;width:100%;padding:0 80px 0 40px;background:none;border:none;text-align:left} #shFaq .cont_q:after{display:block;content:"\f107";position:absolute;right:20px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-size:20px;color:#222;font-family:'fontawesome'} #shFaq .cont_q.open:after{content:"\f106";color:#aaa} #shFaq .cont_q p{display:flex;padding:20px 0;font-size:17px;font-weight:600;line-height:1.35;color:#222;font-family:'Pretendard'} #shFaq .cont_q p span{margin-right:50px;color:var(--dark)} #shFaq .cont_q p b{flex-shrink:0;margin-right:12px;font-weight:600;color:#aaa} #shFaq .cont_faq:first-child .cont_a{display:block} #shFaq .cont_a{display:none;padding:25px 40px;background-color:#f5f6f8;font-weight:400} #shFaq .cont_a a{color:var(--primary)} @media(hover:hover){ #shFaq .tabs a:not(.on):hover{color:var(--primary)} } @media(max-width:1340px){ #shFaq{padding:0 15px 100px} } @media(max-width:1024px){ #shFaq{padding:0 15px 60px} #shFaq .top_area{padding:60px 0 40px} #shFaq .top_area .tit p{font-size:34px} #shFaq .tabs a{height:40px;padding:0 18px;font-size:17px;line-height:40px} } @media(max-width:768px){ #shFaq .top_area{padding:40px 0 30px} #shFaq .top_area .tit span{font-size:16px} #shFaq .top_area .tit p{margin-top:15px;font-size:24px} #shFaq .tabs a{height:35px;padding:0 15px;font-size:14px;line-height:35px} #shFaq .tabs a+a{margin:0} #shFaq .sch_area form{height:50px} #shFaq .sch_area form input{font-size:15px} #shFaq .cont_q{padding:0 50px 0 15px} #shFaq .cont_q p span{margin-right:15px} #shFaq .cont_q p{font-size:14px} #shFaq .cont_a{padding:15px;font-size:13px} } @media(max-width:480px){ #shFaq .top_area{padding-bottom:25px} #shFaq .tabs a{position:relative;padding:0;font-weight:600} #shFaq .tabs a+a{margin-left:12px} #shFaq .tabs a.on{color:var(--primary);background:none} #shFaq .tabs a.on:after{display:block;content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--primary)} #shFaq .sch_area form{width:100%;height:45px;padding:0 12px 0 15px} #shFaq .sch_area form button svg{width:20px;height:20px} #shFaq .cont_q p{padding:15px 0} } /* 그누보드 가이드 */ #gnu_guide{max-width:1320px;margin:0 auto;padding:120px 0;font-size:16px;font-weight:500} #gnu_guide *{word-break:keep-all} #gnu_guide .pl{white-space:pre-line} #gnu_guide h1{margin-bottom:50px;font-size:42px;font-weight:700;line-height:1.4;color:#111;text-align:center} #gnu_guide h2{font-size:30px;font-weight:700;line-height:1.4;color:#111} #gnu_guide h3{font-size:26px;font-weight:700;line-height:1.4;color:#111} #gnu_guide .tit{margin-bottom:20px} #gnu_guide .tit span{display:block;margin-bottom:20px;font-size:17px;font-weight:600;color:var(--primary)} #gnu_guide .tabs{display:flex;flex-direction:column;gap:15px;max-width:480px;margin:60px auto 80px} #gnu_guide .tabs a{display:flex;align-items:center;padding:0 30px;height:80px;border-radius:12px;font-size:22px;font-weight:600;line-height:1;background:#f5f5f5} #gnu_guide .tabs a span{padding:10px 20px;margin-left:auto;border-radius:30px;font-size:15px;color:#fff;background:var(--dark);transition:all .2s} #gnu_guide .share{margin-bottom:80px;font-size:15px;line-height:1.65;text-align:center} #gnu_guide .share p{margin-bottom:25px;font-size:25px;font-weight:700;color:#111;line-height:1.45} #gnu_guide .share a{display:inline-block;text-decoration:underline;color:var(--primary)} #gnu_guide .share button{display:flex;align-items:center;justify-content:center;gap:6px;width:200px;height:60px;margin:30px auto;border-radius:60px;font-size:19px;font-weight:600;color:#fff;background:var(--primary)} #gnu_guide .share button svg{width:20px;height:20px;stroke-width:3px} #gnu_guide .cont+.cont{margin-top:100px} #gnu_guide .cont01{text-align:center} #gnu_guide .cont02 ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:25px} #gnu_guide .cont02 ul li{display:flex;flex-direction:column;text-align:center;padding:30px 50px;border-radius:12px;border:1px solid var(--primary);font-weight:500;color:#222;line-height:1.65;background:#f2fff9} #gnu_guide .cont02 ul li p{margin-bottom:10px;font-size:17px;font-weight:600;color:var(--primary)} #gnu_guide .cont03 .tbl_area{padding:50px;margin-top:25px;border-radius:20px;background:#f5f5f5} #gnu_guide .cont03 .tbl_area .txt{margin-top:50px;text-align:center} #gnu_guide .cont03 .tbl_area .txt .dot{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px} #gnu_guide .cont03 .tbl_area .txt .dot span{width:7px;height:7px;border-radius:50%;background:#222} #gnu_guide .cont03 .tbl_area .txt .dot span:first-of-type{opacity:.3} #gnu_guide .cont03 .tbl_area .txt .dot span:nth-of-type(2){opacity:.6} #gnu_guide .cont03 .tbl_area .txt b{font-size:19px;font-weight:600;color:#111} #gnu_guide .cont03 table{width:100%;padding:20px 40px;border-radius:20px;background:#fff} #gnu_guide .cont03 table th{padding:15px 0;border-bottom:1px solid var(--dark);font-size:16px;font-weight:600;color:#222} #gnu_guide .cont03 table th:not(:first-child){width:27%} #gnu_guide .cont03 table th:nth-child(2){border-radius:12px 12px 0 0;color:#fff;background:var(--dark)} #gnu_guide .cont03 table td{padding:15px;border-bottom:1px solid #e5e5e5;font-size:15px;line-height:1.65;text-align:center} #gnu_guide .cont03 table td.st{border-left:1px solid var(--dark);border-right:1px solid var(--dark)} #gnu_guide .cont03 table td b{font-weight:700;color:var(--primary)} #gnu_guide .cont03 table td:first-child{font-weight:600;color:#222} #gnu_guide .cont03 table tr:last-child td{border-color:none} #gnu_guide .cont03 table tr:last-child td.st{border-radius:0 0 12px 12px;border-bottom:1px solid var(--dark)} @media(hover:hover){ #gnu_guide .tabs a:hover span{background:var(--primary)} } @media(max-width:1360px){ #gnu_guide{padding:100px 20px} #gnu_guide .cont03 .tbl_area{padding:25px 25px 50px} #gnu_guide .cont03 table{padding:25px} } @media(max-width:768px){ #gnu_guide{padding:50px 12px;font-size:14px} #gnu_guide h1{margin-bottom:25px;font-size:28px} #gnu_guide h2{font-size:22px} #gnu_guide .tit{margin-bottom:15px} #gnu_guide .tit span{margin-bottom:10px;font-size:15px} #gnu_guide .tabs{gap:10px;margin:30px auto 40px} #gnu_guide .tabs a{height:55px;padding:20px 15px;font-size:16px} #gnu_guide .tabs a span{padding:8px 15px;font-size:12px} #gnu_guide .share{margin-bottom:50px;font-size:13px} #gnu_guide .share p{margin-bottom:15px;font-size:20px} #gnu_guide .share button{width:160px;height:50px;margin:20px auto;font-size:16px} #gnu_guide .share button svg{width:16px;height:16px} #gnu_guide h3{font-size:20px} #gnu_guide .cont03 .tbl_area{margin-top:15px;padding:15px 15px 30px;border-radius:12px} #gnu_guide .cont03 table{padding:0;border-radius:12px} #gnu_guide .cont03 table tr:last-child td{border-bottom:none} #gnu_guide .cont03 table th{padding:10px 0;font-size:14px} #gnu_guide .cont03 table td{padding:10px 0;font-size:13px} #gnu_guide .cont03 .tbl_area .txt{margin-top:30px} #gnu_guide .cont03 .tbl_area .txt b{font-size:16px;line-height:1.45} #gnu_guide .cont+.cont{margin-top:50px} #gnu_guide .cont02 ul{gap:10px} #gnu_guide .cont02 ul li{padding:15px} #gnu_guide .cont02 ul li p{font-size:15px} } @media(max-width:480px){ #gnu_guide{padding:40px 12px} #gnu_guide h1{font-size:22px} #gnu_guide h2{font-size:18px} #gnu_guide .share p{font-size:16px} #gnu_guide h3{font-size:17px} #gnu_guide .cont02 ul{grid-template-columns:repeat(1,1fr)} } /* 설치 가이드 */ #gnu_guide_set{max-width:860px;margin:0 auto;padding:120px 0;font-size:16px;font-weight:500} #gnu_guide_set *{word-break:keep-all} #gnu_guide_set .pl{white-space:pre-line} #gnu_guide_set h1{margin-bottom:35px;font-size:38px;font-weight:700;line-height:1.4;color:#111;text-align:center} #gnu_guide_set h2{position:sticky;top:0;z-index:101;padding:15px 0;font-size:26px;font-weight:700;line-height:1.4;color:#111;text-align:center;background:var(--pale)} #gnu_guide_set h2~h2{margin-top:80px} #gnu_guide_set h2:before{display:block;content:"";position:absolute;top:0;z-index:-1;width:120%;height:100%;left:50%;transform:translateX(-50%);background:var(--pale)} #gnu_guide_set .tabs{display:flex;flex-direction:column;gap:15px;max-width:480px;margin:40px auto} #gnu_guide_set h1+.tabs{margin-bottom:60px} #gnu_guide_set .tabs a{display:flex;align-items:center;padding:0 25px;height:65px;border-radius:12px;font-size:18px;font-weight:600;line-height:1;background:#fff} #gnu_guide_set .tabs a span{padding:10px 20px;margin-left:auto;border-radius:30px;font-size:13px;color:#fff;background:var(--dark);transition:all .2s} #gnu_guide_set .tabs a.on{cursor:default;color:#aaa} #gnu_guide_set .tabs a.on span{background:var(--primary)} #gnu_guide_set .num{display:flex;align-items:baseline;gap:10px;margin:30px 0 15px;font-size:18px;font-weight:600;color:#111;line-height:1.65} #gnu_guide_set .num span{flex-shrink:0;width:40px;height:40px;border-radius:50%;font-size:15px;font-weight:600;color:#fff;line-height:40px;text-align:center;background:var(--dark)} #gnu_guide_set .num a{text-decoration:underline} #gnu_guide_set .num .red{font-style:normal;color:var(--pink)} #gnu_guide_set .num~.num{margin-top:60px} #gnu_guide_set .ps{padding-left:50px;margin-bottom:20px;font-size:14px;line-height:1.65} #gnu_guide_set .ps a{margin-left:10px} #gnu_guide_set .img{padding:25px;border-radius:12px;box-shadow:6px 6px 20px rgba(0,0,0,.1);text-align:center;background:#fff} #gnu_guide_set .img img{max-width:100%} #gnu_guide_set .img+.img{margin-top:15px} #gnu_guide_set .img.last{margin-bottom:80px} #gnu_guide_set .inq_btn{display:block;width:200px;height:60px;margin:30px auto;border-radius:60px;font-size:19px;font-weight:600;text-align:center;line-height:60px;color:#fff;background:var(--primary)} @media(hover:hover){ #gnu_guide_set .tabs a:not(.on):hover span{background:var(--primary)} } @media(max-width:1360px){ #gnu_guide_set{padding:100px 20px} } @media(max-width:1024px){ #gnu_guide_set h2:before{width:100%} } @media(max-width:768px){ #gnu_guide_set{padding:50px 12px;font-size:14px} #gnu_guide_set h1{font-size:28px} #gnu_guide_set h2{width:100%;top:90px;font-size:22px} #gnu_guide_set .tabs{gap:10px;margin:30px auto 40px} #gnu_guide_set .tabs a{height:55px;padding:20px 15px;font-size:16px} #gnu_guide_set .tabs a span{padding:8px 15px;font-size:12px} #gnu_guide_set h1+.tabs{margin-bottom:35px} #gnu_guide_set .num{margin:25px 0 10px;font-size:16px} #gnu_guide_set .num span{width:32px;height:32px;font-size:14px;line-height:32px} #gnu_guide_set .ps{margin-bottom:15px;padding-left:42px} #gnu_guide_set .img{padding:12px} #gnu_guide_set h2~h2{margin-top:50px} #gnu_guide_set .img.last{margin-bottom:50px} } @media(max-width:480px){ #gnu_guide_set{padding:40px 12px} #gnu_guide_set h1{margin-bottom:25px;font-size:22px} #gnu_guide_set h2{width:100%;top:90px;font-size:18px} #gnu_guide_set .num{margin-top:15px;font-size:15px} #gnu_guide_set .num span{width:28px;height:28px;font-size:13px;line-height:28px} #gnu_guide_set .num~.num{margin-top:40px} #gnu_guide_set .ps{padding-left:38px;font-size:13px} } /* 멤버십 */ @font-face{ font-family:'yg-jalnan'; src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight:normal; font-style:normal; } #membership{max-width:1320px;margin:0 auto;padding:50px 0;font-size:15px;font-weight:500} [data-aos=custom-blur-scale]{opacity:0;filter:blur(10px);transform:scale(0.6);transition-property:filter, opacity, transform!important} [data-aos=custom-blur-scale].aos-animate{opacity:1;filter:blur(0px);transform:scale(1)} [data-aos=custom-blur-left]{opacity:0;filter:blur(10px);transform:translate(50px);transition-property:filter, opacity, transform!important} [data-aos=custom-blur-left].aos-animate{opacity:1;filter:blur(0px);transform:translate(0)} #membership *{word-break:keep-all} #membership .pl{white-space:pre-line} #membership h2{margin-bottom:30px;font-size:28px;font-weight:700;line-height:1.4;color:#111} #membership h2~h2{margin-bottom:20px} #membership .top{overflow:hidden;position:relative;padding:80px 0 60px;margin-bottom:50px;border-radius:12px;font-size:18px;line-height:1.6;font-weight:400;text-align:center;color:#fff;background:#111} #membership .top .flow_txt{position:absolute;left:0;top:17%;font-size:75px;font-weight:600;color:rgba(255,255,255,.1);letter-spacing:10px;white-space:nowrap;overflow:hidden;animation:flowText 30s linear infinite} @keyframes flowText{0%{opacity:0;transform:translateX(0)}10%{opacity:1;transform:translateX(-10%)}100%{transform:translateX(-100%)}} #membership .top .st{font-weight:500;color:#00dd46} #membership .top h1{margin-bottom:40px;font-size:70px;font-weight:700;color:#fff;line-height:1.3} #membership .top h1 b{position:relative;z-index:1;font-weight:700} #membership .top h1 b i{font-style:normal} #membership .top h1 span{display:flex;justify-content:center;line-height:1} #membership .top h1 span i{z-index:1;transform:translateY(-12px) rotate(-10deg);width:145px;height:50px;margin:0 -10px;border-radius:30px;font-size:16px;font-weight:500;line-height:50px;font-style:normal;background:#00dd46} #membership .top h1 span i:last-child{z-index:0;transform:translateX(-10px) translateY(22px) rotate(10deg);color:#fff;background:#143aff} #membership .top ul{display:flex;justify-content:center;width:max-content;margin:40px auto 0;border-radius:12px;background:#fff} #membership .top ul li{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:250px;padding:25px 20px;font-size:15px;font-weight:500;color:#777} #membership .top ul li+li{border-left:1px solid #e1e1e1} #membership .top ul li span{padding:6px 20px;border-radius:20px;font-size:11px;font-weight:500;line-height:1;color:#fff;background:#111} #membership .top ul li p{margin:25px 0 15px;font-size:22px;font-weight:700;color:#111;white-space:pre-line;line-height:1.35} #membership .tabs{display:flex} #membership .tabs button{width:50%;height:70px;border-bottom:3px solid #111;font-size:18px;font-weight:700;color:#999} #membership .tabs button span{display:block;margin-bottom:5px;font-size:13px;color:#143aff} #membership .tabs button.active{border:3px solid #111;border-bottom:none;border-radius:12px 12px 0 0;color:#111;color:#111} #membership .tab_conts{margin-bottom:30px} #membership .tab_cont{display:none;padding:50px 0 80px} #membership .tab_cont.active{display:block} #membership .levels{display:flex;border:1px solid #e5e5e5;border-radius:12px} #membership .level{width:25%;padding:35px} #membership .level .m_vw{display:none;width:125px;margin:0 auto 15px;border:1px solid #111;border-radius:50px;cursor:pointer;color:#111;text-align:center} #membership .level + .level{border-left:1px solid #e5e5e5} #membership .level .t0{display:flex;flex-direction:column;gap:20px;margin-bottom:15px;text-align:center} #membership .level .t0 h3{font-size:22px;font-weight:700;color:#111} #membership .level .t0 > span{font-size:14px;font-weight:600;color:#aaa} #membership .level .t0 .icon{overflow:hidden;display:flex;width:160px;height:160px;margin:0 auto;border-radius:12px;background:#f1f1f1} #membership .level .t0 .icon img{margin:auto;width:100%} #membership .level .t1 dl dt{padding-bottom:20px;border-bottom:2px solid #111;font-size:18px;text-align:center;line-height:1.4;color:#111} #membership .level .t1 dl dt span{display:block;width:22px;height:22px;margin:0 auto 15px;padding-top:1px;border-radius:50%;color:#fff;line-height:19px;background:#111} #membership .level .t1 dl dt span svg{width:12px;height:12px;stroke-width:3.5px} #membership .level .t1 dl dt b{display:block;margin-top:5px;font-size:12px;font-weight:600;color:#aaa} #membership .level .t1 dl dd{display:flex;align-items:center;padding:5px 10px;border-bottom:1px solid #e1e1e1;font-weight:600;color:#111;text-align:left} #membership .level .t1 dl dd:before{display:inline-block;content:"";vertical-align:middle;width:2px;height:2px;margin-right:8px;border-radius:50%;background:#111} #membership .level .t1 dl dd span{margin:2px 0 0 auto;font-size:12.5px;font-weight:500;color:#143aff} #membership .level .t1 .rate{padding:20px 0;line-height:1.3;text-align:center} #membership .level .t1 .rate p{font-size:26px;font-weight:700;color:#111} #membership .level .t2 .cp{position:relative;padding:25px;font-size:12px;color:#888;background:#f1f1f1} #membership .level .t2 .cp:before, #membership .level .t2 .cp:after{content:"";position:absolute;bottom:-10px;z-index:1;width:20px;height:20px;border-radius:50%;background:#fff} #membership .level .t2 .cp:before{left:-10px} #membership .level .t2 .cp:after{right:-10px} #membership .level .t2 .cp span{display:flex;align-items:center;font-size:14px;color:#111} #membership .level .t2 .cp span b{margin-left:auto;padding:6px 10px;border-radius:20px;font-size:13px;font-weight:500;line-height:1;color:#fff;background:#111} #membership .level .t2 .cp p{padding-top:10px;font-size:20px;font-weight:700;color:#111} #membership .level .t2 .cp.first{border-radius:12px 12px 0 0;color:#aaa;background:#111} #membership .level .t2 .cp.first span, #membership .level .t2 .cp.first p{color:#fff} #membership .level .t2 .cp.first + .first{border-top:1px dashed #999} #membership .level .t2 .cp.first .dft_btn{position:absolute;top:-20px;right:15px;width:55px;height:55px;border-radius:50%;line-height:67px;text-align:center;background:#143aff;transition:all .2s} #membership .level .t2 .cp.first .dft_btn svg{stroke:#fff} #membership .level .t2 .cp.burst{background:#333} #membership .level .t2 .cp.flow{background:#555} #membership .level .t2 .cp.rookie{background:#666} #membership .level .t2 .cp.second ~ .cp{border-top:1px dashed #bbb} #membership .level .t3 .down_btn{overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;width:100%;gap:10px;height:60px;border-radius:0 0 12px 12px;border:1px solid #bbb;border-top:1px dashed #bbb;font-size:15px;font-weight:600;color:#777;background:#fff;transition:all .2s} #membership .level .t3 .down_btn:before, #membership .level .t3 .down_btn:after{content:"";position:absolute;top:-10px;z-index:1;width:20px;height:20px;border:1px solid #bbb;border-radius:50%;background:#fff} #membership .level .t3 .down_btn:before{left:-10px} #membership .level .t3 .down_btn:after{right:-10px} #membership .level .t3 .down_btn svg{stroke:#777;transition:all .2s} @media(hover:hover){ #membership .level .t3 .down_btn:hover{color:#111} #membership .level .t3 .down_btn:hover svg{stroke:#111} #membership .level .t2 .cp.first .dft_btn:hover{transform:translateY(5px)} } #membership .plus h3{margin-bottom:30px;font-size:28px;font-weight:700;line-height:1.4;color:#111;text-align:center} #membership .plus h3 span{color:#143aff} #membership .plus .t1{display:flex;align-items:center;padding:80px 8%;border-radius:12px;background:url(/sh_img/membership/plus_bg.jpg) repeat-x} #membership .plus .t1 .dot{position:relative;display:flex;justify-content:center;width:max-content} #membership .plus .t1 .dot p{width:60px;height:60px;margin:0 -3px;border-radius:50%;font-size:22px;font-weight:800;line-height:60px;text-align:center;color:#fff;background:#00dd46;font-family:'yg-jalnan'} #membership .plus .t1 .dot span{position:absolute;right:-30px;top:-10px;width:23px;height:5px;border-radius:10px;background:#00dd46;animation:spin 3s ease-out infinite} #membership .plus .t1 .dot span:before,#membership .plus .t1 .dot span:after{position:absolute;display:block;content:"";width:100%;height:100%;border-radius:5px;background:#00dd46} #membership .plus .t1 .dot span:before{transform:rotate(60deg)} #membership .plus .t1 .dot span:after{transform:rotate(-60deg)} @keyframes spin {0% {transform:rotate(0deg)}90% {transform:rotate(360deg)}100% {transform:rotate(360deg)}} #membership .plus .t1 .txt > span{display:inline-block;margin:40px 0 15px;font-size:22px;color:#00FF51} #membership .plus .t1 .txt > p{font-size:40px;font-weight:700;color:#fff;line-height:1.4; white-space:pre-line} #membership .plus .t1 .txt > p b{font-weight:700;color:#00FF51} #membership .plus .t1 .img{width:38%;margin-left:auto;color:#fff;text-align:right} #membership .plus .t1 .img img{width:100%} #membership .plus .t1 .img p{padding:20px 50px 0 0} #membership .plus .t2{max-width:1130px;margin:80px auto} #membership .plus .t2 h3{margin-bottom:10px} #membership .plus .t2 .s_txt{font-size:18px;text-align:center} #membership .plus .t2 .benefits{display:flex;gap:15px;align-items:center;justify-content:center;margin-top:50px} #membership .plus .t2 .benefits div{position:relative;width:300px;padding:30px;border-radius:12px;font-size:13px;color:#888;background:#f1f1f1} #membership .plus .t2 .benefits div.first{margin:-10px 10px 0 0;color:#aaa;background:#111} #membership .plus .t2 .benefits div.first span, #membership .plus .t2 .benefits div.first p{color:#fff} #membership .plus .t2 .benefits div.first:before, #membership .plus .t2 .benefits div.first:after{display:block;content:"";position:absolute;left:6px;top:6px;z-index:-1;width:100%;height:100%;border-radius:12px;background:#555;box-shadow:1px 1px 4px rgba(0,0,0,.1)} #membership .plus .t2 .benefits div.first:after{left:12px;top:12px;z-index:-2;background:#888} #membership .plus .t2 .benefits div span{display:flex;align-items:center;font-size:15px;font-weight:600;color:#111} #membership .plus .t2 .benefits div span b{margin-left:auto;padding:10px 15px;border-radius:20px;font-size:15px;font-weight:500;line-height:1;color:#fff;background:#143aff} #membership .plus .t2 .benefits div p{padding-top:10px;font-size:30px;font-weight:700;color:#111} #membership .plus .t2 .benefits div span a{margin-left:auto;padding:10px 20px;border-radius:20px;font-size:15px;font-weight:500;line-height:1;color:#fff;background:#ff5500} #membership .plus .t2 .benefits div span a i{font-style:normal;animation: btn 1s infinite;} #membership .plus .t2 .benefits .plus{flex-shrink:0;position:relative;width:25px;height:25px} #membership .plus .t2 .benefits .plus:before,#membership .plus .t2 .benefits .plus:after{position:absolute;top:0;display:block;content:"";border-radius:5px;background:#111} #membership .plus .t2 .benefits .plus:before{left:10px;width:5px;height:100%} #membership .plus .t2 .benefits .plus:after{top:10px;width:100%;height:5px} #membership .plus .t3{margin:100px auto 40px} #membership .plus .t3 h3{ text-align:center} #membership .plus .t3 ul{margin:0 auto 40px;text-align:center} #membership .plus .t3 ul li{font-size:20px;color:#888} #membership .plus .t3 ul li+li{margin-top:10px} #membership .plus .t3 ul li span{font-weight:700;color:#111} #membership .plus .t3 ul li span:after{display:inline-block;vertical-align:middle;content:"";width:3px;height:3px;margin:0 12px;border-radius:50%;background:#111} #membership .plus .t3 a{display:block;max-width:480px;height:65px;margin:0 auto;border-radius:6px;font-size:18px;font-weight:600;color:#fff;line-height:65px;text-align:center;background:#00dd46} #membership .plus .t3 a+a{margin-top:10px;border:1px solid #00dd46;color:#00dd46;line-height:63px;background:#fff} #membership .plus .t4{max-width:480px;margin:0 auto} #membership .plus .t4 dl+dl{margin-top:30px} #membership .plus .t4 dl dt{margin-bottom:10px;font-size:16px;font-weight:600;line-height:1.4;color:#111} #membership .plus .t4 dl dd{font-size:13px;font-weight:400;line-height:1.65} #membership .plus .t5{text-align:center} #membership .plus .t5 div img{width:880px;border-radius:13px;box-shadow:4px 4px 16px rgba(0,0,0,.1)} #membership .ul_box{padding:35px;margin-bottom:80px;border:1px solid #e5e5e5;border-radius:12px} #membership .ul_box li{font-weight:400;} #membership .ul_box li+li{margin-top:5px} #membership .ul_box li b{font-weight:400;text-decoration:underline;color:#111} #membership .ul_box li:before{display:inline-block;content:"";vertical-align:middle;width:2px;height:2px;margin-right:8px;border-radius:50%;background:#111} #membership .ul_box li a{padding:4px 8px;margin-left:5px;border:1px solid #e1e1e1;border-radius:3px;font-size:12px;font-weight:500;color:#555;white-space:nowrap;background:#f5f5f5} @keyframes btn{to{opacity:1}50%{opacity:0}from{opacity:1}} /* 반응형 [s] */ @media (max-width:1200px){ #membership .plus .t1{padding:80px 5%} #membership .plus .t1 .txt > p{font-size:38px} } @media (max-width:1024px){ #membership{padding:20px;font-size:14px} #membership .top{margin-bottom:30px;padding:50px 0;font-size:15px} #membership .top h1{font-size:60px} #membership .top .flow_txt{font-size:50px} #membership .top ul li{width:220px} #membership .top ul li p{margin:15px 0;font-size:18px} #membership h2{font-size:22px} #membership .tabs button{font-size:16px} #membership .level{padding:20px} #membership .level .t0 h3{font-size:18px} #membership .level .t0 .icon{width:100px;height:100px} #membership .level .t1 dl dt{font-size:16px} #membership .level .t2 .cp p{font-size:18px} #membership .tab_conts{margin-bottom:0} #membership .tab_cont{padding:50px 0} #membership .ul_box{padding:25px} #membership .level .t3 .down_btn{font-size:14px} #membership .level .t3 .down_btn svg{width:17px} #membership .plus .t1{padding:50px} #membership .plus .t1 .txt > span{margin-top:25px;font-size:18px} #membership .plus .t1 .txt > p{font-size:3.4vw} #membership .plus .t1 .dot p{width:50px;height:50px;font-size:16px;line-height:50px} #membership .plus .t1 .dot span{top:-8px;right:-22px;width:19px;height:4px} #membership .plus .t2 .benefits div span{flex-wrap:wrap} #membership .plus h3{font-size:22px} #membership .plus .t3 ul li{font-size:16px} #membership .plus .t5 div img{width:100%} } @media (max-width:768px){ #membership{padding:20px 12px} #membership .top{margin-bottom:15px;padding:30px 0} #membership .top h1{margin-bottom:20px;font-size:40px;line-height:1.5} #membership .top h1 span i{width:120px;height:35px;font-size:13px;line-height:35px} #membership .top h1 span i:last-child{transform:translateX(-10px) translateY(10px) rotate(10deg)} #membership .top ul{width:auto;margin:30px 15px 0} #membership .top ul li{font-size:13px} #membership .top ul li p{margin:10px 0;font-size:16px;white-space:normal} #membership h2{margin-bottom:15px;font-size:18px} #membership h2~h2{margin-bottom:10px} #membership .tabs button{height:50px} #membership .tab_cont{padding:20px 0 50px} #membership .tabs button span{margin-bottom:0} #membership .levels{flex-wrap:wrap} #membership .level{width:50%} #membership .level .t0{gap:10px;margin-bottom:15px} #membership .level .t0 h3{font-size:16px} #membership .level .t1 dl dt{font-size:14px} #membership .level .t2 .cp{padding:20px} #membership .level .t2 .cp p{padding-bottom:0} #membership .level .t2 .cp.first button{width:45px;height:45px} #membership .level:nth-of-type(3){border-left:none} #membership .level .t1 .rate p{font-size:22px} #membership .level .t3 .down_btn{height:55px} #membership .ul_box{padding:15px} #membership .ul_box li{line-height:1.5} #membership .ul_box li+li{margin-top:10px} #membership .plus .t1{gap:20px;flex-direction:column-reverse;padding:30px 15px} #membership .plus .t1 .img{width:auto;margin-left:0;text-align:center} #membership .plus .t1 .img img{max-width:400px;width:70%;} #membership .plus .t1 .img p{display:none} #membership .plus .t1 .dot p{width:40px;height:40px;font-size:15px;line-height:40px} #membership .plus .t1 .txt > span{margin:20px 0 5px;font-size:16px;text-align:center} #membership .plus .t1 .txt > p{font-size:22px;text-align:center} #membership .plus .t1 .dot{justify-content:center;margin:10px auto 0} #membership .plus .t2{margin:45px auto} #membership .plus .t2 .s_txt{font-size:15px} #membership .plus .t2 .benefits{display:grid;grid-template-columns: repeat(2, 1fr);gap:8px;align-items:stretch} #membership .plus .t2 .benefits div{width:auto} #membership .plus .t2 .benefits div.first{margin:0;grid-column:span 2} #membership .plus .t2 .benefits div.first:before, #membership .plus .t2 .benefits div.first:after{display:none} #membership .plus .t2 .benefits div p{padding-top:0;font-size:25px} #membership .plus .t2 .benefits .plus{display:none} #membership .plus h3{margin-bottom:10px;font-size:18px} #membership .plus .t3{margin:50px auto 40px} #membership .plus .t3 ul{margin:0 auto 25px} #membership .plus .t3 a{width:310px;height:50px;font-size:15px;line-height:50px} #membership .plus .t3 a+a{line-height:50px} } @media (max-width:480px){ #membership{font-size:13px} #membership .top{font-size:13px} #membership .top h1{font-size:35px} #membership .top .flow_txt{font-size:40px} #membership .top ul li{padding:15px} #membership .top ul li p{margin:10px 0 5px;font-size:14px} #membership .top ul li span{padding:5px 15px;font-size:10px} #membership .levels{gap:10px;border:none} #membership .level{width:100%;border:1px solid #e1e1e1;border-radius:13px} #membership .level .m_vw{display:block} #membership .level .t_wrap{display:none} #membership .level .t_wrap.on{display:block} #membership .level .t2 .cp p{padding-top:0} #membership .level:nth-of-type(3){border-left:1px solid #e1e1e1} #membership h2{font-size:16px} #membership .tabs button{height:45px;font-size:14px} #membership .tabs button span{font-size:11px} #membership .plus .t1 .txt > p{font-size:20px} #membership .plus .t1 .txt > span{font-size:15px} #membership .plus .t2 h3{margin-bottom:5px} #membership .plus .t2 .benefits{margin-top:25px} #membership .plus .t2 .benefits div{padding:15px} #membership .plus .t2 .benefits div p{font-size:20px} #membership .plus .t3 ul li{font-size:14px} #membership .level{padding:15px} #membership .level .t3 .down_btn{height:45px;border-top:none;border-radius:12px;color:#fff;background:#111} #membership .level .t3 .down_btn svg{stroke:#fff} #membership .level .t3 .down_btn:before, #membership .level .t3 .down_btn:after{display:none} #membership .level .t3.on .down_btn:before, #membership .level .t3.on .down_btn:after{display:block} #membership .level .t3.on .down_btn{border-radius:0px 0px 12px 12px;border-top:1px dashed #bbb;color:#777;background:#fff} #membership .level .t3.on .down_btn svg{stroke:#777} } @media (max-width:390px){ #membership{padding:15px;font-size:12px} #membership .top{margin-bottom:15px;padding:40px 0;font-size:12px} #membership .top h1{font-size:35px} #membership .top h1 span i{width:100px;height:30px;font-size:12px;line-height:30px} #membership .top ul li{padding:10px} #membership .top ul li p{font-size:13px} #membership .level .t0{margin-bottom:10px} #membership .level .t0 h3{font-size:15px} #membership .level .t2 .cp p{font-size:16px} #membership .plus h3{font-size:16px} #membership .plus .t1 .dot p{width:35px;height:35px;font-size:12px;line-height:35px} #membership .plus .t1 .txt > p{font-size:17px} #membership .plus .t2 .benefits div span{font-size:13px} #membership .plus .t2 .benefits div span a{font-size:11px} #membership .plus .t2 .benefits div span b{font-size:11px} #membership .plus .t3 a{width:100%} } /* 구매 체험하기 */ #buying_guide{background:none !important} #buying_guide .new-demo{max-width:1320px;margin:0 auto;padding:140px 0} #buying_guide .new-demo .tit{text-align:center} #buying_guide .new-demo h1{margin-bottom:30px;font-size:38px;font-weight:700;line-height:1.4;white-space:pre-line;color:#222} #buying_guide .caution{font-size:18px;color:#222} #buying_guide .new-demo .sp_file{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:70px} #buying_guide .new-demo .sp_file.figma{display:block} #buying_guide .new-demo .sp_file.figma dd{display:flex;gap:15px} #buying_guide .new-demo .sp_file.figma dl dd a+a{margin-top:0} #buying_guide .new-demo .sp_file li{font-size:14px} #buying_guide .new-demo .sp_file li > p{position:relative;padding:10px 0;border-radius:50px;font-size:18px;font-weight:600;color:#fff;text-align:center;background:#222;transition:all .3s} #buying_guide .new-demo .sp_file li > p:after{position:absolute;z-index:-1;content:'';bottom:-5px;left:50%;width:20px;height:20px;border-radius:5px;background:#222;transform:translateX(-50%) rotate(45deg);transition:all .3s} #buying_guide .new-demo .sp_file li > div{margin-top:30px;padding:20px;border-radius:13px;border:1px solid #e1e1e1} #buying_guide .new-demo .sp_file li b{font-weight:500;color:var(--primary)} #buying_guide .new-demo .sp_file li .br{font-size:13px;white-space:pre-line} #buying_guide .new-demo .sp_file li dl+dl{margin-top:15px} #buying_guide .new-demo .sp_file li dl dt{margin-bottom:5px;font-size:16px;font-weight:500;color:#111} #buying_guide .new-demo .sp_file li dl dd{flex-grow:1} #buying_guide .new-demo .sp_file li dl dd a{display:flex;align-items:center;justify-content:space-between;width:100%;height:35px;padding:0 8px;border-radius:3px;border:1px solid #e9e9e9;font-size:13px;font-weight:500;line-height:28px;color:#777;box-shadow:2px 2px 3px rgba(0,0,0,.1);transition:all .15s} #buying_guide .new-demo .sp_file li dl dd a+a{margin-top:6px} #buying_guide .new-demo .sp_file li dl dd a span{font-size:16px;color:#aaa} #buying_guide .new-demo .sp_file li:hover>p{background:var(--primary)} #buying_guide .new-demo .sp_file li:hover>p:after{background:var(--primary)} #buying_guide .new-demo .ntc{margin-top:50px;padding:30px;border-radius:12px;font-weight:400;background:#f2f2f2} #buying_guide .new-demo .ntc li:before{display:inline-block;content:"";vertical-align:middle;width:2px;height:2px;margin-right:8px;border-radius:50%;background:#111} /* 반응형 [s] */ @media (max-width:1024px){ #buying_guide .new-demo{padding:75px 15px 100px} #buying_guide .new-demo h1{font-size:34px} #buying_guide .new-demo .sp_file{grid-template-columns:repeat(3,1fr)} #buying_guide .new-demo .sp_file li > p{font-size:15px} } @media (max-width:768px){ #buying_guide .new-demo h1{margin-bottom:15px;font-size:26px} #buying_guide .caution{font-size:16px} #buying_guide .new-demo .sp_file{margin-top:50px;grid-template-columns:repeat(2,1fr)} #buying_guide .new-demo .sp_file li:last-child{grid-column:span 2} #buying_guide .new-demo .ntc{padding:20px;border-radius:5px;font-size:14px} } @media (max-width:480px){ #buying_guide .new-demo h1{font-size:22px} #buying_guide .caution{font-size:15px} #buying_guide .new-demo .sp_file{grid-template-columns:repeat(1,1fr)} #buying_guide .new-demo .sp_file li:last-child{grid-column:auto} #buying_guide .new-demo .sp_file li dl dt{font-size:15px} #buying_guide .new-demo .sp_file li > div{margin-top:20px;padding:15px;border-radius:5px} #buying_guide .new-demo .ntc{font-size:13px} } @media (max-width:390px){ #buying_guide .new-demo .sp_file li dl dt{font-size:14px} #buying_guide .new-demo .sp_file li dl dd a{font-size:12px} #buying_guide .new-demo .sp_file li > p{padding:6px 0} } /* 반응형 [e] */