@charset "utf-8";
:root {
    --bg : #333;
    --txt : #ddd;
    --border : #fff;
    --point : #fdb124;
}   
@media (max-width : 890px) {
    body[data-dark="true"] {
        background: #333;
    }
}
.window-mask[data-dark="true"] {
    background-color: rgba(0, 0, 0, 0.7);
}
/* pc header */
.header .header-wrap[data-dark="true"] {
    border: 2px solid var(--border);
    background-color: var(--bg);
}
.header h1 .logo-box[data-dark="true"] {
    border-bottom: 2px solid var(--border);
}
.header h1 .logo-box .circle-wrap .circle[data-dark="true"] {
    border: 2px solid var(--border);
    background-color: var(--bg);
}
.header h1 .logo-box .circle-cover[data-dark="true"] {
    background-color: var(--bg);
}
.header .nav-wrap[data-dark="true"] {
    border-bottom: 2px solid var(--border);
}
.header .nav-wrap nav ul li a[data-dark="true"] {
    color: var(--txt);
}
.header .nav-wrap nav ul li.on a[data-dark="true"] {
    color:var(--point);
    text-shadow: 1px 2px 2px var(--bg);
}
.header .nav-wrap .divide-line[data-dark="true"] {
    background-color: var(--txt);
}
.header .nav-wrap .etc > ul > li a[data-dark="true"] {
    color: var(--txt);
}
.header .nav-wrap .etc > ul > li ul[data-dark="true"] {
    background-color: var(--bg);
}
/* footer */
.footer p[data-dark="true"] {
    color: var(--txt);
}
.footer .circle-wrap .circle[data-dark="true"] {
    border: 2px solid var(--border);
    background-color: var(--bg);
}
.footer .circle-cover[data-dark="true"] {
    background-color: var(--bg);
}

/* mb-header */
.mb-header[data-dark="true"] {
    background-color: var(--bg);
    box-shadow: 1px 2px 5px 1px rgba(255, 255, 255, 0.3);
}
.mb-header.transparent[data-dark="true"] {
    background-color: transparent;
    box-shadow: none;
}
.mb-btn .line[data-dark="true"] {
    background-color: var(--txt);
}
/* mb-menu */
.mb-nav[data-dark="true"] {
    background-color: var(--bg);
}
.mb-nav .mb-menu li a[data-dark="true"] {
    color: var(--txt);
}
.mb-nav .mb-menu li.on a[data-dark="true"] {
    color: var(--point);
}
.mb-divide-line[data-dark="true"] {
    background-color: var(--txt);
}
.mb-etc .dark-btn > a[data-dark="true"] {
    color: var(--txt);
}
.mb-etc .lang-btn > a[data-dark="true"] {
    color: var(--txt);
}
.mb-etc .lang-btn ul[data-dark="true"] {
    background-color: var(--txt);
    box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.15);
}
/* mb-footer */
.mb-footer[data-dark="true"] {
    background-color: var(--bg);
    border-top: 1px solid #999;
}
.mb-footer p[data-dark="true"] {
    color: var(--txt);
}

/* section */
.title-wrap .num[data-dark="true"] {
    /* color: var(--lightgray); */
}
.title-wrap .title[data-dark="true"] {
    color: var(--txt);
    color: #fff;
}

/* visual */
.visual .img-wrap video[data-dark="true"] {
    filter: brightness(0.8);
}

