@charset "utf-8";

/**
전체 공통 컬러 변수지정
컬러 네이밍 툴 : http://veli.ee/colorpedia/
중복 네임이 나오는 경우 (= 색상코드가 다른데 툴에서 네이밍 결과가 같을 경우) :
--> 1) 네이밍 뒤에 넘버링 (silver, silver2, silver3...)
--> 2) 또는 큰 차이없는 색상이므로 기존 변수 사용 (#ddd = #dbdbdb = alto)
**/


:root {
    /* 알파벳 순서 */
    --alabaster2: #fbfbfb;

    --black: #222;
    --black000: #000;
    --black2: #222;

    --cod-gray: #111111;
    --dove-gray: #666;

    --gray: #888888;

    --mine-shaft: #222;
    --mine-shaft2: #363636;
    --mine-shaft3: #333;

    --white: #fff;
    --white2: #fff;

    --color-gray-100: #f5f5f5;

    --silver: #bbb;
    --tundora: #444;

    --point-color: #1c69ff;

    --light-gray: #dbdbdb;

    --sec-bg: #f5f5f5;
    --sec-p: #000;

}


/* 다크모드 */
html[data-dark=true] {
    --alabaster: #161616;
    --alabaster2: #202020;

    --black: #fff;
    --black000: #fff;
    --black2: #c0c0c0;

    --cod-gray: #ffffff;
    --dove-gray: #bbb;

    --gray: #ffffff;

    --mine-shaft: #ffffff;
    --mine-shaft2: #e9e9e9;
    --mine-shaft3: #fff;

    --white: #000;
    --white2: #161616;

    --color-gray-100: #222;

    --silver: #fff;
    --tundora: #fff;

    --light-gray: #888888;
    --sec-bg: #222;
    --sec-p: #1C69FF;
}


/* 별도 추가 스타일 지정 */
html[data-dark=true] .light-mode-image {
    display: none !important;
}
html[data-dark=true] .dark-mode-image {
    display: block;
}



/* 공통 레이아웃 */
html[data-dark=true] body {
    background: #161616;
}
html[data-dark=true] body.main footer{
    background-color: #161616;
}
html[data-dark=true] .aside-right .contact-round span.round::before {
    background-image: url("../img/main/gng-black.svg");
    background-position: center center;
    background-repeat: no-repeat;
}
html[data-dark=true] .aside-right > .sns-ico > div.ico-facebook a {
    background-image: url('../img/common/ico-sns-facebook-w.png');
}
html[data-dark=true] .aside-right > .sns-ico > div.ico-blog a {
    background-image: url('../img/common/ico-sns-blog-w.png');
}
html[data-dark=true] .aside-right > .sns-ico > div.ico-instagram a {
    background-image: url('../img/common/ico-sns-insta-w.png');
}
html[data-dark=true] footer .wrap .right-info .dark-mode-image {
    display: inline-block;
}
html[data-dark=true] #sitemapNAV.open{
    background-color: #161616;
}
html[data-dark=true] .popup .popup-layer-wrap{
    background: #444;
    color: #eee;
}
html[data-dark=true] .popup .close span{
    background: #aaa;
}
html[data-dark=true] .pf_view_wrap .pf_detail{
    background-color: #161616;
}
html[data-dark=true] footer.on{
    background-color: #161616;
}
html[data-dark=true] footer .wrap .left-info .sns-ico > .ico > a img{display: none;}
html[data-dark=true] footer .wrap .left-info .sns-ico > .ico > a img.dark{display: block;}
html[data-dark=true] footer .wrap .left-info .address li p .ico{display: none;}
html[data-dark=true] footer .wrap .left-info .address li p .ico.dark{display: inline;}




