@charset "utf-8";

/*****
    responsive
                */
/*
폰트사이즈 기준
-----------------
PC : 1.0rem = 10px
타블렛 : 1.0rem = 9px
모바일 : 1.0rem = 10px

디바이스 크기별 폰트사이즈 조정 시 아래 형식과 같이 기준폰트 변경으로 일괄 조정
@media screen and (max-width:767px){
	html{font-size:10px;}
}

*/
body, h1, h2, h3, h4, h5, h6, p, div, li, dt, dd, dl, input, textarea, button, a {font-family:'Pretendard',sans-serif; word-break: keep-all;}
body {background: #000000; position: relative;}
body.type2 {background: #ffffff;}
h2{font-weight: 500;}

#viewport{overflow: hidden;}
#header{position:absolute; z-index:102; width: 100%;}
#header.sub{position:fixed; background-color: #FFF; border-bottom: 1px solid #d8d8d8;}
#header.main{position:fixed;}
#header.main::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#contents{position:relative; z-index:101;}
#footer{position:relative; z-index:100;background:#000000;border-top: 1px solid #333; color: #FFF;}

/*popup*/
.layer_pop{position:absolute; top:100px; left:10px; font-size:0; z-index:101}
.layer_pop .pop_btn{background:#333333; text-align:right; padding:5px; font-size:15px; color:#fff;}
.layer_pop .pop_btn input{vertical-align:middle;}
.layer_pop .pop_btn label{color:#c5c5c5; font-weight:normal;}
.layer_pop .pop_btn a{display:inline-block; margin-left:20px; padding:3px 7px; border:1px solid #fff; background:#999999;}

/*header*/
#header.on .header_inner .gnb_wrap .gnb_list > li > a {color:#333;}
#header.on .header_inner .gnb_wrap .gnb_list > li > a:hover span {position: relative;}
#header.on .header_inner .gnb_wrap .gnb_list > li > a:hover span:after {width:8px; height: 8px; background: #ED0F25;border-radius: 8px; right: -15px; top: 5px; content: ''; position: absolute;}

#header.on .header_inner .top_nav .ez a:hover {background:#ED0F25; transition: 0.6s ease; border: 1px solid #ffffff00;}
#header.on .header_inner .top_nav .ez a:hover span {color:#fff}
#header.on .header_inner .top_nav .ez a:hover span.link_ico {background-image: url(../images/common/250708_arrow_white_ico.svg);}

#header.activated .header_inner .gnb_wrap .gnb_list > li > a {color: #1D1D1D;font-family: "GmarketSans";font-size: 18px;font-style: normal;font-weight: 400;}
#header.activated .header_inner.main .gnb_wrap .gnb_list > li > a {color: #fff;}

/* #header.activated .header_inner .main_logo {display: block;}
#header.activated .header_inner .main_logo_hover {display: none;}
#header.activated.on .header_inner .main_logo {display: none;}
#header.activated.on .header_inner .main_logo_hover {display: block;} */

#header.activated .header_inner .main_logo {opacity: 1;}
#header.activated .header_inner .main_logo_hover {opacity: 0;}

#header.activated .header_inner .logo_box:hover .main_logo {opacity: 0; transition: 2s ease;}
#header.activated .header_inner .logo_box:hover .main_logo_hover {opacity: 1; transition: 0.6s ease;}

.header_inner{width:1280px; margin:0 auto; font-size:0;}
.header_inner .header_inner_top{text-align: center;}
.header_inner .logo_box {display:inline-block; width:150px; position: absolute; left: 20px; z-index: 500;}
.header_inner .main_logo{display:inline-block; width:150px; position: absolute; left: 0px;}
.header_inner .main_logo a{display:block; padding-top:22px; text-align: left;}
.header_inner .main_logo a img {max-width: 200px;}
.header_inner .main_logo_hover{display:inline-block; width:150px; position: absolute; left: 0px;}
.header_inner .main_logo_hover a{display:block; padding-top:22px; text-align: left;}
.header_inner .main_logo_hover a img{max-width: 200px;}
.header_inner .top_nav{display:inline-block; position: absolute; right: 20px; padding-top: 22px;}
.header_inner .top_nav .ez a {display: flex;padding: 8px 20px 8px 20px;justify-content: center;align-items: center;gap: 10px;border-radius: 100px;border: 1px solid #FFF; background-color: #1D1D1D;}
.header_inner .top_nav .ez a span {color: #FFF;font-family: "GmarketSans";padding-top: 3px; font-size: 16px;font-style: normal;font-weight: 400;line-height: 150%;}
.header_inner .top_nav .ez a span.link_ico {display: block; width: 14px; height: 11px; background-image: url(../images/common/250708_arrow_white_ico.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.header_inner .gnb_wrap{display:inline-block; width:750px; vertical-align:top;position: relative;z-index: 500;}
.header_inner .gnb_wrap .gnb_list > li{display:inline-block; width:25%; box-sizing:border-box;}
.header_inner .gnb_wrap .gnb_list > li > a{display:block; height:90px; line-height:90px; font-size:1.8rem;color:#fff; font-weight: 600; text-align:center; }

/* .header_inner .gnb_wrap .gnb_list > li.on > a:after{width:65px; height: 2px; background: #d81f25; bottom: 20px; left: 50%; transform: translateX(-50%); content: ''; position: absolute;} */
.header_inner .gnb_depth2_wrap{display:none; background:#fff; position:absolute; top:90px; left:0; width:100%; border-top:0px solid #dddddd; border-bottom:1px solid #dddddd; box-shadow:0 1px 3px 0 rgba(90, 90, 90, .3);}
.header_inner .gnb_depth2_wrap:before {content: ''; width: 100%; height: 1px; background: #ddd;position: absolute; top: 0; left: 0;}
.header_inner .gnb_depth2_wrap.on{display:block;}
.header_inner .gnb_depth2_wrap .depth2_inner{position:relative; width:750px; margin:0 auto; font-size:0;}
.header_inner .gnb_depth2_wrap .depth2_inner > ul{display:inline-block; width:750px;}
.header_inner .gnb_depth2_wrap .depth2_inner > ul > li{display:inline-block; width:25%; height:281px; padding:30px 0; font-size:1.8rem; vertical-align:top; box-sizing:border-box;} /*솔루션 250401*/
.header_inner .gnb_depth2_wrap .depth2_inner > ul > li > .depth2_tit{display:none;}
.header_inner .gnb_depth2_wrap .depth2_inner > ul > li > ul{display:block; height:100%; border-right:1px solid #dddddd;}
.header_inner .gnb_depth2_wrap .depth2_inner > ul > li:first-child > ul{border-left:1px solid #dddddd;}
.header_inner .gnb_depth2_wrap .depth2_inner > ul > li > ul > li > a{display:block; padding:15px 0; color:#212121; text-align:center;}
.header_inner .gnb_depth2_wrap .depth2_inner > ul > li > ul > li > a:hover{color:#d81f25}
.header_inner .gnb_depth2_wrap:before{content: "";display: block;position: absolute;width: 710px;height: 281px;bottom: 0;left:0;background: url(../images/contents/gnd_bg.png) no-repeat; background-size: cover;} /*솔루션 250401*/
.header_inner .gnb_depth2_wrap .ez_nav {display: none;}
.header_inner .gnb_depth2_wrap .bottom_nav {display: none;}
.header_inner .dim{display:none;}
.header_inner .m_gnb_toggle{position:absolute; display:none; top:30px; right:20px; width:48px; height:48px; z-index:4;}
.header_inner .m_gnb_toggle a{display:block; width:100%; height:100%; /*background:url(../images/contents/m_gnb_open.png) no-repeat center center; background-size:30px 28px;*/}

.header_inner .m_gnb_toggle a .menu-icon {
    height: 40px;
    width: 40px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    display: block;
}
.header_inner .m_gnb_toggle a .menu-icon__line {
    height: 3px;
    width: 25px; float: right;
    display: block;
    background-color: #fff;
    margin-bottom: 7px;
    cursor: pointer;
    -webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
    transition: background-color .5s ease, -webkit-transform .2s ease;
    transition: transform .2s ease, background-color .5s ease;
    transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.header_inner .m_gnb_toggle a .menu-icon__line-left {
    width: 35px; float: right;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.header_inner .m_gnb_toggle a .menu-icon__line-right {
    width: 40px;
    float: right;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.header_inner .m_gnb_toggle a .menu-icon:hover .menu-icon__line-left,
.header_inner .m_gnb_toggle a .menu-icon:hover .menu-icon__line-right,
.header_inner .m_gnb_toggle a .menu-icon:hover .menu-icon__line{
    width: 40px;
}


/** new main */

.font_red {
  color: #ED0F25;
}
.font_white_t80 {
  color: rgba(255, 255, 255, 0.80)
}
.font_white {
  color: #FFF;
}
.font_black {
  color: #1D1D1D;
}
.font_w400 {
  font-weight: 400;
}
.font_w600 {
  font-weight: 600;
}

.l_br {
  display: inline-block;
}
.m_br {
  display: none;
}
.s_br {
  display: none;
}
.ss_br {
  display: none;
}

.w_1920 {
  max-width: 1920px;
  width: 100%;
  margin: auto;
}

@media screen and (max-width: 1520px) {
  .l_br {
    display: none;
  }
}
@media screen and (max-width: 1285px) {
.m_br {
    display: inline-block;
  }
}
@media screen and (max-width: 1023px) {
  .none_br_1023 {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  
  .l_br {
    display: inline-block;
  }
}
@media screen and (max-width: 767px) {
  .s_br {
    display: inline-block;
  }
  .none_br {
    display: none;
  }
}
@media screen and (max-width: 500px) {
  .ss_br {
    display: inline-block;
  }
  .none_br_500 {
    display: none;
  }
}

.red_dot{
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ED0F25;
}
@media screen and (max-width:500px){
  .red_dot {
    width: 7px;
    height: 7px;
  }
}
.white_dot{
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFF;
}
.down_ico {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/common/250708_download_black_ico.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
a.button_type1 {
  display: flex;
  padding: 8px 20px 8px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: #FFF;
}
a.button_type1 span {
    color: #1C1C1C;
    font-family: "GmarketSans";
    padding-top: 3px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
a.button_type1 span.ico {
    display: block;
    width: 14px;
    height: 11px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
a.button_type1:hover {background:#ED0F25; transition: 0.6s ease;}
a.button_type1:hover span {color:#fff}
a.button_type1:hover span.down_ico {background-image: url(../images/common/250708_download_white_ico.svg);}

.link_ico {
  display: block;
  width: 14px;
  height: 11px;
  background-image: url(../images/common/250708_arrow_white_ico.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
a.button_type2 {
  display: flex;
  padding: 8px 20px 8px 20px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  border-radius: 100px;
  border: 1px solid #FFF;
}
a.button_type2 span {
    color: #FFF;
    font-family: "GmarketSans";
    padding-top: 3px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
a.button_type2 span.ico {
    display: block;
    width: 14px;
    height: 11px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* a.button_type2:hover {background:#ED0F25; transition: 0.6s ease;}
a.button_type2:hover span {color:#fff}
a.button_type2:hover span.link_ico {background-image: url(../images/common/250708_arrow_white_ico.svg);} */

a.button_type3 {
  display: flex;
  padding: 8px 24px 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: 1px solid #C6C6C6;
  background:#FFF;
  flex-shrink: 0;
}
a.button_type3 span {
    color: #1d1d1d;
    font-family: "GmarketSans";
    padding-top: 3px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
a.button_type3.on {
  background:#ED0F25;
  border: 1px solid #00000000;
}
a.button_type3.on span {
  color: #fff;
}
@media screen and (max-width: 767px) {
  a.button_type3 span {
    font-size: 14px;
  }
}

a.button_type4 {
  display: flex;
  padding: 8px 16px 8px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: 1px solid #1D1D1D;
  background:#FFF;
  flex-shrink: 0;
}
a.button_type4 span {
    color: #1d1d1d;
    font-family: "GmarketSans";
    padding-top: 3px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
@media screen and (max-width: 767px) {
  a.button_type4 span {
    font-size: 14px;
  }
}


#container.main {
  min-height: 2000px;
  background-image: url(../images/common/250708_main_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
}
#container .sec {
  max-width: 1920px;
  width: 100%;
  margin: auto;
}

/* section1, 2 */

#container .sec.sec1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  align-self: stretch;
  margin-bottom: 280px;
}
#container .sec1 .box {
  width: 100%;
  min-height: 730px;
  position: relative;
}
#container .sec1 .box .line_one {
  width: 1154px;
  height: 124px;
  background-image: url(../images/common/250708_line_one.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 330px;
  left: -10.5%;
  opacity: 0;
}
#container .sec1 .box .line_two {
  width: 1065px;
  height: 119px;
  background-image: url(../images/common/250708_line_two.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 180px;
  left: 66.5%;
  opacity: 0;
}
#container .sec1 .box .line_three {
  width: 1720px;
  height: 124px;
  background-image: url(../images/common/250708_line_three.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 20px;
  right: -25%;
  opacity: 0;
}
#container .sec1 .box .m_area {
  width: 718px;
  height: 658px;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%);
  opacity: 0;
}
#container .sec1 .box .m_top_img {
  display: none;
  width: 718px;
  height: 658px;
  background-image: url(../images/common/250714_main_top_m_img.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  /* top: 100px;
  left: 50%;
  transform: translate(-50%); */
  z-index: 1;
}
#container .sec1 .txt_box {
  display: flex;
  padding: 0px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
#container .sec1 .txt_box p {
  color: #D4D4D4;
  font-family: "GmarketSans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  position: relative;
  top: 100px;
  opacity: 0;
}

#container .sec.sec2 {
  display: flex;
  padding: 0px 200px;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  margin-bottom: 240px;
}
#container .sec.sec2 .depth_box1 {
  color: rgba(255, 255, 255, 0.80);
  font-family: "Pretendard";
  font-size: 64px;
  font-style: normal;
  font-weight: 200;
  line-height: 140%;
  text-transform: uppercase;
  position: relative;
  width: 100%;
}
#container .sec.sec2 .depth_box1 .type1 {
  font-weight: 800;
}
#container .sec.sec2 .depth_box1 .sec2_p {
  position: relative;
  top: -150px;
  opacity: 0;
}
#container .sec.sec2 .depth_box2 {
  display: flex;
  align-items: center;
  gap: 40px;
  opacity: 0;
}
#container .sec.sec2 .depth_box2 .left_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
#container .sec.sec2 .depth_box2 .right_box {
  display: flex;
  align-items: center;
  gap: 40px;
}
#container .sec.sec2 .depth_box2 .box_g {
  width: 360px;
  height: 500px;
  flex-shrink: 0;
  position: relative;

  display: inline-grid;
  transition: transform 0.3s;
  transform: perspective(800px) rotateY(0deg);
  transform-style: preserve-3d;
}
#container .sec.sec2 .depth_box2 .box_g_hover:hover .box_g {
  transform: perspective(800px) rotateY(180deg);
}
#container .sec.sec2 .depth_box2 .box_g_hover .box_g > * {
  grid-area: 1 / 1 / 1 / 1;
  backface-visibility: hidden;
}
#container .sec.sec2 .depth_box2 .box_g .box_g_front {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background-image: url(../images/common/250917_g_bg.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
#container .sec.sec2 .depth_box2 .box_g .c_ico {
  display: block;
  width: 100px;
  height: 120px;
  background-image: url(../images/common/250917_g.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 30px;
  left: 40px;
  z-index: 1;
}
#container .sec.sec2 .depth_box2 .box_g .box_g_back {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background-image: url(../images/common/250917_g_bg.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: rotateY(180deg);
}
#container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(10px);
  color: #fff;
  position: absolute;
  z-index: 2;
  padding: 40px;
}
#container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con .txt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
#container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con .txt .tit {
  color: #FFF;
  font-size: 28px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
  text-transform: uppercase;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
#container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con .txt .tit .sub {
  font-size: 16px;
  font-weight: 500;
}
#container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con .txt .section_line {
  width: 40px;
  height: 1px;
  background: #C6C6C6;
}
#container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con .txt .con_txt {
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}
#container .sec.sec2 .depth_box2 .box_i {
  width: 360px;
  height: 500px;
  flex-shrink: 0;
  position: relative;

  display: inline-grid;
  transition: transform 0.3s;
  transform: perspective(800px) rotateY(0deg);
  transform-style: preserve-3d;
}
#container .sec.sec2 .depth_box2 .box_i_hover:hover .box_i {
  transform: perspective(800px) rotateY(180deg);
}
#container .sec.sec2 .depth_box2 .box_i_hover .box_i > * {
  grid-area: 1 / 1 / 1 / 1;
  backface-visibility: hidden;
}
#container .sec.sec2 .depth_box2 .box_i .box_i_front {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background-image: url(../images/common/250917_i_bg.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
#container .sec.sec2 .depth_box2 .box_i .i_ico {
  display: block;
  width: 100px;
  height: 120px;
  background-image: url(../images/common/250917_i.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 1;
}
#container .sec.sec2 .depth_box2 .box_i .box_i_back {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background-image: url(../images/common/250917_i_bg.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: rotateY(180deg);
}
#container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(10px);
  color: #fff;
  position: absolute;
  z-index: 2;
  padding: 40px;
}
#container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con .txt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
#container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con .txt .tit {
  color: #FFF;
  font-size: 28px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
  text-transform: uppercase;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
#container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con .txt .tit .sub {
  font-size: 16px;
  font-weight: 500;
}
#container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con .txt .section_line {
  width: 40px;
  height: 1px;
  background: #C6C6C6;
}
#container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con .txt .con_txt {
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}
#container .sec.sec2 .depth_box2 .box_o {
  width: 360px;
  height: 500px;
  flex-shrink: 0;
  position: relative;

  display: inline-grid;
  transition: transform 0.3s;
  transform: perspective(800px) rotateY(0deg);
  transform-style: preserve-3d;
}
#container .sec.sec2 .depth_box2 .box_o_hover:hover .box_o {
  transform: perspective(800px) rotateY(180deg);
}
#container .sec.sec2 .depth_box2 .box_o_hover .box_o > * {
  grid-area: 1 / 1 / 1 / 1;
  backface-visibility: hidden;
}
#container .sec.sec2 .depth_box2 .box_o .box_o_front {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background-image: url(../images/common/250917_o_bg.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
#container .sec.sec2 .depth_box2 .box_o .n_ico {
  display: block;
  width: 100px;
  height: 120px;
  background-image: url(../images/common/250917_o.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 30px;
  right: 39px;
  z-index: 1;
}
#container .sec.sec2 .depth_box2 .box_o .box_o_back {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background-image: url(../images/common/250917_o_bg.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: rotateY(180deg);
}
#container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con {
  width: 360px;
  height: 500px;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(10px);
  color: #fff;
  position: absolute;
  z-index: 2;
  padding: 40px;
}
#container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con .txt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
#container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con .txt .tit {
  color: #FFF;
  font-size: 28px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
  text-transform: uppercase;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con .txt .tit .sub {
  font-size: 16px;
  font-weight: 500;
}
#container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con .txt .section_line {
  width: 40px;
  height: 1px;
  background: #C6C6C6;
}
#container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con .txt .con_txt {
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}

#container .sec.sec2 .depth_box2 .white_dot {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  bottom: 40px;
  right: 40px;
}

/*3D*/
:root {
    --canvas-one-size : 190px;
    --canvas-one-size-1960 : 180px;
    --canvas-one-size-1600 : 200px;
    --canvas-one-size-767 : 150px;

    --canvas-two-size : 280px;
    --canvas-two-size-1960 : 260px;
    --canvas-two-size-1600 : 180px;
    --canvas-two-size-767 : 130px;

    --canvas-three-size : 400px;
    --canvas-three-size-1960 : 400px;
    --canvas-three-size-1600 : 220px;
    --canvas-three-size-767 : 170px;

    --canvas-four-size : 180px;
    --canvas-four-size-767 : 80px;

    --canvas-five-size : 160px;
    --canvas-five-size-767 : 80px;
}
.three-canvas-one {
    width: var(--canvas-one-size);
    height: var(--canvas-one-size);
    opacity: 0;
    position: absolute;
    top: 71%;
    left: -14%;
    transform: rotate(90deg);
    z-index: 1;
}
.three-canvas-two {
    width: var(--canvas-two-size);
    height: var(--canvas-two-size);
    opacity: 0;
    position: absolute;
    top: -17%;
    left: 22%;
    transform: rotate(-90deg);
    z-index: 1;
}
.three-canvas-three {
    visibility: unset;
    width: var(--canvas-three-size);
    height: var(--canvas-three-size);
    opacity: 0;
    position: absolute;
    top: 265%;
    left: 11%;
    transform: rotate(90deg);
    z-index: 1;
}
.three-canvas-four {
    visibility: hidden;
    width: var(--canvas-four-size);
    height: var(--canvas-four-size);
    position: absolute;
    right: 14px;
    bottom: 10px;
    transform: rotate(90deg);
    z-index: 0;
}
.three-canvas-five {
    visibility: hidden;
    width: var(--canvas-five-size);
    height: var(--canvas-five-size);
    position: absolute;
    left: 285px;
    top: 37px;
    transform: rotate(-12deg);
    z-index: 1;
}

@media (max-width: 1960px) {
    .three-canvas-one {
        width: var(--canvas-one-size-1960);
        height: var(--canvas-one-size-1960);
        /* left: 225px;
        top: 48%; */
    }
    .three-canvas-two {
        width: var(--canvas-two-size-1960);
        height: var(--canvas-two-size-1960);
        /* left: 497px;
        top: 26%; */
    }
}

@media (max-width: 1600px) {
    .three-canvas-one {
        visibility: hidden;
        width: var(--canvas-one-size-1600);
        height: var(--canvas-one-size-1600);
    }
    .three-canvas-two {
        visibility: hidden;
        width: var(--canvas-two-size-1600);
        height: var(--canvas-two-size-1600);
    }

    .three-canvas-four {
      visibility: unset;
      width: var(--canvas-four-size);
      height: var(--canvas-four-size);
    }
    .three-canvas-five {
      visibility: unset;
      width: var(--canvas-five-size);
      height: var(--canvas-five-size);
    }
}

