:root { --color-point:#16C47F; --color-sub:#FF9D23; --color-light:#FFD65A; --color-deny:#F93827; } /* 전체 */ body {background:#fff;position:relative;} /* height:calc(var(--vh, 1vh) * 100); */ #wrap {margin:0 auto;position: relative;height:100%;text-align: center;} #header.drop {background:rgba(33,33,33,0.5);} /* 헤더 */ #header {display:flex;align-items: center;padding:30px;width:100%;top: 0;left: 0;z-index:999;position:fixed;width:100%;height:100px;} #header .navbar {display: flex;align-items: center;justify-content: space-between;padding: 0 20px;color:#fff;height:100%;width:100%;} #header .navbar .left {text-align:left;} #header .navbar .right {text-align:right;display:none;} #header .navbar .left {font-weight:900;font-size:26px;} #header .navbar .center {flex: 1;display: flex;justify-content: center;} #header .navbar .menu {display: flex;gap: 70px;list-style: none;padding: 0;margin: 0;} #header .navbar .menu li a {text-decoration: none;color:#fff;font-size: 16px;font-weight:500;} #header .navbar .menu li a:hover {color:var(--color-point);font-weight:900;} #header .navbar .menu-icon {width: 30px;height: 25px;flex-direction: column;justify-content: space-between;cursor: pointer;position: relative;} #header .navbar .menu-icon .line {width: 100%;height: 3px;background-color: #fff;transition: all 0.3s ease;} #header .navbar .menu-icon .line1 {transform-origin: top left;} #header .navbar .menu-icon .line3 {transform-origin: bottom left;} #header .navbar .menu-icon.active .line1 {transform: rotate(45deg);} #header .navbar .menu-icon.active .line2 {opacity: 0;} #header .navbar .menu-icon.active .line3 {transform: rotate(-45deg);} /* 메인화면 */ #contents .main-cont .navi {position:fixed;right:20px;top:50%;z-index:1;font-size:12px;margin-top:-100px;} #contents .main-cont .navi a {display:flex;align-items: center;height:30px;padding:0 13px;border-radius:20px;} #contents .main-cont .navi a.active {background:var(--color-point);color:#fff;} #contents .main-cont .navi a span {margin-left:5px;} #contents .main-cont .navi:after {content:"";} #contents .main-cont section + section {margin-top:50px;} #contents .main-cont .main-img { height:calc((var(--vh, 1vh) * 100) ); width:100%; position:relative; display:flex; background: url('../img/home/img_main4.jpg') center top no-repeat; -webkit-animation: Wave_back 35s ease infinite; -moz-animation: Wave_back 35s ease infinite; animation: Wave_back 35s ease infinite; background-size:cover; } #contents .main-cont .main-img .cover {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items: center;justify-content: center;} #contents .main-cont .main-img .cover .intro {color:#fff;max-width:360px;} #contents .main-cont .main-img .cover .intro .title1 {font-size:25px;font-weight:bold;} #contents .main-cont .main-img .cover .intro .title2 {font-size:16px;color:#eee;margin-top:20px;} #contents .main-cont .main-img .cover .intro .title2 strong {color:var(--color-point);} #contents .main-cont .portfolio {padding:120px 0px;margin:0 auto;background:#f9f9f9;} #contents .main-cont .portfolio .inner {max-width:1400px;margin:0 auto;margin-top:50px;} #contents .main-cont .portfolio .subject {font-size:30px;font-weight:bold;height:50px;display:flex;align-items: center;justify-content: center;} #contents .main-cont .portfolio .item-list {display:grid;grid-template-columns: repeat(4, 1fr);margin-top:50px;gap:40px;} #contents .main-cont .portfolio .item-list .item {box-shadow:0 0px 20px 0 rgba(0,0,0,0.1);overflow:hidden;} #contents .main-cont .portfolio .item-list .item img {width:100%;object-fit: cover;aspect-ratio: 1 / 0.7;transition: transform 0.6s ease; } #contents .main-cont .portfolio .item-list .item:hover img {transform: scale(1.1);} #contents .main-cont .portfolio .item-list .item .detail {padding:30px;text-align:left;} #contents .main-cont .portfolio .item-list .item .detail .category {text-align:left;color:#999;font-size:13px;} #contents .main-cont .portfolio .item-list .item .detail .desc {margin-top:30px;font-size:16px;font-weight:bold;} #contents .main-cont .portfolio .item-list .item .detail .link {margin-top:30px;width:120px;height:40px;display:inline-flex;align-items: center;justify-content: center;border:solid 1px #ccc;color:#999;font-size:13px;} #contents .main-cont .portfolio .more {width:200px;height:50px;margin-top:30px;background:#fff;color:#fff;background:var(--color-point);border:solid 1px var(--color-point);display:inline-flex;align-items: center;justify-content: center;} #contents .main-cont .add {padding:120px 0px;margin:0 auto;background:#f9f9f9;} #contents .main-cont .add .inner {max-width:1200px;margin:0 auto;margin-top:50px;} #contents .main-cont .add .subject {font-size:30px;font-weight:bold;display:flex;align-items: center;justify-content: center;} #contents .main-cont .add .detail {font-size:14px;color:#454545;text-align:center;margin-top:20px;} #contents .main-cont .add .service-list {display:grid;grid-template-columns: repeat(3, 1fr);gap:40px;} #contents .main-cont .add .service-list .item {background:#fff;padding:40px 20px;box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);border:solid 1px #eee;} #contents .main-cont .add .service-list .item img {width:200px;height:200px;border-radius:200px;} #contents .main-cont .add .service-list .item .title {font-size:20px;font-weight:800;margin-top:20px;margin-bottom:15px;} #contents .main-cont .add .service-list .item .desc {color:#454545;line-height:28px;font-size:14px;} #contents .main-cont .add .service-list .item .more {margin-top:20px;width:100%;max-width:200px;height:45px;display:inline-flex;align-items: center;justify-content: center;color:#fff;background:#232323;border:solid 1px #232323;font-size:13px;} #contents .main-cont .service {padding:150px 0px;margin:0 auto;background:#fff;} #contents .main-cont .service > .inner {max-width:1400px;margin:0 auto;margin-top:50px;} #contents .main-cont .service .subject {font-size:30px;font-weight:bold;display:flex;align-items: center;justify-content: center;} #contents .main-cont .service .detail {font-size:15px;color:#454545;text-align:center;margin-top:20px;} #contents .main-cont .service .service-list {display:grid;grid-template-columns: repeat(3, 1fr);gap: 40px;} #contents .main-cont .service .service-list .item {background:#fff;box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);display:inline-flex;align-items: center;justify-content: center;} #contents .main-cont .service .service-list .item img {width:100%;object-fit: cover;aspect-ratio:1/0.8;} #contents .main-cont .service .service-list .item .title {font-size:20px;font-weight:800;margin-top:20px;margin-bottom:15px;padding:10px;} #contents .main-cont .service .service-list .item .btn {padding-left:20px;padding-right:20px;padding-bottom:20px;} #contents .main-cont .service .service-list .item .more {max-width:200px; width:100%;height:45px;display:inline-flex;align-items: center;justify-content: center;color:#232323;background:#fff;border:dashed 1px #232323;font-size:13px;} #contents .main-cont .inquiry {padding:150px 0px;margin:0 auto;background:#fff;} #contents .main-cont .inquiry .inner {max-width:1400px;margin:0 auto;margin-top:50px;border-top:solid 2px #131313;} #contents .main-cont .inquiry > .subject {font-size:30px;font-weight:bold;display:flex;align-items: center;justify-content: center;} #contents .main-cont .inquiry .detail {font-size:14px;color:#454545;text-align:center;margin-top:20px;} #contents .main-cont .inquiry .inquiry-list {} #contents .main-cont .inquiry .inquiry-list .item {height:auto;} #contents .main-cont .inquiry .inquiry-list .item { border-bottom:solid 1px #ddd;} #contents .main-cont .inquiry .inquiry-list .item .title {padding:10px 20px;height:80px;width:100%;display:flex;align-items: center;justify-content: space-between;font-weight:bold;cursor:pointer;} #contents .main-cont .inquiry .inquiry-list .item .title .qu {width:34px;height:34px;display:inline-flex;align-items: center;justify-content: center;background:#ddd;border-radius:5px;color:#fff;margin-right:25px;} #contents .main-cont .inquiry .inquiry-list .item .title .arrow {font-size:26px;color:#999;transition: transform 0.3s ease; } #contents .main-cont .inquiry .inquiry-list .item .answer{display:none;background:#eff1f4;padding:10px 20px;} #contents .main-cont .inquiry .inquiry-list .item.active .answer { text-align:left;padding:20px;padding-left:80px;position:relative;line-height:28px;} #contents .main-cont .inquiry .inquiry-list .item.active .answer .qu {position:absolute;left:20px;top:20px;width:34px;height:34px;display:inline-flex;align-items: center;justify-content: center;background:#121212;border-radius:5px;color:#fff;margin-right:10px;} #contents .main-cont .inquiry .inquiry-list .item.active .title .qu {background:var(--color-point);} #contents .main-cont .inquiry .inquiry-list .item.active .answer a {padding:10px 20px;border:solid 1px var(--color-point);color:var(--color-point);border-radius:5px;font-size:13px;font-weight:bold;} #contents .main-cont .inquiry .inquiry-list .item.active .answer strong {font-weight:bold;color:var(--color-point);} #contents .main-cont .inquiry .inquiry-list .item.active .arrow { transform: rotate(180deg);} #contents .main-cont > .free {padding:120px 0px;margin:0 auto;background:#f9f9f9;} #contents .main-cont .free .inner {max-width:1400px;margin:0 auto;} #contents .main-cont .free .subject {font-size:30px;font-weight:bold;height:50px;display:flex;align-items: center;justify-content: center;} #contents .main-cont .free .detail {font-size:15px;color:#454545;line-height:26px;margin-top:20px;} #contents .main-cont .free .item-list {display:grid;grid-template-columns: repeat(5, 1fr);margin-top:50px;gap:0px;} #contents .main-cont .free .item-list .item {box-shadow:0 0px 20px 0 rgba(0,0,0,0.1);overflow:hidden;padding:20px;border:dashed 1px #454545;position:relative;} #contents .main-cont .free .item-list .item {padding:20px;} #contents .main-cont .free .item-list .item .sub {margin-top:40px;font-size:18px;color:#999;line-height:26px;} #contents .main-cont .free .item-list .item .title {font-size:18px;font-weight:bold;color:#121212;margin-top:20px;} #contents .main-cont .free .item-list .item .icon {margin-top:20px;margin-bottom:20px;color:var(--color-point);} #contents .main-cont .free .item-list .item .icon i {font-size:60px;} #contents .main-cont .free .item-list .item .desc {color:#666;font-size:16px;} #contents .main-cont .free.point {background:#f9f9f9;} #contents .main-cont .free.point .item-list .item .icon {margin-top:20px;margin-bottom:20px;color:var(--color-deny);} #contents .main-cont .free.point .item-list .item .num {position:absolute;left:10px;top:10px; width:30px;height:30px;display:inline-flex;align-items: center;justify-content: center;background:var(--color-deny);color:#fff;margin-right:10px;} #contents .main-cont .free .btn-inquiry {margin:0 auto;margin-top:60px;width:250px;height:60px;background:var(--color-point);color:#fff;display:flex;align-items: center;justify-content:center;} #contents .main-cont .free .more {width:200px;height:50px;margin-top:30px;background:#fff;color:#fff;background:var(--color-point);border:solid 1px var(--color-point);display:inline-flex;align-items: center;justify-content: center;} /* 서비스 */ #contents .service-cont .section-img { height:550px; width:100%; position:relative; display:flex; background: url('../img/home/img_main4.jpg') center top no-repeat; background-size:cover; } #contents .service-cont .section-img .cover {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items: center;justify-content: center;} #contents .service-cont .section-img .cover .intro {color:#fff;max-width:360px;} #contents .service-cont .section-img .cover .intro .title1 {font-size:25px;font-weight:bold;} #contents .service-cont .section-img .cover .intro .title2 {font-size:16px;color:#eee;margin-top:20px;} #contents .service-cont .section-img .cover .intro .title2 strong {color:var(--color-point);} #contents .service-cont > .price {padding:120px 0px;margin:0 auto;background:#f9f9f9;} #contents .service-cont .price .inner {max-width:1400px;margin:0 auto;margin-top:50px;} #contents .service-cont .price .subject {font-size:30px;font-weight:bold;height:50px;display:flex;align-items: center;justify-content: center;} #contents .service-cont .price .detail {font-size:16px;color:#454545;line-height:26px;margin-top:20px;} #contents .service-cont .price .item-list {display:grid;grid-template-columns: repeat(3, 1fr);margin-top:50px;gap:60px;} #contents .service-cont .price .item-list .item {box-shadow:0 0px 20px 0 rgba(0,0,0,0.1);overflow:hidden;padding:30px;border:solid 1px #454545;} #contents .service-cont .price .item-list .item .img {margin-top:20px;} #contents .service-cont .price .item-list .item .img img {width:150px;height:150px;border-radius:150px;object-fit: cover;} #contents .service-cont .price .item-list .item .top {padding:20px;} #contents .service-cont .price .item-list .item .top .sub {font-size:18px;color:var(--color-point);line-height:26px;font-weight:bold;} #contents .service-cont .price .item-list .item .top .title {font-size:26px;font-weight:bold;color:#121212;margin-top:10px;} #contents .service-cont .price .item-list .item .top .price {color:var(--color-point);font-size:18px;margin-top:20px;} #contents .service-cont .price .item-list .item .top .price strong {font-size:46px;font-weight:bold;margin-right:2px;} #contents .service-cont .price .item-list .item .desc span {display:flex;height:50px;align-items: center;border-top:dashed 1px #ccc;} #contents .service-cont .price .item-list .item .btn {margin-top:20px;width:100%;height:45px;background:var(--color-point);color:#fff;display:flex;align-items: center;justify-content: center;} #contents .service-cont > .free {padding:120px 0px;margin:0 auto;background:#fff;} #contents .service-cont .free .inner {max-width:1400px;margin:0 auto;} #contents .service-cont .free .subject {font-size:30px;font-weight:bold;height:50px;display:flex;align-items: center;justify-content: center;} #contents .service-cont .free .detail {font-size:16px;color:#454545;line-height:26px;margin-top:20px;} #contents .service-cont .free .item-list {display:grid;grid-template-columns: repeat(5, 1fr);margin-top:50px;gap:0px;} #contents .service-cont .free .item-list .item {box-shadow:0 0px 20px 0 rgba(0,0,0,0.1);overflow:hidden;padding:20px;border:dashed 1px #454545;position:relative;} #contents .service-cont .free .item-list .item {padding:20px;} #contents .service-cont .free .item-list .item .sub {margin-top:40px;font-size:18px;color:#999;line-height:26px;} #contents .service-cont .free .item-list .item .title {font-size:18px;font-weight:bold;color:#121212;margin-top:20px;} #contents .service-cont .free .item-list .item .icon {margin-top:20px;margin-bottom:20px;color:var(--color-point);} #contents .service-cont .free .item-list .item .icon i {font-size:60px;} #contents .service-cont .free .item-list .item .desc {color:#666;font-size:16px;} #contents .service-cont .free.point {background:#f9f9f9;} #contents .service-cont .free.point .item-list .item .icon {margin-top:20px;margin-bottom:20px;color:var(--color-deny);} #contents .service-cont .free.point .item-list .item .num {position:absolute;left:10px;top:10px; width:30px;height:30px;display:inline-flex;align-items: center;justify-content: center;background:var(--color-deny);color:#fff;margin-right:10px;} #contents .service-cont .free .btn-inquiry {margin:0 auto;margin-top:60px;width:250px;height:60px;background:var(--color-point);color:#fff;display:flex;align-items: center;justify-content:center;} /* 서비스 */ #contents .portf-cont .section-img { height:550px; width:100%; position:relative; display:flex; background: url('../img/home/img_main4.jpg') center top no-repeat; background-size:cover; } #contents .portf-cont .section-img .cover {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items: center;justify-content: center;} #contents .portf-cont .section-img .cover .intro {color:#fff;max-width:360px;} #contents .portf-cont .section-img .cover .intro .title1 {font-size:25px;font-weight:bold;} #contents .portf-cont .section-img .cover .intro .title2 {font-size:16px;color:#eee;margin-top:20px;} #contents .portf-cont .portfolio {padding:120px 0px;margin:0 auto;background:#f9f9f9;} #contents .portf-cont .portfolio .inner {max-width:1400px;margin:0 auto;margin-top:50px;} #contents .portf-cont .portfolio .subject {font-size:30px;font-weight:bold;height:50px;display:flex;align-items: center;justify-content: center;} #contents .portf-cont .portfolio .item-list {display:grid;grid-template-columns: repeat(4, 1fr);margin-top:50px;gap:40px;} #contents .portf-cont .portfolio .item-list .item {box-shadow:0 0px 20px 0 rgba(0,0,0,0.1);overflow:hidden;} #contents .portf-cont .portfolio .item-list .item img {width:100%;object-fit: cover;aspect-ratio: 1 / 0.7;transition: transform 0.6s ease; } #contents .portf-cont .portfolio .item-list .item:hover img {transform: scale(1.1);} #contents .portf-cont .portfolio .item-list .item .detail {padding:30px;text-align:left;} #contents .portf-cont .portfolio .item-list .item .detail .category {text-align:left;color:#999;font-size:13px;} #contents .portf-cont .portfolio .item-list .item .detail .desc {margin-top:30px;font-size:16px;font-weight:bold;} #contents .portf-cont .portfolio .item-list .item .detail .link {margin-top:30px;width:120px;height:40px;display:inline-flex;align-items: center;justify-content: center;border:solid 1px #ccc;color:#999;font-size:13px;} #contents .portf-cont .portfolio .more {width:200px;height:50px;margin-top:30px;background:#fff;color:#fff;background:var(--color-point);border:solid 1px var(--color-point);display:inline-flex;align-items: center;justify-content: center;} /* 견적문의 */ #contents .counsel-cont .section-img { height:550px; width:100%; position:relative; display:flex; background: url('../img/home/img_main4.jpg') center top no-repeat; background-size:cover; } #contents .counsel-cont .section-img .cover {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items: center;justify-content: center;} #contents .counsel-cont .section-img .cover .intro {color:#fff;max-width:360px;} #contents .counsel-cont .section-img .cover .intro .title1 {font-size:25px;font-weight:bold;} #contents .counsel-cont .section-img .cover .intro .title2 {font-size:16px;color:#eee;margin-top:20px;} #contents .counsel-cont .form {padding:120px 0px;margin:0 auto;background:#fff;} #contents .counsel-cont .form .inner {max-width:1200px;margin:0 auto;} #contents .counsel-cont .form .inner > .subject {font-size:30px;font-weight:bold;height:50px;display:flex;align-items: center;justify-content: center;} #contents .counsel-cont .form .detail {font-size:16px;color:#454545;line-height:26px;margin-top:20px;} #contents .counsel-cont .form .guide {font-size:28px;font-weight:bold;height:60px;display:flex;align-items: center;border-bottom:solid 1px #333;} #contents .counsel-cont .form .guide span {color:#676767;font-size:13px;margin-left:8px;} #contents .counsel-cont .form .guide {margin-top:50px;} #contents .counsel-cont .form .item {display:flex;flex-wrap:wrap;gap:20px 30px;width:100%;} #contents .counsel-cont .form .item .col {flex:1 1 45%;text-align:left;padding-top:25px;} #contents .counsel-cont .form .item .col-2 {flex:1 1 100%;padding-top:15px;} #contents .counsel-cont .form .item .col .name {color:#232323;font-size:16px;font-weight:bold;} #contents .counsel-cont .form .item .col .name span {color:var(--color-point);font-weight:normal;font-size:14px;margin-left:2px;} #contents .counsel-cont .form .item .col input[type='text'] {width:100%;height:47px;color:#454545;margin-top:8px;border:solid 1px #d4d4d4;border-radius:2px;padding-left:10px;font-size:14px;} #contents .counsel-cont .form .item .col .textarea {width:100%;height:170px;color:#454545;margin-top:8px;border:solid 1px #d4d4d4;border-radius:2px;padding:15px;font-size:14px;} #contents .counsel-cont .form .item + .item {margin-top:30px;} #contents .counsel-cont .form .item .col .tit {color:#232323;font-size:20px;font-weight:bold;} #contents .counsel-cont .form .item .col .tit span {color:var(--color-point);font-weight:normal;font-size:14px;margin-left:2px;} #contents .counsel-cont .form .btns {padding-top:20px;text-align:center;border-top:solid 1px #d4d4d4;margin-top:20px;} #contents .counsel-cont .form .btns .btn-save {width:300px;height:60px;display:inline-flex;align-items: center;justify-content: center;background:var(--color-point);color:#fff;border:none;} #contents .counsel-cont .form .item .policy {margin-top:20px;border:solid 1px #ddd;padding:20px;width:100%;height:150px;overflow-y:auto;text-align:left;} /* 서비스 */ #contents .demo-cont .section-img { height:550px; width:100%; position:relative; display:flex; background: url('../img/home/img_main4.jpg') center top no-repeat; background-size:cover; } #contents .demo-cont .section-img .cover {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items: center;justify-content: center;} #contents .demo-cont .section-img .cover .intro {color:#fff;max-width:360px;} #contents .demo-cont .section-img .cover .intro .title1 {font-size:25px;font-weight:bold;} #contents .demo-cont .section-img .cover .intro .title2 {font-size:16px;color:#eee;margin-top:20px;} #contents .demo-cont .demo {padding:120px 0px;margin:0 auto;background:#f9f9f9;} #contents .demo-cont .demo .inner {max-width:1400px;margin:0 auto;} #contents .demo-cont .demo .subject {font-size:30px;font-weight:bold;height:50px;display:flex;align-items: center;justify-content: center;} #contents .demo-cont .demo .demo-list {display:grid;grid-template-columns: repeat(4, 1fr);margin-top:50px;gap:40px;} #contents .demo-cont .demo .demo-list .item {box-shadow:0 0px 20px 0 rgba(0,0,0,0.1);overflow:hidden;} #contents .demo-cont .demo .demo-list .item img {width:100%;object-fit: cover;aspect-ratio: 1 / 0.7;transition: transform 0.6s ease; } #contents .demo-cont .demo .demo-list .item:hover img {} #contents .demo-cont .demo .demo-list .item .detail {padding:30px;text-align:left;} #contents .demo-cont .demo .demo-list .item .detail .category {text-align:left;color:#999;font-size:13px;} #contents .demo-cont .demo .demo-list .item .detail .category .tag + .tag {margin-left:8px;} #contents .demo-cont .demo .demo-list .item .detail .desc {margin-top:30px;font-size:16px;font-weight:bold;min-height:44px;} #contents .demo-cont .demo .demo-list .item .detail .link {margin-top:30px;width:120px;height:40px;display:inline-flex;align-items: center;justify-content: center;border:solid 1px #ccc;color:#999;font-size:13px;} #contents .demo-cont .demo .demo-list .item .btn-view a {height:44px;background:var(--color-point);color:#fff;display:flex;align-items: center;justify-content: center;border-radius:5px;margin-top:16px;font-size:13px;font-weight:bold;} #contents .demo-cont .demo .demo-list .item .btns {height:50px;width:100%;display:flex;} #contents .demo-cont .demo .demo-list .item .btns a {width:50%;height:100%;display:inline-flex;justify-content:center;font-size:14px;align-items: center;} #contents .demo-cont .demo .demo-list .item .btns a.site {background:#333;color:#fff;font-weight:bold;} #contents .demo-cont .demo .demo-list .item .btns a.admin {background:#eee;color:#333;font-weight:bold;} /* 체크,라디오,첨부파일 버튼 처리 */ .site-check-form {display: flex;gap: 20px 45px;flex-wrap:wrap;} .site-check-form label input {display: none;} .site-check-form label span {cursor: pointer;display: flex;align-items: center;color: #232323;font-size: clamp(15px, 2vw, 16px);font-weight: 400;letter-spacing: -0.64px;line-height: 1;} .site-check-form label input[type="radio"] + span::before {content: "";box-sizing: border-box;display: block;transform: translateY(-1px);width: clamp(17px, 2vw, 22px);height: auto;aspect-ratio: 1;margin-right: 8px;border-radius: 9999px;border: 1px solid #ddd;} .site-check-form label input[type="radio"]:checked + span::before {border: clamp(4px, 0.5vw, 6px) solid var(--color-point);} .site-check-form label input[type="checkbox"] + span::before {font-family: "remixicon";content: '\eb7b';display: inline-flex;width: 28px;height: 28px;border-radius: 4px;border: 1px solid #ddd;margin-right:5px;font-size:17px;align-items: center;justify-content: center;color:#ddd;} .site-check-form label input[type="checkbox"]:checked + span::before {color: var(--color-point);font-weight:bold;border:solid 1px var(--color-point);} .custom-file {position: relative;display: inline-block;width: 300px;} .site-file-form {display:flex;position:relative;border:solid 1px var(--color-point);width:100%;} .site-file-form input[type="file"] {position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;cursor: pointer;} .site-file-form .file-label {display: flex;height:45px;width:150px; justify-content:center;align-items: center;background-color: var(--color-point);color: #fff;cursor: pointer;transition: background-color 0.3s;font-size:14px;} .site-file-form .file-label:hover {opacity: 0.8;} .site-file-form .file-name {font-size: 14px;color: #333;padding-left:15px;display:inline-flex;width:100%;align-items: center;} /* 푸터 */ #footer {background:#eff1f4;color:#111;font-size:14px;} #footer .inner {max-width:1400px;margin:0 auto;} #footer .line {align-items: center;background:#fff;border-top:solid 1px #eff1f4;} #footer .line > .inner {display:flex;display:flex;gap:40px;height:60px;align-items: center;font-size:14px;} #footer .info {max-width:1400px;margin:0 auto;padding:40px 0px;line-height:28px;color:#999;} .right-menu {height: 100%;width: 0;position: fixed;z-index: 1; top: 0;right: 0;display:flex;align-items: center;background:rgba(0,0,0,0.6);overflow-x: hidden;transition: 0.3s;z-index:9999;} .right-menu .inner {padding-left:30px;} .right-menu .link {text-decoration: none;font-size: 13px;color: #fff;display: block;transition: 0.3s;font-weight:900;} .right-menu .link + .link {margin-top:50px;} .right-menu .link:hover {color: #f1f1f1;} .right-menu .btn-menu-close {position: absolute;top:5px;right:25px;font-size:36px;margin-left: 50px;color:#fff;} .fixed_inquiry {position:fixed;bottom:25px;right:25px;width:70px;height:70px;background:var(--color-sub);display:inline-flex;align-items: center;justify-content: center;border-radius:100px;z-index:99999;overflow:hidden;} .fixed_inquiry a {display:inline-flex;width:100%;height:100%;align-items: center;justify-content: center;position:relative;} .fixed_inquiry a {font-size:22px;color:#fff;} .fixed_inquiry img {width:20px;height:auto;} /* 추가사항 웨이브, 스크롤다운 */ #cursor {position: absolute;width: 12px;height: 12px;border: 1px solid rgba(255, 255, 255, 0.6);border-radius: 50%;pointer-events: none;animation: mouse-animation 1.5s infinite ease-out;} .waves {position:absolute;bottom:-30px;left:0px;width: 100%;height:15vh;margin-bottom:-7px;min-height:100px;max-height:150px;overflow:hidden;} .scroll-downs {position:absolute;left:50%;bottom: 50px;margin-left:-40px;width:100px;display:block;} .scroll-downs .title {font-size:12px;color:#f9f9f9;height:26px;align-items: center;display:block;} .scroll-downs .mousey {width:3px;padding: 10px 15px;height: 35px;border: 2px solid #fff;border-radius: 25px;opacity: 0.75;box-sizing: content-box;display:inline-block;} .scroll-downs .scroller {width: 3px;height: 10px;border-radius: 25%;background-color: #fff;animation-name: mouse-scroll;animation-duration: 2.2s;animation-timing-function: cubic-bezier(.15,.41,.69,.94);animation-iteration-count: infinite;} /* 헤더 반응형 처리 :800 */ @media screen and (max-width:1400px) { #contents .main-cont .portfolio > .inner {padding:0px 10px;} #contents .main-cont .add > .inner {padding:0px 10px;} #contents .main-cont .service > .inner {padding:0px 10px;} #contents .main-cont .inquiry > .inner {padding:0px 10px;} #contents .main-cont > .free {padding:40px 0px;} #contents .main-cont .portfolio {padding:40px 0px;padding-top:60px;} #contents .main-cont .add {padding:40px 0px;} #contents .main-cont .service {padding:40px 0px;} #contents .main-cont .inquiry {padding:40px 20px;} #contents .service-cont > .price {padding:40px 0px;} #contents .service-cont > .free {padding:40px 0px;} #contents .portf-cont .portfolio > .inner {padding:0px 10px;} #contents .portf-cont .portfolio {padding:40px 0px;padding-top:60px;} #contents .counsel-cont .form {padding-left:20px;padding-right:20px;} #contents .demo-cont > .demo {padding:40px 0px;} #contents .demo-cont .demo .inner {margin-top:0px;} } /* 헤더 반응형 처리 :800 */ @media screen and (max-width:1600px) { #contents .main-cont .navi {display:none;} } /* 헤더 반응형 처리 :1400 */ @media screen and (max-width:1400px) { #footer .line > .inner {padding:0px 20px;} #footer .info {padding:20px;} /* demo */ #contents .demo-cont .inner {padding:20px;} #contents .main-cont .free .inner {padding:20px;} #contents .service-cont .price .item-list {grid-template-columns: repeat(2, 1fr);gap:40px;} #contents .service-cont .inner {padding:20px;} } /* 헤더 반응형 처리 :800 */ @media screen and (max-width:1200px) { #header .navbar .menu {display:none;} #header .navbar .right {display: flex;} #contents .main-cont .portfolio .item-list {grid-template-columns: repeat(3, 1fr);} #contents .main-cont .service .service-list {grid-template-columns: repeat(2, 1fr);} #contents .main-cont .add .service-list {grid-template-columns: repeat(2, 1fr);} #contents .main-cont .free .item-list {grid-template-columns: repeat(4, 1fr);} #contents .portf-cont .portfolio .item-list {grid-template-columns: repeat(3, 1fr);} #contents .service-cont .free .item-list {grid-template-columns: repeat(4, 1fr);} #contents .demo-cont .demo .demo-list {grid-template-columns: repeat(3, 1fr);} } /* 헤더 반응형 처리 :800 */ @media screen and (max-width:800px) { #contents .main-cont .portfolio .item-list {grid-template-columns: repeat(2, 1fr);gap:0px;} #contents .main-cont .portfolio .item-list .item {border:solid 1px #eee;} #contents .main-cont .add .service-list {grid-template-columns: repeat(1, 1fr);gap:20px;} #contents .main-cont .service .service-list {grid-template-columns: repeat(2, 1fr);gap:0px;} #contents .main-cont .service .service-list .item {border-radius:0px;border:solid 1px #eee;} #contents .main-cont .service .service-list .item .title {font-size:14px;} #contents .main-cont .service .service-list .item .inner {padding:10px;} #contents .main-cont .service .service-list .item .btn {padding-left:0px;padding-right:0px;} #contents .main-cont .service .service-list .item .more {max-width:100%;width:100%;font-size:12px;height:40px;} #contents .main-cont .free .subject {font-size:20px;} #contents .portf-cont .portfolio .item-list {grid-template-columns: repeat(2, 1fr);gap:0px;} #contents .portf-cont .portfolio .item-list .item {border:solid 1px #eee;} #contents .main-cont .service > .subject {font-size:20px;} #contents .main-cont .inquiry > .subject {font-size:20px;} #contents .main-cont .add > .subject {font-size:20px;} #contents .main-cont .portfolio > .subject {font-size:20px;} #contents .portf-cont .portfolio > .subject {font-size:20px;} #contents .service-cont .free .subject {font-size:20px;} #contents .service-cont .price .subject {font-size:20px;} #contents .demo-cont .demo .subject {font-size:20px;} #contents .main-cont .inquiry .inquiry-list .item .title {padding:0px;font-size:13px;} #contents .main-cont .inquiry .inquiry-list .item.active .answer .qu {display:none;} #contents .main-cont .inquiry .inquiry-list .item.active .answer {font-size:13px;padding:10px;} #contents .main-cont .inquiry .inquiry-list .item .title .arrow {font-size:18px;} #contents .main-cont .service .detail {padding-left:20px;padding-right:20px;} #contents .main-cont .add .detail {padding-left:20px;padding-right:20px;} #contents .main-cont .portfolio .item-list .item .detail {padding:15px;} #contents .main-cont .portfolio .item-list .item .detail .desc {font-size:14px;margin-top:20px;} #contents .main-cont .portfolio .item-list .item .detail .link {font-size:12px;margin-top:20px;} #contents .main-cont .portfolio .more {font-size:13px;width:160px;height:40px;} #contents .main-cont .add .service-list .item {padding:20px;} #contents .main-cont .add .service-list .item .title {font-size:14px;} #contents .main-cont .add .service-list .item img {width:150px;height:150px;} #contents .main-cont .free.point .item-list .item .num {top:3px;left:3px;} #contents .main-cont .free .item-list {grid-template-columns: repeat(2, 1fr);} #contents .main-cont .free .inner {margin-top:0px;} #contents .main-cont .free .item-list .item .title {font-size:16px;} #contents .main-cont .free .item-list .item .desc {font-size:13px;} #contents .main-cont .free .item-list .item .icon i {font-size:45px;} #contents .portf-cont .portfolio .item-list .item .detail {padding:15px;} #contents .portf-cont .portfolio .item-list .item .detail .desc {font-size:14px;margin-top:20px;} #contents .portf-cont .portfolio .item-list .item .detail .link {font-size:12px;margin-top:20px;} #contents .portf-cont .portfolio .more {font-size:13px;width:160px;height:40px;} #contents .service-cont .section-img {height:400px;} #contents .portf-cont .section-img {height:400px;} #contents .counsel-cont .section-img {height:400px;} #contents .demo-cont .section-img {height:400px;} /*서비스 */ #contents .service-cont .price .detail {font-size:14px;} #contents .service-cont .price .inner {margin-top:10px;} #contents .service-cont .price .item-list {grid-template-columns: repeat(1, 1fr);gap:20px;} #contents .service-cont .inner {padding:20px;} #contents .service-cont .price .item-list .item {padding:10px;} #contents .service-cont .price .item-list .item .top .sub {margin-top:20px;font-size:14px;} #contents .service-cont .price .item-list .item .top .title {font-size:18px;margin-top:10px;} #contents .service-cont .price .item-list .item .desc span {height:36px;font-size:12px;color:#333;} #contents .service-cont .price .item-list .item .btn {font-size:13px;margin-top:10px;border-radius:5px;} #contents .service-cont .free.point .item-list .item .num {top:3px;left:3px;} #contents .service-cont .free .item-list {grid-template-columns: repeat(2, 1fr);} #contents .service-cont .free .inner {margin-top:0px;} #contents .service-cont .free .item-list .item .title {font-size:16px;} #contents .service-cont .free .item-list .item .desc {font-size:13px;} #contents .service-cont .free .item-list .item .icon i {font-size:45px;} #contents .service-cont .price .item-list .item .img img {width:120px;height:120px;} #contents .service-cont .price .item-list .item .top .price strong {font-size:40px;} /* counsel */ #contents .counsel-cont .form .inner > .subject {font-size:20px;} #contents .counsel-cont .form .guide {font-size:16px;} #contents .counsel-cont .form .guide span {font-size:13px;} #contents .counsel-cont .form .item .col .name {font-size:14px;} #contents .counsel-cont .form .item .col .tit {font-size:15px;} #contents .counsel-cont .form .item {gap:5px;} #contents .counsel-cont .form .item .col {flex:1 1 100%;} #contents .counsel-cont .form .item .col .site-check-form {display: grid;grid-template-columns: repeat(2, 1fr);grap:10px;} /* demo */ #contents .demo-cont .demo .demo-list {grid-template-columns: repeat(2, 1fr);gap:10px;} #contents .demo-cont .demo .demo-list .item .detail {padding:15px;} #contents .demo-cont .demo .demo-list .item .detail .desc {margin-top:20px;} /* footer */ #footer .line > .inner {font-size:12px;} #footer .info {font-size:12px;line-height:22px;} #header {padding:10px;height:70px;} #header .navbar .left {font-size:18px;} #header .navbar .menu-icon {width:20px;height:20px;} #header .navbar .menu-icon .line {height:1px;} #contents .main-cont .main-img { -webkit-animation: Wave_back 100s ease infinite; -moz-animation: Wave_back 100s ease infinite; animation: Wave_back 100s ease infinite; } .fixed_inquiry {position:fixed;bottom:15px;right:15px;width:60px;height:60px;} #contents .demo-cont .demo .demo-list .item .btns a {font-size:12px;} }