@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"(주)제이디아이시스템"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}

.bg-gray {background:#fafafa;}

.content-wrap + .content-wrap {padding-top:clamp(50px, calc( 125 / var(--inner) * 100vw ), 125px);}

.greet-wrap {overflow: hidden;}
.greet-wrap .flxWrap {align-items: center;}
.greet-wrap .imgbx {flex:1 0 520px; max-width: 520px; margin-right: clamp(15px, calc( 75 / var(--inner) * 100vw ), 75px);}
.greet-wrap .textbx {flex: 1 0 auto; width: 1%; }
.greet-wrap .tit {font-size:clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; line-height: 1.4;}
.greet-wrap .txtbx {margin-top: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}
.greet-wrap .txt {color: #454545; line-height:1.625; letter-spacing: -0.5px;}
.greet-wrap .txt + .txt {margin-top: clamp(15px, calc( 27 / var(--inner) * 100vw ), 27px);}


.histofy-title {margin-bottom:clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); position: relative;  }
.histofy-title:after {position: absolute; content: ''; right: 0; bottom: 0; width: clamp(150px, calc( 250 / var(--inner) * 100vw ), 250px); height: clamp(90px, calc( 150 / var(--inner) * 100vw ), 150px); background: url(../images/sub/his-logo.png) no-repeat right bottom; background-size:contain;}
.histofy-title .year {display: block; font-family: var(--font-montserrat); font-weight:700; color:var(--color-primary); }
.histofy-title .text {padding-top: 4px; font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); line-height:1.42;}

