@charset "utf-8";

/******************************************
Creation Date : 2024-06-18
Modify Date : 2024-06-20
*******************************************/

/*이사만루체 웹폰트 2406278*/
@font-face {
    font-family: 'EsaManru';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'EsaManru';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'EsaManru';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.ttf') format("truetype");
    font-display: swap;
}

.subbody { opacity: 0; } /*부드러운 등장위해 수정 240627*/

/* header */
#wrap{overflow:hidden; padding-top:72px;}
#layout_header{position:fixed; 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.slideup{transform: translateY(-101%)}
#layout_header .w_container{display:flex; justify-content: space-between; align-items:center; height:100%;}
#layout_header aside{display:flex; flex:1;}
#layout_header .aside_inner{display:flex; flex:1; margin-left: 36px;}
#layout_header .gnb{display: flex;}
#layout_header .gnb > li > a {padding: 0 .5rem; white-space: nowrap;}
#layout_header .bts .btn_start {background:#E8F0FF; color: #0066ff; padding: 0 2.5rem; font-weight: 700;}
#layout_header .bts .btn_start::after {content: "new"; width: 52px; height: 26px; border-radius: 100px 100px 0 100px; color: white; position: absolute; top: -.5rem; left: -1.5rem; display: flex; align-items: center; justify-content: center; letter-spacing: 0; font-size: 14px; transition: transform .25s;
    background: linear-gradient(-60deg, #1971E3, #29D7FD, #02F4BA, #1971E3, #29D7FD 90%); background-size:350% auto; animation: gradient 5s ease-in-out infinite;
}
#layout_header .logo img { width: 96px; }

@keyframes gradient { 0% {background-position: 0% 50%;} 100% {background-position: 100% 50%;}}

@media only screen and (min-width:1024px){
    #wrap{padding-top:72px;}
    #layout_header .gnb > li{display:inline-block; position:relative; font-size:1.33rem; font-weight:700;} /*수정 240624*/
    #layout_header .gnb > li + li{margin-left:.5em;}
    #layout_header .gnb > li > a{display:inline-block; height:64px; padding-left:.6em; line-height:64px;}
    #layout_header .gnb > li.has > a::after{content:''; display:inline-block; position:relative; top:-1px; width:10px; height:20px; margin-left:8px;vertical-align:middle; background:url(../images/common/arr_gnb.svg) center center no-repeat;}
    #layout_header .gnb > li.has > a.nolink{cursor:default; pointer-events: none;}
    #layout_header .gnb > li.new > a::after{margin-left: 1.4rem;}
    #layout_header .gnb > li.new > a span{position: relative;}
    #layout_header .gnb > li.new > a span::after{content: ''; display: inline-block; width: 14px; height: 14px; position: absolute; left: calc(100% + 2px); top: 5px; background: url(../images/common/ico_new.svg) center no-repeat;}

    #layout_header .lnb{opacity:0; position:absolute; top:100%; left:50%; min-width:150px; padding-top:8px; padding-bottom:8px; border-radius:4px; pointer-events:none; transform:translateX(-50%) translateY(-5px); transition:opacity .2s, transform .1s; background:#454c55;}
    #layout_header .gnb > li.has:hover .lnb{opacity:1; pointer-events:initial; transform:translateX(-50%) translateY(0);}
    #layout_header .lnb li{white-space:nowrap; }
    #layout_header .lnb li a{display:block; padding-left:1.5em; padding-right:1.5em; height:2.13em; font-size:1rem; font-weight:300; line-height:2.13; color:#fff;}
    #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{background:#676f7a;}
    #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; 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_login {margin-left: 1rem;}
    #layout_header .bts .btn_login[href="/member/logout"] {border: 0; font-size: 14px; padding: 0; vertical-align: baseline; border-left: 1px solid #ddd; margin-left: 0.5rem;border-radius: 0; height: 16px; line-height: 16px;}
    #layout_header .bts .btn_mypage::before{content:''; display:inline-block; position:absolute; left:calc(-.5em - 2px); 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:2em; border-radius:6px; }
    #layout_header .bts .btn_login {margin-left: 2rem; position: relative;}
    #layout_header .bts .btn_login::before{content:''; display:inline-block; position:absolute; left: -1rem; top:calc(50% - .53em); height:1.07em; border-left:1px solid #e4e4e4;}
    #layout_header .btn_aside{display:none;}
}

/* 상단메뉴 레이아웃 깨짐방지 */
@media screen and (max-width: 1280px) {
    #layout_header .gnb > li + li { margin-left: 0 }
    #layout_header .aside_inner {margin-left: 0;}
    #layout_header .gnb > li > a{padding-right:.3em;}
    #layout_header .gnb > li.new:first-of-type > a {padding-left: 0;}
    #layout_header .logo{transform:scale(.8); transform-origin:left center}
    #layout_header .gnb > li { font-size: 1rem }
    #layout_header .on .gnb > li > a {padding: 0}
    #layout_header .bts{display: flex; align-items: center;}
    #layout_header .bts .btn_login {padding: 0 .25rem}
    #layout_header .bts .btn_start {margin-left: .5rem; padding: 0 1rem}
    #layout_header .bts .btn_start::after {transform: scale(.8);}
    #layout_header .bts .btn_start::before {content: none}
    #layout_header .bts .btn_mypage::before {content: none}
    #layout_header .bts .personal{display: flex;}
    #layout_header .bts .personal .name {display:inline-flex; align-items: center}
    #layout_header .bts .personal .name b {max-width: 80px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle;}

}

@media only screen and (max-width:1023px) {
    #wrap{padding-top:55px;}
    #layout_header{height:55px;}
    #layout_header aside{display:none; overflow:auto; position:fixed; top:0; bottom:0; left:0; z-index:200; width:100vw; background:rgb(23 31 43 / 95%);}
    #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:140px 20px 0;}
    #layout_header .gnb > li > a{display:block; height:2em; border-bottom:1px solid #58616d; font-size:2.14rem; font-weight:700; color:#fff; line-height:2;}
    #layout_header .gnb > li.has > a::after{content:''; display:inline-block; position:relative; top:-3px; width:20px; height:20px; margin-left:5px; vertical-align:middle; background:url(../images/common/arr_gnb_mo.svg) center center no-repeat;}
    #layout_header .gnb > li.has > a.on::after{transform:rotate(180deg);}
    #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:'Noto Sans KR'; font-size:.92rem; color:#fff; line-height:24px; text-align:center; background:#1971e3; vertical-align:middle;}
    #layout_header .lnb{display:none; padding-top:1em; padding-bottom:1em;}
    #layout_header .lnb li + li{margin-top:.5em;}
    #layout_header .lnb li a{display:block; height:1.5em; font-size:1.29rem; line-height:1.5; color:#88929e;}
    #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{font-size:1.07rem; color:#929ba5;}
    #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; bottom:120px; left:50%; transform:translateX(-50%); min-width:192px; height:48px; 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 .btn_aside{display:block; z-index:201; width:26px; height:26px}
    #layout_header .btn_aside .line{display:block; width:100%; height:3px; background-color:#353535; margin:5px auto; border-radius:2px; transition:0.3s ease-in-out; transform-origin:55% 50%}
    #layout_header .btn_aside.opened .line{background:#fff !important;}
    #layout_header .btn_aside.opened .line:nth-child(1){-webkit-transform: translateY(5px) rotate(45deg);-o-transform: translateY(5px) rotate(45deg);transform:translateY(5px) rotate(45deg);}
    #layout_header .btn_aside.opened .line:nth-child(2){-webkit-transform: translateY(-5px) rotate(-45deg);-o-transform: translateY(-5px) rotate(-45deg);transform:translateY(-5px) rotate(-45deg);}

}

