@import url(reset.css);
@import url(default.css);
@import url(menu.css);
@import url(dot.css);
@import url(mob.css);

:root {
    --container: 140rem;
    --font_eng: 'Quantico', sans-serif;
    --main_color: #ed0f68;
    --sub_color: #00123b;
}


::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: var(--sub_color);
}

::selection {
  color: #fff;
  background: var(--sub_color);
}


*{box-sizing: border-box; word-break: keep-all;}
html{font-size: 10px;}
body{font-size: 1.8rem;}

#pointer-dot {left: 0;  top: 0;  width: 0;  height: 0;  border: 2.5px solid orange;  position: fixed;  border-radius: 4px;  z-index: 101;  pointer-events: none;  transition: border-color 0.5s;}
#pointer-ring {  left: 0;  top: 0;  width: 0;  height: 0;  padding: 15px;  border: 2px solid orange;  position: fixed;  border-radius: 100px;  z-index: 102;  pointer-events: none;}


/* 공통 */
.wrap{position: relative;}
.container{width: 100%; max-width: var(--container); margin: auto; padding-left:2rem; padding-right:2rem  }


/* 상단메뉴 */
header{display: flex; gap:10rem; align-items: center; width:100%; padding:0 2rem; height: 10rem; width: 100%; position: fixed; top: 0; z-index: 9; transition: all .5s;}
.sticky { backdrop-filter: blur(10px);  background:rgba(0,0,0,0.8); box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,0.5); width: 50%; right: 0; }

nav{position: absolute; top: 2.5rem; left: 50%; transform: translateX(-50%); width: 60rem;}
nav ul{display: flex;}
nav ul li{flex:1; text-align: center;}
nav ul li a{display: block; font-weight: bold; color:#fff}

.sticky .hamburger-menu span{background: var(--main_color) !important;}
.sticky h1{display: none;}

/* 메인 비주얼 */
.main_bg{position: absolute; top: 0;  left: 0;  width:100%; height: 100vh; overflow: hidden;}
.main_bg video{width: 100%; height: 100%; object-fit: cover;}
.main{overflow: hidden; position: relative; height: 100vh;/* background: url(../images/main/main_bg.jpg) no-repeat fixed;*/ display: flex; align-items: center;}
.main::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:#30353f; opacity: 0.5; z-index: 1;}
.main_slider{position: relative; z-index: 8;}
.main_slider .swiper-slide{display: flex; justify-content: space-between; align-items: center; color:#fff}
.main_slider .title{font-family: var(--font_eng); text-transform: uppercase; font-size: 10rem; color:rgba(255,255,255,0.3); opacity: 0; transition: 1s; letter-spacing: 20px;}
.main_slider h2{font-size: 4rem; margin-top: -10rem;}
.main_slider h3{font-size: 15rem; font-weight: 900; display: inline-block;}
.main_slider .circle{overflow:hidden; border-radius: 100%; width: 50rem; height: 50rem; transition:1.2s; opacity: 0; filter:blur(50px)}
.main_slider .circle img{width: 100%;}
.main_slider .title_icon{position: absolute; left: 40%; top: 3rem; opacity: 0; transition: 0.8s; font-weight: 900; font-size: 5rem; color:var(--main_color)}
.main_slider .main_text{transition:.7s; opacity: 0;}

.main_slider .swiper-slide-active .title{opacity: 1; letter-spacing: normal;}
.main_slider .swiper-slide-active .main_text{ opacity: 1;}
.main_slider .swiper-slide-active .circle{opacity: 1; filter:blur(0)}
.main_slider .swiper-slide-active .circle img{filter: blur(0); opacity: 1;}
.main_slider .swiper-slide-active .title_icon{opacity: 1; }

/* 타이핑 */
.main_slider .swiper-slide-active .typewriter p {overflow: hidden; border-right: .15em solid #fff; white-space: nowrap; letter-spacing: -10px; margin: 0 auto; display: inline-block; animation: typing 3s steps(15, end), blink-caret .5s step-end infinite;}
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color:rgba(255,255,255,0.5) }
}


.main_slider .swiper-pagination{text-align: left; position: relative;}
.main_slider .swiper-pagination-bullet{background: transparent;}

.swiper-pagination-bullet {	background: var(--main_color);}
.swiper-pagination-bullet-active .path{display: inline-block !important; stroke-dasharray: 1000; stroke-dashoffset: 0; animation: dash linear 120s; animation-iteration-count: unset;}
.path {display: none;}
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* 마우스 애니메이션 */
#scrolling-mouse {position: relative; display: inline-block; height: 45px; width: 30px; border: solid 2px white; border-radius: 20px; text-align: center; 
    position: absolute; bottom: 8rem; left: 50%; transform: translateX(-50%); z-index: 9; }
