 @charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:450px !important;} 
.root_daum_roughmap .wrap_map {height:450px !important;} 
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;} 
.root_daum_roughmap .map_border {display: none;} 

.txt-blue {color: #34509f;} 

/* company-intro */
.sub-head {background-color: #f7f7f7; padding:var(--padding-50); border-radius:0 var(--border-radius-40) 0 var(--border-radius-40); text-align:center;} 
.sub-head strong {display:block; font-size: var(--font-size-30); line-height:1.4em; color: #242424; margin-bottom:10px;} 
.sub-head p {font-size: var(--font-size-18); line-height:1.666em;} 

.line {width:1px; height:80px; margin:var(--margin-40) auto; background-color: #ddd;} 

.intro-list {display:flex; margin-left:-30px;} 
.intro-list li {width:calc(33.3333% - 30px); margin-left:30px; min-height:245px; border-radius:10px;} 
.intro-list li .box {display:block; padding:var(--padding-40);} 
.intro-list li:nth-child(odd) {background: var(--color-third);} 
.intro-list li:nth-child(even) {background: #e7e7e7;} 
.intro-list li .box .txt-wrap {display:flex; flex-direction: column; text-align: right; justify-content: end; color:#fff;} 
.intro-list li:nth-child(even) .box .tit {color: #242424;} 
.intro-list li:nth-child(even) .box .txt {color: #454545;} 
.intro-list li .box .tit {font-size:var(--font-size-20); font-weight:600; margin-bottom:10px;} 
.intro-list li .box .txt {font-size: var(--font-size-15); line-height: 1.6em;} 


/* greetings */
.flex-wrap {display:flex;} 

.sub-img {text-align: center;} 
.sub-img img {border-top-left-radius: var(--border-radius-50); border-bottom-right-radius: var(--border-radius-50);} 

.greetings .flex-wrap {padding-top:var(--padding-60); justify-content: space-between;} 
.greetings .tit {width:100%; max-width: 570px;} 
.greetings .tit .eng {display:block; font-style: normal; letter-spacing: .6em; text-transform: uppercase; padding-bottom:var(--padding-20);} 
.greetings .tit h3 {text-align: left; width: fit-content; font-size: var(--font-size-30); color: #242424; line-height:1.466em;} 
.greetings .desc {width:100%; max-width: 630px;} 
.greetings .desc p {margin-bottom:20px;}
.greetings .ceo {display: flex; align-items: center; margin-top:30px;} 
.greetings .ceo img {display:inline-block; margin-left:40px;} 

/* history */
.sub-history {border-top: 2px solid #333333; padding-top:var(--padding-60);} 
.sub-history .txt-wrap {font-size: 23px; line-height: 1.521em; color: #242424; font-weight: 600; margin-bottom:80px;} 
.sub-history .con1 {margin-right: 180px;} 
.sub-history .txt-wrap .tit {font-size: 40px; margin-bottom: 20px; font-weight: 700; font-family: 'Montserrat', sans-serif; display: block;} 
.sub-history .txt-wrap .tit strong {text-transform: uppercase;} 
.sub-history .txt-wrap .tit span {font-size: 33px; color: #242424;} 
.sub-history .txt-wrap p {font-weight: 500; font-size: 18px; line-height: 1.555em;} 
.sub-history .con1 .group-flex {flex-direction: column;} 
.sub-history .con2 {position:relative;} 
.sub-history .con2:after {content: ''; position: absolute; top: 12px; left: 0; width: 1px; height: 94%; background-color: #ddd;} 
.sub-history .con2 .col {padding-left:70px; padding-bottom: 40px;} 
.sub-history .con2 .col .year {color: #242424; font-size: 28px; font-weight: 600; margin-bottom: 10px; position: relative; line-height:1em;} 
.sub-history .con2 .col .year:before {content:''; width:20px; height:20px; border-radius:50%; position: absolute; left: -80px; top: 50%; transform: translateY(-50%); z-index:1; background: url(../images/sub/history-dot.png) no-repeat 100%/contain;} 
.sub-history .con2 .col .year::after {content:''; position: absolute; top: 13px; left: -50px; width: 40px; height: 1px; background-color: #ddd;} 
.sub-history .con2 .col .info .wrap {display:flex;} 
.sub-history .con2 .col .info .wrap ul {min-width:0; width:1%; flex:1 1 auto;} 
.sub-history .con2 .col .info .wrap ul li {line-height: 2.1875em; position:relative; padding-left: 13px;} 
.sub-history .con2 .col .info .wrap ul li:before {content:'-'; position: absolute; top:0; left:0; font-size: var(--body-font-size); line-height:2.1875em; color: #454545;} 

/* business */
.doc-wrap {display:flex;} 
.doc-tit-area {width:33%; max-width:340px; padding-right:var(--padding-50);} 
.doc-tit {position:relative; width: fit-content; padding-left:40px; font-size: var(--font-size-30); color: #242424;} 
.doc-tit::before {content: ""; position: absolute; top:12px; left:0;width:28px; height:28px; background: url(../images/sub/bullet2.png) no-repeat center/contain;} 
.doc-cnt-area {flex:1 1 auto; min-width:0; width:1%;} 
.dot-line {width:100%; height:var(--margin-80); border-bottom: 1px dashed #ddd; margin-bottom:var(--margin-80);} 

.business .img-list ul {display:flex; flex-wrap: wrap; margin:-25px -15px;} 
.business .img-list ul li {width:50%; padding:25px 15px;} 
.business .img-list ul li .img {margin-bottom:20px;} 
.business .img-list p {font-size: var(--font-size-18); line-height:1.666em;} 
.business .img-list.type2 {padding-bottom:var(--padding-50);} 
.business .img-list.type2:last-child {padding-bottom:0;} 
.business .img-list.type2 ul {flex-wrap: nowrap;} 
.business .img-list.type2 li {width:33.3333%;} 

/* 연구개발 */
.process-list {padding-top:20px;}
.process-list ul {display:flex; flex-wrap: wrap; margin:-40px -30px;} 
.process-list ul li {position:relative; padding:40px 30px; width:33.3333%; min-height: 160px;} 
.process-list ul li:nth-child(4) {order: 6;} 
.process-list ul li:nth-child(5) {order: 5;} 
.process-list ul li:nth-child(6) {order: 4;} 
.process-list ul li:nth-child(7) {order: 7;} 
.process-list ul li:nth-child(8) {order: 8;} 
.process-list ul li:nth-child(9) {order: 9;} 
.process-list ul li:nth-child(10) {order: 12;} 
.process-list ul li:nth-child(11) {order: 11;} 
.process-list ul li:nth-child(12) {order: 10;} 
.process-list ul li::after {content: ""; position: absolute; top:50%; right: -16px; transform: translateY(-50%); width:31px; height:24px; background: url(../images/sub/arrow-process.png) no-repeat center/contain;} 
.process-list ul li:nth-child(3)::after,
.process-list ul li:nth-child(7)::after {right:auto; top:auto; bottom:0; left:50%; transform: translateX(-50%) rotate(89deg);} 
.process-list ul li:nth-child(4)::after,
.process-list ul li:last-child:after {display:none;} 
.process-list ul li:nth-child(5)::after,
.process-list ul li:nth-child(6):after,
.process-list ul li:nth-child(11):after {transform: translateY(-50%) rotate(180deg);} 
.process-list ul li:nth-child(7)::after,
.process-list ul li:nth-child(10)::after {right: auto; top: -20px; bottom: auto; left: 50%; transform: translateX(-50%) rotate(89deg);} 
.process-list ul li:nth-child(8)::after,
.process-list ul li:nth-child(9)::after {right: auto; left: -15px;} 
.process-list ul li .wrap {position:relative; padding: 50px 0 30px; text-align:center; background-color: #f7f7f7; height: 100%;} 
.process-list ul li.bin .wrap {background-color: transparent;} 
.process-list ul li .wrap .num {position: absolute; top:-20px; left:50%; transform: translateX(-50%); width:40px; height:40px; display:flex; justify-content: center; align-items: center; border-radius: 100%;} 
.process-list ul li:nth-child(odd) .wrap .num {background-color: #34509f;} 
.process-list ul li:nth-child(even) .wrap .num {background-color: #1b3273;} 
.process-list ul li .wrap .num strong {font-size: var(--font-size-18); color: #fff; font-weight:600;} 
.process-list ul li .img {margin-bottom:15px;} 
.process-list .txt {font-size: var(--font-size-17); line-height:1.647em;} 

/* 금형제작 */
.mold .head {position:relative; padding:var(--padding-30) 0; background: #34509f; text-align: center; font-size: var(--font-size-30); line-height:1.4em; font-weight:700; color: #fff;} 
.mold .head::after {content: ""; position: absolute; bottom: -27px; left: 50%; transform: translateX(-50%); width: 40px; height: 30px; background: url(../images/sub/triagnle.png) no-repeat center/contain;} 
.mold .head p {font-size: var(--font-size-18); margin-top:5px; font-weight:normal;} 

.process-list2 {padding-top:var(--padding-100);} 
.process-list2 ul {margin:-45px 0;} 
.process-list2 ul li {position:relative; min-height: 210px; padding:45px 0;} 
.process-list2 ul li .wrap {position:relative; padding: var(--padding-70) 10px var(--padding-50); text-align:center; background-color: #f7f7f7; border-radius: var(--border-radius-30); height: 100%;} 
.process-list2 ul li .wrap .num {position: absolute; top: -30px; left:50%; transform: translateX(-50%); width: 200px; height: 60px; display:flex; justify-content: center; align-items: center; border-radius: 50vh;} 
.process-list2 ul li:nth-child(odd) .wrap .num {background-color: #1b3273;} 
.process-list2 ul li:nth-child(even) .wrap .num {background-color: #34509f;} 
.process-list2 ul li .wrap .num strong {font-size: var(--font-size-26); color: #fff; line-height:1.615em;} 
.process-list2 .tit {font-weight:700; font-size: var(--font-size-26); line-height:1.615em; color: #242424; margin-bottom: 15px;} 
.process-list2 .txt {line-height:1.625em;} 

.point {margin-top:20px; color: #898989; padding-bottom:var(--padding-60);} 

.doc-tit2 {position:relative; width: fit-content; padding-top:var(--padding-90); font-size: var(--font-size-30); color: #242424; margin:0 auto;} 
.doc-tit2::before {content: ""; position: absolute; top:0; left:50%; transform: translateX(-50%); width:10px; height:70px; background: url(../images/sub/bullet3.png) no-repeat center/contain;} 

.process-list3 {padding: var(--padding-40) 0 var(--padding-80);} 
.process-list3 ul {display:flex;} 
.process-list3 ul li {position:relative; display:flex; justify-content: center; align-items: center; width:20%; margin-right:30px; padding: 10px 0; border-radius: 10px; text-align: center; color: #fff; font-weight:500; font-size: var(--font-size-18);} 
.process-list3 ul li:last-child {margin-right:0;} 
.process-list3 ul li::after {content: ""; position: absolute; top:50%; right: -16px; transform: translateY(-50%); width:7px; height:12px; background: url(../images/sub/arrow-process2.png) no-repeat center/contain;} 
.process-list3 ul li:last-child::after {display:none;} 
.process-list3 ul li:nth-child(odd) {background-color: #34509f;} 
.process-list3 ul li:nth-child(even) {background-color: #1b3273;} 

.doc-cnt-area .tit {margin-bottom: 10px; font-weight:600; font-size: var(--font-size-18); line-height:1.666em; color: #34509f;} 
.doc-cnt-area .desc {font-size: var(--font-size-18); line-height:1.666em;} 

.product-menu {position:relative; margin-bottom:var(--margin-60); border-top:1px solid #ddd; border-bottom:1px solid #ddd;} 
.product-menu .menu {margin:0 auto; max-width:1200px;} 
.product-menu .menu ul {display:flex;} 
.product-menu .menu ul li {flex:1; text-align:center; border-right:1px solid #ddd;} 
.product-menu .menu ul li:first-child {border-left:1px solid #ddd;} 
.product-menu .menu ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:50px; padding:0 15px; color:#242424; font-size:18px; font-weight:500; line-height:1.2em; letter-spacing:-.03em;} 
.product-menu .menu ul li.active {background:#34509f; border:0;} 
.product-menu .menu ul li.active a {color:#fff;} 

@media (max-width: 1024px){
 .product-menu .menu ul li a {height:45px; font-size:16px;} 
}
@media (max-width: 640px){
 .product-menu .menu ul li a {height:40px; font-size:15px;} 
}