@font-face {
  font-family: 'Handletter';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Handletter.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Header */
.header{position: fixed; z-index: 500; width: 100%; height: 100px; border-bottom: 1px solid #f1f1f1; background: #fff; text-align: center; transition: 0.3s;}
.hd_logo{position: absolute; top: 50%; left: 90px; z-index: 10; transform: translateY(-50%);}
.hd_logo img {width: 148px;}
.hd_logo .logo_white {display: none;}
.hd_logo .logo_color {display: inline-block;}

.gnb{display: inline-block;}
.gnb_ul{margin: 0 -35px;}
.gnb_ul > li{padding: 0 35px; position: relative;}
.gnb_ul > li > a{display: block; height: 100%; line-height: 100px; font-size: 18px; font-weight: 400; color: #0f0f0f; transition: 0.3s;}
.gnb_ul > li:hover > a {color: #0082de !important;}

.esp .gnb_ul > li {padding: 0 20px;}
.esp .gnb_ul > li a {font-size: 16px;}
.esp .gnb_ul > li a span.mo {display: none;}

.tnb{position: absolute; top: 0; right: 100px; z-index: 10;}
.tnb_ul > li > a{display: block; height: 100%; line-height: 100px; font-size: 18px; font-weight: 400; color: #0f0f0f; text-align: left; transition: 0.3s;}
.tnb_ul{margin: 0 -17px;}
.tnb_ul > li{margin: 0 17px;}
.tnb_ul > li > a img{margin: -4px 8px 0 0; width: 20px;}
.tnb_ul .hd_full_btn {width: 21px; height: 16px; position: relative; cursor: pointer;}
.tnb_ul .hd_full_btn span {width: 21px; height: 2px; display: inline-block; background-color: #0f0f0f; position: absolute; top: 50%; left: 0; transition: 0.3s;}
.tnb_ul .hd_full_btn span::before, .tnb_ul .hd_full_btn span::after {content: ''; position: absolute; width: 100%; height: 2px; background-color: #0f0f0f; left: 0; transition: 0.3s;}
.tnb_ul .hd_full_btn span::before {top: -5px;}
.tnb_ul .hd_full_btn span::after {top: 5px;}
.tnb_ul .hd_lang_btn {position: relative; background: url(/source/img/icon-select.svg) no-repeat center right / 13px; width: 90px;}
.tnb_ul .hd_lang_2dep {display: none; position: absolute; width: 100%; top: 100%; left: 0; background-color: #f1f1f1; padding: 10px 0;}
.tnb_ul .hd_lang_2dep a {display: block; padding: 5px 0; font-weight: 400; font-size: 18px; transition: .2s; color: #888;}
.tnb_ul .hd_lang_2dep a:hover {color: #0082de;}

.snb_ul {position: absolute; width: auto; height: auto; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); border-radius: 0 10px 10px 10px; background-color: #fff; padding: 20px; text-align: left; display: none; padding-right: 33px; width: 190px; border: 1px solid #f1f1f1;}
.header.esp .snb_ul {width: 200px;}
.snb_ul a {color: #666; padding: 7px 0; display: block; width: 100%; transition: color .2s; position: relative; margin: 0 13px; text-indent: -15px; }
.snb_ul a:hover {color: #0082de; font-weight: 400; }
.snb_ul a::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: #0082de; margin-right: 10px; display: inline-block; margin-bottom: 3px; opacity: 0; transition: .2s;}
.snb_ul a:hover::before {opacity: 1;}

.sitemap_bg {visibility: hidden; opacity: 0; position: fixed; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.7); top: 0; left: 0; z-index: 100; transition: .3s;}
.sitemap_wr {position: absolute; width: 100%; height: auto; top: 100px; background-color: #fff; padding: 50px 0 60px; display: none; box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.04); background: #fff url('/source/img/img-sitemap_bg.png') no-repeat left top 40px;}
.sitemap_inner {display: flex; margin-left: 12.5%; margin-right: 8%;}
.sitemap_inner > li {flex: 1; text-align: left;} 
.sitemap_inner > li:not(:first-child) {padding-left: 30px;}
.sitemap_inner > li:not(:last-child) {border-right: 1px solid #f1f1f1;}
.sitemap_inner > li > a {font-size: 18px; font-weight: 400; color: #0f0f0f; display: block; margin-bottom: 15px; transition: .2s;}
.sitemap_inner > li:hover > a {color: #0082de;}
.sitemap_ul {margin-left: -13px;}
.sitemap_ul > li > a {color: #666; padding: 6px 0; display: block; width: 100%; position: relative; margin-left: 13px; text-indent: -15px; padding-right: 25px;}
.sitemap_ul > li > a:hover {color: #0082de; font-weight: 400; }
.sitemap_ul > li > a::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: #0082de; margin-right: 10px; display: inline-block; margin-bottom: 3px; opacity: 0; transition: .2s;}
.sitemap_ul > li > a:hover::before {opacity: 1;}
.tnb_ul .hd_full_btn.on span {transform: rotate(45deg);}
.tnb_ul .hd_full_btn.on span::after {transform: rotate(90deg);top: 0;}
.tnb_ul .hd_full_btn.on span::before {opacity: 0;}

  /* > White header */
.header.white  {background: none; border-bottom: 0;}
.header.white .hd_logo .logo_color {display: none;}
.header.white .hd_logo .logo_white {display: inline-block;}
.header.white .tnb_ul .hd_full_btn span, .header.white .tnb_ul .hd_full_btn span::before, .header.white .tnb_ul .hd_full_btn span::after {background-color: #fff;}
.header.white .gnb_ul > li > a, .header.white .tnb_ul > li > a {color: #fff;}
.header.white .tnb_ul .hd_lang_btn {background: url(/source/img/icon-select_w.svg) no-repeat center right / 13px;}

.header.sitemap, .header:hover {background: #fff !important;}
.header.sitemap .hd_logo .logo_color, .header:hover .hd_logo .logo_color {display: inline-block !important;}
.header.sitemap .hd_logo .logo_white, .header:hover .hd_logo .logo_white {display: none !important;}
.header.sitemap .tnb_ul .hd_full_btn span, .header.sitemap .tnb_ul .hd_full_btn span::before, .header.sitemap .tnb_ul .hd_full_btn span::after, .header:hover .tnb_ul .hd_full_btn span, .header:hover .tnb_ul .hd_full_btn span::before, .header:hover .tnb_ul .hd_full_btn span::after {background-color: #0f0f0f;}
.header.sitemap .gnb_ul > li > a, .header.sitemap .tnb_ul > li > a, .header:hover .gnb_ul > li > a, .header:hover .tnb_ul > li > a {color: #0f0f0f;}
.header.sitemap .tnb_ul .hd_lang_btn, .header:hover .tnb_ul .hd_lang_btn {background: url(/source/img/icon-select.svg) no-repeat center right / 13px;}



/* Footer */
.footer{transition: .3s;}
.ft_top {background-color: #fff; padding: 30px 0; border-top: 1px solid #e8e8e8;}
.ft_top a {font-weight: 400; color: #444;}
.ft_top a:not(:last-child) {margin-right: 30px;}
.ft_btm {background-color: #f8f8f8; padding: 30px 0;}
.ft_btm > .wrapper {display: flex; justify-content: space-between; align-items: center;}
.ft_txt01 {font-size: 18px; font-weight: 400; color: #888; padding-bottom: 15px;}
.ft_txt02 {color: #888; display: inline-block; line-height: 1.625;}
.ft_txt02:not(:last-child) {margin-right: 50px;}
.ft_txt02 span {margin-right: 12px; color: #b0b0b0;}
.ft_txt03 {padding-top: 30px; color: #b0b0b0;}
.ft_img_wr{width: 215px;}
.btn_top {background-color: #0082de; width: 57px; height: 57px; border-radius: 50%; position: fixed; right: 75px; bottom: 45px; display: flex; flex-direction: column; justify-content: center; border: 0; align-items: center; transition: .3s;}
.btn_top img {margin-bottom: 6px; width: 13px;}
.btn_top p {color: #fff; line-height: 1;}
.footer.on {position: relative;}
.footer.on .btn_top {position: absolute; top: -30px; right: 75px;}


/* Main */
.mainsec {}
.main_nav {position: fixed; right: 90px; top: calc(50px + 50%); transform: translateY(-50%);}
.main_nav li {width: 31px; height: 33px; border: 1px solid transparent; display: flex; justify-content: center; align-items: center; margin: 2px 0; transition: .2s;}
.main_nav a {display: block; width: 5px; height: 5px; background-color: #ccc; transition: .3s;}
.main_nav li.active {border-color: #0082de;}
.main_nav li.active a {background-color: #0082de;}
.main_nav li.active.white {border-color: #fff;}
.main_nav li.active.white a {background-color: #fff;}

  /* > mainsec01 */
.mainsec01 {}
.main_slide_wr, .main_slide {width: 100vw; height:calc(var(--vh, 1vh) * 100); position: relative;}
.main_slide_wr .slick-arrow,.slick-dots {display: none !important;}
.main_slide01 {background: url(/source/img/img-mainvs01.jpg) no-repeat center / cover;}
.main_slide02 {background: url(/source/img/img-mainvs02.jpg) no-repeat center / cover;}
.main_slide03 {background: url(/source/img/img-mainvs03.jpg) no-repeat center / cover;}
.main_slide .main_s_txt_wr {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 90%;}
.main_slide .main_s_txt_wr h2 {font-size: 66px; font-weight: 300;}
.main_slide .main_s_txt_wr p {font-size: 20px; font-weight: 400; padding-top: 1.875rem;}
.main_slide_ctr {position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%);}
.main_slide_ctr > * {display: inline-block; vertical-align: middle;}
.main_slide_ctr .current_num {color: #fff;}
.main_slide_ctr .total_num {color: rgba(255, 255, 255, .3);}
.main_slide_ctr .timer {width: 140px; height: 2px; background-color: rgba(255, 255, 255, .3); position: relative; vertical-align: middle; margin: 0 10px 2px;}
.main_slide_ctr .time_bar {width: 0; height: 100%; background-color: #fff; position: absolute;}
.main_slide_ctr .main_slide_btn {margin: 0 0 3px 23px;}
.main_slide_ctr .main_slide_btn button {width: 20px; height: 16px; border: 0; background: none; outline: none;} 
.main_slide_ctr .main_slide_btn button img {width: 8px; vertical-align: top;}
.main_slide_ctr .main_slide_btn btn_prev {margin-right: 8px;}
.mainsec01_scroll_wr {position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);}
.mainsec01_scroll {position: relative; color: #fff; animation: scrollMove 3s linear infinite;}
.mainsec01_scroll::after {position: absolute; background-color: #fff; content: ''; width: 1px; height: 75px; top: calc(100% + 13px); left: 50%; transform: translateX(-50%);}
@keyframes scrollMove {
  0% { transform: translateY(0); }
  50% { transform: translateY(15px); }
  100% { transform: translateY(0); }
}

.mainsec02 {overflow: hidden; position: relative;} 
.mainsec02 > .wrapper {position: relative;}
.main_title {position: relative; z-index: 15;}
.main_title .main_entit {font-size: 28px; font-weight: 500; color: #0082de; padding-bottom: 18px; margin-left: 5px;}
.main_title .main_kotit {font-size: 48px; font-weight: 300; color: #0f0f0f; letter-spacing: -3px; line-height: 1.3;}
.main_title .main_kotit.esp {font-size: 42px;}
.mainsec02_box_wr {display: flex; margin: 60px -30px 0; position: relative; z-index: 10;}
.mainsec02_box {margin: 0 30px; flex: 1; height: 340px; max-height: 50vh; position: relative; transition: .3s;}
.mainsec02_box:hover {box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15);}
.mainsec02_line_wr {position: absolute; display: flex; /* margin: 0 -30px 0; */ width: 1500px; max-width: 100%; height: 100vh; top: 0; left: 50%; transform: translateX(-50%);}
.mainsec02_line {margin: 0 30px; flex: 1; height: 100%; border-left: 1px solid #f4f4f4; border-right: 1px solid #f4f4f4;}
/* .mainsec02_box::after, .mainsec02_box::before {content: ''; position: absolute; width: 1px; height: 120vh; top: 50%; transform: translateY(-50%); background-color: #f4f4f4; z-index: -1;}
.mainsec02_box::after {left: 0;}
.mainsec02_box::before {right: 0;} */
.mainsec02_box {filter: grayscale(80%); transition: .3s;}
.mainsec02_box a {display: block; width: 100%; height: 100%; padding: 45px 35px; display: flex; flex-direction: column; justify-content: space-between;}
.mainsec02_box01 {background: url('/source/img/img-mainsec02_01.jpg') no-repeat center / cover;}
.mainsec02_box02 {background: url('/source/img/img-mainsec02_02.jpg') no-repeat center / cover; transform: translateY(70px);}
.mainsec02_box03 {background: url('/source/img/img-mainsec02_03.jpg') no-repeat center / cover; transform: translateY(-130px);}
.mainsec02_box04 {background: url('/source/img/img-mainsec02_04.jpg') no-repeat center / cover; transform: translateY(-60px);}
.mainsec02_box_txt {font-size: 24px; font-weight: 400; color: #fff;}
.mainsec02_box_viewmore {opacity: 0; font-size: 20px; font-weight: 400; color: #fff; transition: .3s; text-align: right;}
.mainsec02_box:hover {filter: grayscale(0);}
.mainsec02_box:hover .mainsec02_box_viewmore {opacity: 1;}
.mainsec02_ani_track {position: absolute; width: 100%; max-width:100%; height: auto; overflow-x: hidden; overflow-y: hidden; left: 0; bottom: -25px;}
.mainsec02_ani_txt { white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite; font-size: 130px; font-weight: 700; color: #f9f9f9; line-height: 1;}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.mainsec03 {padding-top: 50px;}
.mainsec03 .wrapper {position: relative;}
/* .mainsec03_slide > a {display: block; width: 100%; height: 100%; font-size: 0;} */
.main_prod_cont {display: none;}
.main_prod_cont.active {display: flex; align-items: center; position: relative;}
.mainsec03_top {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 30px;}
.mainsec03_tab {display: flex; margin: 0 -5px 10px;}
.mainsec03_tab li {width: 187px; height: 50px; border-radius: 25px; border: 1px solid #e8e8e8; background: #fff; color: #999; font-size: 18px; text-align: center; line-height: 50px; cursor: pointer; transition: .3s; margin: 0 5px;}
.mainsec03_tab.esp li {width: 200px; font-size: 16px;}
.mainsec03_tab li.active {font-weight: 400; color: #0082de; border: 2px solid #0082de;}
.mainsec03_tab li:not(.active):hover {background-color: #f9f9f9;}
.mainsec03_slide {font-size: 0;}
.mainsec03_slide > * {display: inline-block;}
.mainsec03_slide .mainsec03_sl_txt_wr {display: none;}
.mainsec03_slide.swiper-slide-active .mainsec03_sl_txt_wr {display: inline-block;}
.mainsec03_slide.swiper-slide {width: 22%;}
.mainsec03_slide.swiper-slide.swiper-slide-active {width: 78%;}
.mainsec03_slide > a {display: inline-block; width: 450px; margin-right:90px;}
.mainsec03_slide_btn_prev, .mainsec03_slide_btn_next {width: 74px; height: 74px; border-radius: 50%; border: 1px solid #ccc; position: absolute; top: 50%; transform: translateY(-50%); transition: .3s;}
.mainsec03_slide_btn_prev {background: #fff url('/source/img/icon-s_btn_prev_b.svg') no-repeat center / 8px; left: -110px;}
.mainsec03_slide_btn_prev:hover {background: #0082de url('/source/img/icon-s_btn_prev_w.svg') no-repeat center / 8px; border-color: #0082de;}
.mainsec03_slide_btn_next {background: #fff url('/source/img/icon-s_btn_next_b.svg') no-repeat center / 8px; right: -110px;}
.mainsec03_slide_btn_next:hover {background: #0082de url('/source/img/icon-s_btn_next_w.svg') no-repeat center / 8px; border-color: #0082de;}

/* mainsec03 슬라이드 */
.main_prod_cont:after{content: ""; display: table; clear: both;}
.main_prod_txt_wr{float: left; width: 40%; display: flex; flex-direction: column; position: relative; z-index: 5;}
.main_prod_tit{font-size: 40px; font-weight: 500; color: #0f0f0f; line-height: 1.25;}
.main_prod_txt{font-size: 18px; color: #999; padding: 30px 0 50px;}
.main_prod_viewmore{font-size: 20px; font-weight: 400; color: #0082de;}
.btn_viewmore img{position: relative; margin-left: 12px; transition: .3s;}
.main_prod_viewmore img{display: inline;}

.main_prod_sl{overflow: hidden; float: left; width: 60%; padding: 50px 0 50px 40px; transform: translateX(20px);}
.main_prod_sl .main_prod_img_wr{align-items: center;}
.main_prod_sl .main_prod_img_in {text-align: right;}
.main_prod_sl .main_prod_img{opacity: 0.15; transform: scale(0.6); transition: 0.3s; position: relative;}
.main_prod_sl .main_prod_img img{max-width: 100%;}
.main_prod_sl .hidden_data{display: none !important;}

.main_prod_img.swiper-slide-active {opacity: 1; transform: scale(1); position: relative; margin-right: 50px;}
.main_prod_img.swiper-slide-active .main_prod_img_in {position: relative; max-width: 500px; height: 400px;}
.main_prod_img.swiper-slide-active::before {content: ''; position: absolute; width: 500px; height: 250px; border-radius: 150px; top: 50%; left: 50%; transform: rotate(-20deg) translate(-37%, -78%); background-color: #f4f4f4;}
.main_prod_img.swiper-slide-active img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-right: 0;}

.mainsec04 {background: url('/source/img/img-mainsec04_bg.jpg') no-repeat center / cover; padding-top: 50px;}
.mainsec04_txt{font-size: 20px; color: #fff; padding-top: 45px;}
.mainsec04_viewmore {font-size: 20px; font-weight: 400; color: #fff; padding-top: 16%; display: inline-block;}
.btn_viewmore img {position: relative; margin-left: 12px; transition: .3s;}
.btn_viewmore:hover img {transform: translateX(8px);}
.mainsec04_left {width: 48%; margin-right: 4%;}
.main.esp .mainsec04_left {padding-right: 5%;}
.mainsec04_right {width: 48%; display: flex; justify-content: center; align-items: center;}
.mainsec04 .main_title .main_kotit, .mainsec04 .main_title .main_entit{color: #fff;}
.mainsec04 .wrapper {display: flex;}
.mainsec04_box {width: 260px; height: 260px; border-radius: 50%; padding: 10px; border: 1px dashed #fff; position: relative;}
.mainsec04_box_inner {background: rgba(0,0,0,0.4); width: 100%; height: 100%; border-radius: 50%; text-align: center; display: flex; flex-direction: column; justify-content: center; position: relative;}
.mainsec04_box_wr {position: relative; width: 415px; height: 350px; margin: auto; background: url('/source/img/logo_opacity50.png') no-repeat center / 223px;}
.mainsec04_box::after, .mainsec04_box::before {content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; position: absolute;}
.mainsec04_box:nth-child(1) .mainsec04_box_inner::after, .mainsec04_box:nth-child(4) .mainsec04_box_inner::after {content: ''; width: 156px; height: 1px; border-top: 1px dashed #fff; position: absolute;}
.mainsec04_box:nth-child(1) .mainsec04_box_inner::before, .mainsec04_box:nth-child(4) .mainsec04_box_inner::before {content: ''; width: 1px; height: 92px; border-right: 1px dashed #fff; position: absolute;}
.mainsec04_box .txt_wr {font-size: 18px; font-weight: 400; color: #fff; padding-top: 38px;}
.mainsec04_box:nth-child(1) {position: absolute; top: 0; left: 0; transform: translate(-50%, -50%);}
.mainsec04_box:nth-child(1)::after {top: 50%; left: 100%; transform: translate(-3px, -50%);}
.mainsec04_box:nth-child(1)::before {top: 100%; left: 50%; transform: translate(-50%, -3px);}
.mainsec04_box:nth-child(1) .mainsec04_box_inner::after {top: 50%; left: calc(100% + 10px);}
.mainsec04_box:nth-child(1) .mainsec04_box_inner::before {top: calc(100% + 10px); left: calc(50% - 1px);}
.mainsec04_box:nth-child(2) {position: absolute; top: 0; right: 0; transform: translate(50%, -50%);}
.mainsec04_box:nth-child(2)::after {top: 50%; left: 0; transform: translate(-5px, -50%);}
.mainsec04_box:nth-child(2)::before {top: 100%; left: 50%; transform: translate(-50%, -3px);}
.mainsec04_box:nth-child(3) {position: absolute; bottom: 0; left: 0; transform: translate(-50%, 50%);}
.mainsec04_box:nth-child(3)::after {top: 50%; left: 100%; transform: translate(-3px, -50%);}
.mainsec04_box:nth-child(3)::before {top: 0; left: 50%; transform: translate(-50%, -5px);}
.mainsec04_box:nth-child(4) {position: absolute; bottom: 0; right: 0; transform: translate(50%, 50%);}
.mainsec04_box:nth-child(4)::after {top: 50%; left: 0; transform: translate(-5px, -50%);}
.mainsec04_box:nth-child(4)::before {top: 0; left: 50%; transform: translate(-50%, -5px);}
.mainsec04_box:nth-child(4) .mainsec04_box_inner::after {top: 50%; right: calc(100% + 10px);}
.mainsec04_box:nth-child(4) .mainsec04_box_inner::before {bottom: calc(100% + 10px); left: calc(50% - 1px);}

.mainsec05 {background: url('/source/img/img-mainsec05_bg.jpg') no-repeat center / cover; padding-top: 50px;}
.mainsec05_viewmore_wr {text-align: right;}
.mainsec05_viewmore {font-size: 20px; font-weight: 400; color: #333; position: relative; top: -55px; z-index: 20;}
.mainsec05_box_wr {display: flex; justify-content: space-between; align-items: center; margin: 0 -15px;}
.mainsec05_box { max-width: 335px; margin: 0 15px; border: 1px solid #e7e7e7; background: #fff; transition: .15s; flex: 1;}
.mainsec05_box:hover {background-color: #0082de; box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15);}
.mainsec05_box:hover p {color: #fff;}
.mainsec05_box > a {display: block; padding: 40px 35px;}
.mainsec05_box_cate {font-size: 22px; font-weight: 500; color: #cccccc; text-transform: capitalize;}
.mainsec05_box_tit {font-size: 20px; font-weight: 400; color: #0f0f0f; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.6; margin: 15px 0 12px; height: 64px;}
.mainsec05_box_cnt {color: #666; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.625; height: 50px;}
.mainsec05_box_date {color: #999; margin-top: 50px;}

.esp .mainsec04_box_wr {background: url('/source/img/logo_opacity50_eng.png') no-repeat center / 223px;}

/* sub common */
.sub {padding: 100px 0 120px; overflow: hidden;}
.sub_title {font-size: 40px; color: #0f0f0f; letter-spacing: -2px; line-height: 1.325; position: relative; padding-bottom: 65px; font-weight: 300; z-index: 10;}
.sub_title::after {content: ''; position: absolute; width: 10px; height: 10px; background-color: #0082de; border-radius: 50%; top: -2px; left: -12px;}
.sub_title.white {color: #fff;}
.sub_title.white::after {background-color: #fff;}
.border {border-top: 1px solid #e8e8e8; margin-top: -20px; padding-top: 30px;}
.border.normal {margin-top: 25px; padding-top: 0;}
.sub_smtit {font-size: 28px; color: #0f0f0f; line-height: 1.4;}
.sub_smtit span {font-weight: 500;}
.sub_smtit.sub_toptit {margin-top: -40px; padding-bottom: 70px;}
.sub_smtit .sub_smtit_txt {font-size: 16px; font-weight: 300; color: #666; display: block; padding-top: 18px;}

.sub_visual_layout {position: relative; max-width: 100%; height: 594px; overflow: hidden;}
.sub1_visual {background: url('/source/img/img-subvis1.jpg') no-repeat center/cover;}
.sub2_visual {background: url('/source/img/img-subvis2.jpg') no-repeat center/cover;}
.sub3_visual {background: url('/source/img/img-subvis3.jpg') no-repeat center/cover;}
.sub4_visual {background: url('/source/img/img-subvis4.jpg') no-repeat center/cover;}
.sub5_visual {background: url('/source/img/img-subvis5.jpg') no-repeat center/cover;}
.sub6_visual {background: url('/source/img/img-subvis6.jpg') no-repeat center/cover;}
.sub7_visual {background: url('/source/img/img-subvis7.jpg') no-repeat center/cover;}
.sub8_visual {background: url('/source/img/img-subvis6.jpg') no-repeat center/cover;}

.sub_vs_txt {text-align: center; position: absolute; display: inline-block; top: calc(50% - 40px); left: 50%; transform: translate(-50%,-50%); font-weight: 500; font-size: 60px; color: #fff;}
.sub_location {position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; border-top: 1px solid #999;}
.sub_tab_slide{padding: 0 50px;}
.sub_tab_slide.sub_location_ul div {padding: 0;}
.sub_tab_slide .slick-list {height: 60px; width: 100%; overflow: visible;  max-width: 1100px; margin: auto;}
.sub_location_ul div {width: 215px;}
.sub_location_ul div a {position: relative; font-size: 18px; color: #e1e1e1; display: block; margin-top: 23px;}
.sub_location_ul div a::before {content: ''; position: absolute; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background-color: #999; top: -30px; left: 50%; transform: translateX(-50%);}
.sub_location_ul div.active a {font-weight: 400; color: #fff;}
.sub_location_ul div.active a::before {background-color: #fff;}
.sub_location_ul div.active a::after {content: ''; background-color: rgba(255, 255, 255, .3); width: 29px; height: 29px; border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); top: -39px;}
.sub_big_tit_box {padding: 110px 0 50px;}
.sub_big_tit {text-align: center; font-weight: 100; font-size: 40px; color: #0f0f0f;}
.sub_big_tit span {font-weight: 700;}
.sub_big_txt {text-align: center; font-weight: 300; font-size: 16px; color: #666666; margin-top: 22px;}
.sub_cont_box {padding: 39px 0 60px; text-align: center;}
.sub_green_tit {text-align: center; font-weight: 600; font-size: 20px; color: #00b551;}
.sub_con_tit {text-align: center; font-weight: 400; font-size: 30px; color: #0f0f0f; margin-top: 14px;}
.sub_con_s_tit {text-align: center; font-weight: 300; font-size: 16px; color: #666; margin-top: 17px;}
.gray_bg {background-color: #f9f9f9;}
.effect_text {display: none;}

/* 회사소개 - 소프트지노믹스 - 회사소개 */
.company_tab {display: flex; justify-content: center; align-items: center; margin-top: 60px;}
.company_tab li {padding: 0 5px; }
.company_tab li a {display: block; width: 165px;  height: 50px; line-height: 50px; border-radius: 25px; background: #f4f4f4; color: #666; text-align: center; transition: .3s;}
.company_tab li.active a, .company_tab li a:hover {color: #fff; background-color: #0082de; font-weight: 400;}

.company_txt_wr {margin-top: -8px;}
.company_img_bg {background: url('/source/img/img-company_dot_bg.png') no-repeat bottom -35px left / contain; padding: 45px 0;}
.company_img_wr {position: relative; background: url('/source/img/img-company_center_bg.jpg') no-repeat center right / cover;  background-attachment: fixed; height: 260px; border-radius: 130px 0 0 130px;  margin-left: 320px;}
.company_img_inner {overflow: hidden; width: 100%; height: 100%; position: relative;}
.company_ani_txt {position: absolute; left: 0; bottom: -25px; white-space: nowrap;will-change: transform;animation: marquee 240s linear infinite; font-size: 130px; font-weight: 700; color: #ffffff; line-height: 1;}
.company_txt {color: #666; line-height: 1.625; padding: 5px 0;}
.company_txt span {color: #0f0f0f; font-weight: 400;}


/* 회사소개 - 소프트지노믹스 - 비전 */
#vision {margin-bottom: -120px;}
.vision_sec01 {padding-bottom: 100px;}
.vision_circle_wr {display: flex; justify-content: center; align-items: flex-start;}
.vision_circle_box {position: relative;}
.vision_circle_box::before {content: ''; position: absolute; top: 163px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #0082de; left: 50%; transform: translateX(-50%);}
.vision_circle_box::after {content: ''; position: absolute; top: 169px; width: 8px; height: 8px; border-radius: 50%; background-color: #0082de; left: 50%; transform: translateX(-50%);}
.vision_circle_box img {height: 75px;}
.vision_circle {width: 345px; height: 345px; border-radius: 50%; position: relative; display: flex; justify-content: space-evenly; flex-direction: column; align-items: center; text-align: center;}
.vision_circle::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 2px dashed #eaeaea; border-radius: 50%; z-index: -1;}
.vision_circle_box:nth-child(odd) .vision_circle::after {content: ''; position: absolute; bottom: -1px; left: -1px; width: 347px; height: 173.5px; border-radius: 0 0 200px 200px; border: 3px solid #0082de; border-top: 0; z-index: 5;}
.vision_circle_box:nth-child(even) .vision_circle::after {content: ''; position: absolute; top: -1px; left: -1px; width: 347px; height: 173.5px; border-radius: 200px 200px 0 0; border: 3px solid #0082de; border-bottom: 0; z-index: 5;}
.vision_circle_box:nth-child(1) .vision_circle {transform: translateX(1px);}
.vision_circle_box:nth-child(3) .vision_circle {transform: translateX(-1px);}
.vision_sec01 .sub_inner {position: relative;}
.vision_sec01 .sub_inner::after {content: ''; position: absolute; top: 172.5px; left: 0; width: 100%; height: 1px; background-color: #0082de;}
.vision_circle_wr::before, .vision_circle_wr::after {content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background-color: #0082de; top: 170px;} 
.vision_circle_wr::before {left: 0;}
.vision_circle_wr::after {right: 0;} 
.vision_circle_txt01 {font-size: 24px; font-weight: 500; color: #0f0f0f;}
.vision_circle_txt02 {color: #666; padding-top: 5px;}
.vision_circle_box_txt {text-align: center; color: #666; padding-top: 28px;}
.vision_sec02 {background: url('/source/img/img-vision_sec02_bg.jpg') no-repeat center / cover; padding: 100px 0;}
.vision_sec02 .sub_title {background: url('/source/img/img-vision_sec02_txt.png') no-repeat top right / contain;}
.vision_sec02_box_wr {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 -30px;}
.vision_sec02_box {margin: 0 30px; flex: 1; color: #fff;}
.vision_sec02_box_tit {font-size: 20px; font-weight: 400; margin-top: -12px;}
.vision_sec02_box_txt {color: #e1e1e1; margin-left: 16px; text-indent: -13px; padding: 2px 0;}
.vision_sec02_box_txt::before {content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #e1e1e1; margin: 0 10px 3px 0;}
.vision_sec02_num {font-size: 80px; font-weight: 700; color: rgba(255, 255, 255, .1); line-height: 0.5;}
.vision_sec02_box_top {padding-bottom: 15px; margin-bottom: 22px; border-bottom: 2px solid #fff;}

/* 회사소개 - 소프트지노믹스 - 조직 */
.organization_step01 {background: url('/source/img/img-organization_bg.png') no-repeat center / contain;}
.esp .organization_step01 {background: url('/source/img/img-organization_bg_eng.png') no-repeat center / contain;}
.organization_step01_item {width: 215px; height: 215px; border-radius: 50%; background-color: #0082de; font-size: 28px; font-weight: 400; color: #fff; text-align: center; line-height: 215px; margin: auto; position: relative;}
.organization_step01_item::before {content: ''; position: absolute; width: 2px; height: 350px; border-left: 1px dashed #d9d9d9; top: 100%; left: 50%; transform: translateX(-50%);}
.organization_step02 {margin: 50px 0 110px;}
.organization_step02_item_wr {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 -10px; position: relative;}
.organization_step02_item_wr li {margin: 0 10px; width: 100%; text-align: center; position: relative;}
.organization_step02_item_wr li:not(:nth-child(4)) {opacity: 0;}
.organization_step02_item_wr li:nth-child(4)::before {content: ''; position: absolute; width: calc(50% + 20px); height: 2px; border-bottom: 1px dashed #d9d9d9; top: 50%; left: 0; transform: translate(-100%, -50%);}
.organization_step02_item_wr li:nth-child(4)::after {content: ''; position: absolute; width: 8px; height: 8px; background-color: #0082de; border-radius: 50%; top: 50%; left: calc(-50% - 20px); transform: translate(-50%, -50%); z-index: 10;}
.organization_step02_item {padding: 26px 10px 24px; font-size: 20px; font-weight: 400; color: #0082de; background-color: #fff; border: 3px solid #0082de; text-align: center;}
.organization_step03_item_wr {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 -10px; position: relative;}
.organization_step03_item_wr::before {content: ''; position: absolute; width: 80%; height: 2px; border-bottom: 1px dashed #d9d9d9; top: -60px; left: 50%; transform: translate(-50%, -50%);}
.organization_step03_item_wr li {margin: 0 10px; width: 100%; text-align: center; position: relative;}
.organization_step03_item_wr li:not(:nth-child(3))::before {content: ''; position: absolute; width: 2px; height: 60px; border-left: 1px dashed #d9d9d9; top: 0; left: 50%; transform: translate(-50%, -100%);}
.organization_step03_item_wr li::after {content: ''; position: absolute; width: 8px; height: 8px; background-color: #0082de; border-radius: 50%; top: -60px; left: 50%; transform: translate(-50%, -50%); z-index: 10;}
.organization_step03_item_top {padding: 26px 10px 24px; font-size: 20px; font-weight: 400; color: #0f0f0f; background-color: #fff; border: 1px solid #d9d9d9;}
.organization_step03_item {padding: 17px 10px; color: #666; background-color: #f5f5f5; margin-top: 10px;}

/* 회사소개 - 소프트지노믹스 - CI */
#ci {margin-bottom: -120px;}
.ci_info_wr {display: flex; justify-content: space-between; align-items: center; padding: 40px 80px 75px 20px;}
.ci_txt01 {font-size: 28px; color: #0f0f0f; line-height: 1.4;}
.ci_txt01 span {font-weight: 500;} 
.ci_txt02 {color: #666; padding-top: 25px;}
.ci_sec02 {background: url('/source/img/img-ci_bg.jpg') no-repeat center; background-attachment: fixed; padding: 110px 0;}
.ci_color_box_wr {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 -60px 0 -30px;}
.ci_color_box {display: flex; width: 25%; margin-right: 60px; position: relative;}
.ci_color_box:not(:first-child)::after {content: ''; width: 1px; height: 76px; background-color: rgba(255, 255, 255, .25); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.ci_color {width: 56px; height: 56px; border: 4px solid #fff; border-radius: 50%; margin: 0 20px 0 30px;}
.ci_color01 {background-color: #277dba;}
.ci_color02 {background-color: #4d4d4f;}
.ci_color03 {background-color: #a0c441;}
.ci_color04 {background-color: #1eadbd;}
.ci_color_txt_wr {color: #fff; width: calc(100% - 106px);}
.ci_color_txt01 {font-size: 22px; font-weight: 400;}

.esp .ci_logo {width: 40%;}
.esp .ci_txt {width: 60%; padding-left: 30px;}

/* 회사소개 - CEO 메세지 */
.ceo_info_wr {margin: 30px 0 45px;}
.ceo_info {position: relative; padding-left: 30px; width: 550px;}
.ceo_info::before {content: ''; width: 3px; height: 105px; background-color: #0082de; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.ceo_info_tit {font-size: 30px; color: #0f0f0f; font-weight: 400; padding-bottom: 14px;}
.ceo_info_tit span {font-size: 18px; color: #0082de; margin-right: 14px;}
.ceo_info_txt {font-size: 18px; color: #0f0f0f; padding: 2px 0; width: 100%;}
.ceo_info_txt.esp {font-size: 14px;}
.ceo_info_txt::before {content: ''; width: 4px; height: 4px; background-color: #666; margin: 0 8px 3px 0; display: inline-block; border-radius: 50%;}
.ceo_cnt_wr {background-color: #f4f7fa; padding: 35px 0 50px;}
.ceo_cnt_wr > .sub_wr {position: relative;}
.ceo_cnt_img_wr {position: absolute;  bottom: -50px; right: -140px; width: 500px;}
.ceo_cnt_txt_wr { padding-right: 560px;}
.ceo_cnt_tit {font-size: 20px; font-weight: 400; color: #0f0f0f; padding-bottom: 20px;}
.ceo_cnt_txt01 {color: #0f0f0f;}
.ceo_cnt_txt02 {color: #666666;}
.ceo_cnt_txt {padding: 5px 0; line-height: 1.625;}
.ceo_sign {font-size: 18px; font-weight: 400;}
.ceo_sign span {font-family: 'Handletter'; font-size: 40px; margin-left: 14px;}

.esp .ceo_info {width: 900px; max-width: 100%;}
.esp .ceo_info_txt {display: block; width: 100%;}

/* 회사소개 - 연혁 */
#history {margin-bottom: -120px;}
.history_sec01 {background: url('/source/img/img-history_bg.png') no-repeat center bottom / cover;}
.history_wr {position: relative;}
.history_wr::before {content: ''; width: 2px; height: 100%; border-left: 1px dashed #d5d5d5; top: 0; left: 50%; transform: translateX(-50%); position: absolute;}
.history_logo {width: 212px; height: 212px; border-radius: 50%; background: #0082de url('/source/img/logo_w.png') no-repeat center / 157px; margin: auto; position: relative;}
.history_ul {position: relative; padding: 50px 0 90px;}
.history_li {position: relative; padding: 5px 0;}
.history_right {display: flex; justify-content: flex-start; padding-left: calc(50% + 40px);}
.history_left {display: flex; justify-content: flex-start; flex-direction: row-reverse; padding-right: calc(50% + 40px);}
.history_right .history_cnt_ul {margin-left: 24px;}
.history_left .history_cnt_ul {margin-right: 24px;}
.history_cnt_li {padding: 8px 0;}
.history_right .history_cnt_li {display: flex;}
.history_left .history_cnt_li {display: flex; flex-direction: row-reverse;}
.history_year {font-size: 30px; color: #0082de; font-weight: 500; margin-top: -6px; position: relative;}
.history_year::before {content: ''; width: 35px; height: 35px; border-radius: 50%; border: 1px solid #0082de; background-color: #fff; position: absolute;}
.history_year::after {content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #0082de; position: absolute;}
.history_right .history_year::before {left: -40px; transform: translate(-50%, 5px);}
.history_right .history_year::after {left: -40px; transform: translate(-50%, 21px);}
.history_left .history_year::before {right: -40px; transform: translate(50%, 5px);}
.history_left .history_year::after {right: -40px; transform: translate(50%, 21px);}
.history_month {font-weight: 400; color: #0f0f0f;}
.history_right .history_month {margin-right: 12px;}
.history_left .history_month {margin-left: 12px;}
.history_txt {color: #666; line-height: 1.625;}
.history_left .history_txt {text-align: right;}

.esp .history_logo {background: #0082de url('/source/img/logo_w_eng.png') no-repeat center / 157px;}

/* 회사소개 - 인증 */
#cert {margin-bottom: -120px;}
.cert_wr:nth-child(even) {background-color: #fbfbfb;}
.cert_ul {display: flex; justify-content: flex-start; align-items: flex-start; margin: -70px -17.5px 0; flex-wrap: wrap;}
.cert_li {margin: 0 17.5px; width: calc(20% - 35px); padding: 50px 0; position: relative;}
.cert_li .img_wr {border: 1px solid #e8e8e8;}
.cert_tit {color: #0f0f0f; margin-left: 13px; text-indent: -12px; padding-top: 13px;}
.cert_tit::before {content: ''; display: inline-block; width: 2px; height: 13px; background-color: #333; margin: 0 9px 0 0;}
.cert_li:nth-child(8) {padding-bottom: 98px;}
.cert_li:nth-child(8)::after{content: ''; background-color: #fbfbfb; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: -1;}


/* 회사소개 - 오시는길 */
#access {background: url('/source/img/img-access_bg.png') no-repeat left bottom;}
.access_map_wr {width: 100%; height: 500px; position: relative; margin-top: 33px;}
.access_map_wr iframe {position: absolute; width: 100%; height: 100%; transform: translate(-50%, -50%); top: 50%; left: 50%;}
.access_info_wr {display: flex; align-items: flex-start; justify-content: space-between; padding-right: 6%;}
.access_info {padding: 0 24px; position: relative;}
.access_info:not(:first-child)::before {content: ''; width: 1px; height: 48px; background-color: #e1e1e1; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.access_info_txt01 {font-size: 18px; font-weight: 500; color: #0082de;}
.access_info_txt02 {color: #666; padding-top: 8px;}
.access_info_txt02 span {color: #bdbdbd;}

/* 사업영역 - 현장분자 진단사업 */
#molecular {margin-bottom: -120px;}
.molecular_sec01 {padding-bottom: 75px;}
.molecular_sec01-txt {color: #666; padding-top: 15px; font-size: 20px; font-weight: 400;}
.molecular_sec02 {background: url('/source/img/img-molecular_sec02_bg.jpg') no-repeat center / cover; background-attachment: fixed; padding: 75px 0;}
.molecular_sec02 .sub_smtit {padding-bottom: 40px;}
.molecular_sec02-inner {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 -50px;}
.molecular_sec02-box {display: flex; align-items: center; flex: 1; padding: 0 50px;}
.molecular_sec02-box-img_wr {width: 90px; height: 90px; border-radius: 50%; background-color: #0082de; display: flex; align-items: center; justify-content: center;}
.molecular_sec02-box-img_wr img {height: 45px;}
.molecular_sec02-box-txt_wr {width: calc(100% - 90px); padding-left: 20px;}
.molecular_sec02-box-txt {color: #666;}
.molecular_sec02-box-txt span {color: #0f0f0f; font-weight: 400;}

/* 사업영역 - 마이크로바이움 피부진단 사업 */
#skin {margin-bottom: -120px;}
.skin_sec01 {padding-bottom: 75px;}
.skin_sec02 {background: url('/source/img/img-skin_sec02_bg.jpg') no-repeat top center / cover; background-attachment: fixed; padding: 75px 0;}

/* 사업영역 - 반려동물 진단사업 */
.pet_sec.skin_sec02 {background: url('/source/img/img-pet_sec02_bg.jpg') no-repeat top center / cover; background-attachment: fixed; padding: 75px 0;}


/* 사업영역 - CDMO */
.sub_smtit.borderleft {position: relative; padding-left: 17px;}
.sub_smtit.borderleft::before {content: ''; width: 4px; height: 20px; background-color: #0082de; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}

.cdmo_sec01 {margin-bottom: 75px; padding: 30px 0;}
.cmdo_chart01_bg {background-color: #f9f9f9;margin: 20px 0 85px; padding: 30px 0;}
.cmdo_chart_wr {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative;}
/* .cmdo_chart01_wr::after {position: absolute; content: ''; width: calc(100% + 144px); height: 200px; background-color: #f9f9f9; border-radius: 100px;  z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%);} */
.cmdo_chart01_wr.esp .cmdo_chart01-txt {font-size: 14px;}
.cmdo_chart01 {width: 170px; height: 170px; padding: 8px; border-radius: 50%; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.04); margin-right: 50px; position: relative; text-align: center; background-color: #fff;}
.cmdo_chart01::after {content: ''; background: url('/source/img/icon-cmdo_arrow.svg') no-repeat center / 25px; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 50px; height: 100%;}
.cmdo_chart01:first-child, .cmdo_chart01:last-child {background-color: #0082de; color: #fff;}
.cmdo_chart01:nth-child(6), .cmdo_chart01:nth-child(11) {margin-right: 0;}
.cmdo_chart01:nth-child(6)::after, .cmdo_chart01:nth-child(11)::after {display: none;}
.cmdo_chart01-inner {width: 100%; height: 100%; border-radius: 50%; border: 1px dashed #87c4ef; padding: 25px 20px;}
.cmdo_chart01:first-child .cmdo_chart01-inner, .cmdo_chart01:last-child .cmdo_chart01-inner {border: 0;}
.cmdo_chart01-num {font-size: 20px; font-weight: 700; position: relative; color: #0082de;}
.cmdo_chart01-num::after {content: ''; width: 18px; height: 1px; background-color: #0082de; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);}
.cmdo_chart01:first-child .cmdo_chart01-num::after, .cmdo_chart01:last-child .cmdo_chart01-num::after {background-color: #fff;}
.cmdo_chart01-txt {padding-top: 15px; font-weight: 400; color: #0f0f0f;}
.cmdo_chart01:first-child .cmdo_chart01-txt, .cmdo_chart01:last-child .cmdo_chart01-txt, .cmdo_chart01:first-child .cmdo_chart01-num, .cmdo_chart01:last-child .cmdo_chart01-num {color: #fff;}

.cmdo_chart02_bg {background-color: #f5f7fa; padding: 30px 0; margin-top: 20px;}
.cmdo_chart02_wr {justify-content: space-between;}
/* .cmdo_chart02_wr::after {position: absolute; content: ''; width: 100%; height: 44px; background-color: #f9f9f9; border-radius: 22px;  z-index: -1;  top: calc(50% - 21px); left: 50%; transform: translate(-50%, -50%);} */
.cmdo_chart02 .cmdo_chart02-icon_wr {width: 130px; height: 130px; border-radius: 50%; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.04); position: relative; text-align: center; background-color: #fff; display: flex; justify-content: center; align-items: center;}
.cmdo_chart02 .cmdo_chart02-icon_wr::after {content: ''; position: absolute; background: url('/source/img/icon-cmdo_arrow.svg') no-repeat center / 25px; left: 100%; top: 50%; transform: translateY(-50%); width: 60px; height: 100%;}
.cmdo_chart02:last-child .cmdo_chart02-icon_wr::after {display: none;}
.cmdo_chart02:first-child .cmdo_chart02-icon_wr, .cmdo_chart02:last-child .cmdo_chart02-icon_wr {background-color: #0082de;}
.cmdo_chart02 .cmdo_chart02-icon_wr img {height: 40px;}
.cmdo_chart02:nth-child(4) .cmdo_chart02-icon_wr img {height: 50px;}
.cmdo_chart02-txt {text-align: center; font-weight: 400; color: #0f0f0f; padding-top: 20px;}

.inq_btn_wr {padding-top: 60px;}
.inq_btn {width: 220px; height: 65px; line-height: 65px; background-color: #333333; color: #fff; font-weight: 400; font-size: 18px; text-align: center; display: block; margin: auto; transition: .3s;}
.inq_btn:hover {background-color: #0082de;}

.esp .cmdo_chart01-txt {font-size: 14px; padding-top: 10px;}
.esp .cmdo_chart01-inner {padding: 15px 10px;}
/* .esp .cmdo_chart02 {flex: 1;} */

.esp .cmdo_chart02_wr {align-items: flex-start;}
.esp .cmdo_chart02-txt_wr {width: 130px;}

/* 사업영역 - 글로벌 네트워크 */
#global {background: url('/source/img/img-global_bg.jpg') no-repeat center bottom;}
.global_map_wr {padding: 40px 0 95px;}
.global_box_wr {display: flex; justify-content: space-between; margin: 0 -15px;}
.global_box {flex: 1; margin: 0 15px; border: 1px solid #e1e1e1; position: relative; padding: 50px 40px 40px; background-color: #fff;}
.global_box::after {content: ''; width: calc(100% + 2px); height: 10px; position: absolute; top: -1px; left: -1px;} 
.global_box:nth-child(1)::after {background-color: #0082de;}
.global_box:nth-child(2)::after {background-color:#4d4d4f;}
.global_box:nth-child(3)::after {background-color: #e1e1e1;}
.global_box_txt01 {font-size: 20px; font-weight: 400; color: #0f0f0f;}
.global_box_txt02 {color: #666; margin-top: 20px; padding-top: 25px; position: relative;}
.global_box_txt02::after {content: ''; position: absolute; width: 19px; height: 1px; background-color: #999; top: 0; left: 1px;}

/* 제품소개 - 피부진단시스템 */
.sub_txt {color: #666;}
.sub_txt span {font-weight: 400; color: #0f0f0f;}
.selma_sec:not(.selma_sec01) {padding: 75px 0;}
.selma_sec01 .selma_wr {display: flex; padding: 40px 0 75px 0; align-items: center;}
.selma_sec01 .selma_img {width: 42%; position: relative; text-align: center;}
.selma_sec01 .selma_img img {max-width: 394px; width: 90%; position: relative; z-index: 10;}
.selma_sec01 .selma_img::after {content: ''; position: absolute; width: 100%; max-width: 415px; height: 218px; border-radius: 150px; top: 50%; left: 50%; transform: rotate(-10deg) translate(-40%, -58%); background-color: #f9f9f9;}
.selma_sec01 .selma_txt {width: 58%; padding-left: 6%;}
.selma_sec02 {background: url('/source/img/img-selma_bg.jpg') no-repeat center / cover; background-attachment: fixed;}
.selma_sec02 p {color: #fff;}
.selma_sec02 .sub_txt {color: #bdbdbd; padding-top: 35px; line-height: 1.625;} 
.selma_sec02 .sub_txt span {font-weight: 400; color: #fff;}

.selma_sec03_circle_ul {display: flex; justify-content: center; align-items: center; margin: 30px -30px; position: relative;}
.selma_sec03_circle_ul::before {content: ''; position: absolute; width: 80%; height: 2px; border-top: 2px dotted #bbb; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* .selma_sec03_circle_ul::before {content: ''; position: absolute; width: 80%; height: 6px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='2' stroke-dasharray='1%2c 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e"); top: 50%; left: 50%; transform: translate(-50%, -50%);} */
.selma_sec03_circle_li {margin: 0 30px; width: 170px; height: 170px; border-radius: 50%; border: 5px solid #fff; box-shadow: -5px 5px 15px 5px rgba(0, 0, 0, 0.04); overflow: hidden; position: relative; z-index: 10;}
.selma_sec03_circle_li img {min-width: 100%; min-height: 100%; object-fit: cover;}
.selma_sec04 {background: url('/source/img/img-selma_sec04_bg.png') no-repeat center top / contain; margin-bottom: -75px;}
.selma_sec04 .sub_txt {padding: 30px 0 25px;}
.selma_sec04_img01_wr {display: flex; margin: 15px -15px; flex-wrap: wrap; align-items: flex-start; background: url('/source/img/img-selma_sec04_img01_bg.png') no-repeat center;}
.selma_sec04_img01_wr li {width: calc(100% / 3 - 30px); margin: -15px 15px;}
.selma_sec04_img01_wr li:nth-child(1) img {max-width: 175px;}
.selma_sec04_img01_wr li:nth-child(2) img {max-width: 169px;}
.selma_sec04_img01_wr li:nth-child(3) img {max-width: 228px;}
.selma_sec04_img01_wr li:nth-child(4) img {max-width: 255px;}
.selma_sec04_img01_wr li:nth-child(5) img {max-width: 170px;}
.selma_sec04_img01_wr .selma_sec04_img01_num {width: 60px; height: 60px; line-height: 56px; border-radius: 50%; border: 3px solid #fff; background-color: #0082de; color: #fff; font-weight: 700; font-size: 26px; text-align: center; box-shadow: -2px 2px 10px 1px rgba(0, 0, 0, 0.1); margin: auto; position: relative; top: 30px;}
.selma_sec04_img01_wr .selma_sec04_img01 {width: 100%; height: 230px; background-color: #fff; border-radius: 20px; border: 3px solid #e8e8e8; display: flex; justify-content: center; align-items: center; padding-top: 20px;}
.selma_sec04_img01_wr .selma_sec04_img01_txt {color: #666; padding-top: 10px;}
.selma_sec04_img02_wr {background-color: #fdfdfd; border: 1px solid #e1e1e1; display: flex; align-items: center; justify-content: center; padding: 80px 50px; margin-top: 60px;}
.selma_sec04_img02_wr img {max-width: 1170px;}

/* 연구개발 - 기업부설연구소 */
#laboratory {margin-bottom: -120px;}
.laboratory_sec02 {background: url('/source/img/img-lab_bg.jpg') no-repeat center / cover; background-attachment: fixed; padding: 55px 0;  margin-top: 55px;}
.laboratory_sec .laboratory_box.mainsec04_box {position: static; transform: translate(0);}
.laboratory_sec .laboratory_box_wr.mainsec04_box_wr {width: 100%; height: auto; display: flex; justify-content: space-between; background: none;}
.laboratory_box.mainsec04_box:nth-child(3)::before {top: 50%; left: 0; transform: translate(-50%, -5px);}
.laboratory_box.mainsec04_box:nth-child(2)::before {top: 50%; left: 100%; transform: translate(-3px, -5px);}
.laboratory_box.mainsec04_box .laboratory_box_inner.mainsec04_box_inner::before, .laboratory_box.mainsec04_box:nth-child(4)::before, .laboratory_box.mainsec04_box:nth-child(1)::before, .laboratory_box.mainsec04_box:nth-child(4) .mainsec04_box_inner::after {display: none;}
.laboratory_sec .laboratory_box.mainsec04_box:not(:last-child) .laboratory_box_inner.mainsec04_box_inner::after {content: ''; width: calc(100% - 640px / 4); height: 1px; border-top: 1px dashed #fff; position: absolute;  top: 50%; left: calc(100% + 10px); }
.laboratory_sec03 {background: url('/source/img/img-lab_bg2.png') no-repeat center bottom / contain; padding-bottom: 120px;}
.lab_box_wr {padding-top: 80px;}
.lab_box_inner {display: flex; justify-content: space-between; margin-top: 15px;}
.lab_box {width: calc(50% - 20px); background-color: #fdfdfd; border: 1px solid #e1e1e1; text-align: center; padding: 35px 40px;}
.lab_box_num {font-weight: 500; color: #0082de;}
.lab_box_subject {font-size: 18px; font-weight: 400; color: #0f0f0f; padding: 10px 0 15px; margin-bottom: 20px; position: relative;}
.lab_box_subject::after {content: ''; width: 23px; height: 1px; background-color: #e8e8e8; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

/* 연구개발 - 핵심경쟁력 */
.point01_wr {padding: 30px 0 50px;}
.point01_circle {width: 394px; height: 394px; border-radius: 50%; border: 1px dashed #b7b7b7; padding: 30px; position: relative; margin: auto;}
.point01_circle::after, .point01_circle::before, .point01_circle .img_wr::after, .point01_circle .img_wr::before {content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; background-color: #0082de;}
.point01_circle::after {top: 130px; left: 4px;}
.point01_circle::before {top: 130px; right: 3px;}
.point01_circle .img_wr::after {bottom: 60px; left: -8px;}
.point01_circle .img_wr::before {bottom: 60px; right: -9px;}
.point01_circle .img_wr {background: url('/source/img/img-point_circle_bg.jpg') no-repeat center / cover; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;}
.point01_circle .img_wr img {width: 70%;}
.point01_txt {position: absolute; font-size: 18px; font-weight: 400; color: #0f0f0f; text-align: center;}
.point01_circle .point01_txt:nth-of-type(1) {top: 110px; left: -170px;}
.point01_circle .point01_txt:nth-of-type(2) {top: 110px; right: -180px;}
.point01_circle .point01_txt:nth-of-type(3) {bottom: 70px; left: -180px;}
.point01_circle .point01_txt:nth-of-type(4) {bottom: 70px; right: -160px;}

.point02_ul {margin: -20px 0;}
.point02_li {display: flex; justify-content: space-between; align-items: center; margin: 20px 0;}
.point02_li .point02_circle {width: 206px; height: 206px; border-radius: 50%; border: 5px solid #fff; color: #fff; font-size: 18px; font-weight: 400; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; box-shadow: -2px 2px 10px 1px rgba(0, 0, 0, 0.2); margin-right: 60px; position: relative;}
.point02_li .point02_circle::after {content: ''; position: absolute; width: 62px; height: 2px; border-top: 1px dashed #999; top: 50%; left: calc(100% + 5px);}
.point02_li:nth-child(odd) .point02_circle {background-color: #1eadbd;}
.point02_li:nth-child(even) .point02_circle {background-color: #888888;}
.point02_li .point02_cnt {width: calc(100% - 266px); border: 1px solid #e1e1e1; border-radius: 10px;  padding: 38px; position: relative;}
.point02_li .point02_cnt::before {content: ''; position: absolute; width: 20px; height: 20px; background-color: #fff; border: 1px solid #e1e1e1; left: 0; top: 50%; transform: translate(-50%, -50%);}
.point02_li .point02_cnt::after {content: ''; position: absolute; width: 4px; height: 4px; background-color: #999999; left: 0; top: 50%; transform: translate(-50%, -50%);}
.point02_li .point02_cnt .point02_txt02_wr {padding-top: 8px;}
.point02_li .point02_cnt .point02_txt02 {margin-left: 16px; text-indent: -16px; padding: 1px 0;}
.point02_li .point02_cnt .point02_txt02::before {content: ''; display: inline-block;  width: 4px; height: 4px; border-radius: 50%; background-color: #0082de; margin: 0 10px 3px 0;}

.esp .point01_circle .point01_txt:nth-of-type(3) {bottom: 40px;}
.esp .point01_circle .point01_txt:nth-of-type(4) {bottom: 40px; right: -220px;}

.eng .point01_circle .point01_txt:nth-of-type(1) {top: 100px; left: -230px;}
.eng .point01_circle .point01_txt:nth-of-type(2) {top: 100px; right: -200px;}
.eng .point01_circle .point01_txt:nth-of-type(3) {bottom: 60px; left: -200px;}
.eng .point01_circle .point01_txt:nth-of-type(4) {bottom: 60px; right: -180px;}


.recruit_process_wr .img_wr.mo {display: none;}
.recruit_process_inner {background-color: #f9f9f9; padding: 40px 0; margin: 30px 0 10px;}
.recruit_process_ul {display: flex; justify-content: center; margin: 0 -15px;}
.recruit_process_li {width: 160px; height: 160px; border-radius: 50%;  box-shadow: -2px 2px 10px 1px rgba(0, 0, 0, 0.2); font-size: 18px; font-weight: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px; position: relative; margin: 0 15px; }
.recruit_process_li img {height: 40px;}
.recruit_process_li:nth-of-type(odd) {background-color: #0082de; color: #fff;}
.recruit_process_li:nth-of-type(even) {background-color: #fff; color: #333;}
.recruit_process_txt {padding-top: 15px; line-height: 1;}
.recruit_process_txt span {font-weight: 300; font-size: 16px;}
.recruit_process_li:not(:last-child)::after {content: ''; position: absolute; top: 50%; left: calc(100% + 12px); transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: calc( 5px * 1.732 ) solid #666;}
.recurit_sec02 {padding-top: 100px;}
.recruit_welfare_ul {display: flex; flex-wrap: wrap; justify-content: space-between; margin: -15px;}
.recruit_welfare_li {margin: 15px; width: calc(25% - 30px); background-color: #fbfbfb; padding: 30px 15px 30px 25px; border-top: 1px solid #333;}
.recruit_welfare_li img {height: 45px;} 
.welfare_txt01 {font-size: 20px; font-weight: 400; color: #0f0f0f; padding: 25px 0 15px;}
.recruit_welfare_li .sub_txt {padding: 2px 0;}


/* Product */
/* > List */
.prod_category{margin: 0 0 25px;}
.prod_category_ul{margin: -2px;}
.prod_category_ul > li{padding: 2px;}
.prod_category_ul > li > a{display: block; width: 100%; height: 40px; line-height: 40px; padding: 0 15px; border-radius: 5px; border: 1px solid #ddd; font-size: 16px; font-weight: 300; color: #666;}
.prod_category_ul > li.active > a{border: 1px solid #000; color: #fff; background: #000;}
.prod_category_ul > li > a:hover{border: 1px solid #000; color: #fff; background: #000;}

.prod_filter{width: 100%; padding: 25px; background-color: #f7f8fa;}
.prod_sort{float: left;}
.prod_sort_ul{margin: -10px;}
.prod_sort_ul > li{position: relative; padding: 10px;}
.prod_sort_ul > li:after{content: ""; display: block; position: absolute; top: 50%; right: 0; z-index: 1; width: 1px; height: 14px; margin-top: -7px; background: #888;}
.prod_sort_ul > li:last-child:after{display: none;}
.prod_sort_ul > li > a{display: block; width: 100%; height: 46px; line-height: 46px; font-size: 14px; font-weight: 350; color: #888; letter-spacing: 0;}
.prod_sort_ul > li > a:hover{color: #0f0f0f;}
.prod_sort_ul > li.active > a{color: #3a8afd;}

.prod_search{float: right;}
.prod_search_ul{overflow: hidden; border: 1px solid #ddd; border-radius: 5px;}
.prod_search_input{display: block; width: 300px; height: 46px; padding: 0 10px; border: 0; font-size: 16px; font-weight: 300; color: #0f0f0f; background: #fff;}
.prod_search_input::placeholder{color: #999;}
.prod_search_submit{display: block; width: 40px; height: 46px; border: 0; font-size: 15px; font-weight: 300; color: #666; background: #fff;}

.prod_box{margin-top: 40px;}
.prod_wrap{margin: -25px -13px;}
.prod_li{padding: 25px 13px; vertical-align: top;}
.prod_li_thumb{display: block; position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 100%; border: 1px solid #eee; box-shadow: 5px 0 10px rgba(0,0,0,0.15); overflow: hidden;}
.prod_li_thumb img{position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); width: 100%; max-width: 100%; max-height: 100%; object-fit: contain;}
.prod_li_info{margin-top: 20px; padding: 0 5px;}
.prod_li_category{display: inline-block; margin-bottom: 7px; padding: 3px 7px; border: 1px solid #ccc; border-radius: 5px; font-size: 12px; font-weight: 400; color: #666;}
.prod_li_name{display: block; width:100%; font-size: 18px; font-weight: 500; color: #0f0f0f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prod_li_text1{margin-top: 15px; font-size: 15px; font-weight: 400; color: #666;;}

.prod_li_thumb:hover:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: rgba(0,0,0,0.6);}
.prod_li_thumb:hover:after{content: "More +"; display: block; position: absolute; top: 50%; left: 50%; z-index: 5; width: 150px; height: 40px; margin: -20px 0 0 -75px; line-height: 40px; border: 1px solid #fff; font-size: 16px; font-weight: 400; color: #fff; text-align: center;}
.prod_li_name:hover{color: #3a8afd;}

.prod_pg_wrap{margin-top: 70px;}

.product_sch_tit {font-size: 18px; font-weight: 400; padding: 20px;}
.prod_no_result {width: 100%; display: block; text-align: center; padding: 40px 0;}

/* > View */
.prod_v_ct{padding: 40px 20px; border-top: 2px solid #000; border-bottom: 1px solid #000;}

.prod_v_thumb{float: left; width: 450px; max-width: 100%;}
.prod_v_thumb_item{}
.prod_v_thumb_item_img{overflow: hidden; position: relative; height: 0; padding-bottom: 100%; background-color: #f9f9f9;}
.prod_v_thumb_item_img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;  max-width: 100%; max-height: 100%; object-fit: contain;}
.prod_v_thumb_sl .slick-dots{margin: 10px -2px 0; font-size: 0;}
.prod_v_thumb_sl .slick-dots > li{display: inline-block; position: relative; width: 20%; padding: 0 2px; font-size: 16px; vertical-align: top; cursor: pointer;}
.prod_v_thumb_small_img{overflow: hidden; position: relative; width: 100%; height: 0; padding-bottom: 100%; border: 1px solid #ddd;}
.prod_v_thumb_small_img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; object-fit: contain;}
.prod_v_thumb_sl .slick-dots > li.slick-active .prod_v_thumb_small_img{border: 1px solid #3a8afd;}

.prod_v_info{float: left; width: calc(100% - 450px); padding-left: 50px;}
.prod_v_category{display: inline-block; margin-bottom: 10px; padding: 5px 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; font-weight: 400; color: #666;}
.prod_v_name{padding-bottom: 15px; font-size: 30px; font-weight: 500; color: #0f0f0f; border-bottom: 1px solid #ddd}
.prod_v_expl{margin-top: 20px; font-size: 16px; font-weight: 300; color: #333; line-height: 1.7;}
.prod_v_text1{margin-top: 20px;}
.prod_v_text1 > li{position: relative; margin-top: 7px; padding-left: 10px; font-size: 16px; font-weight: 300; color: #666;}
.prod_v_text1 > li:first-child{margin-top: 0;}
.prod_v_text1 > li:before{content: ""; display: block; position: absolute; top: 9px; left: 0; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: #3a8afd;}

.prod_v_btn_wrap{margin-top: 40px;}
.prod_v_btn_ul{margin: -5px;}
.prod_v_btn_ul > li{padding: 5px;}
.prod_v_btn{display: flex; flex-direction: column; justify-content: center; width: auto; min-width: 150px; height: 40px; border-radius: 5px; text-align: center; font-size: 14px; font-weight: 300; color: #fff; background: #666; letter-spacing: 0;}
.prod_v_btn i{margin: -4px 10px 0 0; font-size: 16px; font-weight: 300; vertical-align: middle;}
.prod_v_btn.color1{background: #3a8afd;}

.prod_v_bot{margin-top: 20px; text-align: center;}
.prod_v_bot_ul{display: inline-block;}
.prod_v_list_btn{display: block; width: 130px; height: 50px; line-height: 50px; padding: 0 15px; border-radius: 5px; font-size: 14px; font-weight: 400; color: #fff; background: #000; letter-spacing: 0; text-align: center;}




/* 20221007 추가 */
.admin_logout {position: fixed; bottom: 0; left: 0; padding: 5px 10px; text-align: center; background-color: orangered; color: #fff; font-weight: 400; font-size: 14px;}