@media (max-width: 767px) {
    .three-canvas-one {
        width: var(--canvas-one-size-767);
        height: var(--canvas-one-size-767);
    }
    .three-canvas-two {
        width: var(--canvas-two-size-767);
        height: var(--canvas-two-size-767);
    }
    
    .three-canvas-four {
      display: block;
      width: var(--canvas-four-size-767);
      height: var(--canvas-four-size-767);
      right: 6px;
      bottom: 7px;
    }
    .three-canvas-five {
      display: block;
      width: var(--canvas-five-size-767);
      height: var(--canvas-five-size-767);
      left: 125px;
      top: 16px;
    }
}
/*3D*/

/* section1, 2 */

/* section3 */

#container .sec.sec3 {
  display: flex;
  max-width: 100%;
  width: 100%;
  padding: 120px 0px;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  align-self: stretch;
  margin-bottom: 240px;

  /* overflow: hidden; */
}
#container .sec.sec3 .tit_box {
  font-size: 64px;
  text-align: center;
  line-height: 140%;
  font-style: normal;
  text-transform: uppercase;
  
  position: relative;
  top: -80px;
  opacity: 0;
}
#container .sec.sec3 .tit_box .type1 {
  font-weight: 800;
}
#container .sec.sec3 .info_box {
  display: flex;
  width: 100%;
  padding: 20px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
#container .sec.sec3 .info_box .info_bg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: calc(100%);
  pointer-events: none;
}
#container .sec.sec3 .info_box .info_bg_cover {
  width: 100%;
  height: 498px;
  position: absolute;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.00) 0%, rgba(17, 17, 17, 0.95) 50.96%, rgba(17, 17, 17, 0.00) 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  opacity: 0;
  z-index: 1;
}
#container .sec.sec3 .flow-line {
    overflow: hidden;
    width: 100%;
    position: relative;
}

#container .sec.sec3 .flow-track {
    display: flex;
    width: max-content;
    animation: flow linear infinite;
    gap: 10px;
}

#container .sec.sec3 .flow-item {
    flex: 0 0 auto;
}

#container .sec.sec3 .flow-item img {
    display: block;
}

@keyframes flow {
    from { transform: translateX(0); }
    to { transform: translateX(var(--move)); }
}

#container .sec.sec3 .flow-line[data-dir="left"] .flow-track {
    animation-name: flow-reverse;
}

@keyframes flow-reverse {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
#container .sec.sec3 .info_box .flow-track {
  transition-timing-function: linear;
  opacity: 0;
}

#container .sec.sec3 .info_box .swiper-slide {
  width: 325px;
  height: 80px;
  position: relative;
  border-radius: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
}
#container .sec.sec3 .info_box .swiper-slide img {
  width: 100%;
}

#container .sec.sec3 .info_box .info_type {
  display: flex;
  align-items: center;
  gap: 100px;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
}
#container .sec.sec3 .info_box .info_type .info {
  display: flex;
  width: 185px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#container .sec.sec3 .info_box .info_type .info .tit{
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  text-transform: uppercase;
}
#container .sec.sec3 .info_box .info_type .info .con .count-num{
  color: #FFF;
  font-size: 90px;
  font-style: normal;
  font-weight: 800;
  line-height: 140%;
  text-transform: uppercase;
  margin-right: 5px;
}
#container .sec.sec3 .info_box .info_type .info .con span{
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  text-transform: uppercase;
}

/* section3 */
/* section4 */

#container .sec.sec4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  margin-bottom: 240px;
}
#container .sec.sec4 .project_box {
  display: flex;
  max-width: 1520px;
  padding-bottom: 100px;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
#container .sec.sec4 .project_box .project_tit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  position: relative;
  top: -100px;
  opacity: 0;
}
#container .sec.sec4 .project_box .project_tit .tit {
  color: #FFF;
  text-align: center;
  font-family: "GmarketSans";
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-transform: uppercase;
}
#container .sec.sec4 .project_box .project_list {
  width: 100%;
  position: relative;
  top: 100px;
  opacity: 0;
}
#container .sec.sec4 .project_box .project_list ul {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  gap: 48px 24px;
  flex-wrap: wrap;
}
#container .sec.sec4 .project_box .project_list ul li {
  display: flex;
  width: 490px;
  height: 320px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
#container .sec.sec4 .project_box .project_list ul li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 19.67%, #111 100%);
  pointer-events: none;
}
#container .sec.sec4 .project_box .project_list ul li a {
  border-radius: 0px;
  position: relative;
  overflow: hidden;
}
#container .sec.sec4 .project_box .project_list ul li img {
  object-fit: cover;
  border-radius: 0px;
}
#container .sec.sec4 .project_box .project_list ul li .info {
  display: flex;
  width: 426px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
}
#container .sec.sec4 .project_box .project_list ul li .info .tit {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
#container .sec.sec4 .project_box .project_list ul li .info .hash_tag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  visibility: hidden;
  opacity: 0;
  height: 0;
}
#container .sec.sec4 .project_box .project_list ul li .info .hash_tag span {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.20);

  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
#container .sec.sec4 .project_box .project_list ul li:hover a .info .hash_tag {
  visibility: visible;
  opacity: 1;
  height: unset;
  transition: 0.6s ease;
}
#container .sec.sec4 .project_box .project_list ul li:hover img {
  transform: scale(1.1);
  transition: 0.4s ease;
}

#container .sec.sec4 .project_box .project_view_button {
  object-fit: cover;
  border-radius: 32px 32px 0px 0px;
  opacity: 0;
}
/* section4 */

/** new main */

/** new footer */

.foot_br {
  display: none;
}
.company_introduce_button {
  width: 114px;
}
#footer .footer {
  display: flex;
  max-width: 1920px;
  padding: 80px 200px;
  justify-content: space-between;
  align-items: flex-start;
  margin: auto;
}
#footer .footer .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
#footer .footer .info .company_info ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
#footer .footer .info .company_info ul li {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
#footer .footer .info .company_info ul li .tit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 102px;
  flex-shrink: 0;

  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
#footer .footer .info .company_info ul li .tit .address_ico {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/common/250709_address_ico.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#footer .footer .info .company_info ul li .tit .tell_ico {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/common/250709_tell_ico.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#footer .footer .info .company_info ul li .tit .fax_ico {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/common/250709_fax_ico.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#footer .footer .info .company_info ul li .tit .email_ico {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/common/250709_email_ico.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#footer .footer .info .company_info ul li .tit .company_number_ico {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/common/250709_company_number_ico.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#footer .footer .info .company_info ul li .txt {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
#footer .footer .info .mark_wrap{
  display: flex;
  align-items: flex-end;
  gap: 24px;
}
#footer .footer .info .mark_wrap .depth1{
  display: flex;
  align-items: center;
  gap: 16px;
}
#footer .footer .info .mark_wrap .depth2{
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
#footer .footer .finfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  flex-shrink: 0;
}
#footer .footer .finfo .link ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
#footer .footer .finfo .link ul li a {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;

  color: #FFF;
  font-family: "GmarketSans";
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
#footer .footer .finfo .link ul li a:hover .white_dot {
  background: #ED0F25;
  transition: 0.6s ease;
}

#footer .footer .finfo .sns_link {
  display: flex;
  align-items: center;
  gap: 16px;
}
#footer .footer .finfo .sns_link ul {
  display: flex;
  align-items: center;
  gap: 16px;
}
#footer .footer .finfo .sns_link ul li img  {
  object-fit: cover;
}

@media screen and (max-width: 1600px){
  #footer .footer {
    padding: 40px 24px;
  }
}
@media screen and (max-width: 990px){
  #footer .footer {
    flex-direction: column;
    gap: 40px;
    padding: 40px 16px;
  }
  #footer .footer .finfo {
    flex-direction: row;
  }
  #footer .footer .finfo .link ul {
    align-items: flex-start;
  }
  #footer .footer .finfo .sns_link {
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 12px;
  }
  #footer .footer .finfo .sns_link ul {
    width: 96px;
    align-items: center;
    align-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 635px){
  #footer .footer .info .mark_wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 385px){
  .foot_br {
    display: inline-block;
  }
  .company_introduce_button {
    width: 95px;
  }
  a.button_type1.company_introduce_button span {
    font-size: 14px;
  }
  a.button_type1.company_introduce_button span.down_ico {
    width: 17px;
    height: 17px;
  }
}

/** new footer */





/** new contents */

/*about*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#container.cont_main .about_sec1 {
  margin-bottom: 0px;
  gap: 0px;
}
#container.cont_main .about_sec1 .title_box {
  display: flex;
  padding: 110px 200px 0px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#container.cont_main .about_sec1 .title_box h2 {
  color: #1D1D1D;
  text-align: center;
  font-family: "GmarketSans";
  font-size: 56px;
  font-style: normal;
  font-weight: 100;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec1 .box {
  display: flex;
  padding: 80px 200px 120px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#container.cont_main .about_sec1 .box .about_banner {
  height: 400px;
  align-self: stretch;
  border-radius: 10px;
  background-image: url(../images/common/250709_about_banner.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .about_sec1 .box .tit_box {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#container.cont_main .about_sec1 .box .tit_box .tit1 {
  color: #1D1D1D;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  text-transform: uppercase;

  flex-shrink: 0;
}
#container.cont_main .about_sec1 .box .tit_box .tit2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#container.cont_main .about_sec1 .box .tit_box .tit2 .type1 {
  color: #555;
  font-size: 30px;
  font-style: normal;
  font-weight: 200;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec1 .box .tit_box .tit2 .type2 {
  color: #555;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec1 .box .visual_guide_box {
  display: flex;
  padding-left: 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  position: relative;
}
#container.cont_main .about_sec1 .box .visual_guide_box .arrow_box {
  display: flex;
  align-items: center;
  gap: -20px;
  position: absolute;
  /* left: 320px; */
  bottom: 195px;

  opacity: 0;
}
#container.cont_main .about_sec1 .box .visual_guide_box .arrow_box .stroke {
  width: 780px;
  height: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4'%3E%3Crect rx='2' ry='2' width='8' height='4' fill='%23C6C6C6'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 7px 2px;
}
#container.cont_main .about_sec1 .box .visual_guide_box .arrow_box .arrow {
  display: block;
  width: 10px;
  height: 20px;
  aspect-ratio: 1/2;
  background-image: url(../images/common/250709_about_arrow_white.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  right: 0;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide {
  display: flex;
  /* justify-content: space-between; */
  align-items: flex-end;
  align-self: stretch;
  gap: 60px;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area {
  display: flex;
  align-items: flex-start;
  gap: 180px;
  position: relative;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area .step_item {
  width: 280px;
  height: 280px;
  flex-shrink: 0;
  border-radius: 280px;
  background: rgba(142, 142, 142, 0.10);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 35px;

  opacity: 0;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area .step_item .txt {
  display: flex;
  align-items: center;
  height: 78px;
  color: #555;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area .step_item .item_dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #C6C6C6;
  position: absolute;
  bottom: 50.5%;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area .step_item .item_ico1 {
  width: 71px;
  height: 80px;
  flex-shrink: 0;
  aspect-ratio: 71/80;
  background-image: url(../images/common/250709_about_step_ico1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area .step_item .item_ico2 {
  width: 75px;
  height: 78px;
  flex-shrink: 0;
  aspect-ratio: 25/26;
  background-image: url(../images/common/250709_about_step_ico2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area .step_item .item_ico3 {
  width: 90px;
  height: 70px;
  flex-shrink: 0;
  aspect-ratio: 7/9;
  background-image: url(../images/common/250709_about_step_ico3.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area_m {
  display: none;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .tit {
  display: flex;
  width: 740px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-top: 2px solid #C6C6C6;

  opacity: 0;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .tit span {
  color: #555;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .result_box {
  width: 380px;
  height: 380px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  position: relative;
  
  opacity: 0;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .result_box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/common/250709_about_ico.svg) center / contain no-repeat;
  animation: spin 3s linear infinite;
  z-index: 0;
}
#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .result_box span {
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;

  z-index: 1;
}

#container.cont_main .about_sec2 {
  width: 100%;
  margin: unset;
  max-width: unset;

  background: center/cover no-repeat url(../images/common/250917_about_01.gif);
}
#container.cont_main .about_sec2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.05) 100%
    ), rgba(21, 21, 21, 0.70);
    backdrop-filter: blur(5px);
}
#container.cont_main .about_sec2 .box {
  display: flex;
  max-width: 1920px;
  padding: 120px 200px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
  margin: auto;
  position: relative;
}
#container.cont_main .about_sec2 .box .tit_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}
#container.cont_main .about_sec2 .box .tit_box .tit {
  color: #FFF;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec2 .box .tit_box .sub {
  align-self: stretch;
  text-align: center;

  color: #fff;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec2 .box .type_box {
  width: 100%;
}
#container.cont_main .about_sec2 .box .type_box ul {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#container.cont_main .about_sec2 .box .type_box ul li {
  display: flex;
  padding: 60px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex: 1 0 0;

  border-radius: 20px;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(10px);

  position: relative;
  overflow: hidden;
  align-self: stretch;
}
#container.cont_main .about_sec2 .box .type_box ul li .txt_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  position: relative;
  z-index: 2;
}
#container.cont_main .about_sec2 .box .type_box ul li .txt_box .ico {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 80px;
  height: 80px;
  aspect-ratio: 1/1;
}
#container.cont_main .about_sec2 .box .type_box ul li .txt_box .tit {
  color: #FFF;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
#container.cont_main .about_sec2 .box .type_box ul li .txt_box .sub {
  color: #D8D8D8;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

#container.cont_main .about_sec2 .box .type_box ul li .txt_box .ico.img1 {
  background: center/cover no-repeat url(../images/common/250923_about_ico1.svg);
}
#container.cont_main .about_sec2 .box .type_box ul li .txt_box .ico.img2 {
  background: center/cover no-repeat url(../images/common/250923_about_ico2.svg);
}
#container.cont_main .about_sec2 .box .type_box ul li .txt_box .ico.img3 {
  background: center/cover no-repeat url(../images/common/250923_about_ico3.svg);
}
#container.cont_main .about_sec2 .box .type_box ul li .txt_box .ico.img4 {
  background: center/cover no-repeat url(../images/common/250923_about_ico4.svg);
}
#container.cont_main .about_sec2 .box .type_box ul li .txt_box .ico.img5 {
  background: center/cover no-repeat url(../images/common/250923_about_ico5.svg);
}


#container.cont_main .about_sec3 {
  width: 100%;
  margin: unset;
  max-width: unset;

  background: center/cover no-repeat url(../images/common/250917_about_02.gif);
}
#container.cont_main .about_sec3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.05) 100%
    ), rgba(21, 21, 21, 0.70);
    backdrop-filter: blur(5px);
}
#container.cont_main .about_sec3 .box {
  display: flex;
  max-width: 1920px;
  padding: 120px 200px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: auto;
  position: relative;
}
#container.cont_main .about_sec3 .box .tit_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}
#container.cont_main .about_sec3 .box .tit_box .tit {
  color: #FFF;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec3 .box .tit_box .sub {
  align-self: stretch;
  text-align: center;

  color: #fff;
  font-size: 30px;
  font-style: normal;
  font-weight: 200;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec3 .box .type_box {
  width: 100%;
}
#container.cont_main .about_sec3 .box .type_box ul.type1 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  align-self: stretch;
  flex-wrap: wrap;
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li:nth-child(1){
  width: calc(30% + 5px);
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li:nth-child(2) {
  width: calc(30% + 5px);
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li:nth-child(3) {
  width: calc(30% + 5px);
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li {
  position: relative;
  border-radius: 10px;
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li .txt_box {
  display: flex;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
  position: relative;
  z-index: 2;
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li .txt_box .num {
  color: #8E8E8E;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 140%;
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li .txt_box .tit {
  color: #FFF;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li .txt_box .sub {
  color: #D8D8D8;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
#container.cont_main .about_sec3 .box .type_box ul.type1 > li .ico {
  width: 260px;
  height: 160px;
  aspect-ratio: 13/8;
  background: url(../images/common/250710_about_ico.svg) rgba(255, 255, 255, 0) 50% / contain no-repeat;
}
#container.cont_main .about_sec3 .box_card {
  width: 100%;
  /* height: 9px; */
  flex-shrink: 0;
  position: relative;

  display: inline-grid;
  transition: transform 0.3s;
  transform: perspective(800px) rotateY(0deg);
  transform-style: preserve-3d;
}
#container.cont_main .about_sec3 .box_card_hover:hover .box_card {
  transform: perspective(800px) rotateY(180deg);
}
#container.cont_main .about_sec3 .box_card_hover .box_card > * {
  grid-area: 1 / 1 / 1 / 1;
  backface-visibility: hidden;
}
#container.cont_main .about_sec3 .box_card .box_card_front {
  width: 100%;
  height: 329px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.20);
  box-shadow: 10px 4px 20px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  position: relative;
}
#container.cont_main .about_sec3 .box_card .box_card_front .box_card_front_con {
  width: 100%;
  height: 329px;
  border-radius: 20px;
  color: #FFF;
  position: absolute;
  z-index: 2;
  padding: 40px;
}
#container.cont_main .about_sec3 .box_card .box_card_front .box_card_front_con .txt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
#container.cont_main .about_sec3 .box_card .box_card_front .box_card_front_con .txt .tit {
  font-size: 28px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
  text-transform: uppercase;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
#container.cont_main .about_sec3 .box_card .box_card_front .box_card_front_con .txt .tit .sub {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
}
#container.cont_main .about_sec3 .box_card .box_card_front .box_card_front_con .txt .section_line {
  width: 40px;
  height: 1px;
  background: #C6C6C6;
}
#container.cont_main .about_sec3 .box_card .box_card_front .box_card_front_con .txt .con_txt {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}
#container.cont_main .about_sec3 .box_card .card_ico {
  display: block;
  width: 90px;
  height: 90px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 30px;
  left: 40px;
  z-index: 1;
}
#container.cont_main .about_sec3 .box_card .card_ico.type1 {
  background-image: url(../images/common/250929_certification_ico1.svg);
}
#container.cont_main .about_sec3 .box_card .card_ico.type2 {
  background-image: url(../images/common/250929_certification_ico2.svg);
}
#container.cont_main .about_sec3 .box_card .card_ico.type3 {
  background-image: url(../images/common/250929_certification_ico3.svg);
}
#container.cont_main .about_sec3 .box_card .card_more {
  display: block;
  width: 60px;
  height: 60px;
  background-image: url(../images/common/250710_white_plus.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 1;
}
#container.cont_main .about_sec3 .box_card .box_card_back {
  width: 100%;
  height: 329px;
  border-radius: 20px;
  background: #FFF;
  box-shadow: 10px 4px 20px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  transform: rotateY(180deg);
}
#container.cont_main .about_sec3 .box_card .box_card_back .box_card_back_con {
  width: 100%;
  height: 329px;
  border-radius: 20px;
  color: #1D1D1D;
  position: absolute;
  z-index: 2;
  padding: 40px;
}
#container.cont_main .about_sec3 .box_card .box_card_back .box_card_back_con .txt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
#container.cont_main .about_sec3 .box_card .box_card_back .box_card_back_con .txt .tit {
  font-size: 28px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
  text-transform: uppercase;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
#container.cont_main .about_sec3 .box_card .box_card_back .box_card_back_con .txt .back_list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}
#container.cont_main .about_sec3 .box_card .box_card_back .box_card_back_con .txt .back_list li {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.48px;
  position: relative;
  padding-left: 13px;
}
#container.cont_main .about_sec3 .box_card .box_card_back .box_card_back_con .txt .back_list li::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ED0F25;
  position: absolute;
  top: 9px;
  left: 0;
}





#container.cont_main .about_sec4 {
  max-width: unset;
  position: relative;
}
#container.cont_main .about_sec4 .box:first-child {
  display: flex;
  max-width: 1920px;
  padding: 120px 200px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: auto;
  position: relative;
}
#container.cont_main .about_sec4 .box:first-child .tit_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
#container.cont_main .about_sec4 .box:first-child .tit_box .tit {
  color: #1D1D1D;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec4 .box:first-child .tit_box .sub {
  align-self: stretch;
  text-align: center;

  color: #1D1D1D;
  font-size: 30px;
  font-style: normal;
  font-weight: 200;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec4 .box .type_box {
  width: 100%;
}
#container.cont_main .about_sec4 .box .type_box ul {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  flex-wrap: unset;
  flex-direction: column;
}
#container.cont_main .about_sec4 .box .type_box ul li:nth-child(1){
  width: 100%;
  background-image: url(../images/common/250923_about_bg1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#container.cont_main .about_sec4 .box .type_box ul li:nth-child(2) {
  width: 100%;
  background-image: url(../images/common/250923_about_bg2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#container.cont_main .about_sec4 .box .type_box ul li:nth-child(3) {
  width: 100%;
  background-image: url(../images/common/250923_about_bg3.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#container.cont_main .about_sec4 .box .type_box ul li:nth-child(4) {
  width: 100%;
  background-image: url(../images/common/250923_about_bg4.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#container.cont_main .about_sec4 .box .type_box ul li:nth-child(5) {
  width: 100%;
  background-image: url(../images/common/250923_about_bg5.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#container.cont_main .about_sec4 .box .type_box ul li {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
#container.cont_main .about_sec4 .box .type_box ul li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 80%);
  border-radius: 10px;
  pointer-events: none;
  left: -2px;
}
#container.cont_main .about_sec4 .box .type_box ul li .txt_box {
  display: flex;
  padding: 60px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  position: relative;
  z-index: 2;
}
#container.cont_main .about_sec4 .box .type_box ul li .txt_box .tit {
  color: #FFF;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
#container.cont_main .about_sec4 .box .type_box ul li .txt_box .section_line {
  width: 40px;
  height: 1px;
  background: #555;
}
#container.cont_main .about_sec4 .box .type_box ul li .txt_box .sub {
  color: #D8D8D8;
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
#container.cont_main .about_sec4 .box .type_box ul li .ico {
  width: 260px;
  height: 160px;
  aspect-ratio: 13/8;
  background: url(../images/common/250710_about_ico.svg) rgba(255, 255, 255, 0) 50% / contain no-repeat;
}
#container.cont_main .about_sec4 .add_box {
  background: #202020;
}
#container.cont_main .about_sec4 .box .we_here {
  padding: 120px 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#container.cont_main .about_sec4 .box .we_here > .tit {
  color: #FFF;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  text-transform: uppercase;
  
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
#container.cont_main .about_sec4 .box .we_here > .tit .ico {
  display: inline-block;
  width: 56px;
  height: 56px;
  background: center/cover no-repeat url(../images/common/250708_box_ico.svg);
}
#container.cont_main .about_sec4 .box .info_box {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  align-self: stretch;
}
#container.cont_main .about_sec4 .box .info_box .map_box {
  flex: 1 0 0;
  align-self: stretch;
}
#container.cont_main .about_sec4 .box .info_box .map_info_box {
  display: flex;
  width: 460px;
  /* padding: 120px 0px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}
#container.cont_main .about_sec4 .box .info_box .map_box .root_daum_roughmap_landing {
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 10px;
}
#container.cont_main .about_sec4 .box .info_box .map_box .root_daum_roughmap .wrap_btn_zoom {
  display: none !important;
}
#container.cont_main .about_sec4 .box .info_box .map_box .roughmap_maker_label .roughmap_lebel_text {
  /* display: none !important; */
}
#container.cont_main .about_sec4 .box .info_box .map_info_box .map_tit {
  align-self: stretch;
  color: #FFF;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .about_sec4 .box .info_box .map_info_box .map_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
