@charset "utf-8";

@font-face {
    font-family: 'KimjungchulScript-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulScript-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

.sub_visual {margin-top:120px; background:#fff}
.sub_visual > div {max-width:1600px; margin:0 auto; height:250px; padding-top:90px; box-sizing:border-box; background:#e2e3e8  url('/images/comm/sub_visual1.jpg') no-repeat center}
.sub_visual > div h2 {font-size:50px; font-weight:700; text-align:center}

.sub_visual.product > div {max-width:1400px}

.navi {height:60px; z-index:99; position:relative}
.navi .inner {max-width:1600px; height:60px; margin:0 auto; font-size:0; background:rgba(36, 64, 135, 0.9)}
.navi .inner div {width:33.333%; display:inline-block; box-sizing:border-box; border-right:1px solid #879eaf; height:60px; font-size:18px; line-height:60px; padding-left:30px; position:relative}
.navi .inner div.home {width:60px; border-left:1px solid #879eaf; padding-left:0; text-align:center}
.navi .inner div.home a {color:#fff; width:100%; height:100%; display:block}
.navi .inner div a.mm {color:#fff; width:100%; height:100%; display:block; background:url('/images/comm/allow_d.png') 92% center no-repeat}
.navi .inner div a.mm.on {background:url('/images/comm/allow_u.png') 92% center no-repeat}
.navi .inner div ul {display:none}
.navi .inner div > ul {position:absolute; top:60px; left:0; z-index:999; width:100%; display:none;}
.navi .inner div > ul li {border-bottom:1px solid #fff; line-height:60px; background:#2c3958}
.navi .inner div > ul li:hover {background:#6e7078}
.navi .inner div > ul li:last-child {border-bottom:none;}
.navi .inner div > ul li a {color:#fff; display:block; font-size:17px; padding-left:30px; width:100%}

.navi.product {background:#fff}
.navi.product .inner {max-width:1400px; background:rgba(36, 64, 135, 0.9)}

.page_navigation {text-align:right; margin-bottom:60px}
.page_navigation span {font-size:16px; color:#888}

.container {clear:both; max-width:1600px; margin:0 auto; position:relative; padding-top:70px; box-sizing:border-box}
.container.product {max-width:1400px}
.container.board {margin-bottom:50px}

.sub_page {line-height:1.5; font-size:18px; padding-bottom:70px}
.sub_page img {max-width:100%}

h2.tit {font-size:50px; text-align:center; position:relative; margin-bottom:80px; font-weight:700}
h3.tit {font-size:40px; margin-bottom:60px; font-weight:700; text-align:center; position:relative}
h4.tit {font-size:25px; margin-bottom:40px; padding-left:26px; font-weight:600; position:relative}
h4.tit span {font-size:18px; font-weight:400; margin-left:10px}
h4.tit:after {content:''; width:15px; height:15px; border:4px solid #053880; position:absolute; top:10px; left:0; box-sizing:border-box; border-radius:5px}

h5.tit {font-size:20px; margin-bottom:30px; font-weight:600; color:#357fe9}

.nav_tab {margin-bottom:50px; font-size:0; display:flex; justify-content:center; align-items:flex-end; position:relative; flex-wrap:wrap}
.nav_tab a {font-size:18px; min-width:200px; padding:0 10px; height:60px; display:inline-block; text-align:center; border-right:#fff 1px solid;  border-radius:50px; background:#eee; color:#888; margin-bottom:5px}
.nav_tab a:after {content:''; display:inline-block; width:0; height:100%; vertical-align:middle}
.nav_tab a.active {position:relative; background:linear-gradient(45deg, #357fe9, #304b8c);; color:#fff}
.nav_tab a+a {margin-left:5px}


.nav_tab2 {margin-bottom:50px; font-size:0; display:flex; justify-content:center; align-items:flex-end; position:relative}
.nav_tab2 a {font-size:18px; min-width:200px; display:inline-block; text-align:center; border-right:#fff 1px solid; color:#888; padding-bottom:20px; position:relative}
.nav_tab2 a.active {position:relative; color:#333}
.nav_tab2 a.active:before {content:''; width:30px; height:5px; border-radius:10px; background:#304b8c; position:absolute; bottom:0; left:50%; transform:translateX(-50%)}
.nav_tab2 a+a {margin-left:5px}
.nav_tab2 a+a:after {content:''; width:2px; height:20px; position:absolute; left:0; top:5px; background:#dbdbdb}


/* 회사소개 */

.greeting {display:flex; justify-content:space-between; flex-wrap:wrap; align-items:flex-end; border-bottom:#333 solid 2px; padding:0 30px; margin-bottom:80px}
.greeting > div {box-sizing:border-box}
.greeting .img {text-align:right; width:35%}
.greeting .txt {width:65%; padding-left:100px; word-break:keep-all}
.greeting .txt .title {font-size:40px; font-weight:bold}
.greeting .txt .title span {color:#304b8c}
.greeting .txt .s_title {font-size:27px; font-weight:400; color:#009cde}
.greeting .txt p {margin-bottom:30px}
.greeting .txt .sign {font-size:20px; margin-top:50px; text-align:right; margin-bottom:30px}
.greeting .txt .sign strong {display:block; font-size:40px; font-family: 'KimjungchulScript-Bold'}

.business {display:flex; flex-wrap:wrap; margin-bottom:80px}
.business .title {font-size:35px; font-weight:500; margin-bottom:30px; width:30%; position:relative}
.business .title:before {content:''; width:200px; height:3px; background:#304b8c; position:absolute; top:140px; right:-100px}
.business .title span {color:#009cde}
.business .txt {width:70%; box-sizing:border-box; padding:120px 80px 50px 80px; background:#f7f7f7; margin-top:50px}
.business .txt strong {display:block; font-size:24px; margin-bottom:30px}
.business .txt p {line-height:1.7; margin-bottom:30px}
.business .txt .sign {text-align:right; font-size:20px; font-weight:500}

.certificate {display:flex; flex-wrap:wrap; margin-left:-80px}
.certificate li {width:calc(25% - 80px); margin-left:80px}
.certificate li:nth-child(n+5) {margin-top:80px}
.certificate li img {border-radius:30px; border:#dbdbdb solid 1px; box-shadow:0px 1px 3px rgba(0,0,0,0.2);}
.certificate li p {text-align:center; font-size:20px; margin-top:10px}

.addr_info {display:flex; flex-wrap:wrap; margin-bottom:50px; padding-bottom:20px; border-bottom:#333 solid 1px; align-items:center; justify-content:space-between}
.addr_info p {font-size:25px; font-weight:500; position:relative; padding-left:60px; box-sizing:border-box; width:40%}
.addr_info i {display:inline-block; width:40px; height:40px; border-radius:50%; text-align:center; line-height:40px; background:#304b8c; color:#fff; font-size:24px; position:absolute; left:0; top:0}
.addr_info ul {}
.addr_info ul li {position:relative; padding-left:50px; font-size:20px; display:inline-block; padding-top:5px}
.addr_info ul li+li {margin-left:30px}




/*제품안내*/

.left_menu {width:12%; display:inline-block; position:absolute; left:0; top:130px; /*transform:translateY(-50%);*/ z-index:500}
.left_menu h2 {text-align:center; font-size:20px; background:#357fe9; color:#fff; padding:20px 5px}
.left_menu ul {background:#f7f7f7}
.left_menu ul li {font-size:16px; padding:0 10px; position:relative}
.left_menu ul li+li {border-top:#dbdbdb dotted 1px}
.left_menu ul li.active {background:#304b8c}
.left_menu ul li a {display:block; padding:12px 0 12px 15px; position:relative; word-break:keep-all}
.left_menu ul li a:before {content:'+'; position:absolute; left:0}
.left_menu ul li.active a {color:#fff}

.product .list {display:none}
.product .s_list {display:none}

.product .photo_list {display:flex; flex-wrap:wrap; margin-left:-30px; margin-bottom:50px; justify-content:center}
.product .photo_list li {width:calc(25% - 30px); margin-left:30px; box-sizing:border-box; text-align:center}
.product .photo_list li:nth-child(n+5) {margin-top:30px}
.product .photo_list li img {box-shadow:0px 1px 3px rgba(0,0,0,0.2); border:#eee solid 1px}
.product .photo_list.two li {width:calc(50% - 30px); display:flex; justify-content:center; align-items:center; flex-wrap:wrap}
.product .photo_list.two li:nth-child(n+3) {margin-top:30px}
.product .photo_list.six li {width:calc(16.66% - 30px)}
.product .photo_list.six li:nth-child(n+5) {margin-top:0}

.product .photo_list li a {position:relative; display:block; width:100%; height:100%; box-sizing:border-box}
.product .photo_list li a:before {content:'클릭-확대보기'; position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:100%}

.product .photo_list li p {margin-top:10px}

.product .table01 {margin-bottom:50px}
.product .table01 table tbody tr:nth-child(odd) {background:#f7f7f7}

.product .color {margin-bottom:50px}
.product .color p {margin-bottom:30px; text-align:center}
.product .color ul {display:flex; flex-wrap:wrap; justify-content:space-between}
.product .color ul li {position:relative; padding-left:30px; box-sizing:border-box; width:20%}
.product .color ul li:nth-child(n+6) {margin-top:20px}
.product .color ul li label {position:absolute; left:0; color:#009cde}

.product .color_list {display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:50px}
.product .color_list li {width:10%; text-align:center; box-sizing:border-box; padding:0 5px}
.product .color_list li p {margin-top:10px}

.inquiry {width:50%; margin:0 auto; margin-bottom:50px; padding-top:50px; border-top:#009cde solid 2px}
.inquiry li {position:relative; padding-left:150px}
.inquiry li label {position:absolute; left:0}
.inquiry li input,
.inquiry li textarea {border:#dbdbdb solid 1px; border-radius:5px; padding:15px 20px; box-sizing:border-box; width:100%; font-size:16px}
.inquiry li+li {margin-top:30px}
.inquiry li .essential {display:inline-block; width:6px; height:6px; -webkit-border-radius:50%; border-radius:50%; margin-top:-5px; margin-left:5px; vertical-align:middle; background:#e84250; font-size:0; text-indent:-1000em}

.agree {width:50%; margin:0 auto; margin-bottom:40px; font-size:16px}
.agree div {border:1px solid #dbdbdb; border-radius:5px; margin-bottom:20px; padding:20px; height:200px; overflow-y:scroll}
.agree p {margin-bottom:20px}
.agree p.title {font-weight:500}
.agree ul {margin-bottom:30px; margin-left:10px}
.agree ul li {font-size:16px; position:relative; padding-left:15px}
.agree ul li:before {content:'·'; position:absolute; left:0}
.agree .btn {text-align:center; padding-bottom:30px; margin-left:-20px}
.agree .btn input {margin-left:20px}


.sub_page .btn_area {text-align:center; margin-left:-10px; font-size:0}
.sub_page .btn_area a,
.sub_page .btn_area input,
.sub_page .btn_area button {display:inline-block; margin-left:10px; font-size:16px; padding:15px 40px; border:1px solid #999; border-width:0 1px 1px 0; color:#fff; background:#333;  box-sizing:border-box; border-radius:3px}

.member {font-size:16px}
.member .box {border:#e3e3e3 solid 1px; border-radius:10px; padding:20px}
.member .txt {margin-bottom:20px}
.member ul {margin-bottom:30px; line-height:1.5}
.member ul li {margin-bottom:10px}
.member ul li ul {margin-top:10px; margin-left:20px}

.popModal {display:none}
.popModal p.title {font-size:20px; font-weight:bold; padding-bottom:20px; margin-bottom:15px; border-bottom:2px solid #888888; width:95% !important}