@charset "utf-8";
/* CSS Document */



.container {min-width: 1100px}

/* 2022.09.22_CJH - 다크모드 추가*/
:root {
    --text: #000;
    --bg: #fff;
    --imageBG: #fff;
    --menuBG: rgb(230,230,230,0.7);
    --menuFG: #333;
    --navFG: #000;
    --succBG: rgba(245,245,245,.7);
    --tableBG: #F5F5F5;
    --submitBG: #4F8CFC;
    --tableBG2: #FFF;
}

body {
    background-color: var(--bg);
    color: var(--text);
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #fff;
        --bg: #222;
        --imageBG: #000;
        --menuBG: rgb(30,30,30,0.7);
        --menuFG: #AAA;
        --navFG: #fff;
        --succBG: rgba(15,15,15,.7);
        --tableBG: #555;
        --submitBG: #4F8CFC;
        --submitBG2: #222;
    }
}


header { height: 135px; position: fixed; width: 100%; z-index:3; background-color: transparent;}
header .header_inner {position: relative; width: 1280px; height: 135px; margin: 0 auto; right: 0; left: 0}

header .header_inner .logo img {animation: 1s ease 0s 1 logoSliding; width: 250px; height: 45px; margin: 35px;}
header .header_inner .gnb {position: absolute; right: 0; top: 10px;  width: 280px; height: 34px; color: white;}
header .header_inner .gnb p { display: inline-block; font-size: 13px; margin: 20px auto; color:white}
header .header_inner .gnb p::after {content: ""; background-color: #333333; display: inline-block; width: 1px; height: 13px; margin: 0 8px -2px}
header .header_inner .gnb p:last-child::after {content: ""; background: none}

/*
header .header_inner .nav {position:relative; bottom: 35px; animation: 1s ease-out 0s 1 menuSliding;}
header .header_inner .nav .navlist {overflow:hidden; position:absolute; right:0; z-index: 10; font-size: 17px; color: white;}
header .header_inner .nav .navlist > li {float:left;; width:100px;}
header .header_inner .nav .navlist > li + li {margin-left:45px;}
header .header_inner .nav .navlist > li > a {display: inline-block; height:40px; font-weight: bold;}

header .header_inner .nav .dp2 {overflow: hidden; visibility: hidden; height:20px; opacity:0; margin-top: 15px; transition:opacity 1s ease; z-index: 10}
header .header_inner .nav .dp2.open {opacity:.8}
header .header_inner .nav .dp2 > li {line-height: 1.2; padding:5px 0;}
header .header_inner .nav .dp2 > li > a {color:var(--menuFG); font-size:15px; transition: 400ms ease all; text-align:center;}
header .header_inner .nav .dp2 > li > a:hover { color:#777777;}*/

header .header_inner .nav {position: relative; animation: 1s ease-out 0s 1 menuSliding;}
header .header_inner .nav_bg {
                              margin-top:8px; background-color: rgb(240,240,240);
                              height:0; position:absolute; top:115px; right:0; height: 0; z-index: 2; 
                              width: 900px; border-radius: 10px 10px 10px 10px;}
/*배너*/
.banner_new {height: 350px; background: url('../../img/prod_img03.jpg'); position: relative; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.banner_new .ban_wrap {width: 1130px; height: 126px; margin: 0 auto; position: relative; top: 100px;}
.banner_new .ban_wrap .hd3 {font-size: 56px; font-weight: lighter; color: #FFFFFF; padding:105px 20px 40px 10px; text-align: left; margin-left: -270px; animation: 2s ease 0s 1 logoSliding;}
.banner_new .ban_wrap .txt {font-size: 14px; line-height: 1.5; text-align: left; margin-left: -260px; animation: 4s ease 0s 1 slideInFromOpacity;}

/*배너 헤더 애니메이션*/
@keyframes slideInFromTop {
    0% {transform: translateY(-100%); opacity: 0;}
    100% {transform: translateY(0); opacity: 100%;}
}
/*로고 애니메이션*/
@keyframes logoSliding {
    0% {transform: translateX(-20%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
/*메뉴 애니메이션*/
@keyframes menuSliding {
    0% {transform: translateX(-20%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
@keyframes slideInFromOpacity {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/*탑버튼*/
/*2022.09.21_CJH 애니메이션, 현대적답게 블러 효과 추가*/
.topbtn {position: fixed;  bottom: 50px; right: 50px; z-index: 100; transition: 400ms ease;}
.topbtn:hover {bottom:65px;}
.topbtn:active {scale:90%; opacity: 0.8;}
.topbtn img {width: 70px; height: 70px; display: inline-block; backdrop-filter: blur(.3em); border-radius:30px;}
.top .quick_menu {box-shadow: 4px 4px 20px rgb(0,0,0,0.6); border-radius: 10px; background-color: var(--menuBG); backdrop-filter:blur(5em); position: absolute; top: 450px; right: 37px; z-index: 2; padding: 5px;}
.top .quick_menu > ul > li {padding: 10px; font-size: 15px; text-align: center;}
.top .quick_menu > ul > li > p { margin-bottom: 10px; font-size: 17.5px; text-align: center;}
.top .quick_menu > ul > li .sub_menu {font-size: 17px; margin-top: 10px; margin-bottom: auto; text-align: right;}
.top .quick_menu > ul > li .sub_menu > a { color:gray; padding: 10px; }

/*메인*/
.main_container {position: relative; margin-left:auto; margin-right: auto; top: 38px; width: 1280px;}

/*일정*/
.center04 {width: 1280px; left: 0; right: 0; margin: auto; overflow: hidden; position: relative}
.center04 .hd6 {font-size: 40px}

.center04 .center_cont {margin-top: 50px}
.center04 .center_cont .txtbox {margin-left: 50px}
.center04 .center_cont .txtbox p {color: #666666; font-size: 15px; line-height: 2}
.center04 .center_cont .txtbox p.col {color: #FF0000}
.center04 .center_cont .tablebox {width: 1000px;margin: 70px auto;}
.center04 .center_cont .tablebox table { border-top: 3px solid #777; font-size: 15px; background-color: var(--submitBG2)}
.center04 .center_cont .tablebox table .intxt {border-bottom: 1px solid rgba(119,119,119,.3)}
.center04 .center_cont .tablebox table .intxt td {padding: 13px 30px; color:var(--text);}
.center04 .center_cont .tablebox table .intxt td:first-child {background-color: var(--tableBG); width: 234px}
.center04 .center_cont .tablebox table .intxt td > p {display: inline-block; color: #FF0000;}
.center04 .center_cont .tablebox table .intxt .radio  {margin-right: 8px; color: var(--text);}
.center04 .center_cont .tablebox table .intxt .radio + .radio {margin-left: 10px; color: var(--text);}
.center04 .center_cont .tablebox table .intxt td > select {background-color: rgba(230,230,230,0.6); border-radius: 5px; font-size:15px; padding:5px;}
.center04 .center_cont .tablebox table .intxt td > select > option {font-size: 15px; background-color: rgba(230,230,230,0.6); border-radius: 5px;}
.center04 .center_cont .tablebox table .intxt td > input { padding: 5px; color: #222; border-radius: 5px; transition: 400ms ease; background-color: rgba(192,192,192,0.6);}
.center04 .center_cont .tablebox table .intxt td > input:focus { background-color: rgba(192,192,192,0.8); }
.center04 .center_cont .tablebox table .intxt td > .pnum {width: 70px}
.center04 .center_cont .tablebox table .intxt td > .pnum2 {width: 70px}
.center04 .center_cont .tablebox table .intxt td > textarea { width: 400px; height: 150px; color: #222; transition: 400ms ease; border-radius: 5px; background-color: rgba(192,192,192,0.6);}
.center04 .center_cont .tablebox table .intxt td > textarea:focus { background-color: rgba(192,192,192,0.8); }

.center04 .center_cont .btn {margin: 20px auto 0; width: 500px; height: 100px;}
.center04 .center_cont .btn input {display: inline-block; width: 150px; height: 50px; color: var(--text); font-size: 16px; text-align: center}
.center04 .center_cont .btn input + input {margin-left: 5px; color: var(--text);}
.center04 .center_cont .btn input:first-child {background: var(--submitBG); transition: 400ms ease; border-radius: 10px; box-shadow: 4px 4px 10px rgb(128,128,128);}
.center04 .center_cont .btn input:first-child:hover{width:200px; filter:brightness(120%);}
.center04 .center_cont .btn input:last-child {background: #777777; transition: 400ms ease; border-radius: 10px; box-shadow: 4px 4px 10px rgb(128,128,128);}
.center04 .center_cont .btn input:last-child:hover {width:200px; filter:brightness(120%);}


/*푸터*/
footer {border-top: 1px solid #888; margin-top: 160px; background-color: rgb(80,80,80);}
footer .footer_inner {width: 1280px; height: 140px; margin: 0 auto; position: relative}
footer .footer_inner .txt {margin-top: 10px}
footer .footer_inner .txt .hd6 {margin-bottom: 13px}
footer .footer_inner .txt p {font-size: 15px; color: white;}
footer .footer_inner .txt p + p {margin-top: 2px}
footer .footer_inner .txt p.copy {position: absolute; right: 0; font-size: 14px}


/*Test css: Search (모바일 친화적인 스타일 테스트)*/
.search_test2 {
    position: fixed;
    z-index: 100;
    transition: 400ms ease all;
    bottom: 120px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 8px 8px 20px rgb(0,0,0,0.6);
    background-color: rgb(230,230,230, 0.7);
    backdrop-filter: blur(5em);
    border-radius: 10px;
    padding-left: 10px;
    width: 400px;
    height: 60px;
    padding: 10px;
    font-weight: bold;
    color: darkgray;
    font-size: 17.5px;
}