@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://webfontworld.github.io/sunn/SUIT.css');
 html { font-size:62.5%; }
*:focus {outline: 0 !important;}
textarea:focus, input:focus{outline: none !important;}
input:active {outline: none }
.inner {width:100%; max-width:1620px; margin:0 auto; position: relative;}
.inner_nopo {width:100%; max-width:1620px; margin:0 auto; z-index:1;}

.sub_inner {width:100%; max-width:calc(1620px - 300px); margin:0 auto; position: relative;}


.gnb_1dli {display: flex;}
.hey_font {font-family: 'hey_augustregular';}

frame.goog-te-banner-frame { display: none !important; } /* 상단 플로팅 바 옵션 가리기 */
body { position: static !important; top:0px !important; }
.goog-logo-link { display:none !important; }
.goog-te-gadget { color: transparent !important; }


:lang(ko) .kor_link {display:inline-block}
:lang(ko) .ar_link {display:none}
:lang(en) .kor_link {display:none}
:lang(en) .eng_link {display:inline-block}
:lang(ar) .kor_link {display:none}
:lang(ar) .ar_link {display:inline-block}



body .skiptranslate{display:none}


#google_translate_element {padding-left:20px}
.collapse.in{
    -webkit-transition-delay: 4s;
    transition-delay: 5s;
    visibility: visible;
}
.goog-te-gadget-simple img {display:none}

.goog-te-gadget-simple .goog-te-menu-value span:nth-child(1) {padding-right:10px }
.goog-te-gadget-simple .goog-te-menu-value span:nth-child(3) {padding-left:10px }

.goog-te-gadget-simple {
    background-color:#fff;
    border-left: 1px solid #d5d5d5;
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
    font-size: 10pt;
    display: inline-block;
    padding-top: 1px;
    padding-bottom: 2px;
    cursor: pointer;
    zoom: 1;
    *display: inline;
	padding:0px 10px
	height:35px;
	line-height:30px;
}