/* footer */
#layout_footer{padding-top:56px; padding-bottom:56px; background:#2f2f2f;}
#layout_footer .top{display:flex; justify-content:space-between; padding-bottom:2em; margin-bottom:2em; border-bottom:1px solid #434f5d; 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:#fff; 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:#b3bdcb; 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:#fff; line-height:16px; text-align:center; background:#f58800; vertical-align:middle;}
#layout_footer .top .sitemap .lnb li.new span::after{content:'N'; display:inline-block; width:14px; height:14px;; margin-left:6px; margin-top:-2px; font-weight:400; border-radius:9px; font-family:'Noto Sans KR'; font-size: 9px; color:#fff; line-height:14px; text-align:center; background:#1971e3; vertical-align:middle;}
#layout_footer .top .cs_info .cate{display:inline-block; margin-bottom:.6em; font-weight:700; color:#fff; white-space:nowrap;}
#layout_footer .top .cs_info .no{font-family:'Noto Sans KR'; letter-spacing:0;}
#layout_footer .top .cs_info .desc1{margin-bottom:.5em; font-size:1.46rem; font-weight:300; color:#fff;}
#layout_footer .top .cs_info .desc1 .no{margin-left:.1em; font-size:1.73rem;}
#layout_footer .top .cs_info .desc2{font-size:.93rem; color:#b3bdcb; }
#layout_footer .top .cs_info .desc2 .no{font-size:1rem; margin-left:.2em;}

/*sns*/
#layout_footer .sns{margin-top: 24px; display: flex; gap: 7px}
#layout_footer .sns li a {display: block; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.1); }
#layout_footer .sns li a img{display: block; width: 100%; height: auto; opacity: .5; transition: .2s;}
#layout_footer .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 #434f5d;}
#layout_footer .bottom .agree_info li a{height:2em; line-height:2; color:#b3bdcb;}
#layout_footer .bottom .agree_info .empasis{color:#6a9bdb;}
#layout_footer .company_info{overflow:hidden;}
#layout_footer .company_info li{display:inline-block; float:left; font-size:1rem; color:#b3bdcb; 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 rgba(255,255,255,0.2); }
#layout_footer .company_info li.break + li{clear:left;}
#layout_footer .company_info li.break::after{content:none;}
/*#layout_footer .company_info li.corp_name { font-size:16px; }*/

#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:205px; color: #fff; 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: #fff; text-align: left; background: rgba(255,255,255,0.1); }
#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);}
#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 rgba(255,255,255,.5); border-radius: 4px 4px 0 0; background: #444;}
#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:1023px) {
    #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:767px) {
	#layout_footer .bottom{flex-flow: column;}
    #layout_footer .bottom .right_box{justify-content: space-between; margin-top: 2em;}
	
	#layout_footer .bottom .family { width:100%; }
}


/* 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:110px auto 0 auto; padding:0 30px 20px;}
#layout_body .sec_head_comm .page_tit{position:relative; top:-.65em; font-size:2.75rem; line-height:1.25; font-weight:700; letter-spacing:-.06em; word-break: keep-all;}
#layout_body .sec_head_comm .page_tit em{color:#1971e3;}
#layout_body .sec_head_comm .page_desc{font-size:1.33rem; word-break: keep-all;}



#layout_body .sec_head_comm .btn_fill_blue{min-width:192px; margin-top:2em;}
#layout_body .page_tab{display:flex; position:relative; padding-top:20px;}
#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;}

#layout_body .tit_wrap_new1 { max-width:1320px; margin:6.67rem auto 0; padding: 0; } /*background:rgba(0,0,0,0.1);*/
#layout_body .tit_wrap_new1 h2 { font-size:2.75rem; }

#layout_body .tit_wrap_new2 h2 { font-size:2.75rem; }
#layout_body .sec_head_comm .page_desc { font-size: 1.33rem; word-break: keep-all; }

/*포트폴리오 - 타입1*/
#layout_body .tit_wrap_new2 { width:100%; margin:0rem auto 0; padding: 0;  background:#fff9f5; } /*margin:6.67rem auto 0;*/
#layout_body .tit_wrap_new2 .wrap { width:1320px;margin:0px auto 0px; padding: 90px 0 10px; }
#layout_body .tit_wrap_new2 .page_desc { font-size: 1.33rem; word-break: keep-all; }
#layout_body .tit_wrap_new2.type2 { background:#fbeae0; }


#layout_body .mv_wrap { background:#fff; padding:0; margin:0px 0 100px; position:relative; } /*수정 240624*/ /*아래로 내리기 전의 margin값 margin:50px 0 0;  240627*/
#layout_body .mv_wrap .w_container { background:#faf3f2; height:15.73rem; }
#layout_body .mv_wrap h3 { font-size:1.87rem; font-weight:300; position:absolute; top:50%; left:4.67rem; transform: translateY(-50%); }
#layout_body .mv_wrap h3 .italic_font { font-style:italic; }
#layout_body .mv_wrap .img_box { display:block; width:335px; height: 259px; background:url('../images/mv_wrap_img4.svg')no-repeat; position:absolute; bottom:0px; left:50%; transform:translateX(-50%); } /*rgba(0,0,0,0.1)*/

#layout_body .mv_wrap .customer_count { width:19rem; height:10.93rem; background:rgba(0,0,0,0.75); position:absolute; right:2.67rem; top:50%; transform:translateY(-50%); padding:1.73rem; color:#fff; text-align:right; border-radius:1.33rem; }
#layout_body .mv_wrap .customer_count dt { font-size:1.33rem; font-weight:600; }
#layout_body .mv_wrap .customer_count dd { font-size:2.8rem; font-weight:800; }
#layout_body .mv_wrap .customer_count p { font-size:1.07rem; font-weight:300; color:#adadad; }

/*메인비주얼 3타입*/
#layout_body .mv3 { background:#ebf3fe; padding:2.87rem 4.27rem; margin:6.67rem auto 0; width:1320px; height:17.33rem; position:relative; overflow:hidden; }
#layout_body .mv3 .bg_mov { position:absolute; left: 0; top: 50%; transform: translateY(-80%); opacity: 0.4; }

#layout_body .mv3 .con_wrap  { height:100%; position:relative; } /*background:rgba(0,0,0,0.03);*/
#layout_body .mv3 .con_wrap .left { display:inline-block; font-weight:400; position:absolute; left:0; top:0; z-index:2; }
#layout_body .mv3 .con_wrap .left h2 { font-family:'EsaManru'; font-size:3.2rem; font-weight:800; color:#fe676e; }
#layout_body .mv3 .con_wrap .left .sub_tiit {  font-family:'EsaManru'; font-size:1.73rem; color:#1651a7; font-weight: 300; }
#layout_body .mv3 .con_wrap .left .info_txt { font-size:1.2rem; color:#4f4f4f; margin-top: 1.87rem; }
#layout_body .mv3 .con_wrap .left .info_txt b {}
#layout_body .mv3 .con_wrap .left .info_txt b em { color:#fe676e; }

