@charset "UTF-8";
@import url(./swiper.min.css);
.visualWrap {
  position: relative;
}

.visualWrap .visual {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.visualWrap h1 {
  position: absolute;
  font-weight: 700;
  top: 107px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 22;
  font-size: 25px;
  color: #fff;
  white-space: nowrap;
}

.visual.vis-cs-1 {
  height: 215px;
  background-image: url(../images/cs/vis_cs_1.jpg);
}

/*
**************************************************************************
function
**************************************************************************
*/
/* 컬러 */
/* 폰트 */
/* 버튼 */
.link {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #ff6600;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 50px;
  margin: 0 25px;
  border: 1px solid #ff6600;
  border-radius: 25px;
  margin-top: 35px;
  font-weight: 700;
}

.link span {
  display: inline-block;
  position: relative;
}

.link span::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: url(../images/gate/svg/linkArrow2@14x14.svg) 0 0/contain no-repeat;
  position: absolute;
  right: -17px;
  top: 4px;
}

/* override */
a:focus,
a:hover {
  text-decoration: none;
}

i {
  font-style: normal;
}

body {
  color: #000;
  line-height: 1.44;
}

body.opened-menu {
  position: fixed;
  left: 0;
  width: 100vw;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

header {
  position: fixed;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1000;
  height: 66px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

header h1 {
  position: absolute;
  left: 25px;
  top: 16px;
  z-index: 11;
}

header h1 svg {
  width: 114px;
  height: 33px;
}

header h1 svg * {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

header h1 svg .st0 {
  fill: #FBB584;
}

header h1 svg .st1 {
  fill: #F89B6C;
}

header h1 svg .st2 {
  fill: #F37321;
}

header h1 svg .st3 {
  fill: #FFFFFF;
}

.ham-btn {
  display: inline-block;
  width: 32px;
  height: 20px;
  position: absolute;
  right: 25px;
  top: 22.5px;
  z-index: 15;
}

.ham-btn span {
  display: block;
  width: 32px;
  height: 1.5px;
  background-color: #fff;
  position: absolute;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.ham-btn .top {
  top: 0;
}

.ham-btn .mid {
  top: 50%;
}

.ham-btn .btm {
  top: 100%;
}

.opened-menu .ham-btn span {
  background-color: #000;
}

.opened-menu .ham-btn .top {
  top: 50%;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.opened-menu .ham-btn .mid {
  opacity: 0;
}

.opened-menu .ham-btn .btm {
  top: 50%;
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
}

.menu-box {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  width: 100vw;
  background-color: #fff;
  z-index: 10;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 75px;
  padding-bottom: 140px;
  -webkit-transition: right 0.4s;
  transition: right 0.4s;
}

.menu-box .inner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  padding: 0 35px;
  overflow-y: scroll;
}

.menu-box .footer {
  color: #888;
  font-size: 13px;
  font-weight: 700;
  display: block;
  position: absolute;
  bottom: 30px;
  left: 35px;
  white-space: nowrap;
}

.menu-box.on {
  right: 0;
}

.menu-box .btn_opensourcing {
    position: absolute;
    bottom: 90px;
    width:100%;
}
.menu-box .btn_opensourcing:before {
    position: absolute;
    top:50%;
    right:35px;
    display: block;
    width: 10px;
    height: 18px;
    background: url(../images/common/ico-arrow-right-white.png) no-repeat center;
    background-size: contain;
    content: "";
    transform: translateY(-50%);
}

.menu-box .btn_opensourcing a {
  display: block;
  font-size: 22px;
  font-weight: 700;
  padding: 0 35px;
  height: 50px;
  line-height: 50px;
  color:#fff;
  background: #f76300;
  box-sizing: border-box;
}

.nation {
  font-family: "myriad-pro";
  font-weight: 700;
  font-size: 0;
  color: #bbb;
  margin-top: 24px;
}

.nation a {
  font-size: 16px;
  display: inline-block;
}

.nation a + a {
  margin-left: 24px;
}

.nation .on {
  color: #000;
}

nav {
  margin-top: 70px;
}

nav > span {
  display: block;
}

nav > span > a {
  font-size: 24px;
  font-weight: 700;
  position: relative;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

nav > span + span {
  margin-top: 36.5px;
}

nav .more > a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background-color: #000;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  right: 0;
}

nav .more > a::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 14px;
  background-color: #000;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  right: 6px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

nav a.on {
  color: #ff6600;
}

nav a.on::after {
  background-color: #ff6600;
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
}

nav .exlink > a::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url(../images/gate/linkArrow@24x24.png) 0 0/contain no-repeat;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* 2뎁스 */
nav > span > ul {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  transition: height 0.4s;
}

nav > span > ul > li {
  margin-top: 21px;
}

nav > span > ul > li > a {
  font-size: 18px;
}

/* 3뎁스 */
nav > span > ul > li > ul {
  background-color: #fafafa;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 25px;
  margin-top: 12.5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

nav > span > ul > li > ul li {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 50%;
  margin-top: 11px;
}

nav > span > ul > li > ul li:first-child,
nav > span > ul > li > ul li:nth-child(2) {
  margin-top: 0;
}

nav > span > ul > li > ul li:nth-child(even) {
  padding-left: 20px;
}

nav > span > ul > li > ul a {
  font-size: 15px;
}

article {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 이미지 텍스트 */
.img-txt {
  display: inline-block;
  text-indent: -9999px;
  background-position: 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* 한화솔루션(주) */
.t1 {
  width: 177px;
  height: 14px;
  background-image: url(../images/gate/svg/hwSolution.svg);
  -webkit-transform: translateY(-1.5px);
          transform: translateY(-1.5px);
}

.t1_1 {width: 114px; height: 10px; background-image: url(../images/gate/text_con_solutions1.png); margin-bottom:3px;}

/* 한화 솔루션 */
.t1-1 {
  width: 89px;
  height: 18px;
  background-image: url(../images/gate/svg/t1-1.svg);
}

/* 한화케미칼(주) */
.t2 {
  width: 174px;
  height: 17px;
  background-image: url(../images/gate/svg/hwChem.svg);
  -webkit-transform: translateY(-1.5px);
          transform: translateY(-1.5px);
}

.t2-1 {
  width: 73px;
  height: 18px;
  background-image: url(../images/gate/svg/t2-1.svg);
}

/* 한화큐셀(주) */
.t3 {
  width: 171px;
  height: 17px;
  background-image: url(../images/gate/svg/hwQM.svg);
}

.t3-1 {
  width: 88.9px;
  height: 18px;
  background-image: url(../images/gate/svg/t3-1.svg);
}

/* 케미칼 */
.t4 {
  width: 26px;
  height: 13.5px;
  background-image: url(../images/gate/svg/chemical.svg);
}

/* 큐셀 */
.t5 {
  width: 40.5px;
  height: 13.5px;
  background-image: url(../images/gate/svg/qcell.svg);
}

/* 첨단소재 */
.t6 {
  width: 51px;
  height: 13.5px;
  background-image: url(../images/gate/svg/material_1260.svg);
}

/* 한화케미칼 */
.t7 {
  width: 77.5px;
  height: 12px;
  background-image: url(../images/gate/svg2/EN_text_con_chemical_2.svg);
  -webkit-transform: translateY(-0.8px);
          transform: translateY(-0.8px);
}


.t7-1 {
  width: 30px;
  height: 15px;
  background-image: url(../images/gate/svg2/CN_text_con_chemical_1.svg);
}

/* 한화큐셀 */
.t8 {
  width: 75.5px;
  height: 15px;
  background-image: url(../images/gate/svg2/EN_text_con_qcells_1.svg);
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.t8-1 {
  width: 47px;
  height: 15px;
  background-image: url(../images/gate/svg2/CN_text_con_qcells_1.svg);
}

/* 한화큐셀 & 첨단소재 큐셀 */
.t9 {
  width: 64.5px;
  height: 11.5px;
  background-image: url(../images/gate/svg2/EN_text_con_qcells_2.svg);
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.t9-1 {
  width: 40px;
  height: 13px;
  background-image: url(../images/gate/svg2/CN_text_con_qcells_3.svg);
}

/* 한화첨단 소재 */
.t10 {
  width: 163px;
  height: 11px;
  background-image: url(../images/gate/svg2/EN_text_con_advanced_materials_1.svg);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.t10-1 {
  width: 60px;
  height: 15px;
  background-image: url(../images/gate/svg2/CN_text_con_advanced_materials_1.svg);
}

.t10-2 {
  width: 60px;
  height: 15px;
  background-image: url(../images/gate/svg2/CN_text_con_advanced_materials_1.svg);
}

/* 한화큐셀 첨단소재/첨단소재 */
.t11 {
  width: 151.5px;
  height: 10px;
  background-image: url(../images/gate/svg2/EN_text_con_advanced_materials_2.svg);
  -webkit-transform: translateY(-0.8px);
          transform: translateY(-0.8px);
}

.t11-1 {
  width: 52px;
  height: 13px;
  background-image: url(../images/gate/svg2/CN_text_con_advanced_materials_3.svg);
}

/* 글로벌 케미칼 */
.t12 {
  width: 26px;
  height: 12.5px;
  background-image: url(../images/gate/svg/chemical2.svg);
}

/* 글로벌 큐셀 */
.t13 {
  width: 39.5px;
  height: 12.5px;
  background-image: url(../images/gate/svg/qcell2.svg);
}

/* 글로벌 첨단소재 */
.t14 {
  width: 46.5px;
  height: 14.5px;
  background-image: url(../images/gate/svg/material2_1260.svg);
}

/* 한화첨단소재 */
.t15 {
  width: 274px;
  height: 15px;
  background-image: url(../images/gate/svg/hwadvancedmaterials.svg);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.t15-1 {
  width: 26px;
  height: 13px;
  background-image: url(../images/gate/svg2/CN_text_con_chemical_3_666.svg);
}

/* 한화솔루션/케미칼 */
.t16 {
  width: 67px;
  height: 10px;
  background-image: url(../images/gate/svg2/EN_text_con_chemical_2_666.svg);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.t16-1 {
  width: 75px;
  height: 15px;
  background-image: url(../images/gate/svg/t16-1.svg);
  opacity: 0.5;
}

/* 한화 솔루션 */
.t17 {
  width: 156px;
  height: 12px;
  background-image: url(../images/gate/svg/t17.svg);
  opacity: 0.5;
}

.t17-1 {
  width: 109px;
  height: 18px;
  background-image: url(../images/gate/svg/t17-1.svg);
}

.t18 {
  width: 126px;
  height: 9.5px;
  background-image: url(../images/gate/svg/t18.svg);
}

/* 갤러리아 */
.t19 {
  width: 57px;
  height: 13.5px;
  background-image: url(../images/gate/svg/galleria.svg);
}

.t19-1 {
  width: 49.5px;
  height: 12.5px;
  background-image: url(../images/gate/svg/galleria_1260.svg);
}

.t19-2 {
  width: 63.5px;
  height: 18.5px;
  background-image: url(../images/gate/svg/galleria_333.svg);
  margin-right: 2px;
}

.t19-3 {
  width: 54.5px;
  height: 16.5px;
  background-image: url(../images/gate/svg/galleria_666.svg);
  margin-right: 2px;
}

.t19-4 {
  width: 74.5px;
  height: 20.5px;
  background-image: url(../images/gate/svg/galleria_000.svg);
}

.t19-5 {
  width: 73.5px;
  height: 17.5px;
  background-image: url(../images/gate/svg2/EN_galleria_light_333.svg);
}

/* 도시개발 */
.t20 {
  width: 53px;
  height: 14.5px;
  background-image: url(../images/gate/svg/hcd.svg);
}

.t20-1 {
  width: 60px;
  height: 15px;
  background-image: url(../images/gate/svg2/CN_text_con_hcd.svg);
}

.t20-2 {
  width: 148px;
  height: 17px;
  background-image: url(../images/gate/svg2/EN_text_con_hcd.svg);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
              margin-top: 8px;
}

.t20-3 {
  width: 48.5px;
  height: 12.5px;
  background-image: url(../images/gate/svg/hcd_1260.svg);
}

.t20-4 {
  width: 60.5px;
  height: 16.5px;
  background-image: url(../images/gate/svg2/CN_hcd_666.svg);
}

/* 상단영역 */
.intro-box {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  text-align: center;
}

.intro-box .grid-box {
  width: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 73px;
  text-align: center;
}

.swiper-pagination-bullet {
  position: relative;
  width: 6px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0);
  opacity: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 50%;
  margin: 0 8px !important;
  outline: none;
  background-color: #fff;
}

.swiper-pagination-bullet:before {
  position: absolute;
  content: '';
  display: block;
  opacity:0;
  top: 50%;
  left: 50%;
  height: 14px;
  width: 14px;
  border: 1px #fff solid;
  transition: all 0.3s;
  border-radius: 50%;
  outline: none;
  transform: translate(-50%, -50%);
}
.swiper-pagination-bullet-active:before {
  opacity: 1;
}

.swiper-container-horizontal > .swiper-scrollbar {
  left: 71.5px;
  right: 6.66667vw;
  width: auto;
  background: rgba(229, 229, 229, 0.3);
  bottom: 7px;
}

.swiper-scrollbar-drag {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.15);
}

.swiper-pagination-fraction {
  width: auto;
  bottom: 0;
  left: 25px;
  font-size: 12px;
}

.swiper-pagination-fraction .swiper-pagination-current {
  font-weight: 700;
}

.black .swiper-pagination-bullet {
  background-color: #000;
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: auto;
  top: auto;
  bottom: 50%;
  left: 70px;
  -webkit-transform: none;
          transform: none;
  margin-bottom: 92px;
}

.swiper-slide .img-box {
    display: block;
    padding:0 25px;
}

.swiper-slide .img-box img {
    width: 100%;
}

.white-box {
  background-color: #fff;
  padding-top: 14.13333vw;
  padding-bottom: 14.13333vw;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 25px;
}

.scdw {
  position: absolute;
  -webkit-transform: rotateZ(-90deg);
          transform: rotateZ(-90deg);
  z-index: 1;
  left: 42px;
  top: 50%;
  margin-top: 80px;
  font-weight: 700;
  font-size: 12px;
}

.txt-box {
  margin-top: -55px;
}

.video-container + .txt-box {
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.txt-box p {
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.444444444;
}

.txt-box em {
  color: #ff6600;
}

.txt-box .description {
  font-size: 14px;
  font-weight: 400;
  display: block;
  margin-top: 24px;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.video-container video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
}

.link-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 1;
  margin-top: -55px;
  margin-right: 25px;
  margin-left: 25px;
}

.link-box .headline {
  background-color: #ff6600;
  height: 55px;
  font-size: 18px;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'myriad-pro';
  color: #fff;
}

.link-box .headline span {
  display: inline-block;
  margin-top: 2.5px;
  padding-right: 0;
}

.link-box > div {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 16px 1px 34.04px 11.96px rgba(0, 0, 0, 0.09);
          box-shadow: 16px 1px 34.04px 11.96px rgba(0, 0, 0, 0.09);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.link-box a {
  display: inline-block;
  font-size: 12px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  height: 60px;
  white-space: nowrap;
}

.link-box a + a ::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 15px;
  position: absolute;
  left: -14px;
  top: 50%;
  background-color: rgba(238, 238, 238, 0.8);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.link-box a:nth-child(2) ::before  {
  left: -19px;
}

.link-box a:nth-child(4) ::before  {
  left: -11px;
}

.link-box a:nth-child(5) ::before  {
  left: -9px;
}

.link-box a span {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 0.55s;
  transition: all 0.55s;
  z-index: 1;
}

.link-box span {
  display: inline-block;
  padding-right: 11.5px;
}

.link-box > div span::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: url(../images/gate/svg/linkArrow@14x14.svg) 0 0/contain no-repeat;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -3.5px;
}

.hw-chemical {
  padding-top: 55px;
  padding-bottom: 55px;
  position: relative;
}

.hw-chemical .swiper-container {
  margin-top: 40px;
  padding-bottom: 33.5px;
}

.hw-chemical .swiper-slide {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: 8px 0px 20.01px 2.99px rgba(0, 0, 0, 0.05);
          box-shadow: 8px 0px 20.01px 2.99px rgba(0, 0, 0, 0.05);
}

.hw-chemical .detail-lists .detail {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 151px;
}


.hw-galleria {
  padding-top: 55px;
  padding-bottom: 55px;
  position: relative;
}

.hw-galleria .swiper-container {
  margin-top: 40px;
  padding-bottom: 33.5px;
}

.hw-galleria .swiper-slide {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: 8px 0px 20.01px 2.99px rgba(0, 0, 0, 0.05);
          box-shadow: 8px 0px 20.01px 2.99px rgba(0, 0, 0, 0.05);
}

.hw-galleria .detail-lists .detail {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 151px;
}


.hw-hcd {
  background-color: #f9f9f9;
  position: relative;
  padding-top: 55px;
  padding-bottom: 55px;
}

.hw-hcd .swiper-container {
  margin-top: 40px;
  padding-bottom: 33.5px;
}

.hw-hcd .swiper-slide {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.hw-hcd .detail-lists .detail {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 151px;
}


.about-company {
  padding: 0 25px;
}

.about-company h2 {
  font-size: 23px;
  color:#ff6600;
}

.about-company h2 img {
  vertical-align: top;
}

.about-company p {
  font-size: 23px;
  font-weight: 700;
  margin-top: 24px;
  line-height: 1.3;
}

.about-company .description {
  font-size: 15px;
  letter-spacing: 0;
  margin-top: 9px;
  display: inline-block;
  line-height: 1.7;
  color: #333;
}

.about-company.center {
  text-align: center;
}

.detail-lists li img {
  width: 100%;
}

.detail-lists .detail {
  padding: 20px 20px 20px 20px;
  letter-spacing: 0;
}

.detail-lists .detail strong {
  font-size: 18px;
  font-weight: 700;
}

.detail-lists .detail p {
  margin-top: 6px;
  line-height: 1.6;
  letter-spacing: 0;
  font-size: 13px;
  color: #666;
}

.detail-lists.ty2 {
  color: #000;
  text-align: center;
  margin-top: 35px;
}

.detail-lists.ty2 .detail {
  padding-top: 26px;
}

.detail-lists.ty2 .detail p {
  margin-top: 6px;
  color: #666;
}

.detail-lists2 {
  color: #fff;
}

.detail-lists2 li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.detail-lists2 li .column-box:last-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.detail-lists2 strong {
  font-family: 'myriad-pro';
  font-size: 18px;
  text-transform: uppercase;
}

.detail-lists2 .column-box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.detail-lists2 .column-box img {
  width: 100%;
  height: 100%;
}

.detail-lists2 .column-box > div {
  padding-left: 25px;
  padding-bottom: 21px;
}

.detail-lists2 .column-box p {
  margin-top: 5.5px;
  line-height: 1.64;
  font-size: 13px;
  letter-spacing: 0;
}

.util {
  padding: 0 25px;
  margin-top: 14px;
}

.util .link {
  font-weight: 700;
  font-size: 18px;
  display: inline-block;
  position: relative;
}

.util .link::after {
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-left: 12px;
  vertical-align: middle;
  background: url(../images/gate/linkArrow@25x25.png) 0 0/contain no-repeat;
}

.util .link span {
  vertical-align: middle;
  position: relative;
  display: inline-block;
}

.util .link span::before {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background-color: #000;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
  position: absolute;
  left: 0;
  bottom: 0;
}

.util .link i {
  position: relative;
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.util .link:hover i {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

.util .link:hover span::before {
  width: 100%;
}

/* sns 아이콘 */
.sns li {
  position: relative;
  height: 40px;
  width: 40px;
  display: inline-block;
}

.sns li + li {
  margin-top: 10px;
}

.sns a {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ededed;
  white-space: nowrap;
  font-weight: 700;
  font-size: 12px;
  position: absolute;
  right: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
}

.sns a::before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.sns span {
  position: absolute;
  left: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 0;
}

.sns .tstory {
  color: #ff6600;
}

.sns .svg-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

.sns .twitter .svg-box svg {
  width: 18px;
}

.sns .tstory .svg-box {
  width: 16px;
  height: 16px;
}

.sns svg * {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sns .naverpost {
  color: #00c73c;
}

.sns .naverpost .svg-box {
  width: 12px;
  height: 18px;
}

.sns .facebook {
  color: #0075fb;
}

.sns .facebook .svg-box {
  width: 7px;
  height: 16px;
}

.sns .galleriaCI {
  color: #8c00ff;
}

.sns .galleriaCI .svg-box {
  width: 30px;
  height: 18px;
}

.sns .instagram {
  color: #ff00c8;
}

.sns .instagram .svg-box {
  width: 18.5px;
  height: 20px;
}


.sns .youtube {
  color: #ff0000;
}

.sns .youtube .svg-box {
  width: 18.5px;
  height: 13px;
}

.util .sns .svg-box.location {
  margin-top:2px;
}

.sns.ty2 a {
  border-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0);
}

.sns.ty2 a::before {
  display: none;
}

.sns.ty2 svg * {
  fill: #fff;
}

.site_link {overflow: hidden; margin-top: 30px;}
.site_link li {float: left; position: relative; padding-right: 18px; margin-right: 20px}
.site_link li::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  background: url(../images/gate/icon_orange_link.png) 0 0 / cover no-repeat;
  position: absolute;
  right: 0;
  top: 8px;
  z-index: 1;
}

.hw-qcell {
  padding: 60px 0;
  text-align: center;
  position: relative;
  background: url(../images/gate/bgqcell.jpg) center 0/contain no-repeat;
}

.hw-qcell .about-company p {
  color: #fff;
}

.hw-qcell .about-company .description {
  color: #fff;
  opacity: 0.5;
}

.hw-qcell .swiper-container {
  padding-bottom: 20px;
}

.hw-qcell .swiper-slide {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 25px;
}

.hw-qcell .util {
  color: #fff;
}

.hw-qcell .util .link span::before {
  background-color: #fff;
}

.hw-qenergy {
  padding: 60px 0;
  text-align: center;
  position: relative;
  background: #fff;
}

.hw-qenergy .about-company p {
  color: #000;
}

.hw-qenergy .about-company .description {
  color: #333;
  /*opacity: 0.5;*/
}

.hw-qenergy .swiper-container {
  padding-bottom: 20px;
}

.hw-qenergy .swiper-slide {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 25px;
}

.hw-qenergy .util {
  color: #fff;
}

.hw-qenergy .util .link span::before {
  background-color: #fff;
}

.hw-materials {
  background-color: #f9f9f9;
  position: relative;
  padding-top: 55px;
  padding-bottom: 55px;
}

.hw-materials .swiper-container {
  padding-bottom: 40px;
  margin-top: 35px;
}

.hw-materials .util {
  top: 226px;
}

.global-network {
  padding-top: 60px;
  text-align: center;
  background: #0d1624 url(../images/gate/globalbg.jpg) 0 0/100% auto no-repeat;
  position: relative;
  overflow: hidden;
}

.global-network h2 {
  font-size: 24px;
}

.global-network .about-company {
  color: #fff;
}

.global-network .about-company .description {
  color: rgba(255, 255, 255, 0.5);
  margin-top: 36px;
}

.earth-wrap {
  position: relative;
  z-index: 0;
  margin-top: -27px;
}

.earth {
  display: inline-block;
  width: 375px;
  height: 256px;
}

.earth img {
  position: relative;
  width: 100%;
}

.links-box {
  font-size: 0;
  height: 55px;
  margin: 0 25px;
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #53616d;
  position: relative;
  z-index: 1;
}

.links-box a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 11px;
  color: #fff;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  width: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.links-box a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: url(../images/gate/svg/iconArrow@14x14.svg) 0 0/contain no-repeat;
  margin-left: 4.5px;
  margin-top: -1px;
}

.links-box a + a {
  border-left: 1px solid #53616d;
}

footer {
  display: block;
  position: relative;
  padding-bottom: 30px;
  padding-top: 6px;
}

footer .license {
  font-weight: 700;
  font-size: 12px;
  color: #666;
  margin: 0 25px;
  margin-top: 20px;
}

.familysite {
  height: 41.5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #fff;
  border-bottom: 1px solid #000;
  margin: 0 25px;
  position: relative;
  overflow: hidden;
}

.familysite::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 2.5px;
  background: url(../images/gate/iconArrow@10x5.png) 0 0/contain no-repeat;
  position: absolute;
  right: 5px;
  top: 22px;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}

.familysite > span {
  text-transform: uppercase;
  font-family: 'myriad-pro';
  font-weight: 800;
  font-size: 12px;
  position: absolute;
  left: 0;
  top: 16.5px;
}

.familysite > .scroll {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 0;
  margin-top: 40px;
}

.familysite > .scroll::before {
  content: '';
  display: block;
  height: 1px;
  background-color: #e5e5e5;
}

.familysite .inner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow-y: scroll;
}

.familysite ul {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow-y: scroll;
}

.familysite a {
  font-size: 12px;
  font-family: 'myriad-pro';
  color: #333;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.familysite li + li {
  margin-top: 13px;
}

.familysite.on::after {
  -webkit-transform: translateY(-50%) rotateZ(-180deg);
          transform: translateY(-50%) rotateZ(-180deg);
}

/* gnb 색상변경 */
header.white h1 svg .st3 {
  fill: #fff;
}

header.black h1 svg .st3 {
  fill: #000;
}

header.black .ham-btn span {
  background-color: #000;
}

header.bgwhite {
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

body.opened-menu h1 svg .st3 {
  fill: #000;
}

/* 진입 에니메이션 */
.intro-box .txt-box,
.about-company {
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  opacity: 0;
  -webkit-transition: opacity 1.5s, -webkit-transform 1.5s;
  transition: opacity 1.5s, -webkit-transform 1.5s;
  transition: transform 1.5s, opacity 1.5s;
  transition: transform 1.5s, opacity 1.5s, -webkit-transform 1.5s;
}

.links-box {
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  opacity: 0;
  -webkit-transition: opacity 1.5s, -webkit-transform 1.5s;
  transition: opacity 1.5s, -webkit-transform 1.5s;
  transition: transform 1.5s, opacity 1.5s;
  transition: transform 1.5s, opacity 1.5s, -webkit-transform 1.5s;
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}

.ani .txt-box,
.ani .about-company,
.ani .links-box {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(1);
            transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1.15);
            transform: translateX(-50%) scale(1.15);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(1.15);
            transform: translateX(-50%) scale(1.15);
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(1);
            transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1.15);
            transform: translateX(-50%) scale(1.15);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(1.15);
            transform: translateX(-50%) scale(1.15);
  }
}
/*# sourceMappingURL=gate.css.map */