/* 회사소개 */
[data-catagory=company] .bg1 { position: absolute; top: 420px; left: -120px; width: 519px; height: 461px; background: url("../image/bg-shape-4.png") no-repeat; z-index: -1 }
[data-catagory=company] .bg2 { position: absolute; top: 280px; right: -300px; width: 785px; height: 501px; background: url("../image/bg-login-1.png") no-repeat; z-index: -1 }
[data-catagory=company] .bg3 { position: absolute; top: 445px; right: -120px; width: 146px; height: 143px; background: url("../image/bg-login-2.png") no-repeat; z-index: -1 }
@media screen and (max-width: 768px) { [data-catagory=company] .bg1, [data-catagory=company] .bg2, [data-catagory=company] .bg3 { display: none }
 }
[data-catagory=company] .templ-type-tab-medium { margin: 65px 0 50px }
@media screen and (max-width: 768px) { [data-catagory=company] .templ-type-tab-medium { margin: 0 0 37px }
 }
[data-catagory=company] .history-contents .history-box { margin-bottom: -100px; text-align: center }
[data-catagory=company] .history-contents .history-box dt { position: relative; font-size: 42px; line-height: 42px }
[data-catagory=company] .history-contents .history-box dd { position: relative; padding: 60px 0 120px 0 }
[data-catagory=company] .history-contents .history-box dd:before { content: ""; display: block; position: absolute; top: 20px; left: 50%; width: 1px; height: calc(100% - 40px); background: #eee; transform: translateX(-50%); z-index: -1 }
[data-catagory=company] .history-contents .history-box dd .list li:after { content: ""; display: block; clear: both }
[data-catagory=company] .history-contents .history-box dd .list li .img { position: relative; float: left; width: calc(50% - 60px) }
[data-catagory=company] .history-contents .history-box dd .list li .img img { width: 100%; height: 310px }
[data-catagory=company] .history-contents .history-box dd .list li .content { position: relative; float: right; width: calc(50% - 60px); margin: 45px 0; text-align: left }
[data-catagory=company] .history-contents .history-box dd .list li .content:before { content: ""; display: block; position: absolute; top: 6px; left: -66px; width: 12px; height: 12px; border-radius: 50%; background: #da291c }
[data-catagory=company] .history-contents .history-box dd .list li .content span { display: block }
[data-catagory=company] .history-contents .history-box dd .list li .content span.date { font-size: 22px; line-height: 22px; font-weight: bold }
[data-catagory=company] .history-contents .history-box dd .list li .content span.title { margin-top: 20px; font-size: 36px; line-height: 36px; font-family: SpoqaHanSans-Light }
[data-catagory=company] .history-contents .history-box dd .list li .content span.text { margin-top: 25px; line-height: 24px; color: #555 }
[data-catagory=company] .history-contents .history-box dd .list li .content .btn-border { position: relative; display: inline-block; margin-top: 25px; font-size: 18px; line-height: 18px }
[data-catagory=company] .history-contents .history-box dd .list li .content .btn-border:before { content: ""; display: block; position: absolute; top: 90%; left: 0; width: 100%; height: 6px; background: #33aeb6; z-index: -1 }
[data-catagory=company] .history-contents .history-box dd .list li+li { margin-top: 60px }
[data-catagory=company] .history-contents .history-box dd .list li:nth-child(even) .img { float: right }
[data-catagory=company] .history-contents .history-box dd .list li:nth-child(even) .content { float: left; text-align: right }
[data-catagory=company] .history-contents .history-box dd .list li:nth-child(even) .content:before { left: auto; right: -66px }
@media screen and (max-width: 768px) { [data-catagory=company] .history-contents .history-box { margin-bottom: 0 }
 [data-catagory=company] .history-contents .history-box dt { font-size: 29px; line-height: 29px }
 [data-catagory=company] .history-contents .history-box dt:after { content: ""; position: absolute; top: calc(100% + 10px); left: 50%; width: 1px; height: 25px; background: #eee; z-index: -1 }
 [data-catagory=company] .history-contents .history-box dd { padding: 50px 0 0 0 }
 [data-catagory=company] .history-contents .history-box dd:before { display: none }
 [data-catagory=company] .history-contents .history-box dd:last-child .list li .img { padding-bottom: 0 }
 [data-catagory=company] .history-contents .history-box dd:last-child .list li .img:after { display: none }
 [data-catagory=company] .history-contents .history-box dd .list li .img { float: none; margin-top: 25px; padding-bottom: 80px; width: 100% }
 [data-catagory=company] .history-contents .history-box dd .list li .img:after { content: ""; display: block; position: absolute; bottom: 10px; left: 50%; width: 1px; height: 100px; background: #eee; z-index: -1 }
 [data-catagory=company] .history-contents .history-box dd .list li .img img { height: auto }
 [data-catagory=company] .history-contents .history-box dd .list li .content { float: none; margin: 0; width: 100%; text-align: center }
 [data-catagory=company] .history-contents .history-box dd .list li .content:before { top: auto; left: 50%; bottom: calc(100% + 15px); width: 7px; height: 7px; transform: translateX(-50%) }
 [data-catagory=company] .history-contents .history-box dd .list li .content span.date { font-size: 17px; line-height: 17px }
 [data-catagory=company] .history-contents .history-box dd .list li .content span.title { margin-top: 15px; font-size: 21px; line-height: 21px }
 [data-catagory=company] .history-contents .history-box dd .list li .content span.text { margin-top: 20px; line-height: 21px }
 [data-catagory=company] .history-contents .history-box dd .list li .content .btn-border { margin-top: 20px; font-size: 15px; line-height: 15px }
 [data-catagory=company] .history-contents .history-box dd .list li .content .btn-border:before { height: 5px }
 [data-catagory=company] .history-contents .history-box dd .list li+li { margin-top: 25px }
 [data-catagory=company] .history-contents .history-box dd .list li:nth-child(even) .content { text-align: center }
 [data-catagory=company] .history-contents .history-box dd .list li:nth-child(even) .content:before { top: auto; left: 50%; bottom: calc(100% + 15px); width: 7px; height: 7px; transform: translateX(-50%) }
 }
.company-vision-wrap { margin-bottom: -100px }
@media screen and (max-width: 768px){
 .company-vision-wrap { margin: 0 -20px -40px }
 }
.company-vision-wrap .company-vision-area { position: relative }
.company-vision-wrap .company-vision-area .vision-image { margin: 0 -320px }
.company-vision-wrap .company-vision-area .vision-image img { width: 100% }
.company-vision-wrap .company-vision-area .vision-text { position: absolute; top: 100px; left: 0; z-index: 2 }
.company-vision-wrap .company-vision-area .vision-text .number { display: block; margin-bottom: 10px; font-size: 36px; line-height: 36px; color: #fff }
.company-vision-wrap .company-vision-area .vision-text .text { font-size: 62px; line-height: 82px; color: #fff }
.company-vision-wrap .company-vision-area .vision-text .content { margin-top: 43px }
.company-vision-wrap .company-vision-area .vision-text .content p { font-size: 20px; line-height: 30px; color: #fff }
.company-vision-wrap .company-vision-area .vision-text .content p+p { margin-top: 10px }
@media screen and (max-width: 768px){
 .company-vision-wrap .company-vision-area .vision-image { margin: 0 }
 .company-vision-wrap .company-vision-area .vision-text { top: 50px; left: 20px }
 .company-vision-wrap .company-vision-area .vision-text .number { margin-bottom: 5px; font-size: 18px; line-height: 18px }
 .company-vision-wrap .company-vision-area .vision-text .text { font-size: 26px; line-height: 34px }
 .company-vision-wrap .company-vision-area .vision-text .content { margin-top: 22px }
 .company-vision-wrap .company-vision-area .vision-text .content p { font-size: 14px; line-height: 21px }
 .company-vision-wrap .company-vision-area .vision-text .content p+p { margin-top: 7px }
 }
.company-vision-wrap .vision-top { position: relative; height: 542px; padding: 112px 0 0; text-align: center }
.company-vision-wrap .vision-top .logo { display: inline-block; width: 229px; height: 44px }
.company-vision-wrap .vision-top .logo img { width: 100%; height: 100% }
.company-vision-wrap .vision-top .text { display: block; margin: 60px 0 40px; font-weight: 700; font-size: 36px; line-height: 36px }
.company-vision-wrap .vision-top .sub p { font-size: 24px; line-height: 36px; color: #555 }
.company-vision-wrap .vision-top .sub p+p { margin-top: 17px }
@media screen and (max-width: 768px){
 .company-vision-wrap .vision-top { height: 290px; padding: 41.5px 0 0; background-image: url("../image/vision-top-mobile.jpg"); background-size: 100% 290px }
 .company-vision-wrap .vision-top .logo { width: 156px; height: 30px }
 .company-vision-wrap .vision-top .text { margin: 40px 0 20px; font-size: 24px; line-height: 24px }
 .company-vision-wrap .vision-top .sub p { font-size: 14px; line-height: 21px }
 .company-vision-wrap .vision-top .sub p+p { margin-top: 7px }
 }
.company-vision-wrap .vision-01 .content-box { width: 33.33% }
.company-vision-wrap .vision-01 .content-box .title { font-size: 46px; line-height: 46px; color: #fff }
.company-vision-wrap .vision-01 .content-box .content { margin: 16px 0 33px; font-size: 20px; line-height: 30px; color: #fff }
.company-vision-wrap .vision-01 .content-box .btn-link { border-bottom: 1px solid #fff; color: #fff }
@media screen and (max-width: 768px){
 .company-vision-wrap .vision-01 .content-box { width: auto; height: auto; padding: 30px 25px }
 .company-vision-wrap .vision-01 .content-box .title { font-size: 23px; line-height: 23px }
 .company-vision-wrap .vision-01 .content-box .content { margin: 8px 0 15px; font-size: 14px; line-height: 21px }
 }
.company-vision-wrap .vision-01 .pc-view .vision-image { position: relative; padding-bottom: 78.126% }
.company-vision-wrap .vision-01 .pc-view .vision-image img { position: absolute; top: 0; left: 0; opacity: 1 }
.company-vision-wrap .vision-01 .pc-view .vision-company { overflow: hidden }
.company-vision-wrap .vision-01 .pc-view .vision-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2 }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box { position: absolute; top: 0; bottom: 0 }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box .inner-box { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 360px; padding: 110px 0 0 60px }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box:before, .company-vision-wrap .vision-01 .pc-view .vision-content .content-box:after { display: none; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: hsla(0, 0%, 100%, .2); content: "" }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box:first-child { left: 0 }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box:first-child:before { display: block; left: 0 }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box:first-child:after { display: block }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box:nth-child(2) { left: 33.33% }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box:nth-child(2):after { display: block }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box:nth-child(3) { left: 66.66% }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box:nth-child(3):after { display: block }
.company-vision-wrap .vision-01 .pc-view .vision-content .content-box.active .inner-box { background-color: rgba(51, 174, 182, .7); transition: background .3s ease-in-out }
.company-vision-wrap .vision-01 .mobile-view .content-box { position: absolute; right: 50px; bottom: 0; left: 50px; background-color: rgba(51, 174, 182, .7) }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-next, .company-vision-wrap .vision-01 .mobile-view .swiper-button-prev { top: auto; bottom: 60px }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-next:before, .company-vision-wrap .vision-01 .mobile-view .swiper-button-next:after, .company-vision-wrap .vision-01 .mobile-view .swiper-button-prev:before, .company-vision-wrap .vision-01 .mobile-view .swiper-button-prev:after { position: absolute; right: 12px; width: 1px; height: 22px; background-color: #fff; content: "" }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-next:before, .company-vision-wrap .vision-01 .mobile-view .swiper-button-prev:before { top: 4px }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-next:after, .company-vision-wrap .vision-01 .mobile-view .swiper-button-prev:after { bottom: 3px }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-next { right: 20px }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-next:before { transform: rotate(-45deg) }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-next:after { transform: rotate(-135deg) }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-prev { left: 20px }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-prev:before { transform: rotate(45deg) }
.company-vision-wrap .vision-01 .mobile-view .swiper-button-prev:after { transform: rotate(135deg) }



/* 윤리경영 */
.form-box { margin: 60px 0 0 0}
.form-box legend { position: absolute; left: -99999px; display: block; width: 1px; height: 1px; overflow: hidden; text-indent: -99999px}
.form-box .login-check { margin-top: 20px}
.form-box .login-check:after { content: ""; display: block; clear: both}
.form-box .login-check .login-link-box { float: right; font-size: 0}
.form-box .login-check .login-link-box .text-button { position: relative; font-size: 16px; line-height: 16px; color: #555; vertical-align: -10px}
@media screen and (max-width: 768px){
 .form-box .login-check .login-link-box .text-button { font-size: 14px; line-height: 14px}
 }
.form-box .login-check .login-link-box>*+*:before { content: ""; display: inline-block; margin: 0 10px; width: 1px; height: 16px; vertical-align: -3px; background: #eee}
@media screen and (max-width: 768px){
 .form-box .login-check { margin-top: 10px}
 }
.form-box .login-check .checkbox-box [type=checkbox]+label { margin-left: 0}
@media screen and (max-width: 768px){
 .form-box { margin: 40px 0 0 0}
 .form-box .form-wrap+.form-wrap { margin-top: 25px}
 .form-box:first-child { margin-top: 0}
 }
[data-catagory=footer] .templ-type-title { margin-bottom: 65px}
[data-catagory=footer] .templ-type-tab-medium { margin: 50px 0}
@media screen and (max-width: 768px) { [data-catagory=footer] .templ-type-tab-medium { margin: 40px 0}
 }

.management-box .management-info dt { font-size: 24px; line-height: 24px}
.management-box .management-info dd { margin-top: 20px; line-height: 26px}
.management-box .management-info dd+dt { margin-top: 60px}
.management-box .management-info dd .list { margin-top: 30px; padding: 40px; background: #f5f5f5}
.management-box .management-info dd .list li { margin-top: 20px; padding-left: 15px; line-height: 26px}
.management-box .management-info dd .list li:first-child { margin-top: 0}
.management-box .management-info dd .list li strong { display: block; text-indent: -15px; line-height: 26px; font-weight: bold}
.management-box .management-info dd .list li strong em { display: block; margin-top: 3px; text-indent: 0}
.management-box .management-info dd .list li span { display: block; margin-top: 10px; line-height: 26px; color: #555}
.management-box .management-info dd .sub-text { margin-top: 30px; color: #555; line-height: 26px}
.management-box .management-info .sign { display: block; margin-top: 30px; font-weight: bold; color: #555; text-align: right}
@media screen and (max-width: 768px){
 .management-box .management-info dt { font-size: 18px}
 .management-box .management-info dd { margin-top: 15px; line-height: 19px}
 .management-box .management-info dd+dt { margin-top: 40px}
 .management-box .management-info dd .list { margin-top: 20px; padding: 20px}
 .management-box .management-info dd .list li { margin-top: 15px; padding-left: 13px; line-height: 19px}
 .management-box .management-info dd .list li strong { text-indent: -13px; line-height: 19px}
 .management-box .management-info dd .list li span { margin-top: 5px; line-height: 19px}
 .management-box .management-info dd .sub-text { margin-top: 20px; line-height: 19px}
 .management-box .management-info .sign { margin-top: 20px}
 }