#container.cont_main .about_sec4 .box .info_box .map_info_box .map_info .tit {
  align-self: stretch;
  color: #D8D8D8;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;

  border-bottom: 1px solid #717171;
  padding-bottom: 10px;
}
#container.cont_main .about_sec4 .box .info_box .map_info_box .map_info .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}
#container.cont_main .about_sec4 .box .we_here .map_info_box .map_info .txt span {
  align-self: stretch;
  color: #D8D8D8;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

#container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .bottom_arrow {
  display: none;
  width: 30px;
  height: 55px;
  background: center / cover no-repeat url(../images/common/250729_about_bottom_arrow.svg);
}

@media screen and (min-width:5400px){
  #container.cont_main .about_sec4 .add_box {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  #container.cont_main .about_sec4 .box:first-child {
    margin-bottom: 300px;
  }
}

@media screen and (max-width:1940px){
  #container.cont_main .about_sec1 .title_box {
    padding: 87px 140px 0px 140px;
  }
  #container.cont_main .about_sec1 .box {
    padding: 60px 140px 120px 140px;
  }
  #container.cont_main .about_sec1 .box .about_banner {
    height: 350px;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box {
    padding-left: 200px;
  }
}
@media screen and (max-width:1750px){
  #container.cont_main .about_sec1 .box .visual_guide_box {
    padding-left: 75px;
  }
  #container.cont_main .about_sec2 .box .type_box ul {
    gap: 20px;
  }
}
@media screen and (max-width:1490px){
  #container.cont_main .about_sec1 .title_box {
    padding: 155px 140px 0px 140px;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box .visual_guide {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box .arrow_box .stroke {
    display: none;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box .arrow_box .arrow {
    display: none;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .bottom_arrow {
    display: block;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box {
    padding-left: unset;
  }

  /* #container.cont_main .about_sec2 {
    background: center/cover no-repeat url(../images/common/250917_about_01.gif);
  } */
  #container.cont_main .about_sec2 .box {
    padding: 80px 130px;
  }
  #container.cont_main .about_sec2 .box .type_box ul {
    /* flex-wrap: unset;
    flex-direction: column; */
    flex-wrap: wrap;
  }
  #container.cont_main .about_sec2 .box .type_box ul li {
    flex: calc(100% / 2 - 10px);
    overflow: unset;
    padding: 32px;
    align-items: flex-start;
  }
  #container.cont_main .about_sec2 .box .type_box ul li .txt_box {
    flex-direction: unset;
    gap: 24px;
  }
  #container.cont_main .about_sec2 .box .tit_box.sub {
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  #container.cont_main .about_sec2 .box .type_box ul li .txt_box .sub {
    text-align: left;
  }

  /* #container.cont_main .about_sec3 {
    background: center/cover no-repeat url(../images/common/250917_about_02.gif);
  } */
  #container.cont_main .about_sec3 .box {
    padding: 80px 130px;
  }
  #container.cont_main .about_sec3 .box .type_box ul {
    flex-wrap: unset;
    flex-direction: column;
  }
  #container.cont_main .about_sec3 .box .type_box ul li {
    width: 100% !important;
  }
  #container.cont_main .about_sec3 .box_card {
    transform: perspective(2500px) rotateY(0deg);
  }
  #container.cont_main .about_sec3 .box_card_hover:hover .box_card {
    transform: perspective(2500px) rotateY(180deg);
  }
  
  #container.cont_main .about_sec4 .box:first-child {
    padding: 80px 130px;
  }
  #container.cont_main .about_sec4 .box .type_box ul {
    flex-wrap: unset;
    flex-direction: column;
  }
  
  #container.cont_main .about_sec4 .box .we_here {
    padding: 80px 130px;
  }
  #container.cont_main .about_sec4 .box .info_box {
    flex-direction: column;
    padding-right: unset;
    gap: 0px;
  }
  #container.cont_main .about_sec4 .box .info_box .map_info_box {
    width: 100%;
    padding: 36px 0px 55px 0px;
  }
  #container.cont_main .about_sec4 .box .type_box ul li .txt_box .section_line {
    display: none;
  }
}
@media screen and (max-width:1320px){
  #container.cont_main .about_sec1 .title_box {
    padding: 135px 100px 0px 100px;
  }
  #container.cont_main .about_sec1 .box {
    padding: 45px 100px 100px 100px;
  }
  #container.cont_main .about_sec1 .box .about_banner {
    height: 300px;
  }
  #container.cont_main .about_sec1 .title_box h2 {
    font-size: 50px;
  }
  #container.cont_main .about_sec1 .box .tit_box {
    flex-direction: column;
  }
}
@media screen and (max-width:1023px){
  #container.cont_main .about_sec1 .title_box {
    padding: 135px 50px 0px 50px;
  }
  #container.cont_main .about_sec1 .box {
    padding: 40px 50px 80px 50px;
  }
  #container.cont_main .about_sec1 .box .about_banner {
    height: 200px;
  }
  #container.cont_main .about_sec1 .title_box h2 {
    font-size: 37px;
  }

  #container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .tit {
    border-top: unset;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area {
    display: none;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box .step_area_m {
    display: block;
    width: 312px;
    height: 300px;
    aspect-ratio: 26/25;
    background: center / cover no-repeat url(../images/common/250729_about_step_ico_m.svg);
  }
  #container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .step_box {
    align-items: center;
  }
  #container.cont_main .about_sec1 .box .visual_guide_box .visual_guide .result_box {
    width: 328px;
    height: 328px;
  }

  #container.cont_main .about_sec2 .box {
    padding: 70px 80px;
  }
  #container.cont_main .about_sec2 .box .type_box ul {
    flex-wrap: unset;
    flex-direction: column;
  }


  #container.cont_main .about_sec3 .box {
    padding: 70px 80px;
  }


  #container.cont_main .about_sec4 .box:first-child {
    padding: 70px 80px;
  }
  #container.cont_main .about_sec4 .box .we_here {
    padding: 70px 80px;
  }
  #container.cont_main .about_sec4 .box .type_box ul li .txt_box {
    gap: 8px;
  }
  #container.cont_main .about_sec4 .box .type_box ul li .txt_box .tit {
    font-size: 24px;
  }
  #container.cont_main .about_sec4 .box .we_here > .tit {
    font-size: 34px;
    gap: 12px;

  }
  #container.cont_main .about_sec4 .box .we_here > .tit .ico {
    width: 48px;
    height: 48px;
  }
}
@media screen and (max-width:767px){
  #container.cont_main .about_sec1 .title_box {
    padding: 130px 16px 0px 16px;
  }
  #container.cont_main .about_sec1 .box {
    padding: 35px 16px 60px 16px;
  }
  #container.cont_main .about_sec1 .box .about_banner {
    height: 150px;
  }
  #container.cont_main .about_sec1 .title_box h2 {
    font-size: 37px;
  }
  #container.cont_main .about_sec1 .box .tit_box {
    gap: 16px;
  }
  #container.cont_main .about_sec1 .box .tit_box .tit1 {
    font-size: 32px;
  }
  #container.cont_main .about_sec1 .box .tit_box .tit2 .type1 {
    font-size: 20px;
  }
  #container.cont_main .about_sec1 .box .tit_box .tit2 .type2 {
    font-size: 14px;
  }

  /* #container.cont_main .about_sec2 {
    background: center/cover no-repeat url(../images/common/250917_about_01.gif);
  } */
  #container.cont_main .about_sec2 .box {
    padding: 60px 16px;
    gap: 24px;
  }
  #container.cont_main .about_sec2 .box .tit_box .tit {
    font-size: 32px;
  }
  #container.cont_main .about_sec2 .box .tit_box .sub {
    font-size: 20px;
  }
  #container.cont_main .about_sec2 .box .type_box ul li {
    overflow: unset;
    padding: 16px;
    /* align-items: flex-start; */
  }
  /* #container.cont_main .about_sec2 .box .type_box ul li .txt_box {
    width: 100%;
  } */
  #container.cont_main .about_sec2 .box .type_box ul li .txt_box .num {
    font-size: 20px;
  }
  #container.cont_main .about_sec2 .box .type_box ul li .txt_box .tit {
    font-size: 20px;
  }
  #container.cont_main .about_sec2 .box .type_box ul li .txt_box .ico {
    width: 70px;
    height: 70px;
  }

  /* #container.cont_main .about_sec3 {
    background: center/cover no-repeat url(../images/common/250917_about_02.gif);
  } */
  #container.cont_main .about_sec3 .box {
    padding: 60px 16px;
    gap: 24px;
  }
  #container.cont_main .about_sec3 .box .tit_box .tit {
    font-size: 32px;
  }
  #container.cont_main .about_sec3 .box .tit_box .sub {
    font-size: 16px;
  }
  #container.cont_main .about_sec3 .box .type_box ul li .txt_box {
    padding: 16px;
  }
  #container.cont_main .about_sec3 .box .type_box ul li .txt_box .num {
    font-size: 16px;
  }
  #container.cont_main .about_sec3 .box .type_box ul li .txt_box .tit {
    font-size: 16px;
  }
  #container.cont_main .about_sec3 .box .type_box ul.type1 {
    gap: 16px;
  }
  #container.cont_main .about_sec3 .box_card .box_card_front .box_card_front_con .txt .tit {
    font-size: 20px;
  }
  #container.cont_main .about_sec3 .box_card .box_card_back .box_card_back_con .txt .tit {
    font-size: 20px;
  }
  #container.cont_main .about_sec3 .box_card .card_ico {
    width: 70px;
    height: 70px;
  }
  #container.cont_main .about_sec3 .box_card .card_more {
    width: 50px;
    height: 50px;
  }

  
  #container.cont_main .about_sec4 .box:first-child {
    padding: 60px 16px;
    gap: 16px;
  }
  #container.cont_main .about_sec4 .box:first-child .tit_box .tit {
    font-size: 24px;
  }
  #container.cont_main .about_sec4 .box .type_box ul li .txt_box {
    padding: 24px;
    cursor: pointer;
  }
  #container.cont_main .about_sec4 .box .type_box ul li .txt_box .tit {
    /* font-size: 18px; */
  }
  #container.cont_main .about_sec4 .box .type_box ul li .txt_box .sub {
    display: none;
    font-size: 14px;
  }
  #container.cont_main .about_sec4 .box .type_box ul li .txt_box.view_box .sub {
    display: inline;
  }
  #container.cont_main .about_sec4 .box .we_here {
    padding: 40px 16px;
  }
  #container.cont_main .about_sec4 .box .info_box .map_info_box {
    padding: 35px 0px;
    gap: 24px;
  }
  #container.cont_main .about_sec4 .box .info_box .map_info_box .map_tit {
    font-size: 32px;
  }
  #container.cont_main .about_sec4 .box .info_box .map_info_box .map_info .tit {
    font-size: 20px;
  }
  #container.cont_main .about_sec4 .box .info_box .map_info_box .map_info .txt span {
    font-size: 16px;
  }

  #container.cont_main .about_sec4 .box .we_here > .tit {
    font-size: 24px;
    gap: 8px;
  }
  #container.cont_main .about_sec4 .box .we_here > .tit .ico {
    width: 34px;
    height: 34px;
  }
}
@media screen and (max-width:500px){
  #container.cont_main .about_sec1 .box {
    padding: 24px 16px 60px 16px;
  }
  #container.cont_main .about_sec1 .box .about_banner {
    height: 100px;
  }
  #container.cont_main .about_sec1 .title_box h2 {
    font-size: 24px;
  }
}



/*about*/




/*service*/
#container.cont_main .service_sec1 {
  padding-top: 90px;
  margin-bottom: 0px;
  gap: 0px;
}
#container.cont_main .service_sec1 .title_box {
  display: flex;
  padding: 80px 200px 0px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#container.cont_main .service_sec1 .title_box h2 {
  color: #1d1d1d;
  text-align: center;
  font-family: "GmarketSans";
  font-size: 56px;
  font-style: normal;
  font-weight: 100;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec2 .box {
  display: flex;
  padding: 40px 200px 80px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 120px;
  align-self: stretch;
}
#container.cont_main .service_sec2 .box .service_banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  height: 400px;
  padding: 60px;
  align-self: stretch;
  border-radius: 10px;
  background-image: url(../images/common/250711_service_banner.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .service_sec2 .box .service_tab_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}