#layout_body .mv3 .con_wrap .right { position:absolute; right:0; top:50%; transform:translateY(-50%); } /*background:rgba(0,0,0,0.03);*/
#layout_body .mv3 .con_wrap .right .wrap 
#layout_body .mv3 .con_wrap .right .wrap .cupon_down { transition:all 0.4s; }
#layout_body .mv3 .con_wrap .right .wrap { position:relative; cursor: pointer; }
#layout_body .mv3 .con_wrap .right .wrap:hover .cupon_down { opacity:1; } /*display:flex;*/

#layout_body .mv3 .con_wrap .right ul {  }
#layout_body .mv3 .con_wrap .right ul li { font-size:1.47rem; font-weight:300; background:rgb(9 30 149 / 70%); color:#fff; margin-bottom:0.67rem; padding:0.67rem 1.33rem; text-align:left; border-radius:0.67rem; }
#layout_body .mv3 .con_wrap .right ul li:last-child { margin-bottom:unset; }
#layout_body .mv3 .con_wrap .right ul li .hint { color:#ffe500; }

#layout_body .mv3 .con_wrap .right .cupon_down { background:#fff; position:absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;border-radius: 9px; opacity:0; transition:all 0.4s; } /*display:none;*/
/*#layout_body .mv3 .con_wrap .right ul:hover .cupon_down { display:block !important; }*/

#layout_body .mv3 .con_wrap .right .cupon_down img { width:183px; height:100px; }
#layout_body .mv3 .con_wrap .right .cupon_down p { margin-top:10px; }
#layout_body .mv3 .con_wrap .right .cupon_down a img { transition:all 0.4s; border-radius:6px; }
#layout_body .mv3 .con_wrap .right .cupon_down a:hover img { box-shadow: 5px 5px 5px rgba(0,0,0,0.3); transform: translateY(-5px); }

#layout_body .mv3 .con_wrap .center { display: flex; flex-direction: column; justify-content: flex-end; width: 13.33rem; height: 260px; position: absolute; left: 50%; top: 50%; transform: translate(-10%, -50%); } /*background:rgba(0,0,0,0.03);*/
#layout_body .mv3 .con_wrap .center .first { width:13rem; margin-bottom: 2rem; animation-name: money_updown; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } /*background:rgba(0,0,0,0.03); */
#layout_body .mv3 .con_wrap .center .second { width:13.13rem; } /*background:rgba(0,0,0,0.03); */

@media(max-width:1400px){
	#layout_body .tit_wrap_new1 { padding-right:30px; padding-left:30px; }
	#layout_body .tit_wrap_new2 .wrap { width: 100%; padding: 70px 30px 10px; }
}

@media(max-width:1320px){
	/*메인비주얼 3버전*/
	#layout_body .mv3 { width: calc(100% - 0px); margin: 0 auto 0px; }
	#layout_body .mv3 .con_wrap .left h2 { font-size: 2.93rem; }
	#layout_body .mv3 .con_wrap .left .sub_tiit { font-size: 1.6rem; }
	#layout_body .mv3 .con_wrap .left .info_txt { font-size: 1.07rem; }
	#layout_body .mv3 .con_wrap .right ul li { font-size: 1.33rem; }
	#layout_body .tit_wrap_new2 .wrap { width: 100%; padding: 70px 60px 10px; }
}

@media(max-width:1280px){
	#layout_body .tit_wrap_new1 { padding-right:64px; padding-left:64px; margin-top:4.67rem; }
	#layout_body .tit_wrap_new1 h2 { font-size:2.4rem; }
	#layout_body .tit_wrap_new2 { padding-right:64px; padding-left:64px;  } /*margin-top:4.67rem;*/
	#layout_body .tit_wrap_new2 h2 { font-size:2.4rem; }
	#layout_body .tit_wrap_new2 .wrap { width: 100%; padding: 80px 0px 10px;}

	/*메인비주얼*/
	#layout_body .mv_wrap h3 { font-size:1.6rem; left: 4rem; }
	
	/*메인비주얼 3버전*/
	#layout_body .mv3 .bg_mov { transform: translateY(-50%); }
	#layout_body .mv3 .con_wrap .left h2 { font-size: 2.67rem; }
    #layout_body .mv3 .con_wrap .left .sub_tiit { font-size: 1.4rem; }
	#layout_body .mv3 .con_wrap .right ul li { font-size: 1.2rem; }
}

@media only screen and (max-width:1023px) {#layout_body{padding-bottom:80px;}
    #layout_body .sec_head_comm{margin-top:60px;padding:0 20px 40px;}
    #layout_body .sec_head_comm .page_tit{font-size:35px;}
	
	/*메인비주얼 3버전*/
	#layout_body .mv3 .con_wrap .left h2 { font-size: 2.27rem; }
	#layout_body .mv3 .con_wrap .left .sub_tiit { font-size: 1.2rem; }
    #layout_body .mv3 .con_wrap .right ul li { font-size: 1.25rem; }
}

@media(max-width:980px){
	/*메인비주얼 3버전*/
	#layout_body .mv3 { height: 36rem; }
	#layout_body .mv3 .bg_mov { transform: translateY(-50%) scale(1.5); }
	#layout_body .mv3 .con_wrap .left { position: unset; }
    #layout_body .mv3 .con_wrap .left h2 { font-size: 3.6rem; }
	#layout_body .mv3 .con_wrap .left .sub_tiit {font-size: 2rem; }
	#layout_body .mv3 .con_wrap .left .info_txt { font-size: 1.33rem; }
	#layout_body .mv3 .con_wrap .center { left: unset; right: 0%;  bottom: -41px; transform: unset; }
	#layout_body .mv3 .con_wrap .right { position: unset; transform: unset; margin-top: 30px; }
	#layout_body .tit_wrap_new2 .wrap { width: 100%; padding: 60px 0px 10px; }
	#layout_body .mv3 .con_wrap .right ul li { font-size: 1.38rem; }
}

@media(max-width:800px){
	#layout_body .mv_wrap .w_container { height: 35.73rem; }
	#layout_body .mv_wrap .customer_count { width: 90%; text-align: center; position:relative; top: 14.93rem; left: 50%; transform: translateX(-50%); }
	#layout_body .mv_wrap .customer_count:before { content:''; width: 373px; height: 259px; background: url(../images/mv_wrap_img1.png) no-repeat; position: absolute; bottom: 10.93rem; left: 50%; transform: translateX(-50%); }
	#layout_body .mv_wrap h3 { top: unset; bottom: 10%; text-align: center; left: 50%; transform: translate(-50%, 0%); width: 90%; }
	#layout_body .mv_wrap .img_box { display:none; }
	
	/*메인비주얼 3버전*/
	#layout_body .mv3 .bg_mov { transform: translateY(-50%) scale(1.7); }
}

@media only screen and (max-width:767px) {
	#layout_body{min-height:calc(100vh - 400px); padding-bottom:64px; overflow-x: hidden;}
    #layout_body .sec_head_comm{margin-top:45px;}
    #layout_body .sec_head_comm .page_tit{font-size:30px; z-index: 1;}
    #layout_body .page_tab .tab + .tab{margin-left:20px;}
	
	#layout_body .tit_wrap_new1 { padding-right:20px; padding-left:20px; }
	#layout_body .tit_wrap_new1 h2 { font-size: 2rem; }
	
	#layout_body .tit_wrap_new2 { padding-right:20px; padding-left:20px; }
	#layout_body .tit_wrap_new2 h2 { font-size: 2rem; }
	#layout_body .tit_wrap_new2 .wrap { width: 100%; padding: 40px 0px 10px; }
	
	/*메인비주얼 3버전*/
	#layout_body .mv3 { padding: 2.27rem 2.27rem; }
	#layout_body .mv3 .con_wrap .left h2 { font-size: 3.2rem; }
	#layout_body .mv3 .con_wrap .left .sub_tiit { font-size: 1.73rem; }
	#layout_body .mv3 .con_wrap .right ul li { font-size: 1.53rem; }
}