#scrolling-mouse::before {content: ""; position: absolute; display: block; height: 15px; top: 110%; left: 50%;  width: 15px; border-right: solid 2px white; border-bottom: solid 2px white; animation-name: arrow; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-out;}
#scrolling-mouse::after {content: ""; position: relative;  display: inline-block; height: 5px; width: 3px; background-color: white; border-radius: 2px; animation-name: scroll; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
  @keyframes scroll{
    0%{
      height: 2px;
      opacity: 0;
      transform: translateY(0px);
    }
    20%{
      height: 8px;
      opacity: 1;
    }
    80%{
      height: 8px;
    }
    100%{
      height: 2px;
      opacity: 0;
      transform: translateY(15px);
    }
  }
  @keyframes arrow{
    0%{
      opacity: 0;
      transform: translateX(-50%) translateY(0px) rotate(45deg);
    }
    20%{
      opacity: 1;
    }
    100%{
      opacity: 0;
      transform: translateX(-50%) translateY(20px) rotate(45deg);
    }
  }
.video_text{position: relative; height:25rem;}
.video_text video,
.video_text h2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;}
.video_text video { object-fit: cover;}
.video_text h2 {font-size:20rem; font-family: var(--font_eng);  font-weight: 900;  text-transform: uppercase;  text-align: center;  background: white;  mix-blend-mode: screen;}

/* 메인 아이콘 */
.main_icon_list{padding:10rem 0; text-align: center;}
.main_icon_list h2{padding:0 0 10rem}
.main_icon_list h2 span{display: block;font-weight: bold; font-size: 5rem;}
.main_icon_list ul{display: flex;}
.main_icon_list ul li{flex:1; border-right: 1px solid #ccc; padding:10rem 2rem; margin-left: -1px; color:#666}
.main_icon_list ul li:last-child{border: none;}
.main_icon_list ul li span{display: block; font-size: 2.4rem; font-family: var(--font_eng); text-transform: uppercase; font-weight: bold; color:#333}

/* 메인 비즈니스 */
.flex-container { position:relative; height: 100vh; width: 100%; display: flex; overflow: hidden;}
  @media screen and (max-width: 768px) {
    .flex-container {flex-direction: column;}
    .flex-title {transform: rotate(0deg) !important;}
    .flex-about {padding: 0%; border: 0px solid #f1f1f1;}
    .flex-slide {overflow: auto; overflow-x: hidden;}
    .flex-slide p {font-size: 2em;}
    .flex-slide ul li {font-size: 2em;}
    .business01 {animation: aboutFlexSlide 3s 1; animation-delay: 0s;}
  }
  
.flex-title {color: #fff;position: relative; font-family: var(--font_eng); font-weight: bold; font-size: 5rem; margin: auto;text-align: center;transform: rotate(90deg);top: 15%;transition: all 500ms ease;}
.flex-about {opacity: 0; color: #f1f1f1; position: relative; width: 70%; font-size: 2rem; padding: 5%; top: 20%; line-height: 1.3; margin: auto; text-align: center; transform: rotate(0deg); transition: all 500ms ease;}
.flex-about dt{font-weight: bold; font-size:2.4rem}
.flex-slide {flex: 1; cursor: pointer; transition: all 500ms ease;}
.flex-slide:hover {flex-grow: 3;}
.business01 {height: 100vh;background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/business01.jpg); background-size: cover; background-position: center center; background-attachment: fixed;}
.business02 {background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/business02.jpg); background-size: cover; background-position: center center; background-attachment: fixed;}
.business03 {background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/business03.jpg); background-size: cover; background-position: center center; background-attachment: fixed;}
.business04 {background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/business04.jpg); background-size: cover; background-position: center center; background-attachment: fixed;}
.business05 {background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/main/business05.jpg); background-size: cover; background-position: center center; background-attachment: fixed;}

  @keyframes aboutFlexSlide {
    0% {
      -webkit-flex-grow: 1;
      flex-grow: 1;
    }
    50% {
      -webkit-flex-grow: 3;
      flex-grow: 3;
    }
    100% {
      -webkit-flex-grow: 1;
      flex-grow: 1;
    }
  }
  @media screen and (min-width: 768px) {
    .flex-title-home {
      transform: rotate(90deg);
      top: 15%;
      animation: aboutFlexSlide 3s 1;
      animation-delay: 0s;
    }
  }
  
  @keyframes homeFlextitle {
    0% {
      transform: rotate(90deg);
      top: 15%;
    }
    50% {
      transform: rotate(0deg);
      top: 15%;
    }
    100% {
      transform: rotate(90deg);
      top: 15%;
    }
  }
  .flex-about-home {opacity: 0;  }
  @media screen and (min-width: 768px) {
    .flex-about-home {
      animation: aboutFlexSlide 3s 1;
      animation-delay: 0s;
    }
  }
  
  @keyframes flexAboutHome {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }  

