@charset "UTF-8";
.inner { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.inner.max { max-width: 1400px; }
.inner.med { max-width: 1300px; }
.inner.min { max-width: 1000px; }
.wrapper section { padding: 6.25em 0; overflow: hidden; }

.star{color:#FE655F;}
.color { color: #7861da; }
.bgc { background-color: rgba(120, 97, 218,0.05); }
.bg { background-image: linear-gradient(58deg,#8c77e5,#6647ed); color: #fff; }
.img-box.img-empty { background: url(../img/cost_logo.png) no-repeat center / 50%, linear-gradient(58deg,#8c77e5,#6647ed) !important; }

.cate { margin-bottom: 1.25em; }
.cate ul { font-size: 1.0625em; display: flex; justify-content: center; }
.cate li { padding: 0.8em 1.6em; border-radius: 3em; margin: 0 0.5em; display: inline-block; background-color: #eee; color: #666; cursor: pointer; }
.cate li:hover,
.cate li.active { background: linear-gradient(58deg,#8c77e5,#6647ed); color: #fff; }

/*##################### 상단 ######################################## */
header { position: fixed; left: 0; top: 0; right: 0; width: 100%; background-color: #fff; z-index: 9999; border-bottom: 1px solid #ddd; }
header .inner { height: 6.25em; display: flex; align-items: center; justify-content: space-between; }
header .logo { width: 8.75em; }
header .logo a { display: block; padding: 0; }
header .logo img { width: 100%; }
header .inner a { position: relative; padding: 0.5em; }
header .menu { display: flex; align-items: center; margin:0 auto; }
header .menu li { font-size: 1.30em; font-weight:500; margin-right: 1.25em; }
header .menu a::after { content:""; width: 0.25em; height: 0.25em; background-color: #fff; display: inline-block; position: absolute; right: -0.5em; top: 0; margin: 0.2em 0.5em;border-radius: 3em; }
header .menu a:hover,
header .menu a.active{ color: #7861da; }
header .menu a:hover::after,
header .menu a.active::after { background-color: #7861da; }

header .tnb { display: flex; font-size: 1em; align-items: center; }
header .tnb .btn-black { padding: 0.5em 1.25em; border-radius: 5em; cursor: pointer; background-color: #000; color: #fff; border: 2px solid #000;transition: 0.3s; font-weight: 600; }
header .tnb .btn-black:hover { background-color: #fff; color: #000; }
header .tnb .btn-talk i { margin-right: 0.5em; }
header .family { position: relative; margin-left: 0.5em; }
header .family dt { position: relative; z-index: 5;  }
header .family dt i { margin-left: 0.5em; }
header .family dd { font-size: 0.9em; flex-direction: column; position: absolute; top: 50%; left: 0; width: 100%; border: 2px solid #000; border-radius: 0 0 0.5em 0.5em; padding: 2em 1em 1em; display: none; background-color: #fff; font-weight: 600; }
header .family dd a { line-height: 2.25; padding: 0 0.8em; margin-bottom: 0.5em; display: block; border-radius: 0.4em; }
header .family dd a:last-child { margin-bottom: 0; }
header .family dd a:hover { background-color: #f4f4f4; }
header .family:hover dt i { transform: rotate(180deg); }
header .family:hover dd { display: flex; }

/*header .btn li { font-size: 1em; margin-left: 1.5em; }
header .btn a { border-radius: 3em; color: #7861da; border: 1px solid transparent; }
header .btn a:hover,
header .btn a.active{ border-color: #7861da; }
header .btn .green { color: #00C07B; border: 1px solid #00C07B;border-radius: 0; }
header .btn .green:hover,
header .btn .green.active{ border-color: #00C07B; }
header .btn a.talk { padding: 0; font-size: 2em; color: #391C1E; }
header .btn a.talk:hover { border-color: transparent; color: #7861da; }
header .btn a.payment { padding: 0.5em; border: 1px solid #7861da; border-radius: 0; }*/

.gnb-btn { font-size: 3.5em; color: #7861da; display: none; }
.gnb-all { width: 100%; height: 100vh; position: fixed; top: 0; text-align: center; z-index: 99999; font-size: 1.5em; display: flex; flex-direction: column; right: -100%; transition: 0.6s; }
.gnb-all.open { right: 0; }
.gnb-all .gnb-close { position: absolute; right: 0; top: 0; margin: 0.5em; font-size: 1.25em; }
.gnb-all .gnb-logo { -webkit-filter: brightness(3); filter: brightness(3); margin-bottom: 2em; margin-top: auto; }
.gnb-all li { margin-bottom: 1.25em; }
.gnb-all ul { margin-bottom: auto; padding-bottom: 2em; }

/*##################### 하단 ######################################## */
footer { width: 100%; padding: 3em 0; color: #555; border-top: 1px solid #ddd; }
footer .fnb { position: relative; }
footer .fnb > ul { font-size: 1.125em; display: flex; font-weight: 500; }
footer .fnb > ul > li { margin-right: 2em; }
footer .info { margin: 2em 0 1em; }
footer .info h4 { font-size: 1.125em; font-weight: 700; }
footer .info h5 { font-size: 1.125em; font-weight: 500; margin: 0.375em 0; }
footer .info .address { font-size: 1em; color: #999; }
footer .info .line { width: 1px; height: 1em; margin: 0 0.5em; display: inline-block; background-color: #8680a7; vertical-align: middle; }
footer .copyright { color: #999; margin-top: 1em; }

/*패밀리 브랜드*/
/*.family { display: flex; flex-direction: column;  z-index: 999; position: absolute; top: 0; right: 0; }
.family > * { background-image: linear-gradient(58deg,#8c77e5,#6647ed); color: #fff;  box-shadow: 3px 3px 15px rgba(0,0,0,0.05);}
.family span {  line-height: 3.5; padding: 0 1.5em;  border-radius: 2.5em; cursor: pointer; position: relative; z-index: 5; }
.family ul { width: 100%; padding: 1em 1.5em 2.25em; border-radius: 1.5em 1.5em 0 0; transform: scaleY(0); position: absolute; bottom: 1.75em; left: 0; transform-origin: 0 100%; }
.family li { line-height: 2; }
.family span i { transition: 0.3s; }
.family ul { transition: 0.3s; }
.family li:nth-child(1):hover { color: #c8a063; }
.family li:nth-child(2):hover { color: #00C07B; }
.family li:nth-child(3):hover { color: #F88E26; }
.family span:hover { text-shadow: 2px 2px 2px rgba(0,0,0,0.2); }
.family.active span i { transform: rotate(180deg); }
.family.active ul { transform: scaleY(1); }*/

.floating { position: fixed; right: 3%; top: 50%; transform: translateY(-50%); z-index: 99;}
.floating-box { font-size: 14px; background-color: #fff; padding: 1.875em; max-width: 280px; border: 1px solid #7861da; border-radius: 1.5em; }
.floating-box h4 { font-size: 1.2875em; font-weight: 600; }
.floating-box p { margin: 1em 0; color: #777; }
.floating-box li { margin-bottom: 0.675em; }
.floating-box input,
.floating-box textarea { width: 100%; height: 2.875em; background-color: #f5f5f5; border: 0; border-radius: 0.375em; }
.floating-box textarea { min-height: 10em;  }
.floating-box .btn-submit { font-size: 1.125em; width: 100%; height: 3em; border-radius: 0.275em; display: block !important; }
.floating-box .btn-close { font-size: 2em; cursor: pointer; padding: 0.2em; padding-bottom: 0.1em; position: absolute; top: 0; right: 0; margin: 0.5em; }



/*##################### 포트폴리오 ######################################## */
.portfolio .visual { margin-bottom: 6.25em; display: flex; align-items: center; justify-content: center; }
.portfolio .count { width: 20%; height: 8em; text-align: center; display: flex; align-items: center; justify-content: center; }
.portfolio .count p { font-size: 1.125em; font-weight: 700; }
.portfolio .count h2 { font-size: 5em; font-weight: 700; }
.portfolio .count h2 { background-size: 200% 100%; -webkit-animation: bg_move 3s linear infinite; animation: bg_move 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image:linear-gradient(65deg, #7861DA 10%, #9545D4, #7861DA, #6653BA, #7861DA, #4C49D7, #7861DA 90%); }
.portfolio .tit { width: 80%; max-width: 50em; word-break: keep-all; }
.portfolio .tit h2 { font-size: 2em; font-weight: 500; }
.portfolio .tit p { font-size: 1.25em; margin-top: 0.8em; font-weight: 300; color: #666; }
.portfolio .tit a { margin-left: 1em; }
.portfolio .tit a i { vertical-align: middle; }
.portfolio .list ul { display: flex; flex-wrap: wrap; }
.portfolio .list li { width: 31.3333%; margin-top: 1.5%; margin-bottom: 1.5%; margin-right: 3%; position: relative; text-align: left; }
.portfolio .list li:nth-child(3n) { margin-right: 0; }
.portfolio .list a { display: block; }
.portfolio .list .img-box { padding-top: 70%; background: no-repeat center/100%; transition: 0.3s; }
.portfolio .list .txt-box { padding: 1.5em; background-color: #fff; }
.portfolio .list .txt-box h4 { font-size: 1.5em; font-weight: 700; margin-bottom: 0.5em; }
.portfolio .list .txt-box p { font-size: 1.125em; }
.portfolio .list .img-box:hover { background-size: 110%; }


/*##################### 이벤트,스토리 ######################################## */
.card .tit { text-align: center; font-size: 3.125em; font-weight: 700; margin-bottom: 1em; }
.card .cate li { background-color: #fff; border: 1px solid #eee; }
.card .list ul { display: flex; flex-wrap: wrap; text-align: left; }
.card .list li { width: 31.3333%; margin-top: 2%; margin-bottom: 2%; margin-right: 3%; border-radius: 0.8em; overflow: hidden; background-color: #fff;}
.card .list li:nth-child(3n) { margin-right: 0; }
.card .list li a { display: flex; flex-direction: column; width: 100%; height: 100%; }
.card .list .img-box { background: no-repeat center/cover; border-top: 1px solid #eee; padding-top: 80%; margin-top: auto; }
.card .list .txt-box { padding: 1em 1.5em; background-color: #fff; }
.card .list h5 { display: flex; }
.card .list h5 img { width: 3.75em; margin-right: 0.5em; }
.card .list h5 span { font-size: 0.875em; border-radius: 1em; padding: 0 1em; line-height: 2.5; background-color: #eee; display: inline-block; color: #666;}
.card .list h4 { font-size: 1.75em; font-weight: 700; line-height: 1.5; max-height: 3em; word-break: keep-all; margin: 0.25em 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.card .list p { font-size: 1.08em; color: #666; font-weight: 300; margin-bottom: 1em; }
.card .list p span {display: inline-block; margin-right: 0.5em; }


/*##################### 견적요청 ######################################## */
.estimate { background-color: #f5f5f5; }
.estimate .visual { padding: 9.375em 0; color: #fff; background: url(../img/bg_estimate.jpg) no-repeat center; text-align: center; }
.estimate .visual h2 { font-size: 2.5em; margin-bottom: 0.5em; font-weight: 700; }
.estimate .visual p { font-size: 1.25em; }
.estimate .wrap { display: flex; padding-bottom: 6.25em; }
.estimate .write { width: 55%; margin-top: -5em; padding: 4em 3em; background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.15); }
.estimate .write .frm-wrap { display: none; margin: 4em 0 2em; }
.estimate .write .frm-wrap.active { display: block; }
.estimate .write .frm-chk { display: block; margin-right: 0; }
.estimate .write .frm-box { border: 0; }
.estimate .tab { text-align: center; color: #888; }
.estimate .tab ul { display: flex; justify-content: center; align-items: center; }
.estimate .tab .num li { display: flex; align-items: center; }
.estimate .tab .num strong { width: 2em; height: 2em; line-height: 2; display: inline-block; background-color: #f5f5f5;border-radius: 3em; font-weight: 400; }
.estimate .tab .num .line { width: 5.75em; height: 0.1875em; display: inline-block; vertical-align: middle;background-color: #f5f5f5; }
.estimate .tab .text { margin-top: 0.8em; }
.estimate .tab .text li { width: 7.8125em; }
.estimate .tab .num li.active strong { background-color: #7861DA; color: #fff; }
.estimate .tab .num li.active .line { background-color: #7861DA; }
.estimate .tab .text li.active { color: #7861DA; }
.estimate .btn-wrap { display: flex; justify-content: center; }
.estimate .btn-wrap button { font-size: 1.25em; line-height: 1; border-radius: 5em; padding: 0.6em 2em;  letter-spacing: 0.5em; padding-left:2.5em; margin: 0 2em; color: #7861da; border: 0.1em solid #7861da; }
.estimate .btn-wrap .btn-submit { letter-spacing: 0; padding-left: 2em; background-color: #7861da; color: #fff; }
.estimate .txt-box { padding: 6em 3em 0; color: #888; }
.estimate .txt-box dt { font-size: 1.5em; font-weight: 700; margin-bottom: 1.5em; }
.estimate .txt-box dd { font-size: 1.125em; margin-bottom: 1em; }
.estimate .txt-box span,
.estimate .txt-box a { font-size: 0.875em; margin: 0.5em; display: inline-block; }
.estimate .txt-box a { border: 1px solid #7861DA; font-size: 0.8em; padding: 0.3em 1em; border-radius: 3em; }


/*##################### 애프터서비스,플러스 ######################################## */
.after .tit { padding-bottom: 3.125em; text-align: center; }
.after .tit h2 { font-size: 2.5em; margin-bottom: 0.5em; font-weight: 700; }
.after .tit p { font-size: 1.25em; }
.after .tit-sub { font-size: 2.5em; margin-bottom: 0.5em; font-weight: 700; text-align: center; }
.after .tit-sub small { font-size: 0.6em; }
.after .lnb ul { font-size: 1.25em; display: flex; text-align: center; }
.after .lnb li { width: 50%; line-height: 2.8; border-bottom: 0.15em solid #ddd; }
.after .lnb li.active { border-color: #7861da; }
.after .write { margin-top: 5em; padding: 0 1%; display: none; }
.after .write.open { display: flex; }
.after .write .info { width: 45%; margin-right: 5%; }
.after .write .info h6 { color: #888; }
.after .write .info h3 { font-size: 2.5em; font-weight: 700; }
.after .write .info hr { margin: 1em 0; border: 0; width: 100%; height: 1px; background-color: #000; }
.after .write .info h4 strong { font-size: 2em; }
.after .box .pointC { color: #7861da; }
.after .box .pointB1 { background-color: #7861da; }
.after .box .pointB2 { background-color: #F2F0FC; font-weight:bold;}
.after .box1 .pointC { color: #FFB800; }
.after .box1 .pointB1 { background-color: #FFB800; }
.after .box1 .pointB2 { background-color: #FFFBE6; font-weight:bold;}
.after .other ul { display: flex; flex-wrap: wrap; text-align: center; }
.after .other li { font-size: 1.25em; width: 23%; margin: 1%; border: 1px solid #ddd; padding: 3em 0; background-color: #fff; }
.after .other li img { margin-bottom: 1em; }
.after .other li:hover { border-color: #7861da; color: #7861da; }


/*##################### 애프터서비스 ######################################## */
.membership { display: flex; text-align: center; flex-wrap: wrap; }
.membership .box { width: 32%; margin-right: 2%; padding: 3em 1.25em; background-color: #fff; border-radius: 1em; box-shadow: 0 0 15px rgba(0,0,0,0.15); }
.membership .box:last-child { margin-right: 0; }
.membership .box h6 { font-size: 1.125em; color: #888; }
.membership .box h3 { font-size: 2.5em; font-weight: 700; }
.membership .box .line { width: 100%; height: 1px; background-color: #ddd; position: relative; margin: 2.5em 0;}
.membership .box .line span { width: 3.125em; height: 0.1875em; background-color: #aaa; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) }
.membership .box h5 { font-size: 1.125em; margin-bottom: 0.5em; display: none; }
.membership .box p { font-size: 1.125em; line-height: 1.6;  }
.membership .box ul { font-size: 1em; font-weight: 300; text-align: left; margin: 3em 0; }
.membership .box li { background-color: #f7f7f7; padding: 0.5em; margin-bottom: 0.5em; }
.membership .box li i { width: 0.3125em; height: 0.3125em; display: inline-block; border-radius: 10px; margin-right: 0.5em; vertical-align: middle; }
.membership .box h4 { font-size: 1.125em; }
.membership .box h4 strong { font-size: 2em; }
.membership .box h4 small { color: #888; }
.membership .box button { font-size:  1.125em; margin-top: 1.25em; border: 1px solid #ccc; background-color: #fff; padding: 0.5em 2em;border-radius: 3em;}
/* 애프터 프리 강조 */
.membership .box1 { width: 100%; margin-right: 0; margin-bottom: 2%; display: flex; text-align: left; padding: 3em; justify-content: space-between; }
.membership .box1 > .left { width: 25%; display: flex; flex-direction: column; }
.membership .box1 > .right { width: 70%; }
.membership .box1 .line { margin: auto 0; }
.membership .box1 h5 { font-size: 1.25em; font-weight: 700; display: block; }
.membership .box1 p { font-size: 1.125em; color: #666; }
.membership .box1 ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; }
.membership .box1 li { width: 49%; background-color: transparent; font-size: 1em; padding:0; margin-top: 1em; margin-bottom: 0; }


/*##################### 애프터플러스 ######################################## */
.modify ul { display: flex; flex-wrap: wrap; text-align: center; }
.modify li { font-size: 1.25em; width: 23%; margin: 1%; border: 1px solid #ddd; padding: 3em 0; background-color: #fff; }
.modify li img { margin-bottom: 1em; }
.modify .btn-select { cursor: pointer; }
.modify .btn-select.select { border-color: #7861da; color: #7861da; box-shadow: 0 0 15px rgba(0,0,0,0.15); }

.modify li:hover { border-color: #7861da; color: #7861da; }


/*##################### 웹사이트,랜딩페이지 ######################################## */
.flex-wrap { position: relative; display: flex; justify-content: flex-end; }
.flex-wrap .txt { position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 15; }
.flex-wrap.reverse { justify-content: flex-start; }
.flex-wrap.reverse .txt { left: auto; right: 0; }
.center { text-align: center; }
.center .txt { margin-bottom: 3em; }
.txt { font-size: 1.375em; font-weight: 500; line-height: 1.8; }
.txt h5 { font-weight: 700; margin-bottom: 0.68em; }
.txt h2 { font-size: 2.27em; font-weight: 400; line-height: 1.5; }
.txt h2 + * { margin-top: 1.36em; }
.hashtag { color: #867fa8; }
.hashtag span { display: inline-block; margin-right: 1em; }

/* 웹사이트 제작 */
.website .inner { margin-top: -2.5em;  }
.website .cont { margin-right: -150px; }
/* 홈페이지 제작 */
.homepage {  }
/* 쇼핑몰 제작 */
.shoppingmall .cont { margin-right: -50px; }
.shoppingmall .txt { padding-bottom: 100px; }
/* PG사 계약 */
.pg img {border-right: 1px solid #ddd; max-width: 30%; }
.pg img:last-child { border-right: 0; }
/* 랜딩페이지 */
.landing .cont { position: relative; margin-right: -125px; }
.landing .circle { position: absolute; z-index: -1; }
.landing .circle1 { left: -30%; top: 0; }
.landing .circle2 { right: -5%; top: -15%; }
/* 디자인 작업 실시간 확인 */
.design {  }
/* 원활한 커뮤니케이션 */
.chatting .cont { position: relative; }
.chatting .cont ul { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; }
.chatting .cont li { margin-bottom: 0.5em; }
.chatting .cont h4 { font-size: 1.0625em; margin-bottom: 0.5em; }
.chatting .cont div { font-size: 1.0625em; padding: 0.5em 1em; display: inline-block; line-height: 1.5; box-shadow: 0.8em 0.8em 5px rgba(0,0,0,0.05); }
.chatting .cont li:nth-child(odd) { align-self: flex-start; }
.chatting .cont li:nth-child(odd) div { border-radius: 0 0.8em 0.8em 0.8em; }
.chatting .cont li:nth-child(even) { align-self: flex-end; text-align: right; }
.chatting .cont li:nth-child(even) div { border-radius: 0.8em 0 0.8em 0.8em; color: #7861da; border: 1px solid #7861da; background-color: #fff; }
/* 포트폴리오 */
.portfolio.page { background-color: #fafafa; }
.portfolio.page .btn_move { font-size: 1.25em; padding: 0.8em 2em; display: inline-block; border-radius: 5em; margin-top: 2.5em; }
/*다양한 혜택*/
.benefit .cont ul { display: flex; flex-wrap: wrap;  }
.benefit .cont li { width: 31%; margin: 1%; padding: 4.5em 0.8em; background-color: #fff; position: relative; }
.benefit .cont li:nth-child(odd) { z-index: 10; }
.benefit .cont h4 { font-size: 1.375em; margin: 2em 0 1em; font-weight: 700; }
.benefit .cont p { font-size: 1.125em; line-height: 1.6; }
.benefit .cont .price { position: absolute; right: 0; top: 0; background-color: #8c77e5; color: #fff; padding: 0.4em 0.8em; border-radius: 5em; transform: translate(15%,-50%); z-index: 9; }
/* 지속적인 무료 관리 서비스 제공 */
.after.page .cont { margin-left: -80px; }
/*.after.page .txt { margin-right: -100px; }*/
/*  애프터서비스 현황 */
.situation h3 { font-size: 1.375em; margin-bottom: 0.8em; }
.situation .cont { display: flex; justify-content: space-between; }
.situation .cont > div { width: 49%; }
.situation .box { font-size: 1.125em; padding: 1.5em; border: 1px solid #ddd; border-radius: 1.125em; }
.situation .box1 .thead { font-weight: 500; line-height: 3; }
.situation .box1 .tr { border-bottom: 1px solid #ddd; display: flex; }
.situation .box1 .td { width: 20%; border-right: 1px solid #ddd; display: flex; align-items: center; justify-content: center; }
.situation .box1 .td:nth-child(2) { width: 30%; }
.situation .box1 .td:nth-child(3) { width: 30%; }
.situation .box1 .td:last-child { border-right: 0; }
.situation .box1 .swiper { height: 380px; }
.situation .right { display: flex; flex-direction: column; }
.situation .box2 ul { display: flex; justify-content: center; border-radius: 1.5em; overflow: hidden; color: #fff;}
.situation .box2 li { width: 33.333%; padding: 1em; border-right: 1px solid rgba(255,255,255,0.6); }
.situation .box2 li:last-child { border-right: 0; }
.situation .box2 li:nth-child(1) { background-color: #8c77e5; }
.situation .box2 li:nth-child(2) { background-color: #7861da; }
.situation .box2 li:nth-child(3) { background-color: #6647ed; }
.situation .box2 li h5 {  padding: 0.4em 1.2em; background-color: #fff; border-radius: 5em; color: #000; margin-bottom: 0.5em; }
.situation .box2 li strong { font-size: 2.25em; }
.situation .box3 { margin-top: auto; }
.situation .box3 ul { display: flex; flex-wrap:wrap; }
.situation .box3 li { width: 25%; background-color: #fff; }
.situation .box3 li:nth-child(-n+4) { margin-bottom: 1.5em; }
.situation .box3 li img { width: 40%; margin-bottom: 0.5em; }
/*제작프로세스*/
.process ul { display: flex; flex-wrap: wrap; }
.process ul::before { content:""; display: block; width: 100%; height: 2px; background-color: #7861da; margin-bottom: 2em; }
.process li {  width: 14.5%; margin: 1%; padding: 2em 0; border-radius: 1em; box-shadow: 0 0 15px rgba(0,0,0,0.1); background-color: #fff; position: relative; }
.process li img { margin-bottom: 1em; }
.process li p { font-size: 1.125em; font-weight: 600; }
.process li::before { content:""; width: 1em; height: 1em; border: 0.15em solid #7861da; background-color: #fff; border-radius: 3em; display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 2.125em; }
/*제작비용*/
.cost .cont { font-size: 1.125em; }
.cost .cont h4 { font-size: 1.66em; font-weight: 700; }
.cost .cont thead td { font-size: 1.25em; }
.cost .cont tbody { font-weight: 600; }
.cost .cont tbody th { color: #271866; }
.cost .cont table th,
.cost .cont table td { border: 2px solid #fff; padding: 0.8em; }
.cost .cont table td { width: 25%; }
/* 웹사이트 제작비용 */
.cost .web table { width: 100%; }
.cost .web tbody tr:nth-child(even) { background-color: #f4f3f9; }
.cost .web .other { margin-top: 1.5em; padding: 0.8em 1.2em; display: flex; text-align: left; border: 1px solid #ddd; align-items: center; }
.cost .web .other small { color: #888; margin-left: 1em; }
.cost .web .other a { font-size: 0.875em; padding: 0.3em 1.2em; margin-left: auto; border: 1px solid #6647ed; color: #6647ed; border-radius: 3em; }
/* 랜딩페이지 제작비용 */
.cost .lan { display: flex; justify-content: space-between; }
.cost .lan table { width: 67.5%; }
.cost .lan thead small {font-size: 1.25em;}
.cost .lan tbody tr:nth-child(odd) { background-color: #f4f3f9; }
.cost .lan dl { width: 30%; padding: 4em 3em; border-radius: 2em; }
.cost .lan dt small { color: #cfc5ff; display: block; margin-top: 0.5em; }
.cost .lan dd:nth-of-type(1) { padding: 3em 0; }
.cost .lan dd div { display: flex; align-items: center; padding: 0.5em 1em; }
.cost .lan dd div hr { display: inline-block; flex-grow: 1; margin: 0 5%; }
.cost .lan dd div span { white-space: nowrap; }
.cost .lan dd div strong { white-space: nowrap; color: #fcff00; }
.cost .lan a { display: block; padding: 0.8em 0; border-radius: 3em; color: #7b7b7b; background-color: #fff; }
.cost .lan a strong { color: #5945b0; }
/*상담신청*/
.inquiry .inner { display: flex; align-items: flex-start; justify-content: space-between; }
.inquiry .cont { max-width: 675px; width: 100%; }
.inquiry .cont li { display: block; background-color: transparent; border: 0; padding: 0; margin-bottom: 1.5em; }
.inquiry .cont li > * { padding: 0; }
.inquiry .cont li.half { width: 48.5%; }
.inquiry .cont li.half:nth-child(odd) { margin-right: 3%; }
.inquiry .cont .frm-box { border: 0; }
.inquiry .cont .frm-label { width: 100%; font-weight: 700; margin-bottom: 0.8em; font-size: 1em; }
.inquiry .cont .frm-text { border: 1px solid #ddd; height: 2.8em; padding: 0 0.8em; font-size: 1em; }
.inquiry .cont textarea.frm-text { padding: 0.8em; height: 12.5em; }
.inquiry .cont .frm-btn { text-align: center; }
.inquiry .cont .frm-btn .btn-submit { font-size: 1.125em; }
.inquiry .txt h2 { font-weight: 100; margin-bottom: 1.5em; }
.inquiry .txt strong { font-weight: 500; }
.inquiry .txt dl { line-height: 60px; border: 1px solid #dcdcdc; border-radius: 2em; overflow: hidden; }
.inquiry .txt dt { font-size: 20px; background-color: #7861da; color: #fff; text-align: center; }
.inquiry .txt .swiper { font-size: 18px; font-weight: 400; height: 240px; background-color: #fff;}
.inquiry .txt .swiper-slide {  border-bottom: 1px solid #dcdcdc; }
.inquiry .txt p { padding: 0 2em; align-items: center; display: flex; justify-content: space-between; }
.inquiry .txt img { vertical-align: middle; margin-right: 0.5em; }


/*##################### 메인 ######################################## */
.main .bgc  { background-color: #fafafa; }

/* 메인 비주얼 */
.main .visual { padding: 0 3.125em; padding-bottom: 5em; color: #000; background: linear-gradient(to bottom,#fff 65%,#7861da 65%); position: relative; }
.main .visual .video { width: 100%; overflow: hidden; position: relative;}
.main .visual .video video { width: 99.7%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.main .visual .txt {  position: absolute; bottom: 35%; left: 50%; transform: translateX(-40%); }
.main .visual .txt h2 { font-size: 2.72em; font-weight: 700; }
.main .visual .txt a { font-size: 0.90em; font-weight: 700; padding: 0.8em 1.5em; margin-top: 2em; display: inline-block; border: 2px solid #000;}
.main .visual .txt a i { display: inline-block; width: 3em; height: 0.5em; margin-left: 0.5em; background: url(../img/icon_move_01.png) no-repeat center/100%; -webkit-filter: invert(1); filter: invert(1) }

/* 메인 카드 */
.main .card .list { display: flex; }
.main .card .list ul { width: 50%; }
.main .card .list li { width: 48.5%; font-size: 14px; }
.main .card .list li:nth-child(2n) { margin-right: 0; }
.main .card .list li:nth-child(3n) { margin-right: 3%; }
.main .card .list li p { font-size: 1.08em; }
.main .card .list li.big { width: 100%; font-size: 18px; }
.main .card .list li.big .txt-box {  }
.main .card .list li.big .img-box { padding-top: 90%; }
.main .card .list li.big p { margin-bottom: 0.5em; }
.main .card .list li.big h6 { line-height: 1.6; height: 4.8em; color: #666; word-break: keep-all; margin: 1.5em 0; }


/* 파트너스 */
.partner .cont {  }
.partner .cont ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-left: 1px; padding-top: 1px;}
.partner .cont li { width: 20%; padding: 2.5em 1em; border: 1px solid #ddd; margin-left: -1px; margin-top: -1px; background-color: #fff; }
.partner .cont li img { -webkit-filter: grayscale(0); filter: grayscale(0); transform: scale(0.9); transition: 0.3s; }
.partner .cont li:hover img { -webkit-filter: grayscale(1); filter: grayscale(1); transform: scale(1); }

/* 자주묻는질문 */
.faq .cont ul { border-top: 2px solid #000; text-align: left; }
.faq .cont li { border-bottom: 1px solid #ccc; }
.faq .cont li .icon { font-size: 1.75em; display: inline-block; width: 1.5em; line-height: 1.5; text-align: center; border-radius: 3em; font-style: normal; }
.faq .cont li .txt-box { flex-grow: 1; line-height: 1.6; padding: 0 3%; }
.faq .cont li .arrow { transition: 0.3s; }
.faq .cont li .question { font-size: 1.25em; font-weight: 500; align-items: center; display: flex; padding: 1.5% 2%; }
.faq .cont li .question .icon { color: #7861da; }
.faq .cont li .question .txt-box { cursor: pointer; }
.faq .cont li .answer { font-size: 1.125em; font-weight: 300; display: none; }
.faq .cont li .answer .bgc { display: flex; padding: 1.5% 2%; }
.faq .cont li .answer .icon { color: #fff; background-color: #7861da; }
.faq .cont li:hover .question,
.faq .cont li.open .question { color: #7861da; }
.faq .cont li.open .arrow { transform: rotate(180deg); }

/* 상담안내 */
.counsel .cont ul { display: flex; justify-content: center; }
.counsel .cont li { width: 25%; padding: 4em 0; margin: 2%; background-color: #fff; border-radius: 0.5em;  color: #553bc5;}
.counsel .cont img { width: 30%; }
.counsel .cont p { font-size: 1.375em; font-weight: 600; margin-top: 1em;}
.counsel .cont small { font-size: 1.125em; color: #a99fd7; margin-top: 0.5em; display: block; }









/* 호버 */
.card .list li, .portfolio .list li, .counsel .cont li, .benefit .cont li { box-shadow: 0 0.5em 2em rgba(0,0,0,0.15); transition: 0.3s; }
.card .list li:hover, .portfolio .list li:hover { box-shadow: 0.3125em 0.625em 1.875em rgba(0,0,0,0.3);  }
.benefit .cont li:hover { color: #7861da; }
.benefit .cont li:hover .price { -webkit-animation: hover 0.8s linear 2; animation: hover 0.8s linear 2; }
.counsel .cont li:hover { background-image: linear-gradient(to right bottom,#8c77e5,#6647ed); color: #fff; box-shadow: 0.3125em 0.625em 1.875em rgba(0,0,0,0.3); }
.counsel .cont li:hover img { -webkit-filter: brightness(3); filter: brightness(3); }

/* 카드결제 */
.personal .tit { font-size: 2em; margin-bottom: 1.5em; font-weight: 700; }
.personal .list { display: flex; flex-wrap: wrap; font-size: 1.125em; }
.personal .list li { width: 21.5%; margin-bottom: 2em; }
.personal .list li.line { width: 1px; margin: 0 2% 2em; background-color: #ddd; }
.personal .list li:nth-child(8n) { display: none; }
.personal .list .name { color: #333; margin-bottom: 1em; }
.personal .list .price { display: flex; align-items: center; justify-content: space-between; }
.personal .list .price span { color: #8c77e5; }
.personal .list .price a { font-size: 0.875em; padding: 0.5em; display: inline-block; color: #666; border: 1px solid #ccc; }

.personal .write .frm-wrap { display: flex; flex-wrap: wrap; }
.personal .write .frm-box { width: 48%; margin: 1%; display: flex; border: 0; }
.personal .write .frm-label { line-height: 2.6; }
.personal .write .frm-label span { color: #8c77e5; }
.personal .write .frm-input { line-height: 2.6; }
.personal .write .frm-input.price { color: #8c77e5; }
.personal .write .sod_right { display: none; }
.personal .write .btn_confirm { margin-top: 3em; padding-top: 3em; border-top: 1px solid #ddd; }
.personal .write .btn_confirm .btn01 { display: none; }
.personal .write .btn_confirm .btn_submit { padding: 0 3em; height: 3em; line-height: 3;border-radius: 15em; }
.personal .write .pay_way { display: none; }

.personal .result { max-width: 600px; margin: auto; text-align: center; }
.personal .result td { text-align: left; padding-left: 1em; }


/* 20231025 */
/*.main .card { padding: 5em 0; }
.main .card .txt { position: static; transform: translate(0); align-self: center; }
.main .card .txt { width: 50%; }
.main .card .txt a { font-size: 0.8em; padding: 0.8em 2.5em; margin-top: 4em; -webkit-border-radius: 0.5em;-moz-border-radius: 0.5em;border-radius: 0.5em; font-weight: 500; background-color: #7861da; border: 2px solid #7861da; color: #fff; transition: 0.3s; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }
.main .card .cont { width: 50%; position: relative; height: 38.5em; }
.main .card .cont .swiper { position: absolute; left: 0; width: 100%; padding: 2em 0; }
.main .card .cont .item { margin-right: 2em; height: auto; width: 100%; max-width: 23em; }*/

.marquee { --gap: 1.5em; display: flex; gap: var(--gap); }
.marquee-con { overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: flex; position: relative; gap: var(--gap); }
.marquee-list { position: relative; display: flex; flex-shrink: 0; justify-content: space-around; -webkit-animation: marqueeX 80s linear infinite; animation: marqueeX 80s linear infinite; gap: var(--gap); }
.marquee-con.reverse .marquee-list { animation-direction: reverse !important; }

@-webkit-keyframes marqueeY {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(0,calc(-100% - 1em),0)
    }
}
@keyframes marqueeY {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(0,calc(-100% - 1em),0)
    }
}

.main .portfolio { padding: 0; }
.main .portfolio .txt a { font-size: 0.8em; padding: 0.8em 2.5em; margin-top: 4em;border-radius: 0.5em; font-weight: 500; background-color: #7861da; border: 2px solid #7861da; color: #fff; transition: 0.3s; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }
.main .portfolio .cont { width: 55%; }
.main .portfolio .marquee { width: 100%; display: flex; height: 50vw; }
.main .portfolio .marquee-con { flex: 1 1 0; flex-direction: column; overflow: visible; }
.main .portfolio .marquee-list { flex-direction: column; -webkit-animation: marqueeY 60s linear infinite; animation: marqueeY 60s linear infinite; }
.main .portfolio .marquee-con:hover .marquee-list { -webkit-animation-play-state: paused; animation-play-state: paused; }
.main .portfolio .item { width: 100%; }






/* 효과 */
@-webkit-keyframes bg_move {
    0%{ background-position: 0%; }
    100%{ background-position:200%; }
}
@keyframes bg_move {
    0%{ background-position: 0%; }
    100%{ background-position:200%; }
}


.listEffect li { transform: translateY(20%); opacity: 0; }
.listEffect li.effect { -webkit-animation: effectY 0.6s ease-out 1 forwards; animation: effectY 0.6s ease-out 1 forwards; }
.listEffect li:nth-child(3n+1) { -webkit-animation-delay: 0s; animation-delay: 0s }
.listEffect li:nth-child(3n+2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s }
.listEffect li:nth-child(3n+3) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s }

.after .listEffect li:nth-child(4n+1) { -webkit-animation-delay: 0s; animation-delay: 0s }
.after .listEffect li:nth-child(4n+2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s }
.after .listEffect li:nth-child(4n+3) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s }
.after .listEffect li:nth-child(4n+4) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s }

.effectT { transform: translateY(20%); opacity: 0; }
.txt.effectT,
.tit.effectT,
.cate.effectT { transform: translateY(100%); opacity: 0; }
.effectT.on { -webkit-animation: effectY 0.6s ease-out 1 forwards; animation: effectY 0.6s ease-out 1 forwards; }
.effectB { transform: translateY(-20%); opacity: 0; }
.effectB.on { -webkit-animation: effectY 0.6s ease-out 1 forwards; animation: effectY 0.6s ease-out 1 forwards; }
.effectL { transform: translateX(-20%); opacity: 0; }
.effectL.on { -webkit-animation: effectX 0.6s ease-out 1 forwards; animation: effectX 0.6s ease-out 1 forwards; }
.effectR { transform: translateX(20%); opacity: 0; }
.effectR.on { -webkit-animation: effectX 0.6s ease-out 1 forwards; animation: effectX 0.6s ease-out 1 forwards; }
@-webkit-keyframes effectY {
    100%{ transform: translateY(0%); opacity: 1; }
}
@keyframes effectY {
    100%{ transform: translateY(0%); opacity: 1; }
}
@-webkit-keyframes effectX {
    100%{ transform: translateX(0%); opacity: 1; }
}
@keyframes effectX {
    100%{ transform: translateX(0%); opacity: 1; }
}
.flex-wrap .txtEffect1 { left: -10%; opacity: 0; }
.flex-wrap .txtEffect1.on { -webkit-animation: txt1 0.6s ease-out 1 forwards; animation: txt1 0.6s ease-out 1 forwards; }
@-webkit-keyframes txt1 {
    100% { left: 0; opacity: 1; }
}
@keyframes txt1 {
    100% { left: 0; opacity: 1; }
}
.flex-wrap.reverse .txtEffect2 { left: auto; right: -10%; }
.flex-wrap.reverse .txtEffect2.on { -webkit-animation: txt2 0.6s ease-out 1 forwards; animation: txt2 0.6s ease-out 1 forwards; }
@-webkit-keyframes txt2 {
    100% { right: 0; opacity: 1; }
}
@keyframes txt2 {
    100% { right: 0; opacity: 1; }
}





/* 반응형 */
@media screen and (max-width: 1620px){
    .inner { width: 96%; }
    header { font-size: 1vw; }
}
@media screen and (max-width: 1380px){
    .inner { width: 94%; }
    .inner.max { max-width: 1200px; }
    .inner.med { max-width: 1200px; }

    html { font-size: 15px; }
    img { max-width: 100%; }
    .website .cont { width: 60%; margin-right: -5%; }
    .shoppingmall .cont { width: 70%; margin-right: -3%; }
    .after.page .cont { width: 55%; margin-left: -5%; }
    .after.page .txt { margin-right: 0; }
    .landing .cont { width: 60%; margin-right: -5%; }
}
@media screen and (max-width: 1280px){
    html { font-size: 14px; }
    .main .visual .txt { max-width: 100%; padding: 0 8%; transform: translateX(-50%); }

    .website .cont { margin-right: 0; }
    .shoppingmall .cont { margin-right: 0; }
    .after.page .cont { margin-left: 0; }
    .landing .cont { margin-right: 0; width: 55%; }
}
@media screen and (max-width: 1024px){
    header { font-size: 1.25vw; }
    header .menu li { font-size: 1.125em; margin: 0 0.5em; }
    header .tnb li { font-size: 1em; }
    header .logo { width: 10%; }
    .main .visual .video video { position: static; transform: translate(0,0) }
    .txt { font-size: 1.25em; }
    .flex-wrap .cont { width: 45%; }
    .website .cont { width: 55%; }
    .shoppingmall .cont { width: 70%; }
    .after.page .cont { width: 45%;}
    .landing .cont { width: 50%; }
    .chatting .cont { width: 55%; }

    .benefit .cont li { padding: 3em 0.8em; }
    .benefit .cont li img { width: 20%; }
    .situation .box1 .swiper { height: 310px; }

    .modify li img,
    .after .other li img { width: 30%; }
    .counsel .cont li { width: 31%; }

    .landing .circle1 { width: 70%; }
    .landing .circle2 { width: 40%; }

    .card .tit { font-size: 2.48em; }
    .after .tit-sub { font-size: 2.25em; }

}
@media screen and (max-width: 768px){
    .floating { display: none; }
    .txt { font-size: 1.125em; }
    header { font-size: 0.875em; }
    header .inner { height: 5em; }
    header .logo { width: 13%; }
    header .menu { display: none; }
    header .tnb { margin-left: auto; margin-right: 1em; }

    .main .visual .txt { font-size: 0.875em; }
    .main .card .list { display: block; font-size: 1em; }
    .main .card .list ul { width: 100%; }
    .main .card .list li { font-size: 1em; }
    .main .card .list li.big { margin: 0; font-size: 1.125em; }
    .main .card .list li.big a { flex-direction: row; }
    .main .card .list li.big a > div { width: 50%; }
    .main .card .list li.big .img-box { padding-top: 52%; }
    .main .card .list li.big h6 { margin-top: 1em; }
    .situation .cont { display: block; }
    .situation .cont > div { width: 100%; }
    .situation .box1 .swiper { height: 150px; }
    .situation .right > div { margin-top: 2em; }
    .situation .box3 li img { width: 30%; }

    .flex-wrap { display: block; }
    .flex-wrap .txt { position: static; transform: translate(0,0); text-align: center; }
    .flex-wrap .cont { width: 80% !important; margin: auto !important; margin-top: 2em !important; }
    .flex-wrap .cont > img { width: 80%; display: block; margin: auto; }

    .shoppingmall .txt { padding-bottom: 0; }

    .inquiry .inner { display: block; }
    .inquiry .txt { text-align: center; margin-bottom: 3em; }
    .inquiry h2 br {display: none;}
    .inquiry .cont { max-width: 100%; }

    .process ul::before { display: none; }
    .process li { width: 30.5%; }
    .process li::before { display: none; }

    .landing .circle1 { width: 50%; }

    .cate li { padding: 0.8em 1.2em;}
    .card .list li,
    .portfolio .list li { width: 48.5%; }
    .card .list li:nth-child(3n),
    .portfolio .list li:nth-child(3n) { margin-right: 3%; }
    .card .list li:nth-child(2n),
    .portfolio .list li:nth-child(2n) { margin-right: 0; }

    .listEffect li:nth-child(2n+1) { -webkit-animation-delay: 0s; animation-delay: 0s }
    .listEffect li:nth-child(2n+2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s }

    .card .list li p{ font-size: 1.08em; }
    .portfolio .tit { padding: 0 2em; }

    .benefit .cont li { width: 47%; margin: 1.5%; }
    .cost .lan { display: block; }
    .cost .lan table { width: 100%; }
    .cost .lan dl { width: 100%; padding: 2em; margin-top: 2em; }
    .cost .lan dd:nth-of-type(1) { padding: 1em; display: flex; }
    .cost .lan dd div { width: 33.333%; }

    .estimate .wrap {display: block; }
    .estimate .write { width: 100%; }
    .estimate .txt-box { width: 100%; padding: 3em; }

    .modify li,
    .after .other li { padding: 2em 0; }

    .after .write .frm-wrap li.half { width: 100%; }
    .after .write .frm-wrap .frm-label { width: 30%; }
    .after .write .frm-wrap .frm-box { width: 70%; }

    .membership .box { padding: 2em; }
    .membership .box2 p br { display: none; }
    .membership .box2 { width: 100%; margin-right: 0; margin-bottom: 3%; text-align: left; }
    .membership .box2 ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1em 0; }
    .membership .box2 li { width: 49%; }
    .membership .box2 .line { margin: 1em 0; }
    .membership .box2 h4 { position: absolute; right: 2em; top: 3em; }
    .membership .box2 button { display: block; margin: auto; margin-top: 1em; }

    header .gnb { display: none; }
    .gnb-btn { display: block; }

    .after .write .info { width: 60%; }
    .frm-wrap { font-size: 16px; }

    /*.main .card .txt { width: 100%; }*/
    /*.main .card .txt-box { font-size: 1.25em; }*/
    /*.main .card .cont .swiper { position: static; height: 100%; width: 100%; }*/
    .main .portfolio { padding-top: 6em; }
    .main .portfolio .cont { overflow: hidden; }
    .main .portfolio .marquee { height: 80vw; }

    .website .inner { margin-top: 0;  }
}
.estimate { overflow: hidden; }
@media screen and (max-width: 674px){
    html { font-size: 12px; }
    header { font-size: 2.5vw; }
    header .inner { height: 5em; }
    header .logo { width: 8em; }

    .main .visual { display: none; }
    .frm-wrap { font-size: 14px; }
    .inquiry .txt dl { line-height: 40px; }
    .inquiry .txt dt { font-size: 16px;}
    .inquiry .txt .swiper { font-size: 14px; height: 160px; }

    .estimate .write { padding: 2em; }
}
@media screen and (max-width: 450px){
    html { word-break: keep-all; }
    .main .visual { padding: 0 5% 10%; }
    .main .visual .txt { display: none; }
    .main .visual .txt h2 { font-size: 2em; line-height: 1.2; }
    .main .visual .txt a { font-size: 0.875em; }

    .txt { font-size: 1.25em; }
    .txt h2 { font-size: 2.125em; }
    .txt br { display: none; }
    .txt h2 br { display: block; }

    .flex-wrap .cont { width: 100% !important; }
    .chatting .cont img { width: 100%; }

    footer .fnb > ul { display: none; }
    footer .family { top: -1em; }
    footer .info { margin-top: 0; }
    footer .info h5 { margin: 1em 0; }
    .portfolio .list .txt-box { padding: 1em 1.25em; }
    .benefit .cont .price { font-size: 1.25em; }
    .benefit .cont h4 { margin: 1em 0; }
    .benefit .cont p br { display: none; }

    .cost .web .other { flex-wrap: wrap; }
    .cost .web .other strong { display: block;width: 100%; }

    .inquiry h2 br { display: none; }
    .inquiry .cont li.half { width: 100%; }
    .inquiry .cont li.half:nth-child(odd) { margin-right: 0; }
    .portfolio .tit a { display: block; margin: 0; }
    .portfolio .count { width: 30%; }
    .portfolio .tit { width: 70%; }

    .cate ul { flex-wrap: wrap; }
    .cate li { margin: 1%; }

    .card .list h4 { font-size: 1.25em; }
    .card .list h5 img { width: 3em; }

    .membership .box1 { display: block; }
    .membership .box1 > .left { width: 100%; position: relative; }
    .membership .box1 > .right { width: 100%; }
    .membership .box1 .left h4 { position: absolute; bottom: 20px; right: 0; }
    .membership .box1 .left .line { margin: 10px 0; }

    .after .write.open { display: block; }
    .after .write .info { width: 100%; margin-bottom: 1em; }
    .frm-btn .btn-submit { font-size: 16px; }

    .modify li, .after .other li { width: 48%; }
    .after .listEffect li:nth-child(2n+1) { -webkit-animation-delay: 0s; animation-delay: 0s }
    .after .listEffect li:nth-child(2n+2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s }

    .frm-wrap h4 { font-size: 20px; }
    .estimate .frm-file input[type='text'] { width: calc(100% - 80px); display: block; }
    .estimate .frm-file label { width: 80px; display: block; font-size: 0.875em; }

    .wrapper #bo_v .ev_list_btn { top: 0; margin-top: -2em; width: 2em; height: 2em; }
    .wrapper #bo_v .vi_subject { font-size: 1.5em; }
    .wrapper #bo_v .btn_submit { font-size: 1.125em; }
    .wrapper section { padding: 5em 0; }

    .main .card .list li.big h6 { height: auto; }
    .main .card .list li.big a { display: block; }
    .main .card .list li.big a > div { width: 100%; }
    .main .card .list li.big .img-box { padding-top: 75%; }

    .partner .cont li { width: 50%; }
    .partner .cont li:last-child { display: none; }

    .counsel .cont ul { flex-wrap: wrap; }
    .counsel .cont li:nth-child(1) { width: 50%;}
    .counsel .cont li {width: 46%; }
    .txt h2 { font-size: 1.5em; }
    .inquiry .txt p { padding: 0 1em; }
    .main .portfolio {padding:0 0 2em 0;}
}
@media screen and (max-width: 376px){
    header,footer { zoom: 0.9; }
    .wrapper { zoom: 0.8; }
    .main .portfolio {padding:0 0 2em 0;}
}