@charset "utf-8";
/* common */
#header{border-bottom:1px solid #ebebeb;}
#content{padding-bottom:70rem;}
#content h2,
.page_title{ padding: 84rem 0 58rem; text-align:center; }
#content h2,
.page_title__h2{ font-size:var(--font_size48); color:#000; font-weight:700;word-break:keep-all; transition:all .2s;}
#wrap .page_title__h2{ padding: 0; }
.page_title__p{ margin-top: 11rem; font-size: 18rem; color: #9a9a9a; }
.page_title__p2{ margin-top: 1.14285714em; font-size: var(--font_size28); font-weight: 700; }
.page_title__p2 .highlight{ color: var(--primary); }
@media(max-width:1279px){
    #content h2,
    .page_title{ padding: 40rem 0 30rem; }
    #content h2,
	.page_title__h2{ font-size: 30rem; }
}
@media(max-width:767px){
    #content h2,
	.page_title__h2{ font-size:25rem; }
}

/* 회사소개 - 인사말 */
.area_greeting1{ margin-top: -17rem; height: 12.5em; background: #000 url("/images/content/img_greeting_bg.jpg") no-repeat 50% / cover; text-align: center; font-size: var(--font_size48); color: #fff; }
.area_greeting1 .inr{ display: flex; flex-direction: column; justify-content: center; }
.area_greeting1__p{font-size: 38rem; font-weight:300; }
.area_greeting1__h3{ margin-top: 0.95833333em; font-size: inherit; line-height: 1.35416667; }
.area_greeting2{ margin-top: 109rem; text-align: center; }
.area_greeting2 .first,
.area_greeting2 .last{font-size: var(--font_size28); font-weight: 700; line-height: 1.8; color: #111;}
.area_greeting2 .first{padding-bottom:55rem;}
.area_greeting2 .last{padding-top:55rem; padding-bottom:164rem;}
.area_greeting3{position:relative; width:1200px; margin:0 auto; padding:0 0 80rem 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.area_greeting3::before{content:""; position:absolute; top:-85px; left:50%; display:block; width:1px; height:170rem; background-color:#000;}
.area_greeting3::after{content:""; position:absolute; top:0; left:50%; display:block; width:1px; height:85rem; background-color:#fff;}
.area_greeting3 > ul{display:flex;}
.area_greeting3 > ul > li{position:relative; width:calc(33.333% - 10px); height:480rem; margin-right:10px; padding-top:130rem; padding-right:46rem; padding-left:46rem; color:#fff; background-size:cover; background-position:right 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.area_greeting3 > ul > li:last-child{margin-right:0;}
.area_greeting3 > ul > li .icon{display:inline-block; width:50rem; height:50rem; background-repeat:no-repeat; background-position:left bottom; background-size:contain;}
.area_greeting3 > ul > li .en{display:block; padding-top:20rem; font-size:18rem; color:#e3e3e3;}
.area_greeting3 > ul > li .tit{display:block; padding-bottom:30rem; font-size:36rem; font-weight:700;}
.area_greeting3 > ul > li .content{font-size:18rem; line-height:1.8; color:#e3e3e3;}
.area_greeting3 > ul > li[data-background='phil']{background-image:url("/images/content/img_greeting_bg_phil.jpg");}
.area_greeting3 > ul > li[data-background='phil'] .icon{background-image:url("/images/content/icon_phil.png");}
.area_greeting3 > ul > li[data-background='customer']{background-image:url("/images/content/img_greeting_bg_customer.jpg");}
.area_greeting3 > ul > li[data-background='customer'] .icon{background-image:url("/images/content/icon_customer.png");}
.area_greeting3 > ul > li[data-background='respect']{background-image:url("/images/content/img_greeting_bg_respect.jpg");}
.area_greeting3 > ul > li[data-background='respect'] .icon{background-image:url("/images/content/icon_respect.png");}
/* 회사소개 - 연혁 */
.history_wrap{ margin-bottom: -70rem; background: linear-gradient(180deg, #fff 74rem, #f8f8f8 74rem); }
.history_nav{ display: flex;  justify-content: center; gap: 1rem; position: sticky; top: 0; font-size: 20rem; font-weight: 600; color: #888; z-index: 1; }
/* .history_nav__box{ display: flex; justify-content: center; gap: 1rem; padding: 1rem; background: #e6e6e6; } */
.history_nav__a{ display: flex; justify-content: center; align-items: center; position: relative; max-width: 223rem; width: 100%; height: 73rem; background: #fff; }
.history_nav__a::before{ content: ''; position: absolute; inset: -1rem; background: #e6e6e6; z-index: -1; }
.history_nav__a::after{ content: ''; position: absolute; inset: -1rem; background: #2b3d66; opacity: 0; }
.history_nav__a.active::after{ opacity: 1; }
.history_nav__a-text{ position: relative; z-index: 1; }
.history_nav__a.active{ color: #fff; }
.history__list{ position: relative; margin-top: 6rem; padding-bottom: 70rem; }
.history__list::before{ content: ''; position: absolute; inset: 138rem auto 0; border-left: 1px dashed #d1d1d1; }
.history__item{ display: flex; row-gap: 40rem; padding-top: clamp(100rem, 11.5vw, 138rem); }
.history__wrap_figure{ flex: 1 50%; box-sizing: border-box; }
.history__figure{ position: sticky; top: 107rem; }
.history__figcaption{ display: block; margin-bottom: 1.03333333em; flex: 1; font-size: var(--font_size30); font-weight: 700; color: var(--primary); }
.history__img{ aspect-ratio: 530/340; width: 100%; object-fit: cover; }
.history__ul{ flex: 1 50%; }
.history__li{ display: flex; position: relative; box-sizing: border-box; }
.history__li::before{ content: ''; position: absolute; top: 0rem; left: 0; width: 11rem; height: 11rem; background: #bababa; border-radius: 50%; }
.history__li.effect_active::before{ background-color: var(--primary); }
.history__year{ position: relative; top: -0.48888889em; flex-shrink: 0; width: 3.46666667em; font-size: var(--font_size45); font-weight: 700; color: #111; }
.history__year::before{ content: ''; position: absolute; top: 0 auto auto 0; width: 11rem; height: 11rem; background:  }
.history__description{ position: relative; padding-left: 17rem; font-size: 18rem; color: #333; }
.history__description + .history__description{ margin-top: 22rem; }
.history__description::before{ content: ''; position: absolute; inset: 1.1ch auto auto 0; width: 4rem; height: 4rem; background: #969696; }

@media(prefers-reduced-motion:no-preference){
    .history__li::before{ transition: .4s; }
}
@media(min-width:768px){
    .history__li + .history__li{ margin-top: 96rem; }
}
@media(min-width:1280px){
    /* .history__figure{ margin-top: 107rem; } */
    .history__list::before{ left: 50%; }
    .history__li::before{ transform: translateX(-50%); }
    .history__description_list{ position: relative; top: -2rem; }
    .history__item:nth-child(odd) .history__wrap_figure{ padding-right: 70rem; }
    .history__item:nth-child(odd) .history__li{ padding-left: 70rem; }
    .history__item:nth-child(even){ flex-direction: row-reverse; }
    .history__item:nth-child(even) .history__wrap_figure{ padding-left: 70rem; }
    .history__item:nth-child(even) .history__li{ flex-direction: row-reverse; padding-right: 70rem; text-align: right; }
    .history__item:nth-child(even) .history__li::before{ left: auto; right: 0; transform: translateX(50%); }
    .history__item:nth-child(even) .history__description{ padding: 0 17rem 0 0; }
    .history__item:nth-child(even) .history__description::before{ left: auto; right: 0; }
}
@media(max-width:1279px){
    .history__list::before{ display: none; }
    .history__item{ flex-direction: column; }
}
@media(max-width:1279px) and (min-width:768px){
    .history__li{ padding-left: 70rem; }
}
@media(max-width:1280px){
    .area_greeting3{width:100%; padding:0 20rem 50rem 20rem;}
    .area_greeting3::after{height:105rem}
    .area_greeting3 > ul{flex-direction: column;}
    .area_greeting3 > ul > li{width:100%; margin:0; margin-bottom:10rem;}
    .area_greeting3 > ul > li[data-background='phil']{background-image:url("/images/content/img_m_greeting_bg_phil.jpg");}
    .area_greeting3 > ul > li[data-background='customer']{background-image:url("/images/content/img_m_greeting_bg_customer.jpg");}
    .area_greeting3 > ul > li[data-background='respect']{background-image:url("/images/content/img_m_greeting_bg_respect.jpg");}
}
@media(max-width:767px){
    .area_greeting3 > ul > li{height:320rem; padding-top:60rem;}
    .area_greeting3 > ul > li .icon{width:40rem; height:40rem;}
    .area_greeting3 > ul > li .en{padding-top:12rem; font-size:16rem;}
    .area_greeting3 > ul > li .tit{padding-bottom:16rem; font-size:30rem;}
    .area_greeting3 > ul > li .content{font-size:16rem; line-height:1.45;}
    .history__li{ flex-direction: column; padding-left: 40rem; }
    .history__li + .history__li{ margin-top: 60rem; }


}

/* 회사소개 > 오시는 길 */
.addr_con{position:relative; width:1200px; margin:0 auto; padding-bottom:60px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.addr_con address{padding-bottom:22px; text-align:center; font-size:20px; font-weight:600; letter-spacing:-1px; color:#333333;}
.addr_con address span{color:#194cbe;}
.addr_con .info{display:flex; justify-content:center;}
.addr_con .info > p{color:#333333; font-weight:600; font-size:18px; letter-spacing:-1px;}
.addr_con .info > p::after{display:inline-block; content:""; width:1px; height:17px; margin:0 29px; vertical-align:middle; background-color:#e6e6e6;}
.addr_con .info > p:last-child:after{display:none;}
.addr_con .info > p .label::after{display:inline-block; content:"."; padding-right:2px;}
.link_naver_map{position:absolute; right:0; width:140px; height:140px; line-height:230px; text-align:center; border-radius:20px; background:#00bf46 url(../images/content/logo_navermap.jpg) no-repeat center 22%; color:#fff; font-size:16px; font-weight:600;}
.link_naver_map:hover{background-color:#02e655; background-image:url(../images/content/logo_navermap_active.jpg);  transition:all .4s;}
@media screen and (max-width:1200px){
	.addr_con{width:100%;}
}
@media screen and (max-width:1150px){
	.box_txt{padding:40px 0 0;}
	.box_txt p br{display:none;}
}
@media screen and (max-width:680px){
    .certification_area ul li{width:49%;}
    .certification_area ul li:nth-child(2){margin-right:0;}

    .addr_con{padding:0 20px; transition:all .2s;}
    .addr_con address{padding-bottom:16px; font-size:16px; transition:all .2s;}
    .addr_con .info{padding-bottom:25px; transition:all .2s;}
    .addr_con .info > p{font-size:14px; transition:all .2s;}
    .addr_con .info > p::after{height:12px; margin:0 16px 0 10px; transition:all .2s;}
    .link_naver_map{width:100px; height:100px; right:10px; bottom:-60px; border-radius:12px; line-height:160px; background-size:60%; font-size:13px; transition:all .2s;}
}
@media screen and (max-width:600px){
    .addr_con .info{display:block; transition:all .2s;}
    .addr_con .info > p{text-align:center;}
    .addr_con .info > p::after{display:none;}
    .addr_con .info .label{display:inline-block; width:30px; transition:all .2s;}
    .link_naver_map{width:90px; height:90px; line-height:144px; background-size:52px;}
}
@media screen and (max-width:480px){
    .line_list li{width:49%;}
    .line_list li:nth-child(2n){margin-right:0;}
    .line_list li:last-child{margin-right:0 !important;}
    .line_list li:nth-child(3n){margin-right:2%;}
}
@media screen and (max-width:420px){
	#content{padding-bottom:40px;}
}

/* 커뮤니티 - 이용가이드 */
.guide_banner{ padding: clamp(0rem, 10.5vw, 126rem) 0 clamp(0rem, 11.75vw, 141rem); background: #18377a; color: #fff; }
.guide_banner__h3{ font-size: var(--font_size48); font-weight: 700; }
.guide_banner__p{ margin-top: 0.26666667em; font-size: var(--font_size30); font-weight: 300; }
.guide_tablist{ display: flex; gap: 10rem; margin-top: 48rem; }
.guide_tablist__tab{ display: flex; justify-content: center; align-items: center; max-width: 147rem; width: 100%; height: 58rem; border: 1rem solid #fff; border-radius: 5rem; font-size: 17rem; font-weight: 300; color: #fff; cursor: pointer; }
.guide_tablist__tab[aria-selected="true"]{ background: #fff; font-weight: 700; color: #18377a; }
.guide_tablist__tab[aria-selected="true"]::before{ content: ''; display: inline-block; margin-right: 4rem; width: 0.94117647em; height: 0.70588235em; background: url('/images/content/icon_guide_checked.png') no-repeat 50% / contain; }
.area_guide [role="tabpanel"]{ margin-top: 100rem; }
.area_guide [role="tabpanel"]:not([aria-hidden="false"]){ display: none; }
.guide_list{ border-block: 2rem solid #000; }
.guide_list__li{ display: flex; row-gap: 20rem; padding: clamp(3em, 4.66666667vw, 56rem) clamp(1em, 5vw, 60rem) clamp(3.5em, 5.5vw, 66rem); }
.guide_list__li + .guide_list__li{ border-top: 1rem solid #ddd; }
.guide_list__li:nth-child(even){ background: #f7f7f7; }
.guide_list__icon{ display: flex; align-items: center; }
.guide_list__img{ width: 60rem; height: 71rem; object-fit: scale-down; }
.guide_list__title{ font-size: var(--font_size24); font-weight: 500; }
.guide_list__title-number{ margin-right: 1ch; }
.guide_list__description{ margin-top: 6rem; font-size: 18rem; font-weight: 300; line-height: 1.55555556; color: #525252; }
.guide_ol__p{ padding-left: 2ch; }
.area_equipment__h4{ font-size: var(--font_size24); font-weight: 500; }
.area_equipment__caution{ margin-top: 16rem; font-size: 18rem; font-weight: 300; line-height: 1.55555556; color: #525252; }
.area_equipment__caution li{ position: relative; padding-left: 1.5ch; }
.area_equipment__caution li::before{ content: '·'; position: absolute; left: 0; }
.equipment_list{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 88rem; margin-top: 44rem; text-align: center; font-size: var(--font_size24); font-weight: 500; }
.equipment_list li{ position: relative; padding: 2.125em .5em 3.04166667em; border: 1rem solid #ddd; box-sizing: border-box; }
.equipment_list li + li::before{ content: ''; position: absolute; }
.equipment_list li + li::after{ content: ''; position: absolute; background: #6dbeff; }
.equipment_list__number{ color: #6dbeff; }
.equipment_list__icon{ margin: 27rem 0 33rem; width: 100rem; height: 74rem; object-fit: scale-down; }
.equipment_list__description{ margin-top: 17rem; font-size: 18rem; font-weight: 300; color: #525252; }
@media(min-width:768px){
    .guide_list__icon{ flex: 0 0 118rem; }
    .equipment_list li + li::before{ inset: 47.7% 100% auto -88rem; border-bottom: 1rem dashed #6dbeff; }
    .equipment_list li + li::after{ inset: 47.7% auto auto -44rem; transform: translate(-50%, -50%); width: 17rem; height: 17rem; clip-path: polygon(100% 50%, 0 0, 0 100%); }
}
@media(min-width:1280px){
    .equipment_list.buy li:nth-child(4){ grid-column: 1 / 4; }
    .equipment_list.buy :where(li:nth-child(4), li:nth-child(5), li:nth-child(8))::before,
    .equipment_list.buy :where(li:nth-child(4), li:nth-child(5), li:nth-child(8))::after,
    .equipment_list.sell li:nth-child(3n+1)::before,
    .equipment_list.sell li:nth-child(3n+1)::after{ display: none; }
}
@media(max-width:1279px) and (min-width:768px){
    .equipment_list{ grid-template-columns: repeat(2, 1fr); }
    .equipment_list li:nth-child(2n+1)::before,
    .equipment_list li:nth-child(2n+1)::after{ display: none; }
}
@media(max-width:767px){
    .guide_list__li{ flex-direction: column; }
    .equipment_list{ grid-template-columns: 1fr; }
    .equipment_list li + li::before{ inset: -88rem auto 100% auto; border-left: 1rem dashed #6dbeff; }
    .equipment_list li + li::after{ inset: -44rem auto auto 50%; transform: translate(-50%, -50%); width: 17rem; height: 17rem; clip-path: polygon(50% 100%, 100% 0, 0 0); }
}

/* 왜 다있다 */
.area_why .page_title__small{ display: block; margin-bottom: 8rem; text-transform: uppercase; font-size: 20rem; letter-spacing: .055em; color: #cde7ff; }
.area_why__description{ text-align: center; font-size: var(--font_size24); font-weight: 200; line-height: 1.66666667; }
.area_why__description b{ font-weight: 600; }
.area_why__banner-bar{ position: relative; }
.area_why__banner-bar::before,
.area_why__banner-bar::after{ content: ''; position: absolute; width: 1rem; height: 1.77083333em; font-size: var(--font_size48); }
.area_why__banner-bar::before{ inset: auto 50% 0; background: #fff; }
.area_why__banner-bar::after{ inset: 100% 50% auto; background: #000; }
.area_why__banner-bar .inr{ display: flex; align-items: center; justify-content: center; }
.area_why1__banner{ margin-top: 27rem; height: 12.5em; background: #000 url("/images/content/img_why_bg1.jpg") no-repeat 50% / cover; text-align: center; font-size: var(--font_size48); font-weight: 700; line-height: 1.375; color: #fff; }
.area_why1__h3{ font-size: inherit; }
.area_why1 .area_why__description{ margin-top: 5.58333333em; }
.area_why1 .area_why__description p:nth-of-type(2){ font-weight: 600; text-decoration: underline; text-underline-position: under; }
.area_why1 .area_why__description p:last-of-type{ font-size: var(--font_size28); font-weight: 600; line-height: 1.78571429; }
.area_why1 .area_why__description strong{ color: #46aafb; }
.area_why2{ margin-top: 74rem; }
.area_why2__ul{ display: grid; gap: clamp(0rem, 2.25vw, 27rem); }
.area_why2__li{ padding: 30rem clamp(1em, 2.5vw, 30rem) 48rem clamp(1em, 3.41666667vw, 41rem); border-radius: 25rem; box-sizing: border-box; font-size: var(--font_size36); }
.area_why2__li:nth-child(odd){ background: #f0f8ff; }
.area_why2__li:nth-child(even){ background: #f7f7f7; }
.area_why2__icon{ display: flex; justify-content: center; align-items: center; margin-left: auto; width: 2.77777778em; height: 2.77777778em; background: #fff; border-radius: 25rem; }
.area_why2__img{ width: 1.61111111em; height: 1.38888889em; object-fit: scale-down; }
.area_why2__h3{ margin: -0.61111111em 0 -0.19444444em; font-size: inherit; font-weight: 600; }
.area_why2__small{ display: block; text-transform: capitalize; font-size: 20rem; color: #6cbdff; }
.area_why2__p{ margin-top: 17rem; font-size: 16rem; font-weight: 200; line-height: 1.625; letter-spacing: -.0201em; }
.area_why2 .area_why__description{ margin-top: 3em; }
.area_why3{ margin-top: 60rem; }
.area_why3__banner{ margin-top: -4rem; height: 12.14285714em; background: #000 url("/images/content/img_why_bg2.jpg") no-repeat 50% / cover; text-align: center; font-size: var(--font_size28); font-weight: 700; line-height: 1.375; color: #fff; }
.area_why3 .area_why__description{ margin-top: 5.70833333em; }
@media(min-width:768px){
    .area_why2__ul{ grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:767px){
    .area_why2__ul{ grid-template-columns: repeat(2, 1fr); }
}