/* common layout */
html, body{width: 100%; height: 100%; letter-spacing: -0.5px;}
html, body *{font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; }
a{text-decoration: none;}
.wrap{overflow: hidden; position: relative; width: 100%; min-width: 1280px;}
.inner{position: relative; width: 100%; width: 1280px; margin: 0 auto; }
.inner:after{content: ""; display: block; clear: both;}
.clearfix:after{content: ""; display: block; clear: both;}
.container{background: #fff;}

/* header */
.header{overflow: hidden; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; min-width: 1280px; height: 121px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); background: transparent; transition: background 0.3s}

.header_top_nav{background: transparent; transition: background 0.3s}
.header_top_nav .inner{display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 120px; transition: height 0.3s}
.header_top_nav .inner:after{display: none;}

.header_top_nav .logo{width: 117px; height: 39px; font-size: 0; background: url("../../image/logo_wh.png") no-repeat; background-size: cover; transition: width 0.3s, height 0.3s, background 0.3s}
.header_top_nav .logo a{display: block; width: 100%; height: 100%;}

.header_top_nav .main_nav{display: flex; align-items: center; position: relative; height: 120px;}
.header_top_nav .main_nav .main_nav_item{display: inline-block; vertical-align: middle; margin-left: 48px; height: 100%; line-height: 120px; transition: line-height 0.3s}
.header_top_nav .main_nav .main_nav_item:first-of-type{margin-left: 0;}
.header_top_nav .main_nav .main_nav_item>a{color: rgba(255, 255, 255, 0.8); font-weight: 700; transition: color 0.3s}
.header_top_nav .m_main_nav{display: none;}