/* 포트폴리오 */
.gallery-wrap,
#gallery { overflow: hidden;}
#gallery{display: flex; flex-wrap: wrap;;}
#filters {overflow: hidden; display: flex; justify-content: center; padding:5rem 0}
#filters li {font-family: var(--font_eng); font-weight: 900; }
#filters li span {display: block; padding: 5px 20px; text-decoration: none; cursor: pointer; text-transform: uppercase; transition: all ease-in-out 0.25s;}
#filters li:hover span { color: #000;}
#filters li span.active {color:var(--main_color);}
.gallery-item { width: 25%; position: relative; z-index: 8; display: none;}
.inside { position: relative; overflow: hidden; width: 100%; height: 100%;}
.details,
.gallery_overlay {position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background: rgba(0,0,0,0.8);}
.details { display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.3s ease-in-out;}
.details h2 { color: #fff; font-size: 1.5em; font-weight: 700; letter-spacing: 1px; text-align: center; margin: 0;}
.details p { color: #fff; font-size: 1em; letter-spacing: 2px; text-align: center; margin: 0; text-transform: uppercase;}
.inside img { float: left; width: 100%;}
/*.gallery_overlay { background:var(--main_color); z-index: 8; transition: all 0.7s ease-in-out;}*/
.gallery-item:hover .details,
.gallery-item:hover .overlay { opacity: 1;}

/* 제작문의 */
.contact_con{display: flex; gap:5rem; padding:5rem 0}

.contact_tit{text-align: left; width:30%}
.contact_tit dt{font-weight: bold; font-size: 6rem; padding:0 0 3rem 0}
.contact_tit dd{font-size: 3rem; color:#666}
.contact_tit dd span{display: inline-block; padding:0 0 0 1rem; font-weight: bold; color:var(--main_color);}
.contact_form{width: calc(70% - 5rem);}

.contact_cate {display: flex; gap:2rem; padding:0 0 3rem 0}
.contact_cate li{flex:1}
.custom-radio-button__container{display:block; width:100%; font-weight: bold; border: 1px solid #ccc;}
.custom-radio-button__container input[type="radio"] { display: none;}
.custom-radio-button {display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding:2rem; background-color: #fff; cursor: pointer;}
.custom-radio-button h3 {color: #979797; font-weight: 500; font-size: 1.375rem; letter-spacing: 1px; text-align: center;}
.custom-radio-button__container input[type="radio"]:checked + .custom-radio-button { background:var(--main_color); color:#fff; box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, .5);}
.custom-radio-button__container input[type="radio"]:checked + .custom-radio-button .material-symbols-outlined{color:#fff}
.custom-radio-button__container .material-symbols-outlined{font-size: 5rem !important; color:var(--main_color)}
.input-container {position: relative; width: 250px; height: 50px; background-color:var(--main_color); display: flex; align-items: center; justify-content: center; color: white;}
.file-input {opacity: 0;position: absolute; width: 100%;  height: 100%;  cursor: pointer;  z-index: 9;}

/* 컨텍트 */
.contact_text dl{display:flex; align-items: center; gap:3rem; padding:0 0 2rem 0; text-align: left;}
.contact_text dl dt{width:18%; font-weight: bold;}
.contact_text dl dt span{display: inline-block; margin-right: 1rem; color:var(--main_color)}
.contact_text dl dd{width: calc(80% - 3rem);}
.contact_text .comm_input{border: 1px solid #ccc; border-radius: 0; padding:2rem 1rem; height: auto;}
.contact_text .comm_textarea{border: 1px solid #ccc; border-radius: 0; padding:2rem 1rem; height: auto;}

.uploadbutton {height: 30px; display: inline-block; overflow: hidden; cursor: pointer;}
.uploadbutton .input-file {opacity: 0;}
.uploadbutton .button {width: 100px; line-height: 30px; text-align: center; background: var(--main_color); transition: all 0.2s; border: 1px solid rgba(0,0,0,0.1); color: #fff; display: inline-block;}
.uploadbutton:hover .button {background: #333;}
.uploadbutton .input-file-text {width: 300px; display: inline-block;}


.button_contact{background: #333; color:#fff; font-weight: bold; padding:2rem 4rem; font-size:1.8rem}

.agree {display: block; position: relative; padding-left: 3rem; margin-bottom: 1rem; cursor: pointer; user-select: none; text-align: left; }
.agree input {position: absolute; opacity: 0; cursor: pointer;}
.checkmark { position: absolute; top: 0; left: 0; height: 2rem; width: 2rem; background-color: #eee; border-radius: 50%; }
.agree:hover input ~ .checkmark { background-color: #ccc; }
.agree input:checked ~ .checkmark {background-color: var(--main_color);}
.checkmark:after { content: ""; position: absolute; display: none; }
.agree input:checked ~ .checkmark:after { display: block;}
.agree .checkmark:after {top: 50%; left: 50%; width: 1rem; height: 1rem; transform: translate(-50%,-50%); border-radius: 50%; background: white;}



/* 풋터 */
footer{border-top:1px solid #ccc}
footer ul{display: flex; gap:5rem; padding:5rem 0}
footer ul li{font-size: 3rem; font-weight: bold; flex:1}
footer ul li span{display: block; font-size: 1.6rem; color:#666}
footer ul li p{padding:3rem 0 0 0}
footer ul li p a{display: block; border: 1px solid #333; padding:2rem; text-align: center; font-size:1.6rem; transition: .5s;}
footer ul li p a:hover{background: #333; color:#fff}
footer p{padding:3rem 0; font-family: var(--font_eng); font-size: 1.2rem; color:#ccc; letter-spacing: normal;}
.btn_contact{position: fixed; right: 3rem; bottom:3rem; z-index: 9; }
/*.btn_contact img{filter: grayscale(100%); width:70%; transition: all .5s;}
.btn_contact img:hover{filter: grayscale(0); width: 100%;}
*/

/* 서브 레이아웃 */
.sub_wrap{ overflow: hidden; min-height: 1000px; text-align: center; position: relative;}
/*.sub_wrap::before{content: ''; width: 100%; height: 100rem; background:url(../images/main/main_bg.jpg) no-repeat fixed top center; background-size: 2000px;  position: absolute; top: 0; left: 0; z-index: -1;}*/
/*.sub_wrap::after{content: ''; width: 100%; height: 100rem; background:rgba(0,0,0,0.5); background-size: 2000px;  position: absolute; top: 0; left: 0; z-index: -1;}*/
.sub_video{width:100%; height: 100rem; padding:20rem;  position: relative; overflow: hidden; z-index: -1;}
.sub_video::before{content: ''; width: 100%; height: 100rem; background:#30353f; opacity: 0;  position: absolute; top: 0; left: 0; z-index: 1;}
.video_bg{position: absolute; top: 0; left: 0;  width: 100%; height: 100rem; object-fit: cover;}
.sub_top{width: 100%; height: 80vh; position: relative; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sub_top::before{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background:#000; opacity: .6;}
.bg_service{background: url(../images/sub/service_bg.jpg);  background-size: cover;}
.bg_web{background: url(../images/sub/bg_web.jpg);  background-size: cover;}
.bg_print{background: url(../images/sub/bg_print.jpg);  background-size: cover;}
.bg_logo{background: url(../images/sub/bg_logo.jpg);  background-size: cover;}
.bg_ebook{background: url(../images/sub/bg_ebook.jpg);  background-size: cover;}
.bg_marketing{background: url(../images/sub/bg_marketing.jpg);  background-size: cover;}
.bg_project{background: url(../images/sub/project_bg.jpg);  background-size: cover;}
.bg_contact{background: url(../images/sub/contact_bg.jpg);  background-size: cover;}
.bg_repair{background: url(../images/sub/repair_bg.jpg);  background-size: cover;}
.page_bg{background: #fafafa; padding:10rem 0}



.sub_con{padding:10rem 0}

/* 게시판 추가 */
.sub_con.sub_board_write { width:1200px; margin:10rem auto; }
.board_control_btn {float:right; width:200px; position: relative; z-index: 9;}
.board_control_btn:after {content:""; display:block; clear:both;}
.board_control_btn li { float:left; margin:20px 0 20px 20px; }
.board_control_btn li a {display:block; height: 35px; line-height: 35px; width: 80px; background: #222; border: 1px solid #111; color: #fff; font-size: 13px; border-radius:5px;text-align:center; }
.btn_bo_user2 li a, .is_list_btn li button {display:inline-block;height: 35px; line-height: 35px; width: 80px; background: #222; border: 1px solid #111; color: #fff; font-size: 13px; border-radius:5px;text-align:center; }
.is_list_btn:after {content:""; display:block; clear:both;}
.is_list_btn li  { float:right; margin:10px 0 10px 10px; position: relative; z-index: 8; }
.is_list_btn li label { font-size:14px; }
.is_list_btn li a { display:inline-block;height: 35px; line-height: 35px; width: 80px; background: #222; border: 1px solid #111; color: #fff; font-size: 13px; border-radius:5px;text-align:center; }

/* 페이징 */
.pg_wrap {clear:both;display:block; margin:15px auto; text-align:center;}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.pg_wrap .sound_only {display:none; }
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee; font-size:12px; padding:5px 12px;}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:12px;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}


/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}







.sub_wrap .bg{z-index: -1 !important;}
.title_h2{ position: relative;z-index: 2; font-weight: 300; color:#fff; padding:0 0 10rem 0; }
.title_h2 span{ display: block; font-weight: bold; font-size: 5rem; padding:0 0 1rem 0; margin-bottom: 3rem; position: relative;}
.title_h2 span::before{content: ''; width: 5rem; height: .3rem; background:var(--main_color); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.title_h3{ position: relative;z-index: 2; font-weight: 300; color:#666; padding:0 0 10rem 0; }
.title_h3 span{ display: block; font-weight: bold; font-size: 8rem; font-family: var(--font_eng); color:#333}

.sub_wrap .gallery-wrap{position: relative; z-index: 8;}
.sub_wrap #gallery{gap:3rem}
.sub_wrap .gallery-item{width:calc(25% - 3rem)}


.tabmenu{display: flex; gap:3rem; padding:5rem 0; position: relative; z-index: 8;}
.tabmenu li{flex:1; border: 1px solid #ccc;}
.tabmenu li a{display: block; text-align: center; font-family: var(--font_eng); padding:2rem ; transition: all 0.5s;}
.tabmenu li a:hover,
.tab_on a{background: var(--main_color); color:#fff}




.story_con{margin-top: -70rem;}

/* 프로젝트 뷰 */
.project_bg{width: 100%; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; color:#fff; text-align: center;}
.project_bg::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
.project_tit{font-size:4rem; position: relative; z-index:2}
.project_tit span{display: block; font-size: 2rem; font-family: var(--font_eng); text-transform: uppercase; font-weight: bold;}

.overview{display: flex; gap:3rem; padding:5rem 0}
.overview dl{flex:1}
.overview dl dt{font-weight: bold; font-family: var(--font_eng);  font-weight: bold; padding:2rem 0; border-bottom: 1px solid #ccc;}
.overview dl dd{padding:2rem 0}

.board_tit{padding:5rem 0; font-family: var(--font_eng);  font-weight: bold; font-size:4rem}
.board_description{color:#666}
.board_con{padding:5rem 0}


.board_bottom ul{display: flex; padding:5rem 0}
.board_bottom ul li{flex:1; text-align: center;}
.board_bottom ul li span{display: block; font-family: var(--font_eng); font-weight: bold; font-size: 3rem;}
.board_bottom ul li a{transition: .5s;}
.board_bottom ul li a:hover{color:var(--main_color)}

/* 하루스토리 */
.story_tit{color:#fff; padding:5rem;}
.story_tit h3{font-family: var(--font_eng); text-transform: uppercase; font-size:5rem;}
.story_tit h3 span{display: block; font-size: 1.4rem; letter-spacing: 2rem ;}
.story_tit p span{font-weight: bold; font-size:3rem; display: block; padding:2rem}

.btn_down{display: inline-block; padding:3rem 0 0 0; position: relative;  z-index: 2;}
.btn_down .material-symbols-outlined{display: inline-block; padding:0}
.btn_down a{display: flex; align-items: center; gap:1rem; border: 1px solid #fff; text-align: center; color:#fff; padding:1rem 2rem; transition: all .5s;}
.btn_down a:hover{background: #333; color:#fff; border-color: transparent;}

.story_list{display: flex; gap:5rem; padding:10rem 0}
.story_list dl{padding:7rem 2rem; border: 1px solid #ccc; background: #fff;  transition: all .5s;}
.story_list dl:hover{color:#333; border-color: var(--main_color);}
.story_list dl:hover span{color:var(--main_color)}
.story_list dl dt{font-weight: 300; font-size:3rem}
.story_list dl dt em{font-weight: 900;}
.story_list dl dt span{display: block; font-weight: 900; font-family: var(--font_eng); font-size: 10rem; color:#ccc }
.story_list dl dt i{display: block; font-family: var(--font_eng); font-size: 1.4rem;  color:var(--main_color); text-transform: uppercase;}
.story_list dl dd{padding:1rem 0 0 0}


.h3{font-size: 3.6rem; font-weight: bold; padding:0 0 5rem 0}
.h3 span{display: block; font-size: 1.8rem; color:var(--main_color)}
.flex_list{display: flex; gap:5rem; text-align: left; padding:2rem 0}
.flex_list p,
.flex_list dl{flex:1; position: relative;}
.flex_list dt{font-weight: bold; font-size:3rem}
.flex_list dt em{display:inline-block; padding:0 1rem; color:var(--main_color); font-family: var(--font_eng); font-size:1.6rem}
.flex_list dt span{display: block; font-family: var(--font_eng); font-size: 10rem; color:#ccc}
.flex_list dd span{display:block ; font-weight: 500; font-size: 2rem; padding:1rem 0}
.flex_list:nth-child(odd){flex-direction: row-reverse;}

/* 서비스  */
.info{display: flex; gap:10rem; text-align: left; padding:10rem 0}
.info p{flex: 1;}
.info dl{flex:1}
.info dl dt{font-weight: bold; font-size:5rem; padding:0 0 3rem 0;}
.info dl dt span{display: block; font-weight: normal; font-size: 3rem;}
.info dl dt em{color:var(--main_color); font-weight: 900;}
.tag_list{display: flex; gap:2rem}
.tag_list{padding:5rem 0 0 0}
.tag_list li{padding:0.5rem 1rem; background: #eff0f9; border-radius: .5rem; font-size: 1.6rem; color:#666; font-weight: 500;}


.service_list{display: flex; flex-wrap: wrap; gap:3rem}
.service_list li{padding:3rem; border-radius: 1rem; box-shadow: 0 0 0.6 rgba(0,0,0,0.2); background: #fff; width:calc(33% - 3rem); text-align: left; position: relative; color:#666; font-size: 1.5rem;}
.service_list li p{font-weight: bold; color:#333; padding:0 0 2rem 0; font-size: 2rem;}
.service_list li span{display:flex; justify-content: center; align-items: center; width: 7rem; height: 7rem; background: var(--main_color); color:#fff; font-size:3rem; border-radius: 100%; position: absolute; top: 50%; transform: translateY(-50%); right: 3rem;}


.process_list{display: flex; flex-direction: column; text-align: left; gap:3rem; width: 50%; justify-content: center; margin: auto;}
.process_list li{padding:3rem; background: #f6f6fc; border-radius: 1rem; font-size: 1.6rem;}
.process_list li span{font-weight: bold; display:block; color:var(--main_color); font-family: var(--font_eng);}
.process_list li  p{font-weight:bold; font-size: 2rem; padding:0 0 1rem 0}

.accordion .accordion-item {border-bottom: 1px solid #e5e5e5;  }
.accordion .accordion-item button[aria-expanded=true] {border-bottom: 1px solid var(--main_color); }
.accordion button {position: relative; display: block; text-align: left; width: 100%; padding: 3rem;  font-size:1.8rem; color: #7288a2; border: none; background: none; outline: none;}
.accordion button:hover, .accordion button:focus {cursor: pointer; color: var(--main_color);}
.accordion button:hover::after, .accordion button:focus::after { cursor: pointer; color: var(--main_color); border: 1px solid var(--main_color);}
.accordion button .accordion-title { padding: 1em 1.5em 1em 0;}
.accordion button .icon { display: inline-block;  position: absolute; top: 18px; right: 0; width: 22px; height: 22px; border: 1px solid; border-radius: 22px;}
.accordion button .icon::before {display: block; position: absolute; content: ""; top: 9px; left: 5px; width: 10px;  height: 2px;  background: currentColor; }
.accordion button .icon::after {display: block; position: absolute;  content: "";  top: 5px;   left: 9px;   width: 2px;   height: 10px;   background: currentColor; }
.accordion button[aria-expanded=true] {color: var(--main_color); }
.accordion button[aria-expanded=true] .icon::after { width: 0; }
.accordion button[aria-expanded=true] + .accordion-content {opacity: 1; max-height: 9em;  transition: all 200ms linear;   will-change: opacity, max-height;  }
.accordion .accordion-content { opacity: 0;  max-height: 0;   overflow: hidden;    transition: opacity 200ms linear, max-height 200ms linear;    will-change: opacity, max-height; background: #fafafa;  }
.accordion .accordion-content p {text-align: left; padding:3rem 5rem; font-size: 1.6rem; }
  
/* 유지보수 신청 */
.repair_tit{text-align: left; padding: 0 0 5rem 0;}
.repair_tit dt{font-weight: bold; font-size: 4rem; padding:0 0 1rem 0}
.repair_list{border-top: 3px solid #000;}
.repair_list li{border-bottom: 1px solid #ccc; padding:3rem; transition: all .5s; }
.repair_list li:hover{background: #fafafa;}
.repair_list li a{display: block;display: flex; justify-content: space-between; align-items: center;}
.repair_list li dl{width: 50%; text-align: left;}
.repair_list li dl dt{font-weight: bold;}
.repair_list li dl dd{color:#666}
.repair_list li p{padding:1rem 2rem}
.btn_ing{background: var(--main_color);  color:#fff}
.btn_end{background: #333; color:#fff}
.repair_list li span{font-family: var(--font_eng); color:#666}

.pagenation{display: flex; align-items: center; justify-content: center; gap:2rem; padding: 0 0 10rem 0;}
.pagenation li a{font-family: var(--font_eng); color:#666}
.page_active a{color:var(--main_color) !important; font-weight: bold;}