#container.cont_main .service_sec2 .box .service_tab_box .button_area {
  display: flex;
  height: 40px;
  align-items: flex-start;
  /* justify-content: center; */
  gap: 4px;
  width: 100%;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box {
  width: 100%;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  flex-wrap: wrap;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul.custom {
  display: none;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li {
  display: flex;
  padding: 30px;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul.basic li.w_25 {
  width: calc((100% - 72px) / 4);
  background: #F0F0F0;
  align-self: stretch;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul.custom li.w_33 {
  width: calc((100% - 48px) / 3);
  background: #F0F0F0;
  align-self: stretch;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .txt_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .txt_box .tit {
  color: #1d1d1d;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .txt_box .txt {
  color: #1d1d1d;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type1 {
  background: url(../images/common/250711_service_ico3.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type2 {
  background: url(../images/common/250711_service_ico4.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type3 {
  background: url(../images/common/250711_service_ico7.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type4 {
  background: url(../images/common/250711_service_ico10.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type5 {
  background: url(../images/common/250711_service_ico9.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type6 {
  background: url(../images/common/250711_service_ico5.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type7 {
  background: url(../images/common/250711_service_ico2.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type8 {
  background: url(../images/common/250711_service_ico6.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type9 {
  background: url(../images/common/250711_service_ico11.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type10 {
  background: url(../images/common/250711_service_ico12.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type11 {
  background: url(../images/common/250711_service_ico13.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type12 {
  background: url(../images/common/250711_service_ico14.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type13 {
  background: url(../images/common/250711_service_ico15.png) 0px 0px / 100% 100% no-repeat;
}
#container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type14 {
  background: url(../images/common/250711_service_ico16.png) 0px 0px / 100% 100% no-repeat;
}


#container.cont_main .service_sec3 {
  margin: unset;
  max-width: unset;
}
#container.cont_main .service_sec3 .box.basic {
  display: block;
}
#container.cont_main .service_sec3 .box .con_box_m {
  display: none;
}
#container.cont_main .service_sec3 .box .con_box_m.type1 {
  background: #F8F8F8;
}
#container.cont_main .service_sec3 .box .con_box_m.type2 {
  background: #fff;
}
#container.cont_main .service_sec3 .box .con_box {
  display: flex;
  padding: 140px 200px;
  justify-content: center;
  align-items: flex-end;
  gap: 100px;
  align-self: stretch;
  background: #000;
}
#container.cont_main .service_sec3 .box .con_box.type1 {
  background: #F8F8F8;
}
#container.cont_main .service_sec3 .box .con_box.type2 {
  background: #fff;
}
#container.cont_main .service_sec3 .box .img {
  width: 620px;
  height: 340px;
  flex-shrink: 0;
  border-radius: 10px;
}
#container.cont_main .service_sec3 .box .img.type1 {
  background: url(../images/common/250930_service_img1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .service_sec3 .box .img.type2 {
  background: url(../images/common/250930_service_img2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .service_sec3 .box .img.type3 {
  background: url(../images/common/250930_service_img3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .service_sec3 .box .img.type4 {
  background: url(../images/common/250930_service_img4.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .service_sec3 .box .img.type5 {
  background: url(../images/common/250930_service_img5.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .service_sec3 .box .txt_box {
  display: flex;
  width: 695px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
#container.cont_main .service_sec3 .box .txt_box .txt_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#container.cont_main .service_sec3 .box .txt_box .txt_area .ico {
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .service_sec3 .box .txt_box .txt_area .ico.type1 {
  background: url(../images/common/250711_service_ico1.png);
}
#container.cont_main .service_sec3 .box .txt_box .txt_area .ico.type2 {
  background: url(../images/common/250711_service_ico3.png);
}
#container.cont_main .service_sec3 .box .txt_box .txt_area .ico.type3 {
  background: url(../images/common/250711_service_ico9.png);
}
#container.cont_main .service_sec3 .box .txt_box .txt_area .ico.type4 {
  background: url(../images/common/250711_service_ico5.png);
}
#container.cont_main .service_sec3 .box .txt_box .txt_area .ico.type5 {
  background: url(../images/common/250711_service_ico6.png);
}
#container.cont_main .service_sec3 .box .txt_box .txt_area .tit {
  align-self: stretch;
  color: #1d1d1d;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec3 .box .txt_box .txt_area .txt {
  align-self: stretch;
  color: #1d1d1d;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec3 .hash_area {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
#container.cont_main .service_sec3 .hash_area .hash_item {
  display: flex;
  flex: 1;
  width: 200px;
  padding: 16px 8px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: #2D2D2D;
  color: #D8D8D8;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}

#container.cont_main .service_sec3 .box.custom {
  display: none;
  /* padding: 0px 200px; */
  flex-direction: column;
  justify-content: flex-end;
  /* gap: 100px; */
  align-self: stretch;
}
#container.cont_main .service_sec3 .box.custom .txt_area {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
  flex-direction: row;
}
#container.cont_main .service_sec3 .box.custom .txt_area .txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
}
#container.cont_main .service_sec3 .box.custom .hash_area .hash_item {
  flex: unset;
  width: 160px;
}
#container.cont_main .service_sec3 .box.custom .step_box {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
#container.cont_main .service_sec3 .box.custom .step_box .img {
  height: 200px;
  flex: 1 0 0;
  background: #D9D9D9;
}
#container.cont_main .service_sec3 .box.custom .step_box .next_area {
  display: flex;
  padding: 0px 10px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
#container.cont_main .service_sec3 .box.custom .step_box .next_area .next_ico {
  width: 60px;
  height: 200px;
  background-image: url(../images/common/250711_service_next_ico.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}




#container.cont_main .service_sec3 .box.custom .module_box {
  display: flex;
  padding: 120px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  align-self: stretch;
}
#container.cont_main .service_sec3 .box.custom .module_box.module_bg1 {
  background: #000 center / cover no-repeat url(../images/common/250730_service_custom_bg1.png);
}
#container.cont_main .service_sec3 .box.custom .module_box.module_bg2 {
  background: #000 center / cover no-repeat url(../images/common/250730_service_custom_bg2.png);
}
#container.cont_main .service_sec3 .box.custom .module_box.module_bg3 {
  background: #000 center / cover no-repeat url(../images/common/250730_service_custom_bg3.png);
}
#container.cont_main .service_sec3 .box.custom .module_box.module_bg4 {
  background: #000 center / cover no-repeat url(../images/common/250730_service_custom_bg4.png);
}
#container.cont_main .service_sec3 .box.custom .module_box.module_bg5 {
  background: #000 center / cover no-repeat url(../images/common/250730_service_custom_bg5.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .center_box {
  margin: auto;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: 80px;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box {
  display: flex;
  width: 620px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  color: #FFF;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_txt .banner_tit {
  align-self: stretch;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_txt p {
  align-self: stretch;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_hash {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_hash .banner_hash_item {
  display: flex;
  width: 160px;
  padding: 16px;
  justify-content: center;
  align-items: center;

  border-radius: 10px;
  background: #2D2D2D;

  color: #D8D8D8;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico {
  width: 520px;
  height: 380px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type1 {
  background-image: url(../images/common/250715_module_banner_ico1.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type2 {
  background-image: url(../images/common/250715_module_banner_ico2.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type3 {
  background-image: url(../images/common/250715_module_banner_ico3.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type4 {
  background-image: url(../images/common/250715_module_banner_ico4.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type5 {
  background-image: url(../images/common/250715_module_banner_ico5.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m {
  display: none;
  width: 328px;
  height: 180px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type1 {
  background-image: url(../images/common/250715_module_banner_ico1.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type2 {
  background-image: url(../images/common/250715_module_banner_ico2.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type3 {
  background-image: url(../images/common/250715_module_banner_ico3.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type4 {
  background-image: url(../images/common/250715_module_banner_ico4.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type5 {
  background-image: url(../images/common/250715_module_banner_ico5.svg);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_area {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box {
  display: flex;
  width: 650px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 120px;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box.left_box {
  
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box.right_box {
  padding-top: 120px;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item {
  display: flex;
  padding: 40px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-self: stretch;

  border-radius: 20px;
  background: #1F1F1F;
  
  position: relative;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_tit {
  display: flex;
  padding: 10px 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  position: absolute;
  top: -30px;
  left: 0;

  border-radius: 20px 0px;
  background: #8E0916;

  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_txt {
  display: flex;
  width: 201px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_txt .step_type {
  display: flex;
  padding: 4px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;

  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_item .step_txt .step_type.type1 {
  background: #FFF;
  color: #8E0916;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_txt .step_type.type2 {
  color: #FFF;
  background: #2D2D2D;
  border: 1px solid #FFF;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_txt p {
  align-self: stretch;
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico {
  width: 320px;
  height: 240px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type1 {
  background-image: url(../images/common/250930_service_ico1_1.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type2 {
  background-image: url(../images/common/250930_service_ico1_2.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type3 {
  background-image: url(../images/common/250930_service_ico1_3.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type4 {
  background-image: url(../images/common/250930_service_ico1_4.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type5 {
  background-image: url(../images/common/250930_service_ico2_1.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type6 {
  background-image: url(../images/common/250930_service_ico2_2.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type7 {
  background-image: url(../images/common/250930_service_ico2_3.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type8 {
  background-image: url(../images/common/250930_service_ico2_4.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type9 {
  background-image: url(../images/common/250930_service_ico3_1.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type10 {
  background-image: url(../images/common/250930_service_ico3_2.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type11 {
  background-image: url(../images/common/250930_service_ico3_3.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type12 {
  background-image: url(../images/common/250930_service_ico3_4.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type13 {
  background-image: url(../images/common/250930_service_ico4_1.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type14 {
  background-image: url(../images/common/250930_service_ico4_2.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type15 {
  background-image: url(../images/common/250930_service_ico4_3.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type16 {
  background-image: url(../images/common/250930_service_ico4_4.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type17 {
  background-image: url(../images/common/250930_service_ico5_1.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type18 {
  background-image: url(../images/common/250930_service_ico5_2.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type19 {
  background-image: url(../images/common/250930_service_ico5_3.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_box .step_item .step_ico.type20 {
  background-image: url(../images/common/250930_service_ico5_4.png);
}
#container.cont_main .service_sec3 .box.custom .module_box .step_area_m {
  display: none;
}


@media screen and (max-width:1940px){
  #container.cont_main .service_sec1 .title_box {
    padding: 65px 140px 0px 140px;
  }
  #container.cont_main .service_sec2 .box {
    padding: 40px 140px 120px 140px;
  }
  #container.cont_main .service_sec3 .box .con_box {
    padding: 60px 140px 120px 140px;
    gap: 60px;
  }
  #container.cont_main .service_sec2 .box .service_banner {
    height: 350px;
  }
}
@media screen and (max-width:1800px){
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul.basic li.w_25 {
    flex-direction: column;
    align-items: center;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul.custom li.w_33 {
    flex-direction: column;
    align-items: center;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico.type4 {
    order: 1;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .txt_box {
    align-items: center;
    order: 2;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .txt_box .txt {
    text-align: center;
  }
  #container.cont_main .service_sec3 .box .img {
    width: 555px;
    height: 311px;
  }
  #container.cont_main .service_sec3 .box .txt_box {
    width: 681px;
  }
  #container.cont_main .service_sec3 .hash_area .hash_item {
    padding: 13px 8px;
  }
}
@media screen and (max-width:1490px){
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul.basic li.w_25 {
    width: calc((100% - 24px) / 2);
  }
  #container.cont_main .service_sec2 .box .service_tab_box a.button_type3 {
    width: calc(50% - 52px);
  }
  #container.cont_main .service_sec3 .box .con_box {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  #container.cont_main .service_sec3 .box .txt_box .txt_area {
    align-items: center;
  }
  #container.cont_main .service_sec3 .box .txt_box .txt_area .tit,
  #container.cont_main .service_sec3 .box .txt_box .txt_area .txt {
    text-align: center;
  }
  #container.cont_main .service_sec3 .box .con_box .img.type1 {
    order: 1;
  }
  #container.cont_main .service_sec3 .box .con_box .txt_box {
    order: 2;
  }

  #container.cont_main .service_sec3 .box.custom .module_box .module_banner {
    justify-content: center;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box {
    width: unset;
    padding: 40px 16px 24px 16px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type1,
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type2,
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type3,
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type4,
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico.type5 {
    display: none;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m {
    display: block;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_txt {
    align-items: center;
    gap: 16px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_txt .banner_tit {
    text-align: center;
    font-size: 34px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_txt p {
    text-align: left;
    font-size: 18px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_hash {
    justify-content: left;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_hash .banner_hash_item {
    width: unset;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type1,
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type2,
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type3,
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type4,
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_ico_m.type5 {
    height: unset;
    width: 100%;
    padding-bottom: 46%;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area {
    display: none;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m {
    display: flex;
    padding: 0 16px 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box {
    gap: 20px;
    /* padding: 0 16px 16px 0; */
    width: unset;
    background: #1F1F1F;
    border-radius: 10px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_tit {
    display: flex;
    padding: 7px 17px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: unset;
    font-size: 20px;
    border-radius: 10px 0;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    padding: 30px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_txt p {
    font-size: 21px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type1,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type2,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type3,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type4,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type5,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type6,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type7,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type8,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type9,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type10,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type11,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type12,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type13,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type14,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type15,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type16,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type17,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type18,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type19,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type20 {
    height: unset;
    width: 57%;
    padding-bottom: 42%;
  }
  
  #container.cont_main .service_sec3 .box.custom .module_box .center_box {
    width: 623px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box {
    width: 100%;
  }
  #container.cont_main .service_sec3 .box.custom .module_box {
    padding: 60px 0;
  }
  
  
}
@media screen and (max-width:1320px){
  #container.cont_main .service_sec1 .title_box {
    padding: 45px 100px 0px 100px;
  }
  #container.cont_main .service_sec1 .title_box h2 {
    font-size: 50px;
  }
  #container.cont_main .service_sec2 .box {
    padding: 20px 100px 100px 100px;
  }
  #container.cont_main .service_sec2 .box .service_banner {
    height: 300px;
  }
  #container.cont_main .service_sec2 .box .service_tab_box {
    gap: 24px;
  }
}
@media screen and (max-width:1023px){
  #container.cont_main .service_sec1 .title_box {
    padding: 45px 50px 0px 50px;
  }
  #container.cont_main .service_sec1 .title_box h2 {
    font-size: 37px;
  }
  #container.cont_main .service_sec2 .box {
    padding: 40px 50px 80px 50px;
  }
  #container.cont_main .service_sec2 .box .service_banner {
    height: 200px;
  }

  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul.custom li.w_33 {
    width: calc((100% - 24px) / 2);
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul.basic li.w_25 {
    width: calc((100% - 24px) / 2);
  }
}
@media screen and (max-width:767px){
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_txt .banner_tit {
    font-size: 24px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_txt p {
    font-size: 14px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .center_box {
    width: 500px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_tit {
    padding: 4px 12px;
    font-size: 16px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_txt p {
    font-size: 16px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type1,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type2,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type3,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type4,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type5,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type6,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type7,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type8,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type9,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type10,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type11,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type12,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type13,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type14,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type15,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type16,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type17,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type18,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type19,
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item .step_ico.type20 {
    width: 50%;
    padding-bottom: 35%;
  }



  #container.cont_main .service_sec3 .box.custom .module_box {
    padding: 40px 0;
  }
  #container.cont_main .service_sec3 .box.custom .module_box.module_bg1,
  #container.cont_main .service_sec3 .box.custom .module_box.module_bg2,
  #container.cont_main .service_sec3 .box.custom .module_box.module_bg3,
  #container.cont_main .service_sec3 .box.custom .module_box.module_bg4,
  #container.cont_main .service_sec3 .box.custom .module_box.module_bg5 {
    background-size: 223% 44%;
    background-position: top;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner {
    margin-bottom: 24px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_hash {
    gap: 8px;
    flex-wrap: wrap;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_hash .banner_hash_item {
    width: calc((100% - 8px) / 2);
    padding: 8px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box .banner_hash .banner_hash_item.w_100 {
    width: calc(100%);
  }
  #container.cont_main .service_sec1 .title_box {
    padding: 40px 16px 0px 16px;
  }
  #container.cont_main .service_sec2 .box {
    padding: 35px 16px 60px 16px;
    gap: 24px;
  }
  #container.cont_main .service_sec3 .box .con_box {
    display: none;
  }

  #container.cont_main .service_sec3 .box .con_box_m {
    display: block;
    padding: 40px 16px;
  }
  #container.cont_main .service_sec3 .box .con_box_m .txt_box {
    width: 100%;
  }
  #container.cont_main .service_sec3 .box .con_box_m .txt_box .txt_area .ico {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: cover;
  }
  #container.cont_main .service_sec3 .box .con_box_m .txt_box .txt_area .tit {
    font-size: 24px;
  }
  #container.cont_main .service_sec3 .box .con_box_m .txt_box .txt_area .tit {
    display: flex;
    align-items: center;
  }
  #container.cont_main .service_sec3 .box .con_box_m .txt_box .txt_area .txt {
    text-align: left;
    font-size: 14px;
  }
  #container.cont_main .service_sec3 .box .con_box_m .img {
    width: 100%;
    height: unset;
    padding-bottom: 56%;
    background-position: unset;
  }
  #container.cont_main .service_sec3 .box .con_box_m .hash_area {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
  }
  #container.cont_main .service_sec3 .box .con_box_m .hash_area .hash_item {
    flex: unset;
    width: calc((100% - 8px) / 2);
    padding: 8px 5px;
  }
  #container.cont_main .service_sec3 .box .con_box_m .hash_area .hash_item.w_100 {
    flex: unset;
    width: calc(100%);
  }

  #container.cont_main .service_sec2 .box .service_banner {
    height: 150px;
  }

  #container.cont_main .service_sec2 .box .service_tab_box {
    gap: 24px;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul {
    gap: 16px;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul li {
    padding: 16px 8px;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .ico {
    width: 40px;
    height: 40px;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .txt_box .tit {
    font-size: 16px;
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul li .txt_box .txt {
    font-size: 13px;
  }
  #container.cont_main .service_sec2 .box .service_tab_box a.button_type3 {
    width: calc(50% - 36px);
  }

  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul.custom li.w_33 {
    width: calc((100% - 16px) / 2);
  }
  #container.cont_main .service_sec2 .box .service_tab_box .option_box ul.basic li.w_25 {
    width: calc((100% - 16px) / 2);
  }

  a.button_type3 {
    padding: 4px 16px;
  }


}
@media screen and (max-width:500px){
  #container.cont_main .service_sec1 .title_box h2 {
    font-size: 24px;
  }
  #container.cont_main .service_sec2 .box {
    padding: 24px 16px 40px 16px;
  }
  #container.cont_main .service_sec3 .box .con_box {
    padding: 24px 16px 40px 16px;
  }
  #container.cont_main .service_sec2 .box .service_banner {
    height: 100px;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .center_box {
    width: 100%;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .module_banner .banner_box {
    width: unset;
  }
  #container.cont_main .service_sec3 .box.custom .module_box .step_area_m .step_box .step_item {
    align-items: center;
    padding: 0px 16px 16px 16px;
  }
}

/*service*/




/*project*/
#container.cont_main .project_sec1 {
  padding-top: 90px;
  margin-bottom: 0px;
  gap: 0px;
}
#container.cont_main .project_sec1 .title_box {
  display: flex;
  padding: 80px 200px 0px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#container.cont_main .project_sec1 .title_box h2 {
  color: #1d1d1d;
  text-align: center;
  font-family: "GmarketSans";
  font-size: 56px;
  font-style: normal;
  font-weight: 100;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .project_sec2 .box.type1 {
  padding: 80px 200px 0 200px;
}
#container.cont_main .project_sec2 .box {
  display: flex;
  padding: 40px 200px 80px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  align-self: stretch;
}
#container.cont_main .project_sec2 .box .project_banner {
  display: flex;
  /* width: 1520px; */
  width: 100%;
  height: 400px;
  padding: 60px 820px 60px 60px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  /* border-radius: 10px; */
  /* border: 1px solid #C6C6C6; */
}
#container.cont_main .project_sec2 .box .project_banner.item1 {
  /* background: linear-gradient(90deg, #212121 0%, #212121 40%, rgba(33, 33, 33, 0.00) 60%), url(../images/common/250709_project_list1.png) lightgray 100% / 70% no-repeat; */
  background: center / cover no-repeat url(../images/common/2508056_project_banner1.png);
}
#container.cont_main .project_sec2 .box .project_banner.item2 {
  /* background: linear-gradient(90deg, #212121 0%, #212121 40%, rgba(33, 33, 33, 0.00) 60%), url(../images/common/250709_project_list7.png) lightgray 100% / 70% no-repeat; */
  background: center / cover no-repeat url(../images/common/2508056_project_banner2.png);
}
#container.cont_main .project_sec2 .box .project_banner.item3 {
  /* background: linear-gradient(90deg, #212121 0%, #212121 40%, rgba(33, 33, 33, 0.00) 60%), url(../images/common/250709_project_list3.png) lightgray 100% / 70% no-repeat; */
  background: center / cover no-repeat url(../images/common/2508056_project_banner3.png);
}
#container.cont_main .project_sec2 .box .project_banner.item4 {
  /* background: linear-gradient(90deg, #212121 0%, #212121 40%, rgba(33, 33, 33, 0.00) 60%), url(../images/common/250709_project_list4.png) lightgray 100% / 70% no-repeat; */
  background: center / cover no-repeat url(../images/common/2508056_project_banner4.png);
}
#container.cont_main .project_sec2 .box .project_banner .txt {
  width: 100%;
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);

  color: #999;
  font-size: 40px;
  font-style: normal;
  font-weight: 200;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .project_sec2 .box .project_banner .info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
#container.cont_main .project_sec2 .box .project_banner .info .info_box {
  display: flex;
  flex: 1 0 0;
}
#container.cont_main .project_sec2 .box .project_banner .info .info_box ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}
#container.cont_main .project_sec2 .box .project_banner .info .info_box ul li {
  display: flex;
  width: 100%;
  height: 28px;
  align-items: flex-start;
  gap: 8px;
}
#container.cont_main .project_sec2 .box .project_banner .info .info_box ul li span {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#container.cont_main .project_sec2 .box .project_banner .info .info_box ul li span.tit {
  width: 70px;
  flex-shrink: 0;
  color: #D8D8D8;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

#container.cont_main .project_sec2 .box .project_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}
#container.cont_main .project_sec2 .box .category {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#container.cont_main .project_sec2 .box .category_box {
  width: 100%;
  overflow-x: auto;
  position: relative;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
#container.cont_main .project_sec2 .box .category_box::-webkit-scrollbar {
  display: none;
}
#container.cont_main .project_sec2 .box .category_box .category_button {
  display: flex;
  width: 100%;
  height: 46px;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}
#container.cont_main .project_sec2 .box .project_box .project_list {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  gap: 48px 24px;
  flex-wrap: wrap;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li {
  display: flex;
  width: 490px;
  height: 320px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;

  border: 1px solid #c6c6c6;
  border-radius: 15px;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 19.67%, #111 100%);
  pointer-events: none;
  border-radius: 15px;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li a {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li .info {
  display: flex;
  width: 426px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li .info .tit {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li .info .hash_tag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li .info .hash_tag span {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.20);

  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li .info .hash_tag span.btn-detail {
  background: unset;
  border: 1px solid #ffffff81;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li .info .hash_tag span.btn-detail span {
  background: unset;
  color: #FFF;
  font-weight: 500;
  padding: 0px;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li .info .hash_tag span.btn-detail span.plus-ico {
  width: 16px;
  height: 16px;
  aspect-ratio: 1/1;
  background: center / cover no-repeat url(../images/common/250729_plus_white.svg);
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li:hover .info .hash_tag span.btn-detail {
  background: #ED0F25;
  border: 1px solid #ffffff00;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li:hover .info .hash_tag span.btn-detail span {
  color: #FFF;
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li:hover .info .hash_tag span.btn-detail span.plus-ico {
  background: center / cover no-repeat url(../images/common/250729_plus_white.svg);
}
#container.cont_main .project_sec2 .box .project_box .project_list ul li:hover a img {
  transform: scale(1.1);
  transition: 0.4s ease;
}

/*** swiper ***/
#container.cont_main .project_sec2 .swiper-area {
  width: 100%;
  position: relative;
  border: 1px solid #C6C6C6;
}
#container.cont_main .project_sec2 .swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#container.cont_main .project_sec2 .control_box {
  display: inline-flex;
  padding: 8px 24px;
  align-items: center;
  gap: 16px;
  border-radius: 32px 0 0 0;
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(5px);
  position: absolute;
  right: 0%;
  bottom: 0px;
  z-index: 1;
}
#container.cont_main .project_sec2 .control_box .swiper-pagination {
  position: unset;
  width: unset;
}
#container.cont_main .project_sec2 .control_box .swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin-left: 8px;
  opacity: 0.2;
  background: #2D2D2D;
  border-radius: 25px;
}
#container.cont_main .project_sec2 .control_box .swiper-pagination .swiper-pagination-bullet-active {
  width: 8px;
  height: 8px;
  margin-left: 8px;
  opacity: 1;
  background: #2D2D2D;
  border-radius: 25px;
}
#container.cont_main .project_sec2 .control_box .auto_btn {
  position: unset;
  transform: unset;
  display: flex;
  gap: 9px;
}
#container.cont_main .project_sec2 .control_box .auto_btn .button_box {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#container.cont_main .project_sec2 .control_box .auto_btn .swiper-button-prev {
  background: url(../images/common/250731_swiper_prev_black_left.svg) no-repeat;
  width: 25px;
  height: 25px;
  position: unset;
  left: unset;
  margin-top: unset;
}
#container.cont_main .project_sec2 .control_box .auto_btn .stop {
  display: block;
  width: 25px;
  height: 25px;
  font-size: 0;
  background: url(../images/common/250731_swiper_prev_black_stop.svg) no-repeat;
}
#container.cont_main .project_sec2 .control_box .auto_btn .start {
  display: block;
  width: 12px;
  height: 15px;
  font-size: 0;
  background: url(../images/common/250731_swiper_prev_black_start.svg) no-repeat;
}
#container.cont_main .project_sec2 .control_box .auto_btn .swiper-button-next {
  background: url(../images/common/250731_swiper_prev_black_right.svg) no-repeat;
  width: 25px;
  height: 25px;
  position: unset;
  right: unset;
  margin-top: unset;
}
#container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover {
  border-radius: 40px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), #1D1D1D;
}
#container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover .swiper-button-prev {
  background: url(../images/common/250731_swiper_prev_white_left.svg) no-repeat;
}
#container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover .stop {
  background: url(../images/common/250731_swiper_prev_white_stop.svg) no-repeat;
}
#container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover .start {
  background: url(../images/common/250731_swiper_prev_white_start.svg) no-repeat;
}
#container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover .swiper-button-next {
  background: url(../images/common/250731_swiper_prev_white_right.svg) no-repeat;
}

/*** swiper ***/

/******dimd******/
#dimd.dimd1,
#dimd.dimd2,
#dimd.dimd3,
#dimd.dimd4,
#dimd.dimd5,
#dimd.dimd6,
#dimd.dimd7 {
  display: none;
}
#dimd .dimd_head {
  display: flex;
  height: 616px;
  padding: 40px 460px 0px 460px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;

  margin-bottom: 160px;
}
#dimd .dimd_head .close_button_area {
  display: flex;
  width: 1840px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
#dimd .dimd_head .close_button_area .close_button {
  display: flex;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  position: absolute;
  top: 50px;
  right: 35px;
  background-image: url(../images/common/250710_project_dimd_close.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
}
#dimd .dimd_head .head_img_box {
  width: 900px;
  height: 451px;
  flex-shrink: 0;

  border-radius: 24px 24px 0px 0px;
  overflow: hidden;
  position: relative;
}
#dimd .dimd_head .head_img_box::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -48px 33px -50px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 0;
}

#dimd .dimd_contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1920px;
  gap: 80px;
  align-self: stretch;
  margin: 0px auto 40px;
}
#dimd .dimd_contents .site_info_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  align-self: stretch;
}
#dimd .dimd_contents .site_info_box .con_head {
  display: flex;
  padding: 0px 400px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
#dimd .dimd_contents .site_info_box .con_head .tit_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#dimd .dimd_contents .site_info_box .button_type2.mo {
  display: none;
}
#dimd .dimd_contents .site_info_box .con_head .tit {
  color: #1d1d1d;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
#dimd .dimd_contents .site_info_box .con_head a.button_type2 {
  border: 1px solid #1d1d1d;
}
#dimd .dimd_contents .site_info_box .con_head a.button_type2 span {
  color: #1d1d1d;
}
#dimd .dimd_contents .site_info_box .con_head a.button_type2 .link_ico {
  background-image: url(../images/common/250708_arrow_black_ico.svg);
}

#dimd .dimd_contents .site_info_box .button_type2.mo {
  border: 1px solid #1d1d1d;
}
#dimd .dimd_contents .site_info_box .button_type2.mo span {
  color: #1d1d1d;
}
#dimd .dimd_contents .site_info_box .button_type2.mo span.link_ico {
  background-image: url(../images/common/250708_arrow_black_ico.svg);
}

#dimd .dimd_contents .site_info_box .con_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#dimd .dimd_contents .site_info_box .con_info .concept,
#dimd .dimd_contents .site_info_box .con_info .color_graphiecs {
  display: flex;
  padding: 0px 400px;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#dimd .dimd_contents .site_info_box .con_info .concept .tit {
  width: 160px;
  color: #1d1d1d;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  flex-shrink: 0;
}
#dimd .dimd_contents .site_info_box .con_info .concept .txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#dimd .dimd_contents .site_info_box .con_info .concept .txt span {
  align-self: stretch;
  color: #1d1d1d;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
#dimd .dimd_contents .site_info_box .con_info .concept .txt p {
  align-self: stretch;
  color: #1d1d1d;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd .dimd_contents .site_info_box .con_info .color_graphiecs {
  display: flex;
  padding: 0px 400px;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#dimd .dimd_contents .site_info_box .con_info .color_graphiecs .tit {
  width: 160px;
  color: #1d1d1d;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  flex-shrink: 0;
}
#dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
}

#dimd .dimd_contents .site_img_box {
  display: flex;
  padding: 0px 400px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
#dimd .dimd_contents .site_img_box .site_img {
  flex: 1 0 0;
  border: 1px solid #c6c6c6;
  border-radius: 24px;
}
#dimd .dimd_contents .site_img_box .site_img.none_border {
  border: unset;
  border-radius: unset;
}

#dimd .dimd_btn_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1920px;
  align-self: stretch;
  margin: 0px auto 160px;
}
#dimd .dimd_btn_area .button_type4 {
  width: 120px;
}

#dimd.dimd1 .dimd_head {
  background-image: url(../images/common/250710_project_dimd_top_bg1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#dimd.dimd1 .dimd_head .head_img {
  width: 900px;
  height: 451px;
  border-top: 8px solid #FFF;
  border-right: 8px solid #FFF;
  border-left: 8px solid #FFF;
  border-radius: 24px 24px 0px 0px;
  background: url(../images/common/250710_project_dimd1.png) lightgray 0px 7.574px / 100% 533.696% no-repeat;
}
#dimd.dimd1 .dimd_contents .site_img_box .site_img {
  width: 100%;
  padding-bottom: 266.5%;
  background-image: url(../images/common/250710_project_dimd1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#dimd.dimd1 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1 {
  display: flex;
  width: 50%;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  background: #249C9C;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd1 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #016A6A;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd1 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #FE8678;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

#dimd.dimd2 .dimd_head {
  background-image: url(../images/common/250710_project_dimd_top_bg2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#dimd.dimd2 .dimd_head .head_img {
  width: 900px;
  height: 451px;
  border-top: 8px solid #FFF;
  border-right: 8px solid #FFF;
  border-left: 8px solid #FFF;
  border-radius: 24px 24px 0px 0px;
  background: url(../images/common/250710_project_dimd2.png) lightgray 0px 7.574px / 100% 315.696% no-repeat;
}
#dimd.dimd2 .dimd_contents .site_img_box .site_img {
  width: 100%;
  padding-bottom: 160%;
  background-image: url(../images/common/250710_project_dimd2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#dimd.dimd2 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1 {
  display: flex;
  width: 50%;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  background: #004BD1;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd2 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #000742;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd2 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #CE336C;

  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

#dimd.dimd3 .dimd_head {
  background-image: url(../images/common/250710_project_dimd_top_bg3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#dimd.dimd3 .dimd_head .head_img {
  width: 900px;
  height: 451px;
  border-top: 8px solid #FFF;
  border-right: 8px solid #FFF;
  border-left: 8px solid #FFF;
  border-radius: 24px 24px 0px 0px;
  background: url(../images/common/250710_project_dimd3.png) lightgray 0px 7.574px / 100% 558.696% no-repeat;
}
#dimd.dimd3 .dimd_contents .site_img_box .site_img {
  width: 100%;
  padding-bottom: 200%;
  background-image: url(../images/common/250710_project_dimd3_body.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#dimd.dimd3 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1 {
  display: flex;
  width: 50%;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  background: #683F21;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd3 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #A07A63;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd3 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #31190F;

  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

#dimd.dimd4 .dimd_head {
  background-image: url(../images/common/250710_project_dimd_top_bg4.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#dimd.dimd4 .dimd_head .head_img {
  width: 900px;
  height: 451px;
  border-top: 8px solid #FFF;
  border-right: 8px solid #FFF;
  border-left: 8px solid #FFF;
  border-radius: 24px 24px 0px 0px;
  background: url(../images/common/250710_project_dimd4.png) lightgray 0px 7.574px / 100% 256% no-repeat;
}
#dimd.dimd4 .dimd_contents .site_img_box .site_img {
  width: 100%;
  padding-bottom: 127%;
  background-image: url(../images/common/250710_project_dimd4.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#dimd.dimd4 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1 {
  display: flex;
  width: 50%;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  background: #162B64;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd4 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #1C60E8;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd4 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #FFD343;

  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

#dimd.dimd5 .dimd_head {
  background-image: url(../images/common/250710_project_dimd_top_bg5.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#dimd.dimd5 .dimd_head .head_img {
  width: 900px;
  height: 451px;
  border-top: 8px solid #FFF;
  border-right: 8px solid #FFF;
  border-left: 8px solid #FFF;
  border-radius: 24px 24px 0px 0px;
  background: url(../images/common/250710_project_dimd5.png) lightgray 0px 7.574px / 100% 361.696% no-repeat;
}
#dimd.dimd5 .dimd_contents .site_img_box .site_img {
  width: 100%;
  padding-bottom: 114%;
  background-image: url(../images/common/250710_project_dimd5_body.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#dimd.dimd5 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1 {
  display: flex;
  width: 50%;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  background: #075D5D;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd5 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #097C7C;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd5 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #FFF;

  color: #c6c6c6;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  border: 1px solid #c6c6c6;
}

#dimd.dimd6 .dimd_head {
  background-image: url(../images/common/250710_project_dimd_top_bg6.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#dimd.dimd6 .dimd_head .head_img {
  width: 900px;
  height: 451px;
  border-top: 8px solid #FFF;
  border-right: 8px solid #FFF;
  border-left: 8px solid #FFF;
  border-radius: 24px 24px 0px 0px;
  background: url(../images/common/250710_project_dimd6.png) lightgray 0px 7.574px / 100% 297.696% no-repeat;
}
#dimd.dimd6 .dimd_contents .site_img_box .site_img {
  width: 100%;
  padding-bottom: 149%;
  background-image: url(../images/common/250710_project_dimd6.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#dimd.dimd6 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1 {
  display: flex;
  width: 50%;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  background: #002E6C;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd6 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #57AEFE;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd6 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #FFF;

  color: #c6c6c6;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  border: 1px solid #c6c6c6;
}

#dimd.dimd7 .dimd_head {
  background-image: url(../images/common/250710_project_dimd_top_bg7.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#dimd.dimd7 .dimd_head .head_img {
  width: 900px;
  height: 451px;
  border-top: 8px solid #FFF;
  border-right: 8px solid #FFF;
  border-left: 8px solid #FFF;
  border-radius: 24px 24px 0px 0px;
  background: url(../images/common/250710_project_dimd7.png) lightgray 0px 7.574px / 100% 391.696% no-repeat;
}
#dimd.dimd7 .dimd_contents .site_img_box .site_img {
  width: 100%;
  padding-bottom: 123%;
  background-image: url(../images/common/250710_project_dimd7_body.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#dimd.dimd7 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1 {
  display: flex;
  width: 41%;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  background: #036D95;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd7 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #012D46;

  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd7 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #CCE78A;

  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
#dimd.dimd7 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color4 {
  display: flex;
  height: 94px;
  padding: 16px;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  background: #FFD880;

  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}



/******dimd******/

@media screen and (max-width: 1940px) {
  #container.cont_main .project_sec1 .title_box {
    padding: 65px 140px 0px 140px;
  }
  #container.cont_main .project_sec2 .box.type1 {
    padding: 60px 140px 0 140px;
  }
  #container.cont_main .project_sec2 .box {
    padding: 40px 140px 120px 140px;
    gap: 85px;
  }
  #container.cont_main .project_sec2 .box .project_box {
    gap: 68px;
  }
  #container.cont_main .project_sec2 .box .project_banner {
    height: 350px;
    padding: 45px 820px 45px 60px;
  }
  #container.cont_main .project_sec2 .box .project_banner .txt {
    padding-bottom: 24px;
  }


  #container.cont_main .project_sec2 .box .project_box .project_list ul {
    gap: 24px;
    /* justify-content: center; */
    width: 1200px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li {
    width: 588px;
    height: 320px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li a {
    width: 100%;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li img {
    width: 100%;
    height: 320px;
  }#container.cont_main .project_sec2 .box .project_box .project_list ul li .info {
    width: 100%;
    padding: 20px 20px 0px 20px;
  }
}

@media screen and (max-width:1750px){
  #container.cont_main .project_sec2 .box .project_banner {
    padding: 30px 52px 30px 52px;
  }
  #container.cont_main .project_sec2 .box .project_banner .txt {
    border-bottom: unset;
    padding-bottom: unset;
    font-size: 36px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info {
    flex-direction: column;
    gap: 20px;
  }

  #dimd .dimd_contents .site_info_box .con_head,
  #dimd .dimd_contents .site_info_box .con_info .concept,
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs {
    padding: 0px 100px;
  }
  #dimd .dimd_contents .site_img_box {
    padding: 0px 100px;
  }
}
@media screen and (max-width:1494px){
  #container.cont_main .project_sec2 .box .project_box .project_list ul {
    width: 588px;
  }
}
@media screen and (max-width:1320px){
  #container.cont_main .project_sec2 .box.type1 {
    padding: 45px 100px 0 100px;
  }
  #container.cont_main .project_sec2 .box {
    padding: 45px 100px 100px 100px;
    gap: 65px;
  }
  #container.cont_main .project_sec2 .box .project_box {
    gap: 45px;
  }
  #container.cont_main .project_sec2 .box .project_banner {
    height: 300px;
  }
  #container.cont_main .project_sec2 .box .project_banner .txt {
    font-size: 30px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul li span {
    font-size: 14px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul li span.tit {
    font-size: 14px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul {
    gap: 0px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info {
    gap: 10px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info a.button_type2 span {
    font-size: 13px;
  }

  #container.cont_main .project_sec1 .title_box {
    padding: 45px 100px 0px 100px;
  }
  #container.cont_main .project_sec1 .title_box h2 {
    font-size: 50px;
  }
  
  #dimd .dimd_head {
    height: 616px;
    padding: 40px 150px 0px 150px;
    margin-bottom: 95px;
  }
  #dimd .dimd_head .close_button_area .close_button {
    width: 60px;
    height: 60px;
  }
}
@media screen and (max-width:1023px){
  #container.cont_main .project_sec2 .swiper-area {
    border-radius: 10px;
  }
  #container.cont_main .project_sec2 .swiper {
    border-radius: 10px;
    overflow: hidden;
  }
  #container.cont_main .project_sec2 .box.type1 {
    padding: 40px 50px 0 50px;
  }
  #container.cont_main .project_sec2 .box {
    padding: 40px 50px 80px 50px;
    gap: 70px;
  }
  #container.cont_main .project_sec2 .box .project_box {
    gap: 38px;
  }
  #container.cont_main .project_sec2 .box .project_banner {
    height: 200px;
    padding: 21px 30px 21px 30px;
  }
  #container.cont_main .project_sec2 .box .project_banner .txt {
    font-size: 24px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul li {
    height: 23px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul li span {
    font-size: 14px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul li span.tit {
    font-size: 14px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info {
    gap: 5px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info a.button_type2 span {
    font-size: 14px;
  }
  #container.cont_main .project_sec2 .box .project_banner.item1 {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%), url(../images/common/250709_project_list1.png) lightgray 50% / cover no-repeat;
  }
  #container.cont_main .project_sec2 .box .project_banner.item2 {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%), url(../images/common/250709_project_list7.png) lightgray 50% / cover no-repeat;
  }
  #container.cont_main .project_sec2 .box .project_banner.item3 {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%), url(../images/common/250709_project_list3.png) lightgray 50% / cover no-repeat;
  }
  #container.cont_main .project_sec2 .box .project_banner.item4 {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%), url(../images/common/250709_project_list4.png) lightgray 50% / cover no-repeat;
  }

  #container.cont_main .project_sec1 .title_box {
    padding: 45px 50px 0px 50px;
  }
  #container.cont_main .project_sec1 .title_box h2 {
    font-size: 37px;
  }


  /*swiper controller*/
  #container.cont_main .project_sec2 .control_box {
    width: 100%;
    bottom: -47px;
    justify-content: space-between;
    border-radius: unset;
    background: unset;
    backdrop-filter: unset;
    padding: 0px 10px;
  }
  #container.cont_main .project_sec2 .control_box .auto_btn {
    gap: 0px;
  }

  #container.cont_main .project_sec2 .control_box .swiper-pagination .swiper-pagination-bullet {
    opacity: 0.2;
    background: #555555;
  }
  #container.cont_main .project_sec2 .control_box .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #1D1D1D;
  }
  /* #container.cont_main .project_sec2 .control_box .auto_btn .swiper-button-prev {
    background: url(../images/common/250731_swiper_prev_white_left.svg) no-repeat;
  }
  #container.cont_main .project_sec2 .control_box .auto_btn .stop {
    background: url(../images/common/250731_swiper_prev_white_stop.svg) no-repeat;
  }
  #container.cont_main .project_sec2 .control_box .auto_btn .start {
    background: url(../images/common/250731_swiper_prev_white_start.svg) no-repeat;
  }
  #container.cont_main .project_sec2 .control_box .auto_btn .swiper-button-next {
    background: url(../images/common/250731_swiper_prev_white_right.svg) no-repeat;
  } */
  #container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover {
    border-radius: unset;
    background: unset;
  }
  #container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover .swiper-button-prev {
    background: url(../images/common/250731_swiper_prev_black_left.svg) no-repeat;
  }
  #container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover .stop {
    background: url(../images/common/250731_swiper_prev_black_stop.svg) no-repeat;
  }
  #container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover .start {
    background: url(../images/common/250731_swiper_prev_black_start.svg) no-repeat;
  }
  #container.cont_main .project_sec2 .control_box .auto_btn .button_box:hover .swiper-button-next {
    background: url(../images/common/250731_swiper_prev_black_right.svg) no-repeat;
  }
  
  /*swiper controller*/

  
  
  #dimd .dimd_head {
    height: 521px;
    padding: 40px 33px 0px 33px;
    margin-bottom: 60px;
  }
  #dimd .dimd_head .head_img_box,
  #dimd.dimd1 .dimd_head .head_img,
  #dimd.dimd2 .dimd_head .head_img,
  #dimd.dimd3 .dimd_head .head_img,
  #dimd.dimd4 .dimd_head .head_img,
  #dimd.dimd5 .dimd_head .head_img,
  #dimd.dimd6 .dimd_head .head_img,
  #dimd.dimd7 .dimd_head .head_img {
    width: 700px;
    height: 395px;
  }
  #dimd .dimd_head .close_button_area .close_button {
    width: 60px;
    height: 60px;
  }
  #dimd .dimd_contents .site_info_box .button_type2.pc {
    display: none;
  }
  #dimd .dimd_contents .site_info_box .button_type2.mo {
    display: flex;
  }
  #dimd .dimd_contents .site_info_box .button_type2.mo span {
    font-size: 14px;
  }
  #dimd .dimd_contents .site_info_box {
    align-items: center;
    gap: 24px;
  }
  #dimd .dimd_contents {
    gap: 24px;
    margin-bottom: 30px;
  }
  #dimd .dimd_btn_area {
    margin: 0px auto 80px;
  }
  #dimd .dimd_btn_area .button_type4 {
    padding: 6px 16px 6px 20px;
    width: 90px;
  }

  #dimd .dimd_contents .site_info_box .con_head .tit {
    font-size: 34px;
  }
  #dimd .dimd_contents .site_info_box .con_info .concept .txt span {
    font-size: 18px;
  }
  #dimd .dimd_contents .site_info_box .con_info .concept .txt p {
    font-size: 16px;
  }
  #dimd .dimd_contents .site_info_box .con_info .concept .tit {
    display: none;
  }
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .tit {
    display: none;
  }
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1 span,
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2 span,
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3 span,
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color4 span {
    display: none;
  }
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1,
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2,
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3,
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color4 {
    height: 16px !important;
  }

}
@media screen and (max-width:767px){
  #container.cont_main .project_sec2 .box {
    gap: 65px;
  }
  #container.cont_main .project_sec1 .title_box {
    padding: 40px 16px 0px 16px;
  }
  #container.cont_main .project_sec2 .box .project_box {
    gap: 24px;
    align-items: flex-start;
  }

  #container.cont_main .project_sec2 .box .project_banner {
    height: 185px;
    padding: 16px;
  }
  #container.cont_main .project_sec2 .box .project_banner .txt {
    font-size: 20px;
    padding-bottom: 8px;

    /**축약*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /**축약*/
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul li span.sub_txt {
    /**축약*/
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /**축약*/
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box {
    width: 100%;  /**축약*/
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul {
    width: 100%;  /**축약*/
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul li {
    width: 100%;  /**축약*/
    height: 21px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info {
    gap: 8px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info a.button_type2 {
    padding: 4px 12px 4px 16px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info a.button_type2 .link_ico {
    width: 12.2px;
    height: 9px;
  }

  
  #container.cont_main .project_sec2 .box .category_box .category_button {
    width: 100%;
    min-width: 584px;
    height: 40px;
  }

  #container.cont_main .project_sec2 .control_box .auto_btn .button_box {
    width: 33px;
    height: 33px;
    padding: 3px;
  }

  #dimd .dimd_head {
    height: 250px;
    padding: 40px 33px 0px 33px;
    margin-bottom: 24px;
  }
  #dimd .dimd_head .head_img_box,
  #dimd.dimd1 .dimd_head .head_img,
  #dimd.dimd2 .dimd_head .head_img,
  #dimd.dimd3 .dimd_head .head_img,
  #dimd.dimd4 .dimd_head .head_img,
  #dimd.dimd5 .dimd_head .head_img,
  #dimd.dimd6 .dimd_head .head_img,
  #dimd.dimd7 .dimd_head .head_img {
    width: 320px;
    height: 177px;
  }
  #dimd .dimd_head .close_button_area .close_button {
    width: 40px;
    height: 40px;
    top: 25px;
    right: 20px;
  }

  #dimd .dimd_contents .site_info_box {
    gap: 8px;
  }
  #dimd .dimd_contents .site_info_box .con_info {
    gap: 8px;
  }
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs .con {
    margin-bottom: 16px;
  }
  #dimd .dimd_contents .site_info_box .con_head,
  #dimd .dimd_contents .site_info_box .con_info .concept,
  #dimd .dimd_contents .site_info_box .con_info .color_graphiecs {
    padding: 0px 16px;
  }

  #dimd.dimd1 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1,
  #dimd.dimd1 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2,
  #dimd.dimd1 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3,
  #dimd.dimd2 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1,
  #dimd.dimd2 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2,
  #dimd.dimd2 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3,
  #dimd.dimd3 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1,
  #dimd.dimd3 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2,
  #dimd.dimd3 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3,
  #dimd.dimd4 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1,
  #dimd.dimd4 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2,
  #dimd.dimd4 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3,
  #dimd.dimd5 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1,
  #dimd.dimd5 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2,
  #dimd.dimd5 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3,
  #dimd.dimd6 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1,
  #dimd.dimd6 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2,
  #dimd.dimd6 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3,
  #dimd.dimd7 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color1,
  #dimd.dimd7 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color2,
  #dimd.dimd7 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color3,
  #dimd.dimd7 .dimd_contents .site_info_box .con_info .color_graphiecs .con .type_color4 {
    padding: 8px;
  }

  #dimd .dimd_contents .site_img_box {
    padding: 0px 16px;
    gap: 24px;
  }
  #dimd .dimd_contents {
    gap: 24px;
    /* margin-bottom: 40px; */
  }
  #dimd .dimd_contents .site_info_box .con_head .tit {
    font-size: 20px;
  }
  #dimd .dimd_contents .site_info_box .con_info .concept .txt span {
    font-size: 16px;
  }
  #dimd .dimd_contents .site_info_box .con_info .concept .txt p {
    font-size: 14px;
  }
}
@media screen and (max-width: 700px) {
  #container.cont_main .project_sec2 .box.type1 {
    padding: 35px 16px 0 16px;
  }
  #container.cont_main .project_sec2 .box {
    padding: 35px 16px 60px 16px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul {
        justify-content: center;
        width: unset;
    }

  #container.cont_main .project_sec2 .box .project_box .project_list ul li {
    width: 100%;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li .info {
    width: 100%;
    padding: 10px 16px 0px 16px;
    bottom: 16px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_tit .tit {
    font-size: 32px;
  }

  #container.cont_main .project_sec2 .box .project_banner {
    height: 179px;
    padding: 16px;
  }
  #container.cont_main .project_sec2 .box .project_banner .info .info_box ul li span.tit {
    display: none;
  }

  #container.cont_main .project_sec2 .box .project_box .project_list ul li {
    height: 300px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li img {
    height: 300px;
  }
}
@media screen and (max-width:625px){
  #container.cont_main .project_sec2 .box .category::before {
    content: '';
    width: 60px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(270deg, rgba(17, 17, 17, 0.00) 0%, #fff 100%);
    z-index: 1;
  }
  #container.cont_main .project_sec2 .box .category.hide-before::before {
    display: none;
  }
  #container.cont_main .project_sec2 .box .category::after {
    content: '';
    width: 60px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.00) 0%, #fff 100%);
  }
  #container.cont_main .project_sec2 .box .category.hide-after::after {
    display: none;
  }
}
@media screen and (max-width:500px){
  #container.cont_main .project_sec2 .box.type1 {
    padding: 24px 16px 0 16px;
  }
  #container.cont_main .project_sec2 .box {
    padding: 24px 16px 40px 16px;
  }

  #container.cont_main .project_sec1 .title_box h2 {
    font-size: 24px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li {
    height: 256px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li img {
    height: 256px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li .info .tit {
    font-size: 16px;
  }
  #container.cont_main .project_sec2 .box .project_box .project_list ul li .info .hash_tag span {
    font-size: 14px;
  }
}