.header_top_nav .sub_nav{overflow: hidden; position: absolute; top: 100%; left: 0; z-index: 100; height: 0; transition: height 0.3s}
.header_top_nav .sub_nav .sub_nav_list{display: flex; align-items: center; justify-content: left;}
.header_top_nav .sub_nav.sub01{padding-left: 13px;}
.header_top_nav .sub_nav.sub02{padding-left: 70px;}
.header_top_nav .sub_nav.sub03{padding-left: 110px;}
.header_top_nav .sub_nav.sub04{left: initial; right: 0; padding-right: 118px;}
.header_top_nav .sub_nav.sub05{left: initial; right: 0; padding-right: 7px;}
.header_top_nav .sub_nav .sub_nav_list .sub_nav_item{}
.header_top_nav .sub_nav .sub_nav_list .sub_nav_item+.sub_nav_item{margin-left: 60px;}
.header_top_nav .sub_nav .sub_nav_list .sub_nav_item a{color: #949494; font-weight: 500; transition: color 0.3s}

.btn_m_nav{display: none;}

/* header active action */
.header.active{border-bottom: 1px solid #f0f0f0; background: #fff}
.header.active .header_top_nav .logo{background: url("../../image/logo_co.png") no-repeat;}
.header.active .header_top_nav .main_nav .main_nav_item>a{color: #303030;}

/* footer */
.footer{padding: 25px 0; background: #2b2b2b;}
.footer address{color: #939393; font-size: 12px; font-weight: 400; text-align: center; line-height: 18px;}
.move_homepage{display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%)}
.move_homepage .box{padding: 0 16px; font-size: 0; line-height: 36px; border: 1px solid #3d3d3d; border-radius: 6px;}
.move_homepage .box i{display: inline-block; vertical-align: middle; width: 16px; height: 21px;}
.move_homepage .box i img{display: block; width: 100%;}
.move_homepage .box span{display: inline-block; vertical-align: middle; margin-left: 4px; color: #939393; font-size: 12px;}

/* common design component */
.title{}
.title.page{color: #171717; font-size: 36px; font-weight: 500; text-align: center}
.title.semi_title{color: #171717; font-size: 36px; font-weight: 600; line-height: 1.16;}
.txt{color: #171717; font-size: 20px; font-weight: 400; line-height: 1.4;}
.main_txt{color: #171717; font-size: 36px; font-weight: 600; line-height: 1.16;}

.content{position: relative;}

.visual_box{height: 600px;}
.visual_box .visual_txt{padding-top: 246px; color: #fff; font-size: 28px; font-weight: 500; letter-spacing: -1px; line-height: 1.2}
.visual_box .visual_txt .visual_title{display: block; margin-bottom: 28px; font-size: 60px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; text-transform: uppercase;}

.tab_box{display: flex; align-items: center; justify-content: left; position: absolute; z-index: 100; bottom: 100%; left: 0; right: 0; height: 80px; background: rgba(0, 0, 0, 0.3)}
.tab_box .tab_list{display: flex; flex-direction: row; align-items: center; justify-content: left;}
.tab_box .tab_list .tab_item{}
.tab_box .tab_list .tab_item a{display: block; padding: 0 20px; min-width: 150px; height: 40px; color: #fff; font-size: 18px; font-weight: 400; text-align: center; line-height: 40px; border-radius: 20.25px; background: transparent; transition: background 0.3s}
.tab_box .tab_list .tab_item.active a,
.tab_box .tab_list .tab_item:hover a{color: #2d2d2d; background: #fff;}

.content_box .area_box{background: #fff;}
.content_box .area_box.gy_box{background: #fafafa;}
.content_box .area_box>.inner{padding: 120px 0;}

/* header hover action move */
@media screen and (min-width: 1025px) {
  /* header hover action */
  .header:hover{background: #f8f8f8 !important}
  .header:hover .header_top_nav{border-bottom: 1px solid #f0f0f0; background: #fff;}
  .header:hover .header_top_nav .inner{height: 60px;}
  .header:hover .header_top_nav .logo{width: 87px; height: 29px; background: url("../../image/logo_co.png") no-repeat; background-size: contain}
  .header:hover .header_top_nav .main_nav{height: 60px;}
  .header:hover .header_top_nav .main_nav .main_nav_item{line-height: 60px;}
  .header:hover .header_top_nav .main_nav .main_nav_item>a{color: #303030 !important;}
  .header:hover .header_top_nav .main_nav .main_nav_item>a:hover,
  .header:hover .header_top_nav .main_nav .main_nav_item>a.active{color: #247d53 !important;}
  .header:hover .header_top_nav .main_nav .main_nav_item:hover .sub_nav{height: 60px;}
  .header_top_nav .sub_nav .sub_nav_list .sub_nav_item a:hover,
  .header_top_nav .sub_nav .sub_nav_list .sub_nav_item a.active{color: #272727;}
  
}

/* break points - minimun PC (Laptop) and normal~big tablet*/
@media screen and (max-width: 1024px){

  /* common */
  .header{overflow: visible; height: 101px;}
  .header_top_nav .inner{height: 100px}
  
  .btn_m_nav{display: block; position: relative; width: 50px; height: 32px; transition: width 0.2s, height 0.2s}
  .btn_m_nav i{position: absolute; z-index: 100; left: 0; display: block; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.7)}
  .btn_m_nav i:nth-child(1){top: 0; transform-origin: center; transition: background 0.15s, transform 0.3s;}
  .btn_m_nav i:nth-child(2){top: 50%; margin-top: -2px; transform-origin: bottom; transition: width 0.2s}
  .btn_m_nav i:nth-child(3){bottom: 0; transform-origin: center; transition: background 0.15s, transform 0.3s;}

  .btn_m_nav.act{width: 38px; height: 38px;}
  .btn_m_nav.act i:nth-child(1){top: 45%; left: -20%;  width: 141%; transform: rotate(45deg); background: #303030;}
  .btn_m_nav.act i:nth-child(2){width: 0;}
  .btn_m_nav.act i:nth-child(3){bottom: 45%; left: -20%; width: 141%; transform: rotate(-45deg); background: #303030;}

  .header.active .btn_m_nav i{background: #303030}

  .header_top_nav .main_nav{display: none;}
  .header_top_nav .m_main_nav{display: block; overflow: hidden; position: fixed; top: 100px; right: 0; z-index: 9999; padding-top: 60px; width: 0; height: 100%; background: #fff; transition: width 0.2s}
  .header_top_nav .m_main_nav.act{width: 50%; }
  .header_top_nav .m_main_nav li{margin-bottom: 50px; padding-left: 60px;}
  .header_top_nav .m_main_nav li a{color: #303030; font-size: 36px; font-weight: 800; text-transform: uppercase;}
  .header_top_nav .dim{display: none;}
  .header_top_nav .dim.act{display: block; position: fixed; z-index: 9990; top: 100px; left: 0; width: 50%; height: 100%; background: transparent}

  .header.active{border-bottom: 0; }
  .header.active .header_top_nav .logo{background-size: contain}

  .visual_box .visual_txt{font-weight: 400; text-align: center;}
}
@media screen and (max-width: 768px) {
  .move_homepage{position: relative; top: initial; transform: initial; margin: 5vw auto 2vw; width: 35vw; text-align: center;}
  .move_homepage .box{padding: 0 3vw; line-height: 9vw;}
  .move_homepage .box i{width: 3.71vw; height: 5vw;}
  .move_homepage .box span{font-size: 2.71vw;}
}