.top_bg01 {background:url('../img/top_bg01.png') no-repeat; width:100%; height:450px; background-size:cover; background-position:center; position: relative; margin-bottom:100px}
.top_bg01 .txt{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; color:#fff}
.top_bg01 .txt h2 {font-size:50px;}
.top_bg01 .txt p {font-size:24px; padding-bottom:10px}
.top_bg01 .txt h3 {font-size:18px; padding-top:20px; }

.top_bg01.mbno {margin-bottom:0px}

/****** 상단메뉴 ************/
#gnb_all {display:none}
#gnb {text-align: right; padding-top:50px; padding-right:8%}
#gnb .gnb_menu_btn {background:transparent;  padding-top:10px}
#gnb .gnb_menu_btn .fa {font-size:28px}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}


.view_img02 {text-align:center}
.view_img02  img {width:100%}

.sub_page {padding-bottom:100px; padding-top:130px}
.gnb_1dli {position:relative;word-wrap:break-word; display:inline-block;  vertical-align:middle;}
.gnb_1dli span.bg{display:none}

.gnb_1dli_on {color:#fff;text-decoration:none}
.gnb_1da {display:block;padding:0px 10px;line-height:48px;color:#525252;text-decoration:none;font-size:22px; mix-blend-mode: difference;}
.gnb_1da i {position:absolute;right:0;top:0;display:inline-block;color:#c4c4c4;padding:15px;font-size:1.45em}

.gnb_1dam {background:url('img/gnb_bg.png') center right no-repeat}
.gnb_1dli_on .gnb_1da {color:#000; text-decoration:none}
/*.gnb_1dli_on .gnb_1da:after {position:absolute;left:-1px;top:0;content:"";background:#3a8afd;width:3px;height:100%}*/

.gnb_1dli_on .gnb_1dam {text-decoration:none}
.gnb_2dul {display:none;z-index:1000;position:absolute;border:1px solid #e8e8e8;padding:10px}
.gnb_1dli_over .gnb_2dul, .gnb_1dli_over2 .gnb_2dul {display:block;}
.gnb_1dli_over .gnb_2dul:after, .gnb_1dli_over2 .gnb_2dul:after {content:"";position:absolute;top:10px;left:-6px;display:inline-block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #fff}
.gnb_1dli_over .gnb_2dul:before, .gnb_1dli_over2 .gnb_2dul:before {content:"";position:absolute;top:9px;left:-7px;display:inline-block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #e8e8e8}

.gnb_2da {}
.gnb_1dli_over .gnb_2da {display:block;padding:5px 10px;line-height:20px;font-size:1.083em}
.gnb_2da:focus, .gnb_2da:hover {text-decoration:none;color:#fe443c}



.nav_product {position: absolute; top:25px; left:50%; transform:translateX(-50%);  }

.nav_product ul li {display:inline-block}
.nav_product ul li a {font-size:20px; padding:0px 25px}

/*#nav-trigger {display:none}*/
#fp-nav ul li .fp-tooltip {color:#fe443c !important; font-weight:bold}
.inner_free {width:100%; padding-left:5%; padding-right:5%; }


#nav-trigger {position: absolute;     background: transparent;  z-index: 10;   top: 55px;   right:5%;   bottom: 0;   width:45px; height:45px;   border: none;   padding: 0;   margin: 0;  -webkit-transition-duration: 0.5s;  transition-duration: 0.5s;  -webkit-transition-timing-function: ease-in-out;  transition-timing-function: ease-in-out; opacity:1}


/*#nav-trigger {position: absolute;     background: transparent;  z-index: 10;   top: 30px;   right:20px;   bottom: 0;   width:5px; height:25px;   border: none;   padding: 0;   margin: 0;  -webkit-transition-duration: 0.5s;  transition-duration: 0.5s;  -webkit-transition-timing-function: ease-in-out;  transition-timing-function: ease-in-out;}*/

#nav-trigger i {line-height: inherit;  display: block;  top:0px; height: 35px;  width:5px; position: absolute; background-color: #000;  right: 10px;  background-color: #000;  transition: .3s all;}
#nav-trigger>span:after { content: "";  display: block;  top:0px;  height: 35px;   width:5px; position: absolute;  right: 0;  background-color: #000;  transition: .3s all;}
#nav-trigger>span:before{ content: "";  display: block;  top:0px;  height: 35px;  width:5px;  position: absolute;  right: 20px;  background-color: #000;  transition: .3s all;}



#nav-trigger:hover>span{-webkit-transform:scale3d(1.15, 1.15, 1) rotate(0.001deg);-moz-transform:scale3d(1.15, 1.15, 1) rotate(0.001deg);-ms-transform:scale3d(1.15, 1.15, 1) rotate(0.001deg);-o-transform:scale3d(1.15, 1.15, 1) rotate(0.001deg);transform:scale3d(1.15, 1.15, 1) rotate(0.001deg)}

#nav-trigger.mouseout->span:after {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-name: nav-trigger-out;
    animation-duration: .3s;
}
html.nav-opened #nav-trigger>span:before {
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

html.nav-opened #nav-trigger>span:before, html.nav-opened #nav-trigger>span:after {
   /* top: 5px;
    left: 5px;*/
    right: 5px;
    animation: none !important;
	background-color: #000; 
}

html.nav-opened .nav_product ul li a {color:#fff}
html.nav-opened .gnb_1da  {color:#fff}
html.nav-opened #nav-trigger>span:after {-webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


html.nav-opened #header {background:transparent; border:0; position: fixed;}
html.nav-opened #logo a {background:url(../img/common/logo_w.png) no-repeat 0 0;   width:139px; height:24px; background-size:139px 24px}
html.nav-opened #nav-trigger>span:before, html.nav-opened #nav-trigger>span:after {background:#fff}

html.nav-opened #nav-trigger i {display:none}

html.nav-opened .pc_div {color:#fff}
html.nav-opened .pc_div a{color:#fff}

#hd.scrollBg #logo{top: 30px;}
#hd.scrollBg #nav-trigger{top: 40px;}


#aside {display: none; position: fixed; top: 55%; left:50%; transform:translate(-50%, -50%);margin: 0px;border-top: 0;z-index: 1005; border: 0; width: 60%; transition: .35s;}
.mask {display: none; position: fixed;top: 0%;left: 0;width: 100%;height: 100%;background: #000;opacity:1;cursor: pointer; z-index: 1000; transition: .35s;}
.block {
  display: block !important;
}


.close_menu {cursor:pointer; position: fixed;z-index: 1100; top:0px; right: -100%; width: 45px; height: 45px; background:#fff}
.close_menu span {position:absolute; left:0; display:block; width:100%; height:2px; background:#9a6c41; -webkit-transition:all .4s ease; transition:all .4s ease; }
.close_menu .close-line1 {top:20px; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)}
.close_menu .close-line2 {top:20px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg)}
.mb-sub-ul {display: none; background: #d9d9d9;}
.mb-sub-ul li a {display: block;}

.mobile-list {position: relative; height: 50px; overflow: hidden; margin: 30px 0; transition: .3s; border-bottom: 1px solid transparent; box-sizing: border-box;}
.mobile-list a {padding:0px 0px; color: #929292; /*text-transform: uppercase;*/font-size: 50px; cursor: pointer; width: 100%;  animation-duration: .3s; font-weight: 600; display: flex; flex-direction: column;}

.mobile-list a span{
  position: relative;
  display: inline-block;
  transition: .45s;
}
.mobile-list a span:after{
  content: "";
  display:block;
  position: absolute;
  left: 0;
  bottom:0px;
  width: 0px;
  height: 2px;
  margin: 5px 0 0;
  transition: all 0.1s ease-in-out;
  transition-duration: 0.5s;
  opacity: 0;
  background-color: #000;
}
.mobile-list a span:hover:after{
  width: 100%;
  opacity: 1;
}

.mobile-list:hover a span:nth-child(1){margin-top: -50px;}
.mobile-list:hover{border-bottom: 1px solid #fff;}


.mb-sub-ul>li:hover a{color: #9a6c41;}
.ico1{float: right; padding: 13px; padding-right: 20px; position: absolute; top: 0; right: 0;}
.ico2{display: none;float: right; padding: 13px; padding-right: 20px; position: absolute; top: 0; right: 0;}

.bg_blank {background:#000}

.mobile-list.on .ico1 {display: none;}
.mobile-list.on .ico2 {display: block;}

.menu_foot{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-top: 100px;}
.menu_foot .ive_file_down a{color: #fff; border: 1px solid #fff; box-sizing: border-box; border-radius: 30px; width: 230px; text-align: center; height: 45px; line-height: 45px; display: inline-block; transition: .35s;}
.menu_foot .ive_file_down a img{margin-top: 2px; transition: .35s;}
.menu_foot .ive_file_down a:hover{background: #fff; color: #000;}
.menu_foot .ive_file_down a:hover img{filter: invert(1);}

.menu_foot .menu_ct_info ul li{text-align: right; padding-right: 15px; border-right: 1px solid #fff; box-sizing: border-box;}
.menu_foot .menu_ct_info ul li p{color: #fff;}
.menu_foot .menu_ct_info ul li a{color: #fff;}
.menu_foot .menu_ct_info ul li:not(:last-child){margin-bottom: 30px;}

@media screen and (max-width : 1200px) {
  .mobile-list a {font-size: 45px;}

  #nav-trigger i {top:2px; height: 28px;  width:3px;}
  #nav-trigger>span:after {top:2px;  height: 28px;   width:3px;}
  #nav-trigger>span:before{top:2px;  height: 28px;   width:3px;}
}
@media screen and (max-width : 1024px) {
  .mobile-list {margin: 15px 0; height: 40px;}
  .mobile-list a {font-size: 30px; line-height: 40px;}
  .mobile-list a span {height: 40px;}
  .mobile-list:hover a span:nth-child(1) {margin-top: -40px;}
}
@media screen and (max-width : 768px) {
  #aside{top: 50%; width: 90%;}

  .mobile-list {margin: 15px 0; height: 30px;}
  .mobile-list a {font-size: 20px; line-height: 30px;}
  .mobile-list a span {height: 30px;}
  .mobile-list:hover a span:nth-child(1) {margin-top: -30px;}

  .menu_foot{margin-top: 50px; flex-direction: column; align-items: flex-start;}

  .menu_foot .ive_file_down a{height: 35px; line-height: 35px; width: 210px;}
  .menu_foot .ive_file_down a img{width: 10px; margin-top: 11px;}

  .menu_foot .menu_ct_info{margin-top: 40px;}
  .menu_foot .menu_ct_info ul li{text-align: left; border-right: 0; padding-right: 0; padding-left: 10px; border-left: 1px solid #fff;}
  .menu_foot .menu_ct_info ul li:not(:last-child){margin-bottom: 15px;}
}


.btn_href {color:#0b1951; padding:20px; width: calc(50% - 10px); display: inline-block; font-size:24px !important; font-weight:800; float: left;}
.btn_home {border:2px solid #0b1951; margin-right:10px }
.btn_ok {border:2px solid #38ff00; background:#38ff00; margin-left:10px}
.btn_href span {font-size:16px}

/**************************/
#fp-nav ul li:last-child {display:none}

.section {position: relative;}
.highlight{
  display: inline;
  box-shadow: inset 0 -20px 0 #38ff00; 
  /*-10px은 highlight의 두께*/
}


.section {height:100%}
.section.parallax {height:100vh}

/*서브페이지 공통*/

.sub_nav {padding-top:150px !important; background:#fcfbfa}
.sub_nav ul {display: flex; justify-content: center;}
.sub_nav ul li {text-align:center; padding:30px 3% 40px; position:relative;}
.sub_nav ul li a { font-size:20px; color:#4a4a4a; transition: all 0.3s linear}
.sub_nav ul li a:hover {font-weight:bold}
.sub_nav ul li a.on {font-weight:bold}
.sub_nav ul li a.on:after {content:""; display:block; position: absolute; transform : translateX(-50%); width:10px; height:10px; background:#9c8873; border-radius:50%; left:50%; bottom:20px}
.sub_nav ul li a:hover:after {content:""; display:block; position: absolute; transform : translateX(-50%); width:10px; height:10px; background:#9c8873; border-radius:50%; left:50%; bottom:20px}
.sub_nav ul li img{display:block; padding-bottom:20px; margin:0 auto; transition: all 0.3s linear}

.location {padding:50px 0px; color:#9a8772; font-size:18px; font-weight:bold}
.location b{color:#000; font-size:18px}
.location b:before {background:url('../img/common/location.png') no-repeat; width:13px; height:15px; display:inline-block; content:""; margin:0px 15px 0px 10px}
/*회사소개*/

	.sub_page .company_01 { }
	.sub_page .company_01 ul {display: flex; }
	.sub_page .company_01 li {width:50%; padding:250px 0px;}
	.sub_page .company_01 li:last-child{background:url('../img/company/company_img01.png') no-repeat; background-position:right top;}
	.sub_page .company_01 li h2{font-size:48px; line-height:60px; font-weight:800}
	.sub_page .company_01 li p{font-size:22px; color:#4a4a4a; line-height:36px; padding-top:50px;}
	.sub_page.company_02 {background: linear-gradient(#fff 50%, #f9f7f6 50%);}
	.sub_page.company_02 .inner{position:relative; background:url('../img/company/company_img02.png') no-repeat; background-attachment: fixed; height:770px; background-size:cover; background-position:center;width:100%}
	.sub_page.company_02 .txt {position: absolute; color:#9c8873; font-size:18px; transform: rotate(270deg); transform-origin: left bottom; padding-top:130px; padding-bottom:20px;} 
	.sub_page.company_03 {background:#f9f7f6;  margin-bottom:100px}
	.sub_page.company_03 ul {display: flex; }
	.sub_page.company_03 li {width:50%; padding:150px 0px;}
	.sub_page.company_03 li:first-child {font-size:48px; line-height:60px; font-weight:800}
	.sub_page.company_03 li p{font-size:22px; color:#4a4a4a; line-height:36px; padding-top:50px;}


/*회사개요*/

	.sub_page .summary_01 {padding-top:100px;}
	.sub_page .summary_01 h2{font-size:48px; line-height:60px; font-weight:800}
	.sub_page .summary_01 p{font-size:22px; color:#4a4a4a; line-height:36px; padding-top:50px;}


	.sub_page .summary_02 {margin:150px 0px;border:1px solid #c4c4c4; border-left:0; border-right:0 }
	.sub_page .summary_02 ul {display: flex; flex-wrap: wrap; }
	.sub_page .summary_02 li {width:25%; padding:50px 0px; text-align:center;}
	.sub_page .summary_02 li img {display:block;  margin:0 auto;}
	.sub_page .summary_02 li b{font-size:18px; line-height:36px; font-weight:500; color:#393028; display:block; margin-top:10px;}
	.sub_page .summary_02 li span {font-weight:700; color:#000}


/*회사연혁*/
	.sub_page .history .txt h2 {font-size:30px; font-weight:800; padding-bottom:50px}
	.sub_page .history {margin-bottom:100px;}

/*조직도*/


/*오시는길*/
	.sub_page .contact_01  {margin:100px 0px}
	.sub_page .contact_01 ul {display: flex; justify-content: space-between;}
	.sub_page .contact_01 ul li {border-left:1px solid #9a8772; padding-left:20px;}
	.sub_page .contact_01 ul li:first-child {font-size:48px; font-weight:800; border:0px; padding-left:0}
	.sub_page .contact_01 ul li:first-child:after {content:""; background:#9a8772; width:60%; height:4px; display:block; margin-top:20px}
	.sub_page .contact_01 ul li h2{font-size:24px; font-weight:800; padding-bottom:20px;}
	.sub_page .contact_01 ul li p{font-size:18px; padding-bottom:10px;}
	.sub_page .contact_01 ul li p b{ font-weight:800; padding-right:20px;}

	.sub_page .contact_02  {padding-bottom:100px}
	.wrap_controllers {display:none}
	#daumRoughmapContainer1656917748165 {border-bottom:1px solid rgba(0, 0, 0, 0.1);}

/*제품소개*/
.product {background:url('../img/product/logo.png') no-repeat; background-position:25% bottom ; margin-bottom:100px;}
.product .left{float:left; width:45%}

.product .left h2{font-size:72px; font-weight:800; text-transform:uppercase }
.product .left h2:after {content:""; background:#9a8772; height:4px; display:block; width:120px; margin:50px 0px 60px}
.product .left p{font-size:18px; line-height:32px; word-break: keep-all;}

.product .right{float:left; width:55%}
.product:after {content:""; display:block; clear:both}
.product .splide .my-slider-progress {background: #ccc;}
.product .splide  .my-slider-progress-bar {background: #c6864e;  height: 4px;  transition: width 400ms ease;  width: 0;  }
.product .splide .splide__arrow--next {right: -3em;}
.product .splide .splide__arrow--prev {left: -3em;}


/*게시판*/

.bbs .left {float:left; width:55%; }
.bbs .right {float:right; width:45%; position: relative}
.bbs .left div {position: absolute; top:50%;  transform : translateY(-50%);}
.bbs .left h2{font-size:160px; font-weight:800; text-transform:uppercase; letter-spacing: -1px; line-height:160px}
/*.bbs .left h2:after {content:""; background:#9a8772; height:4px; display:block; width:120px; margin:50px 0px 60px}*/
.bbs .left p{font-size:18px; line-height:32px; word-break: keep-all;}

.bbs .right .swiper-wrapper .swiper-slide:first-child {padding-top:100px}
.bbs .right .swiper-wrapper .swiper-slide:nth-child(2) {top:100px}
.bbs .right .swiper-wrapper .swiper-slide:nth-child(2n-1) {top:-100px}
.bbs .right .swiper-wrapper .swiper-slide:last-child {margin-bottom:20px}


.swiper {position: relative;}
.swiper-button-next, .swiper-button-prev {color:#000; display: inline-block;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {background-image:none}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {background-image:none}
.swiper-button-next:after, .swiper-button-prev:after {display:none}

.Swiper_menu i {background:transparent; color: #000;  cursor: pointer;   font-size: 20px;     top: -40px;}



#ft {border-top:2px solid #000; z-index:5; background:#fff}
#ft b {font-size:18px; font-weight:800; padding:20px 0px; display:block}

@media all and  (max-width:1700px) {
.splide.is-initialized, .splide.is-rendered {width:95%}
}

@media all and  (max-width:1600px) {
.inner {padding:0px 20px}
.inner_nopo {padding:0px 20px}


}

@media all and  (max-width:1200px) {
br.none {display:none}

.gnb_1dli {display:none}
#nav-trigger {display:inline-block;}
#nav-trigger {top:5px;}
html.nav-opened #logo a {background:url(../img/common/logo_w.png) no-repeat 0 0;   width:100px; height:17px; background-size:100px 17px}
.sub_nav {padding-top:65px !important; }
.sub_nav ul li a { font-size:16px; }
.sub_nav ul li img{width:46px}



/*****회사소개*****/
.sub_page .company_01 li img {width:70%}
.sub_page .company_01 li h2 {font-size:38px; line-height:50px;}
.sub_page .company_01 li p {font-size:18px; line-height: 30px; padding-top: 50px;}

.sub_page.company_03 li:first-child {font-size:38px; line-height:50px;}
.sub_page.company_03 li p {font-size:18px; line-height: 30px; padding-top: 50px;}

/*****회사개요*****/
.sub_page .summary_01 h2 {font-size: 38px; line-height:50px}
.sub_page .summary_01 p  {font-size:18px; line-height: 30px;}

/*******오시는길********/
	.sub_page .contact_01  {margin:100px 0px}
	.sub_page .contact_01 ul li:first-child {font-size:38px;}
	.sub_page .contact_01 ul li:first-child:after {content:""; background:#9a8772; width:60%; height:4px; display:block; margin-top:20px}
	.sub_page .contact_01 ul li h2{font-size:18px; font-weight:800; padding-bottom:20px;}
	.sub_page .contact_01 ul li p{font-size:16px; padding-bottom:10px;}

/*******제품소개********/
.product .left h2 {font-size:52px;}
.product .left p {font-size: 16px; line-height:28px; margin-right:40px;}
}

@media all and  (max-width:1370px) {
.bbs .left {float:none; width:100%;}
.bbs .right {float:none; width:100%;}

}

@media all and  (max-width:1024px) {

.bbs .left h2 {font-size:50px;}
.bbs .left h2:after {margin:25px 0px}
.bbs .left p {font-size: 16px; line-height: 28px;; padding-bottom:50px;}
.bbs .right .swiper-wrapper .swiper-slide:first-child {padding-top:0px}
.bbs .right .swiper-wrapper .swiper-slide:nth-child(2n-1) {top:0px}
.bbs .right .swiper-wrapper .swiper-slide:nth-child(2) {top:0px}
.bbs .right .swiper-wrapper .swiper-slide:last-child {margin-bottom:20px}
.swiper-slide-ga {margin-bottom:50px}


}

@media all and  (max-width:920px) {
#ft_link a {font-size:14px;}
#ft_link li {padding:20px 0px;}
.foot_icon {position: relative; text-align: center; padding-top:40px;}
.foot_icon li h2 {text-align:left; font-size:12px}
.foot_icon li h3 {padding:5px 0px 10px; text-align:left; font-size:20px; letter-spacing: -0.5px;}
.foot_icon li p { font-size:12px; letter-spacing: -0.5px;}
.foot_logo {text-align:center; margin-bottom:5px;}
.foot_icon li:last-child {padding:20px 0px}
.foot_logo img {width:140px}
#ft_link li:after {margin: 0px 10px;}


/*****회사개요*****/
.sub_page .summary_02 li {width:33%}
.sub_page .summary_02 li img {max-width:70px; width:100%}
.sub_page .summary_02 li b {font-size: 14px;  line-height:28px; word-break: break-all;}


/*******오시는길********/
	.sub_page .contact_01  {margin:50px 0px}
	.sub_page .contact_01 ul {display: flex;  justify-content: flex-start;   flex-wrap: wrap;}
	.sub_page .contact_01 ul li:first-child {font-size:38px; width:100%}
	.sub_page .contact_01 ul li:first-child:after {content:""; background:#9a8772; width:10%; height:4px; display:block; margin-top:20px}
	.sub_page .contact_01 ul li:nth-child(2) {border:0px; padding-left:0px; padding-right:20px; padding-top:30px}
	.sub_page .contact_01 ul li:last-child {padding-top:30px}


/*******제품소개********/
.product .left h2 {font-size:42px;}
.product .left {float:none;  width:100%; padding-bottom:50px;}
.product .right {float:none;  width:100%;}
.splide.is-initialized, .splide.is-rendered {width:85%; margin:0 auto;}
}


@media all and  (max-width:768px) {
/*****회사소개*****/
.sub_page .company_01 li img {width:50%}
.sub_page .company_01 ul {flex-direction: column;}
.sub_page .company_01 li {padding:100px 0px; width:100%}
.sub_page.company_03 ul {flex-direction: column;}
.sub_page.company_03 li {width:100%; padding:50px 0px}


/*******오시는길********/
	.sub_page .contact_01  {margin:50px 0px}
	.sub_page .contact_01 ul {display: flex;  justify-content: flex-start;   flex-wrap: wrap;}
	.sub_page .contact_01 ul li {border-left:0px solid #9a8772; padding-left:0px;  width:100%}
	.sub_page .contact_01 ul li:first-child {font-size:28px; }
	.sub_page .contact_01 ul li:first-child:after {content:""; background:#9a8772; width:10%; height:4px; display:block; margin-top:20px}
	.sub_page .contact_01 ul li:nth-child(2) {border:0px; padding-left:0px; padding-right:20px; padding-top:30px; padding-bottom:30px;}
	.sub_page .contact_01 ul li:last-child {padding-top:30px; border-top:1px solid #9a8772;}
	.sub_page .contact_01 ul li h2{font-size:18px; font-weight:800; padding-bottom:20px;}
	.sub_page .contact_01 ul li p{font-size:16px; padding-bottom:10px; line-height:28px; word-break: keep-all;}
	.sub_page .contact_01 ul li p b{ font-weight:800; padding-right:20px;}
}

@media all and  (max-width:540px) {
.sub_nav ul li img{width:36px}
.sub_nav ul li {text-align:center; padding:30px 2% 40px; position:relative;}
.sub_nav ul li a { font-size:14px;     letter-spacing: -0.5px;}
.sub_nav ul li a.on:after {content:""; display:block; position: absolute; transform : translateX(-50%); width:8px; height:8px; background:#9c8873; border-radius:50%; left:50%; bottom:20px}
.sub_nav ul li a:hover:after {content:""; display:block; position: absolute; transform : translateX(-50%); width:8px; height:8px; background:#9c8873; border-radius:50%; left:50%; bottom:20px}

/*****회사소개*****/
.sub_page .company_01 li h2 {font-size:28px; line-height:40px;}
.sub_page .company_01 li p {font-size:16px; line-height:28px;}
.sub_page.company_03 li:first-child {font-size:28px; line-height:40px;}
.sub_page.company_03 li p {font-size:16px; line-height:28px;}

/*****회사개요*****/
.sub_page .summary_01 { padding-top:50px;}
.sub_page .summary_01 h2 {font-size: 28px;  line-height: 40px;}
.sub_page .summary_01 p  {font-size:16px; line-height:28px;}
.sub_page .summary_02 {margin:50px 0px 100px;}
.sub_page .summary_02 li {width:calc(50% - 20px); padding:30px 5px}

.ft_info span:nth-child(3) {display:block}
#ft_link {text-align: center;}
#ft_link a {font-size:12px; letter-spacing: -1px;}
#ft_link li {padding:10px 0px;}
#ft_link li:after {margin: 0px 0px 0px 5px;}

br.nones {display:none}
}

/*

#section0 .inner {height:100vh}

#section0 .left {float:left; padding-top:150px}
#section0 .right {float:right; padding-top:150px}
#section0 .right h2 {font-size:50px; line-height:68px; font-weight:bold; letter-spacing:-0.5px; padding:0px 0px 0px;}
#section0 .right h3 {font-size:20px}
#section0 .right  p {font-size:14px; line-height:30px; padding-bottom:15px}



#section0 h2 {font-size:70px; line-height:70px; font-weight:bold; letter-spacing:-0.5px; padding:0px 0px 0px;}
#section0 p {font-size:18px}
#section0 .left .tit_02  p {padding:100px 0px 20px}

#section0 .bottom {position: absolute; bottom:10px;  right:0px}
#section0 .bottom h3 {font-size:70px; color:#0b1951; display:inline-block; position: relative; padding-right:2.6em; padding-bottom:10px;  letter-spacing:-1px;}
#section0 .bottom h2 {font-size:45px;}
#section0 .bottom h2 span{font-size:32px;}
#section0 .bottom p {font-size:16px;; text-align:right}
#section0 .bottom ul {display:inline-block}

#section0 .bottom ul li {display:inline-block}

#section0 .bottom h3:after {content:''; position: absolute;width:40%; height:8px; background:#0b1951; bottom:13px; left:335px}

#section0 .bottom ul li h2:before {content:''; display:inline-block; width:25px; height:25px; background:url('../img/main/section0_icon01.png') no-repeat; background-size:cover; margin-right:5px; margin-left:15px} 
#section0 .bottom ul li:nth-child(2)  h2:before  {background:url('../img/main/section0_icon02.png') no-repeat;} 
#section0 .bottom ul li:nth-child(3)  h2:before  {background:url('../img/main/section0_icon03.png') no-repeat;} 
#section0 .bottom ul li:nth-child(4)  h2:before  {background:url('../img/main/section0_icon04.png') no-repeat;} 


#section0 {background:url('../img/main/section0_bg.png') no-repeat; width:100%; height:100vh; background-size:cover; background-position:right; position: relative; background-size:100%}
#section0 .img{position: absolute; top:60%; transform:translateY(-50%); right:-100px; z-index:0}
#section0 .img img{width:80%; }
/*
#section1 .right h3 {font-size:18px; font-weight:bold; padding-bottom:20px}
#section1 .right h2 {font-size:60px; letter-spacing:-2px; position: relative; padding-bottom:50px; }

#section1 .right p {font-size:18px; padding-bottom:15px; font-weight:bold}
#section1 .right p:before {content:"+"; display:inline-block; margin-right:10px; color:#38ff00; font-weight:bold} 

#section1 .right .btn_new {margin-top:50px}



#section1 .bg{background:url('../img/main/section1_bg.png') no-repeat; width:100%; height:100vh; background-size:cover; background-position:left bottom; position: relative ; background-size:90%; z-index:1}
#section1 .circle {position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:0}
#section1 .circle img {width:95%}

#section1 .bg .inner {height:100vh}
#section1 .bg .right {position: absolute; right:20px; top:50%;  transform:translateY( -50%);}

#section1 .img div{position: absolute; z-index:2}
#section1 .img div:first-child {right:25%; top:-200px}
#section1 .img div:last-child {left:25%}

#section1 .col-xs-3 {position: inherit;}
#section1 .col-xs-3 ul {position: absolute;  top: 50%;  transform: translateY( -50%); right:0px}

#section1 .bg{background:url('../img/main/secondPage_bg.png') no-repeat; width:100%;  background-size:cover; background-position:left center; position: relative ; background-size:70%; z-index:1}
#section1 .tab_img h4{float:left; color:#fff; font-size:280px; text-shadow: 2px 2px 6px gray;  margin-top:20%; letter-spacing:-10px;}
#section1 .tab_img div{float:right; padding-top:10%}
#section1 .tab_img:after {content:""; clear:both; display:block}


#section1 .tab_txt li{float:left; font-size:18px; line-height:30px;}
#section1 .tab_txt h3{font-size:56px; padding-bottom:30px; letter-spacing:-2px;}
#section1 .tab_txt p{font-size:30px; padding-bottom:50px; font-weight:600}
#section1 .tab_txt h4{font-size:18px; line-height:30px;}
#section1 .tab_txt li:after {content:""; clear:both; display:block}



@media all and  (max-width:1300px) {
#section1 .tab_img img {width:100%; max-width:500px}
#section1 .nav-tabs>li>a {font-size:18px;}
#section1 .nav-tabs>li>a span {font-size:30px;}
#section1 .tab_img h4{font-size:200px;}
#section1 .tab_txt h3{font-size:36px; padding-bottom:20px; letter-spacing:-2px;}
#section1 .tab_txt p{font-size:22px; padding-bottom:30px}
#section1 .tab_txt h4{font-size:16px; line-height:30px;}
}

@media all and  (max-width:1100px) {
#section1.fp-section  {height: 100% !important;}
#section1 .fp-tableCell {height: 100% !important;}
}


@media all and  (max-width:1000px) {
#section1 .tab_img h4{font-size:160px;}
#section1 .col-xs-9 {width:100% !important}
#section1 .bg{ background-size:inherit;  }
#section1 .col-xs-3 {width:100% !important}
#section1 .col-xs-3 ul {position: relative;    transform: translateY(0%); }
#section1 .nav-tabs>li>a {padding:10px 0px 10px !important}
}


@media all and  (max-width:700px) {
#section1 .tab_img h4 {color:#0b1951; margin-top:0%; font-size:120px;}
#section1 .tab_img h4:after {background:#0b1951; content:""; display:inline-block; width:8px; height:8px; margin-left:10px}
#section1 .tab_img div {float: none; padding-top:0%;}
#section1 br.none {display:none}
#section1 .bg{ background-size:inherit;  }
#section1 .col-xs-3 {width:100% !important}
#section1 .col-xs-3 ul {position: relative;    transform: translateY(0%); }
#section1 .nav-tabs>li>a {padding:10px 0px 10px !important}
#section1 .tab_txt {padding-top:30px}

#section1 .tab_txt h3{font-size:30px; padding-bottom:20px; letter-spacing:-2px;}
#section1 .tab_txt p{font-size:18px; padding-bottom:10px}
#section1 .tab_txt h4{font-size:16px; line-height:30px; padding-bottom:50px}
}

#section2 .left {float:left; padding:100px 0px}
#section2 .left h2 {font-size:60px;  position: relative;   letter-spacing:-2px; z-index:0}
#section2 .left h2:after {position: absolute; background:url('../img/main/section2_img02.png') no-repeat; width:150%; height:29px; content:""; top:40px; left:80px; display:block; z-index:-1}
#section2 .left h3 {font-size:30px; position: relative; padding:50px 0px 30px;  letter-spacing:-1px;}
#section2 .left p {font-size:18px; line-height:34px}
#section2 .left p b{font-size:20px; font-weight:600}
#section2 .right {position: relative; float:right; width:70%; transform:translateY( -50%); }

#section2 .heart {position: absolute ; right:-90px; top:50px;  }
#section2 .heart img{max-height:540px;}

.video_lay {position:fixed; width: 99%; max-height:706px;  top: 50px; right: 0; z-index:1}

video {border:2px solid #38ff00;
  width: 98%;
  max-height:706px;
  position: relative;
  top: 0;
  right: 0; 
  float: right;
}

.video_none {display:none}
.video_block {display:block}

#section2 .right .section2_bg{position: absolute ; top:25px; right:20px; z-index:-10}

.video_btn { /* background:url(../img/main/play_btn.png) no-repeat; width:137px; height:137px; background-size:cover }
.video_btn button#play {background: transparent; max-width:137px; position: absolute; left:50%;  top:50%;    transform: translate(-50%, -50%); z-index:10; }
.video_btn button#pause {background:transparent; width:100%; height:100%;  max-height:706px; display:block; position: absolute; ; z-index:9}

#section2 .left .btn_new {margin-top:50px}



#section3 ul li {float:left; width:33.3%; max-width:544px; height:601px;  background-position:center bottom}
#section3 ul li a .txt br.block_txt {display:none}
#section3 ul li a .txt{padding:140px 0px 0px 30%; text-shadow: 0px 0px 5px gray; height:100%; display:block;   transition-duration:0.2s;}
#section3 ul li a h2 {font-size:66px; color:#fff; letter-spacing:-1px; }
#section3 ul li a h3 {font-size:20px;  color:#fff;  font-weight:800; padding:5px 0px 10px}
#section3 ul li a p {opacity:0 ;Transition-duration:0.3s; }


#section3 ul li.active a .txt{padding:30px 0px 0px 110px; text-shadow:none; height:100%; display:block ;  transition-duration:0.2s; }
#section3 ul li.active a h2 {font-size:66px; color:#0b1951; letter-spacing:-1px; }
#section3 ul li.active a h3 {font-size:20px; font-weight:800; padding:5px 0px 10px}
#section3 ul li.active a p {font-size:14px; line-height:26px;  letter-spacing:-0.5px; opacity:1 ; Transition-duration:0.3s; }


#section3 ul li:hover a .txt{padding:30px 0px 0px 110px; text-shadow:none; height:100%; display:block ;  transition-duration:0.2s; }
#section3 ul li:hover a h2 {font-size:66px; color:#0b1951; letter-spacing:-1px; }
#section3 ul li:hover a h3 {font-size:20px; font-weight:800; padding:5px 0px 10px}
#section3 ul li:hover a p {font-size:14px; line-height:26px;  letter-spacing:-0.5px; opacity:1 ; Transition-duration:0.3s; }


#section3 ul li:first-child { background:url('../img/main/section3_img01.png') no-repeat; background-size:420px 558px; background-position:center bottom; transition-duration:0.3s;}
#section3 ul li:nth-child(2) { background:url('../img/main/section3_img02.png') no-repeat; background-size:420px 558px; background-position:center bottom; transition-duration:0.3s;}
#section3 ul li:last-child { background:url('../img/main/section3_img03.png') no-repeat; background-size:420px 558px; background-position:center bottom; transition-duration:0.3s;}

 
#section3 ul li:first-child:hover { background:url('../img/main/section3_img01_on.png') no-repeat;  background-size:cover; transition-duration:0.3s;}
#section3 ul li:nth-child(2):hover { background:url('../img/main/section3_img02_on.png') no-repeat;  background-size:cover;  transition-duration:0.3s;}
#section3 ul li:last-child:hover { background:url('../img/main/section3_img03_on.png') no-repeat;  background-size:554px 601px;  transition-duration:0.3s;}

#section3 ul li.active:first-child { background:url('../img/main/section3_img01_on.png') no-repeat;  background-size:cover; transition-duration:0.3s;}
#section3 ul li.active:nth-child(2){ background:url('../img/main/section3_img02_on.png') no-repeat;  background-size:cover;  transition-duration:0.3s;}
#section3 ul li.active:last-child { background:url('../img/main/section3_img03_on.png') no-repeat;  background-size:554px 601px;  transition-duration:0.3s;}



@media all and  (max-width:1400px) {
#section0 {background-size:cover; background-position:right; position: relative; background-size:125%}

#section0 .right h2 {font-size:30px; line-height:38px; }
#section0 .right h3 {font-size:18px}
#section0 .right  p {padding-bottom:20px}


#section0 h2 {font-size:50px; line-height:50px;}
#section0 p {font-size:16px}
#section0 .left .tit_02  p {padding:100px 0px 20px}

#section0 .bottom h3 {font-size:50px; color:#0b1951; display:inline-block; position: relative; padding-right:2.6em; padding-bottom:10px;  }
#section0 .bottom h3:after {content:''; position: absolute;width:40%; height:6px;  bottom:12px; left:235px}

#section0 .bottom h2 {font-size:35px;}
#section0 .bottom h2 span{font-size:22px;}
#section0 .bottom p {font-size:16px;; text-align:right}







#section2 .left {float:left; padding:100px 0px}
#section2 .left h2 {font-size:40px;  position: relative;   letter-spacing:-2px; z-index:0}
#section2 .left h2:after {position: absolute; background:url('../img/main/section2_img02.png') no-repeat; width:150%; height:29px; content:""; top:20px; left:80px; display:block; z-index:-1}
#section2 .left h3 {font-size:26px; position: relative; padding:50px 0px 30px;  letter-spacing:-1px;}
#section2 .left p {font-size:16px; line-height:30px}
#section2 .left p b{font-size:20px; font-weight:600}
#section2 .right {position: relative; float:right; width:70%; transform:translateY( -50%); }

#section2 .heart {position: absolute ; right:-90px; top:50px;  }
#section2 .heart img{max-height:540px;}

.video_lay {position:fixed; width: 99%; max-height:706px;  top: 50px; right: 0; z-index:1}

video {border:2px solid #38ff00;
  width: 98%;
  max-height:706px;
  position: relative;
  top: 0;
  right: 0; 
  float: right;
}





#section3 ul li {float:left; width:33.3%; max-width:544px; height:501px;  background-position:center bottom}


#section3 ul li a .txt{padding:100px 0px 0px 30%; }
#section3 ul li a h2 {font-size:46px; }
#section3 ul li a h3 {font-size:18px;  color:#fff;  font-weight:800; padding:10px 0px 10px}



#section3 ul li.active a .txt{padding:30px 0px 0px 90px; }
#section3 ul li.active a h2 {font-size:46px; }
#section3 ul li.active a h3 {font-size:18px; padding:10px 0px 10px}
#section3 ul li.active a p {font-size:14px; line-height:26px;}


#section3 ul li:hover a .txt{padding:30px 0px 0px 90px;  }
#section3 ul li:hover a h2 {font-size:46px; color:#0b1951; letter-spacing:-1px; }
#section3 ul li:hover a h3 {font-size:18px; font-weight:800; padding:10px 0px 10px}
#section3 ul li:hover a p {font-size:14px; line-height:26px; }

#section3 ul li:first-child { background:url('../img/main/section3_img01.png') no-repeat; background-size:320px 425px; background-position:center bottom; transition-duration:0.3s;}
#section3 ul li:nth-child(2) { background:url('../img/main/section3_img02.png') no-repeat; background-size:320px 425px; background-position:center bottom; transition-duration:0.3s;}
#section3 ul li:last-child { background:url('../img/main/section3_img03.png') no-repeat; background-size:320px 425px; background-position:center bottom; transition-duration:0.3s;}

#section3 ul li:first-child:hover { background:url('../img/main/section3_img01_on.png') no-repeat;  background-size:400px 434px;transition-duration:0.3s;}
#section3 ul li:nth-child(2):hover { background:url('../img/main/section3_img02_on.png') no-repeat;  background-size:400px 434px;  transition-duration:0.3s;}
#section3 ul li:last-child:hover { background:url('../img/main/section3_img03_on.png') no-repeat;  background-size:400px 434px;  transition-duration:0.3s;}

#section3 ul li.active:first-child { background:url('../img/main/section3_img01_on.png') no-repeat;  background-size:400px 434px;; transition-duration:0.3s;}
#section3 ul li.active:nth-child(2){ background:url('../img/main/section3_img02_on.png') no-repeat;  background-size:400px 434px;  transition-duration:0.3s;}
#section3 ul li.active:last-child { background:url('../img/main/section3_img03_on.png') no-repeat;  background-size:400px 434px;  transition-duration:0.3s;}
}


@media all and  (max-width:1100px) {
.nav_product {display:none}
#section0 {position: relative; height:100% !important;}
#section0 .fp-tableCell {height:100% !important;}
#section0 .inner {height:120vh}
#section0 {background:url('../img/main/section0_bgm.png') no-repeat; width:100%;background-size:cover; background-position:right bottom; position: relative; background-size:100%}


#section0 .bottom ul li h2:before {background:url('../img/main/section0_icon01w.png') no-repeat;} 
#section0 .bottom ul li:nth-child(2)  h2:before  {background:url('../img/main/section0_icon02w.png') no-repeat;} 
#section0 .bottom ul li:nth-child(3)  h2:before  {background:url('../img/main/section0_icon03w.png') no-repeat;} 
#section0 .bottom ul li:nth-child(4)  h2:before  {background:url('../img/main/section0_icon04w.png') no-repeat;} 

#section0 .left {display:none}
#section0 .right {float:none}
#section0 .right h2 {font-size:30px; line-height:38px; }
#section0 .right h3 {font-size:18px}
#section0 .right  p {padding-bottom:20px}


#section0 h2 {font-size:50px; line-height:50px;}
#section0 p {font-size:16px}
#section0 .left .tit_02  p {padding:100px 0px 20px}

#section0 .bottom {width:100%; bottom:30px; transform: translateX(-50%); left:50%; right:auto}
#section0 .bottom ul {display:block}
#section0 .bottom ul li {float:left; width:25%}

#section0 .bottom h3 {display:none  }
#section0 .bottom h3:after {display:none}

#section0 .bottom h2 {font-size:35px; color:#fff}
#section0 .bottom h2 span{font-size:22px;}
#section0 .bottom p {font-size:16px;; text-align:center; color:#fff}



#section2 .left {float:none; padding:100px 0px}
#section2 .left h2 {font-size:40px;  position: relative;   letter-spacing:-2px; z-index:0}
#section2 .left h2:after {position: absolute; background:url('../img/main/section2_img02.png') no-repeat; width:100%; height:29px; content:""; top:20px; left:-20px; display:block; z-index:-1}
#section2 .left h3 {font-size:26px; position: relative; padding:50px 0px 30px;  letter-spacing:-1px;}
#section2 .left p {font-size:16px; line-height:30px}
#section2 .left p b{font-size:20px; font-weight:600}
#section2 .right {position: relative; float:none; width:100%; transform:translateY( 0%); display: inline-block;}
#section2 .right .section2_bg {top:15px;}
#section2 .heart {position: absolute ; right:100px; top:-190px; transform: rotate( -90deg ) }
#section2 .heart img {max-height:initial; width:50%;}

.video_btn button#play {background: transparent; max-width:137px; position: absolute; left:50%;  top:50%;    transform: translate(-50%, -50%); z-index:10}
.video_btn button#play img {max-width:100px}
.video_btn button#pause {background:transparent; width:100%; height:100%;  max-height:706px; display:block; position: absolute; ; z-index:9}
.video_lay {position:initial; width:100%; max-height:98%;  top: 60px; right: 0; z-index:1}

video {border:2px solid #38ff00;
  width: 98%;
  max-height:100%;
  position: relative;
  top: 0;
  right: 0; 
  float: right;
}


#myVideo {
    position: relative;
    height:100%;
}




#section3 ul li {float:none; width:100%; max-width:100%; height:auto; margin-bottom:50px;  background-position:center bottom}

html { font-size:10px; }

#section3 ul li a .txt{padding:5% 0px 20% 13%; }
#section3 ul li a h2 {font-size:3rem; display:inline-block}
#section3 ul li a h3 {font-size:16px;  color:#fff;  font-weight:800; padding:0px 0px 0px 15px;  display:inline-block}

#section3 ul li.active a .txt{padding:5% 0px 20% 8%; }
#section3 ul li.active a h2 {font-size:3.5rem; }
#section3 ul li.active a h3 {font-size:18px; padding:0px 0px 0px 15px; color:#0b1951}
#section3 ul li.active a p {font-size:14px; line-height:26px;}


#section3 ul li.active:first-child a .txt{padding:15% 0px 20% 8%; }
#section3 ul li.active:first-child a h2 {font-size:3.5rem; }
#section3 ul li.active:first-child a h3 {font-size:18px; padding:0px 0px 0px 15px; color:#0b1951}
#section3 ul li.active:first-child a p {font-size:14px; line-height:26px;}

#section3 ul li:first-child:hover a .txt{padding:15% 0px 20% 8%; }
#section3 ul li:first-child:hover a h2 {font-size:3.5rem; }
#section3 ul li:first-child:hover a h3 {font-size:18px; padding:0px 0px 0px 15px; color:#0b1951}
#section3 ul li:first-child:hover a p {font-size:14px; line-height:26px;}

#section3 ul li:hover a .txt{padding:5% 0px 20% 8%;  }
#section3 ul li:hover a h2 {font-size:3.5rem; }
#section3 ul li:hover a h3 {font-size:18px; padding:0px 0px 0px 15px; color:#0b1951}
#section3 ul li:hover a p {font-size:14px; line-height:26px;}





#section3 ul li:first-child { background:url('../img/main/section3_img01_m.png') no-repeat; background-size:90% auto; background-position:center top; transition-duration:0.3s;}
#section3 ul li:nth-child(2) { background:url('../img/main/section3_img02_m.png') no-repeat; background-size:90% auto; background-position:center top; transition-duration:0.3s;}
#section3 ul li:last-child { background:url('../img/main/section3_img03_m.png') no-repeat; background-size:90% auto; background-position:center top; transition-duration:0.3s;}

#section3 ul li:first-child:hover { background:url('../img/main/section3_img01_m_on.png') no-repeat;  background-size:100% auto; transition-duration:0.3s;}
#section3 ul li:nth-child(2):hover { background:url('../img/main/section3_img02_m_on.png') no-repeat;  background-size:100% auto;  transition-duration:0.3s;}
#section3 ul li:last-child:hover { background:url('../img/main/section3_img03_m_on.png') no-repeat;  background-size:100% auto;  transition-duration:0.3s;}

#section3 ul li.active:first-child { background:url('../img/main/section3_img01_m_on.png') no-repeat;  background-size:100% auto; background-position:center top; transition-duration:0.3s;}
#section3 ul li.active:nth-child(2){ background:url('../img/main/section3_img02_m_on.png') no-repeat;  background-size:100% auto;  transition-duration:0.3s;}
#section3 ul li.active:last-child { background:url('../img/main/section3_img03_m_on.png') no-repeat;  background-size:100% auto;  transition-duration:0.3s;}
}

@media all and  (max-width:600px) {
#section3 ul li {margin-bottom:0px; margin-top:50px; background-position:center top !important;}
#section3 ul li a .txt{padding:0px 0px 20% 13%; margin-top:50px}
#section3 ul li.active a .txt{padding:0px 0px 20% 0px; }
#section3 ul li a h2 {display:block;  }
#section3 ul li a .txt br.block_txt {display:block}
#section3 ul li a h3 {display:block; padding:0px 0px 10px 0px}

#section3 ul li:hover a .txt{padding:0% 0px 20% 0; }
#section3 ul li.active:first-child a .txt{padding:8% 0px 20% 0; }

#section3 ul li.active:first-child a h3 {display:block; padding:0px 0px 10px 0px}
#section3 ul li.active a h3 {display:block; padding:0px 0px 10px 0px}
#section3 ul li:hover a h3 {display:block; padding:0px 0px 10px 0px}

#section3 ul li.active:first-child a h2 {padding-top:50%} 
#section3 ul li.active a h2 {padding-top:50%} 
#section3 ul li:hover  a h2 {padding-top:50%} 

}
.clear {clear:both}
.btn_new {color:#38ff00; background:#0b1951; border:1px solid #0b1951; font-size:18px; padding:5px 10px; display:inline-block}
.btn_new:hover {color:#0b1951; background:#38ff00; border:1px solid #38ff00; }


.tit h2  {font-size:40px; line-height:56px; font-weight:bold; letter-spacing:-1px; text-align:center; }
.tit p {font-size:20px; color:#fe443c; text-align:center;  }
br.mo {display:none}
.eng {font-family: 'Ginora Sans Regular',sans-serif;}
.eng_bold {font-family: 'Ginora Sans Bold',sans-serif; font-weight:800}
.eng_ob_bold {font-family: 'Ginora Sans Bold Oblique',sans-serif; font-weight:800}



.pro_tit h2  {font-size:32px; line-height:46px; color:#0b1951}
.pro_tit h2 span {font-size:18px; padding-left:5px; font-style:italic}
.pro_tit p {font-size:18px;}


/************************ 견적내기 *******************************************/



/* about 페이지 */


.sub_about_visual{width: 100%; height: 100vh; background-image: url(../img/company/about_visual_img.png); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
.inner_max{max-width: 1720px; margin: 0 auto;}

.sub_page .about h3 span{color: #666; position: relative;}
.sub_page .about h3 span::after{content: ""; width: 100%; height: 10px; z-index: -1; background-color: #0b1951; position: absolute; bottom: 0; left: 0; background-image: -webkit-linear-gradient(0deg, #1fd5df, #f32dfe);  -webkit-animation: text-ani 3s infinite linear; opacity: 0.3;}
.sub_page .about h4 {font-size:30px; font-weight: 600; word-break: keep-all; padding: 0px 0px 50px; } 

@-webkit-keyframes text-ani {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

/* about_01 */
#connect .gradient_bg{width: 100%; height: 100vh; position: fixed;  z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: -3;}
.sub_page .about_01 .inner_max{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;}
.sub_page .about_01 .inner_max .about_title{margin-right: 20px;}
.sub_page .about_01 .inner_max > p {padding:70px 0px 0; word-break: keep-all;}

/* about_02 , 심볼 무빙*/
.sub_page .about_02 .brand_ani {width: 70%; margin: 0 auto;}
@media screen and (max-width : 1200px) {
  .sub_page .about_02 .brand_ani {width: 90%;}
}
@media screen and (max-width : 768px) {
  .sub_page .about_02 .brand_ani {width: 100%;}
}

/* about_03 서비스 블랙bg*/
.sub_page .about_03{background: #000; padding: 200px 0 0; position: relative; z-index: -2;}
.sub_page .about_03 .inner_max{display: flex; flex-wrap: wrap; color: #fff;}
.sub_page .about_03 .inner_max h4{width: 220px;}
.sub_page .about_03 .inner_max ul{width: calc(100% - 220px);display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 300px;} 
.sub_page .about_03 .inner_max ul li{width: 50%; padding-left: 150px;}
.sub_page .about_03 .inner_max ul li span{color: #d3d3d3; margin: 5px 0 20px; display: inline-block; border-bottom: 1px solid #d3d3d3; box-sizing: border-box;}
.sub_page .about_03 .inner_max ul li:nth-child(2n){margin: 320px 0;}
.sub_page .about_03 .inner_max ul li:nth-child(3){margin-top: -120px;}

.sub_page .about_03 .inner_max ul li .s_txt{position: relative;}
.sub_page .about_03 .inner_max ul li .s_txt .s_icon{position: absolute; z-index: -1;}
.sub_page .about_03 .inner_max ul li:nth-child(1) .s_icon{top: -180px; left: -200px;}
.sub_page .about_03 .inner_max ul li:nth-child(2) .s_icon{bottom: -130px; right: 50px;}
.sub_page .about_03 .inner_max ul li:nth-child(3) .s_icon{top: -200px; right: 0px;}
.sub_page .about_03 .inner_max ul li:nth-child(4) .s_icon{bottom: -150px; left: -220px;}



/* about_04 company 전경 */
.sub_page .about_04 .company_img{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; width: 80%;}
.sub_page .about_04 .company_img > div:first-child{width: 80%; height: 560px; margin-right: 20px;}
.sub_page .about_04 .company_img > div:first-child img{width: 100%; height: 100%; object-fit: cover;}
.sub_page .about_04 .company_img > div:last-child{width: calc(20% - 20px);}
.sub_page .about_04 .company_img > div img{width: 100%;}
.sub_page .about_04 .company_word{padding: 15px 0;}
.sub_page .about_04 .company_word p{display: inline-block; color: #d6d6d6; font-style: italic;}
.sub_page .about_04 .company_word p span{font-style: normal;}
.sub_page .about_04 .company_word p:nth-child(2){margin-left: 15px;}
.sub_page .about_04 .company_word p:nth-child(3){margin-left: 40px;}

.sub_page .about_04 .inner_max::after{content: ""; display: block; clear: both; }
.sub_page .about_04 .swiper_about{width: 65%; float: right; overflow: hidden;}
/*.sub_page .about_04 .swiper_about .swiper-wrapper{transition-timing-function: linear;}*/
.sub_page .about_04 .swiper_about .swiper-slide{width: auto;}
.sub_page .about_04 .swiper_about .swiper-slide img{width: 100%;}



/* about_05 partners 기업 로고 */
.sub_page .about_05 .inner_max{display: flex; flex-wrap: wrap;}
.sub_page .about_05 .inner_max h4{width: 220px;}
.sub_page .about_05 .inner_max ul{width: calc(100% - 220px);display: flex; flex-wrap: wrap; margin-top: 200px;} 
.sub_page .about_05 .inner_max ul li{width: 25%; text-align: center; padding: 25px 10px; display: flex; align-items: center; justify-content: center;}
.sub_page .about_05 .inner_max ul li img{filter: grayscale(1); transition: .35s; max-width: 82%;}
.sub_page .about_05 .inner_max ul li:nth-child(9) img,
.sub_page .about_05 .inner_max ul li:nth-child(13) img,
.sub_page .about_05 .inner_max ul li:nth-child(26) img{max-width: 60%;}
.sub_page .about_05 .inner_max ul li:nth-child(10) img,
.sub_page .about_05 .inner_max ul li:nth-child(11) img,
.sub_page .about_05 .inner_max ul li:nth-child(12) img{max-width: 50%;}
.sub_page .about_05 .inner_max ul li:hover img{filter: grayscale(0)}


/* about_06 회사소개서 */
.sub_page .about_06 .inner_max{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
.sub_page .about_06 .inner_max p b{font-style: italic;}
.sub_page .about_06 .inner_max p br{display: none;}
.sub_page .about_06 .inner_max .file_down{border-bottom: 1px solid #000; box-sizing: border-box; display: block; height: 40px; overflow: hidden;}
.sub_page .about_06 .inner_max .file_down a{color: #000;}
.sub_page .about_06 .inner_max .file_down a span{display: block; transition: .45s; height: 40px;}
.sub_page .about_06 .inner_max .file_down:hover a span:nth-child(1){margin-top: -40px;}


/* about_07 location 돌아가는 gif */
.sub_page .about .location {padding:50px 0px;}
.sub_page .about .location ul {display: flex;justify-content: space-evenly;}
.sub_page .about .location ul li {color:#000; text-align:center; padding:0px}
.sub_page .about .location ul li img {height:76px;}
.sub_page .about .location ul li p{padding:0px 0px 0px; text-align:center; font-weight:300; word-break: keep-all;}
.sub_page .about .location ul li p a{color: #000;}
.sub_page .about .location ul li h3 {font-weight:800; padding:30px 0px 10px}



@media all and  (max-width:1800px){
  .inner_max{padding: 0 20px;}
}
@media all and  (max-width:1600px){
  .sub_page .about_03 .inner_max h4{width: 100%;}
  .sub_page .about_03 .inner_max ul{width: 100%; margin-top: 160px;}


  .sub_page .about_05 .inner_max h4{width: 100%;}
  .sub_page .about_05 .inner_max ul{width: 100%; display: flex; flex-wrap: wrap; margin-top: 100px;} 

  .sub_page .about_06 .inner_max{flex-direction: column; align-items: center;}
  .sub_page .about_06 .inner_max p{margin-left: -120px;}
  .sub_page .about_06 .inner_max .file_down{margin-top: 60px;}
}
@media all and  (max-width:1200px){
  .sub_page .about_03 .inner_max ul li{padding-left: 80px;}

  .sub_page .about_04 .company_img{width: 90%;}
  .sub_page .about_04 .company_img > div:first-child{height: 500px;}

  .sub_page .about_05 .inner_max ul li{width: 33.3333%;}
}
@media all and  (max-width:980px) {
  /* .sub_page .about_04 .company_word p{display: block;} */

  .sub_page .about_06 .inner_max p{font-size: 38px; margin-left: -80px;}
}
@media all and  (max-width:920px) {
.sub_page .about .location ul li img {height:56px;}
.sub_page .about .location ul li:nth-child(2) {padding:0px 20px}
.sub_page .about .location ul li p {font-size:14px; line-height:24px}


.sub_page .about_03 .inner_max ul{flex-direction: column; align-items: center;}
.sub_page .about_03 .inner_max ul li{width: 75%;}
.sub_page .about_03 .inner_max ul li:nth-child(1n+2){margin-top: 200px;}
.sub_page .about_03 .inner_max ul li:nth-child(2n){margin: 200px 0; padding-left: 50px;}
.sub_page .about_03 .inner_max ul li:nth-child(1) .s_icon{top: -180px; left: -180px;}
.sub_page .about_03 .inner_max ul li:nth-child(2) .s_icon{bottom: -130px; right: 0px;}
.sub_page .about_03 .inner_max ul li:nth-child(3) .s_icon{top: -200px; right: 0px;}
.sub_page .about_03 .inner_max ul li:nth-child(4) .s_icon{bottom: -150px; left: -180px;}



}
@media all and  (max-width:768px){
  .sub_page .about_03 .inner_max ul li{padding-left: 0; width: 85%;}
  .sub_page .about_03 .inner_max ul li .s_icon{width: 220px;}
  .sub_page .about_03 .inner_max ul li:nth-child(2n){padding-left: 20px;}
  .sub_page .about_03 .inner_max ul li:nth-child(1) .s_icon{top: -180px; left: -80px; width: 180px;}
  .sub_page .about_03 .inner_max ul li:nth-child(2){margin-bottom: 60px;}
  .sub_page .about_03 .inner_max ul li:nth-child(2) .s_icon{bottom: auto; top: -100px; right: 0px; width: 170px;}
  .sub_page .about_03 .inner_max ul li:nth-child(3) .s_icon{top: -140px; right: 20px;  width: 170px;}
  .sub_page .about_03 .inner_max ul li:nth-child(4) .s_icon{bottom: -160px; left: -60px;  width: 160px;}

  .sub_page.space{margin-top: 100px !important;}
  .sub_page .about_04 .company_img{width: 100%;}
  .sub_page .about_04 .company_img div:first-child{height: 250px; width: 70%; margin-right: 10px;}
  .sub_page .about_04 .company_img > div:last-child{width: calc(30% - 10px); margin-top: 20px;}

  .sub_page .about_05 .inner_max ul{margin-top: 50px;}
  .sub_page .about_05 .inner_max ul li{width: 50%;}

  .sub_page .about_06 .inner_max p{font-size: 30px; margin-left: -50px;}
  .sub_page .about_06 .inner_max .file_down{margin-top: 40px;}

  .sub_page.space::before{height: 130px;}
}
@media all and  (max-width:640px) {
.sub_page .about h3 br{display: none;}

.sub_page .about .location ul {flex-direction: column;}
.sub_page .about .location ul li h3 {padding:20px 0px 5px}
.sub_page .about .location ul li:nth-child(2) {padding:40px 0px}

.sub_page .about_03 .inner_max ul li .s_txt p br{display: none;}

.sub_page .about_04 .company_word p{font-size: 25px;}
.sub_page .about_04 .company_word p span{font-size: 28px;}

.sub_page .about_06 .inner_max p{font-size: 25px;}
}
@media all and  (max-width:520px) {
    .sub_page .about_06 .inner_max p br{display: block;}
}