/*project*/




/*contact*/
#container.cont_main .contact_sec1 {
  padding-top: 90px;
  margin-bottom: 0px;
  gap: 0px;
}
#container.cont_main .contact_sec1 .title_box {
  display: flex;
  padding: 80px 200px 40px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#container.cont_main .contact_sec1 .title_box h2 {
  color: #1d1d1d;
  text-align: center;
  font-family: "GmarketSans";
  font-size: 56px;
  font-style: normal;
  font-weight: 100;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .contact_sec2.wid100 .box {
  width: 100%;
  padding: 0px 0px 0px 0px;
}
#container .sec.contact_sec2.wid100 {
  margin: unset;
  max-width: unset;
}
#container.cont_main .contact_sec2.wid100 .box {
  display: flex;
  /* padding: 80px 200px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;

  background-image: url(../images/common/250930_contact_banner.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#container.cont_main .contact_sec2 .box {
  display: flex;
  padding: 80px 200px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#container.cont_main .contact_sec2 .box .contact_banner {
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
  padding: 60px 200px;
  align-self: stretch;

  max-width: 1920px;
  width: 100%;
  margin: auto;
}
#container.cont_main .contact_sec2 .box .contact_banner .txt {
  width: 100%;
  /* padding-bottom: 60px; */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.20); */

  color: #C6C6C6;
  font-size: 40px;
  font-style: normal;
  font-weight: 200;
  line-height: 140%;
  text-transform: uppercase;
}
#container.cont_main .contact_sec2 .box .contact_banner .info_list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
}
#container.cont_main .contact_sec2 .box .contact_banner .list_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#container.cont_main .contact_sec2 .box .contact_banner .info_box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  flex-shrink: 0;

  gap: 10px;
  align-self: stretch;
}
#container.cont_main .contact_sec2 .box .contact_banner .info_box .tit {
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
#container.cont_main .contact_sec2 .box .contact_banner .info_box .info {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  flex-shrink: 0;
}

#container.cont_main .contact_sec2 .box .faq_box {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}
#container.cont_main .contact_sec2 .box .faq_box .tit {
  flex: 1 0 0;
  color: #1d1d1d;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  text-transform: uppercase;
}