@media(max-width:600px){
	#layout_body .mv3 .bg_mov { transform: translateY(-50%) scale(2); }
	#layout_body .mv3 .con_wrap .left .sub_tiit {  font-size: 1.4rem;  }
	#layout_body .mv3 .con_wrap .left h2 { font-size: 2.67rem; }
	#layout_body .mv3 .con_wrap .right ul li { font-size: 1.4rem; }
}

@media only screen and (max-width:576px) {
	#layout_body .tit_wrap_new1 h2 { font-size: 1.87rem; }
	#layout_body .mv3 .bg_mov { transform: translateY(-50%) scale(3); z-index:0; }
	#layout_body .mv3 .con_wrap .left h2 { font-size: 2.67em;  line-height: 3rem; }
	/*#layout_body .mv3 .con_wrap .left .info_txt { font-size: 1.33rem; }*/
	#layout_body .mv3 .con_wrap .right ul li { font-size: 1.2rem; }
	#layout_body .mv3 .con_wrap .left .info_txt { font-size: 1.2rem;  }
	
}
@media(max-width:540px){
	/*#layout_body .mv3 .con_wrap .center { display:none; }*/
}

@media(max-width:480px){
	#layout_body .mv3 .con_wrap .right { position:absolute; width: 100%; z-index: 4; }
	/*#layout_body .mv3 .con_wrap .right ul li { font-size: 1.13rem; }*/
}

@media(max-width:360px){
	#layout_body .mv3 {  } /*background: unset;z-index: 2;*/
	#layout_body .mv3 .con_wrap .right {   }
	#layout_body .mv3 .con_wrap .center {  } /*z-index: -1;*/
}

/* padding  64px 관련 */
@media screen and (max-width: 1280px) {
	.w_container {padding-left: 64px; padding-right: 64px}
    #layout_body .sec_head_comm {padding: 0 64px}
    #layout_body .sec_head_comm > .w_container {padding: 0;}
}
@media only screen and (max-width: 767px) {
	.w_container {padding-left: 20px; padding-right: 20px}
    #layout_body .sec_head_comm {padding: 0 20px 20px}
}

/* 공통 스타일 */
.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%; width:350px; } 

.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: 22px; padding-right:22px; 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:'Noto Sans KR'; 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;}

.italic_font { font-style:italic; }

@media only screen and (max-width:767px) {
    .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;}
.cate_main .sec_event .w_container{overflow: hidden; position: relative; height: 730px;}

