@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
/* sub01_01 인사말 greeting */
.greeting .wrap {display:flex; padding-bottom:50px;}
.greeting .img-box {width:33.3%; padding:18px 21px 21px 18px; position:relative;}
.greeting .img-box:before {content:''; background:#00baf2; width:127px; height:127px; position:absolute; top:0; left:0; z-index:-1;}
.greeting .img-box:after {content:''; background:transparent; width:110px; height:110px; border:3px solid #0055a5; position:absolute; bottom:0; right:0; z-index:-1;}
.greeting .txt {width:66.7%; padding-left:55px;}
.greeting .txt h3 {font-size:30px; line-height:1.4em; color:#0055a5; font-weight:500; margin-bottom:36px;}
.greeting .txt p {line-height:1.6em; color:#454545; margin-bottom:24px;}
.greeting .txt p:last-child {font-weight:500; margin-bottom:0;}
/* sub01_02 등록증/특허 registration */
.registration ul {display:flex; flex-wrap:wrap; margin-left:-20px; margin-bottom:-55px;}	
.registration ul li {width:calc(20% - 20px); margin-left:20px; margin-bottom:55px;}	
.registration ul li .img-box {margin-bottom:16px;}
.registration ul li p {font-size:18px; font-weight:500; color:#454545; line-height:1.4em; text-align:center;}
.registration .pic {position:relative; height:0; padding-bottom:145%; overflow:hidden;}
.registration .pic:after {content:''; position:absolute; width:100%; height:100%; border:1px solid #ddd;}
.registration .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
/* sub_detail detail */
.detail .wrap .viewr {display:flex; margin-bottom:60px;}
.detail .origin {width:78.3%;}
.detail .thumb {width:21.7%; padding:80px 45px; background:#f8f8f8;}
.detail .thumb .items {margin-top:-10px;}
.detail .thumb .item {margin-top:10px; position:relative;}
.detail .thumb .item .pic {position:relative; height:0; padding-bottom:65%; overflow:hidden;}
.detail .thumb .item .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.detail .thumb .item.slick-current:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:3px solid #0055a5;}
.detail .thumb .slick-arrow {width:28px; height:16px; position:absolute; left:50%; transform:translateX(-50%); border:0; background:none; font-size:0; background-repeat:no-repeat; background-size:cover; z-index:11;}
.detail .thumb .slick-prev {background-image:url('../images/bbs/detail_arrow_prev.png'); top:-23px;}
.detail .thumb .slick-next {background-image:url('../images/bbs/detail_arrow_next.png'); bottom:-30px;}
.detail table {width:100%; border-collapse:collapse; border-spacing:0; border-top:2px solid #0055a5; margin-bottom:60px;}
.detail table td {border:1px solid #ddd; line-height:1.8em; color:#454545; padding:30px 0 30px 20px;}
.detail table td strong {font-weight:500; color:#242424;}
.detail .cnt ul {display:flex; margin-left:-20px; justify-content:center;}
.detail .cnt ul li {margin-left:20px;}
.detail .cnt ul li a {display:block; width:185px; line-height:50px; color:#fff; font-size:17px; font-weight:500; text-align:center;}
.detail .cnt ul li:first-child a {background:#163a86;}
.detail .cnt ul li:nth-child(2) a {background:#1d4fb9;}
.detail .cnt ul li:last-child a {background:#00baf2;}
.sub04_table table colgroup col:nth-child(1) {width:25% !important;}
.sub04_table table colgroup col:nth-child(2) {width:25% !important;}
.sub04_table table colgroup col:nth-child(3) {width:50% !important}
.sub04_table .thumb .item .pic {position:relative; height:0; padding-bottom:75%; overflow:hidden;}
/* sub05_01 colorcode */
.colorcode ul {display:flex; flex-wrap:wrap; margin-left:-42px;}
.colorcode ul li {width:calc(16.6666% - 42px); margin-left:42px; margin-bottom:50px; color:#454545;}
.colorcode ul li .img-box {margin-bottom:10px; position:relative; height:0; padding-bottom:42.43%; overflow:hidden;}
.colorcode ul li .img-box img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.colorcode ul li .img-box:before {content:''; width:100%; height:100%; position:absolute; top:0; left:0; box-shadow:inset 2px 2px 3px rgba(0,0,0,0.3); z-index:1;}
.colorcode ul li .tit {font-size:14px; line-height:1.7em; padding-bottom:11px; margin-bottom:10px; border-bottom:1px solid #ddd;}
.colorcode ul li .tit strong {font-weight:500; margin-right:5px;}
.colorcode ul li .txt {line-height:1.5em; letter-spacing:-.06em; font-size:15px;}