#container.cont_main .contact_sec2 .box .faq_box .faq { width: 100%;max-width: 1170px; margin:0 auto;position: relative;}
#container.cont_main .contact_sec2 .box .faq_box .faq ul {font-size:0;}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list {font-size: 15px; border-top: 1px solid #6C6C6C;}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list .subject {border-bottom: 1px solid #6C6C6C; padding: 20px 24px; position: relative;     cursor: pointer;}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li{position: relative;}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .subject {
  display: flex;
  padding: 20px 24px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .subject .txt_q {
  color: #1d1d1d;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.6px;
}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .subject a {
  flex: 1 0 0;
  color: #1d1d1d; 
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.6px;
}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .subject .plus_ico {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/common/250729_plus_black.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .subject.on .plus_ico {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../images/common/250729_minus_black.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .hide_cont {display: none; position:relative; background: #F0F0F0; padding: 32px; }
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .hide_cont .answer {position: relative;display: flex;align-items: flex-start;gap: 6px;align-self: stretch;}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .hide_cont .answer .bullet_box {
  display: flex;
  height: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .hide_cont .answer .small_bullet {
  width: 6px;
  height: 1.4px;
  flex-shrink: 0;
  background: #8E8E8E;
}
#container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .hide_cont .answer p{
  flex: 1 0 0;
  color: #1d1d1d;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.48px;
}


@media screen and (max-width:1940px){
  #container.cont_main .contact_sec1 .title_box {
    padding: 65px 140px 20px 140px;
  }

  #container.cont_main .contact_sec2 .box {
    padding: 60px 140px 120px 140px;
  }
  #container.cont_main .contact_sec2 .box .contact_banner {
    /* height: 350px; */
  }
  #container.cont_main .contact_sec2 .box .contact_banner .txt {
    /* padding-bottom: 34px; */
  }
}
@media screen and (max-width:1750px){
  #container.cont_main .contact_sec2 .box .faq_box {
    flex-direction: column;
  }
  #container.cont_main .contact_sec2 .box .faq_box .faq {
    margin: unset;
    max-width: unset;
  }
}
@media screen and (max-width:1490px){
  #container.cont_main .contact_sec2 .box .contact_banner {
    align-items: center;
    justify-content: center;
  }
  #container.cont_main .contact_sec2 .box .contact_banner .txt {
    border-bottom: unset;
    padding-bottom: unset;
    text-align: center;
  }
  #container.cont_main .contact_sec2 .box .contact_banner .info_list {
    display: none;
  }
  #container.cont_main .contact_sec2 .box .contact_banner .txt {
    font-size: 46px;
  }
}
@media screen and (max-width:1320px){
  #container.cont_main .contact_sec1 .title_box {
    padding: 45px 100px 20px 100px;
  }
  #container.cont_main .contact_sec1 .title_box h2 {
    font-size: 50px;
  }

  #container.cont_main .contact_sec2 .box {
    padding: 45px 100px 100px 100px;
  }
  #container.cont_main .contact_sec2 .box .contact_banner {
    height: 300px;
  }
}
@media screen and (max-width:1023px){
  #container.cont_main .contact_sec1 .title_box {
    padding: 45px 50px 20px 50px;
  }
  #container.cont_main .contact_sec1 .title_box h2 {
    font-size: 37px;
  }

  #container.cont_main .contact_sec2 .box {
    padding: 40px 50px 80px 50px;
  }
  #container.cont_main .contact_sec2 .box .contact_banner {
    height: 200px;
    padding: 0px;
  }
  #container.cont_main .contact_sec2 .box .contact_banner .txt {
    font-size: 32px;
  }

}
@media screen and (max-width:767px){
  #container.cont_main .contact_sec1 .title_box {
    padding: 40px 16px 20px 16px;
  }

  #container.cont_main .contact_sec2 .box {
    padding: 35px 16px 60px 16px;
  }
  #container.cont_main .contact_sec2 .box .contact_banner {
    height: 150px;
  }
  #container.cont_main .contact_sec2 .box .contact_banner .txt {
    font-size: 26px;
  }
  #container.cont_main .contact_sec2 .box .faq_box .tit {
    font-size: 24px;
  }
  #container.cont_main .contact_sec2 .box .faq_box {
    gap: 16px;
  }
  #container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .subject a {
    font-size: 18px;
  }
  #container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .hide_cont {
    padding: 16px;
  }
}
@media screen and (max-width:500px){
  #container.cont_main .contact_sec1 .title_box h2 {
    font-size: 24px;
  }

  #container.cont_main .contact_sec2 .box {
    padding: 24px 16px 40px 16px;
  }
  #container.cont_main .contact_sec2 .box .contact_banner {
    height: 100px;
    padding: 24px;
  }
  #container.cont_main .contact_sec2 .box .contact_banner .txt {
    font-size: 20px;
  }
  #container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .subject {
    padding: 12px 14px;
    gap: 9px;
  }
  #container.cont_main .contact_sec2 .box .faq_box .faq .faq-list li .hide_cont .answer {
    gap: 9px;
  }
}

/*contact*/





/* resize */
@media screen and (max-width:1960px){
  #container .sec1 .box .line_one {
    width: 954px;
    height: 102px;
  }
  #container .sec1 .box .line_two {
    width: 865px;
    height: 96px;
  }
  #container .sec1 .box .line_three {
    width: 1520px;
    height: 109px;
  }
}
@media screen and (max-width:1960px) and (min-width:1521px){
  #container .sec.sec2 .depth_box1 .sec2_p {
    width: 655px;
  }
}

@media screen and (max-width:1900px){
  #container .sec.sec2 {
    padding: 0px 160px;
    gap: 15px;
  }
}

@media screen and (max-width:1765px){
  #container .sec.sec2 {
    padding: 0px 120px;
  }
}

@media screen and (max-width:1680px){
  #container .sec.sec2 {
    padding: 0px 90px;
  }
}

@media screen and (max-width:1620px){
  #container .sec.sec2 {
    padding: 0px 60px;
  }
}

@media screen and (max-width:1600px){
  #container .sec1 .box .line_one,
  #container .sec1 .box .line_two,
  #container .sec1 .box .line_three {
    display: none;
  }
  #container .sec1 .box .m_top_img {
    display: block;
  }
  #container .sec.sec4 {
    margin-bottom: 60px;
  }
}
@media screen and (max-width:1532px){
  #container .sec.sec4 .project_box {
    gap: 40px;
  }
  #container .sec.sec4 .project_box .project_tit .tit {
    font-size: 48px;
  }
  #container .sec.sec4 .project_box .project_list ul {
    gap: 24px;
    justify-content: center;
  }
  #container .sec.sec4 .project_box .project_list ul li {
    width: 588px;
    height: 320px;
  }
  #container .sec.sec4 .project_box .project_list ul li a {
    width: 100%;
  }
  #container .sec.sec4 .project_box .project_list ul li img {
    width: 100%;
    height: 320px;
  }
  #container .sec.sec4 .project_box .project_list ul li .info {
    width: 100%;
    padding: 20px 20px 0px 20px;
  }
}
@media screen and (max-width:1520px){
  .three-canvas-three {
    visibility: hidden;
  }
  #container .sec.sec2 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 160px;
  }
  #container .sec.sec2 .depth_box1 {
    text-align: center;
  }
  #container .sec.sec2 .depth_box1 .sec2_p {
    width: 100%;
  }
  #container .sec.sec1 {
    gap: 45px;
    margin-bottom: 160px;
  }
  #container .sec.sec2 .depth_box2 .left_box {
    flex-direction: row;
  }
  #container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con .txt .section_line {
    display: none;
  }
  #container .sec.sec2 .depth_box2 .box_g,
  #container .sec.sec2 .depth_box2 .box_g .box_g_front,
  #container .sec.sec2 .depth_box2 .box_g .box_g_back,
  #container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con {
    width: 384px;
    height: 270px;
  }
  #container .sec.sec2 .depth_box2 .box_g .c_ico {
    width: 74px;
    height: 100px;
  }
  #container .sec.sec2 .depth_box2 .box_i,
  #container .sec.sec2 .depth_box2 .box_i .box_i_front,
  #container .sec.sec2 .depth_box2 .box_i .box_i_back,
  #container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con {
    width: 384px;
    height: 270px;
  }
  #container .sec.sec2 .depth_box2 .box_i .i_ico {
    width: 21px;
    height: 100px;
    bottom: 30px;
    left: 40px;
  }
  #container .sec.sec2 .depth_box2 .box_o,
  #container .sec.sec2 .depth_box2 .box_o .box_o_front,
  #container .sec.sec2 .depth_box2 .box_o .box_o_back,
  #container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con {
    width: 384px;
    height: 270px;
  }
  #container .sec.sec2 .depth_box2 .box_o .n_ico {
    width: 71px;
    height: 100px;
    bottom: 30px;
    left: 40px;
  }
  #container .sec.sec2 .depth_box2 .box_g_hover:hover .box_g {
    transform: unset;
  }
  #container .sec.sec2 .depth_box2 .box_i_hover:hover .box_i {
    transform: unset;
  }
  #container .sec.sec2 .depth_box2 .box_o_hover:hover .box_o {
    transform: unset;
  }
  #container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con .txt .tit,
  #container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con .txt .tit,
  #container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con .txt .tit {
    font-size: 20px;
  }
  #container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con .txt .con_txt,
  #container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con .txt .con_txt,
  #container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con .txt .con_txt {
    font-size: 14px;
  }
  #container .sec.sec2 .depth_box1 {
    font-size: 48px;
  }
  #container .sec.sec3 .tit_box {
    font-size: 48px;
  }

  #container .sec.sec3 {
    padding: 0px;
    margin-bottom: 160px;
  }


  #container .sec.sec3 .info_box .info_bg .line_one,
  #container .sec.sec3 .info_box .info_bg .line_two,
  #container .sec.sec3 .info_box .info_bg .line_three,
  #container .sec.sec3 .info_box .info_bg .line_four,
  #container .sec.sec3 .info_box .info_bg .line_five {
    height: 65px;
  }
  #container .sec.sec3 .info_box .info_bg_cover {
    height: 421px;
  }
  #container .sec.sec3 .info_box .swiper-slide {
    width: 302px;
    height: 65px;
  }
  #container .sec.sec3 .flow-item img {
    width: 279px;
    height: 65px;
  }
  #container .sec.sec3 .info_box .info_type .info .tit {
    font-size: 24px;
  }
  #container .sec.sec3 .info_box .info_type .info .con .count-num {
    font-size: 72px;
  }
  #container .sec.sec3 .info_box .info_type .info .con span {
    font-size: 24px;
  }
  #container .sec.sec3 .info_box .info_type {
    gap: 64px;
  }
  #container .sec.sec3 .info_box .info_type .info {
    width: 160px;
  }
  #container .sec.sec3 .info_box .info_bg_cover {
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.00) -50%, rgba(17, 17, 17, 0.95) 50.96%, rgba(17, 17, 17, 0.00) 150%);
  }

}
@media screen and (max-width:1285px){
  #container .sec.sec2 .depth_box2 {
    flex-direction: column;
  }
  #container .sec.sec2 .depth_box2 .left_box {
    flex-direction: column;
    width: 718px;
  }
  #container .sec.sec2 .depth_box2 .box_g,
  #container .sec.sec2 .depth_box2 .box_g .box_g_front,
  #container .sec.sec2 .depth_box2 .box_g .box_g_back,
  #container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con {
    width: 718px;
    height: 270px;
  }
  #container .sec.sec2 .depth_box2 .box_i,
  #container .sec.sec2 .depth_box2 .box_i .box_i_front,
  #container .sec.sec2 .depth_box2 .box_i .box_i_back,
  #container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con {
    width: 718px;
    height: 270px;
  }
  #container .sec.sec2 .depth_box2 .box_o,
  #container .sec.sec2 .depth_box2 .box_o .box_o_front,
  #container .sec.sec2 .depth_box2 .box_o .box_o_back,
  #container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con {
    width: 718px;
    height: 270px;
  }

  #container .sec.sec4 .project_box .project_list ul li .info {
    opacity: 1;
  }

}
@media screen and (max-width:1220px){
  #container .sec1 .txt_box {
    padding: 0px 132px;
  }
}
@media screen and (max-width:963px){
  #container .sec1 .txt_box {
    padding: 0px 60px;
  }
}
@media screen and (max-width:767px){
  #container .sec1 .box {
    min-height: 350px;
  }
  #container .sec1 .box .m_area {
    width: 320px;
    height: 300px;
  }
  #container .sec1 .box .m_top_img {
    width: 320px;
    height: 300px;
  }
  #container .sec1 .txt_box p {
    font-size: 14px;
    text-align: center;
  }
  #container .sec1 .txt_box {
    padding: 16px;
  }

  #container .sec.sec2 {
    padding: 0px 16px;
  }
  #container .sec.sec2 .depth_box1 {
    font-size: 32px;
  }
  #container .sec.sec2 .depth_box2 {
    width: 100%;
  }
  #container .sec.sec2 .depth_box2 .left_box,
  #container .sec.sec2 .depth_box2 .right_box {
    width: 100%;
  }

   #container .sec.sec2 .depth_box2 .box_g_hover,
   #container .sec.sec2 .depth_box2 .box_i_hover,
   #container .sec.sec2 .depth_box2 .box_o_hover {
    width: 100%;
  }

  #container .sec.sec2 .depth_box2 .box_g,
  #container .sec.sec2 .depth_box2 .box_g .box_g_front,
  #container .sec.sec2 .depth_box2 .box_g .box_g_back,
  #container .sec.sec2 .depth_box2 .box_g .box_g_back .box_g_back_con {
    width: 100%;
    height: 270px;
  }
  #container .sec.sec2 .depth_box2 .box_i,
  #container .sec.sec2 .depth_box2 .box_i .box_i_front,
  #container .sec.sec2 .depth_box2 .box_i .box_i_back,
  #container .sec.sec2 .depth_box2 .box_i .box_i_back .box_i_back_con {
    width: 100%;
    height: 270px;
  }
  #container .sec.sec2 .depth_box2 .box_o,
  #container .sec.sec2 .depth_box2 .box_o .box_o_front,
  #container .sec.sec2 .depth_box2 .box_o .box_o_back,
  #container .sec.sec2 .depth_box2 .box_o .box_o_back .box_o_back_con {
    width: 100%;
    height: 270px;
  }
  
  #container .sec.sec3 {
    gap: 40px;
  }
  #container .sec.sec3 .tit_box {
    font-size: 32px;
  }
  #container .sec.sec3 .info_box .info_bg .line_one,
  #container .sec.sec3 .info_box .info_bg .line_two,
  #container .sec.sec3 .info_box .info_bg .line_three,
  #container .sec.sec3 .info_box .info_bg .line_four,
  #container .sec.sec3 .info_box .info_bg .line_five {
    height: 50px;
  }
  #container .sec.sec3 .info_box .info_bg_cover {
    height: 347px;
  }
  #container .sec.sec3 .info_box .swiper-slide {
    width: 260px;
    height: 50px;
  }
  #container .sec.sec3 .flow-item img {
    width: 225px;
    height: 50px;
  }
  #container .sec.sec3 .info_box .info_type .info .tit {
    font-size: 16px;
  }
  #container .sec.sec3 .info_box .info_type .info .con .count-num {
    font-size: 40px;
  }
  #container .sec.sec3 .info_box .info_type .info .con span {
    font-size: 18px;
  }
  #container .sec.sec3 .info_box .info_type {
    gap: 16px;
  }
  #container .sec.sec3 .info_box .info_type .info {
    width: 90px;
  }
  #container .sec.sec3 .info_box .info_bg_cover {
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.00) -50%, rgba(17, 17, 17, 0.95) 50.96%, rgba(17, 17, 17, 0.00) 150%);
  }

  #container .sec.sec4 .project_box .project_list ul li {
    width: 100%;
  }
  #container .sec.sec4 .project_box .project_list {
    padding: 0 16px;
  }
  #container .sec.sec4 .project_box .project_list ul li .info {
    width: 100%;
    padding: 10px 10px 0px 10px;
  }
  #container .sec.sec4 .project_box .project_tit .tit {
    font-size: 32px;
  }

}

@media screen and (max-width:700px){
  #container .sec.sec4 .project_box .project_list ul li {
    height: 300px;
  }
  #container .sec.sec4 .project_box .project_list ul li img {
    height: 300px;
  }
}
@media screen and (max-width:500px){
  #container .sec.sec4 .project_box .project_list ul li {
    height: 256px;
  }
  #container .sec.sec4 .project_box .project_list ul li img {
    height: 256px;
  }
  #container .sec.sec4 .project_box .project_list ul li .info .tit {
      font-size: 16px;
  }
  #container .sec.sec4 .project_box .project_list ul li .info .hash_tag span {
      font-size: 14px;
  }
}
/* resize */



/** new contents */







/* contents */
.main_banner{height:auto; border:none;}
.main_top_bnr{position:relative; width:100%; height:100%; left:auto; margin-left:0;}
.main_top_bnr .swiper-button-next:nth-child(2) {right:20px;}
.swiper-slide-active .caption .caption_inner .c_btn:after{content: '';position: absolute;background: url(../images/contents/visual_more.png) no-repeat;width: 30px;height: 7px;
    right: 18px;top: 50%;transform: translateY(-62%);}