.history-wrap {border-top:2px solid #000; padding-top:100px; position:relative; color: #454545;}
.history-wrap:before {top:120px; bottom:0; position:absolute; left:50%; width:1px; background-color:#ddd; content:"";}
.history-item {padding-bottom:60px; display:flex; align-items:initial;}
.history-item:last-child {padding-bottom:0;}
.history-wrap .years {margin-top: -5px; margin-bottom: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-size: clamp(22px, calc( 40 / var(--inner) * 100vw ), 40px); color: #242424; font-weight: bold; line-height: 1;}
.history-item .history-year {position:relative; top:0; left:0; width:50%; color:#242424; font-size:28px; line-height:1.4em; letter-spacing:-.03em; text-align:right; padding-right:0; display:flex; justify-content:space-between;}
.history-item .history-year strong {line-height:1em; display:inline-block; text-align:center; transition:all 0.5s ease; font-weight:500; flex:1; opacity: 0;}
.history-month-box {padding-left:75px; flex:1;}

.history-detail {margin-bottom:15px; padding-left: 15px; display:flex; position: relative; color: #454545; letter-spacing:-.03em; transition:all 0.5s ease; }
.history-detail:after {position: absolute; content: ''; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary);} 
.history-detail:last-child {margin-bottom:0;}
.history-detail p {flex:1;}

.history-item:nth-child(even) {flex-direction: row-reverse; text-align: right;}
.history-item:nth-child(even) .history-month-box {padding-left:0; padding-right:75px;}
.history-item:nth-child(even) .history-year {flex-direction: row-reverse;}
.history-item:nth-child(even) .dots {right: initial; left: -5px;}
.history-item:nth-child(even) .history-detail {padding-left: 0; padding-right: 15px;}
.history-item:nth-child(even) .history-detail:after {right: 0; left: initial;}

.history-item .dots {width:10px; height:10px; top:9px; right:-5px; margin:0; position:relative; border:2px solid #000; background:#fff; border-radius:50%; transition:all 0.3s; z-index:0;}
.history-item .dots .inner-dots {width:60px; height:60px; position:absolute; background:rgba(235, 101, 32, 0.1); border-radius:100%; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; transition:all 0.3s;}
.history-item .dots .inner-dots:after {width:36px; height:36px; display:block; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; background:rgba(235, 101, 32, 0.3); border-radius:100%; transition:all 0.5s;}
.history-item.active .history-year {font-size:60px;}
.history-item.active .history-year strong {font-weight:700;}
.history-item.active .history-detail {font-weight:700;}
.history-item.active .history-month-item {color:#242424;}
.history-item.active .dots .inner-dots {transform:translate(-50%,-50%) scale(1); animation:ani .5s forwards ease; animation-delay:.05s;}
.history-item.active .dots .inner-dots:before {width:24px; height:24px; display:block; content:""; background:#fff; position:absolute; left:50%; top:50%; border-radius:100%; border:6px solid var(--color-primary); animation:ani .5s forwards ease; animation-delay:.02s;}
.history-item.active .dots .inner-dots:after {animation:ani .5s forwards ease; animation-delay:.08s;}
.history-item.active .history-year strong {line-height:.6em;}

@keyframes ani {
	0% {transform:translate(-50%,-50%) scale(0);}
	100% {transform:translate(-50%,-50%) scale(1);}
}

@media (max-width: 1024px) {
	.history-month-box {padding-left:50px;}
    .history-item.reverse .history-month-box {padding-right:50px;}
	.history-detail {font-size: 16px;}
	.history-wrap:before {top:80px; }
	.history-item .dots .inner-dots {width:80px; height:80px;}
	.history-item .dots .inner-dots:after {width:50px; height:50px;}
	.history-item.active .dots .inner-dots:before {width:30px; height:30px;}
	.history-item.active .history-year {font-size: 36px;}
}

@media (max-width: 640px) {
	.history-wrap {padding-top:50px;}
	.history-month-box {padding-left:0;}
	.history-item {padding-bottom: 50px; display:block;}
    .history-item:nth-child(even) .history-month-box {padding: 0; text-align: left;}
    .history-item:nth-child(even) .history-detail {padding-left: 15px; padding-right: 0;}
    .history-item:nth-child(even) .history-detail:after {right: initial; left: 0;}
	.history-item .history-year {display: none; }
	.history-item .dots {display:none;}
	.history-wrap:before {display:none;}
	.history-detail {margin-bottom:7px;}

}


.directions {display: flex; flex-wrap: wrap; margin-top:55px;}
.directions .address-info {flex: 1 0 50%; max-width: 50%;}
.directions .address-info .comp {color:var(--color-primary); font-weight:600; margin-bottom:10px;}
.directions .address-info .addr {font-size:26px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:10px;}
.directions .address-info .etc {color:#898989; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {flex: 1 0 auto; width: 1%; line-height:1.5em;}
.directions .contact-info dl {display:flex; }
.directions .contact-info dl + dl {margin-top: clamp(20px, calc( 36 / var(--inner) * 100vw ), 36px);}
.directions .contact-info dt {width:180px;  color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#ababab;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

@media (max-width: 1024px) {
	.root_daum_roughmap .wrap_map {height:300px !important;}
	.directions .address-info .addr {font-size:20px;}
	.directions .contact-info dt {width:140px;}
}

@media (max-width: 640px) {
	.root_daum_roughmap .wrap_map {height:250px !important;}	
	.directions {margin-top:30px;}
	.directions .address-info .addr {font-size:18px;}
	.directions .address-info {margin-bottom:20px;}
	.directions .contact-info dt { width:100px;}
	.directions .contact-info dt svg {margin-right:10px;}
}

.toptxtbx {margin-bottom:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px);}
.toptxtbx .eng {font-family: var(--font-montserrat); font-weight: bold; color: var(--color-primary);}
.toptxtbx .tit {padding-top: 10px; font-size:  clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; }
.toptxtbx .text {padding-top: 15px; font-size:  clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; line-height: 1.5;}

.bottomimgbx {padding:  clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px)  clamp(16px, calc( 30 / var(--inner) * 100vw ), 30px); background-size: cover !important;border-radius: 20px; overflow: hidden; color: #fff;}
.bottomimgbx.bg1 {background: url(../images/sub/busi01-bg1.jpg) no-repeat center center;}
.bottomimgbx.bg2 {background: url(../images/sub/busi01-bg2.jpg) no-repeat center center;}
.bottomimgbx.bg3 {background: url(../images/sub/busi02-bg1.jpg) no-repeat center center;}
.bgtext-list {display: flex; flex-wrap: wrap; margin: -10px;}
.bgtext-item {flex: 1 0 25%; max-width: 25%; padding: 10px; text-align: center;}
.bgtext-item .icn img {width:  clamp(90px, calc( 150 / var(--inner) * 100vw ), 150px);}
.bgtext-item .textbx {padding-top: 15px;}
.bgtext-item .textbx .name {font-size:  clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; margin-bottom: 10px;}
.bgtext-item .textbx .text {line-height: 1.6;}
.bgtext-list.type2 .bgtext-item {flex: 1 0 33.33%; max-width: 33.33%;}

.solution-item + .solution-item{margin-top:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.solution-item {border: 1px solid #ddd;}
.solution-item .inner {display: flex;flex-wrap: wrap;}
.solution-item .imgbx {flex: 1 0 clamp(180px, calc( 350 / var(--inner) * 100vw ), 350px); max-width: clamp(180px, calc( 350 / var(--inner) * 100vw ), 350px); }
.solution-item .images {display: flex; align-items: center; justify-content: center; padding: 30px; height: 100%;}
.solution-item .images img {object-fit: scale-down;}
.solution-item .textbx {flex: 1 0 auto; width: 1%;  padding: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px); border-left: 1px solid #dddd;}
.solution-item .name {font-size:  clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight: bold; line-height: 1.4;}
.solution-item .txt1 {padding-top: 11px; color: #898989; line-height: 1.5;}
.solution-item .txt2 {padding-top: clamp(15px, calc( 21 / var(--inner) * 100vw ), 21px); font-weight: 500 ;color: #454545; line-height: 1.5;}
.solution-item .buttonbx {display: flex; flex-wrap: wrap; padding-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); margin: -5px;}
.solution-item .button-list {padding: 5px;}
.solution-item .btn-link {display: inline-flex; align-items: center; justify-content: center; min-width: clamp(120px, calc( 140 / var(--inner) * 100vw ), 140px); height: clamp(36px, calc( 44 / var(--inner) * 100vw ), 44px); color:var(--color-primary); border-bottom: 1px solid var(--color-primary);}

.board-form .name {padding-bottom:12px; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;}
.board-form .name .small {font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color: #454545; font-weight: 400;} 
.board-form .input {padding: 0; border: 0; border-bottom: 1px solid #ddd;}
.board-form .input::placeholder {color: #ababab;}
.board-form textarea.input {padding:15PX; border: 1px solid #ddd; border-radius: 10px; overflow: hidden;}
.board-form .input:focus {border-bottom: 1px solid #000 ; outline: none ;}
.board-form .input:focus::placeholder {color: #000;}
.board-form textarea.input:focus {border: 1px solid #000 ; }

.inquiry-wrap .buttons .cen .btn-pack {padding: 0; padding-bottom: clamp(6px, calc( 15 / var(--inner) * 100vw ), 15px); min-width: clamp(70px, calc( 100 / var(--inner) * 100vw ), 100px); height: clamp(70px, calc( 100 / var(--inner) * 100vw ), 100px); line-height: initial; border-radius: 50%; background: #000 url(../images/sub/inq-icn.png) no-repeat bottom clamp(16px, calc(27 / var(--inner) * 100vw), 27px) center; border-color: #000;font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 500;}