/* 메인화면 */
html[data-dark=true] .section-01 {
    background: none;
}
html[data-dark=true] .section-01 .figure-light-mode {
    /*display: none;*/
    opacity: 0 !important; transition: 0s !important;
}
html[data-dark=true] .section-01 .figure-dark-mode {
    /*display: block;*/
    opacity: 1 !important; transition: 0s !important;
}
html[data-dark=true] .section-01 .figure-dark-mode.fade{
    opacity: 0 !important;  transition: opacity 1s !important;
}
html[data-dark=true] .section-01 .title {
    text-shadow: none;
}
html[data-dark=true] .section-04 .service_wrap .article li a{
    color: #fff;
}
html[data-dark=true] .section-04 .service_wrap .article li a{opacity: 0.5;}
html[data-dark=true] .section-04 .service_wrap .article li:hover a{opacity: 1;}
html[data-dark=true] .section-04 .service_wrap .article li.active a{opacity: 1;}
html[data-dark=true] .section-04 .service_wrap .article .ic1 .box{background-color: #fff;}

html[data-dark=true] .section-04 .service_wrap .article .ic2.dark,
html[data-dark=true] .section-04 .service_wrap .article .ic3.dark,
html[data-dark=true] .section-04 .service_wrap .article .ic4.dark,
html[data-dark=true] .section-04 .service_wrap .article .ic5.dark,
html[data-dark=true] .section-04 .service_wrap .article .ic6.dark{display: inline-block;}

html[data-dark=true] .section-04 .service_wrap .article .ic2.white,
html[data-dark=true] .section-04 .service_wrap .article .ic3.white,
html[data-dark=true] .section-04 .service_wrap .article .ic4.white,
html[data-dark=true] .section-04 .service_wrap .article .ic5.white,
html[data-dark=true] .section-04 .service_wrap .article .ic6.white{display: none;}
html[data-dark=true] .section-04 .service_wrap .article li:hover .change_ani em{animation: none;}
html[data-dark=true] .section-04 .service_wrap .article li.active .change_ani em{animation: none;}
html[data-dark=true] .section-04 .service_wrap .article li:hover .change_ani img{display: none;}
html[data-dark=true] .section-04 .service_wrap .article li.active .change_ani img{display: none;}

/* 컨텐츠 */
html[data-dark=true] .pf_wrap .pf_top .sch_wrap .sel_box select{background-color: #161616; background-image: url("/assets/site/img/board/btn_filter_dark.png");}
html[data-dark=true] .pf_wrap .pf_top .sch_wrap .sel_box .btn_sel{
    background-image: url("/assets/site/img/board/btn_filter_dark.png");
}
html[data-dark=true] .pf_wrap .pf_top .sch_wrap .ip_box .btn_sch{
    background-image: url("/assets/site/img/board/btn_sch_dark.png");
}
html[data-dark=true] .pf_wrap .pf_top .sch_wrap .sel_box .sel_list li a{
    background-color: rgba(0,0,0,0.8);
}
html[data-dark=true] .pf_wrap .pf_top .sch_wrap .sel_box .sel_list li a:hover,
html[data-dark=true] .pf_wrap .pf_top .sch_wrap .sel_box .sel_list li a:focus{
    background-color: #000;
}
html[data-dark=true] .contact-area .short .request-form label{color: #ddd; background-color: #333; border-color: #5e5e5e;}
html[data-dark=true] .contact-area .short input[type=checkbox]:checked + label{color: #111; /*background-image: linear-gradient(45deg, #bbb 50%, transparent 50%);*/ background-color: #bbb;}
html[data-dark=true] .contact-area .short input[type=radio]:checked + label{color: #111; /*background-image: linear-gradient(45deg, #bbb 50%, transparent 50%);*/ background-color: #bbb;}
html[data-dark=true] .contact-area .short .request-form ul.info-list li input[type=text]{background-color: #333; color: #fff; border-color: #5e5e5e;}
html[data-dark=true] .contact-area .short .request-form ul.info-list li input[type=text]::placeholder{color: #fff !important;}
html[data-dark=true] .contact-area .short .request-form ul.info-list li .select-div{background-color: #333; color: #fff; border-color: #5e5e5e;}
html[data-dark=true] .contact-area .short .request-form ul.info-list li textarea{background-color: #333; color: #fff; border-color: #5e5e5e;}
html[data-dark=true] .contact-area .short .request-form ul.info-list li .select-div::after{border-color: #fff;}
html[data-dark=true] .contact-area .short .request-form ul.info-list li ul.select-option{background-color: #333; border-color: #5e5e5e;}
html[data-dark=true] .contact-area .short .request-form ul.info-list li ul.select-option li:hover{background: #bbb;}

html[data-dark=true] .scroll_pin .left-content .img_wrap .img .txt .title .eng{color: #fff;}

html[data-dark=true] .pf_wrap .pf_top .pf_sort > li a {background-color: #333; border: 1px solid #5e5e5e;}
html[data-dark=true] .pf_wrap .pf_top .pf_sort > li a:hover{/*border-color: #fe4249;*/}
html[data-dark=true] .pf_wrap .pf_top .pf_sort > li a.on {background-color: var(--point-color); border-color: var(--point-color);}

html[data-dark=true] .pf_view_wrap .pf_info{background-color: #161616;}
html[data-dark=true] .pf_view_wrap .pf_info .wrap{background-color: #161616;}
html[data-dark=true] .pf_view_wrap .pf_info .basic .name{color: inherit;}
html[data-dark=true] .pf_view_wrap .pf_info .basic > ul li .tit{color: inherit;}
html[data-dark=true] .pf_view_wrap .pf_info .overview .tit{color: inherit;}
html[data-dark=true] .pf_view_wrap .pf_info .overview .tit::after{background: #fff;}
html[data-dark=true] .pf_view_wrap .pf_info .overview > p{color: inherit;}

html[data-dark=true] .pf_view_wrap .pf_detail_txt{background-color: #161616;}

html[data-dark=true] .pf_view_wrap .pf_info .basic .pf_link{border: 1px solid #dbdbdb;}

html[data-dark=true] .contact-area .short .request-form ul.info-list li label.invalid-feedback{background: #161616;}