@charset "UTF-8";

#sub #wrapper {padding-top:100px;}

.sub-vis {position:relative; width:100%; height:452px; z-index:1;overflow:hidden;}
.sub-vis .content {position:absolute; top:50%; color:#fff; text-align:center; transform:translateY(-50%); left:0; width:100%; padding:0 30px; z-index:10}
.sub-vis .content h2 {font-size:70px; line-height:1.5em; font-weight: 700;}
.sub-vis .background {position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); -moz-transform:scale(1.09); -webkit-transform:scale(1.09); -o-transform:scale(1.09); transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0;}
.sub-vis.load .background {transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1);}

.sub-vis.bg1 .background {background-image:url('../img/common/sub_vis1.jpg')}
.sub-vis.bg3 .background {background-image:url('../img/common/sub_vis3.jpg')}
.sub-vis.bg4 .background {background-image:url('../img/common/sub_vis4.jpg')}


#lnb {border-top: 1px solid #e5e8ea; border-bottom: 1px solid #e5e8ea; }
.lnb {max-width:1440px; margin:0 auto; padding:0 20px; text-align:center;}
.lnb ul {display:flex; justify-content: center;}
.lnb ul li {width:auto; margin:0 30px; padding-top:20px;}
.lnb ul li a {position: relative; display:flex; align-items:center; height:60px; padding:0 5px; color:#bfbfbf; font-size:22px; line-height:1.4em;}
.lnb ul li a:after {content:""; position: absolute; bottom:-2px; left:0; width:0; height:3px; background:linear-gradient(90deg,#0b76a0 30%,#0fb850 100%); opacity:0; transition: .3s;}
.lnb ul li.active a {color:#020202; font-weight: 600;}
.lnb ul li.active a::after {width:100%; opacity:1;}




/* content */
#contArea {position:relative; max-width:1240px; width:100%; padding:0 20px; margin:90px auto 0;}
#contArea.wide {max-width:100%; padding:0;}

.real-cont {padding-bottom:150px;}
.real-cont.none {padding-bottom:0;}

.doc-title {margin-bottom:20px; font-size:28px;line-height:1.4em;font-weight: 600; color:#020202;}

.about-inner .group {margin-bottom:150px;}
.about-inner .group:last-child {margin-bottom:0;}

.about-head {display:flex;}
.about-head .logos {width:530px; font-size:139px; line-height:1.1em; font-weight: 600;}
.about-head .logos .txt {width: fit-content; background: #0b76a0; background: linear-gradient(90deg, #0b76a0 30%, #0fb850 100%);  background-clip: text; -webkit-background-clip: text; color: transparent;}
.about-head .info {flex:1 1 auto; min-width: 0; width:1%; font-size:16px; line-height:1.88em; padding-top:20px;}

.about-overview {border-top: 3px solid #000;}
.about-overview ul li {border-bottom: 1px solid #c2c2c2; padding:19px 30px; display:flex; font-size:16px; line-height:1.5em;}
.about-overview ul li .tit {width:326px; font-weight: 500;}
.about-overview ul li .info {flex:1 1 auto; min-width: 0; width:1%;}

.about-business ul {display:flex; flex-wrap:wrap; margin:0 -11px -50px;}
.about-business ul li {width:50%; padding: 0 11px; margin-bottom:50px;}
.about-business ul li .pic {border-radius: 36px; overflow:hidden; margin-bottom:30px;}
.about-business ul li .pic img {width:100%;}
.about-business ul li .info {padding-left:35px;}
.about-business ul li .info .tit {font-size:26px; line-height:1.3em; font-weight: 600; margin-bottom:12px;}
.about-business ul li .info .cnt {font-size:18px; line-height:1.78em;}

.vision-inner .group {margin-bottom: 90px;}
.vision-inner .group:last-child {margin-bottom:0;}

.vision-head {text-align:center; background:url('../img/sub/vision_bg.png') 50% 90% no-repeat;}
.vision-head ul {display:flex; justify-content: center;}
.vision-head ul li {padding:0 30px; color:#fff;}
.vision-head ul li .circle {position: relative; width:398px; height: 398px; border-radius: 100%; display:flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #0b76a0 30%, #0fb850 100%);}
.vision-head ul li .circle:after {content:""; position:absolute; top:50% ;left:50%; width:433px; height: 433px; border-radius: 100%; border:6px solid #e8ebec; transform:translate(-50%,-50%);}
.vision-head ul li .circle .tit {font-size:35px; line-height:1.4em;font-weight: 600; position: relative; padding-bottom:22px; margin-bottom:22px;}
.vision-head ul li .circle .tit:after {content:""; position: absolute; bottom:0; left:50%; width:32px; height: 3px; background:#fff; margin-left:-16px;}
.vision-head ul li .circle .cnt {font-size:22px; line-height:1.5em; font-weight: 600; opacity:.80;}
.vision-head .txt {margin-top: 45px; font-size:18px; line-height:1.5em; font-weight: 500;}

.vision-core {text-align:center; padding:0 95px;}
.vision-core ul {display:flex; margin-left:-20px;}
.vision-core ul li {width:calc(33.333333% - 20px); margin-left:20px; border:6px solid #e8f0f4; border-radius:20px; padding:45px 20px;}
.vision-core ul li .ico {margin-bottom:30px;}
.vision-core ul li .tit {font-size:25px; line-height:1.4em;font-weight: 600; margin-bottom:30px;}
.vision-core ul li .cnt {font-size:16px; line-height:1.63em; opacity:.80;}

.vision-strategy {text-align:center;}
.vision-strategy .box {background:#dfedf2; border-radius:20px; padding:77px 30px;}
.vision-strategy ul {display:flex;}
.vision-strategy ul li {width:33.333333%; padding:0 60px; position: relative;}
.vision-strategy ul li:after {content:""; position: absolute; top:0; left:0; width: 1px; height:100%; background:#fff;}
.vision-strategy ul li:first-child:after {display:none;}
.vision-strategy ul li .ico {width:140px; height: 140px; background: linear-gradient(40deg, #0b76a0 30%, #0fb850 100%); border-radius: 100%; margin:0 auto 12px;}
.vision-strategy ul li .tit {font-size:25px; line-height:1.4em;font-weight: 600; margin-bottom:10px;}
.vision-strategy ul li .cnt {font-size:16px; line-height:1.63em; opacity:.80;}

.history-head {background:url('../img/sub/history_bg.jpg') 50% 50% no-repeat; margin-bottom:65px; border-radius: 20px; background-size:cover; height:361px; color:#fff; display:flex;align-items: center; justify-content: center; text-align:center;}
.history-head .tit {font-size:75px; line-height:1.2em;font-weight: 800; margin-bottom:10px;}
.history-head p {font-size:30px; line-height:1.4em;font-weight: 500; opacity:.74;}

.history ul {position: relative; display:flex; justify-content: flex-end; padding-bottom:65px;}
.history ul li {width:50%; position: relative; padding:0 55px;}
.history ul li .year {font-size:60px; line-height:1.2em;font-weight: 800; display:inline-block; margin-bottom:10px; width: fit-content; background: #0b76a0; background: linear-gradient(90deg, #0b76a0 30%, #0fb850 100%);  background-clip: text; -webkit-background-clip: text; color: transparent;}
.history ul li dl dd {font-size:16px; line-height:1.5em;}
.history ul:after {content:""; position: absolute; top:16px; left:50%; width:30px; height: 100%; background:#494e4f; margin-left:-15px;}
.history ul:first-child:after {border-radius: 30px 30px 0 0;}
.history ul:last-child:after {border-radius: 0 0  30px 30px; height:26%}
.history ul:nth-child(even) { justify-content: flex-start; text-align:right;}
.history ul:last-child {padding-bottom:0;}
.history ul:before {content:""; position:absolute; top:26px; left:50%; margin-left:-8px; width:16px; height: 16px; background:#fff; border-radius: 100%; z-index: 5;}

.location .group {margin-bottom: 85px;}
.location .group:last-child {margin-bottom:0;}
.location .map {border-radius: 26px; overflow: hidden;}
.location .map iframe {width:100% !important; height: 490px !important;}
.location .info {padding: 0 50px;}
.location .box {background:#fff; border-radius: 30px; padding: 40px 55px; position: relative; margin-top: -110px; z-index:10; box-shadow:6px 0 24px rgba(0,0,0,.04);}
.location .box .doc-title {margin-bottom:30px;}
.location .box ul li {margin-bottom: 26px; font-size:16px; line-height:1.4em;}
.location .box ul li:last-child {margin-bottom:0;}
.location .box ul li dl {display:flex;}
.location .box ul li dl dt {margin-right:20px; font-weight: 700; width: fit-content; background: #0b76a0; background: linear-gradient(90deg, #0b76a0 30%, #0fb850 100%);  background-clip: text; -webkit-background-clip: text; color: transparent;}
.location .box ul li dl dd {font-weight: 500;}
.location .box ul li.flex {display:flex;}
.location .box ul li.flex  dl {margin-right:50px;}

.product-title {text-align:center; margin-bottom: 60px; font-size:70px; line-height:1.4em;font-weight: 700;}

.product-list ul {display:flex; flex-wrap:wrap; margin:0 -10px;}
.product-list ul li {position: relative; width:33.33333%; padding:0 10px; margin-bottom:55px; text-align: center;}
.product-list ul li .photo {position:relative; border-radius:20px; overflow: hidden;}
.product-list ul li .photo:after {content:""; position:absolute; top:0; left:0; opacity:0;width:100%; height: 100%; inset:0; border-radius:inherit; transition: 0.3s; padding:4px; background:linear-gradient(90deg,#0b76a0,#0fb850); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.product-list ul li .pic {position:relative; padding-bottom: 130.7%; background:#f9f9f9; border-radius:20px; overflow:hidden; transition:0.3s;}
.product-list ul li .pic img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:auto !important; height:auto !important; object-fit:contain; transition:0.3s;}
.product-list ul li .pic.on {display:block;}
.product-list ul li .pic.off {display:none;}
.product-list ul li .pic.noimg {display:none;}
.product-list ul li a:hover .photo:after {opacity:1;}
.product-list ul li.has-hover-effect a:hover .pic.on {display:none !important;}
.product-list ul li.has-hover-effect a:hover .pic.off {display:block;}
.product-list ul li a:hover .pic img {transform:translate(-50%, -50%) scale(1.04);}
.product-list ul li .tit {margin-top:10px; font-size:22px; line-height:1.3em;}

.board-wrap--fc .board-paging {margin:30px auto;}
.board-paging ol {display:inline-flex;}
.board-paging li {padding:0 4px;}
.board-paging li > a {width:36px; height:36px;  line-height:36px; border-radius: 100%; border:0; font-size:15px; font-weight: 500;  color:#2b2b2b;}
.board-paging li > a:hover,
.board-paging li.on > a {background:#0b76a0; border:0;}

.product-head {display:flex; margin-bottom: 130px;}
.product-photo {width:50%; display:flex;}
.product-photo.noimg {display:flex;}
.product-photo.photo-on {display:flex;}
.product-photo .thumb {position:relative; padding-bottom: 105.9%; border-radius:16px; overflow:hidden;}
.product-photo .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:auto !important; height:70% !important; object-fit:contain; transition:0.3s;}
.product-photo .product-nav {width:150px; margin-right:10px;}
.product-photo .product-nav .item {margin-bottom:8px; cursor: pointer;}
.product-photo .product-nav .item.noimg {display:none;}
.product-photo .product-nav .item.on {display:block;}
.product-photo .product-nav .thumb {border-radius:10px; padding-bottom:100%;}
.product-photo .product-nav .thumb:after {content:""; position:absolute; top:0; left:0; width:100%; height: 100%; border:1px solid #efefef; border-radius: 10px;}
.product-photo .product-thumb {flex:1 1 auto; min-width:0; width:1%;}
.product-photo .product-thumb .thumb {background:#f9f9f9; }
.product-photo .product-thumb .item.noimg {display:none;}
.product-photo .product-thumb .item.on {display:block;}
.product-info {width:50%; padding-left: 47px;}
.product-info h3 {font-size:30px; line-height:1.4em;font-weight: 500; padding-bottom:20px; margin-bottom:20px; border-bottom: 1px solid #e5e5e5;}
.product-info h3 br { display: none;}
.product-info .cnt {font-size:16px; line-height:2em; opacity:.80; margin-bottom:25px;}
.product-info .cnt .bullet {text-indent: -.8em; padding-left:.8em;}
.product-info .cnt .point {color:#de1212;}
.product-info .btns {margin-top:64px; padding:0 20px;}
.product-info .btns ul {display:flex; margin:0 -9px;}
.product-info .btns ul li {width:50%; padding:0 9px; text-align:center;}
.product-info .btns ul li a {display:flex; align-items: center; justify-content: center; height:60px; border-radius: 60px; font-size:16px; line-height:1.4em;font-weight: 600;}
.product-info .btns ul li.list a {background:#f2f8fa; color:#0b76a0}
.product-info .btns ul li.list a:before {content:""; display:inline-flex; align-items: center; margin-right:10px; width:10px;height: inherit; background:url('../img/bbs/prod_ico_list.png') 50% 50% no-repeat;}
.product-info .btns ul li.inquiry a {color:#fff; background: linear-gradient(90deg, #0b76a0 30%, #0fb850 100%);}

.table-list table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #0b76a0;}
.table-list table tbody th {padding:20px 26px; vertical-align: middle; font-size:15px; font-weight:600; line-height:1.5em; border-bottom:1px solid #dadada; background:#f2f8fa;}
.table-list table tbody td {padding:20px 26px; vertical-align: middle; font-size:15px; font-weight:300; line-height:1.5em; border-bottom:1px solid #dadada;}

.table-list table { width: 100% !important; border-top:2px solid #0b76a0 !important; border-left: none !important; border-right: none !important; }
.table-list table tbody th,
.table-list table tbody td { padding:20px 26px !important; border-bottom:1px solid #dadada !important; border-left: none !important; border-right: none !important;}
.table-list table tbody th *,
.table-list table tbody td:first-child * {  font-size:15px !important; font-weight:600 !important; line-height:1.5em !important;  }
.table-list table tbody td *,
.table-list table tbody td:first-child ~ td *,
.table-list table tbody td:last-child * { font-size:15px !important; font-weight:300 !important; line-height:1.5em !important; }
.table-list table tbody td:first-child {  background:#f2f8fa !important; }
.table-list table tbody td:first-child ~ td,
.table-list table tbody td:last-child { background: transparent !important; }
.table-list table tbody tr.td-style  td:first-child { background: transparent !important; font-weight:300 !important; }
.table-list table tbody tr.td-style  td:first-child * {  font-weight:300 !important;}

.rnd-inner .group {margin-bottom: 140px;}
.rnd-inner .group:last-child {margin-bottom:0;}
.rnd-inner .board-wrap {display:none;}

.rnd-title {position: relative; height: 74px; display:flex; align-items: center; margin-bottom:44px;}
.rnd-title .doc-title {color:#fff; height: inherit;  display:flex; align-items: center; position: relative; z-index: 2; margin-bottom:0;}
.rnd-title:after {content:""; position:absolute; top:0; left:-50%; width:100%; height:inherit; background:linear-gradient(90deg,#0b76a0 30%,#0fb850 100%); border-radius: 0 0 60px 0;}

.rng-list ul {display:flex; margin:0 -15px;}
.rng-list ul li {width:50%; padding:0 15px;}
.rng-list ul li img {width:100%;}

.cert-list ul {display:flex; margin:0 -10px;}
.cert-list ul li {width:33.333333%; padding:0 10px; text-align: center;}
.cert-list ul li .pic {position:relative; padding-bottom:134.6%;  overflow: hidden; border-radius: 20px;}
.cert-list ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100% !important; height:100% !important;  object-fit:contain; transition:0.3s;}
.cert-list ul li .pic:after {content:""; position: absolute; top:0; left:0; width:100%; height: 100%; border:1px solid #dedede; border-radius: 20px;}
.cert-list ul li .tit {margin-top:20px; font-size:16px; line-height:1.6em; opacity:.80; padding:0 30px;}

body.page-url-privacy--fc #lnb {display:none;} /* 개인정보취급방침 메뉴 숨김 */


 /* contact us */
.mailform-head {text-align: center; margin-bottom: 50px; font-size:35px; line-height:1.4em;}
.mailform-head strong {font-weight: 600;}

.required {color:#ce2222}
.mailform .input {height:50px; width:100%; border: 1px solid #dadada; background-color:#fff; color:#020202; font-size:15px; padding:0 20px;}
.mailform textarea.input {border:0; height:200px; padding:20px 20px; background-color:#fff; border:1px solid #dadada;}
.mailform #user_company,
.mailform #user_name,
.mailform #user_tel,
.mailform #user_email {max-width:420px;}
.mailform table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #0b76a0;}
.mailform table tbody th {padding:10px 26px; color:#020202; vertical-align: middle; font-size:15px; font-weight:600; line-height:1.5em; border-bottom:1px solid #dadada; background:#f2f8fa;}
.mailform table tbody td {padding:10px 26px; vertical-align: middle; font-size:15px; font-weight:300; line-height:1.5em; border-bottom:1px solid #dadada;}
.mailform .required {vertical-align:middle;}
.mailform .privacy_box--fc {margin-bottom:10px; border:0; font-size:15px; line-height:1.4em; color:#020202; height:96px; padding:20px 40px; background:#f2f4f6;}
.mailform .privacy_box--fc pre {font-family: "Pretendard", sans-serif !important;}
.mailform input[type="checkbox"] + label {font-size:15px; padding-left:30px; line-height:1.4em; padding-top:1px; color:#020202;}
.mailform input[type="checkbox"] + label:before {content:""; top:0; background-color:#fff; width:20px; height:20px; border-radius: 5px; border:1px solid #dadada; background-position:50% 50%; background-repeat: no-repeat;}
.mailform input[type="checkbox"]:checked  + label:before {background-image: url('../img/bbs/checkbox_on.png'); background-color:#2383a9;}
.mailform .captcha_box--fc {display:flex; align-items: center;}
.mailform .captcha_box--fc a {border:0; margin: 0 10px;}
.mailform .captcha_box--fc input { width:100%; height:52px;border: 1px solid #dadada;  color:#020202; font-size:15px; padding-left:20px;}

.filebox {position:relative; display:flex;}
.filebox label {order:2; width:185px; margin-left:10px; height:100%; background: #595f61; color:#fff; text-align:center; font-size:15px; line-height:50px; font-weight: 600; transition: .3s;}
.filebox label:hover {background:#2383a9;}
.filebox .upload-name {order:1; height:50px; background:#fff; border: 1px solid #dadada;  width:100%; padding:0 20px 0; font-size:15px; line-height:1.4em;}
.mailform + .buttons {margin-top:60px;}


/* 버튼 */
.buttons {margin:30px 0;}
.buttons:after {content:" "; display:block; clear:both;}
.buttons .cen {text-align:center;}
.buttons .cen .btn-pack {margin:0 2px;}
.buttons .fr {float:right;}
.buttons .fl {float:left;}
.buttons a {text-decoration:none;}
.buttons a,.buttons input {vertical-align:top;}
.buttons + .paginate {margin-top:20px;}

.btn-pack {display:inline-flex; justify-content:center; overflow:visible;position:relative;margin:0;padding:0 10px;background:#fff;color:#151515;border:1px solid #acacac;text-align:center;text-decoration:none !important;vertical-align:top;white-space:nowrap;cursor:pointer;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.btn-pack.focus {background:#195409; border:1px solid #195409; color:#fff;}
.btn-pack.list {width:138px; height:52px; background:#fff; line-height:50px;font-size:18px;font-weight:700; padding:0 22px;}
.btn-pack.list:before {content:"";display:inline-block; vertical-align:middle; width:28px; height:17px; background:url('../img/bbs/ico_list.png') 50% 50% no-repeat; background-size:contain; margin-right:10px;}
.btn-pack.form-submit {width:215px; height:60px; line-height:60px; font-size:15px; font-weight: 600; background:linear-gradient(90deg,#0b76a0 30%,#0fb850 100%); color:#fff; border:0; border-radius: 60px;}

.board-wrap--fc a {display:inline-block;}