.silde_list01 { background: url(../images/contents/slide06+bg.png) no-repeat center; background-size: cover; height: 100vh; max-height: 840px; min-height: 800px;   position: relative;  overflow: hidden;}
.silde_list01:before{content: ''; position: absolute; background: url(../images/contents/slide06+cup01.png) no-repeat; width:1095px;background-size: 100%; height: 1095px; right: 0; bottom:0;}
.silde_list01:after{content: ''; position: absolute; background: url(../images/contents/slide06+text.png) no-repeat; width: 1095px; height: 195px; background-size: 100%; top: 140px; right: 0;}
.silde_list02 { background: #080E2D; background-size: cover; height: 100vh; max-height: 840px; min-height: 800px;   position: relative;  overflow: hidden;}
.silde_list02:before{ content: ''; position: absolute; top : 0; left: 0; background: url(../images/contents/slide03+left.png) no-repeat center; width:510px; height: 100%;}
.silde_list02:after{content: ''; position: absolute; transform: translate(0 , -50%); top : 50%; right: 30px; background: url(../images/contents/slide03+item.png) no-repeat; width: 1035px; height: 1035px;   
    background-size: 100%;}
.silde_list03 { background: #f23030 no-repeat center; background-size: cover; height: 100vh; max-height: 840px; min-height: 800px;   position: relative;  overflow: hidden;}
.silde_list03:before{ content: ''; position: absolute; top : 0; left: 0; background: url(../images/contents/slide07+left.png) no-repeat center; width: 344px; height: 234px;}
.silde_list03:after{ content: ''; position: absolute; top : 0; right: 0; background: url(../images/contents/slide07+item.png) no-repeat center; background-size: 100%; width: 1665px; height: 841px;}

.swiper-pagination{bottom:15px; width:100%; }
.swiper-pagination .swiper-pagination-bullet{width:10px; height:10px; margin-left:7px; opacity:0.5; background:#fff; border-radius:25px;}
.swiper-pagination .swiper-pagination-bullet-active{width:10px; height:10px; margin-left:7px; opacity:1; background:#fff; border-radius:25px}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 7px;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(1) {margin-left: 3px;}
.swiper-button-prev{width:40px; height:48px; left:15px; background:url(../images/contents/main_banner_prev.png) no-repeat;}
.swiper-button-next{width:40px; height:48px; right:15px; background:url(../images/contents/main_banner_next.png) no-repeat;}
.auto_btn {position: absolute;bottom: 40px;left: 50%;transform: translateX(90px);z-index: 10;}
.auto_btn .start {display: block; width: 12px; height: 18px; font-size: 0;background: url(../images/contents/btn_play.png) no-repeat;}
.auto_btn .stop {display: block; width: 12px; height: 18px; font-size: 0;background: url(../images/contents/btn_stop.png) no-repeat;}
.auto_btn .swiper-button-next{background: url(../images/contents/portfolio_next.png) no-repeat;
  width: 13px;height: 19px; right: -25px;margin-top:-10px;}
.auto_btn .swiper-button-prev{background: url(../images/contents/portfolio_prev.png) no-repeat;width: 13px;height: 19px;left: -25px;margin-top:-10px;}

.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ bottom: 40px; }

/*<>버튼 얇은버전*/
.main_banner .auto_btn .swiper-button-prev{background: url(../images/contents/main_banner_prev_light.png) no-repeat}
.main_banner .auto_btn .swiper-button-next{background: url(../images/contents/main_banner_next_light.png) no-repeat}
.main_banner .auto_btn .stop{background: url(../images/contents/main_banner_stop_light.png) no-repeat}



.caption{position: absolute;top: 50%;left: 0px;width: 100%;transform: translateY(-50%); z-index: 1; color:#fff;}
.caption .caption_inner{max-width: 1280px;margin: 0px auto; padding-left: 120px;}
.caption .caption_inner .c_sub_title{font-size: 24px; margin-bottom: 15px; opacity: 0;transform: translate3d(0, 50%, 0);font-family: "nanumsquare",sans-serif; font-weight: 400}
.caption .caption_inner .c_title{font-size: 48px; line-height: 55px;margin-bottom: 30px; opacity: 0;transform: translate3d(0, 50%, 0);}
.caption .caption_inner .c_title:before {content: '';position: absolute;top: 50%;transform: translateY(-50%);background: url(../images/contents/main_icon_01.png) no-repeat; width: 96px; left: -126px; height: 224px;}
.main_visual_list .swiper-slide:nth-child(2n - 1) .caption .caption_inner .c_title:before{content: '';position: absolute;top: 50%;transform: translateY(-50%);background: url(../images/contents/main_icon_02.png) no-repeat; width: 96px; left: -126px; height: 224px;}
.caption .caption_inner .c_btn {width: 230px;height: 50px;background: #fff;display: block;line-height: 50px;font-size: 19px;font-weight: 500;padding-left: 17px; color:#1f1f25;opacity: 0;transform: translate3d(0, 50%, 0);}
.caption .caption_inner .c_btn::before{  background: #1f1f25;content: '';position: absolute;z-index: -1;height: 100%;left: 0;top: 0;width: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s; -o-transition: all 0.3s;transition: all 0.3s;}
.caption .caption_inner .c_btn:hover::before{width:100%;-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.caption .caption_inner .c_btn:hover a {color:#fff;}
.swiper-slide-active .caption .caption_inner .c_sub_title{animation: sub 1 .8s .5s both;}
.swiper-slide-active .caption .caption_inner .c_title{animation: ani 1 .8s .6s both;}
.swiper-slide-active .caption .caption_inner .c_btn{animation: ani 1 .8s .7s both;}
.swiper-slide-active .caption .caption_inner .c_btn:hover{background: #fff; color:#333; font-weight: 500;}
.swiper-slide-active .caption .caption_inner .c_btn:hover:after{background: url(../images/contents/visual_more_hover.png) no-repeat; animation-name: more;
  animation-duration: 0.3s;  animation-iteration-count: infinite; animation-direction:alternate;}
 @keyframes top {
   0%   { top:15px;}
   100% { top:12px;}
 }
@keyframes more {
  0%   { right:18px;}
  100% { right:8px;}
}
@keyframes in {
  0%   { left:-170px;}
  100% { left:-150px;}
}
@keyframes visual {
  0% {
    opacity: 0;
    }
    50%{
      opacity: 0.5
    }
  100% {
    opacity: 1;}
}
@keyframes ani {
  0% {
    opacity: 0;
    }
    50%{
      opacity: 0.5
    }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);}
}
@keyframes sub {
  0% {
    opacity: 0;
    }
    50%{
      opacity: 0.2
    }
  100% {
    opacity: 0.4;
    transform: translate3d(0, 0, 0);}
}
@keyframes pro {
  0% {
    opacity: 0;
    }
    50%{
      opacity: 0.5;
    }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);}
}
/*애니메이션 추가*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: .5;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: .5;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}


/*비즈니스 영역*/
.main_business {width:1280px; margin:0 auto; margin-bottom: 100px; padding-top: 70px;}
.main_business .main_title {padding-bottom: 50px;}
.main_business .main_title h1 {font-size: 60px; display: inline-block; margin-right: 40px; position: relative;font-family: "nanumsquare",sans-serif;;}
.main_business .main_title h1:before {content: '';position: absolute; width: 72px; height: 4px; margin-left: 5px; top: -10px;background: url(../images/contents/business_icon.png) no-repeat;}
.main_business .main_title p {display: inline-block; font-size: 18px; color:#5f5f66}
.main_business .main_title p strong {position: relative;}
.main_business .main_title p strong:before{content: ''; position: absolute;width:100%;height: 50%;bottom: -2px; background: #ececf6; z-index: -10;}
.main_business .con-width {width: 100%; display: inline-block;}
.main_business .con-width li {background: #fff; width:calc(25% - 15px); margin-right: 20px;float: left;text-align: center; padding-top: 50px; padding-bottom: 45px; border: 1px solid #ddd;    transition: 0.7s;}
.main_business .con-width li dl {font-size: 17px; color:#9c9ca4;padding-bottom: 40px;    font-family: "nanumsquare",sans-serif;;}
.main_business .con-width li dt {font-size: 24px; padding-bottom: 25px; font-weight: bold}
.main_business .con-width li dd {font-size: 14px; color:#5f5f66;}
.main_business .con-width li figure {min-height: 130px; margin-top:50px;}
.main_business .con-width li figure .icon_1 {width: 130px;display: inline-block; height: 100px;background: url(../images/contents/icon_1_stop.gif) no-repeat;background-size: cover;}
.main_business .con-width li:nth-child(1):hover figure .icon_1 {display: inline-block;background: url(../images/contents/icon_1.gif) no-repeat;background-size: cover;}
.main_business .con-width li figure .icon_2 {width: 180px;display: inline-block; height: 120px;background: url(../images/contents/icon_2_stop.gif) no-repeat;background-size: cover; margin-top: -10px;}
.main_business .con-width li:nth-child(2):hover figure .icon_2 {display: inline-block;background: url(../images/contents/icon_2.gif) no-repeat;background-size: cover;}
.main_business .con-width li figure .icon_3 {width: 135px;display: inline-block; height: 93px;background: url(../images/contents/icon_3_stop.gif) no-repeat;background-size: cover; margin-top: 10px;}
.main_business .con-width li:nth-child(3):hover figure .icon_3 {display: inline-block;background: url(../images/contents/icon_3.gif) no-repeat;background-size: cover;}
.main_business .con-width li figure .icon_4 {width: 147px;display: inline-block; height: 118px;background: url(../images/contents/icon_4_stop.gif) no-repeat;background-size: cover; margin-top: -12px; margin-right: 30px;}
.main_business .con-width li:nth-child(4):hover figure .icon_4 {display: inline-block;background: url(../images/contents/icon_4.gif) no-repeat;background-size: cover;}
.main_business .con-width li:last-child figure {padding-top: 10px;}
.main_business .con-width li:last-child {margin-right: 0;}


/*포트폴리오*/
.portfolio_banner {position: relative; height: 100%; margin-bottom: 370px;}
.portfolio_banner .portfolio .portfoliol_list li a {display: block}
.portfolio_banner .portfolio .portfoliol_list li a .sub_visual01 {background: url(../images/contents/sub_visual01.jpg) no-repeat; background-size: cover; }
.portfolio_banner .portfolio .portfoliol_list li a img {width:100%;}
.portfolio_banner .portfolio .portfoliol_list li a .p_img{display: block;}
.portfolio_banner .portfolio .portfoliol_list li a .t_img{display: none;}
.portfolio_banner .portfolio .portfoliol_list li a .m_img{display: none;}
.portfolio_banner .swiper-pagination .swiper-pagination-bullet{box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);}
.portfolio_banner .p_title {position: absolute;top:100px;left: 0px;width: 100%; z-index: 1; color: #fff;}
.portfolio_banner .p_title .title_inner {width:1280px; margin:0 auto;}
.portfolio_banner .p_title .title_inner h1 {font-size: 60px; display: inline-block; margin-right: 20px; position: relative;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);font-family: "nanumsquare",sans-serif;;}
.portfolio_banner .p_title .title_inner h1:before {content: '';position: absolute; width: 72px; height: 4px; margin-left: 5px; top: -10px;background: url(../images/contents/business_icon.png) no-repeat;}
.portfolio_banner .p_title .title_inner p {font-size: 18px; display: inline-block;}
.portfolio_banner .p_caption{position: absolute;width: 100%;z-index: 1;bottom: -385px;}
.portfolio_banner .p_caption .p_caption_inner {width: 1280px;  margin: 0 auto;}
.portfolio_banner .p_caption .p_caption_inner a {display: inline-block;}





.portfolio_banner .p_caption .p_caption_inner .p_cont {display: inline-block;vertical-align: top;float: right; color:#fff;transform: translate3d(0, 0, 0);/* opacity: 0*/}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box {width: 525px;height: 390px;background: #1f1f25; padding:60px 50px;/*transform: translate3d(0, 1%, 0); opacity: 0.9;*/}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box:before{position: absolute; content: '';background: url(../images/contents/portfolio_in.png) no-repeat;width:238px; height: 9px;top: 26px;left: -170px;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box:hover:before{ animation-name: in;
  animation-duration: 0.3s;  animation-iteration-count: infinite; animation-direction:alternate;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box h1 {font-size: 24px; line-height: 26px;margin-bottom: 18px;opacity: 0;transform: translate3d(0, 50%, 0);     height: 40px;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box ul {font-size: 18px; margin-bottom: 30px;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box ul dl {display: table-cell; color: #b82429; padding-right: 15px; font-weight: bold;width: 100px; padding-bottom: 10px;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box ul dt {display: table-cell;opacity: 0;transform: translate3d(0, 50%, 0); width:320px; word-break: keep-all;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box .more {width: 206px;display: block;height: 48px;background: #d81f25;line-height: 48px;text-align: center; color: #ccc; float: left; position: absolute; bottom: 60px;}

.portfolio_banner .p_caption .p_caption_inner .p_cont .box .more::before{background: #bd000f;height: 100%; left: 0;  top: 0; width: 0;content: ''; position: absolute; z-index: 1;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box .more:hover::before{width:100%;-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}


.portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick {width: 206px;display: block;height: 48px;background: #fff;line-height: 48px;text-align: center; color: #ccc;float: right; position: absolute; bottom: 60px; right: 50px;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick.ing {background: #dcdce2}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick::before{background: #dcdce2;height: 100%; left: 0;  top: 0;  width: 0;content: ''; position: absolute; z-index: 1;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick:hover::before{width:100%;-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box .more a {font-size: 18px; color:#fff; font-weight: 400;z-index: 10;position: relative;}
.portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick a {font-size: 18px; color:#1f1f25;font-weight: 400;z-index: 10;position: relative;}
.swiper-slide-active .p_caption .p_caption_inner .p_cont {opacity: 1}

/*
.swiper-slide-active .p_caption .p_caption_inner .port_img{animation: ani 1 .8s .5s both;}

.swiper-slide-active .p_caption .p_caption_inner .p_cont .box{animation: pro 1 .8s .5s both;}*/
.swiper-slide-active .p_caption .p_caption_inner .p_cont .box h1{animation: ani 1 .8s .6s both;}
.swiper-slide-active .p_caption .p_caption_inner .p_cont .box ul li dt{animation: ani 1 .8s .7s both;}


.portfolio_list {width:1280px; margin:0 auto;}
.portfolio_list ul {display: inline-block;}
.portfolio_list ul li {position: relative;float: left;width:412px; height: 294px; overflow: hidden;margin-left: calc( 1% - 2px); margin-right: calc( 1% - 2px);margin-bottom: 2%;}
.portfolio_list ul li a {display: inline-block;transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transition: all 0.3s ease-in-out;display: block;position: relative;}
.portfolio_list ul li a::before{content: ''; position: absolute; background:#000; opacity: .35; width: 100%; height: 100%;transition: all 0.3s ease-in-out;}
.portfolio_list ul li:hover a::before{content: ''; position: absolute; background:#000; opacity: .1; width: 100%; height: 100%;}
.portfolio_list ul li a img{display: block;}
.portfolio_list ul li a img.logo {position: absolute; bottom: 5.5%; left: 50%; transform: translateX(-50%);}
.portfolio_list ul li:hover a {transform: scale(1.2);-webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);-ms-transform: scale(1.2); -o-transform: scale(1.2);}
.portfolio_list ul li:nth-child(1) {margin-left: 0;}
.portfolio_list ul li:nth-child(4) {margin-left: 0;}
.portfolio_list ul li:nth-child(6) {margin-right: 0;}
.portfolio_list ul li:nth-child(3) {margin-right: 0;}
.portfolio_list ul li:nth-child(7) {margin-left: 0;}
.portfolio_list ul li .txt_inner{position: absolute; left: 30px ; top:35px; color: #fff;z-index: 1;}
.portfolio_list ul li .txt_inner dl { font-size: 18px; font-weight: 500; margin-bottom: 7px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); font-weight: 600}
.portfolio_list ul li .txt_inner dt {font-size: 14px; font-weight: 400; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);}
.portfolio_list .more {text-align: center; margin-top: 30px;}
.portfolio_list .more .more_btn {width:206px; height: 50px; line-height: 50px; display: block; font-size:18px; background: #d81f25; color: #fff; margin: 0 auto; position: relative;}
.portfolio_list .more .more_btn::before {background: #bd000f;content: ''; position: absolute; width: 0; left: 0; right: 0; height: 100%; z-index: 1;-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
	transition: all 0.3s;}
.portfolio_list .more .more_btn:hover::before {width:100%;}
.portfolio_list .more .more_btn a { position: relative; z-index: 10;}
.portfolio_banner .swiper-pagination {top:190px; left: 50%; transform: translateX(-50%); text-align: left; width: 1280px}
.portfolio_banner .auto_btn {position: absolute; top: 224px; left: 50%; transform: translateX(-610px); z-index: 10;}
.portfolio_banner .swiper-button-prev {width: 13px;height: 20px;right: 30px; left: auto;background: url(../images/contents/portfolio_prev.png) no-repeat;top: auto;
margin-top:0;}
.portfolio_banner .swiper-button-next {width: 13px;height: 20px;left: 30px;right: auto;background: url(../images/contents/portfolio_next.png) no-repeat;top: auto;
margin-top:0;}


/*수정*/
.portfolio_banner .portfolio .devices img{position: absolute; z-index: 1;   bottom: -385px;     transition: 0.5s;}
.portfolio_banner .portfolio .p_caption .p_caption_inner .port_img img{position: absolute; bottom: -385px;     transition: 0.5s;}
.portfolio_banner .portfolio.swiper-container .swiper-slide .p_caption .p_caption_inner .p_cont .box{   }
.portfolio_banner .p_caption{bottom:90px; height: 0}
.portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img{z-index: 100;}
.portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .pc{top: 23px;    left: 93px; z-index: 100; }
.portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .mob{left: 585px; bottom: -375px;}
.portfolio_banner .portfolio .devices{width: 1280px; margin: 0 auto;     position: relative;}
/*
.portfolio_banner .portfolio .devices .content_box{ width: 525px; height: 390px;  background: #1f1f25;     padding: 60px 50px; right: 0;  bottom: -300px; position: absolute; z-index:1; }*/

.portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img{position: relative; }

/*
.swiper-slide-active .p_caption .p_caption_inner .port_img .pc{animation: fadeIn  1 .8s .5s both;}
.swiper-slide-active .p_caption .p_caption_inner .port_img .mob{animation: fadeIn  1 .8s .5s both;}*/
/*
.swiper-slide .p_caption .p_caption_inner .port_img{animation: slideInUp 1 .8s .5s both;}*/







.portfolio_banner .portfolio .devices .content_box .more{width: 206px;display: block;height: 48px;background: #d81f25;line-height: 48px;text-align: center; color: #ccc; float: left; position: absolute; bottom:60px;}
.portfolio_banner .portfolio .devices .content_box .more::before{background: #bd000f;height: 100%; left: 0;  top: 0;  width: 0;content: ''; position: absolute; z-index: 1;}
.portfolio_banner .portfolio .devices .content_box .more:hover::before{width:100%;-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.portfolio_banner .portfolio .devices .content_box .quick{width: 206px;display: block;height: 48px;background: #fff;line-height: 48px;text-align: center; color: #ccc;float: right;position: absolute; bottom: 60px; right:50px;}
.portfolio_banner .portfolio .devices .content_box .quick::before{background: #dcdce2;height: 100%; left: 0;  top: 0;  width: 0;content: ''; position: absolute; z-index: 1;}
.portfolio_banner .portfolio .devices .content_box .quick:hover::before{width:100%;-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.portfolio_banner .portfolio .devices .content_box .more a {font-size: 18px; color:#fff; font-weight: 600;z-index: 10;position: relative;}
.portfolio_banner .portfolio .devices .content_box .quick a{font-size: 18px; color:#1f1f25;font-weight: 600;z-index: 10;position: relative;}



/*서비스 영역*/
.service_wrap {background: #f7f7fb;margin-top:80px;}
.service_wrap .service_inner {width:1280px; margin:0 auto; height: 400px; position: relative;}
.service_wrap .service_inner .tit_box {float: left; width:30%;position: absolute;
    transform: translateY(-50%); top: 50%; left: 0;}
.service_wrap .service_inner .tit_box h1 {font-size: 60px; margin-bottom: 15px; position: relative;font-family: "nanumsquare",sans-serif;;}
.service_wrap .service_inner .tit_box h1:before {content: '';position: absolute; width: 72px; height: 4px; margin-left: 5px; top:-10px;background: url(../images/contents/business_icon.png) no-repeat;}
.service_wrap .service_inner .tit_box p {font-size: 18px; color:#5f5f66}
.service_wrap .service_inner .tit_box p strong {position:relative; }
.service_wrap .service_inner .tit_box p strong:before{content: '';position: absolute; width: 100%; height: 50%; bottom: -2px; background: #ececf6; z-index: -10;}
.service_wrap .service_inner .service_list {position: absolute;transform: translateY(-50%);top: 50%;right:0; width:70%;}
.service_wrap .service_inner .service_list ul li {text-align: center; width:25%; float: left;}
.service_wrap .service_inner .service_list ul li img {border-radius: 50%; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2); margin-bottom: 20px;}
.service_wrap .service_inner .service_list ul li .txt_box {line-height: 20px;}
.service_wrap .service_inner .service_list ul li .txt_box h2 {font-size: 20px;margin-bottom: 18px;}
.service_wrap .service_inner .service_list ul li .txt_box p {font-size: 16px; color:#9c9ca4;}


/*제작문의*/
.bottom { height: 270px; position: relative;}
.bottom .left_box {width: 50%; height: 100%; background-color: #18181f; overflow: hidden; position: absolute;}
.bottom .left_box .txt_box {color: #fff;position: absolute;z-index: 10;top: 50%;transform: translateY(-50%);right: 30px;}
.bottom .left_box .p_img {display: block;}
.bottom .left_box .t_img {display: none;}
.bottom .left_box .txt_box h1 {font-size: 36px;line-height: 39px;text-align: right; font-weight: 400;}
.bottom .left_box .txt_box h1 strong {color:#d81f25;}
.bottom .left_box .txt_box p {float: right;font-size: 17px;color: #fff;margin-top: 20px; opacity: 0.4;font-family: "nanumsquare",sans-serif;}
.bottom .right_box {right: 0; padding: 75px 0 60px 70px;box-sizing: border-box;
    color: #fff; position: absolute; width: 50%;height: 100%;}
.bottom .right_box:after{position: absolute;content: '';background: url(../images/contents/bottom_in.png) no-repeat; width:165px; height: 9px; left:-140px; top: 45px;}
.bottom .right_box .txt_box{color:#5f5f66; font-size: 18px; margin-bottom: 20px}
.bottom .right_box .btn_box {max-width: 630px;}
.bottom .right_box .btn_box li {display: inline-block;}
.bottom .right_box .btn_box li a {width:100%; height: 50px; line-height: 50px; text-align:center; font-size: 18px; display: block;}

.bottom .right_box .btn_box .left_btn {position: relative;background: #d81f25; margin-right: 10px; width:40%;}
.bottom .right_box .btn_box .left_btn a {position: relative; z-index: 10;}
.bottom .right_box .btn_box .left_btn::before {background: #bd000f; content: ''; position: absolute;right: 0; left: 0; height: 100%; width: 0; z-index: 1;}
.bottom .right_box .btn_box .left_btn:hover::before{width:100%;-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;-o-transition: all 0.3s;	transition: all 0.3s;}



.bottom .right_box .btn_box .right_btn {background: #1f1f25; width:40%;position: relative;}
.bottom .right_box .btn_box .right_btn a {position: relative;z-index: 10;}
.bottom .right_box .btn_box .right_btn::before {background: #404046; content: ''; position: absolute;right: 0; left: 0; height: 100%; width: 0; z-index: 1;}
.bottom .right_box .btn_box .right_btn:hover::before{width:100%;-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;-o-transition: all 0.3s;	transition: all 0.3s;}

/*푸터*/


/*top버튼*/
#MOVE_TOP_BTN {display: flex; justify-content: flex-end; align-items: center; position: fixed; right: 0%; height: 125px; bottom: 50px; z-index: 100; width: 96px; background-image: url(../images/common/250917_top_ico.svg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center;}
#MOVE_TOP_BTN div {display: flex;justify-content: center; align-items: center; flex-direction: column; padding-right: 15px;}
#MOVE_TOP_BTN div span { color: #FFF;text-align: right;font-family: "GmarketSans";font-size: 16px;font-style: normal;font-weight: 400;line-height: 150%;}
#MOVE_TOP_BTN div span.top_ico {display: block; width: 16px; height: 16px; background-image: url(../images/common/250917_arrow_top_ico.svg); background-repeat: no-repeat; background-position: center; background-size: cover; margin-bottom: 7px;}
#MOVE_TOP_BTN.sub {background-image: url(../images/common/260128_top_ico.svg);}
#MOVE_TOP_BTN.sub div span.top_ico {background-image: url(../images/common/260128_arrow_top_red_ico.svg);}
#MOVE_TOP_BTN.sub div span { color: #ED0F25;}

@media screen and (max-width:767px){
  #MOVE_TOP_BTN {
    width: 72px;
    height: 93px;
    bottom: 85px;
  }
  #MOVE_TOP_BTN div span {
    font-size: 12px;
  }
  #MOVE_TOP_BTN div span.top_ico {
    width: 14px;
    height: 14px;
  }
}

@media screen and (max-width:1300px){
  .header_inner {width:100%}
  .header_inner .gnb_wrap {width:600px;}
  .header_inner .gnb_depth2_wrap .depth2_inner{width:600px;}
  .header_inner .gnb_depth2_wrap .depth2_inner > ul {width:600px;}
  .header_inner .gnb_depth2_wrap .bottom_nav {display: none;}
  .header_inner .gnb_depth2_wrap .ez_nav {display: none;}


  /*메인 슬라이드*/
  .main_banner{height:auto; border-bottom:0px; margin-bottom: 100px;}
	.main_banner_btn{width:100%; left:0; margin-left:0;}
	.main_banner_btn .swiper-button-prev{left:40px; top:-12vw;}
	.main_banner_btn .swiper-button-next{right:40px; top:-12vw;}
  .silde_list02{min-height: 1px; height: 700px;}
  .silde_list01{min-height: 1px; height: 700px;}
  .silde_list03{min-height: 1px; height: 700px;}
  .silde_list02:before{ width: 446px; height:700px;}
  .silde_list02:after{width:740px;height:740px; right: -50px;}
  .silde_list01:before{width:800px; height: 800px; right: -70px;}
  .silde_list01:after{width: 800px; height: 142px; right: -70px;}
  .silde_list03:before{display: none;}
  .silde_list03:after{ width: 150%; height: 701px;}
  .caption .caption_inner {max-width: 100%; padding-left: 170px;}
  .caption .caption_inner .c_title:before {content: '';position: absolute;top: 50%;transform: translateY(-50%);background: url(../images/contents/main_icon_01_t.png) no-repeat; width: 64px; left: -85px; height: 148px;}
  .main_visual_list .swiper-slide:nth-child(2n - 1) .caption .caption_inner .c_title:before{content: '';position: absolute;top: 50%;transform: translateY(-50%);background: url(../images/contents/main_icon_01_t.png) no-repeat; width: 64px; left: -85px; height: 148px;}


  /*비즈니스 영역*/
  .main_business {width:100%; padding:0 25px;}
  .main_business .main_title {padding-bottom: 40px;}
  .main_business .con-width li {width: calc(25% - 10px);margin-right: 13px;padding-top: 30px;padding-bottom: 30px;}
   .main_business .con-width li dl {padding-bottom: 20px;font-size: 16px;}
   .main_business .con-width li dd {padding-bottom: 25px;font-size: 12px;line-height: 18px;}
  .main_business .con-width li figure { margin-top: 15px;}

  /*포트폴리오 영역*/
  .portfolio_banner {margin-bottom: 220px;}
  .portfolio_banner .swiper-pagination {text-align: left; padding-left: 25px; left: 0;height: 50px; transform: none; width: 100%;}
  .portfolio_banner .auto_btn {left: 55px;transform:none;}
  .portfolio_banner .portfolio .portfoliol_list li a .p_img{display: none;}
  .portfolio_banner .portfolio .portfoliol_list li a .t_img{display: block;}
  .portfolio_banner .portfolio .portfoliol_list li a .m_img{display: none;}
  .portfolio_banner .p_title .title_inner {width:100%; padding:0 25px;}
  .portfolio_banner .p_caption {bottom: -100px;}
  .portfolio_banner .p_caption .p_caption_inner {width:100%; padding: 0 25px;}
  /*.portfolio_banner .p_caption .p_caption_inner .port_img {width:527px !important; height: 346px !important;position: absolute; bottom: -100px; z-index: 1;}*/
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box {width:470px; height: 350px; padding:45px 35px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box:before {top:18px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box .more {width: 190px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick{width: 190px;}

  .portfolio_list{width:100%; padding:0 25px;}
  .portfolio_list ul li {width:32%; height: auto;  margin-left: 1%; margin-right: 1%;}
  .portfolio_list ul li a img {width:100%;}
  .portfolio_list ul li .txt_inner {left:20px; top:22px;}

    /*수정*/
    .portfolio_banner .portfolio .devices{margin: 0 20px;}
    .portfolio_banner .portfolio.swiper-container img{    bottom: -165px;     max-width: 500px;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .pc{    top: -262px;    left: 60px;     max-width: 310px;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .mob{ left: 418px;    bottom: 8px;   max-width: 72px;}
    .portfolio_banner .portfolio.swiper-container .swiper-slide .p_caption .p_caption_inner .p_cont .box{       right: 0;    position: absolute; bottom: 0;}
    .portfolio_banner .p_caption .p_caption_inner .p_cont .box .more,.portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick{bottom: 45px;}
    .portfolio_list ul > li:nth-child(3n+1){clear: both}
.portfolio_list ul > li:nth-child(2n+1){clear: none}


  /*서비스 영역*/
  .service_wrap .service_inner {width:100%; padding:50px 25px; height: 100%; display: inline-block;}
  .service_wrap .service_inner .tit_box {position: relative; width: 100%; margin-bottom: 50px; top:auto; transform:none;}
  .service_wrap .service_inner .tit_box h1 {display: inline-block;margin-right: 30px;}
  .service_wrap .service_inner .tit_box p{display: inline-block;}
  .service_wrap .service_inner .service_list{position: relative; width: 100%; margin-bottom: 50px; top:auto; transform:none;}


  /*제작문의*/
  .bottom .left_box .p_img {display: none;}
  .bottom .left_box .t_img {display: block;}
  .bottom .right_box {padding:75px 25px 60px 35px;}
  .bottom .right_box .txt_box {font-size: 16px;}
  .bottom .right_box .btn_box li a {width:100%;}
  .bottom .right_box .btn_box .right_btn a {width: 100%;}
  .bottom .right_box .btn_box li {width:48%; }
  .bottom .right_box .btn_box .right_btn {width:45%}
  .bottom .right_box .btn_box .left_btn{width:45%}
  .bottom .right_box .btn_box .left_btn a {width:100%;}



  /*푸터 영역*/
}


@media screen and (max-width:1023px){
  .header_inner .main_logo a img{max-width: 160px;}
  .header_inner .main_logo_hover a img{max-width: 140px;}
  .header_inner .gnb_wrap {width:450px;}
  .header_inner .gnb_depth2_wrap .depth2_inner {width:450px;}
  .header_inner .gnb_depth2_wrap .depth2_inner > ul {width:450px;}
  .header_inner .gnb_depth2_wrap .depth2_inner > ul > li > ul > li > a {font-size: 16px;}
  .caption .caption_inner .c_sub_title {font-size: 18px;}
  .caption .caption_inner .c_title {font-size: 38px; line-height: 44px; margin-bottom: 16px;}

  .header_inner .top_nav{padding-top:22px;}
  .header_inner .top_nav .plus_ico {display: none; width: 32px; height: 32px; flex-shrink: 0;background-image: url(../images/common/250710_white_plus.svg); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; transform: rotate(0deg); transition: 0.3s ease;}
  .header_inner .top_nav .plus_ico.sub {background-image: url(../images/common/250710_black_plus.svg);}
  /* .header_inner .top_nav .plus_ico:hover {transform: rotate(90deg);} */
  .header_inner.m_head_type .top_nav .plus_ico {transform: rotate(45deg);}
  /* .header_inner .top_nav .ez a {width:140px; height: 42px; line-height: 42px;} */

  #header.activated .header_inner .gnb_wrap .gnb_list > li > a {font-size: 16px;}

 /*비즈니스*/
 .main_business .con-width li {width:calc(50% - 10px); margin-right: 20px;}
 .main_business .con-width li:nth-child(2){margin-right: 0; margin-bottom: 20px;}
 .main_business .con-width li dl {font-size: 17px;}
 .main_business .con-width li dd {font-size: 16px;line-height: 24px;}
 .main_business .con-width li:last-child dd {font-size: 16px}
 .main_business .con-width li figure {margin-top: 20px;}


 /*포트폴리오*/
 .portfolio_banner .p_caption .p_caption_inner .port_img{width:45% !important; height: 302px !important;}
 .portfolio_banner {margin-bottom: 250px}

      /*수정*/
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .mob{   top: -152px; }
    .portfolio_banner .portfolio.swiper-container .swiper-slide .p_caption .p_caption_inner .p_cont .box{     bottom: 315px;}
    .portfolio_banner .p_caption .p_caption_inner .p_cont .box{    height: 400px;}
    .portfolio_banner .p_caption .p_caption_inner .p_cont .box .more, .portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick{height: 40px;line-height: 40px; bottom: 40px;}
    .portfolio_banner .p_caption .p_caption_inner .p_cont .box .more{bottom: 90px; right: 50px; }


  /*제작문의*/
  .bottom .right_box .btn_box .left_btn {width:49%; float: left; margin-right: 0;}
  .bottom .right_box .btn_box .right_btn {width:49%; float: right;}
  .bottom .right_box .btn_box li a {font-size: 16px;}
}




@media screen and (max-width:767px){
	html{font-size:10px;}
  /* #header {height: 90px; border-bottom: 0;} */
  #header.on .header_inner .main_logo_hover {/*display: none;*/}
  #header .header_inner.m_type .main_logo {display:block;}
    #header .header_inner.m_type .main_logo_hover{display: none;}
  #header.on .header_inner .main_logo {display:block;}
  .header_inner {height: 100%;  border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
  .header_inner.main {height: 72px;  border-bottom: unset;}
  .header_inner.sub {height: 72px;}
  .header_inner .main_logo a,
  .header_inner .main_logo_hover a,
  .header_inner .top_nav{
    padding-top: 16px;
  }
  .header_inner .top_nav .plus_ico {display: block;position: relative;z-index: 500;}
  .header_inner .top_nav .ez {display: none;}
  .header_inner .gnb_depth2_wrap.on{display:none;}
	.header_nav{display:none;}
	.header_inner .gnb_wrap{display:none;}
  .header_inner .gnb_depth2_wrap .depth2_inner > ul {width:100%;}
	.header_inner .m_gnb_toggle{display:block;}
  .header_inner.m_type  {background: #16161c; border-bottom: 0;}
  .header_inner.m_type .gnb_depth2_wrap:after{content: ''; position: absolute;background:url(../images/contents/gnb_bg.png) no-repeat; width:960px; height: 1700px; display: none;}
	.header_inner.m_type .main_logo{display: none;}
	.header_inner.m_type .dim{position:fixed; display:block; top:0; width:100vw; height:100vh; background:#000; opacity:.3; z-index:1;}

    /*햄버거 수정*/
    #header.activated .menu-icon__line,
    #header.on .menu-icon__line{background-color: #d81f25;}
	.header_inner.m_type .m_gnb_toggle a{/*background:url(../images/contents/m_gnb_close.png) no-repeat center center;background-size: 30px 30px;*/}
    .header_inner.m_type .m_gnb_toggle a .menu-icon__line {
    background-color: #fff; width:40px;
    -webkit-transform: translate(0px, 0px) rotate(-45deg);
          transform: translate(0px, 0px) rotate(-45deg);
}
    .header_inner.m_type .m_gnb_toggle a .menu-icon__line-left {
    width: 20px;
    -webkit-transform: translate(-18px,2px ) rotate(45deg);
          transform: translate(-18px, 2px) rotate(45deg);
}
    .header_inner.m_type .m_gnb_toggle a .menu-icon__line-right {
    width: 20px;
    float: right;
    -webkit-transform: translate(-2px, -2px) rotate(45deg);
          transform: translate(-2px, -2px) rotate(45deg);
}
    .header_inner.m_type .m_gnb_toggle a .menu-icon:hover .menu-icon__line{width:40px;}
    .header_inner.m_type .m_gnb_toggle a .menu-icon:hover .menu-icon__line-left,
.header_inner.m_type .m_gnb_toggle a .menu-icon:hover .menu-icon__line-right{
    width: 20px;
}



	.header_inner.m_type .gnb_depth2_wrap{display:block; width:100%; height:calc(100vh - 58px); background:#16161c url(../images/contents/gnb_bg.png) no-repeat;background-size: cover;z-index:2;}
  .header_inner.m_type .gnb_depth2_wrap .depth2_inner {width: 100%}
  .header_innerm_type .gnb_depth2_wrap .depth2_inner > ul {width:100%;}
  .header_inner.m_type .gnb_depth2_wrap:before {display: none;}
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner:before{display:none;}
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li{width:100%; padding:0; height:auto; }
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > .depth2_tit{display:block; padding:0 20px 0 20px; font-size:20px; color: #fff;}
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li.on > .depth2_tit{color:#d81f25;}
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > .depth2_tit a{position:relative; display:block; padding:10px 0;}

	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li.on > .depth2_tit a:after{background:url(../images/content/m_gnb2_close.png) no-repeat; background-size:18px 18px;}
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > ul{display:none; height:auto; border-left: 0; border-right: 0;}
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > ul > li{padding:0 20px;}
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > ul > li > a{padding:6px 0; font-size:16px; color:#9c9ca4; }.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > ul > li > a:hover{color:#fff;}
	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > ul > li:first-child > a{border-top:0;}

	.header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > ul > li.on > a{color:#f6921e;}

  .header_inner.m_type .gnb_depth2_wrap .ez_nav {display: block; position: relative;}
  .header_inner.m_type .gnb_depth2_wrap .ez_nav a {display: block; padding: 10px 20px; font-size: 20px;
    color: #d81f25; font-weight: 600;}

  .header_inner.m_type .gnb_depth2_wrap .bottom_nav {display: block;position: absolute;padding: 0 30px;bottom: 69px;width:100%;}
  .header_inner.m_type .gnb_depth2_wrap .bottom_nav .btn_box .left_btn{margin-right: 2%;
  width: 49%; height: 50px; float: left; line-height: 50px; text-align: center;font-size:18px;
  display: inline-block; display: block; background: #fb1920; color:#fff;}
  .header_inner.m_type .gnb_depth2_wrap .bottom_nav .btn_box .right_btn{width: 49%; height: 50px; float: right; line-height: 50px; text-align: center; font-size: 18px; display: inline-block; display: block; background: #dcdce2;color:#1f1f25}

     /*모바일메뉴 수정*/
    .header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li{ width: 80%; border-bottom: 1px dashed #424242;}
    .header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li.on{background: #1f1f25;}
    .header_inner.m_type .gnb_depth2_wrap .depth2_inner > ul > li > ul > li > a:before{content: ''; width: 2px; height: 2px; border-radius: 50%; position: absolute;}


 /*메인 슬라이드*/
 .silde_list01{min-height: 1px; height: 500px;}
 .silde_list02{min-height: 1px; height: 500px;}
 .silde_list03{min-height: 1px; height: 500px;}

 .silde_list01:before{width: 600px; height: 600px;}
 .silde_list01:after{width: 600px; height: 107px; top : 100px;}
 .silde_list02:before{ width: 319px; height:500px;}
 .silde_list02:after{width:500px;height:500px;}
 .silde_list03:after{ height: 500px;}


 .caption .caption_inner .c_title:before {display: none;}
 .main_visual_list .swiper-slide:nth-child(2n - 1) .caption .caption_inner .c_title:before {display: none;}
 .caption { transform: translateY(-40%);}
 .caption .caption_inner {padding-left: 50px;}
 .caption .caption_inner .c_sub_title {font-size: 0px;margin-bottom: 6px;}
 .caption .caption_inner .c_title {font-size: 28px; margin-bottom: 18px; line-height: 32px;}
.main_banner .swiper-button-next {width: 28px; height: 35px;right: 7px; background: url(../images/contents/main_banner_next_m.png) no-repeat;    transform: translateY(10px);}
.main_banner .swiper-button-prev {width: 28px; height: 35px;left: 7px; background: url(../images/contents/main_banner_prev_m.png) no-repeat;transform: translateY(10px);}
.auto_btn .swiper-button-next{background: url(../images/contents/portfolio_next.png) no-repeat;
  width: 13px;height: 19px; right: -25px;margin-top:-19px;}
.auto_btn .swiper-button-prev{background: url(../images/contents/portfolio_prev.png) no-repeat;width: 13px;height: 19px;left: -25px;margin-top:-19px;}
.auto_btn {display: none;}


  /*포트폴리오 영역*/
  .port_visual {height: 350px !important}
  .portfolio_banner .p_caption {bottom: auto; position: inherit; top:0}
  .portfolio_banner .p_caption .p_caption_inner .port_img {width:90% !important; position: absolute; top:-150px;z-index: -1;height: 400px !important}
  .swiper-slide-active .p_caption .p_caption_inner .p_cont {width:100%; padding-top:45%}
  .portfolio_banner .p_caption .p_caption_inner {width:100%; display: inline-block;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box {width:100%;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box .more {width:49%; margin-right: 2%;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick {width:49%;}
  .portfolio_banner .portfolio .portfoliol_list li a .p_img{display: none;}
  .portfolio_banner .portfolio .portfoliol_list li a .t_img{display: none;}
  .portfolio_banner .portfolio .portfoliol_list li a .m_img{display: block;}
  .portfolio_banner {margin-bottom: 40px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box:before {display: none;}

  .portfolio_list ul li {width:49%; margin-right: 2%; margin-left: 0;}
  .portfolio_list ul li:nth-child(2n) {margin-right: 0;}
  .portfolio_list ul li:nth-child(3) {margin-right: 2%;}
  .portfolio_banner .swiper-pagination {height: 50px;}

    /*수정*/

    .portfolio_banner{padding-bottom: 60%;}
    .port_visual{margin-bottom: 50%}
    .portfolio_banner .portfolio .devices{width: auto;}
    .portfolio_banner .portfolio.swiper-container img{bottom: 0; max-width: 95%;}
    .portfolio_banner .portfolio.swiper-container .swiper-slide .p_caption .p_caption_inner .p_cont .box{opacity:0;}
    .portfolio_banner .portfolio.swiper-container .swiper-slide-active .p_caption .p_caption_inner .p_cont .box{opacity: 1}

    .portfolio_banner .p_caption .p_caption_inner .p_cont{width: 100%;}
    .portfolio_banner .p_caption .p_caption_inner .p_cont .box .more, .portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick{    bottom: auto;    right: auto;    left: auto;    top: auto;    position: relative;    width: 49%;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img{width: 62% !important;}

    /*재수정 */
    .portfolio_banner .portfolio.swiper-container img{    max-width: 600px;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .mob{max-width: 86px;    left: 502px;    top: -109px;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .pc{top: -242px;
    left: 76px;
    max-width: 365px;}

    .portfolio_list ul > li:nth-child(3n+1){clear:none}
    .portfolio_list ul > li:nth-child(2n+1){clear: both}




 /*서비스 영역*/
 .service_wrap .service_inner .service_list ul li {width:50%;min-height: 300px;}

 /*제작 문의*/
 .bottom {height: auto; position: relative;}
 .bottom .left_box {position: relative; width:100%;}
 .bottom .right_box {position: relative; width:100%; padding: 40px 25px; text-align: center;display: inline-block;}
 .bottom .right_box .btn_box li {width:48%;}
 .bottom .right_box .btn_box li a {width:100%;}
 .bottom .right_box .btn_box .left_btn {margin-right: 1%;}
 .bottom .right_box .btn_box .right_btn a {width:100%; margin-left: 1%;}
 .bottom .right_box:after {display: none;}
 .bottom .right_box .btn_box {margin:0 auto;}

 /*푸터 영역*/

  /*popup*/
  .layer_pop{top:0px; left:0px; z-index: 103;}
  .layer_pop .pop_img img{max-width: 100%}


  /*new header mobile*/
    .header_inner.m_head_type #m_header {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      position: fixed;
      width: 100%;
      background: rgba(0, 0, 0, 0.70);
      backdrop-filter: blur(15px);
      height: 100vh;
    }
    .header_inner.m_head_type #m_header .m_gnb_box {
      display: flex;
      height: 630px;
      justify-content: center;
      align-items: center;
      margin-top: 90px;
    }
    .header_inner.m_head_type #m_header .m_gnb_box ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }
    .header_inner.m_head_type #m_header .m_gnb_box ul li {
      display: flex;
      align-items: flex-start;
      gap: 4px;
    }
    .header_inner.m_head_type #m_header .m_gnb_box ul li a {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 4px;
      color: #FFF;
      font-family: "GmarketSans";
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
    }
    .header_inner.m_head_type #m_header .m_gnb_box ul li a:hover .white_dot {
      background: #ED0F25;
      transition: 0.6s ease;
    }
    
  /*new header mobile*/
}
 /*new header mobile*/
.header_inner #m_header {
      display: none;
    }
 /*new header mobile*/

@media screen and (max-width:650px){
  .main_business {margin-bottom: 30px;}
  .main_business .con-width li{width:100%; padding-top:20px; padding-bottom: 25px; margin-right: 0; margin-bottom: 10px;}
  .main_business .con-width li dl {padding-bottom: 10px;}
  .main_business .con-width li dt {padding-bottom: 15px;}
  .main_business .con-width li figure {margin-top: 22px;}
  .main_business .con-width li:nth-child(2){margin-bottom: 10px;}

  /*포트폴리오*/
  .portfolio_banner .p_title {top:40px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3)}
  .portfolio_banner .p_title .title_inner h1 {font-size: 40px;}
  .portfolio_banner .swiper-pagination {top: 110px;}
  .portfolio_banner .auto_btn {top:138px;}
  .portfolio_banner .p_caption {top:0;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box {padding: 25px 22px; height: 320px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box h1 {font-size: 18px; margin-bottom: 22px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box ul {font-size: 16px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box ul dl {width:82px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box .more a {font-size: 15px;}
  .portfolio_banner .p_caption .p_caption_inner .p_cont .box .quick a {font-size: 15px;}

   /* 수정 */
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img{z-index: 0;}
    .portfolio_banner .portfolio.swiper-container img{ max-width: 440px; bottom: 115px;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .mob{    max-width: 65px;    left: 367px;    top: -155px;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .pc{top: -253px;    left: 53px;    max-width: 270px;}
    .portfolio_banner { padding-bottom: 40%;}
    .portfolio_banner .portfolio.swiper-container .swiper-slide .p_caption .p_caption_inner .p_cont .box{bottom: 405px;}

}




@media screen and (max-width:500px){

  /*메인 슬라이드*/
  .silde_list01{min-height: 1px; height: 450px;}
  .silde_list02{min-height: 1px; height: 450px;}
  .silde_list03{min-height: 1px; height: 450px;}

  .silde_list01:before{ transform: translate(-50% , 0); right: inherit; left: 50%; width: 500px; height: 500px; opacity: 0.8;}
  .silde_list01:after{width: 500px;height: 89px; transform: translate(-50% , 0); right: inherit; left: 50%;}
  .silde_list02:before{ width: 140px; height:450px;}
  .silde_list02:after{width:450px;height:450px;}
  .silde_list03:after{ height: 451px;}


  .caption{transform: translateY(-35%);}
  .caption .caption_inner .c_title {font-size: 24px; line-height: 29px;}
  .caption .caption_inner .c_btn {width:220px; height: 45px; line-height: 45px; font-size: 17px;}

  .portfolio_banner .p_caption .p_caption_inner .port_img {top:-60px;}
  .swiper-slide-active .p_caption .p_caption_inner .p_cont {padding-top: 55%}
  .bottom .right_box .btn_box li {width:49%; margin-right: 0;}
  .bottom .right_box .btn_box li a {font-size: 16px;}

  /*포트폴리오*/
  .port_visual {height: 250px !important}
  .portfolio_list ul li .txt_inner {top:15px; left: 15px;}
  .portfolio_list ul li .txt_inner dl {font-size: 16px; margin-bottom: -1px;}
  .portfolio_list ul li .txt_inner dt {font-size: 13px;}

    /* 수정 */
    .portfolio_banner .portfolio.swiper-container img{top: -280px;}
    .portfolio_banner .portfolio.swiper-container img{ max-width: 315px;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .mob{  max-width: 45px;    left: 261px;    top: -138px;}
    .portfolio_banner .portfolio.swiper-container .p_caption .p_caption_inner .port_img .pc{top: -208px;    left: 35px;    max-width: 195px;}
    .portfolio_banner { padding-bottom: 77%;}
    .portfolio_banner .portfolio.swiper-container .swiper-slide .p_caption .p_caption_inner .p_cont .box{bottom: 285px;}

  /*푸터*/

    .header_inner.m_type .gnb_depth2_wrap .bottom_nav .btn_box .right_btn{font-size: 15px;}
}