@charset "utf-8";
/******************************************
Author : 가비아CNS
Author URL : clickn.co.kr
Creation Date : 2021-04-01
Modify Date : 2021-04-01
*******************************************/
/* header */
#layout_header{position:relative; top:0; left:0; z-index:100; width:100%; height:72px; background:#fff; display: flex; align-items: center; transition:transform .3s; padding: 0 80px}
#layout_header.fixed{position:fixed; top:0; left:0;transform:0}
#layout_header .w_container{display:flex; justify-content: space-between; align-items:center; height:100%;}
#layout_header aside{display:flex; flex:1; justify-content: flex-end;}
#layout_header .aside_inner{display:flex; }
#layout_header .gnb{display: flex;}
#layout_header .gnb > li{font-size:clamp(15px, 1.7vw, 17px);}
#layout_header .gnb > li.bar{padding-left:.7em;}
#layout_header .gnb > li.bar::before{content: ''; margin-right: 1.4em; display: block; position: absolute; top: calc(50% - 6px); left: 0; height: 12px; border-right: 1px solid #bbb;}
#layout_header .gnb > li > a {white-space: nowrap;}
#layout_header .bts .btn_gnb{padding:.5em 10px .55em; margin-left:10px; margin-right:10px; font-size: clamp(13px, 1.5vw, 15px); line-height:1; border-radius:8px;}
#layout_header .bts .btn_gnb:hover{text-decoration: underline;}
@keyframes gradient { 0% {background-position: 0% 50%;} 100% {background-position: 100% 50%;}}
.top_bnr .topbnr_sl{overflow: hidden; position:relative;}
.top_bnr .topbnr_sl .swiper-container{height:min(100px, 14.7058vw);}
.top_bnr .topbnr_sl a{display: block; text-align: center;}
.top_bnr .topbnr_sl a img{width:min(680px, 100%); height: auto; position: absolute; left: 50%; transform: translateX(-50%);}
.top_bnr .topbnr_sl a .texts {display: flex; flex-direction: column; align-items: center; position: relative; color: white; height: 100px; justify-content: center;}
.top_bnr .topbnr_sl a .texts h3 {font-size: clamp(20px, 2.5vw, 22px); font-weight: 600;}
.top_bnr .topbnr_sl a .texts p {font-size: clamp(16px, 2.5vw, 18px)}
.top_bnr .topbnr_sl .swiper-button-prev,
.top_bnr .topbnr_sl .swiper-button-next{display: block; position: absolute; top:calc(50% - 15px); left: auto; bottom: auto; right:75px; z-index: 100; width: 30px; height: 30px; margin-top:0; background:url('data:image/svg+xml,') center / 13px auto no-repeat;}
.top_bnr .topbnr_sl .swiper-button-prev{transform:rotate(0) translateY(-15px);}
.top_bnr .topbnr_sl .swiper-button-next{transform:scale(-1) translateY(-10px) translateX(-1px);}
.top_bnr .topbnr_sl .swiper-button-prev::after,
.top_bnr .topbnr_sl .swiper-button-next::after{content:none;}
@media only screen and (min-width:1149px){
.wrap_header{max-width:1920px;height:72px;margin:0 auto;}
.top_bnr .topbnr_sl .swiper-pagination{display:none;}
#layout_header aside nav{position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
#layout_header .gnb > li{display:inline-block; position:relative;}
#layout_header .gnb > li + li{margin-left:.7em;}
#layout_header .gnb > li > a{display:inline-block; height:72px; line-height:72px; display: flex; align-items: center;}
#layout_header .gnb > li > a > span{padding:.4em .7em .5em; line-height:1; border-radius:8px;}
#layout_header .gnb > li:hover > a > span{background:#EAEEF5;}
#layout_header .lnb::before{content:''; display: block; position: absolute; top:-8px; left:0; right:0; height:8px; background:transparent;}
#layout_header .lnb {opacity:0; position:absolute; top:100%; left: 0; padding: 1.5rem; display: flex; flex-direction: column; border-radius:8px; pointer-events:none; transform: translateY(0); transition:opacity .2s, transform .1s; background:#fff; box-shadow: 0px 0px 15px 0px #00000033; gap: .5rem; width: max-content}
#layout_header .lnb h3 {
font-size: 14px;
color: #8F979F;
font-weight: 700;
}
#layout_header .gnb > li:hover .lnb{opacity:1; pointer-events:initial; transform: translateY(8px);}
#layout_header .lnb ul {display: flex; gap: 1rem }
#layout_header .lnb ul:not(:last-of-type) {margin-bottom: 1rem}
#layout_header .lnb i {width: 48px; height: 48px; background-color: #EAEEF5; border-radius: 3px; display: flex; align-items: center; justify-content: center;}
#layout_header .gnb > li .lnb i img {transition: transform .25s;}
#layout_header .gnb > li .lnb a:hover i img {transform: translateY(-2px);}
#layout_header .lnb li {flex: 0 0 auto; width: 130px}
#layout_header .lnb li a{display:block; font-size:1.064rem; font-weight:400; line-height:1.9; color:#333; display: flex; align-items: center; gap: .5rem; border-radius: 3px; transition: color .25s;}
#layout_header .lnb li a[target="_blank"]::after{content:''; display:inline-block; width:1em; height:1em; margin-left:.2em; background:url(/images/common/ico_link.svg) center center no-repeat;}
#layout_header .lnb li a:hover{color: #1971E3; text-decoration: underline; text-underline-offset: 3px;}
#layout_header .bts{display: flex; align-items: center;margin:auto 0 auto auto;}
#layout_header .bts .personal{display:inline-block;}
#layout_header .bts .name b{display: inline-block; max-width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1;}
#layout_header .bts > a:first-of-type::before {content: none;}
#layout_header .bts .btn_comm{height:44px; line-height:42px;}
#layout_header .bts .btn_mypage{position:relative; margin-left:1em; color:#0066ff; text-decoration:underline; white-space:nowrap;}
#layout_header .bts .btn_mypage::before{content:''; display:inline-block; position:absolute; left:0; top:calc(50% - .53em); height:1.07em; border-left:1px solid #e4e4e4;}
#layout_header .bts .btn_logout{margin-left:1em;}
#layout_header .bts .btn_start{position:relative; margin-left:4px; border-radius:6px; min-width: min(15vw, 180px);}
#layout_header .bts .btn_login {position: relative;}
#layout_header .bts .btn_login::before{content:''; display:inline-block; position:absolute; left:-10px; top:calc(50% - 6px); height:12px; border-left:1px solid #e4e4e4;}
#layout_header .btn_aside{display:none;}
}
/* 상단메뉴 레이아웃 깨짐방지 */
@media screen and (max-width: 1684px) {
#layout_header aside nav{left:200px; transform:translateX(0);}
#layout_header .gnb > li > a > span{padding-left:.4em; padding-right:.4em;}
}
@media screen and (max-width: 1379px) {
#layout_header{padding: 0 20px !important;}
#layout_header aside nav{left:140px;}
#layout_header .gnb > li + li{margin-left: .5em;}
#layout_header .gnb > li > a > span{padding-left:.4em; padding-right:.4em;}
#layout_header .bts .btn_gnb{padding-left:0; padding-right:0;}
#layout_header .bts .btn_start{min-width:auto;}
}
@media only screen and (max-width:1150px) {
.wrap_header{height:52px; position: relative; z-index: 1000;}
.top_bnr .topbnr_sl .swiper-button-prev,
.top_bnr .topbnr_sl .swiper-button-next{display: none;}
.top_bnr .topbnr_sl .swiper-pagination{position:absolute; top:6px; right:6px; left:auto; height: 21px; width: auto; min-width: 50px; padding-left: .5em; padding-right: .5em; border-radius: 10px; font-size: 13px; font-family: Roboto; line-height:21px; color: #fff; text-align: center; background: rgba(0,0,0,.2);}
#layout_header{height:52px;}
#layout_header.fixed{top: 0;}
#layout_header .logo{max-width:82px;}
#layout_header aside{display:none; overflow:auto; position:fixed; top:0; left:0; z-index:200; width:100vw; height:100svh; background:#fff;}
#layout_header aside .aside_inner{flex-flow:column; min-height:100%; position:relative; margin-left:0; padding-bottom:200px;}
#layout_header .gnb{flex-direction:column; padding:160px 20px 0;}
#layout_header .gnb > li + li{margin-left: 0;}
#layout_header .gnb > li > a{display:flex; justify-content: space-between; align-items: center; height:2.5em; font-size:1.14rem; font-weight:500; color:#333; line-height:2.5;}
#layout_header .gnb > li > a > span{padding-left:0; padding-right:0;}
#layout_header .gnb > li.has > a::after{content:''; display:inline-block; position:relative; top: -3px; width:8px; height:8px; border-left: 2px solid #333; border-bottom: 2px solid #333; transform:rotate(-45deg);}
#layout_header .gnb > li.has > a.on::after{transform: rotate(135deg); top: 0;}
#layout_header .gnb > li.new > a span{position: relative;}
#layout_header .gnb > li.new > a span::after{content:'New'; display:inline-block; width:44px; height:24px;; margin-left:6px; margin-top:-5px; font-weight:400; border-radius:12px; font-family:'Roboto'; font-size:.92rem; color:#fff; line-height:24px; text-align:center; background:#1971e3; vertical-align:middle;}
#layout_header .gnb > li.bar{position: relative; padding-top:.5em; padding-left:0; margin-top:.5em;}
#layout_header .gnb > li.bar::before{top:0; left:0; right:0; height:0; width:100%; border-top: 1px solid #EEEEEE;}
#layout_header .lnb{display:none; padding-top:.2em; padding-bottom:.4em;}
#layout_header .lnb ul {display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap;}
#layout_header .lnb ul:not(:last-of-type) {margin-bottom: 1rem;}
#layout_header .lnb h3 {margin-bottom: 5px;}
#layout_header .lnb li a{display:flex; align-items: center; gap: 5px; font-size:1rem; line-height:2;}
#layout_header .lnb li a[target="_blank"]::after{content:''; display:inline-block; width:1em; height:1em; margin-left:.2em; background:url(/images/common/ico_link.svg) center center no-repeat; opacity:.5;}
#layout_header .lnb li.soon span::after{content:'예정'; display:inline-block; width:38px; height:18px; padding-right:2px; margin-left:6px; margin-top:-2px; font-weight:100; border-radius:9px; font-size:.8rem; color:#fff; line-height:16px; text-align:center; background:#f58800; vertical-align:middle;}
#layout_header .lnb li.new span::after{content:'NEW'; display:inline-block; width:38px; height:18px; padding-right:2px; margin-left:6px; margin-top:-2px; font-weight:100; border-radius:9px; font-size:.8rem; color:#fff; line-height:16px; text-align:center; background:#f58800; vertical-align:middle;}
#layout_header .bts{display:flex; margin:30px 16px 0; font-size:1rem; color:#333; border-radius: 6px; background:#F2F5FA;}
#layout_header .bts a{position:relative; flex:1; height:48px; padding:0 !important; line-height:48px !important; text-align: center;}
#layout_header .bts a + a:not(.btn_start)::before{content:''; display: inline-block; position:absolute; left:0; top:50%; height:16px; border-left: 1px solid #ddd; transform:translateY(-50%);}
#layout_header .bts .personal{display:inline-block; position:absolute; top:100px; left:20px; width:calc(100vw - 40px); padding-bottom:20px; border-bottom:1px solid #58616d; color:#fff;}
#layout_header .bts .btn_start{position:absolute; top:80px; left:16px; width:calc(100% - 32px); height:48px; margin-left:0; line-height:48px;}
#layout_header .bts .btn_comm{position:absolute; bottom:64px; left:0; right:0; text-align:center; border:none; color:#929ba5;}
#layout_header .bts .btn_comm span{border-bottom:1px solid #929ba5;}
#layout_header .bts .btn_mypage{position:relative; margin-left:1.6em; white-space:nowrap; text-decoration:underline;}
#layout_header .bts .btn_mypage::before{content:''; display:inline-block; position:absolute; left:calc(-.5em - 4px); top:calc(50% - .4em); height:1em; border-left:1px solid #e4e4e4; opacity:.1;}
#layout_header .bts .btn_mypage.before {display: none;}
#layout_header .bts .btn_logout{position:relative; height:1.5em; margin-left:1em; line-height:1.5;}
#layout_header .bts .btn_logout::before{content:''; display:inline-block; position:absolute; left:0; top:calc(50% - .53em); height:1.07em; border-left:1px solid #58616d;}
#layout_header .bts .btn_gnb:hover{background:none;}
#layout_header .btn_aside{display:block; z-index:201; width:20px; height:20px;}
#layout_header .btn_aside .line{display:block; width:100%; height:2px; background-color:#353535; margin:5px auto; border-radius:2px; transition:0.3s ease-in-out; transform-origin:55% 50%}
#layout_header .btn_aside.opened{position:fixed; top:20px; right:20px;}
#layout_header .btn_aside.opened .line{background:#000 !important;}
#layout_header .btn_aside.opened .line:nth-child(1){-webkit-transform: translateY(4px) rotate(45deg);-o-transform: translateY(4px) rotate(45deg);transform:translateY(4px) rotate(45deg);}
#layout_header .btn_aside.opened .line:nth-child(2){-webkit-transform: translateY(-4px) rotate(-45deg);-o-transform: translateY(-4px) rotate(-45deg);transform:translateY(-4px) rotate(-45deg);}
#layout_header .lnb i {
flex: 0 0 auto;
width: 32px;
height: 32px;
background-color: #EAEEF5;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
#layout_header .lnb i img {
max-height: 24px;
max-width: 24px;
}
}
@media screen and (max-width: 640px) {
.top_bnr .topbnr_sl a .texts {
scale: .7;
height: auto;
}
}
/* footer */
#layout_footer{padding-top:56px; padding-bottom:56px; border-top: 1px solid #eee; background-color: white;}
#layout_footer .top{display:flex; justify-content:space-between; padding-bottom:2em; margin-bottom:2em; border-bottom:1px solid #eee; gap: 5rem}
#layout_footer .top .sitemap{display:flex; justify-content:flex-start; flex: 1; gap: 40px;}
#layout_footer .top .sitemap li {flex: 1}
#layout_footer .top .sitemap .cate{display:inline-block; margin-bottom:1em; font-weight:700; color:#333; white-space:nowrap; }
#layout_footer .top .sitemap .lnb li + li{margin-top:.5em;}
#layout_footer .top .sitemap .lnb li a{display:inline-block; min-width: 5em; font-size:.93rem; color:#777; white-space:nowrap;}
#layout_footer .top .sitemap .lnb li a[target="_blank"]::after{content:''; display:inline-block; width:1em; height:1em; margin-left:.2em; background:url(/images/common/ico_link.svg) center center no-repeat; opacity:.7;}
#layout_footer .top .sitemap .lnb li.soon span::after{content:'예정'; display:inline-block; width:38px; height:18px; padding-right:2px; margin-left:6px; margin-top:-2px; font-weight:100; border-radius:9px; font-size:.8rem; color:#333; line-height:16px; text-align:center; background:#f58800; vertical-align:middle;}
#layout_footer .top .right_box{width:min(205px, 100vw);}
#layout_footer .top .cs_info .cate{display:inline-block; margin-bottom:.6em; font-weight:700; color:#333; white-space:nowrap;}
#layout_footer .top .cs_info .no{font-family:'Roboto'; letter-spacing:0;}
#layout_footer .top .cs_info .desc1{margin-bottom:.5em; font-size:1.46rem; font-weight:400; color:#333;}
#layout_footer .top .cs_info .desc1 .no{margin-left:.1em; font-size:1.73rem;}
#layout_footer .top .cs_info .desc2{font-size:.93rem; color:#777;}
#layout_footer .top .cs_info .desc2 .no{font-size:1rem; margin-left:.2em;}
#layout_footer .top .sns{margin-top: 24px; display: flex; gap: 7px}
#layout_footer .top .sns li a {display: block; width: 40px; height: 40px;}
#layout_footer .top .sns li a img{display: block; width: 100%; height: auto;}
#layout_footer .top .sns li a:hover img{opacity: 1;}
#layout_footer .bottom{display: flex; justify-content: space-between;}
#layout_footer .bottom .agree_info li{display:inline-block; font-size:.88rem;}
#layout_footer .bottom .agree_info li + li{position:relative; padding-left:calc(1em + 1px); margin-left:1em;}
#layout_footer .bottom .agree_info li + li::after{content:''; position:absolute; top:calc(50% - .42em); left:0; height:.85em; border-left:1px solid #ddd;}
#layout_footer .bottom .agree_info li a{height:2em; line-height:2; color:#777;}
#layout_footer .bottom .agree_info .empasis{color:#333;}
#layout_footer .company_info{overflow:hidden;}
#layout_footer .company_info li{display:inline-block; float:left; font-size:.88rem; color:#777; line-height:1.85;}
#layout_footer .company_info li::after{content:''; display:inline-block; height:.85em; padding-left:1em; margin-right:1em; border-right:1px solid #ddd;}
#layout_footer .company_info li.break + li{clear:left;}
#layout_footer .company_info li.break::after{content:none;}
#layout_footer .company_info .copy{letter-spacing:0}
#layout_footer .bottom .right_box{display: flex; flex-direction: column; align-items: center; gap: .75rem}
#layout_footer .bottom .family{position: relative; width: 100%; color: #333; border-radius: 4px;}
#layout_footer .bottom .family .btn_family{display: inline-block; position: Relative; width: 100%; height: 48px; padding-left: 14px; border-radius: 4px; font-size: .93rem; line-height: 48px; color: #333; text-align: left; background: #eee;}
#layout_footer .bottom .family .btn_family::after{content: ''; display: inline-block; width: 12px; height: 5px; position: absolute; top: calc(50% - 2px); right: 1em; background: url(/images/common/bul_select_white.svg); filter:brightness(.7);}
#layout_footer .bottom .family .btn_family.on{border-top-left-radius:0; border-top-right-radius: 0;}
#layout_footer .bottom .family .btn_family.on::after{transform: rotate(180deg);}
#layout_footer .bottom .family .list{display: none; position: absolute; bottom: 48px; left: 0; width: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; background: #eee;}
#layout_footer .bottom .family .btn_family.on + .list{display: block;}
#layout_footer .bottom .family .list a{display: block; font-size: .93rem; line-height: 2;}
#layout_footer .bottom .family .list a:hover{font-weight: 700;}
#layout_footer .bottom .partners {display: flex; gap: 5px}
@media only screen and (max-width:1130px) {
#layout_footer{padding-top:30px; padding-bottom:30px;}
#layout_footer .w_container{display:block;}
#layout_footer .top .sitemap{display:none;}
#layout_footer .top .cs_info{padding-right:0;}
#layout_footer .company_info li.break_m + li{clear:left;}
#layout_footer .company_info li.break_m::after{content:none;}
}
@media only screen and (max-width:639px) {
#layout_footer .top{margin-bottom: 0;}
#layout_footer .bottom{flex-flow: column;}
#layout_footer .bottom .agree_info{margin-top:.8em; margin-bottom:1em; padding-bottom:.8em; border-bottom: 1px solid #eee;}
#layout_footer .bottom .right_box{justify-content: space-between; margin-top: 2em; align-items: flex-start;}
#layout_footer .bottom .family{width: 205px;}
}
/* body */
#layout_body{min-height:calc(100vh - 500px); padding-bottom:120px;}
#layout_body.bg{background:#f2f5fa;}
#layout_body .sec_head_comm{max-width:1280px; margin:0 auto; padding:100px 30px 20px; text-align: center;}
#layout_body .page_tit{display:flex; flex-direction:column; align-items: center; gap:.2em; position:relative; z-index: 1; font-size:clamp(25px, 5vw, 44px); line-height:1.25; font-weight:700; letter-spacing:-.06em; word-break: keep-all;}
#layout_body .page_tit em{color:#1971e3;}
#layout_body .page_desc{position:relative; z-index: 1; font-size:1.33rem; word-break: keep-all;}
#layout_body .page_tit ~ .page_desc{padding-top: 1rem;}
#layout_body .sec_head_comm .btn_fill_blue{min-width:192px; margin-top:2em;}
#layout_body .sec_head_comm.layout{text-align: left; padding-top:0; padding-bottom:0; background:#f2f5fa;}
#layout_body .sec_head_comm.layout .w_container,
#layout_body .sec_head_comm.layout .wrapper{display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position:relative; min-height: 440px;}
#layout_body .sec_head_comm.layout .image{display:flex; justify-content: flex-end; align-items: flex-end; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events: none;}
#layout_body .page_tab{display:flex; position:relative; padding-top: 3rem;}
#layout_body .page_tab .greeting {position: absolute; right: 0;}
#layout_body .page_tab::after{content:''; display:block; position:absolute; left:calc(50% - 50vw); bottom:1px; z-index:0; width:100vw; border-bottom:1px solid #eee;}
#layout_body .page_tab .tab{position:relative; padding-bottom:15px; vertical-align:top; font-size:1.07rem; line-height:1; color:#93a1b9; font-weight:700; white-space:nowrap;}
#layout_body .page_tab .tab.on{color:#1971e3;}
#layout_body .page_tab .tab.on::after{content:''; display:inline-block; position:absolute; left:0; right:0; z-index:1; bottom:0; height:3px; border-radius:2px; background:#1971e3;}
#layout_body .page_tab .tab + .tab{margin-left:40px;}
#layout_body .page_tab .tit{padding-top:1em; text-align:center; font-weight:700;}
@media only screen and (max-width:1023px) {
#layout_body{padding-bottom:80px;}
#layout_body .sec_head_comm{padding:40px 20px;}
}
@media only screen and (max-width:639px) {
#layout_body{min-height:calc(100vh - 400px); padding-bottom:64px; overflow-x: hidden;}
#layout_body .sec_head_comm .page_tit{z-index: 1;}
#layout_body .sec_head_comm.layout{padding-top:12vw; padding-bottom:10vw;}
#layout_body .sec_head_comm.layout .w_container,
#layout_body .sec_head_comm.layout .wrapper{justify-content: flex-start; align-items: center; text-align: center; min-height:45vh;}
#layout_body .page_tit + .page_desc{padding-top: .5em;}
#layout_body .page_tab{padding-top:50px;}
#layout_body .page_tab .tab + .tab{margin-left:20px;}
#layout_body .sec_head_comm .btn_fill_blue{margin-top: 1em;}
}
@media only screen and (max-width:1500px) {
#layout_body.cate_template.custom{min-height:calc(100vh - 400px); padding-bottom:64px; overflow-x: hidden;}
#layout_body.cate_template.custom .sec_head_comm .page_tit{z-index: 1;}
#layout_body.cate_template.custom .sec_head_comm.layout{padding-top:12vw; padding-bottom:10vw;}
#layout_body.cate_template.custom .sec_head_comm.layout .w_container,
#layout_body.cate_template.custom .sec_head_comm.layout .wrapper{justify-content: flex-start; align-items: center; text-align: center; min-height:45vh;}
#layout_body.cate_template.custom .page_tit + .page_desc{padding-top: .5em;}
#layout_body.cate_template.custom .page_tab{padding-top:50px;}
#layout_body.cate_template.custom .page_tab .tab + .tab{margin-left:20px;}
#layout_body.cate_template.custom .sec_head_comm .btn_fill_blue{margin-top: 1em;margin-bottom: 16rem;}
}
/* padding 64px 관련 */
@media screen and (max-width: 1280px) {
.w_container {padding-left: 64px; padding-right: 64px}
#layout_body .sec_head_comm {padding-left: 64px; padding-right: 64px;}
#layout_body .sec_head_comm > .w_container {padding: 0;}
}
@media only screen and (max-width: 639px) {
.w_container {padding-left: 20px; padding-right: 20px}
#layout_body .sec_head_comm {padding-left: 20px !important; padding-right: 20px !important}
}
/* 공통 스타일 */
.sec_tit_comm p{font-size:clamp(2rem, 7.84vw, 2.93rem); line-height:1.4; font-weight: 400; text-align:center; letter-spacing:-.05em; color:#333; word-break: keep-all;}
.sec_tit_comm p small{font-size:clamp(1.6rem, 5.8vw, 2.134rem);}
.sec_desc_comm{padding-top: 1em;}
.sec_desc_comm p{font-size: clamp(1.2rem, 3.5vw, 1.33rem); color: #666; text-align: center; letter-spacing: -.05em; word-break: keep-all;}
.sec_function{padding-top:120px; padding-bottom:120px;}
.sec_function .list{display:flex; justify-content:space-between; flex-wrap:wrap; margin-bottom:.5em;}
.sec_function .list li{flex-basis:33.33%; margin-top:3.2rem; text-align:center;}
.sec_function .list li .tit{display:block; margin-top:.3em; font-size:1.34rem; word-break:keep-all;}
.sec_function .list li .desc{padding-top:.5em; color:#666; word-break:keep-all;}
.sec_function .list li img{max-width: 100%;}
.sec_faq{padding:120px 0; background:#fff;}
.sec_faq .sec_tit{padding-bottom:.5em; font-size:2.13rem; font-weight:400;}
.sec_faq .faq_box{padding-left: 1rem; padding-right:1rem; border-radius:20px; background:#f9f9f9;}
.sec_faq .faq {user-select:none; padding-top:1.75rem; padding-bottom:2rem; position: relative}
.sec_faq .faq:not(:last-child){border-bottom:1px solid #eee;}
.sec_faq .faq .question {display:flex; position:relative; padding-left:25px; padding-right: 2.5rem; font-size:1.04rem; font-weight:700; cursor:pointer;}
.sec_faq .faq .question::before{content:'Q.'; display:inline-block; position:absolute; top:-2px; left:0; }
.sec_faq .faq .question::after {position: absolute; top:.1rem; right: 1rem; content:""; border: 2px solid #B8B8B8; border-top: none; border-left: none; width: .8rem; height: .8rem; transform: rotate(45deg); transition: transform .4s;}
.sec_faq .faq .answer {opacity:0; height: 0; max-height:0; position:relative; padding-left:25px; padding-right: 45px; font-size:16px; transition: all .4s;}
.sec_faq .faq .answer::before {display:inline-block; position:absolute; top:0; left:0; font-family:'Roboto'; font-size:1.04rem;font-weight:700; }
.sec_faq .faq .answer a.cautions {color: #0069f9; text-decoration: underline; font-size: 13px}
.sec_faq .faq.active .question::after {margin-top: 10px; border-color: #333; transform: rotate(225deg);}
.sec_faq .faq.active .answer {opacity: 1; height: auto; margin-top:1em; max-height: fit-content; word-break: keep-all;}
@media only screen and (max-width:639px) {
.sec_desc_comm{text-align: center;}
.sec_desc_comm p{display: inline;}
.sec_function{padding-top:64px; padding-bottom:64px;}
.sec_function .list{flex-flow:column;}
.sec_function .list li{position:relative; width:100%;}
}
/* main */
.cate_main{padding-bottom:0 !important;}
.cate_main .sec_event{position: relative; overflow:hidden;}
/* 메인 슬라이더 공통 */
.main_slider { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.main_slider li{ position: relative; overflow:hidden;}
.main_slider a{display:block; height:560px;}
.main_slider a[href="#"]{pointer-events: none; cursor:default;}
.main_slider .texts { display: flex; flex-direction:column; justify-content: center; position: absolute; top:0; bottom:0; left:50%; width: min(1280px, calc(100% - min(40px, 4vw))); height: 100%; z-index: 10; transform:translateX(-50%);}
.main_slider .texts h1 {font-size: clamp(27px, 40px, 4vw); font-family: "Pretendard", "Noto Sans KR"; font-weight: bold; line-height: 1.5; position: relative; color: var(--text-color, #ffffff); display: contents;}
.main_slider .texts p {font-weight: 700; font-size: clamp(16px, 2.2vw, 20px); margin-top: .75rem; color: var(--text-color, #ffffff);}
.main_slider .images img{position:relative; left:50%; transform:translateX(-50%); height: 100%; width: auto; max-width: none;}
.main_slider .images img:nth-child(2) {display: none;}
.main_slider .text_main span {display: block;}
.main_slider .swiper-controller{display: flex; align-items: center; gap: 10px; position: absolute; bottom: min(35px, 3.5vw); left: 50%; z-index: 100; transform: translateX(-50%);}
.main_slider .swiper-pagination{display:flex; gap:min(10px, 1vw); position:static;}
.main_slider .swiper-pagination-bullet{width:min(10px, 1vw); height:min(10px, 1vw); background: #fff; border-radius:min(5px, .5vw);; transition:.2s;}
.main_slider .swiper-pagination-bullet-active{width:min(40px, 3vw); background: #fff;}
.main_slider .swiper-btn-play{display: block; width:30px; height: 30px; position:relative; z-index: 100; margin-left:-8px; background-size:14px; background-repeat: no-repeat; background-position: center;}
.main_slider .swiper-btn-play[data-status="play"]{background-image: url('data:image/svg+xml,');}
.main_slider .swiper-btn-play[data-status="pause"]{background-image: url('data:image/svg+xml,');}
.main_slider .texts.intro .text_main em{display: inline-block; position:relative; top:-.1em; padding-left: .5em; padding-right: .5em; font-size: .75em; color: #05275B; font-weight:500; border-radius: .73em; line-height:1.46em; background: #fff;}
.cate_main [class^='btn_fill']{min-width:min(180px, 18vw); padding-left:1.5em; padding-right:1.5em;}
.cate_main img, .cate_main video{max-width:100%; height: auto;}
.cate_main section:not(.sec_event){padding-top: min(120px, 13vw); padding-bottom: min(120px, 15vw);overflow: hidden;}
.cate_main section h2{display: flex; flex-direction: column; align-items: center; margin-bottom:min(64px, 6vw); font-size:clamp(26px, 4vw, 44px); color: #333; line-height:1.4; text-align: center; font-weight: 400;}
.cate_main .template_sl .skin_list{gap:min(55px, 6vw); transition-timing-function: linear;}
.cate_main .template_sl li{width: min(236px, 35vw); border-radius: min(20px, 2vw);}
.cate_main .sec_skin .btns{margin-top:min(64px, 8vw); text-align: center;}
.cate_main .sec_feature .w_container{display: flex; flex-direction: column;}
/* .cate_main .sec_feature .title{height: 60vh;} */
.cate_main .sec_feature h2{font-size:clamp(35px, 6vw, 60px); transform: translateY(-50%); margin-bottom:0;}
.cate_main .sec_feature .box{display: flex; flex-direction: column; align-items: flex-start;}
.cate_main .sec_feature dl{margin-bottom:min(32px, 3.2vw);}
.cate_main .sec_feature dl.center{text-align: center;}
.cate_main .sec_feature dl dt{font-size:clamp(20px, 2.8vw, 28px); color:#333; font-weight:700;}
.cate_main .sec_feature dl dd{margin-top:.2em; font-size:clamp(14px, 1.8vw, 18px); color:#88929E; font-weight:700;}
.cate_main .sec_feature .box img,
.cate_main .sec_feature .box video{max-width:calc(100vw - 40px);}
.cate_main .sec_feature img.mo{display: none;}
.cate_main .sec_feature .video_box{overflow:hidden; border-radius: min(20px,2vw);}
.cate_main .sec_feature .video_box video{margin:max(-10px, -1.8vw) max(-17px, -2.2vw);}
.cate_main .sec_case{background:#000;}
.cate_main .sec_case h2{color:#fff; text-align: center;}
.cate_main .sec_case .contents{display: flex; gap:25px;}
.cate_main .sec_case dl{display: flex; flex-direction: column; align-items: stretch; flex: 1; min-width:288px; text-align: center; color: #bbb;}
.cate_main .sec_case dl .thumb{overflow:hidden; position:relative; padding-top:61%; border-radius: min(10px, 2vw); border:1px solid rgba(255,255,255,.15);}
.cate_main .sec_case dl .thumb img{position:absolute; top: 50%; left:50%; width:100%; height: auto; transform:translate(-50%, -50%); transition: .5s;}
.cate_main .sec_case dl .thumb:hover img{transform:translate(-50%, -50%) scale(1.1);}
.cate_main .sec_case dl .desc{display: flex; flex-direction: column; margin-top:1em; font-size:clamp(15px, 2vw, 20px); font-weight:400;}
.cate_main .sec_case dl dt{font-size:clamp(13px, 1.6vw, 16px); font-weight:700;margin-top:.5em;}
.cate_main .sec_device .images{overflow: hidden; position:relative; left:50%; width:100%; height:min(320px, 30vw); max-height:70vh !important; border-radius: min(30px, 3vw); background:url(/images/main/device_free.jpg) center / cover; transform:translateX(-50%);}
.cate_main .sec_function{padding-top:0 !important;}
.cate_main .sec_function .additional_list{display: flex; gap:min(20px, 2vw);}
.cate_main .sec_function .additional_list li{overflow: hidden; flex: 1; border-radius: min(20px, 3vw);}
.cate_main .sec_function .additional_list li[data-main-idx="1"]{order:1;}
.cate_main .sec_function .additional_list li[data-main-idx="2"]{order:2;}
.cate_main .sec_function .additional_list li[data-main-idx="3"]{order:3;}
.cate_main .sec_function .additional_list li[data-main-idx="4"]{order:4;}
.cate_main .sec_function .additional_list li[data-main-idx="5"]{order:5;}
.cate_main .sec_function .additional_list a{display: block; position: relative; height: min(250px, 25vw); padding: 32px 20px; background: #F2F5FA; pointer-events: none;}
.cate_main .sec_function .additional_list small,
.cate_main .sec_function .additional_list i{display: none;}
.cate_main .sec_function .additional_list b{display: flex; flex-direction: column; font-size: clamp(16px, 2vw, 20px); font-weight: 700; color: #333;}
.cate_main .sec_function .additional_list .images{position:absolute; bottom:32px; left:20px;}
.cate_main .sec_function .additional_list .images img{width: 56px; height:auto;}
.cate_main .sec_function .additional_list .images img:not(:first-child){margin-left: -7px;}
.cate_main .sec_function .additional_clone{display:none;}
.cate_main .sec_start{background:#06f url(/images/main/bg_start.png) center / cover;}
.cate_main .sec_start .w_container{display: flex; flex-direction:column; align-items: flex-start;}
.cate_main .sec_start h2{color:#fff; align-items: flex-start; margin-bottom:24px;}
.cate_main .sec_start .btn_fill_white{width:min(240px, 37.5vw); height:min(64px, 10.4vw); color:#06f; font-size:clamp(14px, 2vw, 20px); line-height:min(64px, 10.4vw);}
.cate_main .sec_start .btn_fill_white:hover{color:#0052CE;}
@media screen and (max-width: 1280px) {
.main_slider .event_list{height: 43.73vw;}
.main_slider .images img{width: 150%;}
}
@media screen and (max-width: 1150px) {
#layout_header {justify-content: space-between;}
.cate_main .sec_case .contents{overflow-x:scroll;}
}
@media screen and (max-width: 960px) {
.main_slider .wrapper { max-height: 600px; }
}
@media screen and (max-width: 799px) {
.cate_main .sec_function .additional_list{flex-wrap: wrap;}
.cate_main .sec_function .additional_list li{flex: none; width: calc(50% - min(10px, 1vw));}
}
@media only screen and (max-width:639px) {
#layout_header {padding: 0 20px !important}
.main_slider .wrapper {padding-left: 20px; padding-right: 20px}
.main_slider .event_list{height: auto;}
.main_slider a{height: 106.67vw;}
.main_slider .images img{width: 100%;}
.main_slider .images img:nth-child(1){display: none;}
.main_slider .images img:nth-child(2){display: block; position: absolute; left:0; right:0; bottom:0; width:100%; height: auto; transform: translateX(0);}
.main_slider .texts{justify-content: flex-start; align-items: center; text-align: center; top: 7vw; left:5%; right: 5%; bottom: auto; width: 90%; transform: translateX(0);}
.main_slider .swiper-controller{justify-content: center; gap: 5px; height: 28px; width: 6.54em; padding-left: 16px; padding-right: 8px; border-radius: 14px; font-size: 13px; background: rgba(0,0,0,.2);}
.main_slider .swiper-pagination{width: auto; font-family: Roboto; font-size: 13px; color: #fff;}
.main_slider .swiper-btn-play{background-size:12px; margin-left: 0;}
.cate_main .sec_feature .scrollmagic-pin-spacer{padding-top:0 !important;padding-bottom:0 !important;}
.cate_main .sec_feature .title{padding-top:0;}
.cate_main .sec_feature h2{padding-top:0; padding-bottom: 0; transform: translateY(-40%);}
.cate_main .sec_feature .box{align-items: center; text-align: center;}
.cate_main .sec_feature img.pc{display: none;}
.cate_main .sec_feature img.mo{display: block;}
.cate_main .sec_case .w_container{padding-left:0; padding-right:0;}
.cate_main .sec_case .contents dl:first-child{margin-left:20px;}
.cate_main .sec_case .contents dl:last-child{margin-right:20px;}
.cate_main .sec_case .btn_box_comm{max-width:100%;}
.cate_main .sec_function .additional_list{flex-direction: column;}
.cate_main .sec_function .additional_list li{flex:1; width:100%;}
.cate_main .sec_function .additional_list a{display:flex; align-items: center;}
.cate_main .sec_function .additional_list .images{left: auto; right:20px; top: 50%; bottom:auto; transform:translateY(-50%);}
.cate_main .sec_function .additional_list .images img{width: 48px; height:48px;}
.cate_main .sec_start{height:100vw; background: #0066FF url(/images/main/bg_start_mo.png) center bottom / contain no-repeat;}
.cate_main .sec_start .w_container{align-items: center; text-align: center;}
.cate_main .sec_start h2{font-size:22px; align-items: center; margin-bottom: 16px;}
.cate_main .sec_start .btn_fill_white{font-size: 1.07rem;}
.cate_main .sec_device .images{max-height:calc(100vw - 40px) !important; background-size: auto 50vh;}
}
@media screen and (max-width:639px) and (orientation: landscape) {
.cate_main .sec_device .images{height:80vh !important; background-size: auto 80vh;}
}
/* start comm */
.sec_start_comm {padding-top: 96px !important; padding-bottom: 96px; background: url(/images/common/bg_gra_left.png) left top no-repeat, url(/images/common/bg_gra_right.png) right top no-repeat, #fff; text-align: center;}
.sec_start_comm .txt {margin-bottom: .8em; font-size: 2.93rem; font-weight: 400; line-height: 1.36; letter-spacing: -.07em; word-break: keep-all;}
.sec_start_comm .desc {font-size: 1.2rem;}
.sec_start_comm .btn_fill_blue {width: 240px; height: 64px; font-size: 20px; line-height: 64px; font-weight: 400;}
@media only screen and (max-width:639px) {
.sec_start_comm {padding-top: 60px; padding-bottom: 60px; background: #fff url(/images/common/bg_gra_right.png) right top / auto 100% no-repeat;}
.sec_start_comm .txt {font-size: 2.14rem; line-height: 1.46;}
}
/* intro */
.cate_intro{padding-bottom:0 !important;}
.cate_intro .sec_head_comm{max-width:100% !important; padding-bottom:120px !important;}
.cate_intro.homepage .sec_head_comm{background:url(/images/intro/bg_homepage_new.png) center / cover;}
.cate_intro.shopping .sec_head_comm{background:url(/images/intro/bg_shopping_new.png) center / cover;}
.cate_intro.design .sec_head_comm{background:url(/images/intro/bg_design_new.png) center / cover;}
.cate_intro.member .sec_head_comm{background:url(/images/intro/bg_member_new.png) center / cover;}
.cate_intro.setting .sec_head_comm{background:url(/images/intro/bg_setting_new.png) center / cover;}
.cate_intro .sec_head_comm .page_tit{position:relative;}
.cate_intro .sec_head_comm .page_tit.soon::after{content:'예정'; display:inline-block; position:absolute; left:0; top:-25px; width:3.3em; height:1.8em; font-weight:100; border-radius:.9em; letter-spacing:0; font-size:.8rem; color:#fff; line-height:1.8; text-align:center; background:#f58800; vertical-align:middle;}
.cate_intro .sec_head_comm .page_tit.new::after{content:'NEW'; display:inline-block; position:absolute; left:0; top:-25px; padding: 0 1rem; height:1.8em; font-weight:100; border-radius:.9em; letter-spacing:0; font-size:.8rem; color:#fff; line-height:1.8; text-align:center; background:#f58800; vertical-align:middle;}
.cate_intro .sec_head_comm .page_desc{font-size:1.33rem}
.cate_intro .sec_head_comm .visual{overflow:hidden; position:relative; z-index:0; width:760px; height:420px; margin:80px auto 0; border-radius:20px; text-align:center;}
.cate_intro .sec_head_comm .visual img,
.cate_intro .sec_head_comm .visual video{position:relative; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:auto; border-radius:20px;}
.cate_intro .sec_intro .part_area{padding-top:120px; padding-bottom:120px;}
.cate_intro .sec_intro{background:#fff;}
.cate_intro.homepage .sec_intro .part_area:nth-child(even),
.cate_intro.shopping .sec_intro .part_area:nth-child(even),
.cate_intro.design .sec_intro .part_area:nth-child(even),
.cate_intro.member .sec_intro .part_area:nth-child(odd),
.cate_intro.setting .sec_intro .part_area:nth-child(even){background:#f2f5fa;}
.cate_intro .sec_intro .part{display:flex; justify-content:space-between; align-items:center;}
.cate_intro .sec_intro .part.right{flex-flow:row-reverse;}
.cate_intro .sec_intro .part.center{flex-flow:column;}
.cate_intro .sec_intro .part .text_area{width:420px; text-align:left;}
.cate_intro .sec_intro .part.center .text_area{width:100%; text-align:center;}
.cate_intro .sec_intro .part .text_area .part_tit{font-size:clamp(25px, 5vw, 44px); line-height:1.36; font-weight:400;}
.cate_intro .sec_intro .part .text_area .part_desc{word-break: keep-all; padding-top:1em; font-size:1.2rem; line-height:1.55;}
.cate_intro .sec_intro .part .img_area{position:relative; flex:1; text-align:right;}
.cate_intro .sec_intro .part.right .img_area{text-align:left;}
.cate_intro .sec_intro .part.center .img_area{margin-top:56px; text-align:center;}
.cate_intro .sec_intro .part .img_area img{position:relative; z-index:10; max-width: 100%;}
.cate_intro .sec_intro .part img.shadow{ box-shadow: 0 0 20px rgba(0,0,0, .05);}
.cate_intro.homepage .sec_intro .sec1 .part .img_area{padding-top: 4rem; padding-right: 4rem}
.cate_intro.homepage .sec_intro .sec1 .part .img2{position:absolute; bottom: 2rem; right: 2rem;}
.cate_intro.homepage .sec_intro .sec1 .part .img3{position:absolute; bottom: 4rem; right: 0rem;}
.cate_intro.homepage .sec_intro .sec2 .part .img_area{flex:none;padding-bottom:30px; padding-right:30px;}
.cate_intro.homepage .sec_intro .sec2 .part .img2{position:absolute; bottom:0; right:0;}
.cate_intro.homepage .sec_intro .sec5 .img_desc{margin-top:60px;}
.cate_intro.homepage .sec_intro .sec5 .modal_location {display: flex; flex-direction: column; margin-top: 2rem; color: #8E96A2; font-size: 17px}
.cate_intro.homepage .sec_intro .sec5 .modal_location ul {margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 108px}
.cate_intro.homepage .sec_intro .sec5 .modal_location li {display: block; width: 32px; height: 32px; background-color: #D9DCE1;}
.cate_intro.homepage .sec_intro .sec5 .modal_location li.is_active {background-color: #303C4B;}
.cate_intro.homepage .sec_intro .sec6 .part .img_area{flex:none; padding-left:100px;}
.cate_intro.homepage .sec_intro .sec6 .part .img2{position:absolute; top:20px; right:-130px;}
.cate_intro.homepage .sec_intro .sec6 .part .img3{position:absolute; top:2.5rem; right:-5rem; max-width: 20vw;}
.cate_intro.shopping .sec_intro .func_list{display:flex; width:100%; justify-content:space-between; text-align:center; margin-top:80px;}
.cate_intro.shopping .sec_intro .func_list li::before{content:attr(data-no); display:inline-block; font-family:'Roboto'; font-size:50px; font-weight:100; line-height:1; padding-bottom:15px; border-bottom:1px solid #333;}
.cate_intro.shopping .sec_intro .func_list li .tit{padding-top:1em; font-size:1.33rem;}
.cate_intro.shopping .sec_intro .func_list li .desc{padding-top:.7em; color:#88929e; line-height:1.6;}
.cate_intro.shopping .sec_intro .sec2 {background-color: #fff !important; border-top: 1px solid #eee}
.cate_intro.shopping .sec_intro .sec2 img {margin-top: 3rem; max-width: 100%; background-color: #F2F5FA;}
.cate_intro.shopping .sec_intro .sec2 {padding-bottom: 0; display: flex; flex-direction: column; align-items: center;}
.cate_intro.shopping .sec_intro .sec3 {padding-bottom: 0}
.cate_intro.shopping .sec_intro .sec3 .text_area {width: fit-content;}
.cate_intro.shopping .sec_intro .sec3 .text-marquee {position: absolute; bottom: 2rem; right: 0; width: 450px}
.cate_intro.shopping .sec_intro .sec3 .text-marquee img {animation: marquee 6s linear infinite;}
.cate_intro.shopping .sec_intro .sec4 {padding: 80px 0}
.cate_intro.shopping .sec_intro .sec4 img {margin-left: -4rem;}
.cate_intro.shopping .sec_intro .sec5 {padding: 80px 0}
.cate_intro.shopping .sections {background:url(/images/intro/bg_shopping_new.png) center / cover;}
.cate_intro.shopping .sec_head_comm {word-break: keep-all; background: none; margin-bottom: 1rem !important;}
.cate_intro.shopping section[class*="section"] { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center;}
.cate_intro.shopping section[class*="section"] .wrapper { width: 1220px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.cate_intro.shopping section[class*="section"] .wrapper > * {opacity: 0;}
.cate_intro.shopping section[class*="section"].is_active .wrapper > * {animation: moveUp .4s forwards;}
.cate_intro.shopping section[class*="section"].is_active .wrapper > *:nth-child(2) {animation-delay: .3s}
.cate_intro.shopping section[class*="section"].is_active .wrapper > *:nth-child(3) {animation-delay: .6s}
.cate_intro.shopping section[class*="section"].is_active .wrapper > *:nth-child(4) {animation-delay: .9s}
.cate_intro.shopping section[class*="section"].is_active .wrapper > *:nth-child(5) {animation-delay: 1.2s}
.cate_intro.shopping section[class*="section"] .image_fixed { position: absolute; }
.cate_intro.shopping section[class*="section"] .images { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1rem; position: relative; }
.cate_intro.shopping section[class*="section"] .text_title,
.cate_intro.shopping section[class*="section"] .text_title p { font-size: 50px; font-weight: bold; }
.cate_intro.shopping section[class*="section"] .text_sub,
.cate_intro.shopping section[class*="section"] .text_sub p { font-size: 30px; }
.cate_intro.shopping section[class*="section"] .wrapper { width: 1220px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.cate_intro.shopping .section_not_expensive { padding-top: 90px; position: relative; color: white;}
.cate_intro.shopping .section_not_expensive .text_title {margin-bottom: 3rem; background: linear-gradient(to right, #febcae, #fa6c87);-webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.cate_intro.shopping .section_not_expensive .image {opacity: 1 !important; overflow: hidden; animation: none !important}
.cate_intro.shopping .section_not_expensive .coupon {transform: translateY(15rem); transition: .5s; transition-delay: .65s;}
.cate_intro.shopping .section_not_expensive.is_active .coupon {transform: translateY(0)}
.cate_intro.shopping .section_not_expensive .coins { top: -2rem; z-index: 1;}
.cate_intro.shopping .section_list { padding: 10rem 0; background-color: #fff3e2; color: #222; }
.cate_intro.shopping .section_list .text_sub { font-size: 30px; font-weight: bold; padding-bottom: 6rem; }
.cate_intro.shopping .section_list .text_sub :first-of-type { color: #989898; }
.cate_intro.shopping .section_list .text_sub :last-of-type { color: #0066ff; }
.cate_intro.shopping .section_list .images { padding: 5rem 0 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.cate_intro.shopping .section_list .image_fixed { right: 3rem; top: -1rem; }
.cate_intro.shopping .section_list .image_fixed.im-surprised { top: -3rem; }
.cate_intro.shopping .section_no { padding: 15rem 0; background: url("/images/event/20211222/05_bg_top.png") top center no-repeat, url(/images/event/20211222/05_bg.png) top 6rem center no-repeat, #31313b; color: white; position: relative}
.cate_intro.shopping .section_no::before {content: "";position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 10rem; height: 10rem; display: block; background-color: #31313b;}
.cate_intro.shopping .section_no .text_title img { margin-top: -7rem; margin-left: -7rem; }
.cate_intro.shopping .section_no ul { margin-top: 5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8rem; width: 100%; }
.cate_intro.shopping .section_no ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.cate_intro.shopping .section_no ul li .texts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.5rem; }
.cate_intro.shopping .section_no ul li .text_title { font-size: 46px; }
.cate_intro.shopping .section_no ul li .text_sub { font-weight: bold; background-color: #ffa422; color: #31313b; padding: 0 .75rem; border-radius: .15rem; }
.cate_intro.shopping .section_no ul li .text_paragraph { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; }
.cate_intro.shopping .section_no ul li p { font-size: 19px; color: #8c8c98; }
.cate_intro.shopping .section_no ul li:nth-of-type(1) { text-align: left; }
.cate_intro.shopping .section_no ul li:nth-of-type(2) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; text-align: right; }
.cate_intro.shopping .section_no ul li:nth-of-type(2) .texts { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
.cate_intro.shopping .section_no ul li:nth-of-type(3) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.cate_intro.shopping .section_no ul li:nth-of-type(3) .texts { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 5rem; }
.cate_intro.shopping .section_no ul li:nth-of-type(3) .images { gap: 2rem; }
.cate_intro.shopping .section_no ul li:nth-of-type(3) .image_fixed { top: -9rem; right: -9rem; }
.cate_intro.shopping .section_no .number { width: 56px; height: 56px; background: #ffa422 url(/images/event/20211222/check.png) no-repeat center; color: #31313b; font-weight: bold; font-size: 26px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.cate_intro.shopping .section_yes {padding: 10rem 0; background-color: #e7ecf4;}
.cate_intro.shopping .section_yes .images { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 2rem; }
.cate_intro.shopping .section_yes .images img { cursor: pointer; }
.cate_intro.shopping ~ .modal .wrapper {padding: 0}
@media screen and (max-width: 1220px) {
.cate_intro.shopping section .wrapper { max-width: 100%; padding: 0 3rem; }
.cate_intro.shopping section .images { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.cate_intro.shopping .section_no { padding-bottom: 5rem; background-image: none; }
.cate_intro.shopping .section_no ul li { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; text-align: center !important; }
.cate_intro.shopping .section_no ul li .texts { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; margin-bottom: 2rem; }
.cate_intro.shopping .section_no ul li:last-of-type img { max-width: 50vw; }
.cate_intro.shopping .section_no ul li:last-of-type .image_fixed { top: -6rem; right: -6rem; -webkit-transform: scale(0.7); transform: scale(0.7); }
.cate_intro.shopping .section_no .images { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.cate_intro.shopping .section_no .image_fixed { display: -webkit-box; display: -ms-flexbox; display: flex; }
.cate_intro.shopping img { max-width: 100%; width: fit-content; margin: 0 auto }
}
@media screen and (max-width: 639px) {.cate_intro.shopping .text_title, .cate_intro.shopping .text_title p { font-size: 32px !important; line-height: 1.25; word-break: keep-all; }
.cate_intro.shopping .text_sub, .cate_intro.shopping .text_sub p { font-size: 20px !important; line-height: 1.25; }
.cate_intro.shopping .section_not_expensive {padding-top: 1rem !important}
.cate_intro.shopping .section_not_expensive .coins { display: none; }
.cate_intro.shopping .section_list {padding: 5rem 0}
.cate_intro.shopping .section_list .text_title img { display: none; }
.cate_intro.shopping .section_list .image_fixed { top: 0; right: -3rem; -webkit-transform: scale(0.7); transform: scale(0.7); }
.cate_intro.shopping .section_list .image_fixed.magnifying-glass { top: 1rem; right: 0; -webkit-transform: scale(0.5); transform: scale(0.5); }
.cate_intro.shopping .section_list .lists { display: -webkit-box; display: -ms-flexbox; display: flex; }
.cate_intro.shopping .section_list .list { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; background-color: #f2f2f2; font-size: 20px; font-weight: bold; }
.cate_intro.shopping .section_list .list .row { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 70px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.cate_intro.shopping .section_list .list .row.title { background-color: #e7e7e7; color: #616161; }
.cate_intro.shopping .section_list .list:last-of-type .row:not(.title) { background-color: #666; }
.cate_intro.shopping .section_yes { padding: 5rem 0; background-image: none; }
.cate_intro.shopping .section_yes .text_title, .cate_intro.shopping .section_yes .text_title p { font-size: 30px !important; line-height: 1.25; }
.cate_intro.shopping .section_yes .text_sub, .cate_intro.shopping .section_yes .text_sub p { font-size: 18px !important; line-height: 1.25; }
.cate_intro.shopping .section_yes .responsive { padding: 2.5rem 1rem 1rem; }
.cate_intro.shopping .section_yes .responsive [class*="swiper-button"] { -webkit-transform: scale(0.5); transform: scale(0.5); }
.cate_intro.shopping .section_no { padding: 0 0 5rem; background-image: none; }
.cate_intro.shopping .section_no ul {gap: 5rem}
.cate_intro.shopping .section_no .images { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}
@keyframes moveUp {
0% {opacity: 0; transform: translateY(20px)
}
100%{
opacity: 1; transform: translateY(0)
}
}
@keyframes marquee {0% { transform: translateX(0); }
100% { transform: translateX(-100%)
}
}
@media only screen and (max-width:1023px) {.cate_intro.shopping .sec_intro .sec3 .img_area,
.cate_intro.shopping .sec_intro .sec4 .img_area,
.cate_intro.shopping .sec_intro .sec5 .img_area,
.cate_intro.homepage .sec_intro .sec3 .img_area,
.cate_intro.homepage .sec_intro .sec4 .img_area,
.cate_intro.homepage .sec_intro .sec5 .img_area {text-align: center;}
.cate_intro.homepage .sec_intro .sec5 .modal_location {align-items: center;}
.cate_intro.homepage .sec_intro .sec6 .part .img3 {right: 40%; transform: scale(.75)}
}
@media only screen and (max-width:639px) {.cate_intro.homepage .sec_intro .sec6 .part .img_area {width: 60% !important; margin-left: -25vw}
.cate_intro.homepage .sec_intro .sec6 .part .img3 {right: 0}
.cate_intro.shopping .sec_intro .sec3 img {max-height: 150px;}
.cate_intro.shopping .sec_intro .sec4 img,
.cate_intro.shopping .sec_intro .sec5 img {margin-left: -10%; margin-right: auto; max-width: 120%;}
}
.cate_intro.design .sec_intro .sec1 .part{display:block;}
.cate_intro.design .skins-slider {overflow:visible; padding-top: 56px}
.cate_intro.design .skins-slider .swiper-wrapper {transition-timing-function: linear !important}
.cate_intro.design .skins-slider .swiper-slide {overflow:hidden; width:236px; border-radius:20px}
.cate_intro.design .skins-slider .swiper-slide img{width:100%; filter:brightness(95%);}
.cate_intro.member .sec_intro .sec1 .img2{position:absolute; bottom: 8rem; right: -10rem}
.cate_intro.member .sec_intro .sec1 .img3{position:absolute; bottom: 2rem; right: -7rem}
.cate_intro.member .sec_intro .sec1 .img4{position:absolute; bottom: -2rem; right: -7rem}
.cate_intro.member .sec_intro .sec2 .img1{background:#fff;}
.cate_intro.member .sec_intro .sec3 .img_area {margin-left: -4rem}
.cate_intro.member .sec_others {background-color: #fff;}
.cate_intro.setting .sec_intro .sec1 .part .img_area{flex:none; padding-left:200px; padding-right:200px;}
.cate_intro.setting .sec_intro .sec1 .part img {border-radius: 1.25rem;}
.cate_intro.setting .sec_intro .sec1 .part .img2{position:absolute; left: -3rem; top:50%; z-index:9; transform:translateY(-50%);}
.cate_intro.setting .sec_intro .sec1 .part .img3{position:absolute; right: -3rem; top:50%; z-index:9; transform:translateY(-50%);}
.cate_intro.setting .sec_intro .sec2 .part .text_area{width:50%;}
.cate_intro.setting .sec_intro .sec2 .part .img_area{flex:none;}
.cate_intro.setting .sec_intro .sec2 .part .img2{position:absolute; left:0; bottom:0; z-index:11;}
.cate_intro.setting .sec_intro .sec2 .part .img3{position:absolute; right: 1rem; top: 1rem; z-index:11;}
.cate_intro.setting .sec_intro .sec3 .part .img_area{flex:none; padding-right:147px;}
.cate_intro.setting .sec_intro .sec3 .part .img2{position:absolute; right:0; bottom:70px; z-index:11;}
.cate_intro .sec_others{padding-top:120px; padding-bottom:120px; background:#F2F5FA;}
.cate_intro .sec_others .sec_tit{padding-bottom:1.5em; font-size:44px; line-height:1; font-weight:400; text-align:center;}
.cate_intro .sec_others .list{display:flex; justify-content:space-between; width:100%;}
.cate_intro .sec_others .list li{flex:1; padding-left:.5em; padding-right:.5em;}
.cate_intro .sec_others .list .item a{display:block; max-width:16rem; margin:0 auto;}
.cate_intro .sec_others .list .item .tit{padding-top:1.2em; font-size:1.33rem; font-weight:400;}
.cate_intro .sec_others .list .item.soon .tit::after{content:'예정'; display:inline-block; width:38px; height:18px; padding-right:2px; margin-left:6px; margin-top:-2px; font-weight:100; border-radius:9px; font-size:.8rem; color:#fff; line-height:16px; text-align:center; background:#f58800; vertical-align:middle;}
.cate_intro .sec_others .list .item.new .tit::after{content:'NEW'; display:inline-block; width:38px; height:18px; padding-right:2px; margin-left:6px; margin-top:-2px; font-weight:100; border-radius:9px; font-size:.8rem; color:#fff; line-height:16px; text-align:center; background:#f58800; vertical-align:middle;}
.cate_intro .sec_others .list .item .desc{padding-top:.5em; line-height:1.6; color:#88929e;}
.cate_intro .sec_others .list .item .go{display:block; margin-top:1em; color:#1971e3; font-weight:500;}
.cate_intro .sec_others .list .item .go::after{content:''; display:inline-block; position:relative; top:1px; width:10px; height:14px; margin-left:8px; background:url(/images/main/ico_arr_blue.svg) center center no-repeat; background-size:contain; transition:.2s;}
@media only screen and (max-width:1023px) {.cate_intro .sec_start .txt{font-size:2.14rem; line-height:1.46;}
.cate_intro .sec_intro .part_area{padding-top:60px; padding-bottom:60px;}
.cate_intro .sec_intro .part{flex-flow:column !important;}
.cate_intro .sec_intro .part .text_area{width:100% !important; text-align:center;}
.cate_intro .sec_intro .img_area{width:90%; margin-top:40px !important;}
.cate_intro .sec_intro .part.center .img_area{width:100%;}
.cate_intro.homepage .sec_intro .sec6 .part .img_area{width:80%; padding-left:0; text-align:center}
.cate_intro.homepage .sec_intro .sec6 .part .img2{top:6%; right:auto; left:50%;}
}
@media only screen and (max-width:639px) {.cate_intro .sec_head_comm{padding-bottom:60px !important; background-size:auto 135%, auto auto !important; background-position:right bottom, center !important;}
#layout_body .cate_intro.homepage .sec_head_comm{margin-top:70px !important;}
.cate_intro .sec_head_comm .page_tit{line-height:1.2 !important;}
.cate_intro .sec_head_comm .visual{border-radius: 5px; width:100%; height:0; padding-top:55%; margin-top:40px;}
.cate_intro .sec_head_comm .visual img,
.cate_intro .sec_head_comm .visual video{position:absolute; border-radius: 5px}
.cate_intro .sec_others .sec_tit{font-size:2.14rem;}
.cate_intro .sec_intro .part.center{padding-left:20px; padding-right:20px;}
.cate_intro .sec_intro .part .text_area .part_tit{word-break: keep-all;}
.cate_intro.homepage .sec_intro .sec1 .part .img_area{padding-top: 6rem;}
.cate_intro.homepage .sec_intro .sec1 .part img{width: 90%;}
.cate_intro.homepage .sec_intro .sec2 .part .img_area{padding-right:20px; padding-bottom:20px;}
.cate_intro.homepage .sec_intro .sec2 .part .img2{height:28%; width:auto;}
.cate_intro.homepage .sec_intro .sec5 .img_desc{margin-top:20px;}
.cate_intro.homepage .sec_intro .sec5 .img_desc img{width:60px; height:auto;}
.cate_intro.setting .sec_intro .sec1 .part img {border-radius: 1.25rem;}
.cate_intro.shopping .sec_intro .func_list{flex-wrap:wrap;}
.cate_intro.shopping .sec_intro .func_list li{width:50%; margin-bottom:2em;}
.cate_intro.member .sec_intro .sec1 img:not(.img1) {max-width: 200px;}
.cate_intro.member .sec_intro .sec1 .img2 {bottom: 3rem; left: 50%}
.cate_intro.member .sec_intro .sec1 .img3 {bottom: 0; left: 50%}
.cate_intro.member .sec_intro .sec1 .img4 {bottom: -3rem; left: 50%}
.cate_intro.member .sec_intro .sec3 .img_area {display: flex; flex-wrap: wrap;}
.cate_intro.member .sec_intro .sec3 img {max-width: 50%; height: 100%;}
.cate_intro.design .sec_intro .sec1 .part .img_area {position:relative; left:-20px; width:100vw;}
.cate_intro.design .sec_intro .sec3 img {max-width: 125%; margin-left: -7.5%;}
.cate_intro.design .skins-slider .swiper-slide.new::before {width: 48px; height: 48px}
.cate_intro.setting .sec_intro .sec1 .part .img_area {padding-left:25%; padding-right:25%;}
.cate_intro.setting .sec_intro .sec1 .part img {border-radius:0.5rem;}
.cate_intro.setting .sec_intro .sec1 .part .img2,
.cate_intro.setting .sec_intro .sec1 .part .img3{width:40%;}
.cate_intro.setting .sec_intro .sec1 .part .img2 {left: 1rem}
.cate_intro.setting .sec_intro .sec1 .part .img3 {right: 1rem}
.cate_intro.setting .sec_intro .sec2 .part .img2,
.cate_intro.setting .sec_intro .sec2 .part .img3{width:17%;}
.cate_intro.setting .sec_intro .sec3 .part .img_area{display:flex; flex-direction: column; align-items:center; padding-right:0;}
.cate_intro.setting .sec_intro .sec3 .part .img1{max-width: 130%; margin-top: -10%}
.cate_intro.setting .sec_intro .sec3 .part .img2{position:static; width:30%; height:auto;}
.cate_intro .sec_others{padding-top:60px; padding-bottom:60px; text-align:center;}
.cate_intro .sec_others .list{flex-wrap:wrap;}
.cate_intro .sec_others .list li{flex:none; width:50%;}
.cate_intro .sec_others .list .item{margin-bottom:3em;}
.cate_intro .sec_others .list .item .ico{position:relative; left:8px; width:90px; height:auto;}
.cate_intro .sec_others .list .item .tit{padding-top:16px;}
.cate_intro .sec_others .list .item .desc{text-align:left;}
.cate_intro .sec_others .list .item .go{margin-top:.5em;text-align:left;}
.cate_intro .sec_start{padding-top:60px; padding-bottom:60px;}
.cate_intro .sec_start .txt{font-size:2.14rem; line-height:1.46;}
}
/* tamplate*/
.cate_skins {background: white;}
#layout_body.cate_template.skins{padding-bottom:20px;}
#layout_body.cate_skins::after{display:block;content:'';width:100%;height:100px;background:inherit;}
.cate_skins .sec_choose_type {padding-top: 60px }
.cate_skins .sec_choose_type .w_container {display: flex; justify-content: center; gap: 2rem;}
.cate_skins .sec_choose_type [class*="type"] {user-select: none; flex: 1 1 50%; padding: 80px 1rem 64px; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; background-color: #F2F5FA; transition: background-color .25s}
.cate_skins .sec_choose_type [class*="type"]:hover {background-color: #1971E3;}
.cate_skins .sec_choose_type [class*="type"]:hover .title {color: #3AF6FF}
.cate_skins .sec_choose_type [class*="type"]:hover .title .impact li {color: white;}
.cate_skins .sec_choose_type [class*="type"]:hover .title .impact li::before {background-color: white;}
.cate_skins .sec_choose_type [class*="type"]:hover .features li {color: #389CFF; box-shadow: 0 3px 15px 3px rgba(0, 0, 0, .1);}
.cate_skins .sec_choose_type [class*="type"]:hover .link {color: white; position: relative;}
.cate_skins .sec_choose_type [class*="type"]:hover .link::before {content: ""; position: absolute; left: 0; bottom: -.5rem; width: 0; height: 1px; display: block; background-color: white; transition: .25s;}
.cate_skins .sec_choose_type [class*="type"]:hover .link:hover::before {width: calc(100% - 1.25rem);}
.cate_skins .sec_choose_type [class*="type"]:hover .link::after {border-color: white;}
.cate_skins .sec_choose_type .title {font-size: 44px; line-height: 1.5; color: #303C4B; font-weight: bold}
.cate_skins .sec_choose_type .title .impact {display: inline-flex}
.cate_skins .sec_choose_type .title .impact li {position: relative; font-size: 44px; color: #1971E3; position: relative;}
.cate_skins .sec_choose_type .title .impact li::before {content:""; position: absolute; top: 0.25rem; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 2px; display: block; background-color: #1971E3;}
.cate_skins .sec_choose_type .features {color: #8F979F; flex: 1 1 auto; padding-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem}
.cate_skins .sec_choose_type .features li {position: relative; width: fit-content; border-radius: 50px; background-color: white; font-size: 16px; padding: 0.85rem 2.5rem; box-shadow: 0 3px 15px 3px rgba(143, 151, 159, .2); position: relative; font-weight: 500;}
.cate_skins .sec_choose_type .features li .impact {color: #1971E3; font-weight: 500;}
.cate_skins .sec_choose_type img {position: absolute; top: 50%; transform: translateY(-50%);}
.cate_skins .sec_choose_type .link {margin: 2rem auto 1rem; display: flex; align-items: center; font-size: 20px; line-height: 1; border-radius:.5rem; color: #1971e3;}
.cate_skins .sec_choose_type .link::after {content: ""; margin-left: .75rem; border: 2px solid #1971e3; border-left: 0; border-bottom: 0; transform: rotate(45deg); width: 8px; height: 8px; display: flex; }
@media screen and (max-width: 480px) {.cate_skins .sec_choose_type button {padding: 0 2rem; width: 100%; border-width: 1px ;}
}
.cate_skins .type_homepage .features li:nth-of-type(2) {padding-left: 6.25rem}
.cate_skins .type_homepage .features li:nth-of-type(2) img {left: 1.5rem}
.cate_skins .type_homepage .features li:last-of-type {padding-right: 6rem}
.cate_skins .type_homepage .features li:last-of-type img {right: 1.75rem; top: 35%}
.cate_skins .type_shoppingmall .features li:nth-of-type(1) {padding-left: 6rem}
.cate_skins .type_shoppingmall .features li:nth-of-type(1) img {left: 0.75rem; margin-top: -3px;}
.cate_skins .type_shoppingmall .features li:nth-of-type(3) {padding-right: 5.5rem}
.cate_skins .type_shoppingmall .features li:nth-of-type(3) img {right: 1.5rem; top: 25%}
.cate_template{background:#f2f5fa;}
.cate_template .w_container {width: calc(100% - 24vw - 2rem); padding: 0 30px;}
.cate_template .sec_head_comm{padding-bottom: 80px !important;}
.cate_template .page_tit em{display:inline-block; position:relative;}
.cate_template .page_tit .cnt{position:absolute; left:calc(100% + 5px); top:.15em; font-family:'Roboto'; font-size:.55em;}
.cate_template .sec_template .template_list{display:flex; flex-wrap:wrap; max-width:1672px; margin-left: -18px; margin-right: -18px;}
.cate_template .sec_template .template_list li{width:25%; margin-bottom:80px; padding-left:.5vw; padding-right:.5vw;position: relative;}
.cate_template .sec_template .template_list li.new{position: relative;}
.cate_template .sec_template .template_list li.new::before{content: ''; display: inline-block; position: absolute; top: -15px; left: 10px; z-index: 10; width: 72px; height: 72px; background: url(/images/template/ico_new.svg) center no-repeat; opacity: 0; transform: translateY(10px); transition: .3s;}
.cate_template .sec_template .template_list li.new.on::before{opacity: 1; transform: translateY(0);}
.cate_template .sec_template .template_list .box{overflow:hidden; position:relative; border-radius:20px; border: 1px solid #e3e7ee;}
.cate_template .sec_template .template_list .box::after{content:''; display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:0; transition:.2s;}
.cate_template .sec_template .template_list .box .bts{position:absolute; top:50%; left:50%; z-index:2; text-align:center; transform:translate(-50%, -50%); opacity:0; transition:.2s;}
.cate_template .sec_template .template_list .box:hover::after,
.cate_template .sec_template .template_list .box:hover .bts,
.cate_template .sec_template .template_list .box.on::after,
.cate_template .sec_template .template_list .box.on .bts{opacity:1;}
.cate_template .sec_template .template_list .box img{width:100%; max-width:100%; height:auto;}
[data-touch="true"] .cate_template .sec_template .template_list .box.on img,
[data-touch="true"] .cate_template .sec_template .template_list .box:hover img {filter: blur(.45rem);}
.cate_template .sec_template .template_list .box .btn_fill_white{ width:12.8em; max-width:100%; font-weight:700;}
[data-touch="false"] .cate_template .sec_template .template_list .box img {transition: filter .25s;}
[data-touch="false"] .cate_template .sec_template .template_list .box.on img,
[data-touch="false"] .cate_template .sec_template .template_list .box:hover img {filter: blur(.45rem);}
.cate_template .sec_template .template_list .box .btn_fill_white::after{content:none;}
.cate_template .sec_template .template_list .box .btn_go{display:inline-block; margin-top:1.5em; border-bottom:1px solid #fff; color:#fff; font-weight:700; }
.cate_template .sec_template .template_list .desc{margin-top:1em; text-align:center; line-height:1.2;}
.cate_template .sec_template .template_list .desc .subject{position:relative; z-index:1; font-size:1.2rem; font-weight:700;}
.cate_template .sec_template .template_list .desc .subject::after{content:''; display:inline-block; position:absolute; left:0; right:0; bottom:0; z-index:-1; height:.5em; border-radius:.25em; background:#fff;}
.cate_template.skins .page_tit {display: flex; align-items: center}
.cate_template.skins .page_tit .arrow {margin-left: 1rem; background-color: #333; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; position: relative; justify-content: center; align-items: center;}
.cate_template.skins .page_tit .arrow::after {content: ''; margin-top: -4px; border: 2px solid #fff; border-top: none; border-right:none; transform: rotate(-45deg); width: 10px; height: 10px; display: block; align-items: center; justify-content: center;}
.cate_template.skins .select_type {display:none; opacity: 0; height:0; max-height: 0; position: absolute; top: 2rem; border-top: 2px solid #003333; padding: 1rem; transform: translateY(-3px); transition: opacity .2s, transform .1s}
.cate_template.skins .select_type.is_active {opacity: 1; height: fit-content; max-height: 86px; background-color: #fff; transform: translateY(0); z-index: 10;}
.cate_template.skins .select_type a {line-height: 28px; display: block;}
.cate_template.skins .select_type a:hover {text-decoration: underline;}
/* 디자인제작 */
.cate_template.custom{padding-bottom: 0 !important; background: none;}
.cate_template.custom .sec_head_comm { position: relative;max-width: 100% !important;}
.cate_template.custom .sec_head_comm .w_container {width:100%; height: 100%; background: url(/images/template/visual_custom_3.jpg) no-repeat 100% center; }
.cate_template.custom .sec_head_comm .visual img{position:absolute; left:50%; top:0; z-index:-1; transform:translateX(-50%);}
.cate_template.custom section{padding-top:120px; padding-bottom:120px;}
.cate_template.custom .gallery{justify-content: space-between;}
.cate_template.custom .gallery li{flex-basis:auto;}
.cate_template.custom .gallery .tit{margin-top:1.3em; font-size:1.6rem;}
.cate_template.custom .gallery .desc{padding-top:1em; font-size:1.2rem;}
.cate_template.custom .sec_function.service{border-top:1px solid #EEE;}
.cate_template.custom .sec_function.service .list{margin-top: 7px;}
.cate_template.custom .sec_function.service .tit{margin-top: 1em;}
.cate_template.custom .sec_function.service .desc{line-height: 1.6;}
.cate_template.custom .sec_price{background: #F2F5FA;}
.cate_template.custom .sec_price .list{display: flex; gap:1.3rem; margin-top:5em;}
.cate_template.custom .sec_price .list li{flex:1; display:flex; flex-direction: column; align-items: center; gap:1em; position:relative; padding:36px 25px; border-radius:20px; text-align: center; background:#fff; box-shadow: 0px 0px 8px #C1CDE1;}
.cate_template.custom .sec_price .list li.recommend::after{content:'추천'; display: flex; justify-content: center; align-items: center; position:absolute; top: -20px; right: -8px; width:72px; height:72px; border-radius:50%; font-size:1.066rem; color:#fff; background:#F58800; box-shadow: 0px 0px 6px #00000029;}
.cate_template.custom .sec_price .list .tit{font-size:1.6rem; font-weight:700; color:#000;}
.cate_template.custom .sec_price .list .desc{font-size:1.066rem; color:#717171;}
.cate_template.custom .sec_price .list .detail{display:flex; flex-wrap:wrap; gap:.3em 0; min-height:8.5em; padding-top:1em; padding-bottom:.7em; border-top:1px solid #E1E1E1; border-bottom:1px solid #E1E1E1; font-size: 1.066rem;}
.cate_template.custom .sec_price .list dt{flex-basis: 43%; font-size:inherit; color:#717171; text-align: left;}
.cate_template.custom .sec_price .list dt::before{content:''; display:inline-block; position: relative; top: -2px;width:1.1em; height:1.1em; margin-right:.4em; vertical-align: middle; background-repeat:no-repeat; background-size:contain;}
.cate_template.custom .sec_price .list dt.page::before{background-image:url(/images/template/icon_page.svg)}
.cate_template.custom .sec_price .list dt.period::before{background-image:url(/images/template/icon_period.svg)}
.cate_template.custom .sec_price .list dt.edit::before{background-image:url(/images/template/icon_edit.svg)}
.cate_template.custom .sec_price .list dd{flex-basis: 57%; font-size:inherit; color:#000; text-align:right;}
.cate_template.custom .sec_price .list .detail.desc{flex-flow:column; gap:0; width:100%; justify-content: center; align-items: center;}
.cate_template.custom .sec_price .list .hash{min-height: 3em; margin-bottom:1em; font-size:1.066rem; color:#000;}
.cate_template.custom .sec_price .list .price{font-size:1.066rem; color:#717171;}
.cate_template.custom .sec_price .list .no{font-family:Roboto; font-size:50px; color:#1971E3;}
.cate_template.custom .sec_price .list .txt{display:inline-block; padding-top:0.25em; font-size:40px; font-weight:700; color:#1971E3; }
.cate_template.custom .sec_price .list .btn_fill_blue{width:min(192px, 100%); margin-top: auto;}
.cate_template.custom .sec_price .note{margin-top:3em; text-align: center; color: #666;}
.cate_template.custom .sec_compare .sec_tit_comm p{font-weight:500;}
.cate_template.custom .compare_table{margin-top:-2rem;}
.cate_template.custom .compare_table .head{border-bottom:2px solid #B1B1B1;}
.cate_template.custom .compare_table .head dd{font-size:1.2rem; font-weight:700;color:#000;}
.cate_template.custom .compare_table dl{display: flex; align-items: stretch; min-height:4.4rem; border-bottom:1px solid #eee;}
.cate_template.custom .compare_table dt{flex:1; display: flex; align-items: center; padding-top:.3em; padding-bottom:.3em; color:#788395; word-break: keep-all;}
.cate_template.custom .compare_table dd{flex:1; display:flex; flex-flow:column; justify-content: center; align-items: center; padding-top:.3em; padding-bottom:.3em; text-align: center; color:#333;}
.cate_template.custom .compare_table .check{content:url(/images/template/icon_check.svg)}
.cate_template.custom .sec_compare .note{margin-top:1.5rem;}
.cate_template.custom .sec_compare .note p{color:#666;}
.cate_template.custom .sec_process{position:relative; height: calc(100vh + 790px); background:#F2F5FA;}
.cate_template.custom .sec_process .w_container{position:absolute; top:0; left:50%; z-index:10;transform:translateX(-50%); width:100%; min-height:100vh; margin:0; padding-top:120px; padding-bottom:120px; transition:padding .2s;}
.cate_template.custom .sec_process.fixed_win .w_container{position:fixed; }
.cate_template.custom .sec_process.sticked_bott .w_container{position:absolute; top:auto; bottom:0;}
.cate_template.custom .sec_process .sec_cont{display: flex; justify-content: space-between; gap:50px; margin-top:70px;}
.cate_template.custom .process{position:relative; padding-left:20px;}
.cate_template.custom .process li{position:relative; padding-left:55px; }
.cate_template.custom .process li{padding-bottom:2rem;border-left: 3px solid #C1DCFF;}
.cate_template.custom .process li:last-child{border-color:transparent;}
.cate_template.custom .process .no{display:block; position:absolute; left:-20px; top:-3px; display:flex; justify-content: center; align-items: center; width:36px; height:36px; border-radius: 50%; font-size:20px; color:#fff; background:#C1DCFF; transition:.2s;}
.cate_template.custom .process .box{position:relative; opacity:.5; transition:.2s;}
.cate_template.custom .process .box::before{content:''; display: block; position:absolute; left: -1.2em; top:-1.3em; right:-1.2em; bottom:-1.5em; z-index: 0; border-radius:10px; background:#fff; box-shadow: 0px 3px 6px #DFE5F1; opacity:0; transition: .2s;}
.cate_template.custom .process .box::after{content:''; display: block; position:absolute; left:calc(-1.2em - 13px); top:7px; border-right:13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; opacity:0; transition: .2s;}
.cate_template.custom .process .img{display: none; position:relative; z-index: 1;}
.cate_template.custom .process .tit{position:relative; z-index:1; font-size:20px;}
.cate_template.custom .process p{position:relative; z-index:1; margin-top:.6em; line-height:1.6; color:#666; word-break: keep-all;}
.cate_template.custom .process p b{color:#333; font-weight:400;}
.cate_template.custom .process li.on .no{background:#1971E3;}
.cate_template.custom .process li.on .box{opacity:1;}
.cate_template.custom .process li.on p b{font-weight:700;}
.cate_template.custom .process li.on .box::before,
.cate_template.custom .process li.on .box::after{opacity: 1;}
.cate_template.custom .pictures{flex:1; position:relative;}
.cate_template.custom .pictures img{position:absolute; top:0; right:0; opacity:0; max-width:100%; transition:.2s;}
.cate_template.custom .pictures[data-no="0"] img:nth-of-type(1),
.cate_template.custom .pictures[data-no="1"] img:nth-of-type(2),
.cate_template.custom .pictures[data-no="2"] img:nth-of-type(3),
.cate_template.custom .pictures[data-no="3"] img:nth-of-type(4){opacity:1;}
.cate_template .quick-menu {
background-color: white;
padding: 1.25rem;
left: 50%;
display: flex;
flex-direction: column;
gap: 5px;
width: 200px;
position: sticky;
top: 90px;
left: 1rem;
margin-left: -15rem;
border-radius: .5rem;
max-width: 12vw;
}
.cate_template .quick-menu li {display: flex; align-items: center; gap: 1rem; justify-content: space-between; cursor: pointer}
.cate_template .quick-menu li strong {font-weight: 500; border-radius: 5px; font-size: 14px; color: #434649; transition: color .25s}
.cate_template .quick-menu li:hover strong,
.cate_template .quick-menu li.is-active strong {
color: #0066FF;
font-weight: bold;
}
.cate_template .quick-menu span {
color: #838689;
}
.cate_template .quick-menu li.is-active span {
font-weight: bold;
color: #333;
}
@media only screen and (max-width:1023px) {
.cate_template .sec_template .template_list li{width:33.33%; margin-bottom:50px;}
.cate_template .w_container {
width: calc(100% - 30vw - 2rem);
}
.cate_template .quick-menu {min-width: 15vw;}
}
@media only screen and (max-width:1440px) {
.cate_template .sec_template .template_list li.new::before{left: 0;}
.cate_skins .sec_choose_type {padding-top: 1rem}
.cate_skins .sec_choose_type .w_container {flex-direction: column;}
.cate_template.custom .gallery{justify-content: space-around;}
.cate_template.custom .sec_price .list{flex-wrap: wrap;}
.cate_template.custom .sec_price .list li{flex-basis: calc(50% - 1em); min-width: 230px;}
}
@media only screen and (max-width:960px) {
.cate_template .w_container {
width: calc(100% - 2rem)
}
.cate_template .quick-menu {
margin-bottom: 0;
z-index: 100;
top: 52px;
flex-direction: row;
margin-left: 0;
width: 100vw;
left: 0vw;
gap: 1.5rem;
padding: 0 1.5rem;
overflow-x: auto;
scrollbar-width: 0;
max-width: none;
margin-left: -44px;
border-radius: 0;
margin-bottom: 2rem;
}
.cate_template .quick-menu::-webkit-scrollbar {
width: 0;
height: 0;
}
.cate_template .quick-menu li {
flex: 0 0 auto;
gap: 5px;
position: relative;
padding: 1rem 0
}
.cate_template .quick-menu li.is-active::after {
content: "";
position: absolute;
bottom: 0;
height: 2px;
width: 100%;
display: block;
background-color: #0066FF;
}
}
@media only screen and (max-width:700px) {
.cate_template .sec_head_comm{padding-bottom:40px !important;}
.cate_template .sec_template{padding-left:80px !important; padding-right:80px !important;}
.cate_template .sec_template .template_list{flex-flow:column; margin: 2rem 0; padding: 0 2rem}
.cate_template .sec_template .template_list li{width:100%; margin-bottom:40px;}
.cate_template .sec_template .template_list .box .btn_fill_white{width:9em;}
.cate_skins .sec_choose_type [class*="type"] {padding: 56px 1rem}
.cate_skins .sec_choose_type .title, .cate_skins .sec_choose_type .title .impact li {font-size: 7.84vw}
.cate_skins .sec_choose_type .title .impact li::before {top: 0}
.cate_skins .sec_choose_type .features li {font-size: 15px;}
.cate_skins .list-emoji img {max-height: 40px;}
.cate_skins .type_homepage .list-emoji:nth-of-type(1) {padding-right: 4.5rem}
.cate_skins .type_homepage .list-emoji:nth-of-type(1) img {right: 1rem; top: 35%}
.cate_skins .type_homepage .list-emoji:nth-of-type(3) {padding-left: 4rem}
.cate_skins .type_homepage .list-emoji:nth-of-type(3) img {left: 1.15rem}
.cate_skins .type_shoppingmall .list-emoji:nth-of-type(1) {padding-right: 3.65rem}
.cate_skins .type_shoppingmall .list-emoji:nth-of-type(1) img {right: 1.625rem; top: auto; bottom: 0; transform: translateY(0)}
.cate_skins .type_shoppingmall .list-emoji:nth-of-type(2) {padding-left: 3.65rem}
.cate_skins .type_shoppingmall .list-emoji:nth-of-type(2) img {margin-top:-1px; left: 0.75rem}
.cate_template.custom .sec_head_comm{background:#f2f5fa;}
.cate_template.custom .sec_head_comm .w_container{z-index:1;}
.cate_template.custom .sec_head_comm .visual img{transform: translateX(-60%) scale(.6); transform-origin: center bottom; z-index:0;}
.cate_template.custom section{padding-top:64px; padding-bottom:64px;}
.cate_template.custom .sec_head_comm .w_container{height: auto;}
.cate_template.custom .sec_head_comm .img{position:static;}
.cate_template.custom .sec_function.service .list{flex-flow: row; flex-wrap:wrap;}
.cate_template.custom .sec_function.service .list li{flex-basis:50%;padding-left:.5em; padding-right:.5em;}
.cate_template.custom .sec_price .list{margin-top:3em;}
.cate_template.custom .sec_price .list li.recommend::after{width:60px; height: 60px; top:-10px; }
.cate_template.custom .sec_price .list .desc{word-break: keep-all;white-space: pre-line;}
.cate_template.custom .sec_price .list .detail{min-height: auto; padding-bottom:1em;font-size: 13px;}
.cate_template.custom .sec_price .list .detail.desc{flex-flow: row; min-height:8.5em;}
.cate_template.custom .sec_price .list .hash{min-height: auto;margin-bottom:0; word-break: keep-all;}
.cate_template.custom .sec_price .list .hash .line_wrap_rev_m span{display: inline-block;}
.cate_template.custom .sec_price .list .no{font-size:40px;}
.cate_template.custom .sec_price .list .txt{padding-top:0; font-size:30px;}
.cate_template.custom .sec_price .note{margin-top:2em;}
.cate_template.custom .compare_table{margin-top:0;}
.cate_template.custom .sec_compare .note p{margin-bottom:.3em;}
.cate_template.custom .sec_process{height:auto; padding-top:56px; padding-bottom:56px;}
.cate_template.custom .sec_process .w_container{position:static !important; transform: translateX(0); min-height:auto; padding-top:0; padding-bottom:0;}
.cate_template.custom .process{width:100%; padding-right:20px;}
.cate_template.custom .process li{padding-bottom:3em;}
.cate_template.custom .process .img{display:block; height:0; overflow: hidden; transition:.4s;}
.cate_template.custom .process li.on .img{height:calc((100vw - 135px )*0.7);}
.cate_template.custom .process li.on .img img{max-width: 100%;}
.cate_template.custom .sec_process .pictures{display:none;}
#layout_body.cate_template.skins {
overflow-x: unset
}
.cate_template .sec_template {padding: 0 !important}
}
/* 스타터패키지 */
.starter{padding-bottom:0 !important;}
.starter img{max-width:100%;}
.starter .tag_event{display:inline-block; margin-right:.5em; font-size:clamp(12px, 1.6vw, 16px); font-weight:700; padding-left:.7em; padding-right:.7em; line-height:1.6; color:#fff; border-radius:999px; background: linear-gradient(-60deg, #1971E3, #29D7FD, #02F4BA, #1971E3, #29D7FD 90%); background-size:350% auto; animation: gradient 5s ease-in-out infinite;}
@keyframes gradient { 0% {background-position: 0% 50%;} 100% {background-position: 100% 50%;}}
.starter section{padding:min(120px, 12vw) 0;}
.starter .sec_head_comm{max-width:100% !important; height:440px; background:url(/images/template/visual_starter.png) 75% bottom / contain no-repeat;}
.starter .sec_head_comm .visual{position:absolute; right:0; top:0; z-index:0;}
.starter .sec_function{background:#fff;}
.starter .sec_function .list{gap:85px;}
.starter .sec_function .list li{overflow:hidden; flex:1; border-radius:min(6vw, 20px); background:#fff; box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.12);}
.starter .sec_function .list .tit{margin-top:min(30px, 3vw); font-size: 1.6rem;}
.starter .sec_function .list .desc{margin-bottom:min(40px, 4vw); color: #666; word-break: keep-all; font-size: 1.2rem;}
.starter .sec_function .list img{width:100%;}
.starter .sec_type{padding:0; background:#fff;}
.starter .sec_type .list{display: flex; gap:min(16px, 2vw); align-items: center; position:relative; z-index:1; margin-top:min(48px, 5vw); padding-top:min(80px, 8vw); padding-bottom:min(80px, 8vw);}
.starter .sec_type .list::before{content:''; display: block; position:absolute; top:0; left:calc(50% - 50vw); bottom: 0; width:100vw; z-index:-1; background-color: #F2F5FA;}
.starter .sec_type .list li{flex:1; overflow:hidden;}
.starter .sec_type .list li:not(.equal){overflow:hidden; max-width:230px; border-radius:min(15px, 2vw); background:#E2EAF6;}
.starter .sec_type .list li .image{background:#fff;}
.starter .sec_type .list li img{margin-right:-2px; margin-top:-1px;}
.starter .sec_type .list .txt{display: flex; justify-content: center; align-items: center; height:3em; text-align: center; font-size: clamp(13px, 1.8vw, 18px); color:#303C4B; font-weight:700;}
.starter .sec_type .list .plus{display:inline-flex; justify-content: center; align-items: center; width:1.38em; height:1.38em; margin-right:.3em; background:url('data:image/svg+xml,') center / contain no-repeat;}
.starter .sec_type .list .equal{display:flex; flex-direction: column; font-size:clamp(17px, 2.2vw, 22px); color:#303C4B;}
.starter .sec_type .list .equal b{font-family:Roboto; font-size:2.18em;}
.starter .sec_type .list .equal .vat{text-indent:4em;}
.starter .sec_type .item{display:flex; align-items:center; justify-content: space-between; position:relative; z-index:1; min-height:300px; padding-right:min(30px, 3vw); border-radius: min(2vw, 20px);background:#1971E3;}
.starter .sec_type .item .txt{padding-left:2.5em; font-size:clamp(20px, 3.2vw, 32px); font-weight:700; color:rgba(255,255,255,.5); white-space: nowrap;}
.starter .sec_type .item .txt b{color:#fff;}
.starter .sec_type .item .txt small{font-size:.55em; font-weight:400;}
.starter .sec_type .item .txt .tootip{display: inline-block; position:relative;}
.starter .sec_type .item .txt .tootip i{display: inline-block; width:22px; height:22px; margin-left:.5em; margin-bottom: -5px; background:url('data:image/svg+xml,') center / contain no-repeat;}
.starter .sec_type .item .txt .tootip dl{position:absolute; top:33px; left:-20px; padding:24px 40px; opacity:0; pointer-events: none; transition: .2s; border-radius:min(20px, 2vw); font-size:clamp(14px, 1.6vw, 16px); color:#888; background:#fff; box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.25);}
.starter .sec_type .item .txt .tootip dl::before{content:''; display: block; position:absolute; top: -10px; left:30px; width:16px; height:13px; background:url('data:image/svg+xml,') center top / contain no-repeat;}
.starter .sec_type .item .txt .tootip dd + dt{margin-top:3px;}
.starter .sec_type .item .txt .tootip dt{position:relative; color:#000;}
.starter .sec_type .item .txt .tootip dt::before{content:'·'; position:absolute; font-weight:900; left:-1em; color: #888;}
.starter .sec_type .item .txt .tootip:hover dl{opacity:1; pointer-events: initial;}
.starter .sec_type .item img{margin-top:auto; border-radius: min(20px, 2vw);}
.starter .sec_homepage .w_container{display: flex; flex-wrap:wrap; gap:min(60px, 6vw) min(40px, 4vw);}
.starter .sec_homepage .sec_tit_comm{width:100%;}
.starter .sec_homepage .box{display: flex; flex-direction:column; gap: min(20px, 2vw); width:calc((100% - min(50px, 5vw))/2); border-radius:min(20px, 3vw); padding:min(80px, 8vw) min(50px, 5vw) min(50px, 5vw); background:#fff;}
.starter .sec_homepage .box:not(.full){display: flex; flex-direction:column; gap:min(40px,4vw); }
.starter .sec_homepage .box.full{width:100%;}
.starter .sec_homepage h4{font-size:clamp(20px, 3.6vw, 36px); color:#333;}
.starter .sec_homepage .box.full h4{margin-bottom:1em;}
.starter .sec_homepage h5{border-radius: min(20px, 2vw) min(20px, 2vw) 0 0;font-size:clamp(14px, 2.2vw, 22px); color:#fff; font-weight:700; line-height:3; background:#1971E3; text-align:center;}
.starter .sec_homepage .shopping h5{background:#F68995;}
.starter .sec_homepage .item{display:flex; align-items:stretch;}
.starter .sec_homepage .item table{width:50%;}
.starter .sec_homepage .item td{height:4.44em; padding-left:.7em; padding-right:.7em; border-right:1px solid #E9E9E9; border-bottom:1px solid #E9E9E9; vertical-align: middle; font-size:clamp(14px, 1.8vw, 18px); color:#888; word-break: keep-all; transition:.1s;}
.starter .sec_homepage .item td:last-child{border-right:0;}
.starter .sec_homepage .item .over td:not([rowspan]){background:#f7f7f7;}
.starter .sec_homepage .item .bk{color:#333;}
.starter .sec_homepage .item .no{font-size:.77em; margin-right:.5em; position:relative; top:-.13em;}
.starter .sec_homepage .fig{display: flex; justify-content: center; align-items: center; width:50%; padding:0 min(4vw, 40px) min(4vw, 40px); border-bottom:1px solid #E9E9E9; background:#F8F8F8;}
.starter .sec_homepage .fig > div{position:relative; padding-right:30%;}
.starter .sec_homepage .main{display: inline-block; position:relative; top:min(40px, 4vw);}
.starter .sec_homepage .sub{display: inline-block; position:absolute; right:0;}
.starter .sec_homepage .fig img{max-width:100%;}
.starter .sec_homepage .sub{max-width:50%;}
.starter .sec_homepage .fig i{display: flex; align-items: center; justify-content: center; position:absolute; width:20px; height:20px; border-radius: 50%; font-size:14px; color:#fff; font-weight:700;}
.starter .sec_homepage .fig i.off{opacity:.3;}
.starter .sec_homepage .note{margin-top:min(50px, 3vw);}
.starter .sec_homepage .note p{position:relative; padding-left:1.5em; font-size:clamp(13px, 1.6vw, 16px); color:#888;}
.starter .sec_homepage .note p::before{content:''; display: block; position:absolute; left:.5em; top:.6em; width:4px; height:4px; border-radius:50%; background:#888;}
.starter .sec_homepage .note p b{color:#000;}
.starter .sec_homepage .homepage .item .no{color:#1971E3;}
.starter .sec_homepage .homepage .fig i{background:rgba(25, 113, 227, 0.8);}
.starter .sec_homepage .homepage .no1{left:3%; top:-1%;}
.starter .sec_homepage .homepage .no2{left:44%; top:-1%;}
.starter .sec_homepage .homepage .no3{left:calc(50% - 10px); top:22%;}
.starter .sec_homepage .homepage .no4{left:6%; top:47%;}
.starter .sec_homepage .homepage .no5{left:50%; top:47%;}
.starter .sec_homepage .homepage .no6{left:calc(50% - 10px); top:89%;}
.starter .sec_homepage .homepage .no7{left:5%; top:4%;}
.starter .sec_homepage .shopping{margin-top:min(60px, 6vw);}
.starter .sec_homepage .shopping .item .no{color:#F68995;}
.starter .sec_homepage .shopping .fig i{background:rgba(255, 103, 120, 0.9);}
.starter .sec_homepage .shopping .no1{left:11%; top:0;}
.starter .sec_homepage .shopping .no2{left:25%; top:0;}
.starter .sec_homepage .shopping .no3{left:calc(50% - 10px); top:19%;}
.starter .sec_homepage .shopping .no4{left:35%; top:38%;}
.starter .sec_homepage .shopping .no5{left:calc(50% - 10px); top:70%;}
.starter .sec_homepage .shopping .no6{left:calc(50% - 10px); top:92%;}
.starter .sec_homepage .shopping .no7{left:5%; top:4%;}
.starter .sec_homepage .video{overflow:hidden; border: 1px solid #EDEDED;}
.starter .sec_homepage video{width:100%; margin-top:-7.8%; margin-bottom:-9.1%;}
.starter .sec_homepage .box .desc{display: flex; flex-direction:column;font-size:clamp(14px, 2vw, 20px); color:#888; line-height:1.6; word-break: keep-all;}
.starter .sec_homepage .box .desc b{color:#000; font-weight:400;}
.starter .sec_homepage .counsurting{position:relative;}
.starter .sec_homepage .counsurting .image{margin-bottom: max(-50px, -5vw); margin-left: max(-50px, -5vw); margin-right: max(-50px, -5vw);}
.starter .sec_homepage .counsurting .image img{width: 100%;}
.starter .sec_process{background:#fff;}
.starter .sec_process .sec_tit_comm{margin-bottom:min(60px, 6vw); text-align: left;}
.starter .sec_process .process{display:flex; align-items:stretch; gap:min(42px, 4.2vw);}
.starter .sec_process .process li{display: flex; flex-direction: column; gap: min(12px, 1.2vw); flex:1; position:relative;}
.starter .sec_process .process li + li::before{content:''; display: block; position: absolute; top:0; bottom:0; left:max(-21px, -2.1vw); border-left:1px solid #eee;}
.starter .sec_process .process .no{font-family: Roboto; font-size: clamp(13px, 2vw, 20px); color:#333; font-style: normal; font-weight: 700; line-height:1;}
.starter .sec_process .process .tit{font-size: clamp(16px, 2.4vw, 24px); color:#333; font-weight: 700;}
.starter .sec_process .process p{font-size: clamp(14px, 1.8vw, 18px); color:#666; margin-bottom:.5em;}
.starter .sec_process .process .img{margin-top: auto;}
.starter .sec_process .process .img svg{width:100%; height:auto;}
.starter .sec_process .process .pic1_target_main{transform:translate(-10%, 100%);}
.starter .sec_process .process .pic1_target_right{transform: translateX(-30%); opacity:0;}
.starter .sec_process .process .pic1_target_left{transform: translateX(30%); opacity:0;}
.starter .sec_process .process.on .pic1_target_main{animation:pic1_target_main .5s both;transform:translate(-.5%, 6%);}
.starter .sec_process .process.on .pic1_target_right{animation:fadeIn .5s both, pic1_target_right .5s both;}
.starter .sec_process .process.on .pic1_target_left{animation:fadeIn .5s both, pic1_target_left .5s both;}
.starter .sec_process .process .pic1_target_sub1{animation:pic1_target_sub1 2s infinite 1s; transform-origin: 83% 52%;}
.starter .sec_process .process .pic1_target_sub2{animation:pic1_target_sub2 2s infinite; transform-origin: 77% 60%;}
.starter .sec_process .process .pic1_target_sub3{animation:pic1_target_sub3 2s infinite; transform-origin: 84% 69%;}
.starter .sec_process .process .pic1_target_sub4{animation:pic1_target_sub4 2s infinite 1s; transform-origin: 17% 48%;}
@-webkit-keyframes fadeIn{from {opacity:0;} to {opacity:1;}}
@-webkit-keyframes pic1_target_right{
0% {transform: translateX(-30%);} 80%{transform:translateX(2%)} 90%{transform:translateX(1%)} 95%{transform:translateX(-1%)} 100%{transform:translateX(0)}
}
@-webkit-keyframes pic1_target_left{
0% {transform: translateX(30%);} 80%{transform:translateX(-2%)} 90%{transform:translateX(-1%)} 95%{transform:translateX(1%)} 100%{transform:translateX(0)}
}
@-webkit-keyframes pic1_target_main{
0% {transform:translate(-10%, 100%);}
80% {transform:translate(0%, 4%);}
90% {transform:translate(0%, 4%);}
95% {transform:translate(-.5%, 6%);}
}
@-webkit-keyframes pic1_target_sub1{
0% {transform:scale(1);}
20% {transform:scale(.4);}
50% {transform:scale(.4);}
70% {transform:scale(1);}
}
@-webkit-keyframes pic1_target_sub2{
0% {transform:scale(1);}
20% {transform:scale(.8);}
50% {transform:scale(.8);}
70% {transform:scale(1);}
}
@-webkit-keyframes pic1_target_sub3{
0% {transform:scale(1);}
20% {transform:scale(.8);}
50% {transform:scale(.8);}
70% {transform:scale(1);}
}
@-webkit-keyframes pic1_target_sub4{
0% {transform:scale(1);}
20% {transform:scale(.6);}
50% {transform:scale(.6);}
70% {transform:scale(1);}
}
.starter .sec_process .process .pic2_target_all{opacity:0; transform:scale(0)}
.starter .sec_process .process.on .pic2_target_all{animation:pic2_target_all .5s; transform-origin: center; opacity:1; transform:scale(1)}
.starter .sec_process .process .pic2_target_dot1{animation:pic2_target_dot1 1.5s infinite both;}
.starter .sec_process .process .pic2_target_dot2{animation:pic2_target_dot2 1.5s infinite both;}
.starter .sec_process .process .pic2_target_dot3{animation:pic2_target_dot3 1.5s infinite both;}
.starter .sec_process .process .pic2_target_line1{animation:pic2_target_line1 1.5s infinite both; transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line2{animation:pic2_target_line2 1.5s infinite both; transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line3{animation:pic2_target_line3 1.5s infinite both; transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line4{animation:pic2_target_line4 1.5s infinite both; transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line5{animation:pic2_target_line5 1.5s infinite both; transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line6{transform:scaleY(.5); transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line7{animation:pic2_target_line7 1.5s infinite both; transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line8{animation:pic2_target_line8 1.5s infinite both; transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line9{animation:pic2_target_line9 1.5s infinite both; transform-origin: center 27%;}
.starter .sec_process .process .pic2_target_line10{animation:pic2_target_line10 1.5s infinite both; transform-origin: center 27%;}
@-webkit-keyframes pic2_target_all{
0% {opacity:0; transform:scale(0)} 10% {opacity:0;} 80%{opacity:1; transform:scale(1.1)} 90%{ transform:scale(1.1)} 95%{transform:scale(.95)} 100%{transform:scale(1)}
}
@-webkit-keyframes pic2_target_dot1{
0% {opacity:0.5;} 24%{opacity:0.5;} 25%{opacity:1;} 100%{opacity:1;}
}
@-webkit-keyframes pic2_target_dot2{
0% {opacity:0.5;} 49%{opacity:0.5;} 50%{opacity:1;} 100%{opacity:1;}
}
@-webkit-keyframes pic2_target_dot3{
0% {opacity:0.5;} 74%{opacity:0.5;} 75%{opacity:1;} 100%{opacity:1;}
}
@-webkit-keyframes pic2_target_line1{
0% {transform:scaleY(.4)} 32.33%{transform:scaleY(.4)} 33.33%{transform:scaleY(.3)} 65.66%{transform:scaleY(.3)} 66.66%{transform:scaleY(.45)} 100%{transform:scaleY(.45)}
}
@-webkit-keyframes pic2_target_line2{
0% {transform:scaleY(.6)} 32.33%{transform:scaleY(.6)} 33.33%{transform:scaleY(.4)} 65.66%{transform:scaleY(.4)} 66.66%{transform:scaleY(.6)} 100%{transform:scaleY(.6)}
}
@-webkit-keyframes pic2_target_line3{
0% {transform:scaleY(.4)} 32.33%{transform:scaleY(.4)} 33.33%{transform:scaleY(.6)} 65.66%{transform:scaleY(.6)} 66.66%{transform:scaleY(.9)} 100%{transform:scaleY(.9)}
}
@-webkit-keyframes pic2_target_line4{
0% {transform:scaleY(.25)} 32.33%{transform:scaleY(.25)} 33.33%{transform:scaleY(.75)} 65.66%{transform:scaleY(.75)} 66.66%{transform:scaleY(.55)} 100%{transform:scaleY(.55)}
}
@-webkit-keyframes pic2_target_line5{
0% {transform:scaleY(.3)} 32.33%{transform:scaleY(.3)} 33.33%{transform:scaleY(.3)} 65.66%{transform:scaleY(.3)} 66.66%{transform:scaleY(.7)} 100%{transform:scaleY(.7)}
}
@-webkit-keyframes pic2_target_line7{
0% {transform:scaleY(.55)} 32.33%{transform:scaleY(.55)} 33.33%{transform:scaleY(.55)} 65.66%{transform:scaleY(.55)} 66.66%{transform:scaleY(1.1)} 100%{transform:scaleY(1.1)}
}
@-webkit-keyframes pic2_target_line8{
0% {transform:scaleY(.35)} 32.33%{transform:scaleY(.35)} 33.33%{transform:scaleY(.3)} 65.66%{transform:scaleY(.3)} 66.66%{transform:scaleY(.8)} 100%{transform:scaleY(.8)}
}
@-webkit-keyframes pic2_target_line9{
0% {transform:scaleY(.3)} 32.33%{transform:scaleY(.3)} 33.33%{transform:scaleY(.6)} 65.66%{transform:scaleY(.6)} 66.66%{transform:scaleY(.75)} 100%{transform:scaleY(.75)}
}
@-webkit-keyframes pic2_target_line10{
0% {transform:scaleY(.4)} 32.33%{transform:scaleY(.4)} 33.33%{transform:scaleY(.35)} 65.66%{transform:scaleY(.35)} 66.66%{transform:scaleY(.3)} 100%{transform:scaleY(.3)}
}
.starter .sec_process .process .pic3_target_laptop{opacity:0; transform:scale(0)}
.starter .sec_process .process.on .pic3_target_laptop{animation:pic2_target_all .5s both; transform-origin: center; opacity:1; transform:scale(1)}
.starter .sec_process .process .pic3_target_left{transform: translateX(-50%);}
.starter .sec_process .process.on .pic3_target_left{animation:pic3_target_left .5s; transform: translateX(0);}
.starter .sec_process .process .pic3_target_right{transform: translateX(50%);}
.starter .sec_process .process.on .pic3_target_right{animation:pic3_target_right .5s; transform: translateX(0);}
.starter .sec_process .process .pic3_target_paper{animation:pic3_target_paper 2.2s infinite both; transform-origin: 30% 47%;transform:rotate(-3deg);}
@-webkit-keyframes pic3_target_left{
0% {transform: translateX(-50%);} 80%{transform:translateX(4%)} 90%{transform:translateX(2%)} 95%{transform:translateX(-1%)} 100%{transform:translateX(0)}
}
@-webkit-keyframes pic3_target_right{
0% {transform: translateX(50%);} 80%{transform:translateX(-4%)} 90%{transform:translateX(-4%)} 95%{transform:translateX(1%)} 100%{transform:translateX(0)}
}
@-webkit-keyframes pic3_target_paper{
0% {transform:rotate(-3deg);} 20% {transform:rotate(5deg);} 50% {transform:rotate(5deg);} 70% {transform:rotate(-3deg);}
}
.starter .sec_process .process .pic3_target_hand{animation:pic3_target_hand 2.2s infinite both; transform-origin: 29% 50%;}
@-webkit-keyframes pic3_target_hand{
0% {transform:rotate(0);} 20% {transform:rotate(5deg);} 50% {transform:rotate(5deg);} 70% {transform:rotate(0);}
}
.starter .sec_process .process .pic3_target_magnifier{animation:pic3_target_magnifier 2.2s infinite both; transform-origin: 90% 75%; transform:rotate(5deg);}
@-webkit-keyframes pic3_target_magnifier{
0% {transform:rotate(5deg);} 20% {transform:rotate(0);} 50% {transform:rotate(0);} 70% {transform:rotate(5deg);}
}
.starter .sec_process .process .pic3_target_person{animation:pic3_target_person 2.2s infinite both; transform-origin: 92% 85%;}
@-webkit-keyframes pic3_target_person{
0% {transform:translateX(0);} 20% {transform:translateX(-5%);} 50% {transform:translateX(-5%);} 70% {transform:translateX(0);}
}
.starter .sec_process .process .pic4_target_pad{transform: translateX(80%);}
.starter .sec_process .process.on .pic4_target_pad{animation:pic4_target_pad .5s both; }
.starter .sec_process .process .pic4_target_speaker{transform: translateX(-100%);}
.starter .sec_process .process.on .pic4_target_speaker{animation:pic4_target_speaker .5s both;}
@-webkit-keyframes pic4_target_pad{
0% {transform: translateX(80%);} 80%{transform:translateX(-4%)} 90%{transform:translateX(-4%)} 95%{transform:translateX(1%)} 100%{transform:translateX(0)}
}
@-webkit-keyframes pic4_target_speaker{
0% {transform: translateX(-100%);} 80%{transform:translateX(4%)} 90%{transform:translateX(4%)} 95%{transform:translateX(-1%)} 100%{transform:translateX(0)}
}
.starter .sec_process .process .pic4_target_hand{animation:pic4_target_hand 2.0s infinite both; transform-origin: 40% 50%;}
@-webkit-keyframes pic4_target_hand{
0% {transform:rotate(0);} 30% {transform:rotate(0);} 40% {transform:rotate(10deg);} 55% {transform:rotate(10deg);} 70% {transform:rotate(0);}
}
.starter .sec_process .process .pic4_target_line{animation:pic4_target_line 2.0s infinite both;}
.starter .sec_process .process .pic4_target_line.line1{transform-origin: 58% 63%;}
.starter .sec_process .process .pic4_target_line.line2{transform-origin: 56% 55%;}
.starter .sec_process .process .pic4_target_line.line3{transform-origin: 59% 70%;}
@-webkit-keyframes pic4_target_line{
0% {opacity:1;transform:scale(1);} 30% {opacity:1;transform:scale(1);} 35% {opacity:1;} 40% {opacity:0;transform:scale(.5);} 50% {opacity:0;transform:scale(.5);} 55% {opacity:0;} 65% {opacity:1;transform:scale(1);}
}
@media only screen and (max-width:639px) {
.starter .sec_homepage .box{width:100%;}
.starter .sec_homepage .item{flex-direction: column;}
.starter .sec_homepage .item > *{width:100% !important;}
.starter .sec_homepage .fig{padding-top:4vw; padding-bottom:8vw;}
.starter .sec_homepage .box .desc{display: block;}
.starter .sec_process .process{flex-wrap:wrap;}
.starter .sec_process .process li{width:calc((100% - min(42px, 4.2vw))/2); flex:none;}
.starter .sec_process .process li:nth-child(2n+1)::before{content:none;}
.starter .sec_function .list{gap:0;}
.starter .sec_type .item .txt{white-space: inherit; padding-left:0;}
.starter .sec_type .item .txt .tootip dl{position:fixed; top:50%; left:20px; right:20px; padding:20px; text-align: left; box-shadow:0px 0px 100vh 100vh rgba(0, 0, 0, 0.25); transform:translateY(-50%);}
.starter .sec_type .item .txt .tootip dl::before{content:none;}
.starter .sec_type .list{flex-wrap:wrap; justify-content: center; align-items: stretch; text-align: center;}
.starter .sec_type .list li{width:calc((100% - min(16px, 2vw))/2); flex:none;}
.starter .sec_type .list .equal{flex-direction:row; justify-content: center; align-items:flex-end; gap:.3em; width:100%; margin-top:1em; margin-bottom:2em; line-height:1;}
.starter .sec_type .list .equal .vat{position:relative; top:-.2em; text-indent: 0;}
.starter .sec_type .item{padding-top:30px; padding-left: min(40px, 4vw); padding-right: min(40px, 4vw); flex-direction: column; align-items: center; text-align: center;}
}
/* price*/
.cate_price{padding-bottom:0 !important; background:#f2f5fa;}
.cate_price .sec_head_comm {padding-bottom: 0 !important; position:relative; height: 440px; max-width: 100% !important;}
.cate_price .sec_head_comm .w_container {height: 100%; background: url(/images/price/visual_price.jpg) no-repeat calc(100% - min(10vw, 100px)) bottom; }
.cate_price .btn_main {font-size:20px; color: white; background: #0066ff; padding: 1rem 3rem; border-radius: .5rem;}
.cate_price .sec_head_comm .page_desc { z-index: 1; }
.cate_price .sec_head_comm .part_tit{font-size:44px; line-height:1.36; font-weight:400; margin-bottom: 2rem;}
.cate_price .sec_head_comm .page_desc{font-size:24px; line-height:1.55;}
.cate_price .sec_head_comm .btn_fill_blue {padding: .75rem 3rem; line-height: unset}
.cate_price .ico_plus {display: flex; align-self: center; margin: 0 .75rem; width: 1rem; height: 1rem; background-image: linear-gradient(white 0 0), linear-gradient(white 0 0); background-position:center; background-size: 100% 2px,2px 100%; background-repeat:no-repeat;}
.cate_price .sec_monthly {padding-top:120px; background:#fff;}
.cate_price .sec_monthly .wrapper {margin: 0 auto; padding: 5rem 0; display: flex; flex-direction: column; align-items: center; color:#fff; border-radius:20px; background:#1971E3;}
.cate_price .sec_monthly .features {font-size: 20px; background-color: #FF6854; border-radius: 50px; width: fit-content; margin: 0 auto; height: 36px; padding: 0 2rem; color: white; display: flex; align-items: center;}
.cate_price .sec_monthly .title p {font-size: clamp(30px, 4vw, 44px); text-align: center; font-weight: 300;}
.cate_price .sec_monthly .title p {font-size: clamp(30px, 4vw, 44px); text-align: center; font-weight: 300;}
.cate_price .sec_monthly button{height:3.2em; padding-left:2em; padding-right:2em; font-size:20px; margin-top:2rem; color:#1971E3;}
.cate_price .sec_information {background-color: white; padding-bottom: 120px}
.cate_price .sec_information .features + .features{margin-top: min(80px, 8vw);}
.cate_price .sec_information .features .title {position: relative; padding-left:.5em; font-size: 22px; font-weight:700; line-height:1;}
.cate_price .sec_information .features .title::before{content:''; display: block; position:absolute; top:0; left:0; width:6px; height:6px; border-radius:50%; background:#1971E3;}
.cate_price .sec_information .features ul {display: flex; flex-wrap: wrap; gap: 12px;}
.cate_price .sec_information .features li {display:flex; align-items: center; gap:20px; position: relative; width:calc((100% - 12px * 3) / 4); padding:20px; font-size: 18px; border-radius:20px; background:#F2F5FA;}
.cate_price .sec_information .features li:nth-of-type(1) {transition-delay: 0s;}
.cate_price .sec_information .features li:nth-of-type(2) {transition-delay: 0.1s;}
.cate_price .sec_information .features li:nth-of-type(3) {transition-delay: 0.2s;}
.cate_price .sec_information .features li:nth-of-type(4) {transition-delay: 0.3s;}
.cate_price .sec_information .features li:nth-of-type(5) {transition-delay: 0.4s;}
.cate_price .sec_information .features li:nth-of-type(6) {transition-delay: 0.5s;}
.cate_price .sec_information .features li:nth-of-type(7) {transition-delay: 0.6s;}
.cate_price .sec_information .features li:nth-of-type(8) {transition-delay: 0.7s;}
.cate_price .sec_information .features li:nth-of-type(9) {transition-delay: 0.8s;}
.cate_price .sec_information .features li:nth-of-type(10) {transition-delay: 0.9s;}
.cate_price .sec_information .features .title {margin-bottom: 1.5rem; font-weight: bold;}
.cate_price .sec_information .features .title span::after {content: ''; display: inline-block; position: absolute; left: 0; right: 0; bottom: 0.2em; z-index: -1; height: 0.3em; background: #ffbd8a;}
.cate_price .sec_information .features li strong{font-weight: 400; color: #88929E;}
.cate_price .sec_information .features li img{border-radius:min(10px, 1vw);background:#fff;}
.cate_price .sec_information .bnr{display: flex; align-items: center; justify-content: center; gap:20px; min-height:200px; margin-top:min(120px, 10vw); padding:20px; border-radius: 20px; background:#6B9BFF;}
.cate_price .sec_information .bnr .txt p{font-size: 26px; font-weight:700; color:#fff;}
.cate_price .sec_information .bnr .txt span{color:#90F0CB;}
.cate_price .sec_function{padding-top:120px; padding-bottom:120px; background:#F2F5FA;}
.cate_price .sec_function .list{gap:25px;}
.cate_price .sec_function .list li{display:flex; flex-direction: column; justify-content: flex-end; flex:1; overflow:hidden; height:530px; margin-top:0; padding: 0 43px 40px; border-radius:10px; text-align: left; background-position: center top; background-repeat: no-repeat; background-size:cover; color:#fff;}
.cate_price .sec_function .list li.edit{color:#333; background-image:url(/images/price/function1.png);}
.cate_price .sec_function .list li.skin{background-image:url(/images/price/function2.png);}
.cate_price .sec_function .list li.responsible{background-image:url(/images/price/function3.png);}
.cate_price .sec_function .list .tit{font-size:34px; font-weight:400; line-height:1.4; color:inherit;}
.cate_price .sec_function .list .desc{font-size: 18px;margin-top:.5em; color:inherit;}
.cate_price .apply_list{display:flex; padding-left:28%; margin-bottom:56px;}
.cate_price .apply_list li{flex:1; display:flex; flex-flow:column;align-items:center; position:relative; height:350px; padding:2.66em 1.25em 2em; border-radius:20px; color:#757575; text-align:center; background:#fff; box-shadow:0px 0px 8px #c1cde1; transition:.2s;}
.cate_price .apply_list li + li{margin-left:35px;}
.cate_price .apply_list li.recommend .flag{display:inline-block; position:absolute; top:-10px; right:-10px; width:4.56em; height:4.56em; font-size:1.04rem; color:#fff; text-align:center; line-height:4.56; border-radius:50%; background:#f58800;}
.cate_price .apply_list li .lv{width:100%; position:relative; margin-bottom:1em; font-family:'Roboto'; font-size:1.4rem; font-weight:700; color:#000; letter-spacing:.2em; white-space:nowrap;}
.cate_price .apply_list li .lv::after{content:''; display:inline-block; position:absolute; bottom:-.5em; left:calc(50% - 10px); width:20px; border-bottom:1px solid #707070; transition:.2s;}
.cate_price .apply_list li .desc{width:100%; padding-bottom:1.5em; font-size:1.04rem; line-height:1.31; white-space:nowrap;}
.cate_price .apply_list li .price{width:100%;}
.cate_price .apply_list li .price .no{font-family:'Roboto'; margin-right:4px; font-size:3.33em; letter-spacing:-.05em; color:#1971e3;}
.cate_price .apply_list li .price_desc{width:100%; font-size:.93rem;}
.cate_price .apply_list li .btn_go{width:170px; height:2.625em; margin-top:auto; border:1px solid #1971e3; border-radius:1.3125em; font-size:1.04rem; text-align:center; line-height:calc(2.625em - 2px); color:#1971e3; transition:.1s;}
.cate_price .apply_list li .btn_go:not(.soon)::after{content:''; display:inline-block; position:relative; top:-1px; width:12px; height:10px; margin-left:.7em; vertical-align:middle; background:url(/images/main/ico_arr_blue.svg) left center / contain no-repeat; transition:.2s;}
.cate_price .apply_list li .btn_go.soon{cursor:default;}
.cate_price .apply_list li .ico_commerce{display:inline-block; position:relative; width:86px; height:73px; margin-top:.5em; background:url(/images/price/img_commerce_blue.png); transition:.1s;}
.cate_price .apply_list li:hover{color:#fff; background:linear-gradient(140deg, #1971E3 0%, #16E7F6 100%) 0% 0% no-repeat padding-box;}
.cate_price .apply_list li:hover .lv{color:#fff;}
.cate_price .apply_list li:hover .lv::after{border-color:#fff;}
.cate_price .apply_list li:hover .price .no{color:#fff;}
.cate_price .apply_list li:hover .btn_go:not(.soon){border-color:#f58800; color:#fff; background:#f58800;}
.cate_price .apply_list li:hover .btn_go{border-color:#fff; color:#fff;}
.cate_price .apply_list li:hover .btn_go::after{filter:brightness(100);}
.cate_price .apply_list li:hover .btn_go:hover::after{transform:translateX(2px);}
.cate_price .apply_list li:hover .ico_commerce{filter:brightness(100);}
.cate_price .sec_compare{padding-top:40px; padding-bottom:120px; background:#fff;}
.cate_price .sec_compare .part_tit{margin-top:60px; font-size:2.13rem; font-weight:400; line-height:0;}
.cate_price .sec_compare .part_tit.soon{position:relative;}
.cate_price .sec_compare .part_tit.soon::after{content:'예정'; display:inline-block; position:absolute; top:-.5em; width:2.8em; height:1.8em; margin-left:.5em; margin-top:-2px; padding-right:.15em; font-weight:100; border-radius:.9em; font-size:.5em; color:#fff; line-height:1.8; text-align:center; background:#f58800; vertical-align:middle;}
.cate_price .sec_compare .table_respon{border-top:none;}
.cate_price .sec_compare .table_head{display:flex; padding-bottom:.8em;}
.cate_price .sec_compare .table_head li{font-family:'Roboto'; font-size:1rem; font-weight:700;}
.cate_price .sec_compare .table_respon_body{border-top:1px solid #b1b1b1;}
.cate_price .sec_compare .table_respon li:last-child{border-bottom-color:#b1b1b1;}
.cate_price .sec_compare .table_respon .th{padding-top:0; padding-bottom:0; color:#788395; font-weight:400; text-align:left; vertical-align:middle; width:28%; border-bottom:none;}
.cate_price .sec_compare .table_respon .td{width:24%; text-align:center;}
.cate_price .sec_compare .table_respon_body .td{padding-top:1.2em; padding-bottom:1.2em;}
.cate_price .sec_compare .table_respon .o{display:inline-block; position:relative; top:-1px; width:13px; height:10px; vertical-align:middle; background:url(/images/price/ico_check.svg) center center no-repeat;}
.cate_price .sec_compare .info{display:inline-block; position:relative; padding-right:5px;}
.cate_price .sec_compare .info .ico_info{display:inline-block; margin-left:4px; width:1em; height:1em; vertical-align:middle; background:url(/images/price/ico_info.svg) center center / contain no-repeat;}
.cate_price .sec_compare .info .cont{display:block; position:absolute; left:calc(1em + 15px); top:50%; transform:translateY(-50%); z-index:1; width:310px; padding:.5em 1em; border-radius:4px; font-size:.93rem; text-align:left; color:#000; background:#fff; box-shadow: 0px 0px 5px rgba(0,0,0,.1); opacity:0; transition:.2s; pointer-events:none;}
.cate_price .sec_compare .info:hover .cont{opacity:1; pointer-events:auto;}
.cate_price .sec_compare .info .cont::after{content:''; display:inline-block; position:absolute; left:-3px; top:calc(50% - 3px); width:10px; height:10px; background:#fff; transform:rotate(-45deg); box-shadow:-3px -3px 5px rgb(0,0,0,.05); }
.cate_price .section-pricing header .impact {color: #1971E3;}
.cate_price .section-pricing header .impact strong {font-family: "Roboto", "Pretendard", "Noto Sans KR";}
.cate_price .section-pricing {
padding: 12vh 0;
background-color: white;
position:relative;
text-align: center
}
.cate_price .section-pricing header h2 {
display: flex;
flex-direction: column;
font-size: clamp(30px, 4vw, 44px);
font-weight: 400;
}
.cate_price .section-pricing header h2 > span:nth-of-type(2) {
font-weight: 500;
}
.cate_price .section-pricing .wrapper {
width: min(950px, 100%);
margin: 0 auto;
}
.cate_price .section-pricing .tabs {
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
border-radius: 80px;
padding: 5px;
border: 1px solid #D1D1D1;
height: 64px;
gap: 7px;
margin: 3rem auto 5rem;
position: relative;
}
.cate_price .section-pricing .tabs li {
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
height: 100%;
width: 140px;
border-radius: 80px;
transition: background-color .25s;
cursor: pointer;
font-size: clamp(18px, 2.5vw, 22px);
font-weight: 600;
letter-spacing: 0;
color: #999;
z-index: 2;
margin-top: -1px;
cursor: pointer;
letter-spacing: -.5px;
}
.cate_price .section-pricing .tabs li.tab-active {
position: absolute;
top: 5px;
left: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
height: calc(100% - 8px);
width: 140px;
border-radius: 80px;
transition: background-color .25s;
background-color: #0066ff;
box-shadow: 0px 2px 8px 1px #00000026;
z-index: 1;
transition: .15s;
}
.cate_price .section-pricing .tabs li.is-active {
color: white;
}
.cate_price .section-pricing .tab-content {
opacity: 0;
visibility: hidden;
max-height: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 3rem;
}
.cate_price .section-pricing .tab-content.is-active {
opacity: 1;
visibility: visible;
max-height: 9999px;
scale: .9;
margin: -1rem 0;
}
.cate_price .section-pricing .tab-content + small {
font-size: clamp(17px, 2.5vw, 18px);
color: #88929E;
text-align: right;
display: block;
margin-right: 3rem;
}
.cate_price .section-pricing article {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
box-shadow: 0px 0px 24px 0px #0000001A;
padding: 2rem;
border-radius: 20px;
}
.cate_price .section-pricing article button {
background-color: #0066FF;
color: white;
border-radius: 6px;
width: 100%;
height: 64px;
font-size: clamp(16px, 2.5vw, 20px);
font-weight: 700;
margin: .5rem 0 1rem;
}
.cate_price .section-pricing article ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.cate_price .section-pricing article li {
display: flex;
align-items: center;
gap: .5rem;
font-size: clamp(16px, 2.5vw, 18px);
}
.cate_price .section-pricing article li::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='13' height='11' viewBox='0 0 13 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.16699L4.83301 9.5L11.166 1' stroke='%230066FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
width: 10px;
height: 9px;
display: block;
background-size: cover;
}
.cate_price .section-pricing article .tag {
width: 78px;
height: 30px;
display: flex;
align-items: baseline;
gap: 3px;
justify-content: center;
padding: 6px;
background-color: #C8F5FF;
color: #1971E3;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
}
.cate_price .section-pricing article .tag strong {
font-size: 16px;
}
.cate_price .section-pricing article .title {
font-size: clamp(22px, 2.5vw, 26px);
font-weight: 700;
}
.cate_price .section-pricing article .price {
line-height: 1;
display: flex;
align-items: baseline;
gap: .5rem;
margin-bottom: .5rem;
}
.cate_price .section-pricing article p {
font-size: clamp(17px, 2.5vw, 18px);
display: flex;
flex-direction: column;
color: #333333;
font-weight: 500;
align-items: flex-start;
}
.cate_price .section-pricing article .price strong {
font-size: clamp(36px, 4.5vw, 64px);
font-weight: 700;
color: #1971E3;
font-family: 'Roboto';
}
.cate_price .section-pricing article .price small {
font-size: clamp(16px, 2.5vw, 20px);
color: #757575;
}
.cate_price .section-advantage {
padding: 12vh 0;
}
.cate_price .section-advantage .wrapper {
width: min(1220px, 100%);
margin: 0 auto;
}
.cate_price .section-advantage ul {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.cate_price .section-advantage li {
flex: 0 0 auto;
width: min(86%, 390px);
position: relative;
transition: transform .25s;
}
.cate_price .section-advantage li img {
max-width: 100%;
}
.cate_price .section-advantage li:hover {
transform: translateY(-1.5rem);
}
.cate_price .section-advantage li .texts {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
padding: 2rem;
}
.cate_price .section-advantage li h3 {
font-size: clamp(22px, 2.5vw, 34px);
font-weight: 400;
display: flex;
flex-direction: column;
line-height: 1.25;
margin-bottom: .75rem;
}
.cate_price .section-advantage li p {
font-size: clamp(15px, 2.5vw, 18px);
display: flex;
flex-direction: column;
}
.cate_price .section-advantage li:nth-of-type(2),
.cate_price .section-advantage li:nth-of-type(3) {
color: white;
}
.cate_price .section-details {
background-color: white;
}
.cate_price .section-details header {
padding-bottom: 4rem;
}
.cate_price .section-details header h2 {
font-size: clamp(30px, 4vw, 44px);
font-weight: 400;
text-align: center;
}
.cate_price .section-details .wrapper {
padding: 12vh 0;
width: min(1220px, 100%);
margin: 0 auto;
display: flex;
flex-direction: column;
}
.cate_price .section-details ul:not(:last-of-type) {
margin-bottom: 1rem;
}
.cate_price .section-details ul li{
display: flex;
padding: .75rem 0;
border-bottom: 1px solid #eee;
}
.cate_price .section-details header + ul {
position: sticky;
top: 72px;
z-index: 10;
background-color: white;
margin-bottom: 8px !important;
}
.cate_price .section-details header + ul li {
border-color: #B1B1B1;
padding: 0 0 1rem;
}
.cate_price .section-details ul li.title div {
flex-direction: column;
}
.cate_price .section-details ul li.title strong {
font-size: clamp(18px, 2.5vw, 24px);
font-weight: 700;
color: #1971E3;
}
.cate_price .section-details ul li.title small {
font-size: clamp(15px, 2.5vw, 18px);
font-weight: 700;
color: black;
}
.cate_price .section-details ul li.sub-title {
font-size: clamp(15px, 2.5vw, 20px);
font-weight: 700;
}
.cate_price .section-details ul li div {
flex: 0 0 30%;
color: #555555;
font-size: clamp(15px, 2.5vw, 18px);
display: flex;
align-items: center;
}
.cate_price .section-details ul li div:nth-of-type(2),
.cate_price .section-details ul li div:nth-of-type(3) {
justify-content: center;
}
.cate_price .section-details .check::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73323 10.7672L1.49953 6.5307L0 7.95475L5.73323 13.6752L18 1.42405L16.5005 0L5.73323 10.7672Z' fill='%231971E3'/%3E%3C/svg%3E%0A");
width: 18px;
height: 14px;
display: block;
background-size: cover;
}
@media only screen and (max-width:1500px) {
.cate_template .sec_head_comm .w_container {background-size: 100% !important; background-position: center bottom !important; background-size: 70% 67% !important; }
.cate_template.custom .sec_head_comm .w_container {background-size:auto 60% !important; }
}
@media only screen and (max-width:1500px) {
/* .cate_template .sec_head_comm .w_container {background-size: 100% 67% !important; } */
}
@media only screen and (max-width:1280px) {
.cate_price .sec_head_comm .w_container {background-size: 100% !important; background-position: center bottom !important; background-size: contain !important; }
.cate_price .sec_important { padding: 3rem }
.cate_price .sec_important .title p {font-size: 3rem !important;}
.cate_price .section-advantage ul {
padding: 0 1rem;
overflow-x: auto;
scroll-padding: 0 1rem;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.cate_price .section-advantage li {
scroll-snap-align: start;
}
.cate_price .section-details ul {
padding: 0 1rem;
width: 80%;
margin: 0 auto
}
}
@media only screen and (max-width:1023px) {.cate_price .apply_list{padding-left:25%;}
.cate_price .apply_list li{padding-left:10px; padding-right:10px;}
.cate_price .apply_list li + li{margin-left:20px;}
.cate_price .sec_important .title {font-size: 36px}
.cate_price .sec_important .link {margin-bottom: 3rem;}
}
@media only screen and (max-width:639px) {
.cate_price .sec_head_comm .btn_fill_blue {line-height: 1;}
.cate_price .apply_list{flex-flow:column; padding-left:0;}
.cate_price .apply_list li{height:auto; padding-top:35px; padding-bottom:40px;}
.cate_price .apply_list li + li{margin-left:0; margin-top:20px;}
.cate_price .apply_list li .desc{padding-bottom:1em;}
.cate_price .apply_list li .price{line-height:1;}
.cate_price .apply_list li .btn_go{margin-top:1em;}
.cate_price .sec_compare{padding-bottom:64px;}
.cate_price .sec_compare .part_tit{padding-bottom:1em; line-height:1;}
.cate_price .sec_compare .part_tit.soon::after{top:.4em;}
.cate_price .sec_compare .table_respon_body li{display:flex !important;}
.cate_price .sec_function {padding: 64px 2rem;}
.cate_price .sec_function .w_container {padding: 0 2rem;}
.cate_price .sec_function .list li::before{position:absolute; top:50%; left:10px; transform:translateY(-50%);}
.cate_price .sec_function .list li{padding:70% 2rem 2rem;}
.cate_price .sec_function .list li .tit{margin:0 auto; max-width: 80vw;font-size:20px; font-weight:700;}
.cate_price .sec_function .list li .desc {margin:0 auto; word-break: keep-all; max-width: 80vw; font-size:16px;}
.cate_price .sec_monthly{padding: 0}
.cate_price .sec_faq{padding: 64px 0;}
.cate_price .sec_price .img_area {margin-left: -20rem;}
.cate_price .sec_important p:first-of-type {font-size: 1.25rem;}
.cate_price .sec_important p:last-of-type {font-size: 2rem;}
.cate_price .sec_information {padding-bottom: 64px}
.cate_price .sec_information .w_container {flex-direction: column}
.cate_price .sec_information .features {flex-direction: column;}
.cate_price .sec_information .features:not(:last-of-type) {padding-bottom: 3rem; margin-bottom: 3rem}
.cate_price .sec_information .features ul {flex-direction: row; flex-wrap: wrap; justify-content: center;}
.cate_price .sec_information .features li {flex-direction: column; gap:10px; flex: 0 0 45%; position: relative; font-size: 16px; text-indent: .5rem; padding:10px; border-radius:10px; text-align: center;}
.cate_price .sec_information .features .list img {max-width: 45px;}
.cate_price .sec_information .bnr{flex-direction: column; width:90%; margin: min(120px, 10vw) auto 0; text-align: center; word-break: keep-all;}
.cate_price .sec_information .bnr img{max-width:100%;}
.cate_price .sec_information .bnr .txt p{font-size:22px;}
.cate_price .sec_function img {margin-bottom: 1.5rem; max-width: 100%;}
.cate_price .sec_monthly .wrapper {padding: 64px 2rem;}
.cate_price .sec_monthly .features {font-size: 1.15rem; padding: 0 1rem;}
.cate_price .sec_monthly .title p {font-size: 2rem; word-break: keep-all;}
.cate_price .sec_monthly button{ font-size:14px;}
}
/* customer */
.cate_customer.no_space{padding-bottom:0 !important;}
.cate_customer .sec_head_comm{padding-bottom:min(80px, 7vw) !important;}
.cate_customer .sec_manual_list .manual_list{display:flex; justify-content:space-between;}
.cate_customer .sec_manual_list .manual_list > [class^="part"]{flex:1; overflow:hidden; padding-right:30px;}
.cate_customer .sec_manual_list .manual_list > [class^="part"]::before{content:''; display:block; width:80px; height:80px; background-position:center center; background-size:contain; background-repeat:no-repeat;background-image:url(/images/customer/ico_manual1.svg);}
.cate_customer .sec_manual_list .manual_list .part1::before{background-image:url(/images/customer/ico_manual1.svg);}
.cate_customer .sec_manual_list .manual_list .part2::before{background-image:url(/images/customer/ico_manual2.svg);}
.cate_customer .sec_manual_list .manual_list .part_tit{white-space:nowrap; padding-left:10px; font-size:1.33rem; font-weight:700;}
.cate_customer .sec_manual_list .manual_list .part_tit::after{content:''; display:inline-block; position:relative; top:2px; width:19px; height:19px; background:url(/images/customer/arr_more.svg) center center no-repeat; background-size:contain;}
.cate_customer .sec_manual_list .manual_list .sub_list{margin-top:.5em; padding-left:10px;}
.cate_customer .sec_manual_list .manual_list .sub_list li{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.07rem;}
.cate_customer .sec_manual_list .manual_list .sub_list li a:hover{color:#1971e3}
.cate_customer .sec_manual_view{display:flex;}
.cate_customer .sec_manual_view .list_box{width:330px; padding-right:56px;}
.cate_customer .sec_manual_view .manual_list{padding-bottom:20px;}
.cate_customer .sec_manual_view .btn_list{display:none}
.cate_customer .sec_manual_view .manual_view{flex:1; overflow-y:auto; min-height:100%; padding-bottom:80px;}
.cate_customer .sec_manual_view .manual_view .tit{margin-bottom:56px; padding-bottom:1.3rem; border-bottom:2px solid #333; font-size:2.4rem; line-height:1; font-weight:400;}
.cate_customer .sec_manual_view .manual_view img{display:inline-block; max-width:100%; margin-top:20px; margin-bottom:20px;}
.cate_customer .sec_manual_view.stick .list_box{overflow-y:auto; max-height:100vh; position:fixed; left:50%; margin-left:-610px; top:0; padding-top:30px;}
.cate_customer .sec_manual_view.stick.over .list_box{position:absolute; top:initial; bottom:0;}
.cate_customer .sec_manual_view.stick .manual_view{padding-left:330px;}
@media only screen and (max-width:1023px) {.cate_customer .sec_manual_list .manual_list{flex-wrap:wrap; justify-content:flex-start;}
.cate_customer .sec_manual_list .manual_list > [class^="part"]{flex:none; width:33.33%; margin-bottom:40px;}
.cate_customer .stick_box{min-height:100vh;}
.cate_customer .sec_manual_view .list_box{width:25%; max-width:25%; padding-right:20px;}
.cate_customer .sec_manual_view .manual_view .tit{font-size:2rem;}
.cate_customer .sec_manual_view.stick .list_box{left:20px; margin-left:0;}
}
@media only screen and (max-width:639px) {.cate_customer .sec_manual_list .manual_list > [class^="part"]{width:50%; margin-bottom:20px;}
.cate_customer .sec_manual_list .manual_list > [class^="part"]::before{width:50px; height:50px;}
.cate_customer .sec_manual_list .manual_list .part_tit{padding-left:5px; font-size:1.2rem;}
.cate_customer .sec_manual_list .manual_list .sub_list{padding-left:5px;}
.cate_customer .sec_manual_list .manual_list .sub_list li{font-size:1rem;}
.cate_customer .sec_manual_view{display:initial;}
.cate_customer .sec_manual_view .list_box{position:fixed; top:0; left:-200px; z-index:200; width:200px; min-width:200px; height:100vh; padding:20px; background:#fff; transition:.8s;}
.cate_customer .sec_manual_view .list_box.on{overflow-y:auto; left:0; box-shadow:0 0 50px 50vw rgba(0,0,0,.2)}
.cate_customer .sec_manual_view .list_box li{font-size:1rem; font-weight:300;}
.cate_customer .sec_manual_view .left_list_comm .sub_list li.on a,
.cate_customer .sec_manual_view .left_list_comm .sub_list li a:hover{color:#7dafe2; font-weight:700;}
.cate_customer .sec_manual_view .left_list_comm .part_tit::before{filter:contrast(1) grayscale(1);}
.cate_customer .sec_manual_view .left_list_comm .part_tit.on::before{filter:contrast(1) grayscale(0)}
.cate_customer .sec_manual_view .manual_list{padding-bottom:0;}
.cate_customer .sec_manual_view .btn_list{display:inline-block; position:fixed; left:0; top:calc(50% - 10px); z-index:201; height:40px; width:20px; border-radius:0 20px 20px 0; border:1px solid #eee; border-left:none; background:#fff; box-shadow:0 0 0 rgba(0,0,0,.1); transition:.8s;}
.cate_customer .sec_manual_view .btn_list::after{content:''; display:inline-block; width:14px; height:14px; position:absolute; top:calc(50% - 7px); left:calc(50% - 8px); transform:rotate(-90deg); background:url(/images/customer/bul_manual.svg) center center no-repeat;}
.cate_customer .sec_manual_view .list_box.on + .btn_list{left:200px;}
.cate_customer .sec_manual_view .list_box.on + .btn_list::after{left: calc(50% - 10px); transform:rotate(90deg);}
.cate_price .section-pricing .tabs {
height: 50px;
margin: 1rem auto 3rem;
gap: 5px;
}
.cate_price .section-pricing .tabs li {
width: 80px !important;
}
.cate_price .section-pricing .tab-content {
padding: 0 1rem;
gap: 1rem
}
.cate_price .section-pricing article button {
height: 50px
}
.cate_price .section-pricing article ul {
gap: .5rem
}
.cate_price .section-pricing .tab-content + small {
margin-right: 1rem;
}
.cate_price .section-details header {
padding-bottom: 2rem;
}
.cate_price .section-details ul li div {
flex: 1;
}
.cate_price .section-advantage ul::-webkit-scrollbar {
width: 0;
height: 0;
}
}
/* customer - board */
.sec_board_search{display:flex; margin:0 auto 2.14em auto; max-width:590px;}
.sec_board_search .select_comm{flex:1; height:56px; padding-left:28px; border-radius:28px; font-size:1.07rem; border-color:transparent; background-color:#f8fafd;}
.sec_board_search .search_box{display:inline-block; position:relative; box-sizing:border-box; width:calc(68% - .5em); height:56px; margin-left:.5em; border-radius:28px; padding-left:28px; padding-right:56px; background:#f8fafd;}
.sec_board_search .search_box .input_search{display:block; width:100%; height:56px; font-size:1.07rem; line-height:56px; border:none;}
.sec_board_search .search_box .input_search::placeholder{color:#93a1b9 !important;}
.sec_board_search .search_box .btn_search{display:block; position:absolute; top:50%; right:0; padding:16px 24px; transform:translateY(-50%); text-align:center; transition:.2s;}
.sec_board_search .search_box .btn_search:disabled{opacity:.5;}
.sec_board_search .search_box .btn_search img{vertical-align:middle}
.sec_board_view .head{padding-bottom:1.5em; border-bottom:2px solid #333;}
.sec_board_view .head .cate{margin-bottom:.3em; color:#788395;}
.sec_board_view .head .tit{font-size:1.6rem;}
.sec_board_view .head .date{margin-top:.3em; color:#788395; font-family:'Roboto';}
.sec_board_view .cont{padding-top:2.14rem; padding-bottom:60px;}
.sec_board_view .cont,
.sec_board_view .cont p,
.sec_board_view .cont div{font-size:1rem; line-height:1.6; word-break:break-word;}
.sec_board_view .cont img{max-width:100%; height:auto; margin-top:10px; margin-bottom:10px;}
.sec_board_view .cont a{text-decoration:underline; color:#0081c8;}
.sec_board_view .cont + .btn_box_comm{padding-top:0;}
.sec_board_view .cont + .btn_box_comm [class^="btn_fill"]{min-width:284px;}
.sec_board_write .sec_tit{padding-bottom:.5em; font-size:1.6rem; font-weight:400;}
.sec_board_write .sec_tit .light{font-size:1rem; font-weight:400;}
.sec_board_write .sec_tit .light .required::after{content:''; display:inline-block; position:relative; top:-1px; width:6px; height:6px; margin-left:3px; margin-right:3px; border-radius:50%; background:#1971e3; vertical-align:middle;}
.sec_board_write .table_comm + .sec_tit{padding-top:56px;}
.sec_board_write .agree_service_lay .sec_tit{padding-top:56px;}
.sec_board_write tbody td{padding-top:.5em; padding-bottom:.5em;}
.sec_board_write .input_comm{width:100%;}
.sec_board_write .textarea_comm{width:100%; height:200px;}
.sec_board_write .select_comm{min-width:350px;}
.sec_board_write .info .input_comm{width:50%;}
.sec_board_write .info label{margin-left:1em;}
.sec_board_write .attach_box{position:relative; max-width:176px;}
.sec_board_write .attach_box .btn_fill_lightgray{min-width:176px;}
.sec_board_write .attach_box input{width:100%;}
.sec_board_write .attach_box input[type="file"]{position:absolute; top:0; left:0; opacity:0; z-index:1; cursor:pointer;}
.sec_board_write .agree_cont{margin-bottom:1em; padding:1em !important; border:1px solid #E4E4E4; border-top:2px solid #333; border-top:2px solid #333; border-radius:0; font-size:1rem; resize:none; background:#f8f8f8;}
.sec_board_write .agree_cont .scrollbar-outer{overflow-y:auto; max-height:200px; }
.sec_board_write .tr_file td{padding-top:1.3em; padding-bottom:1.3em;}
.sec_board_write .files{padding-top:1.04em;}
.sec_board_write .cke_chrome{overflow:hidden; border-radius:4px;}
.sec_board_write .cke_chrome, .sec_board_write .cke_top{border-color:#e4e4e4;}
.sec_board_write .btn_box_comm [class^="btn_fill"]{min-width:284px;}
@media only screen and (max-width:639px) {
.sec_board_search{margin-bottom:1.5em;}
.sec_board_search .select_comm{height:40px;}
.sec_board_search .search_box{height:40px; padding-left:20px;padding-right:48px;}
.sec_board_search .search_box .input_search{height:40px;}
.sec_board_search .search_box .btn_search{padding:8px 13px;}
.sec_board_view .head .tit{font-size:1.3rem;}
.sec_board_view .cont{padding-top:25px;}
.sec_board_write .w10{width:20%;}
.sec_board_write .sec_tit{padding-bottom:.7em; line-height:1; font-size: 1.3rem;}
.sec_board_write .select_comm{width:100%; min-width: auto;}
.sec_board_write .info .input_comm{width:100%;}
.sec_board_write .info label{margin-left:0; margin-top:.5em;}
.sec_board_write .info .select_comm + .input_comm{margin-top:5px;}
.sec_board_write .btn_box_comm [class^="btn_fill"]{width:100%;}
}
/* mypage */
.backdrop {opacity: 0; visibility: hidden; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .25); z-index: 100; transition: opacity .25s}
.backdrop.active {opacity: 1; visibility: visible;}
.cate_mypage .topbtn_box{position:relative; margin-top:28px; margin-bottom:48px;}
#layout_body.cate_mypage .sec_head_comm {max-width: 1480px; padding: 100px 0 20px;}
#layout_body.cate_mypage .w_container {max-width: 1480px; padding-left: 0; padding-right: 0}
.cate_mypage .topbtn_box .btn_qna{display:flex; width:100%; justify-content:center; align-items:center; height:104px; border-radius:20px; background:#f8f8f8;}
.cate_mypage .topbtn_box .btn_qna .txt{margin-left:32px; line-height:1.6;}
.cate_mypage .topbtn_box .btn_qna .tit::after{content:''; display:inline-block; position:relative; top:-1px; width:7px; height:15px; margin-left:6px; vertical-align:middle; background:url(/images/common/arr_txt_black.svg) center / contain no-repeat ;}
.cate_mypage .topbtn_box .btn_qna .desc{display:block; color:#666;}
.cate_mypage .manage .tag_lv{ text-align:center }
.cate_mypage .manage .tag.gray {
background-color: rgba(112, 128, 144, .1);
font-size: 13px;
color: slategray;
padding: 3px 6px;
border-radius: 3px;
letter-spacing: 0;
margin-bottom: 5px;
}
.cate_mypage .manage .domain {display: flex; align-items: center; flex-direction: column; gap: .5rem;}
.cate_mypage .manage .domain p + p{margin-top: 5px}
.cate_mypage .manage .domain i { border: 1px solid #ddd; border-radius: 50px; padding: 3px .75rem; font-size: 13px; margin-right: 5px;}
.cate_mypage .manage .domain b {font-weight: 500;}
.cate_mypage .manage .tag_domain{display:inline-block; margin-right:.5em; padding-left: .5rem; padding-right: .5rem; border:1px solid #e4e4e4; border-radius:.85em; font-size: 12px; line-height:1.7em; font-weight:500;}
.cate_mypage .manage .tag_design{display:inline-block; position:relative; min-width:7em; margin-right:.5em; margin-left: 15px; padding-left:.5em; padding-right:.5em; border:1px solid #E9EEF5; border-radius:.85em; font-size: 12px; line-height:1.7em; text-align:center; font-weight:500; color: #434649; background:#E9EEF5;}
.cate_mypage .manage .tag_design::before{content:''; display: block; position:absolute; top:calc(50% - 4px); left:-15px; width:8px; height:8px; border-left:2px solid #CED5E0; border-bottom:2px solid #CED5E0;}
.cate_mypage .manage .domain .event {background: #f3f6f9; padding: .5rem; border-radius: .5rem; font-size: 14px;}
.cate_mypage .manage .domain .event a {margin-left: .5rem}
.manage_list{display:none; position:absolute; top:2.66em; right: 0; z-index:1; border:1px solid #E4E4E4; background:#fff; border-radius: 20px; width: 770px; overflow: hidden; border: 0;}
.cate_mypage .manage .services {display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;}
.cate_mypage .manage .services button {width: 110px; height: 36px; border-radius: 4px; font-size: 14px; letter-spacing: -1px;}
.cate_mypage .manage .services button:first-of-type {
background: #93a1b9;
color: white;
font-weight: 400;
}
.cate_mypage .manage .services button:last-of-type:not(:first-of-type) {
border: 1px solid #ddd;
background: transparent;
color: #333;
}
.cate_mypage .manage .services button.paid {
background-color: #1971E3;
}
/* .cate_mypage .manage .table_respon_head li:nth-of-type(1) {flex: 0 0 auto; width: 100px;}
.cate_mypage .manage .table_respon_head li:nth-of-type(2) { flex: 0 0 auto; width: 140px;}
.cate_mypage .manage .table_respon_head li:nth-of-type(3) { flex: 0 0 auto; width: 330px;}
.cate_mypage .manage .table_respon_body li > div:nth-of-type(1) {flex: 0 0 auto; width: 100px;}
.cate_mypage .manage .table_respon_body li > div:nth-of-type(2) {flex: 0 0 auto; width: 140px;}
.cate_mypage .manage .table_respon_body li > div:nth-of-type(3) {flex: 0 0 auto; width: 330px; align-items: flex-start;} */
.manage_list.active {z-index: 101;}
.manage_list i.close {margin-left: -1rem; flex:0 0 auto; width: 1.25rem; height: 1.25rem; background-image: linear-gradient(white 0 0), linear-gradient(white 0 0); background-position: center; background-size:
100% 2px, 2px 100%; background-repeat: no-repeat; transform: rotate(45deg); cursor: pointer; position: absolute; top: 1.5rem; right: 1.25rem}
.manage_list[style*="block"] {display: flex !important; max-width: calc(100vw - 2rem); }
.manage_list {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 3.5rem 0 0; gap: 0;}
.manage_list header {position: absolute; top: -1px; width: 100%; background-color: #88929E; color: white; height: 58px; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 2.5vw, 20px); font-weight: 600; padding: 0 3rem}
.manage_list h3 {width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #5F6368; font-weight: 500; font-size: clamp(17px, 2.5vw, 18px)}
.manage_list > div:first-of-type {padding-right: 0;}
.manage_list > div {display: flex; flex-wrap: wrap; color: #5F6368; font-weight: 500; font-size: clamp(17px, 2.5vw, 18px); padding: 1.5rem}
.manage_list .box{flex: 1 1 auto; height: 100%; padding-top: .75rem; display: flex; flex-direction: column; gap: .75rem;}
.manage_list .box a{display:block; width:200px; height:2.13em; padding-left:20px; padding-right:20px; line-height:2.13; font-weight: 400; text-align:left; color: #333; transition:.2s; display: flex; align-items: center;}
.manage_list .box a:hover{text-decoration:none; background:#F2F5FA;}
.manage_list .box a [data-badge] {
background-color: #C1DCFF;
border-radius: 30px;
color: #0066FF;
font-size: 11px;
font-weight: 700;
padding: 1px 8px;
letter-spacing: 0;
margin-left: 7px;
display: flex;
align-items: center;
height: 18px;
}
.manage_list .box a [data-badge]::before {
content: attr(data-badge);
line-height: 1;
}
.cate_mypage .manage [class^="ico"]{display:inline-block; width:20px; height:20px; margin-right:1em; margin-top:-2px; vertical-align:middle; background-position:center center; background-size:contain; background-repeat: no-repeat;}
.cate_mypage .manage .ico_mobile_app{background-image:url(/images/mypage/ico_app.svg);}
.cate_mypage .manage .ico_extension{background-image:url(/images/mypage/ico_extension.svg);}
.cate_mypage .manage .ico_upgrade{background-image:url(/images/mypage/ico_upgrade.svg);}
.cate_mypage .manage .ico_sms{background-image:url(/images/mypage/ico_sms.svg);}
.cate_mypage .manage .ico_domain{background-image:url(/images/mypage/ico_domain2.svg);}
.cate_mypage .manage .ico_ssl{background-image:url(/images/mypage/ico_ssl.svg);}
.cate_mypage .manage .ico_find{background-image:url(/images/mypage/ico_find2.svg);}
.cate_mypage .manage .ico_clone{background-image:url(/images/mypage/ico_clone2.svg);}
.cate_mypage .manage .ico_tel{background-image:url(/images/mypage/ico_tel.svg);}
.cate_mypage .manage .ico_delete{background-image:url(/images/mypage/ico_delete2.svg);}
.cate_mypage .manage .ico_pg{background-image:url(/images/mypage/ico_pg2.svg);}
.cate_mypage .manage .ico_mobile_apply{background-image:url(/images/mypage/ico_mobile_apply2.svg);}
.cate_mypage .manage .ico_toss {background-image:url(/images/mypage/ico_tosspay.png); background-size: auto}
.cate_mypage .manage .ico_owner{background-image:url(/images/mypage/ico_owner2.svg);}
.cate_mypage .manage .ico_talk{background-image:url(/images/mypage/ico_talk2.svg);}
.cate_mypage .manage .ico_charge{background-image:url(/images/mypage/ico_charge2.svg);}
.cate_mypage .manage .ico_goodsflow{background-image:url(/images/mypage/ico_goodsflow.svg);background-repeat: no-repeat;}
.cate_mypage .manage .ico_auto_pay{background-image:url(/images/mypage/ico_auto_pay.svg);}
.cate_mypage .manage .period_end .bts{margin-top:.5em; font-size:14px;}
.cate_mypage .manage .period_end .bts a{cursor:pointer;}
.cate_mypage .manage .period_end a + a{position:relative; margin-left:1em;}
.cate_mypage .manage .period_end a + a::before{content:''; display:inline-block; position:absolute; top:calc(50% - .4em); left:-.5em; height:.93em; border-left:1px solid #e4e4e4;}
.cate_mypage .manage .period_end [class^="ico"]{margin-right:.3em;}
.cate_mypage .manage .period_end .info{display:inline-block; position:relative;}
.cate_mypage .manage .period_end .info .ico_info{display:inline-block; margin-left:4px; width:15px; height:15px; vertical-align:middle; background:url(/images/mypage/ico_info.svg) no-repeat; opacity:1;}
.cate_mypage .manage .period_end .info .cont{display:block; position:absolute; left:calc(1em + 15px); top:-30px; z-index:1; width:400px; padding:1em; border-radius:4px; text-align:left; background:#fff; box-shadow: 0px 0px 5px rgba(0,0,0,.2); opacity:0; transition:.2s; pointer-events:none;}
.cate_mypage .manage .period_end .info:hover .cont{opacity:1; pointer-events:auto;}
.cate_mypage .manage .period_end .info .cont::after{content:''; display:inline-block; position:absolute; left:-4px; top:36px; width:10px; height:10px; background:#fff; transform:rotate(-45deg); box-shadow:-3px -3px 5px rgb(0,0,0,.1); }
.cate_mypage .manage .period_end .info .cont .tit{padding-bottom:.5em; font-size:1.2rem;}
.cate_mypage .manage .period_end .info .cont .desc::before{content:'·'; margin-right:4px; color:#c4c4c4;}
.cate_mypage .manage .period_end .info .cont .desc{font-size:.93rem; line-height:1.8;}
.cate_mypage .manage [class^="btn_txt"],
.cate_mypage .manage [class^="btn_fill"]{height:36px; padding:0 10px; line-height: 1; text-align:center;display: flex;align-items: center;justify-content: center;}
.cate_mypage .manage .link {display:flex; justify-content: center;}
.cate_mypage .manage .link a {color: #1971E3; text-decoration: underline; text-underline-offset: 3px;}
.cate_mypage .manage .link a:not(:last-of-type)::after {content: ""; margin: 0 .75rem; height: 15px; width: 1px; display: inline-block; background-color: #E3E3E3;}
.cate_mypage .table_respon.manage {margin-top: 1.5rem}
.cate_mypage .sec_search {display:flex; justify-content:left; gap: .5rem;}
.cate_mypage .sec_search .search {flex: 0 0 auto; position: relative; width: 520px; max-width: 100%; display: flex; align-items: center;}
.cate_mypage .sec_search input[type="search"] {width: 100%; background-color: #F2F5FA; border-radius: 4px; color: #434F5D; padding: 0 1rem; height: 50px; width: min(520px, 100%);}
.cate_mypage .sec_search input[type="search"]::placeholder {color: #434F5D;}
.cate_mypage .sec_search .advanced_search {position: absolute; right: 1rem;}
.cate_mypage .sec_search .advanced_search .btn_search {margin-top: .5rem}
.cate_mypage .sec_search .advanced_search > #advancedSearch {display: none;}
.cate_mypage .sec_search .advanced_search > #advancedSearch + label {
color: #93A1B9; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cate_mypage .sec_search .search_dropdown {opacity: 0; visibility: hidden; width: 500px; position: absolute; top: calc(100% + 2rem); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; background-color: white; padding: 1rem 0; border-radius: 5px; padding: 1rem; border: 1px solid #E4E4E4; transition: opacity .25s;}
.cate_mypage .sec_search .search_dropdown .title {font-size: 16px; margin-bottom: 5px}
.cate_mypage .sec_search .search_dropdown h3 {font-size: clamp(16px, 2.5vw, 18px)}
.cate_mypage .sec_search .search_dropdown ul {display: flex; flex-direction: column; gap: 1rem}
.cate_mypage .sec_search .search_dropdown input[type="text"] {width: 100%; background-color: #F2F5FA; border-radius: 4px; color: #5F6368; padding: 0 1rem; height: 40px; width: min(460px, 100%);}
.cate_mypage .sec_search .search_dropdown .selector {display: flex; gap: .5rem}
.cate_mypage .sec_search .search_dropdown .selector input {display: none}
.cate_mypage .sec_search .search_dropdown .selector label {flex: 1 1 auto; max-width: 120px; background-color: white; padding: 0 1rem; height: 40px; color: #93A1B9; display: flex; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid #E4E4E4; transition: .25s; cursor: pointer;}
.cate_mypage .sec_search .search_dropdown .selector input:checked + label {background-color: #58697E; border-color: #58697E; color: white;}
.cate_mypage .sec_search .search_dropdown .calendar {display: flex; align-items: center; gap: 1rem;}
.cate_mypage .sec_search .search_dropdown .calendar .input {
position: relative;
}
.cate_mypage .sec_search .search_dropdown .calendar .input::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='20' height='18' viewBox='0 0 20 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3582_10212)'%3E%3Cpath d='M4 2.9C2.56636 2.9 1.4 4.06636 1.4 5.5V13.5C1.4 14.9336 2.56636 16.1 4 16.1H16C17.4336 16.1 18.6 14.9336 18.6 13.5V5.5C18.6 4.06636 17.4336 2.9 16 2.9H4ZM4 1.5H16C18.2091 1.5 20 3.29086 20 5.5V13.5C20 15.7091 18.2091 17.5 16 17.5H4C1.79086 17.5 0 15.7091 0 13.5V5.5C0 3.29086 1.79086 1.5 4 1.5Z' fill='%2358697E'/%3E%3Cpath d='M6 1V3.8' stroke='%2358697E' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M14 1V3.8' stroke='%2358697E' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M0 6.91797L20 6.91797' stroke='%2358697E' stroke-width='1.4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3582_10212'%3E%3Crect width='20' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
z-index: 1; display: block; width: 20px; height: 18px; position: absolute; left: 2rem; top: 50%; transform: translateY(-50%);
}
.cate_mypage .sec_search .search_dropdown .calendar input {
flex: 1 1 auto; width: 100%; padding-left: 4rem !important ; font-family: 'Roboto';
}
.cate_mypage .sec_search .date_sel {display: flex; gap: .5rem}
.cate_mypage .sec_search .date_sel button {flex: 1 1 auto; max-width: 120px; background-color: white; padding: 0 1rem; height: 40px; color: #93A1B9; display: flex; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid #E4E4E4; transition: .25s; cursor: pointer; min-width: auto;}
.cate_mypage .sec_search .date_sel button.on {background-color: #58697E; border-color: #58697E; color: white;}
.cate_mypage .sec_search #advancedSearch:checked ~ .search_dropdown {opacity: 1; visibility: visible; z-index: 10;}
.cate_mypage .sec_search .btn_search {flex: 0 0 auto; background-color: #1971E3; color: white; border-radius: 5px; padding: 1rem 3rem; width: 150px; height: 50px}
.cate_mypage .sec_search .select_comm{width:184px;}
.cate_mypage .sec_search .select_comm + .select_comm{margin-left:4px}
.cate_mypage .sec_search .period{display:flex; justify-content:left; position:relative; margin-left:33px;}
.cate_mypage .sec_search .period::before{content:''; display:inline-block; position:absolute; top:8px; left:-17px; height:32px; border-left:1px solid #e4e4e4;}
.cate_mypage .sec_search .period .date_pick{display:flex; align-items:center;}
.cate_mypage .sec_search .period .input_comm{flex:1; max-width:144px; padding-right:calc(2em + 20px) !important; background:url(/images/mypage/ico_calendar.svg) calc(100% - 1em) center no-repeat !important;}
.cate_mypage .sec_search .period .dash{width:25px; padding-left:6px; padding-right:6px; text-align:center;}
.cate_mypage .sec_search .period .date_sel{display:flex; justify-content:left;}
.cate_mypage .sec_search .period .date_sel .btn_comm{padding-left:0; padding-right:0; margin-left:4px;}
.cate_mypage .sec_search .period .date_sel .btn_comm:hover,
.cate_mypage .sec_search .period .date_sel .btn_comm.on{border-color:#93a1b9; color:#fff; background: #93a1b9;}
.cate_mypage .sec_search .period .btn_search{position:relative; margin-left:33px;}
.cate_mypage .sec_search .period .btn_search::before{content:''; display:inline-block; position:absolute; top:8px; left:-17px; height:32px; border-left:1px solid #e4e4e4; pointer-events:none;}
.cate_mypage .table_respon .state{font-size:.93rem; color: #93a1b9}
.cate_mypage .sec_tit{padding-bottom:.5em; font-size:1.6rem;}
.cate_mypage .table_comm + .sec_tit{padding-top:56px;}
.cate_mypage #qna_view_section .sec_tit{font-weight:400;}
.cate_mypage .btn_box_comm.reask{display:flex; flex-direction:column; align-items:center;}
.cate_mypage .btn_box_comm.reask .txt{font-size:1.07rem;}
.cate_mypage .btn_box_comm.reask .btn_txt_cyan{font-size:1.07rem; margin-top:10px;}
.cate_mypage .btn_box_comm.reask [class^='btn_fill']{width:284px;}
.cate_mypage .table_respon .install_regist {flex: 1 1 auto; font-weight: 700;height: 135px;display: flex; flex-direction: column; align-items: center;justify-content: center; gap: .35rem}
.cate_mypage .table_respon .install_wait {text-align: left;padding: .75rem;margin: .5rem 0;margin-left: -20;}
.cate_mypage .table_respon .period_end .date {vertical-align: middle; font-family: 'Roboto'; letter-spacing: 0;}
.cate_mypage .table_respon .period_end .tag {margin-left: .5rem; display: inline-flex; line-height: 1; font-size: 12px; padding: .45rem; font-weight: normal; color: slategray; background-color: #eee; border-radius: 3px
}
.cate_mypage .table_respon .alert { display: flex; flex-direction: column; }
.cate_mypage .table_respon .alert .tag {font-weight: normal; border-radius: 50px; width: fit-content;margin: 0 auto;padding: .35rem .5rem;font-size: 12px; line-height: 1;display: flex; align-items: center; gap: .35rem; background-color: #1971e3; color: white;}
.cate_mypage .table_respon .tooltip {user-select: none; position: relative;display: inline-block;cursor: pointer;width: 16px;height: 16px;border: 1px solid #ddd;border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: normal; font-size: 11px; font-family: serif;}
.cate_mypage .table_respon .tooltip:hover::before,
.cate_mypage .table_respon .tooltip:hover::after,
.cate_mypage .table_respon .tooltip.active::before,
.cate_mypage .table_respon .tooltip.active::after {opacity: 1; visibility: visible; z-index: 1}
.cate_mypage .table_respon .tooltip:hover::before,
.cate_mypage .table_respon .tooltip.active::before { max-height: none }
.cate_mypage .table_respon .tooltip::before { opacity: 0; visibility: hidden; width: 350px; white-space: pre-line; padding: 1rem; content: attr(data-tooltip); word-break: keep-all; transform: translateX(-50%); background-color: #303c4b; line-height: 1.5; color: white; border-radius: .25rem; position: absolute; top: calc(100% + 0.5rem); left: 50%; font: 13px/1.5 "arial"; transition:opacity .2s, transform .1s;}
.cate_mypage .table_respon .tooltip::after { opacity: 0; content: ""; position: absolute; top: calc(100% + 0.15rem); left: 50%; transform: translateX(-50%); width: 0; border-bottom: 8px solid #303c4b; border-right: 8px solid transparent; border-left: 8px solid transparent; font-size: 0; line-height: 0;}
.cate_mypage .table_respon .disabled { user-select: none; background-color: #f3f3f3; color: #ccc; border: 0; cursor: default}
.cate_mypage .table_respon .disabled:hover {text-decoration: none;}
/* 간편도메인신청이벤트 */
.cate_mypage .event_simple_domain {opacity: 0; visibility: hidden; max-height: 0;background-color:#F8F8F8; width: 100%; display: flex; gap: 1.25rem; align-items: center; justify-content: center; line-height: 1; font-size: 14px; position: relative; padding: 0; transition: .25s}
.cate_mypage .event_simple_domain.active {opacity: 1; visibility: visible; max-height: 300px; padding: 1rem; border-top: 1px solid #ebebeb;}
.cate_mypage .event_simple_domain .tag {border-radius: 30px; background-color: white; font-size: 13px; color: #1971E3; padding: .5rem 1rem .5rem .75rem; border: 1px solid rgba(25, 113, 227, .25);}
.cate_mypage .event_simple_domain .date {font-weight: bold; position: relative; padding-left: 1rem}
.cate_mypage .event_simple_domain .date::before {content: ""; position: absolute; left: 0; background-color: #CFD8EF; width: 1px; height: 12px; top:50%; transform: translateY(-50%)}
.cate_mypage .event_simple_domain button {border: 1px solid #E4E4E4; color: #333; background-color: white; border-radius: .25rem; font-size: 14px; line-height: 1; padding: .5rem 1.25rem}
.cate_mypage .event_simple_domain .close {position: absolute; top: 50%; right: 1.75rem; width: 16px; height: 16px; background-image: linear-gradient(#666 0 0), linear-gradient(#666 0 0); background-position: center; background-size: 100% 2px, 2px 100%; background-repeat: no-repeat; transform: translateY(-50%) rotate(45deg); cursor: pointer;}
.cate_mypage .filters .domain,
.cate_mypage header .domain {
padding: 1rem 0;
display: flex;
gap: .5rem
}
.cate_mypage .filters .domain input {
background-color: #F2F5FA;
border-radius: 4px;
color: #434F5D;
padding: 0 1rem;
height: 50px;
width: min(520px, 100%);
border-radius: 5px
}
.cate_mypage .filters .domain input::placeholder {color: #434F5D;}
.cate_mypage .filters .domain input + button {background-color: #1971E3; color: white; font-size: 15px; height: 50px; width: 150px; border-radius: 5px;}
.cate_mypage .filters .sorting {
color: #88929E;
display: flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
line-height: 1
}
.cate_mypage .filters .sorting :not(:last-child)::after {
content: "";
width: 1px;
height: 14px;
background-color: #ddd;
display: inline-block;
margin: 0 .5rem;
}
.cate_mypage .filters .sorting .is-active {
color: black;
font-weight: 500;
}
@media screen and (max-width: 1480px) {
#layout_body.cate_mypage .sec_head_comm,
#layout_body.cate_mypage .w_container {
padding-left: 2rem; padding-right: 2rem
}
}
@media only screen and (max-width:1180px) {.cate_mypage .sec_search{flex-wrap:wrap;}
.cate_mypage .sec_search .select_comm{margin-bottom:10px;}
.cate_mypage .sec_search .period{display:flex; width:100%; margin-left:0;}
.cate_mypage .sec_search .period::before{content:none;}
.cate_mypage .sec_search .period .input_comm{max-width:184px;}
.cate_mypage .sec_search .period .date_sel{flex:1; display:flex;}
.cate_mypage .sec_search .period .date_sel .btn_comm{flex:1;}
}
@media only screen and (max-width:1023px) {.cate_mypage .sec_search .period .date_pick{flex:1;}
.cate_mypage .sec_search .period .input_comm{width:134px;padding-right:calc(2em + 15px) !important;}
.cate_mypage .sec_search .period .btn_search{margin-left:4px;}
.cate_mypage .sec_search .period .btn_search::before{content:none;}
}
@media only screen and (max-width:639px) {
.cate_mypage .sec_search .search {
flex: 1 1 auto
}
#layout_body .page_tab .greeting {
display: none;
}
#layout_body.cate_mypage .sec_head_comm {
padding: 40px 20px
}
.cate_mypage .manage .table_respon_body li > div:nth-of-type(1):not(.nodata),
.cate_mypage .manage .table_respon_body li > div:nth-of-type(2) {
width: fit-content !important; display: flex; align-items: center; justify-content: center; position: absolute; top: 1rem; left: calc(50% - 64px); border: 1px solid #eee; padding: 3px .5rem; border-radius: 4px;
}
.cate_mypage .manage .table_respon_body li > div:nth-of-type(2) {
margin-left: 5rem;
}
.cate_mypage .manage .table_respon_body > li{position:relative; padding: 1rem; border-radius:20px; border-bottom:none; background:#fff; box-shadow: 0px 7px 11px rgba(0,0,0,.1); flex-wrap: wrap; justify-content: flex-end;}
.cate_mypage .manage .table_respon_body > li + li{margin-top:40px;}
.cate_mypage .manage .domain{padding-top: 3rem; width: 100% !important;}
.cate_mypage .manage .domain p{display:flex; align-items: center; font-size:15px;}
.cate_mypage .manage .domain .tag_domain{margin-bottom:.3em;}
.cate_mypage .manage .period_end{display:flex; height: 55px; align-items: center; border-top:1px solid #e4e4e4; margin: 1rem 0 .5rem; border-bottom:1px solid #e4e4e4; width: 100% !important;}
.cate_mypage .manage .period_end .bts{margin-top:0; margin-left:auto;}
.cate_mypage .manage .link{
order: 1;
position: absolute;
left: 1rem;
bottom: 1.5rem;
width: fit-content !important;
}
.cate_mypage .manage .table_respon_body li > .services {
width: fit-content !important;
justify-content: flex-end;
display: flex;
position: absolute;
bottom: 72px;
}
.cate_mypage .manage .table_respon_body li > .services button {
width: 80px;
height: 36px;
font-size: 13px;
}
.cate_mypage .manage .state {
left: auto !important;
right: 1rem
}
.cate_mypage .manage .apply_date {
border: 0 !important;
top: 3rem !important;
left: .5rem !important;
}
.cate_mypage .manage .table_respon_body li > .bts{ width: 80px !important; margin-left: .5rem;}
.manage_list{left:auto; right:0; transform:translateX(0); box-shadow:0 0 10px rgba(0,0,0,.1); flex-wrap: wrap; right: 1rem; gap: 0; top: 50%; transform: translateY(-50%);}
.manage_list > div {width: 50%; flex-direction: column;}
.manage_list > div:first-of-type {padding-right: .5rem;}
.manage_list > div:last-of-type {padding-left: .5rem;}
.manage_list .box a {width: auto; padding: 0 .5rem}
.manage_list .box {height: fit-content;}
.manage_list .close {position: absolute; right: 1rem; top: 1rem;}
.manage_list > div:first-of-type h3 {width: 100%}
.cate_mypage .sec_search{position:relative; flex-wrap: nowrap; width: 100%; padding: 0}
.cate_mypage .sec_search .select_comm{width:calc(50% - 10px);}
.cate_mypage .sec_search .select_comm + .select_comm{margin-left:20px;}
.cate_mypage .sec_search .period{display:flex; flex-wrap:wrap; position:relative; width:100%; margin-left:0; margin-right:0;}
.cate_mypage .sec_search .period::after{content:none;}
.cate_mypage .sec_search .period .date_pick{flex:none; width:100%; margin-bottom:10px;}
.cate_mypage .sec_search .period .input_comm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:none; width:calc(50% - 10px); padding-right:calc(1em + 10px) !important; background-position-x:calc(100% - .5em); background-size:15px auto;}
.cate_mypage .sec_search .period .date_sel{width:calc(100% - 100% / 7);}
.cate_mypage .sec_search [class^='btn_comm']{min-width:3em;}
.cate_mypage .sec_search .period .date_sel .btn_comm:first-child{margin-left:0;}
.cate_mypage .sec_search .btn_search{flex: 0 0 auto; padding: 0 1rem; width: fit-content}
.cate_mypage .manage .period_end .info .cont{top:calc(100% + 10px); left:auto; right: -20px;}
.cate_mypage .manage .period_end .info .cont::after{top:-4px; left:auto; right:25px; transform:rotate(45deg);}
.cate_mypage .topbtn_box{margin-top:0; margin-bottom:20px;}
.cate_mypage .topbtn_box .btn_qna .txt{margin-left:16px;}
.cate_mypage #qna_view_section .table_comm .w15{width:20%;}
.cate_mypage .table_respon .install_regist {height: auto; padding: .75rem 0 .5rem; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4}
.cate_mypage .table_respon .install_wait {margin: 0; margin-bottom: -50px; }
.cate_mypage .event_simple_domain {flex-direction: column; gap: .75rem; margin-top: .75rem}
.cate_mypage .event_simple_domain .date {padding-left: 0;}
.cate_mypage .event_simple_domain .date::before {content: none}
}
/* login, apply */
.cate_login {min-height:70vh !important;}
.sec_login{max-width:400px; margin:0 auto;}
.sec_login small {color: #777; font-size: 14px; padding-left: 2rem;}
.sec_login h3 {font-size: clamp(20px, 3vw, 24px); margin: 2rem 0 .75rem;}
.sec_login .input_list {margin-bottom: .5rem;}
.sec_login .tooltip {width: 15px; height: 15px; border-radius: 50%; background: #B3BDCB; color: white; display: inline-block; vertical-align: middle; margin-left: 2px; margin-top: -2px;}
.sec_login .tooltip::before {content: ""; background: url("data:image/svg+xml,%3Csvg width='7' height='9' viewBox='0 0 7 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.29597 6.93896H2.63097V8.59296H4.29597V6.93896ZM4.18897 6.15496C4.17135 5.84649 4.2265 5.5382 4.34997 5.25496C4.48543 5.04009 4.66934 4.85995 4.88697 4.72896C5.27546 4.46114 5.61678 4.13064 5.89697 3.75096C6.14446 3.37922 6.27187 2.94045 6.26197 2.49396C6.29331 2.06007 6.19454 1.62669 5.97828 1.24923C5.76203 0.871769 5.43812 0.567375 5.04797 0.374964C4.52149 0.117498 3.94087 -0.00973833 3.35497 0.00396333C2.68298 -0.0195692 2.02392 0.192687 1.49197 0.603964C1.1884 0.864284 0.949712 1.19181 0.794869 1.56051C0.640026 1.92922 0.573292 2.32895 0.599967 2.72796H2.21197V2.71696C2.19914 2.40747 2.27775 2.10106 2.43797 1.83596C2.55223 1.67844 2.70526 1.55313 2.88223 1.47218C3.05919 1.39123 3.25407 1.3574 3.44797 1.37396C3.70972 1.36784 3.96612 1.44874 4.17697 1.60396C4.30748 1.72243 4.40921 1.86916 4.47437 2.03293C4.53954 2.19671 4.56642 2.37321 4.55297 2.54896C4.5572 2.79882 4.49026 3.04473 4.35997 3.25796C4.22589 3.47295 4.05051 3.65921 3.84397 3.80596C3.43249 4.05266 3.09474 4.40525 2.86597 4.82696C2.71315 5.25358 2.64752 5.70652 2.67297 6.15896L4.18897 6.15496Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center; width: 100%; height: 100%; display: block;}
.sec_login .tooltip + .tooltip-content {opacity: 0; visibility: hidden; max-height: 0; position: absolute; position: absolute; bottom: 2rem; left: 6rem; width: 230px; transform: translateY(5px); transition: opacity, transform.25s}
.sec_login .tooltip.active + .tooltip-content {opacity: 1; visibility: visible; max-height: 999px; background-color: white; border: 1px solid #e4e4e4; border-radius: .5rem; padding: 1rem; transform: translateY(0); z-index: 10;}
.sec_login .selector {display: flex; border: 1px solid #434649; border-radius: 3px; position: relative}
.sec_login .tooltip.active + .tooltip-content::before {content: ""; width: 12px; height: 12px; display: block; border: 1px solid #e4e4e4; background-color: white;border-top: 0; border-left: 0; position: absolute; left: 1.85rem; top: calc(100% - 5px); transform: rotate(45deg) }
.sec_login .tooltip + .tooltip-content h4 {font-size: 16px; font-weight: 400; margin-bottom: 5px}
.sec_login .tooltip + .tooltip-content p {font-size: 13px;}
.sec_login .tooltip + .tooltip-content a {font-size: 13px; color: #1971E3; text-decoration: underline; text-underline-offset: 3px;}
.sec_login .sec_tit{padding-top:80px; font-size:2.4rem; font-weight:700;}
.sec_login .sec_desc{margin-bottom: 1em;}
.sec_login .input_list li + li{margin-top:.5em;}
.sec_login .input_list input{width:100%;}
.sec_login .input_list input[type="number"]::-webkit-outer-spin-button,
.sec_login .input_list input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.sec_login .input_list .captcha{overflow:hidden; margin-top:2.13em; border:1px solid #e4e4e4; border-radius:4px; background:#f8f8f8;}
.sec_login .input_list .captcha .LBD_CaptchaDiv{display:flex; width:100% !important;}
.sec_login .input_list .captcha .LBD_CaptchaIconsDiv{flex:1;}
.sec_login .input_list .captcha .LBD_CaptchaIconsDiv img{filter:brightness(.97);}
.sec_login .input_list .captcha .LBD_Placeholder{position:absolute;}
.sec_login .input_list .captcha .LBD_CaptchaIconsDiv{width:100% !important;}
.sec_login .input_list .captcha .LBD_CaptchaIconsDiv > a{display:block; width:100%; height:33px; border:none;}
.sec_login .input_list .admin{position:relative;}
.sec_login .input_list .admin .info{display:inline-block; position:absolute; right:.8em; top:calc(50% - 7px);}
.sec_login .input_list .admin .info .ico_info{display:inline-block; width:15px; height:15px; background:url(/images/mypage/ico_info.svg) no-repeat; opacity:1;}
.sec_login .input_list .admin .info .cont{display:block; position:absolute; left:calc(1em + 25px); top:-16px; z-index:1; width:400px; padding:1em; border-radius:4px; text-align:left; line-height:1.5; background:#fff; box-shadow: 0px 0px 5px rgba(0,0,0,.2); opacity:0; transition:.2s; pointer-events:none;}
.sec_login .input_list .admin .info .cont::after{content:''; display:inline-block; position:absolute; left:-4px; top:18px; width:10px; height:10px; background:#fff; transform:rotate(-45deg); box-shadow:-3px -3px 5px rgb(0,0,0,.1); }
.sec_login .input_list .admin .info:hover .cont{opacity:1;}
.sec_login .input_list .error{color: #ff0000; line-height: 2;}
.sec_login .agree_box{border-top: 1px solid #e4e4e4; padding-top: 1rem;}
.sec_login .agree_box .item{position:relative; width: 100%; padding-bottom: .5rem;}
.sec_login .agree_box .item strong {color: #1971E3; font-weight: 400;}
.sec_login .agree_box .btn_open{position:absolute; top: 1px; right:0; color:#999; text-decoration:underline;}
.sec_login .agree_box .detail{display:none; margin-top:1.04rem; padding:1.04rem 1.2rem; border-radius:4px; font-size:0.86rem; color:#999;background:#f8f8f8;}
.sec_login .btn_box_comm .btn_fill_cyan,
.sec_login .btn_box_comm .btn_fill_blue{width:100%; font-size: clamp(16px, 2.5vw, 18px); height: 56px;}
.sec_login .btn_box_comm .btn_fill_blue:disabled{background:#8e9eb9; cursor:default;}
.sec_login .btn_box_comm.login{padding-top:1rem;}
.sec_login .sns_login{margin-top:2.14em; text-align:center; display: flex; justify-content: center; align-items: center; gap: 2rem; border-top: 1px solid #ddd; padding-top: 2rem}
.sec_login .sns_login li {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 14px; color: #666}
.sec_login .sns_login button{display:inline-block; width:64px; height:64px; vertical-align:top; border-radius:50%; background-size:contain; background-repeat: no-repeat;}
.sec_login .sns_login .btn_google{background-image:url(/images/etc/sns_google.svg);}
.sec_login .sns_login .btn_naver{background-image:url(/images/etc/sns_naver.svg);}
.sec_login .sns_login .btn_kakao{background-image:url(/images/etc/sns_kakao.svg);}
.sec_login .sns_login .btn_facebook{background-image:url(/images/etc/sns_facebook.svg);}
.sec_login .login_etc{margin-top: 1.5rem; text-align:center;}
.sec_login .otp_other{margin-top: 5em;}
.sec_login .otp_other .tit{padding-bottom:.5em; font-size:1.07rem; text-align:center}
.sec_login .otp_other .login_etc {margin-top: 1.5em;}
.sec_login .login_etc li{display:inline-block; position:relative; padding-left:9px; padding-right:8px; font-size:.93rem; color:#666;}
.sec_login .login_etc li + li::before{content:''; display:inline-block; position:absolute; left:0; top:calc(50% - 5px); height:12px; border-left:1px solid #e4e4e4;}
.sec_login .login_etc li a:hover{color: #000;}
.sec_login .input_list .domain {position:relative; width:100%;}
.sec_login .input_list .domain input {padding-right: 7rem}
.sec_login .input_list .domain .txt{position:absolute; top:1rem; right:1em; color:#333;}
.cate_apply {min-height: calc(100vh - 72px) !important; padding-bottom: 0; display:flex; flex-flow:column; justify-content:center; padding-bottom:0; background:url(/images/etc/bg_apply.jpg) center center / cover no-repeat;}
.cate_apply .sec_login{max-width:496px; background-color: white; padding: 3rem; border-radius: 1.5rem; margin-top: 10vh; display: flex; flex-direction: column; gap: 1rem;}
.cate_apply .sec_login .sec_tit{padding-top: 0;}
.cate_apply{display:flex; flex-flow:column; justify-content:center; padding-bottom:0; background: rgba(0, 0, 0, .1) url(/images/etc/bg_apply.png) center center / cover no-repeat; background-blend-mode: multiply;}
.cate_apply .maximum{font-size:1.04rem; color:#ff6363; font-weight:700; line-height: 1.75; display: flex; align-items: center;}
.cate_apply .maximum::before{content:''; display:inline-block; width:18px; height:18px; margin-right:4px; vertical-align:middle; background:url(/images/etc/ico_caution.svg) no-repeat;}
.cate_apply .maximum + .input_list {margin-top: 1.5rem}
.cate_apply .caution{display: block; font-size:14px; color:#ff6363; font-weight: 400;}
.cate_apply .sec_login.not-available li {color: #777; font-weight: 700; font-size: clamp(15px, 2.5vw, 18px); display: flex; gap: 1rem; padding-bottom: 1rem; word-break: keep-all;}
.cate_apply .sec_login.not-available li::before {flex: 0 0 auto; content: ""; width: 5px; height: 5px; border-radius: 50%; display: block; background-color: #777; margin-top: 10px;}
.cate_apply .sec_login.not-available img {display: flex; margin: 0 auto; max-width: 100%;}
.cate_apply .sec_login .btn_box_comm {display: flex; gap: .5rem; padding-top: 1.5rem;}
.cate_apply .sec_login .btn_box_comm button {flex: 1; height: 56px; padding: 0 1rem; font-size: clamp(16px, 2.5vw, 18px);}
.sec_login .btn_box_comm .btn_cancel{background-color: #E4EBF3; color:#333; border-radius: 6px; padding: 0 1rem}
.cate_apply .sec_login .input_list li {display: flex; flex-wrap: wrap;}
.cate_apply .sec_login .input_list li.agree_box {margin-top: 1rem;}
.cate_apply .sec_login .caution {opacity: 0; visibility: hidden; max-height: 0;}
.cate_apply .sec_login .invalid input {border-color: #ff6363}
.cate_apply .sec_login .invalid .caution {opacity: 1; visibility: visible; max-height: 999px; padding: .5rem 0; display: block;}
.cate_apply .sec_login .invalid .check_comm input::before {
border: 1px solid #ff6363
}
.cate_apply .sec_login #regist_service {background-color: #8e9eb9; border-radius: 5px; color: white; transition: background-color .25s;}
@media only screen and (max-width:1023px) {
.cate_apply {min-height: calc(100vh - 55px) !important;}
}
@media only screen and (max-width:639px) {
.sec_login{max-width:100%;}
.sec_login .sec_tit{padding-top:48px; font-size:30px;}
.cate_apply .sec_login {padding:2rem}
.cate_apply .sec_login .btn_box_comm button,
.sec_login .btn_box_comm .btn_fill_cyan,
.sec_login .btn_box_comm .btn_fill_blue{height:48px; line-height:48px;}
.cate_apply .sec_login.not-available li {gap: .5rem}
}
/* 사이트 개설 완료 */
.cate_register .sec_comment{padding-top:110px;}
.cate_register .sec_comment .sec_tit{font-size:2.93rem; line-height:1.4; font-weight:700; text-align:center; letter-spacing:-.05em; color:#333;}
.cate_register .sec_comment .sec_tit.gradient em{background: linear-gradient(to right, #1972e3, #30e2ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.cate_register .sec_comment .sec_desc{padding-top:1em; font-size:1.33rem; color:#666; text-align:center; letter-spacing:-.05em}
.cate_register .sec_table .sec_tit{margin-top:2.33em; padding-bottom:.5em; font-size:1.6rem; font-weight:400;}
.cate_register .sec_table .btn_box_comm a{width:284px; font-size: clamp(16px, 2.5vw, 18px); height: 56px; line-height: 56px;}
.cate_register .sec_table .btn_box_comm a + a{margin-left:4px;}
.cate_register .banners { display: flex; margin: 3rem 0; gap: 1rem}
.cate_register .banners a { flex: 0 0 50%; margin: 0 auto }
.cate_register .banners a img { max-width: 100%}
@media only screen and (max-width:639px) {.cate_register .sec_comment{padding-top:40px;}
.cate_register .sec_comment .sec_tit{font-size:2.14rem;}
.cate_register .sec_comment .sec_tit.gradient{background: linear-gradient(to right, #1972e3, #30e2ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.cate_register .sec_comment .sec_tit.gradient em{background:none;}
.cate_register .sec_comment .sec_desc{font-size:1.14rem;}
.cate_register .sec_table .btn_box_comm{display:flex; justify-content:space-between;}
.cate_register .sec_table .table_comm .w20{width:30%;}
}
/* agreement */
.cate_agreement .sec_agreement{padding-top:22px;}
.cate_agreement .sec_agreement .agree_box h2 {margin-top:50px; font-size:1.4rem;font-weight:700;}
.cate_agreement .sec_agreement .agree_box h2:first-child {margin-top:0;}
.cate_agreement .sec_agreement .agree_box h3{font-weight:700;}
.cate_agreement .sec_agreement .agree_box h3,
.cate_agreement .sec_agreement .agree_box h4 {margin:2.5em 0 1em; font-size:1.14rem;}
.cate_agreement .sec_agreement .agree_box h3:first-child{margin-top:0}
.cate_agreement .sec_agreement .agree_box ul + h2{margin-top:5em;}
.cate_agreement .sec_agreement .agree_box li,
.cate_agreement .sec_agreement .agree_box p {border:0; padding:0; color:#777; line-height:1.6;}
.cate_agreement .sec_agreement .agree_box .agree_list li + li{margin-top:.2em;}
.cate_agreement .sec_agreement .agree_box .agree_list a:hover{text-decoration:underline;}
.cate_agreement .sec_agreement .agree_box .oneStep {padding-left:20px; text-indent:-20px;}
.cate_agreement .sec_agreement .agree_box .twoStep {margin:4px 5px; padding-left:10px; text-indent:-18px;}
.cate_agreement .sec_agreement .agree_box .thrStep {margin:4px 5px; padding-left:5px; text-indent:-12px;}
.cate_agreement .sec_agreement .agree_box .policyStep {margin-top:10px; border:1px solid #e0e0e0; background:#fafafa; padding:15px 20px;}
.cate_agreement .sec_agreement .agree_box .policyStep li{font-size:1.04rem;}
.cate_agreement .sec_agreement .agree_box .policyStep a:hover{ text-decoration:underline;}
.cate_agreement .sec_agreement .table_agree{margin-top:1em; margin-bottom:1em;}
.cate_agreement .sec_agreement .table_agree td,
.cate_agreement .sec_agreement .table_agree th{border:1px solid #ddd; padding:.5em; text-align:center;}
.cate_agreement .sec_agreement .table_agree th{font-weight:400; background:#eee;}
@media only screen and (max-width:639px) {.cate_agreement .sec_agreement{padding-top:0;}
.cate_agreement .sec_agreement .agree_box ul + h2{margin-top:2em;}
.cate_agreement .sec_agreement .agree_box h3,
.cate_agreement .sec_agreement .agree_box h4 {margin:1em 0 .5em; font-size:1.14rem;}
.cate_agreement .sec_agreement .service_list th[scope="row"] {width:30%; box-sizing:border-box; padding-left:10px;}
.cate_agreement .sec_agreement .service_list col.th,
.cate_agreement .sec_agreement .service_list td {width:35%; box-sizing:border-box; padding-left:10px; padding-right:10px;}
}
/* error */
.cate_error{display:flex; height: calc(100vh - 72px); padding:60px 0 100px !important;}
.cate_error .cont{flex:1; display:flex; flex-flow:column; justify-content:center; text-align:center;}
.cate_error .cont .img_box{position: relative; width:100%; max-width:620px; height:auto; margin:0 auto; text-align: center;}
.cate_error .cont .tit{padding-top: 15px; font-size:2.4rem; line-height:1.66; font-weight: 400;}
.cate_error .cont .desc{padding-top:.8em; font-size:1.2rem; line-height:1.66; color:#666;}
.cate_error .cont .btn_box_comm [class^=btn]{width:284px; margin:0 2px;}
@media only screen and (max-width:639px) {.cate_error .cont .tit{font-size:2.14rem;}
.cate_error .cont .desc{font-size:1.14rem;}
.cate_error .cont .btn_box_comm{display: flex;}
}
/* 고객사례 */
.cate_case{padding-bottom: 0 !important; background: #f2f5fa;}
.cate_case .sec_head_comm{padding-bottom: 100px !important; }
.cate_case .part_area{padding-top: 120px; padding-bottom: 120px;}
.cate_case .part_area:first-child{padding-top: 0;}
.cate_case .part_area:nth-child(even){background-color: #fff;}
.cate_case .part_area .case{display: flex; align-items: flex-start; position: relative;}
.cate_case .part_area .website{flex: 1; margin-right: 11%;}
.cate_case .part_area .website a{display: inline-block; width: 100%;}
.cate_case .part_area .website img{width: 100%; max-width: 382px; height: auto; border: 1px solid #eee;}
.cate_case .part_area .cont{display: flex; flex-flow: column; align-items: flex-start; width: 700px;}
.cate_case .part_area .tit, .cate_case .part_area .title{display: flex; justify-content: center; align-items: flex-start; position: relative; font-size: 3.125em; font-weight: 700; color: #000; line-height: 1.2;}
.cate_case .part_area .title{ flex-direction: row; flex-wrap: wrap; justify-content: flex-start; max-width: 96%;}
.cate_case .part_area .title.responsive {max-width: 560px;}
.cate_case .part_area .tit.col{flex-flow: column;}
.cate_case .part_area .tit span{position: relative; z-index: 1;}
.cate_case .part_area .tit span.line_wrap_m::before {content:none !important}
.cate_case .part_area .tit span + span{padding-left: .2em;}
.cate_case .part_area .tit.type1 span:nth-child(2):not(:last-of-type) {padding-left: 0;}
.cate_case .part_area .tit.type2 span:last-of-type {padding-left: 0;}
.cate_case .part_area .tit span:first-child::before{content: ''; display: inline-block; position: absolute; top: 0; left: -1.25em; height: 36px; width: 44px; background: url(/images/case/quotation_start.svg) center / contain no-repeat;}
.cate_case .part_area .tit span:last-child::before{content: ''; display: inline-block; position: absolute; bottom: 0; right: -1.25em; height: 36px; width: 44px; background: url(/images/case/quotation_end.svg) center / contain no-repeat;}
.cate_case .part_area .tit span::after{content:''; display:inline-block; position:absolute; left:0; right:0; bottom:.2em; z-index:-1; height:.3em; background:#ffbd8a;}
.cate_case .part_area .desc p{margin-top: 1.77em; font-size: 1.2em; color: #333; line-height: 1.77; word-break: keep-all;}
.cate_case .part_area .desc p b{color: #000;}
.cate_case .part_area .link{margin-top: 2.22em;}
.cate_case .part_area .link .link_arr{position: relative; font-size: 1.2em; color: #1971E3; line-height: 1.77;}
.cate_case .part_area .link .link_arr:hover{text-decoration: underline;}
.cate_case .part_area .link .link_arr::after{content:''; display:inline-block; width:.88em; height:.88em; margin-left:.2em; background:url(/images/common/ico_link_blue.svg) center center no-repeat;}
.cate_case .part_area .hash{margin-top: 100px; padding-bottom: 10px;}
.cate_case .part_area .hash span{display: inline-block; height: 2.25em; font-size: 1.07rem; padding-left: 1em; padding-right: 1em; line-height: 2.1; border: 1px solid #d5d5d5; border-radius: 10px; margin-right: 4px; background: #fff;}
.cate_case .part_area .hash span::before{content: '#'}
.cate_case .part_area .company{width: 100%; margin-top: 10px; padding-top: 20px; border-top: 1px solid #d5d5d5;}
.cate_case .part_area .company .intro{padding-bottom: 15px; font-size: 1.07rem; color: #666;}
.cate_case .part_area{opacity: 0; transition: .25s;}
.cate_case .part_area.is-active {opacity: 1;}
.cate_case .part_area .tit {transform: translateY(1rem); transition: .5s}
.cate_case .part_area.is-active .tit {transform: translateY(0);}
.cate_case .part_area.is-active .tit span::after {right: auto; animation: highlighting 1.5s forwards}
.cate_case .part_area.is-active .tit span:nth-of-type(1):after {animation-delay: 0;}
.cate_case .part_area.is-active .tit span:nth-of-type(2):after {animation-delay: .2s;}
.cate_case .part_area.is-active .tit span:nth-of-type(3):after {animation-delay: .4s;}
.cate_case .part_area .desc p { opacity: 0; transform: translateY(.75rem); transition: .5s; }
.cate_case .part_area.is-active .desc p { opacity: 1; transform: translateY(0); }
.cate_case .part_area.is-active .desc p:nth-of-type(1) {transition-delay: .2s;}
.cate_case .part_area.is-active .desc p:nth-of-type(2) {transition-delay: .4s;}
.cate_case .part_area.is-active .desc p:nth-of-type(3) {transition-delay: .6s;}
.cate_case .part_area.is-active .desc p:nth-of-type(4) {transition-delay: .8s;}
.cate_case .part_area.is-active .desc p:nth-of-type(5) {transition-delay: 1.0s;}
.cate_case .part_area.is-active .desc p:nth-of-type(6) {transition-delay: 1.2s;}
@keyframes highlighting {0%{width: 0;} 100% {width: 100%;}
}
@media only screen and (max-width:1023px) {.cate_case .part_area{padding-top: 80px; padding-bottom: 80px;}
.cate_case .part_area:first-child{padding-top: 0;}
.cate_case .part_area .case{flex-flow: column; align-items: center;}
.cate_case .part_area .website{margin-right: 0;}
.cate_case .part_area .website img{max-width: 474px;}
.cate_case .part_area .cont{align-items: center; width: 100%; max-width: 600px; margin-top: 32px;}
.cate_case .part_area .tit{flex-flow: column; align-items: center; margin-top: 40px; margin-bottom: 40px; font-size: 2.5em; text-align: center;}
.cate_case .part_area .tit span + span{padding-left: 0;}
.cate_case .part_area .tit span:first-child::before{display: block; top: auto; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); width: 38px; height: 31px; }
.cate_case .part_area .tit span:last-child::before{display: block; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 38px; height: 31px;}
.cate_case .part_area .link{width: 100%;}
.cate_case .part_area .hash{overflow-x: auto; white-space: nowrap; width: 100%; margin-top: 48px;}
}
@media only screen and (max-width:639px) {
.cate_case .sec_head_comm{padding-bottom: 40px !important;}
.cate_case .part_area{padding-top: 60px; padding-bottom: 60px;}
.cate_case .part_area .tit{font-size: 2.3em;}
.cate_case .part_area .hash{width: 100%;}
}
@media screen and (max-width: 480px) {
.cate_mypage .manage .domain .event {font-size: 13px}
}
/* 광고마케팅 */
.cate_ads{padding-bottom: 0 !important;}
.cate_ads .sec_head_comm{height:440px; position:relative; max-width: 100% !important;}
.cate_ads .sec_head_comm .visual img{position:absolute; left:50%; top:0; z-index:-1; transform:translateX(-50%);}
.cate_ads section:not(.sec_start_comm){padding-top:clamp(60px, 15vw, 120px); padding-bottom:clamp(60px, 15vw, 120px);}
.cate_ads .list{display:flex; flex-wrap:wrap;}
.cate_ads .list li{display: flex; flex-direction: column; align-items: center;}
.cate_ads .list .texts h4{font-size:clamp(1.9rem, 4vw, 2.27rem); font-weight:400;}
.cate_ads .list .texts p{display: flex; flex-direction: column; padding-top:.7em; font-size:1.2rem; font-weight:400;}
.cate_ads.online .sec_intro{padding-bottom:0; border-bottom:1px solid #eee;}
.cate_ads.online .sec_intro [data-scroll]{opacity: 0; transition:.2s;}
.cate_ads.online .sec_intro [data-scroll].on{opacity: 1;}
.cate_ads.online .sec_intro .cont {position:relative; margin-top: clamp(40px,10vw, 90px); max-width:908px; margin-left: auto; margin-right: auto;}
.cate_ads.online .sec_intro .bg{max-width:100%;}
.cate_ads.online .sec_intro .logos img{position: absolute}
.cate_ads.online .sec_intro .logos :nth-of-type(1) {top: 21%; left: -3%;}
.cate_ads.online .sec_intro .logos :nth-of-type(2) {top: 2%;left: 9%;}
.cate_ads.online .sec_intro .logos :nth-of-type(3) {top: 10%;left: 23%;}
.cate_ads.online .sec_intro .logos :nth-of-type(4) {top: -11%;left: 25%;}
.cate_ads.online .sec_intro .logos :nth-of-type(5) {top: -5%;left: 39.5%;}
.cate_ads.online .sec_intro .logos :nth-of-type(6) {top: 13%;left: 40%;}
.cate_ads.online .sec_intro .logos :nth-of-type(7) {top: -11%;right: 25%;}
.cate_ads.online .sec_intro .logos :nth-of-type(8) {top: 10%;right: 23%;}
.cate_ads.online .sec_intro .logos :nth-of-type(9) {top: 2%;right: 7%;}
.cate_ads.online .sec_intro .logos :nth-of-type(10) {top: 21%;right: -5%;}
.cate_ads.online .sec_intro .features img{position: absolute; border-radius: 20px; box-shadow: 8px 8px 60px 0px rgba(0, 0, 0, 0.10);}
.cate_ads.online .sec_intro .features :nth-of-type(1) {bottom: 10%;left: -20%;}
.cate_ads.online .sec_intro .features :nth-of-type(2) {bottom: 20%;left: 29%;z-index: 3;}
.cate_ads.online .sec_intro .features :nth-of-type(3) {bottom: 13%;right: -20%;}
.cate_ads.online .sec_prefer .list{gap:clamp(30px,10vw,75px); max-width:980px; margin:clamp(25px,8vw,56px) auto 0;}
.cate_ads.online .sec_prefer .list li{flex-direction:row; align-items:stretch; border-radius:20px; width:100%; background:#303C4B;}
.cate_ads.online .sec_prefer .various{flex:1; display: flex; justify-content: space-between; flex-direction:column; padding-top:clamp(25px,8vw,50px); padding-bottom:clamp(25px,8vw,56px);}
.cate_ads.online .sec_prefer .various h4{font-size:clamp(1.8rem, 5.2vw, 2.15rem); color:#fff;}
.cate_ads.online .sec_prefer .various p{color:#B3BDCB;}
.cate_ads.online .sec_prefer .various .logos{display: flex; gap:8px;}
.cate_ads.online .sec_prefer .various .logos img{transition:.75s cubic-bezier(0.47, 1.64, 0.41, 0.8) .75s}
.cate_ads.online .sec_prefer .various .logos img:nth-of-type(2){transform:translateX(-3rem);}
.cate_ads.online .sec_prefer .various .logos img:nth-of-type(3){transform:translateX(-6rem);}
.cate_ads.online .sec_prefer .various .logos img:nth-of-type(4){transform:translateX(-9rem);}
.cate_ads.online .sec_prefer .various .logos img:nth-of-type(5){transform:translateX(-12rem);}
.cate_ads.online .sec_prefer .various .logos img:nth-of-type(6){transform:translateX(-15rem);}
.cate_ads.online .sec_prefer .various .logos img[data-scroll].on{transform:translateX(0);}
.cate_ads.online .sec_diad{background:#F2F5FA;}
.cate_ads.online .sec_diad .top_area {position: absolute; top: 0; left: 30px;}
.cate_ads.online .sec_diad .top_area p{text-align: left;}
.cate_ads.online .sec_diad .texts p {color: #777; font-size: clamp(16px,2vw,18px);}
.cate_ads.online .sec_diad .texts strong {color: #000;font-size: clamp(16px,2vw,18px); font-weight:400;}
.cate_ads.online .sec_diad .texts h4 {font-size: clamp(26px,3vw,34px);color: #1971E3; font-weight:600;line-height: 50px;}
.cate_ads.online .sec_diad .background {top: 50%;right: 5vw;transform: translateY(-50%);position: absolute;display: block;border-radius: 50%;width: min(100%,560px);aspect-ratio: 1;transition: .25s;}
.cate_ads.online .sec_diad .background::before {content: ""; top: 13rem; left: -2.5rem; position: absolute; display: block; border-radius: 50%; width: 200px; height: 200px; background-color: rgba(100,100,100,.1); transition: .5s; z-index: -1;}
.cate_ads.online .sec_diad .background::after {content: ""; top: 0; left: 16rem; position: absolute; display: block; border-radius: 50%; width: 100px; height: 100px; background-color: rgba(0,0,0,.1); transition: 1s; z-index: -1;}
.cate_ads.online .sec_diad .background .donut {width: 100%; height: 100%; border-radius: 50%; background-image: linear-gradient(#46aef7, #1dd5e6); transition: .25s;}
.cate_ads.online .sec_diad .background .donut::after {content: ""; width: 30%; height: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #fff;}
.cate_ads.online .sec_diad .background.pro::before {top: 13rem; left: -2.5rem;}
.cate_ads.online .sec_diad .background.pro::after {top: 0; left: 16rem;}
.cate_ads.online .sec_diad .background.pro .donut {background-image: linear-gradient(#46aef7, #1dd5e6);}
.cate_ads.online .sec_diad .background.wave::before {top: 14rem; left: 14rem;}
.cate_ads.online .sec_diad .background.wave::after {top: 3rem; left: -0.5rem;}
.cate_ads.online .sec_diad .background.wave .donut {background-image: linear-gradient(#85f4bb, #8cd9e8);}
.cate_ads.online .sec_diad .background.trend::before {top: 10rem; left: -2.5rem;}
.cate_ads.online .sec_diad .background.trend::after {top: 6rem; left: 20.5rem;}
.cate_ads.online .sec_diad .background.trend .donut {background-image: linear-gradient(#3fbbfe, #a541ff);}
.cate_ads.online .sec_diad .background.shopping::before { top: 13rem; left: -2.5rem; }
.cate_ads.online .sec_diad .background.shopping::after { top: 0; left: 16rem; }
.cate_ads.online .sec_diad .background.shopping .donut { background-image: linear-gradient(rgb(140, 71, 243), rgb(93, 1, 231)); }
.cate_ads.online .sec_diad .swiper-slide {opacity: 0 !important; display: flex; width: 100%; height:auto;}
.cate_ads.online .sec_diad .swiper-slide-active {opacity: 1 !important;}
.cate_ads.online .sec_diad .swiper .texts {flex: 1 1 auto; position: relative; top:300px; display:flex; flex-direction: column; align-items: flex-start; gap: 1rem;}
.cate_ads.online .sec_diad .swiper .texts p{display: flex; flex-direction: column;}
.cate_ads.online .sec_diad .swiper .texts a {color: #1971E3;}
.cate_ads.online .sec_diad .swiper .texts a::after{content:''; display:inline-block; width:1em; height:1.5em; margin-left:.5em; vertical-align: top; background:url(/images/ads/btn_arr.svg) center no-repeat;}
.cate_ads.online .sec_diad .swiper .texts+.image {flex: 0 0 55%; right: 2.25vw; order: 0; display:flex; justify-content: center; align-items: center;}
.cate_ads.online .sec_diad .swiper-pagination {position:relative; margin-top:30px; display: flex; gap:8px;}
.cate_ads.online .sec_diad .swiper-pagination li {margin: 0; padding: 0 1.1rem;}
.cate_ads.online .sec_diad .swiper-pagination-bullet {font-weight: 500; font-size: clamp(14px,2vw,18px); background-color: #fff; color: #969696; width: -moz-fit-content; width: fit-content; height: 40px; white-space: nowrap; border-radius: 50px; padding: 0 1rem; display: flex; align-items: center; opacity:1;}
.cate_ads.online .sec_diad .swiper-pagination-bullet-active {background-color: #0066FF; color: #fff;}
.cate_ads.sns .sec_function .list{justify-content: center;}
.cate_ads.sns .sec_function .list li{flex-basis:230px;}
.cate_ads.sns .sec_methods{background:#F2F5FA;}
.cate_ads.sns .sec_methods .list{margin-top:clamp(50px, 13vw, 100px);}
.cate_ads.sns .sec_methods .list li{flex-basis: 50%;}
.cate_ads.sns .sec_methods .list li:nth-child(even){margin-top:clamp(50px, 10vw, 200px);}
.cate_ads.sns .sec_methods .list li > *{width:min(100%, 380px);}
.cate_ads.sns .sec_methods .list h4{padding-top:.7em; font-size:clamp(1.9rem, 4vw, 2.27rem); font-weight:400;}
.cate_ads.sns .sec_methods .list p{padding-top:.7em; font-size:1.2rem;}
.cate_ads.sns .sec_contacts .list{gap:20px; margin-top:clamp(25px,8vw,56px);}
.cate_ads.sns .sec_contacts .list li{flex-direction: row; align-items: center; gap:25px; width:calc(50% - 10px); min-height:224px; padding:40px 20px; border-radius:20px; background:#F2F5FA;}
.cate_ads.sns .sec_contacts .list .image{width: 154px; text-align: center;}
.cate_ads.sns .sec_contacts .list .texts{flex:1;}
.cate_ads.sns .sec_contacts .list p{color:#88929E;}
.cate_ads .sec_start_comm .tel{padding-top:10px; letter-spacing: 0;}
@media only screen and (max-width:639px) {
.cate_ads .sec_head_comm{height: auto; padding-bottom:0 !important; background:#F2F5FA;}
.cate_ads .sec_head_comm .visual{position:relative;}
.cate_ads .sec_head_comm .visual img{position:relative; transform: translateX(calc(-50% - 46vw)); height: 70vw; z-index:1;}
.cate_ads .list .texts p{display: block;}
.cate_ads.online .sec_head_comm .w_container{z-index: 1;}
.cate_ads.online .sec_head_comm .visual{margin-top:-28vw;}
.cate_ads.online .sec_head_comm .visual img{transform: translateX(calc(-50% - 20vw)); height: 95vw; z-index:0;}
.cate_ads.online .sec_prefer .list li{flex-direction: column;}
.cate_ads.online .sec_prefer .list .image img{width:100%;}
.cate_ads.online .sec_prefer .list .various{align-items:center; gap:30px; padding-left:clamp(25px,8vw,56px); padding-right:clamp(25px,8vw,56px); text-align:center;}
.cate_ads.online .sec_diad .top_area{position:static;}
.cate_ads.online .sec_diad .top_area p{text-align: center;}
.cate_ads.online .sec_diad .background{top:45%;right:0; transform: translateY(-50%) scale(.8); }
.cate_ads.online .sec_diad .swiper-slide{flex-direction: column-reverse;}
.cate_ads.online .sec_diad .swiper .texts+.image{flex:none; width:100%; height:90vw; position:relative; top:9vw; right:0;}
.cate_ads.online .sec_diad .swiper .texts+.image img{max-width:100%; margin-left:2vw; margin-top:5vw;}
.cate_ads.online .sec_diad .swiper .texts{top:calc(15vw + 20px);height:80vw; align-items:center; text-align: center;}
.cate_ads.online .sec_diad .swiper .texts p{display:block;}
.cate_ads.online .sec_diad .swiper .texts strong{display: block;}
.cate_ads.online .sec_diad .swiper-pagination{margin-top:20px;}
.cate_ads.online .sec_diad .swiper-pagination li{padding-left:.5em; padding-right:.5em; font-size:1rem;}
.cate_ads.sns .sec_head_comm .visual img{transform: translateX(calc(-50% - 46vw)); height: 70vw;}
.cate_ads.sns .sec_function .list{flex-direction: row; gap:1rem;}
.cate_ads.sns .sec_function .list li{flex-basis:content;}
.cate_ads.sns .sec_methods .list{flex-direction: column; gap:30px;}
.cate_ads.sns .sec_methods .list li{flex-basis:auto; text-align: center;}
.cate_ads.sns .sec_methods .list li:nth-child(even){margin-top:0;}
.cate_ads.sns .sec_contacts .list{flex-direction:column; gap:15px;}
.cate_ads.sns .sec_contacts .list li{flex-direction: column;width: 100%; min-height: auto; text-align: center;}
}
/* 추가 컴포넌트 */
.text_blue { color: #1971e3; }
a.text_blue { color: #1971e3; text-decoration: underline; }
.text_yellow { color: #ffa422; }
.selectbox { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
.selectbox::-ms-expand { display: none; }
.selectbox::before { content: ""; position: absolute; top: 50%; right: 0.7rem; width: 0; height: 0; margin-top: -6px; border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.selectbox label { white-space: nowrap; margin-right: 0.5rem; }
.selectbox select { min-width: 64px; border: 1px solid #e4e4e4; border-radius: 0.3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; -webkit-appearance: none; padding: 0.5rem 1.5rem 0.5rem 0.75rem !important; background-color: white; color: #333; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1; cursor: pointer; }
/* 메인 공통 */
main[class*="content"] input::-webkit-outer-spin-button, main[class*="content"] input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
main[class*="content"] .btn_main { background-color: #1971e3; color: white; padding: 1rem 5rem; border-radius: 0.5rem; }
main[class*="content"] .btn_sub { background-color: #93a1b9; color: white; padding: 1rem 5rem; border-radius: 0.5rem; }
main[class*="content"] .checkbox { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
main[class*="content"] .checkbox input[type="checkbox"] { opacity: 0; position: absolute; width: 0; height: 0; }
main[class*="content"] .checkbox input[type="checkbox"] + label { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; padding: 0; -webkit-transition: 0.2s color; transition: 0.2s color; }
main[class*="content"] .checkbox input[type="checkbox"] + label::before { content: ""; border-radius: 50%; margin-right: 0.5rem; width: 24px; height: 24px; background-color: #eee; -webkit-transition: 0.2s; transition: 0.2s; }
main[class*="content"] .checkbox input[type="checkbox"] + label::after { content: ""; width: 12px; height: 7px; position: absolute; top: calc(50% - 2px); left: 6px; border: 2px solid white; border-top: none; border-right: none; background: transparent; opacity: 1; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); }
main[class*="content"] .checkbox input[type="checkbox"]:checked + label::before { background-color: #1971e3; border-color: #1971e3; }
main[class*="content"] section.buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 3rem; }
/* 임시페이지 */
.under_construction { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.under_construction.date_20211222 { background-color: #1971e3; }
.under_construction.date_20211222 header { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; width: 100%; background-color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.under_construction.date_20211222 header .logo { width: 144px; height: 66px; background: url("/images/common/logo_144x66.png") no-repeat; }
.under_construction.date_20211222 .content { max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.under_construction.date_20211222 .content section:last-of-type { color: #8ab9ff; }
.under_construction.date_20211222 .content section:last-of-type p { font-size: 18px; }
.under_construction.date_20211222 section.title { background: url("/images/etc/sandglass.png") center top no-repeat; padding-top: 10rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #9dc6fb; font-size: 24px; text-align: center; }
.under_construction.date_20211222 section.title .impact { color: white; font-size: 52px; font-weight: bold; margin-bottom: 0.5rem; }
.under_construction.date_20211222 .notification { background-color: #2f609f; border-radius: 30px; width: 760px; margin: 2.5rem 0; padding: 2rem 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; word-break: keep-all; }
.under_construction.date_20211222 .notification li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.under_construction.date_20211222 .notification li .title { -webkit-box-flex: 0; -ms-flex: 0 0 110px; flex: 0 0 110px; color: #80abe5; text-align-last: justify; padding-right: 1rem; }
.under_construction.date_20211222 .notification li .title::before { content: "\2022"; padding-right: 0.5rem; }
.under_construction.date_20211222 .notification li .title::after { content: ":"; }
.under_construction.date_20211222 .notification li div { color: white; font-size: 20px; font-weight: 300; }
.under_construction.date_20211222 .notification li ol { margin-top: 0.25rem; }
.under_construction.date_20211222 .notification li ol li { line-height: 1.75; }
.under_construction.date_20211222 .notification li .text-orange { color: #f58800; }
/* 이벤트 게시판 */
.content-events .sec_head_comm{padding-bottom: min(20px, 2vw) !important;}
.content-events img {max-width: 100%; height: auto !important;}
.content-events .tags span {display:inline-block; margin-right:4px; padding:.5em; border:1px solid #ddd; border-radius:4px; font-size:.86rem; color:#777; line-height:1;}
.content-events .events { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; flex-wrap: wrap; margin-top: 1rem}
.content-events .events li { margin-bottom: 3rem; display: flex; flex-direction: column; gap: .5rem; word-break: keep-all; cursor: pointer;}
.content-events .events li:hover h5,
.content-events .events li:hover p {text-decoration: underline;}
.content-events .events li .image {width: 100%; aspect-ratio: 1; overflow: hidden; position: relative;}
.content-events .events li .image img {width :100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.content-events .events li h5 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; white-space: normal; max-height: 3.2rem; font-size: 1.06rem;}
.content-events .events li p {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; white-space: normal; max-height: 3.2rem; color:#777; line-height:1.6;}
.content-events .events li .date {display:block; font-size:.93rem; color:#aaa; font-family:'Roboto';}
.content-events .events li .bg { display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }
.content-events .events li .bg span { position:absolute; top:10px; left:10px; border-radius:50px; background:#333; padding:5px 15px; font-size:14px; color:#fff; }
.content-events .event {width: 800px; margin: 0 auto}
.content-events .event header {border-bottom: 1px solid #333; padding: 1.5rem 0}
.content-events .event header .date {font-family: 'Roboto'; font-size: 15px}
.content-events .event header h3 {font-size: 2.4rem; line-height: 1.4; font-weight: normal; margin-bottom: 1rem}
.content-events .event main {padding:3rem 0 6rem; text-align: center; line-height:1.8; color:#777; word-break:break-word;}
.content-events .event main a {text-decoration:underline; color:#2598e8}
.content-events .event main p {font-size: 17px;}
.content-events .event footer {text-align: center}
.content-events .event footer button {min-width: 11rem; padding: 1rem 2rem; line-height:1; border:1px solid #ddd; border-radius:2em; color:#333; font-size:1rem; text-align:center; transition:.2s;}
.content-events .event footer button:hover {border-color:#333; color:#fff; background:#333;}
@media screen and (max-width: 960px) {.cate_main .sec_boards .w_container {gap: 3rem}
.content-events .events {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width:639px) {.content-events .events li {margin-bottom: 2rem;}
.content-events .event {width: 100%}
.content-events .event header h3 {font-size: 1.8rem}
.content-events .event main p {font-size: 16px;}
}
.content-onboarding {background-color: #F2F5FA; padding: 6rem 0; letter-spacing: -1px;}
.content-onboarding section {width: min(100%, 780px); margin: 0 auto; padding: 0 15px 3rem; position: relative; overflow: hidden;}
.content-onboarding header {display: flex; flex-direction: column; gap: .5rem; align-items: center; padding-bottom: 2.75rem; color: #333;}
.content-onboarding p {font-size: clamp(16px, 2.5vw, 18px); }
.content-onboarding.done p {width: 322px; height: 80px; margin-top: -0.5rem; background: url(/images/etc/ok_background.png) no-repeat center; display: flex; align-items: center; justify-content: center; gap: 5px; animation: upAndDown infinite 1s;}
@keyframes upAndDown {
0% {transform: translateY(5px);}
50% {transform: translateY(0);}
100% {transform: translateY(5px);}
}
.content-onboarding {word-break: keep-all;}
.content-onboarding h1 {font-size: clamp(30px, 4vw, 44px); font-weight: 400; text-align: center;}
.content-onboarding h2 {font-size: clamp(18px, 2.5vw, 32px); line-height: 1; font-weight: 400;}
.content-onboarding h2 span {color: #1971E3;}
.content-onboarding.start ul {display: flex; flex-wrap: wrap; gap: 1rem}
.content-onboarding.start li {flex: 1 1 auto; width: calc(100% / 3 - 2rem); max-width: calc(100% / 3);}
.content-onboarding.start li label {display: flex; align-items: center; gap: .75rem; width: 100%; background-color: white; padding: 1.25rem 1.65rem; border-radius: 1rem; font-size: clamp(16px, 2.5vw, 18px); transition: .25s; cursor: pointer; position: relative; box-shadow: 0 0 0 1px inset #E2E6ED}
.content-onboarding.start li label::before {flex: 0 0 auto; content: ""; width: 24px; height: 24px; border-radius: 50%; background-color: #ebebeb; display: block; transition: background-color .25s;}
.content-onboarding.start li label::after {content: ""; position: absolute; left: 29px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M1.91797 5.91699L5.75098 10.25L12.084 1.75' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); width: 14px; height: 12px; display: block;}
.content-onboarding.start li label:hover {box-shadow: 0 0 0 3px inset #9EA5B2;}
.content-onboarding.start li input {display: none;}
.content-onboarding.start li input:checked + label {box-shadow: 0 0 0 3px inset #1971E3; color: #1971E3;}
.content-onboarding.start li input:checked + label::before {background-color: #1971E3;}
.content-onboarding.start .buttons {display: flex; flex-direction: column; align-items: center; padding: 5rem 0 0 }
.content-onboarding.start .buttons button {width: 240px; padding: 1rem 0; border-radius: .5rem; color: #1971E3; height: 56px; font-size: clamp(15px, 2.5vw, 16px);}
.content-onboarding.start .buttons button:first-of-type {background-color: #ABC5E8; width: 240px; color: white; transition: background-color .25s; font-size: clamp(16px, 2.5vw, 18px);}
.content-onboarding.start .buttons button:first-of-type.active {background-color: #1971E3;}
.content-onboarding.start .toast {opacity: 0; position: absolute; left: 50%; bottom: -10rem; transform: translateX(-50%); width: 250px; background-color: black; border-radius: 50px; color: #ddd; padding: .75rem 2rem; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: .5rem; line-height: 1; transition: .25s;}
.content-onboarding.start .toast::before {content: "!"; width: 20px; height: 20px; display: inline-block; background-color: #D82020; color: white; border-radius: 50%; line-height: normal; text-align: center; font-family: "auto";}
.content-onboarding.start .toast.active {opacity: 1; animation: poppedUp 2s forwards; bottom: 3rem}
.content-onboarding.done section {width: min(90%, 1220px); padding: 0;}
.content-onboarding.done ul {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 3rem 1.5rem;}
.content-onboarding.done li {display: flex; flex-direction: column; justify-content: center; align-items: center; width: min(100%, 284px); gap: .75rem; font-size: clamp(15px, 2.5vw, 18px); font-weight: 700; position: relative;}
.content-onboarding.done li .image {border-radius: 1rem; overflow: hidden; position: relative}
.content-onboarding.done li .image::before {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: background-color z-index .25s;}
.content-onboarding.done li img {max-width: 100%; transition: filter .25s}
.content-onboarding.done li .links {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; max-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transition: opacity .25s}
.content-onboarding.done li .links a {font-size: 16px;}
.content-onboarding.done li .links a:first-of-type {background-color: white; height: 48px; width: 200px; display: flex; align-items: center; justify-content: center; color: black; border-radius: .5rem;}
.content-onboarding.done li .links a:last-of-type {color: white; text-decoration: underline; text-underline-offset: 5px; font-weight: 500;}
.content-onboarding.done li:hover .image::before {background-color: rgba(0, 0, 0, 0.45); z-index: 1;}
.content-onboarding.done li:hover img {filter: blur(.45rem)}
.content-onboarding.done li:hover .links {opacity: 1; visibility: visible; max-height: 999px; z-index: 2;}
.content-onboarding.done .show-more {padding: 2.5rem 0; margin: 0 auto; display: flex; justify-content: center;}
.content-onboarding.done .show-more button {display: flex; align-items: center; gap: .5rem; color: #1971E3; font-size: clamp(15px, 2.5vw, 18px); }
.content-onboarding.done .show-more button::after {content: ""; background-image:url(/images/common/arr_txt_blue.svg); display: inline-block; width: 18px; height: 18px; transform: rotate(90deg);}
.loading {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #F2F5FA; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.25rem; font-size:clamp(20px, 2.5vw, 28px); color: #333; font-weight: 700; animation: fadeOut 4s forwards; z-index: 0;}
.loading.active {z-index: 1;}
.loader {width: 48px;height: 48px; border: 8px solid #93A1B9; border-bottom-color: #1971E3; border-radius: 50%; display: inline-block; animation: rotation 1.25s linear infinite;}
@media screen and (max-width: 639px) {
.content-onboarding.start li {flex: 1 1 auto; width: calc(100% / 2 - 2rem); max-width: calc(100% / 2);}
.content-onboarding.done ul {justify-content: center; }
.content-onboarding.start h1 {display: flex; flex-direction: column;}
.content-onboarding.start li label {padding: 1rem;}
.content-onboarding.start li label::after {left: 19px;}
}
@keyframes poppedUp {
0% {opacity: 0;}
20% {opacity: 1;}
80% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
40% {
transform: rotate(230deg);
}
50% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fadeOut {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
.content_form input[type="radio"] { position: absolute; width: 0; height: 0; opacity: 0; }
.content_form input[type="radio"] + label { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; margin-right: 1rem; cursor: pointer; }
.content_form input[type="radio"] + label::before {flex: 0 0 auto; content: ""; background-color: #f3f6f9; border-radius: 100%; border: 1px solid #e3e6e9; width: 16px; height: 16px; position: relative; margin-right: 0.25rem; transition: all 0.2s ease; }
.content_form input[type="radio"]{display: none;}
.content_form input[type="radio"] + label {display:flex; align-items: center; gap: .25rem; position: relative; cursor: pointer;}
.content_form input[type="radio"] + label::before{content:''; display:inline-block; top:1px; left:0; width:18px; height:18px; border:2px solid #d6d9df; border-radius:50%; vertical-align:middle;}
.content_form input[type="radio"] + label::after{content:none; display:inline-block; position:absolute; width:18px; height:18px; border-radius:50%; vertical-align:middle; background:#d6d9df; transform:scale(0); transform-origin:center; transition:.2s;}
.content_form input[type="radio"]:not(:disabled):hover + label::after{transform:scale(.5);}
.content_form input[type="radio"]:checked + label::before{border-color:#788395;}
.content_form input[type="radio"]:checked + label::after{transform:scale(.5); background-color:#788395;}
.content_form input[type="radio"]:disabled + label::before{border-color:#efefef; background:#efefef;}
.content_form input[type="radio"]:hover + label::before, .content_form input[type="radio"]:checked + label::before { border-color: #1971E3; background-color: #1971E3; -webkit-box-shadow: inset 0 0 0 3px #f3f6f9; box-shadow: inset 0 0 0 3px #f3f6f9; }
/* 모바일앱 유의사항 팝업 */
[aria-describedby="mobileApp"] {padding: 0}
[aria-describedby="mobileApp"] .ui-dialog-titlebar {padding: 1.5rem 2rem 0; font-weight: 600;}
[aria-describedby="mobileApp"] .ui-dialog-titlebar-close {right: 1.5rem; top: 1.5rem; margin: 0;}
#mobileApp.ui-dialog-content {padding-bottom: 2.5rem !important;}
.desc_layer.mobile_app {}
.desc_layer.mobile_app .agreement_area {padding: 1.5rem 2rem 0; margin-top: 1.5rem; border-top: 1px solid #eee;}
.desc_layer.mobile_app .red {color: #FF6363}
.desc_layer.mobile_app .blue {color: #1971E3; margin-right: 3px;}
.desc_layer.mobile_app ul {display: flex; flex-direction: column; gap: .5rem; padding: 0 2rem}
.desc_layer.mobile_app li a {color: #1971E3; text-decoration: underline; text-underline-offset: 3px;}
.desc_layer.mobile_app li a::after {content: ""; border: 1px solid #1971E3; border-left: 0; border-bottom: 0; transform: rotate(45deg); display: inline-block; width: 7px; height: 7px;}
.desc_layer.mobile_app .checkbox { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.desc_layer.mobile_app .checkbox input[type="checkbox"] { opacity: 0; position: absolute; width: 0; height: 0; }
.desc_layer.mobile_app .checkbox input[type="checkbox"] + label { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; padding: 0; -webkit-transition: 0.2s color; transition: 0.2s color; }
.desc_layer.mobile_app .checkbox input[type="checkbox"] + label::before { content: ""; border-radius: 50%; margin-right: 0.5rem; width: 24px; height: 24px; background-color: #eee; -webkit-transition: 0.2s; transition: 0.2s; }
.desc_layer.mobile_app .checkbox input[type="checkbox"] + label::after { content: ""; width: 12px; height: 7px; position: absolute; top: calc(50% - 2px); left: 6px; border: 2px solid white; border-top: none; border-right: none; background: transparent; opacity: 1; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); }
.desc_layer.mobile_app .checkbox input[type="checkbox"]:checked + label::before { background-color: #1971e3; border-color: #1971e3; }
.desc_layer.mobile_app .warning_txt {font-size: 14px; color: #FF6363; padding-top: 5px;}
.desc_layer.mobile_app .warning_line {border: 0}
.desc_layer.mobile_app .warning_line::before {border: 1px solid #FF6363}
[aria-describedby="mobileApp"] .ui-button-wrap button {background-color: #93A1B9; transition: background-color .25s;}
.mobileAppWarning {padding-bottom: 1.5rem !important;}
.mobileAppWarning ul {display: flex; flex-direction: column; padding: 1rem 0; margin: .75rem .75rem 3rem; background-color: #F2F5FA; border-radius: 5px;}
.mobileAppWarning li {padding: 0 2rem; font-size: 14px;}
.mobileAppWarning li::before {content: "·"}
.mobileAppWarning li.free {background-color: transparent !important; font-size: 16px; text-align: center;}
.mobileAppWarning li.free::before {content: none}
.mobileAppWarning p .title {font-size: 16px;}
/* 부가서비스 */
.cate_add{padding-bottom:0 !important;}
.cate_add .additional_info li{position:relative; text-align:left; background: #fff; transition:.2s; border-radius:min(2vw, 20px);}
.cate_add .additional_info li:hover{box-shadow: 2px 2px 20px 0px #93A1B94D;}
.cate_add .additional_info .info{display:flex; flex-direction: column; align-items: flex-start; height:100%;}
.cate_add .additional_info small{font-size:clamp(13px, 1.5vw, 15px); font-weight:500; color:#88929e; line-height: 1; margin-bottom:.7em;}
.cate_add .additional_info b{font-size:clamp(15px, 2.2vw, 22px); font-weight:700; color:#333; line-height:1; margin-bottom:.9em;}
.cate_add .additional_info i{display: inline-block; padding-left: .85em; padding-right: calc(.85em + 1px); border: 1px solid #0066FF; color:#0066FF; line-height:1.6em; border-radius: .9em; font-size:clamp(13px, 1.5vw, 15px); font-weight:700;}
.cate_add .additional_info i.pay{border-color: #F58800; color:#F58800;}
.cate_add .additional_info .images{position: absolute;}
.cate_add .additional_info .images img:not(:first-child){margin-left: -12px;}
.cate_add .additional_info li::before{position:absolute; top:-.8875em; left: min(2.6vw, 26px); z-index:1; padding-left:1em; padding-right:1em; padding-bottom: .1em; line-height:1.775em; font-size:clamp(11px, 1.6vw, 16px); font-weight:700; color:#fff; border-radius: 20px 20px 20px 0;}
.cate_add .additional_info .best::before{content:'가장 많이 사용하는 👍'; background:#FF58B2;}
.cate_add .additional_info .new::before{content:'이번에 새로 나온 ✨'; background:#FF820F;}
.cate_add .additional_info .hot::before{content:'최근에 가장 핫한 🔥'; background:#A762FF;}
.cate_add .additional_info .discount::before{content:'75% 할인 이벤트중!🎉'; background: #0F00E8;}
/* .cate_add .add_best .additional_info .discount {
border-radius: 0 20px 20px 20px;
}
.cate_add .add_best .additional_info .discount::before{
content: "75% 할인 이벤트중!🎉";
background-image: linear-gradient(90deg, #1265FF, #0F00E8);
left: 0;
top: -30px;
height: 30px;
line-height: 30px;
font-weight: 600;
padding: 0 1.25rem
} */
.cate_add .add_best{display:flex; justify-content: space-between; align-items: stretch; height: 620px; gap:min(25px, 2vw); margin-top:min(100px, 10vw); margin-bottom:min(120px, 12vw);}
.cate_add .best_sl{display: flex; flex-direction:column; align-items: stretch; gap:min(25px, 2vw); flex: 1; width: min(calc(50vw - min(25px, 2vw)), 575px); height:620px;}
.cate_add .best_sl .swiper-container{width:100%; overflow:visible;}
.cate_add .best_sl .sl{flex: 1; height: 100%;}
.cate_add .best_sl .best_list{display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; height:100%; gap: 20px;}
.cate_add .best_sl .best_list li{position:relative; flex:1; padding:23px 30px; }
.cate_add .best_sl .additional_info{display: flex; flex-direction:column;}
.cate_add .best_sl .additional_info .images{top:calc(50% - 31px);right:40px;}
.cate_add .best_sl .additional_info li{background:#F2F5FA; cursor: pointer;}
.cate_add .best_sl .additional_info li.on{background:#fff; box-shadow: 2px 2px 20px 0px #93A1B94D;}
.cate_add .best_sl .additional_info li.on{background:#fff; box-shadow: 2px 2px 20px 0px #93A1B94D;}
.cate_add .best_sl .additional_info .images{right:40px; top:calc(50% - 31px);}
.cate_add .card_sl{position:relative; width:min(620px, 62vw);}
.cate_add .sec_additional{padding-top:min(100px, 10vw); padding-bottom:min(120px, 12vw); background:#ECF3FF;}
.cate_add .sec_additional .page_tit{margin-bottom: 1em;}
.cate_add .sec_additional .tab{display: flex; gap:min(19px, 2vw);}
.cate_add .sec_additional .tab li{flex:1; padding-left: .5em; padding-right:.5em; line-height:2.5; font-size: clamp(12px, 1.6vw, 16px); font-weight:500; color:#88929E; text-align: center; white-space: nowrap; border: 1px solid #E4E4E4; border-radius: 1.25em; background:#fff; cursor:pointer;}
.cate_add .sec_additional .tab li.on{color:#fff; border-color:#0066FF; background:#0066FF;}
.cate_add .sec_additional .additional_info{display: flex; flex-wrap: wrap; gap: min(2.5vw, 25px); margin-top: min(48px, 4.8vw);}
.cate_add .sec_additional .additional_info li{display:none; width:calc(33.33% - min(1.677vw, 16.67px)); height:min(188px, 19vw); box-shadow: none !important;}
.cate_add .sec_additional .additional_info li[data-sub-idx="1"]{order:1;}
.cate_add .sec_additional .additional_info li[data-sub-idx="2"]{order:3;}
.cate_add .sec_additional .additional_info li[data-sub-idx="3"]{order:4;}
.cate_add .sec_additional .additional_info li[data-sub-idx="4"]{order:4;}
.cate_add .sec_additional .additional_info li[data-sub-idx="5"]{order:5;}
.cate_add .sec_additional .additional_info li[data-sub-idx="6"]{order:6;}
.cate_add .sec_additional .additional_info li[data-sub-idx="7"]{order:7;}
.cate_add .sec_additional .additional_info li[data-sub-idx="8"]{order:8;}
.cate_add .sec_additional .additional_info li.on{display: block;}
.cate_add .sec_additional .additional_info a{padding:min(4vw, 33px) min(2.6vw, 26px) min(2.6vw, 26px); position:relative; border-radius:min(2vw, 20px); transition:.2s;}
.cate_add .sec_additional .additional_info a:hover{box-shadow: 2px 2px 20px 0px #1971E359;
}
.cate_add .sec_additional .additional_info .images{right: min(2.6vw, 26px); bottom:min(2.6vw, 26px); height: min(62px, 8vw);}
.cate_add .sec_additional .additional_info .images img{width: auto; height: 100%;}
.cate_add .sec_additional .show_more{display: none;}
@media only screen and (max-width:1280px) {
.cate_add .card_sl{width: calc(50% - calc(min(25px, 2vw)/2));}
.cate_add .card_sl li{overflow:hidden; border-radius: min(20px, 2vw);}
.cate_add .card_sl img{position:relative; left:50%; transform:translateX(-50%);}
}
@media only screen and (max-width:1024px) {
.cate_add .card_sl{display:none;}
.cate_add .best_sl .additional_info li.on{background:#F2F5FA; box-shadow:none;}
.cate_add .sec_additional .tab{flex-wrap:wrap; margin-bottom: 25px;}
.cate_add .sec_additional .tab li{flex-basis:calc(25% - min(19px, 2vw)*3/3)}
}
@media only screen and (max-width:639px) {
.cate_add .additional_info i{line-height:1.5em; padding-bottom:.1em;}
.cate_add .add_best, .cate_add .best_sl{height: auto;}
.cate_add .best_sl{display: block;}
.cate_add .best_sl .best_list{width:100%;}
.cate_add .best_sl .additional_info li{padding-left: 20px; padding-right: 20px;}
.cate_add .best_sl .additional_info .images{right:20px;}
.cate_add .sec_additional .tab li{flex:none; width:calc((100% - 2vw*3)/3); padding-bottom: .1em; line-height: 2.4;}
.cate_add .sec_additional .additional_info{align-items: flex-end;}
.cate_add .sec_additional .additional_info li{width: calc(50% - calc(min(2.5vw, 25px)/2)); height: auto;}
.cate_add .sec_additional .additional_info li.new,
.cate_add .sec_additional .additional_info li.hot,
.cate_add .sec_additional .additional_info li.best{margin-top:.5em;}
.cate_add .sec_additional .additional_info:not(.show_all) li.on:nth-child(6 of .on) ~ li{display:none;}
.cate_add .sec_additional .show_more{display: block; padding-top:30px; text-align: center;}
.cate_add .sec_additional .show_more button {display: flex; align-items: center; gap: .5rem; margin:auto; color: #1971E3; font-size: clamp(15px, 2.5vw, 18px); }
.cate_add .sec_additional .show_more button::after {content: ""; background-image:url(/images/common/arr_txt_blue.svg); display: inline-block; width: 18px; height: 18px; transform: rotate(90deg);}
.cate_add .sec_additional .show_all + .show_more{display: none;}
}
/* Scrollbar */
::-webkit-scrollbar-track {
border-radius: 6px;
background-color: transparent;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #cdcfd3;
}
.quick-banner {opacity: 0; visibility: hidden; position: fixed; right: 1rem; bottom: 11rem; box-shadow: 0px 4.45px 16.7px 0px #0000001A; transition: opacity .25s; border-radius: 1rem
}
.quick-banner.is-active {opacity: 1; visibility: visible;}
.quick-banner i.close {position: absolute; top: -.75rem; right: 0; width: 16px; height: 16px; background-image: linear-gradient(black 0 0), linear-gradient(black 0 0); background-position: center; background-size: 100% 2px, 2px 100%; background-repeat: no-repeat; transform: translateY(-50%) rotate(45deg); cursor: pointer;}
.quick-banner button {font-size: 13px; color: #333;}
.quick-banner .banners {width: 168px; overflow: hidden; position: relative;}
.quick-banner .swiper-pagination {
bottom: .5rem;
display: flex;
justify-content: center;
}
.quick-banner footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem;
font-size: 13px;
line-height: 1;
background-color: white;
border-radius: 0 0 1rem 1rem
}
.quick-banner input {display: none;}
.quick-banner label {
display: flex;
align-items: center;
gap: .5rem;
cursor: pointer;
}
.quick-banner label::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15Z' fill='%23E8E8E8'/%3E%3Cpath d='M4.32324 7.44812L6.71887 10.1562L10.677 4.84375' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
width: 15px;
height: 15px;
display: block;
}
.quick-banner input:checked + label::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15Z' fill='%231971e3'/%3E%3Cpath d='M4.32324 7.44812L6.71887 10.1562L10.677 4.84375' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
width: 15px;
height: 15px;
display: block;
}
@media screen and (max-width: 640px) {
.quick-banner {
bottom: 10rem;
}
}
section > header {
display: flex;
flex-wrap: wrap;
}
section > header > form {
width: 100%
}
section > header .links {
display: flex;
justify-content: flex-end;
gap: .75rem;
margin-left: auto;
}
section > header .links a {
color: #1971E3;
text-decoration: underline;
text-underline-offset: 4px;
font-size: 16px;
}
/* #FRONTDEV-14 */
#skin_new {
position: absolute;
right: 10px;
width: 66px;
height: 66px;
z-index: 10;
animation: floating-motion 2s ease infinite !important;
}
.template_sl > .skin_slider {
overflow: visible !important;
}
@keyframes floating-motion {
0% {
transform: translate(50%, -45%);
}
50% {
transform: translate(50%, -55%);
}
100% {
transform: translate(50%, -45%);
}
}
.ico_n {
width: 18px;
height: 18px;
display: inline-block;
background-image: url("/images/main/ico_n.png");
background-repeat: no-repeat;
}
ul.gnb li span.new,
ul.sitemap li span.new {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
/* #FRONTDEV-14 */