/* about */
.about-wrap .about-content > .img-wrap .circle-wrap .circle[data-dark="true"] {
    border: 2px solid var(--border);
    background-color: rgba(0, 0, 0, 0.7);
}
.about-wrap .sw-about[data-dark="true"] {
    border: 1px solid var(--border);
    background-color: rgba(0, 0, 0, 0.7);  
}
.about-wrap .sw-about .swiper-slide h3[data-dark="true"] {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}
.about-wrap .sw-about .swiper-slide h3 b[data-dark="true"] {
    /* color: var(--mainColor); */
}
.about-wrap .sw-about .swiper-slide > p[data-dark="true"] {
    color: var(--txt);
}
.about-wrap .sw-about .swiper-slide .box .sub-title-wrap >span[data-dark="true"] {
    background-color: var(--txt);
}
.about-wrap .sw-about .swiper-slide .box .sub-title[data-dark="true"] {
    color: var(--txt);
}
.about-wrap .sw-about .swiper-slide .box .sub-desc[data-dark="true"] {
    color: var(--txt);
}
.about-wrap .sw-about .swiper-slide .box .sub-desc span[data-dark="true"] {
    /* color: var(--lightgray); */
}
.about-wrap .sw-about .swiper-slide .box .sub-desc strong[data-dark="true"] {
    /* background-color: var(--point); */
    /* color: #333; */
}
.about-wrap .sw-about .swiper-slide .box .progress-area .progress-wrap > p[data-dark="true"] {
    color: var(--txt);
}

.about-wrap .about-content > .circle-wrap .circle[data-dark="true"] {
    border: 1px solid var(--border);
    background-color: rgba(0, 0, 0, 0.7);
}
.about-wrap .about-content > .circle-wrap .circle-cover[data-dark="true"] {
    background-color: rgba(0, 0, 0, 0.7);
}
.about-wrap .about-content .line-cover[data-dark="true"] {
    background-color: #000;
}
.about-wrap .about-content .swiper-btn[data-dark="true"] {
    color: var(--txt);
}
.about-wrap .swiper-btn span[data-dark="true"] {
    background-color: var(--txt);
}
@media (max-width:890px) {
    .about-wrap .about-content > .img-wrap .circle-wrap .circle[data-dark="true"] {
        background-color: #000;
    }
}

/* 웹퍼블리싱 */
.article .cover[data-dark="true"] {
	background: #ddd;
}
.article .cover[data-dark="true"]::after {
    background-color: #ddd;
}
.article .cover.both[data-dark="true"]::before {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100px;
    height: 100px;
    clip-path: path("M50,0 A50,50 0 0 1 100,50 A50,50 0 0 1 50,100 Z");
}
.web-wrap .article .inner .txt h2[data-dark="true"] {
	color: var(--txt);
}
.web-wrap .article .inner .txt h2[data-dark="true"]::after {
	background: #eee;
}
.web-wrap .article.active .inner .txt h2[data-dark="true"],
.web-wrap .article:hover .inner .txt h2[data-dark="true"] {
    color: #333;
}
.web-wrap .article .inner .txt p[data-dark="true"] {
	color: var(--txt);
}
.web-wrap .article.active .inner .txt p[data-dark="true"],
.web-wrap .article:hover .inner .txt p[data-dark="true"] {
    color: #333;
}

/* 디자인 */
.mask.right[data-dark="true"] {
    background-color: rgba(0, 0, 0, .85);
}
.mask.left[data-dark="true"] {
    background-color: rgba(0, 0, 0, .85);
}
.cut-out.left[data-dark="true"] {
    background-color: rgba(0, 0, 0, .85);
    box-shadow: 2px 0px 3px 2px rgba(3,3,3,.3);
}
.cut-out.left[data-dark="true"]::after {
    background-color: rgba(0, 0, 0, .85);
    box-shadow: 5px 0px 3px 1px rgba(3,3,3,.3);
}

.cut-out.right[data-dark="true"] {
    background-color: rgba(0, 0, 0, .85);
    box-shadow: -2px 0px 3px 2px rgba(3,3,3,.3);
}
.cut-out.right[data-dark="true"]::after {
    background-color: rgba(0, 0, 0, .85);
    box-shadow: -5px 0px 3px 1px rgba(3,3,3,.3);
}

/* 컨텍트 */
.contact-wrap p[data-dark="true"] {
    color: var(--txt);
}
.contact-wrap p a[data-dark="true"] {
    color: var(--txt);
}
.contact.modal[data-dark="true"] {
	background: rgba(167, 167, 167, 0.95);
}
.contact.modal p[data-dark="true"] {
    color: #333;
}
.contact.modal .close[data-dark="true"] {
    color: #333;
}