/* 메인 슬라이더 공통 */
.main_slider { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.main_slider .wrapper { width: calc(100% - 440px); margin: 0 auto; height: 560px; position: relative; display: flex; padding-top: 101px }
.main_slider .texts { padding-bottom: 10%; z-index: 10; }
.main_slider .dark { color: white; }
.main_slider .dark .btn {color: white !important; border-color: white !important}
.main_slider .images {position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 560px;}
.main_slider .images img:last-of-type {display: none;}
.main_slider .text_main { font-size: clamp(30px, 48px, 6vw); font-family: "Noto Sans KR"; font-weight: bold; line-height: 1.25; position: relative;}
.main_slider .text_main span {display: block;}
.main_slider .text_paragraph { font-weight: 300; font-size: clamp(16px, 3vw, 24px); margin-top: 2rem; }
.main_slider .swiper-pagination-fraction { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 32px; padding: 0 1.5rem; bottom: 101px; left: 16.2rem; background-color: rgba(255, 255, 255, 0.2); border-radius: 80px; color: white; font: 300 20px/1 "Noto Sans KR"; transition: background-color 1s }
.main_slider .swiper-pagination-fraction.light-ver { background-color: rgba(0, 0, 0, 0.2); }
.main_slider .swiper-nav.light-ver button { border-color: black; }
.main_slider .swiper-nav button { opacity: 0.4; position: absolute; bottom: 110px; width: 13px; height: 13px; border: 3px solid white; border-left: none; border-bottom: none; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: opacity 0.4s, border-color 2s; transition: opacity 0.4s, border-color 2s; z-index: 50; }
.main_slider .swiper-nav button:hover { opacity: 1; }
.main_slider .swiper-nav button:first-of-type { left: 15rem; -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.main_slider .swiper-nav button:last-of-type { left: 23rem; }
.cate_main .sec_event .swiper-slide .deco.small {display: none;}

@media screen and (max-width: 1280px) {
	.main_slider .wrapper { width: 100%; padding: 0 64px; overflow: hidden; }
    #layout_header {padding: 0 64px !important}
    .main_slider .swiper-pagination-fraction { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 2rem; }
    .main_slider .swiper-nav button { bottom: 2.65rem; }
    .main_slider .swiper-nav button:first-of-type { left: calc(50% - 72px); }
    .main_slider .swiper-nav button:last-of-type { left: calc(50% + 60px); }
    .main_slider .wrapper {height: 540px; padding: 5rem 64px}
}

@media screen and (max-width: 1023px) {
    #layout_header {justify-content: space-between;}
}

@media screen and (max-width: 960px) {
    .main_slider .wrapper { max-height: 600px; }
}

@media only screen and (max-width:767px) {
    #layout_header {padding: 0 20px !important}
    .main_slider .wrapper {padding-left: 20px; padding-right: 20px}
    .main_slider .images img:first-of-type {display: none;}
    .main_slider .images img:last-of-type {display: block; width: 100%;}
}

@media only screen and (max-width:640px) {
	.main_slider .wrapper { padding: 0; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-height: none}
    .main_slider .wrapper img { max-width: 100% }
    .cate_main .sec_event .event_list li .deco.large {display: none;}
    .cate_main .sec_event .event_list li .deco.small {display: block; width: 100%; left: 0; top: auto; bottom: 0; transform: translate(0)}
    .cate_main .sec_event .btn {font-size: 3.5vw}
    .cate_main .sec_event .swiper-nav {display: none}
    .cate_main .sec_event .swiper-pagination-fraction { bottom: 1rem; left: auto; right: .5rem; transform: scale(0.75)}
    .main_slider .texts { position: absolute; padding-bottom: 0; top: 10%; left: 5%; width: 90%; word-break: keep-all; }
    .main_slider .text_paragraph {margin-top: .5rem; white-space: initial !important; word-break: keep-all;}
}

/* 이벤트 */
.cate_main .sec_event .cont{display: flex; flex-flow: column; align-items: flex-start; position: relative; z-index: 1; padding-top: 120px;}
.cate_main .sec_event .cont .txt{max-width: 100%;}
.cate_main .sec_event .cont .txt1{font-size: 48px; font-weight: 700; line-height: 1.3; color: inherit;}
.cate_main .sec_event .cont .txt2{font-size: 18px; margin-top: .5em; color: inherit;}
.cate_main .sec_event .btn{display:inline-block; margin-top: 40px; border-radius: 6px; border:1px solid #333; padding:.75em 3em; font-size: 16px; font-weight:500; color:#333;}
.cate_main .sec_event .deco{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0}

.cate_main [class^='btn_fill']{width:12.8em; transition:.2s;}
.cate_main [class^='btn_txt']{font-size:1.33em;}
.cate_main [class^='btn_txt']:hover{text-decoration:underline;}
.cate_main [class^='btn_txt']::after{top:calc(50% - 9px); width:20px; height:20px;}
.cate_main .sec_tit{font-size:2.93rem; line-height:1.4; font-weight:700; text-align:center; letter-spacing:-.05em; color:#333;}
.cate_main .sec_tit.gradient em{background: linear-gradient(to right, #1972e3, #30e2ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.cate_main .sec_desc{padding-top:1em; font-size:1.33rem; color:#666; text-align:center; letter-spacing:-.05em}
.cate_main .sec_visual{position:relative; height:calc(100vh + 100px);}
.cate_main .sec_visual .txt_box{position:absolute; top:0; left:0; z-index:2; width:100%; padding-top:72px;}
.cate_main .sec_visual .txt_box .slogan{font-size:3.73rem; font-weight:700; letter-spacing:-.05em; line-height:1.3; color:#fff;}
.cate_main .sec_visual .txt_box .desc{margin-top:1.2em; font-size:1.6rem; letter-spacing:-.05em; line-height:1.67; color:#fff;}
.cate_main .sec_visual .txt_box .btn{display:inline-block; width:12em; height:3.2em; margin-top:1.6em; font-size:1.33rem; line-height:3.2; color:#fff; border:1px solid #fff; border-radius:6px; font-weight:300; text-align:center}
.cate_main .sec_visual .blank{position:absolute; top:0; left:0; z-index:1; height:270px; width:100%; background:#fff;}
.cate_main .sec_visual .visual{overflow:hidden; position:relative; height:100%}
.cate_main .sec_visual .visual::after{content:''; display:inline-block; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.2);}
.cate_main .sec_visual .visual video{position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%, -50%); }
.cate_main .sec_visual .visual .box img{display:inline-block; position:absolute; top:50%; left:50%; width:100%; height:auto; transform:translate(-50%, -50%);}
.cate_main .sec_boards {padding: 4rem 0; border-bottom: 1px solid #ddd}
.cate_main .sec_boards .w_container {max-width: calc(100% - 380px); display: flex; flex-wrap: wrap; gap: 5rem}
.cate_main .sec_boards .board {flex: 1 1 auto; width: 250px; border-radius: 2rem; background-color: white}
.cate_main .sec_boards .board header {display: flex; justify-content: space-between; border-bottom: 2px solid #333; padding-bottom: .5rem; margin-bottom: .5rem}
.cate_main .sec_boards .board header h5 {font-size: clamp(20px, 4vw, 24px); font-weight: 500;}
.cate_main .sec_boards .board header button {display: flex; align-items: center; font-size: 15px; color: #888}
.cate_main .sec_boards .board header button::after {content: ""; border: 2px solid #737679; border-left: 0; border-bottom: 0; transform: rotate(45deg); display: inline-block; width: 6px; height: 6px; margin-left: 3px; margin-top: 3px}
.cate_main .sec_boards .board .list {display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1rem}
.cate_main .sec_boards .board .list a {display: flex; justify-content: space-between; gap: 1rem}
.cate_main .sec_boards .board .list a span:first-of-type {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cate_main .sec_boards .board .list a span:first-of-type:hover {text-decoration: underline;}
.cate_main .sec_boards .board .list a .date {color: #888}
.cate_main .sec_feature{padding-top:120px; padding-bottom:120px;}
.cate_main .sec_feature .btn_mobile{display:none;}
.cate_main .sec_feature .cont{overflow:hidden; margin-top:56px; border-radius:20px; box-shadow:0 10px 30px 10px rgba(0,0,0,.1)}
.cate_main .sec_feature .cont video{display:block; max-width:100%; height:auto;}
.cate_main .sec_feature .video_wrapper { position: relative; padding-bottom: 56.25%; height: 0}
.cate_main .sec_feature .video_wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

.cate_main .sec_template{background: #F2F5FA; background-size: contain; height: 760px; padding: 120px 0 0; overflow:hidden; text-align:center}
.cate_main .sec_template img {padding-top: 2rem}
.cate_main .sec_template .sec_desc{margin-bottom:33px; color:#666;}
.cate_main .sec_template .btn_fill{margin-top:2.2em;}
.cate_main .sec_template .btn_txt {color: #1971E3}
.cate_main .sec_template .btn_txt::after {width: 8px; height: 8px; background-image: none; border: 2px solid #1971e3; border-left: none; border-bottom: none; transform: rotate(45deg); margin-left: .25rem; top: 43% }
.cate_main .sec_template .template_sl{position:relative; margin-top:56px;}
.cate_main .sec_template .template_sl .swiper-pagination-bullets {bottom: -3rem}
.cate_main .sec_template .template_sl .swiper-pagination-bullet {background-color: white;}

.cate_main .sec_template .template_list li{width:406px; padding-left:18px; padding-right:18px; opacity:.15; transition:1s;}
.cate_main .sec_template .template_list li.new{position: relative;}
.cate_main .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; }
.cate_main .sec_template .template_list .box{overflow:hidden; position:relative; z-index:3; border-radius:20px;}
.cate_main .sec_template .template_list .box::after{content:''; display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(255,255,255,.8); opacity:.1; transition:.2s;}
.cate_main .sec_template .template_list .box img{width:100%; height:auto;}
.cate_main .sec_template .template_list .box .bts{position:absolute; top:50%; left:50%; z-index:2; transform:translate(-50%, -50%); opacity:0; transition:.2s;}
.cate_main .sec_template .template_list .box .btn_fill_white{font-weight:700;}
.cate_main .sec_template .template_list .box .btn_fill_white::after{content:none;}
.cate_main .sec_template .template_list .box .btn_go{display:inline-block; margin-top:1.5em; border-bottom:1px solid #303c4b; color:#303c4b; font-weight:700; }
.cate_main .sec_template .template_list .highlight{opacity:1;}
[data-touch="false"] .cate_main .sec_template .template_list .highlight .box:hover::after,
[data-touch="false"] .cate_main .sec_template .template_list .highlight .box:hover .bts{opacity:1;}
[data-touch="true"] .cate_main .sec_template .template_list .highlight .box.on::after,
[data-touch="true"] .cate_main .sec_template .template_list .highlight .box.on .bts{opacity:1;}
.cate_main .sec_template .template_list .desc{margin-top:1em; text-align:center; line-height:1.2;}
.cate_main .sec_template .template_list .desc .subject{position:relative; font-size:1.2rem; color:#fff;}
.cate_main .sec_template .swiper-container{overflow:visible;}
.cate_main .sec_template .swiper-nav button{display:inline-block; position:absolute; top:calc((100% - 43px) / 2 - 2.13rem); z-index:50; width:64px; height:64px; border-radius:50%; background:url(../images/main/nav_template.svg) no-repeat; background-size:contain; opacity:.8; transition:opacity .3s;}
.cate_main .sec_template .swiper-nav button.btn_prev{right:calc(50% + 690px);transform:rotate(180deg);}
.cate_main .sec_template .swiper-nav button.btn_next{left:calc(50% + 690px); }
.cate_main .sec_template .swiper-nav button:not(:disabled):hover{opacity:1; background-color:rgba(0,0,0,.2);}
.cate_main .sec_template .swiper-nav button:disabled{opacity:0; cursor:default;}
.cate_main .sec_preview{padding-top:120px; padding-bottom:120px;}
.cate_main .sec_preview .w_container{display:flex; justify-content:space-between;}
.cate_main .sec_preview .box{width:calc(50% - 12px); padding:64px 56px; border-radius:20px; transition:.2s;}
.cate_main .sec_preview .box.gray{background:#8e9eb9;}
.cate_main .sec_preview .box.blue{background:#1971e3;}
.cate_main .sec_preview .box .img{overflow:hidden; width:100%; max-width:486px; height:auto; margin:0 auto; border-radius:20px;}
.cate_main .sec_preview .box .img img{display:block; width:100%;}
.cate_main .sec_preview .box .tit{padding-top:1.15em; font-size:2.93rem; line-height:1.36; color:#fff; font-weight:700;}
.cate_main .sec_preview .box .desc{padding-top:1em; font-size:1.33rem; line-height:1.6; font-weight:300; color:#fff; opacity:.6;}
.cate_main .sec_preview .box .btn_fill_black{background:rgba(255,255,255,.3)}
.cate_main .sec_preview .box .btn_fill_black:hover{color:#fff;}
.cate_main .sec_preview .box .btn_fill_black:hover::after{background-image:url(../images/main/ico_arr_white.svg);}
.cate_main .sec_function{border-top:1px solid #eee;}
.cate_main .sec_function .list li::before{content:''; display:inline-block; width:80px; height:80px; background:url(../images/main/ico_func_responsive.png) center center no-repeat; background-size:contain; margin-bottom:.5em;}
.cate_main .sec_function .list li.responsive::before{background-image:url(../images/main/ico_func_responsive.png)}
.cate_main .sec_function .list li.template::before{background-image:url(../images/main/ico_func_template.png)}
.cate_main .sec_function .list li.editor::before{background-image:url(../images/main/ico_func_editor.png)}
.cate_main .sec_function .list li.powerful::before{background-image:url(../images/main/ico_func_powerful.png)}
.cate_main .sec_function .list li.ssl::before{background-image:url(../images/main/ico_func_ssl.png)}
.cate_main .sec_function .list li.seo::before{background-image:url(../images/main/ico_func_seo.png)}
.cate_main .sec_function .list li.easy::before{background-image:url(../images/main/ico_func_easy.png)}
.cate_main .sec_function .list li.payment::before{background-image:url(../images/main/ico_func_payment.png)}
.cate_main .sec_function .list li.convenience::before{background-image:url(../images/main/ico_func_convenience.png)}
.cate_main .sec_case{padding-top: 120px; padding-bottom: 120px; background: #f2f5fa;}
.cate_main .sec_case .case_list{display: flex; justify-content: space-between; margin-top: 60px;}
.cate_main .sec_case .case_list li{border: 1px solid #e3e7ee; width: 33.333%}
.cate_main .sec_case .case_list li + li{margin-left: 25px;}
.cate_main .sec_case .case_list li img{width: 100%; height: auto;}

.sec_start_comm{padding-top:96px !important; padding-bottom:96px; background:url(../images/common/bg_gra_left.png) 100% top no-repeat, url(../images/common/bg_gra_right.png) 0% 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 { height: 4rem; font-size: 1.71rem; line-height: 4rem; font-weight:500; border-radius: 3.13rem; position: relative; width: 340px; } /*width:240px; */ /*수정 240624*/
.sec_start_comm .btn_fill_blue .icon { margin-right:0.36rem; background: white; color: #fe676e; padding:0.44rem; border-radius:50%; display:inline-block; width:30px; height:30px; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); } /*수정 240624*/

/*대표전화 걸기 버튼*/
.call_btn_mo { display: flex; justify-content: center; margin: 3.13rem 0 0; display:none; } /*background:rgba(0,0,0,0.03); */
.call_btn_mo a { display: inline-block; height: 4rem; font-size: 1.57rem; line-height: 4rem; font-weight: 500; border-radius: 3.13rem; background: #fe676e; padding-left: 1em; padding-right: 1em; color:#fff; }
.call_btn_mo a .icon { margin-right: 0.36rem; background: white; color: #fe676e; padding: 0.44rem; border-radius: 50%; }

@media only screen and (max-width:1600px) {
    .cate_main .sec_boards .w_container {max-width: none; padding: 0 80px}
}

@media only screen and (max-width:1280px) {
    .cate_main .sec_boards .w_container {max-width: none; padding: 0 64px}
}

@media only screen and (max-width:1023px) {
	.cate_main .sec_feature .btn_mobile{display:block; text-align:center; padding-top:33px;}
	
	/*대표전화 통화 버튼*/
	.call_btn_mo { display:flex; }
	.call_btn_mo a {  height: 3.57rem; line-height: 3.57rem; font-size: 1.43rem; }
	
}
@media only screen and (max-width:767px) {
    .cate_main .sec_boards .w_container {max-width: none; padding: 0 20px}
    .cate_main .sec_feature .sec_tit span {display: block;}
	.cate_main .sec_feature .cont {border-radius: 5px;}
    .cate_main .sec_event .w_container{height: 550px;}
    .cate_main .sec_event .cont{padding-top: 50px; padding-bottom: 200px;}
    .cate_main .sec_event .cont .txt1{font-size: 35px;}
    .cate_main .sec_event .cont .txt2{font-size: 15px;}
    .cate_main .sec_event .btn{margin-top: 1.25rem;}
    .cate_main .sec_event .event_sl .swiper-nav button.btn_prev{left: auto; right: calc(50% + 4rem);}
    .cate_main .sec_event .event_sl .swiper-nav button.btn_next{left: calc(50% + 4rem);}
    .cate_main .sec_tit{font-size:7.84vw}
    .cate_main .sec_desc{font-size:1.14rem;}
    .cate_main .sec_visual{height:calc(100vh + 100px);}
    .cate_main .sec_visual .txt_box{padding-top:86px;}
    .cate_main .sec_visual .txt_box .slogan{font-size:2.57rem; line-height:1.4;}
    .cate_main .sec_visual .txt_box .desc{font-size:1.07rem;}
    .cate_main .sec_visual .txt_box .btn_fill{margin-top:32px;}
    .cate_main .sec_visual .blank{height:215px;}
    .cate_main .sec_visual .visual .box img{transform:translate(-50%, -50%) scale(2.5);}
    .cate_main .sec_feature,
    .cate_main .sec_preview,
    .sec_start_comm{padding-top:64px !important; padding-bottom:64px;}
    .cate_main .sec_feature .sec_tit.gradient,
    .cate_main .sec_template .sec_tit.gradient{background: linear-gradient(to right, #1972e3, #30e2ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
    .cate_main .sec_template .sec_tit.gradient em{background:none;}
    .cate_main .sec_template {height: auto; padding-top: 64px}
    .cate_main .sec_template img {width: 300%}
    .cate_main .sec_template .template_list .box .btn_fill_gray{width:9em;}
    .cate_main .sec_template .swiper-nav button{display:none}
    .cate_main .sec_preview .w_container{display:block;}
    .cate_main .sec_preview .box{width:100%; padding: 2rem}
    .cate_main .sec_preview .box + .box{margin-top:32px;}
    .cate_main .sec_preview .box .tit{font-size:7.84vw;}
    .cate_main .sec_preview .box .desc{font-size:1.14rem;}
    .cate_main .sec_function .list li{padding-left:110px; padding-right:10px; min-height:80px; text-align:left; }
    .cate_main .sec_function .list li::before{position:absolute; top:50%; left:10px; transform:translateY(-50%);}
    .cate_main .sec_case{padding-top: 60px; padding-bottom: 60px;}
    .cate_main .sec_case .case_list{flex-flow: column; align-items: center; margin-top: 33px;}
    .cate_main .sec_case .case_list li{width: auto; max-width: 80vw;}
    .cate_main .sec_case .case_list li + li{margin-left: 0; margin-top: 20px;}
    .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;}
}

@media(max-width:640px){
    .cate_template.custom section { padding-top: 4px; }
}

@media(max-width:400px){
	/*대표전화 통화 버튼*/
	.call_btn_mo { display: flex; }
	.call_btn_mo a { width: calc(100% - 40px); display: flex; justify-content: center; align-items: center; }
}

/* tamplate*/
.cate_skins {background: white;}
.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: black}
.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 {background-color: #1C7AF3; color: #A3C9FC; box-shadow: 0 3px 15px 3px rgba(0, 0, 0, .1);}
.cate_skins .sec_choose_type [class*="type"]:hover .features li .impact {color: white;}
.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 2rem; box-shadow: 0 3px 15px 3px rgba(143, 151, 159, .2); position: relative;}
.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 .list-emoji:nth-of-type(1) {padding-right: 6rem}
.cate_skins .type_homepage .list-emoji:nth-of-type(1) img {right: 1.75rem; top: 35%}
.cate_skins .type_homepage .list-emoji:nth-of-type(3) {padding-left: 6.25rem}
.cate_skins .type_homepage .list-emoji:nth-of-type(3) img {left: 1.5rem}
.cate_skins .type_shoppingmall .list-emoji:nth-of-type(1) {padding-right: 5rem}
.cate_skins .type_shoppingmall .list-emoji:nth-of-type(1) img {right: 1.5rem; top: 15%}
.cate_skins .type_shoppingmall .list-emoji:nth-of-type(2) {padding-left: 6rem}
.cate_skins .type_shoppingmall .list-emoji:nth-of-type(2) img {left: 0.75rem; margin-top: -3px;}

.cate_template{background:#f2f5fa;}
.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:'Noto Sans KR'; 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:calc((100% - 120px) / 4); margin-bottom:80px; margin-right:40px; } /*padding-left:18px;*/
.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 li:nth-child(4n) { margin-right: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{display:block; 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 .sec_template.w_container2  .template_list ul { width:1320px; }
.cate_template .sec_template.w_container2  .template_list { display: flex; max-width: 1320px; margin: 0 auto; }
.cate_template.custom .sec_template.w_container2 { padding-top: 40px; padding-bottom: 30px; } /*margin-top: 30px; */

.cate_template.skins .page_tit {width: fit-content; 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;}

@media(max-width:1280px){
	.cate_template.custom .sec_template.w_container2 { padding-bottom: 30px; }
	.cate_template .sec_template .template_list .box { border-radius: 10px; }
}
@media(max-width:980px){
	.cate_template.custom .sec_template.w_container2 { padding-top: 30px; }
}

@media(max-width:767px){
	.cate_template.custom .sec_template.w_container2 { padding-bottom: 20px; }
}


/*포트포리오*/
.portfolio { background:#fff9f5; }
.portfolio.type2 { background:#fbeae0; }



/* 디자인제작 */
.cate_template.custom{padding-bottom: 0 !important; background: none;}
.cate_template.custom .sec_head_comm {height: 440px; position: relative;max-width: 100% !important;}
.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:8rem; padding-bottom:8rem; }
.cate_template.custom .inquery_new1 .sec_board_write { padding-top:70px; }

.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: #fff; } /*수정 240624*/

.cate_template.custom .sec_price .list {display: flex; gap:1.3rem; flex-wrap: wrap; } /*margin-top:5em;*/ /*수정 240624*/
.cate_template.custom .sec_price .list li { flex:1; display:flex; flex-direction: column; align-items: center;  position:relative; text-align: center; background:#fff; width: calc((100% - 20px) / 4); transition:all 0.4s; } /*gap:1em; max-width: 300px;*/ /*box-shadow: 0px 0px 8px 0px 0px 8px rgba(0,0,0,0.1); 수정 240624*/
.cate_template.custom .sec_price .list li .img_box { width:100%; height:251px; overflow:hidden; position:relative; }
.cate_template.custom .sec_price .list li:hover { box-shadow: 10px 10px 10px rgba(0,0,0,0.1); transform: translateY(-5px); }



/*.cate_template.custom .sec_price .list li .img_box:before { content:''; display:inline-block; width:100%; height:251px; position:absolute; top:0px; left:0px; background:rgba(0,0,0,0.7); opacity:0;  transition:all 0.4s; }*/

.cate_template.custom .sec_price .list li .hover_ui  { background:rgba(0,0,0,0.7); position:absolute; width:100%; height:251px; display:flex; justify-content: center; align-items: center; opacity:0; transition:all 0.4s; } /*display:none; 부드러운 등장 안되서 opacity로 변경*/
.cate_template.custom .sec_price .list li .hover_ui a { display:block; width:70px; height:70px; border-radius:10px; background:#fff; display:flex; align-items: center; justify-content: center; flex-direction: column-reverse; transition:all 0.4s; }
.cate_template.custom .sec_price .list li .hover_ui a i { font-size:32px; } 

.cate_template.custom .sec_price .list li .hover_ui a:hover { background: #fe676e; color:#fff; transition:all 0.4s; }

.cate_template.custom .sec_price .list li:hover .hover_ui { opacity:1; } /*transition:all 0.4s;*/ /* display:flex;*/

.cate_template.custom .sec_price .list li:nth-child(1) .img_box { background: linear-gradient(135deg,  #fff6d6 0%,#ffbacc 100%); }
.cate_template.custom .sec_price .list li:nth-child(2) .img_box { background: linear-gradient(135deg,  #ffd78a 1%,#ff6384 100%); }
.cate_template.custom .sec_price .list li:nth-child(3) .img_box { background: linear-gradient(135deg,  #015196 0%,#00a0a0 100%); }
.cate_template.custom .sec_price .list li:nth-child(4) .img_box { background: linear-gradient(135deg,  #0086ff 0%,#9859ff 100%); }

/*.cate_template.custom .sec_price .list li:hover .img_box:before { opacity:1;  }*/
/*.link_btn { position:absolute; display:inline-block; width:30px; height:30px; background:red; }*/


/*홈페이지 상품에 추가되는 효과 240626*/
.cate_template.custom .sec_price .list li .con_box { padding: 1.33rem 2rem 2.4rem; width: 100%; border: 1px solid #ccc; border-top: 0; } /*수정 240624*/
.cate_template.custom .sec_price .list li .con_box .regular_price { font-size: 1.6rem; text-decoration: line-through; color: #317ea3; font-weight: 500; } /*수정 240626*/
.cate_template.custom .sec_price .list li .con_box .discount_rate { background:#fe676e; padding:0.33rem; color:#fff; border-radius:0.33rem; margin-left: 0.13rem; font-size: 1.33rem; font-weight: 600; } /*수정 240626*/
.cate_template.custom .sec_price .list li .con_box .discount_rate i { font-weight: 700; animation-name: icon_updown; animation-duration: 0.8s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } /*margin-left: -5px;*/ /*수정 240626*/

@keyframes icon_updown {
        from {transform:translateY(0);}
        to {transform:translateY(-5px);}
}
@keyframes money_updown {
        from {transform:translateY(0);}
        to {transform:translateY(-20px);}
}


.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:2.0666rem; font-weight:700; color:#555; display: block; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.cate_template.custom .sec_price .list .desc {font-size:1.066rem; color:#717171; } /*margin-bottom: 12px; 15px;*/
.cate_template.custom .sec_price .list .desc2 span { font-size:1.313rem; color:#717171;  } /*margin-bottom: 12px; 15px;*/
.cate_template.custom .sec_price .list .detail{display:flex; flex-wrap:wrap; gap:.3em 0; padding-top:1em; padding-bottom:.7em; font-size: 1.066rem;} /*border-top:1px solid #E1E1E1; border-bottom:1px solid #E1E1E1; min-height:8.5em;*/
.cate_template.custom .sec_price .list dt{flex-basis: 50%; 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: 50%; font-size:inherit; color:#000; text-align:right;}

.cate_template.custom .sec_price .list li .list_type { text-align:left; margin:16px 0 22px; }
.cate_template.custom .sec_price .list li .list_type p { position:relative; font-size: 1.063rem; font-weight: 500; padding-left:15px; line-height: 26px; color: #555; display:flex; align-items: center; }
.cate_template.custom .sec_price .list li .list_type p img { width:15px; height:10px; margin-right: 5px; } /*수정 240624*/
/*.cate_template.custom .sec_price .list li .list_type p:before { content:''; display:inline-block; width:15px; height:10px; position:absolute; top:7px; left:0px; background: url('../images/bullet_check.svg')no-repeat; }*/ /*수정 240624*/

.cate_template.custom .sec_price .list .date_info { background:#fff; border: 1px solid #c1c1c1; padding:7px 10px; border-radius:5px; margin:15px 0 0;  }
.cate_template.custom .sec_price .list .date_info .name_txt { padding-left: 19px; position:relative; font-size: 1.063rem; }
.cate_template.custom .sec_price .list .date_info .name_txt:before { content:''; width:19px; height:19px; position:absolute; top:50%; transform: translateY(-50%);left:-3px; background-image: url('../images/template/icon_period.svg'); }

.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:Noto Sans KR; font-size:2.125rem; font-weight: 700; color:#fe676e; }
.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; color: #555; }
.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.custom .sec_price .list li .recommend { position:absolute; width:7.93rem; height:7.6rem; top:-5.33rem;  }
.cate_template.custom .sec_price .list li:hover .recommend { animation-name: recommend_updown; animation-duration: 0.6s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }
@keyframes recommend_updown { from {transform:translateY(0); } to {transform:translateY(-0.93rem);} }

@media(max-width:1320px){
	.cate_template.custom .sec_price .list li{flex-basis: calc(50% - 1em);}
	
	.cate_template.custom .sec_price .list li .list_type p { justify-content: center; } /*수정 240624*/
}

@media only screen and (max-width:1023px) {
    .cate_template .sec_template .template_list {} /*padding-left: 10px; padding-right: 10px;*/
    .cate_template .sec_template .template_list li {  margin-bottom:50px; width: calc((100% - 45px) / 4); margin-right:15px; } /*width:33.33%; padding-left:10px; padding-right:10px;*/
	
    .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);}*/
	
	.cate_template.custom section { padding-top: 80px; padding-bottom: 80px; } /* 반응형 스타일 보완위해 추가 240702*/
	
	
}
@media only screen and (max-width:767px) {
    .cate_template .sec_head_comm{padding-bottom:40px !important;}
    
    .cate_template .sec_template{padding-left:20px !important; padding-right:20px !important;}
    .cate_template .sec_template .template_list {} /*flex-flow:column;*/
    .cate_template .sec_template .template_list li { margin-bottom:40px; } /*width:100%; */
    .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:2.27rem; padding-bottom:4.27rem; }
    .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;}
    .cate_template.custom .sec_price .list .detail{min-height: auto; padding-bottom:1em;}
    .cate_template.custom .sec_price .list .detail.desc{flex-flow: row; min-height: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:2.57rem; } /*수정 240626*/
    .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;}
}

@media(max-width:680px){
	/*.cate_template.custom .sec_price .list li .img_box { width:100%; background:red; overflow:hidden; }*/
	 .img_box img { object-fit:cover; width:100%; height:100% }
}

@media(max-width:640px){
	.cate_template.custom .sec_price .list li { width:100%; }
	.img_box img { object-fit:unset; width:auto; height:auto; }
	
	.cate_template.custom section { padding-top:0.27rem; }
	/*추천 아이콘*/
	.cate_template.custom .sec_price .list li .recommend { top: -4.33rem; }
	
}

@media(max-width:620px){
	.cate_template .sec_template .template_list li { margin-bottom: 50px; width: calc((100% - 20px) / 2); margin-right: 20px; }
	.cate_template .sec_template .template_list li:nth-child(4) { margin-right: auto; }
	.cate_template .sec_template .template_list li:nth-child(2n) { margin-right: unset; }
}
@media(max-width:480px){
	.cate_template.custom .sec_price .list li .list_type p { justify-content: unset; } /*수정 240624*/
	.cate_template.custom section { padding-top: 0px; }
	.cate_template.custom .sec_price .list { margin-top: 2.43rem; }
	.call_btn_mo { margin: 2.13rem 0 0; }
	.call_btn_mo a .icon { margin-right: 0.5rem; }
	
}
/* 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:'Noto Sans KR';}
.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:#fe676e; 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:165px;}

@media only screen and (max-width:767px) {.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;}
    .sec_board_write .select_comm{width:100%;}
    .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%;}
}
@media(max-width:500px){
	.sec_board_write .select_comm { min-width: 100%; }
}

/*홈페이지 제작 동영상 추가 240705*/
.video1 { display: flex; justify-content: center;  margin-bottom:8rem; } /*background: rgba(0, 0, 0, 0.1); 배경색 있어야 작업 잘됨.*/
/*.video1 .embed-vimeo { position:relative; height:0px; padding-bottom: 56.25%; }*/
.video1 iframe { width:1320px; height:743px; box-shadow: 0px 0px 5px rgba(0,0,0,0.3); } /* width 퍼센트는 안먹음. height값도 반드시 있어야함. 기본적으로 가운데 정렬됨. border:1px solid rgba(0,0,0,0.1); 없애고 그림자로 함 */
@media(max-width:1320px){
	.video1 iframe { width:calc(100vw - 0); height:56.2879vw; } /*vw로 변경해서 1320부터 width가 100%로, height는 비율 유지해서 줄어들게 함. margin은 안먹음. padding은 먹는데, border값이 따로놀아 포기. 좌우 여백을 주려고 했으나, width:calc(100vw - 30px) 주니 반영은 되나, height에도 -값줘도 아래 여백이 안사라짐. border를 여기가 아닌 부모에 주면 원하는대로 안됨.포기하고 width100%로 하게됨*/
}
@media(max-width:1280px){
	.video1 { margin-bottom: 5rem; }
	.cate_template.custom section { padding-top: 5rem; padding-bottom: 5rem; }
}
@media(max-width:768px){
	.video1 { margin-bottom:4.27rem; }
	.cate_template.custom section { padding-top: 5.71rem; padding-bottom: 5.71rem; }
}