:root {
    --primary: #dd4d3f;
  }

@media(min-width:1025px){
  body{cursor: none;}
  *:hover{cursor: none;}
  .custom-cursor {position: fixed; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--primary); pointer-events: none; z-index: 9999; transition: width 0.3s, height 0.3s; -webkit-transition: width 0.3s, height 0.3s;}
  .custom-cursor::after{width: 0; height: 0; border-radius: 50%; border: 1px solid var(--primary); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transition: 0.3s; -webkit-transition: 0.3s; content: '';}
  .custom-cursor.cursor_active{width: 1.5rem; height: 1.5rem; background: #22b2c0; mix-blend-mode: difference; animation: ovEf1 0.5s ease-out infinite alternate; animation-delay: 0.2s;}
  /* .custom-cursor.cursor_active{width: 0.2rem; height: 0.2rem;}
  .custom-cursor.cursor_active::after{width: 1.5rem; height: 1.5rem; animation: ovEf1 0.5s ease-out infinite alternate;} */
  .custom-cursor.cursor_view{width: 7.25rem; height: 7.25rem; background: url('../img/solutionOv.png') no-repeat center / cover; animation: ovEf2 0.5s ease-out infinite alternate;}
  .custom-cursor.cursor_down{width: 1.6rem; height: 1.6rem; line-height: 1.7rem; color: var(--primary); text-align: center; animation: ovEf3 0.5s ease-out infinite alternate; }
  .custom-cursor.cursor_down::before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: 'Font Awesome 6 Free'; font-weight: 900; -webkit-font-smoothing: antialiased; content: '\f019';}
  @keyframes ovEf1{
    0%{opacity: 0.8; width: 1.3rem; height: 1.3rem;}
    100%{opacity: 1; width: 1.6rem; height: 1.6rem;}
  }
  @keyframes ovEf2{
    0%{opacity: 0.8; width: 6.5rem; height: 6.5rem;}
    100%{opacity: 1; width: 7.5rem; height: 7.5rem;}
  }

  @keyframes ovEf3{
    0%{font-size: 0.7rem; width: 1.6rem; height: 1.6rem; color: #fff; background: transparent;}
    100%{font-size: 1rem; width: 1.8rem; height: 1.8rem; color: var(--primary); background: #fff;}
  }
}

/* intro */
.intro {position: fixed; display: grid; place-items: center; height: 100vh; width: 100%; background-color: var(--primary);
    z-index: 100;}
.intro__title {color: #fff; max-width: 100%; text-align: center; z-index: 2; transform: translateY(2rem); font-size: 7rem; visibility: hidden; opacity: 0;}
/* popup */
.pop_wrap{display: none; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5);}
.pop_wrap.open{display: block;}
.pop_wrap .popup{position: relative; width: 70rem; max-height: 90vh; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background: #fff; padding: 4rem; border-radius: 1.5rem;}
.pop_wrap .popup .popup_content{max-height: calc(90vh - 8rem); overflow-y: auto;}
.pop_wrap .popup .popup_content::-webkit-scrollbar{width: 1.6rem;}
.pop_wrap .popup .popup_content::-webkit-scrollbar-thumb{background-color: var(--primary); border-radius: 2rem; border: 0.5rem solid #fff;}
.pop_wrap .popup .popup_content::-webkit-scrollbar-track{background-color: transparent;}
.pop_wrap .popup .popup_content::-webkit-scrollbar-button:vertical:start:decrement,
.pop_wrap .popup .popup_content::-webkit-scrollbar-button:vertical:start:increment {display: block; height:2.2rem;}

.pop_wrap .pop_close{position: absolute; top: 3.5rem; right: 4rem; font-size: 2rem;}

/* layout */
#header .mob_toggle{display: none;}
#header .logo img{width: 8rem;}
#footer{position: relative; background: #222; color: #999; padding: 5.5rem 0 4.5rem; z-index: 1;}
#footer ul{margin-top: 1.5rem;}
#footer .contents{position: relative; width: 70rem; margin: 0 auto;}
#footer .copy{border-top: 1px solid #444; padding-top: 2rem; margin-top: 2.5rem;}
#footer .btn{display: flex; justify-content: center; align-items: center; border-radius: 4rem; position: absolute; top: 4rem; right: 0; height: 4rem; border: 1px solid #666; background: #333; color: #fff; padding: 0 0.5rem 0 1.5rem;}
#footer .btn i{display: inline-block; margin-left: 1rem; width: 3rem; height: 3rem; line-height: 3rem; text-align: center; background: #fff; color: #333; border-radius: 50%; transition: 0.3s; -webkit-transition: 0.3s;}
@media(min-width:1025px){
  #header{position: fixed; top: 2rem; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 70rem; border: 1px solid #eee; border-radius: 0.4rem; background: #fff; box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3); display: flex; justify-content: space-between; padding:0 3.5rem; height: 4rem; align-items: center; z-index: 9;}
  #header .menu ul{display: flex;}
  #header .menu ul li a{position: relative; display: block; font-size: 0.9rem; margin: 0 1.5rem; transition: 0.3s; -webkit-transition: 0.3s;}
  #header .menu ul li a:hover{font-weight: 700;}
  /* mouseover */
  #footer .btn:hover i{background: var(--primary); color: #fff;}
}

/* down */
.land_intro{position: fixed; z-index: 99; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 0; width: 3rem; border-radius: 0.5rem 0 0 0.5rem; overflow: hidden;}
.land_intro span{display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: #d73424; color: #fff;}
.land_intro p{background: #000; color: #fff; padding: 1.5rem 0; text-align: center;}
.land_intro p em{writing-mode: sideways-lr;}

/* section */
#main_content{overflow: hidden;}
.pin-spacer{z-index: 1 !important;}
.section{position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.section .contents{position: relative; width: 70rem; margin: 0 auto; padding-top: 9rem;}
.section .tit{margin-bottom: 4rem; will-change: transform;}
.section .tit *{ will-change: transform;}
.section .tit h2{font-size: 3rem;}
.section .tit p{font-size: 1.1rem;}

/* visual */
.visual{height: 100vh;}
.visual .bg img{position: absolute;}
.visual .bg .v_bg1{top: 0; left: 0; animation: bgEf1 6s linear infinite alternate;}
.visual .bg .v_bg2{top: 0; right: 0; animation: bgEf2 8s ease infinite alternate;}
.visual .bg .v_bg3{bottom: -18rem; left: 0;}
.visual .bg .v_bg4{bottom: -21.5rem; right: 0; animation: bgEf3 6s linear infinite alternate;}
.visual .slogan{text-align: center;}
.visual .slogan img{padding: 0 1rem;}
.visual .slogan .cube_wrap {display: inline-block; max-width: 8.5rem; width: 100%; vertical-align: middle; text-align: center; margin: 0 3.5rem;}
.visual .slogan .cube_wrap .perspective {perspective: 2000px; position: relative;}
.visual .slogan .cube_wrap .cube {position: relative; width: 8.5rem; height: 8.5rem; transform-style: preserve-3d;}
.visual .slogan .cube_wrap .cube div {position: absolute; width: 100%; height: 100%;}
.visual .slogan .cube_wrap .cube div img {width: 100%; height: 100%; padding: 0;}
.visual .slogan .cube_wrap .cube .front {transform: translateZ(4.25rem);}
.visual .slogan .cube_wrap .cube .back {transform: translateZ(-4.25rem) rotateY(180deg);}
.visual .slogan .cube_wrap .cube .left {transform: rotateY(-90deg) translateZ(4.25rem);}
.visual .slogan .cube_wrap .cube .right {transform: rotateY(90deg) translateZ(4.25rem);}
.visual .slogan .cube_wrap .cube .top {transform: rotateX(90deg) translateZ(4.25rem);}
.visual .slogan .cube_wrap .cube .bottom {transform: rotateX(-90deg) translateZ(4.25rem);}
.visual .slogan svg {width: 22.5rem; overflow: visible; vertical-align: middle;}
.visual .slogan path,
.visual .slogan polygon {stroke: #d7766d; stroke-width: 0.5; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 10s ease forwards infinite; animation-delay: 3s;}
.visual .slogan svg:nth-child(2) path,
.visual .slogan svg:nth-child(2) polygon { animation-delay: 0.5s; }
.visual .slogan .txt{font-size:2rem; font-weight: 700; margin-top: 5rem; line-height: 1.55;}
.visual .slogan .txt .txt_flip {position: relative; height: 4.8rem; display: inline-block; vertical-align: middle; overflow:hidden; ; font-size: 3rem; font-weight: 800; color: var(--primary); padding: 0 2.5rem; }
.visual .slogan .txt .txt_flip::before{width: 2.25rem; height: 2.25rem; background: url('../img/visuaPoint.png') no-repeat center / cover; position: absolute; left: 0; top: 1rem; animation: rotate linear 3s infinite; content: '';}
.visual .slogan .txt .txt_flip::after{width: 2px; height: 2.5rem; background: #000; position: absolute; top: 1rem; right: 1rem; content: '';}

@keyframes draw {
    100% {stroke-dashoffset: 0; stroke-width: 0; stroke: #fff;}
}

@keyframes bgEf1{
  0%{transform: scale(1); -webkit-transform: scale(1);}
  100%{transform: scale(1.3) translateX(10rem); -webkit-transform: scale(1.3) translateX(10rem);} 
}
@keyframes bgEf2{
  0%{transform: scale(1); -webkit-transform: scale(1);}
  100%{transform: scale(1.2) translate(-2rem, 2rem); -webkit-transform: scale(1.2) translate(-2rem, 2rem);} 
}
@keyframes bgEf3{
  0%{transform: scale(1); -webkit-transform: scale(1);}
  100%{transform: scale(1.2) translateY(-6rem); -webkit-transform: scale(1.2) translateY(-6rem);} 
}
@keyframes rotate{
  0% {transform: rotate(0deg); -webkit-transform: rotate(0deg);}
  100% {transform: rotate(360deg); -webkit-transform: rotate(360deg);}
}
@keyframes bounce{
  0% {transform: scale(0.95) rotateX(20deg) rotateZ(-10deg) translateY(0.5rem); -webkit-transform: scale(0.95) rotateX(20deg) rotateZ(-10deg) translateY(0.5rem);}
  100% {transform: scale(1) rotateX(0) rotateZ(0) translateY(-2rem); -webkit-transform: scale(1) rotateX(0) rotateZ(0) translateY(-2rem);}
}

/* solution */
.solution {position: relative; padding-bottom: 5rem;}
.solution .bg img{position: absolute;}
.solution .bg img.bgTop{top: 0; right: 0;}
.solution .bg img.bg1{top: 10%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); animation: rotate 15s linear infinite;} 
.solution .bg img.bg2{top: 33%; left: 0; animation: bgEf5 6s infinite alternate;}
.solution .bg img.bg3{top: 33%; right: 0; animation: bgEf2 8s infinite alternate;}
.solution .bg img.bg4{bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); animation: bgEf6 6s ease-in infinite alternate-reverse;}
.solution .solution_list{display: grid; gap: 3rem 1rem; grid-template-columns: repeat(3, 1fr);}
.solution .solution_list li:nth-of-type(3n-1){transform: translateY(5rem); -webkit-transform: translateY(5rem);}
.solution .solution_list li a{position: relative; display: block; height: 23rem; border: 1px solid #ccc; border-radius: 1.5rem; padding: 0.5rem; backdrop-filter:blur(10px);}
.solution .solution_list li a::before{width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background: #ddd; border-radius: 1.5rem; opacity: 0; transition: 0.3s; -webkit-transition: 0.3s; z-index: -1; content: '';}
.solution .solution_list li a::after{position: absolute; right: 2rem; bottom: 1rem; transform: rotate(45deg); -webkit-transform: rotate(45deg); color: #fff; font-size: 3.5rem; font-family: 'Font Awesome 6 Free'; font-weight: 900; -webkit-font-smoothing: antialiased; content: '\f062'; opacity: 0; transition: 0.3s; -webkit-transition: 0.3s;}
.solution .solution_list li a .cate{position: absolute; top: 1.5rem; right: 1.5rem; background: #fff; border-radius: 1.25rem; line-height: 2rem; padding: 0 1rem; font-weight: 700; z-index: 1; transition: 0.3s; -webkit-transition: 0.3s;}
.solution .solution_list li a .img{position: relative; height: 16.25rem; border-radius: 0.8rem; overflow: hidden; transition: 0.3s; -webkit-transition: 0.3s;}
.solution .solution_list li a .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.solution .solution_list li a .img img.ov{opacity: 0;}
.solution .solution_list li a .txt{position: absolute; bottom: 0; left: 0; font-size: 1.1rem; font-weight: 600; height: 3.5rem; margin: 1.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color 0.3s; -webkit-transition: color 0.3s;}
@keyframes bgEf5{
  0%{transform: scale(1); -webkit-transform: scale(1);}
  100%{transform: scale(1.2) translateX(2rem); -webkit-transform: scale(1.2) translateX(2rem);} 
}
@keyframes bgEf6{
  0%{transform: translate(calc(-50% + 7rem), 0); -webkit-transform: translate(calc(-50% + 7rem), 0);}
  50%{transform: translate(-50%, 5rem); -webkit-transform: translate(-50%, 5rem);} 
  100%{transform: translate(calc(-50% - 7rem), 0); -webkit-transform: translate(calc(-50% - 7rem), 0);}
}
/* solution_popup */
#solution_popup .popup .pop_tit{display: flex;}
#solution_popup .popup .pop_tit .left{width: 23rem;}
#solution_popup .popup .pop_tit .left h3{font-size: 2rem; font-weight: 700;}
#solution_popup .popup .pop_tit .left p{color: var(--primary); font-size: 1.2rem;}
#solution_popup .popup .pop_tit .right p{font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem;}
#solution_popup .popup .pop_tit .right ul li{display: inline-block; line-height: 2.2rem; padding: 0 1rem; border: 1px solid #666; color: #666; background: #f7f7f7; margin: 0.1rem 0; font-size: 1.1rem; border-radius: 1rem;}
#solution_popup .popup .pop_tit .right ul li::before{content: '#';}
#solution_popup .popup .pop_tit .right ul li + li{margin-left: 0.5rem;}
#solution_popup .popup .solution_pop_info{background: url('../img/solutionPopBg.png') no-repeat center / cover; border-radius: 1rem; padding: 4rem; padding-left: 23rem; margin-top: 6rem; position: relative;}
#solution_popup .popup .solution_pop_info div{position: absolute; left: 4rem; top: -4rem;}
#solution_popup .popup .solution_pop_info div .btn{display: flex; justify-content: center; align-items: center; border-radius: 4rem; top: 4rem; right: 0; height: 4rem; border: 1px solid #999; background: rgba(255, 255, 255, 0.2); color: #fff; padding: 0 0.5rem 0 1.5rem; margin-top: 2rem; font-size: 1rem;}
#solution_popup .popup .solution_pop_info div .btn i{display: inline-block; margin-left: 1rem; width: 3rem; height: 3rem; line-height: 3rem; text-align: center; background: var(--primary); border-radius: 50%;}
#solution_popup .popup .solution_pop_info dl dt{color: #fff; font-size: 1.2rem; font-weight: 700; margin-top: 1rem;}
#solution_popup .popup .solution_pop_info dl dd ul li{color: #ccc; font-size: 1.1rem;}
#solution_popup .popup .solution_pop_info dl dd ul li::before{content: '- ';}
/* mouseover */
/* @media(min-width:1025px){
  .solution .solution_list li a:hover{padding: 0;}
  .solution .solution_list li a:hover::before{opacity: 1; transform: translate(-56%, -43%) rotate(-8.5deg); -webkit-transform:translate(-56%, -43%) rotate(-8.5deg);}
  .solution .solution_list li a:hover::after{opacity: 1; bottom: 0;}
  .solution .solution_list li a:hover .cate{color: var(--primary);}
  .solution .solution_list li a:hover .img{height: 23rem; border-radius: 1.5rem;}
  .solution .solution_list li a:hover .img img.ov{opacity: 1;}
  .solution .solution_list li a:hover .txt{color: #fff;}
} */

/* project */
.project .project_list_wrap .sel_btn{display: none;}
.project .project_list1{display: flex; gap: 0 1rem; margin-bottom: 3.25rem;}
.project .project_list1 li {width: 20%;}
.project .project_list1 li a{position: relative; display: block; height: 15rem; font-size: 1.2rem; color: #fff; border-radius: 1rem; padding: 1.5rem; overflow: hidden; transition: 0.3s; -webkit-transition: 0.3s; 
  background: linear-gradient(45deg, #000 20%, #313131 100%);
  background: -webkit-linear-gradient(225deg, #000 20%, #313131 100%);
  background: -moz-linear-gradient(45deg, #000 20%, #313131 100%);
  background: -o-linear-gradient(45deg, #000 20%, #313131 100%);
}
.project .project_list1 li a img{position: absolute; bottom: 0; right: 0; transition: 0.3s; -webkit-transition: 0.3s;}
.project .project_list1 li a img.ov{opacity: 0;}
.project .project_list1 li.active a{
  background: linear-gradient(45deg, #7e1b11 10%, #ff1e08 100%);
  background: -webkit-linear-gradient(225deg, #7e1b11 10%, #ff1e08 100%);
  background: -moz-linear-gradient(45deg, #7e1b11 10%, #ff1e08 100%);
  background: -o-linear-gradient(45deg, #7e1b11 10%, #ff1e08 100%);
}
.project .project_list1 li.active a img{opacity: 0;}
.project .project_list1 li.active a img.ov{opacity: 1;}
.project .project_list1 li a em{position: absolute; bottom: 1.5rem; left: 1.5rem; font-size: 3.5rem; line-height: 1; transition: 0.3s; -webkit-transition: 0.3s;}
.project .project_list1 li a em::after{content: '+'; font-size: 2.5rem; vertical-align: text-top; transition: 0.3s; -webkit-transition: 0.3s;}
.project .project_list2 li + li{margin-top: 1rem;}
.project .project_list2 li a{position: relative; display: flex; height: 5rem; align-items: center; background: #f5f5f5; border: 1px solid #ccc; color: #666; border-radius: 1rem; padding: 0 2rem; font-size: 1.1rem; transition: 0.3s; -webkit-transition: 0.3s;} 
.project .project_list2 li a::before {position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); color: #999; font-size: 2rem; font-family: 'Font Awesome 6 Free'; font-weight: 900; -webkit-font-smoothing: antialiased; content: '\f062';}
.project .project_list2 li a .cate{position: relative; width: 8.5rem;}
.project .project_list2 li a .cate::after{ font-family: 'Font Awesome 6 Free'; font-weight: 900; -webkit-font-smoothing: antialiased; font-size: 0.5rem; margin-left: 0.5rem; vertical-align: middle; content: '\f111';}
.project .project_list2 li a .date{width: 14rem;}
.project .project_list2 li a .name{font-size: 1.3rem; width: calc(100% - 25rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.project .btn{margin-top: 3rem; text-align: center;}
.project .btn a{position: relative; display: inline-block; width: 13rem; background: #000; line-height: 4rem; border-radius: 2rem; color: #fff; font-size: 0.9rem; overflow: hidden;}
.project .btn a::before{width: 100%; height: 100%; border-radius: 2rem; position: absolute; top: 0; left: -100%; transition: left 0.3s; -webkit-transition: left 0.3s; background: linear-gradient(90deg, var(--primary), #b81b0d); 
 content: '';}
.project .btn a span{position: relative; z-index: 2;}
/* mouseover */
@media(min-width:1025px){
.project .project_list1 li a:hover img{ transform: scale(1.2); -webkit-transform: scale(1.2);}
.project .project_list1 li a:hover em{bottom: 2rem;}
.project .project_list2 li a:hover{background: #ffefed; border-color: var(--primary); color: var(--primary);}
.project .project_list2 li a:hover::before {color: var(--primary);}
.project .btn a:hover::before{left: 0;}
}

/* reliability */
.reliability {background: url('../img/reliabilityBg.png') no-repeat top center / contain;}
.reliability_slide{position: relative; overflow: visible;}
.reliability_slide .swiper-wrapper{margin-left: -3.5rem;}
.reliability_slide .item{display: flex; flex-wrap: wrap; height: 27.75rem; align-items: flex-end;}
.reliability_slide .item .img{position: relative; width: 100%; height: 18.5rem; border: 1px solid #999; border-radius: 1rem; overflow: hidden;}
.reliability_slide .item .img::before{display: block; position: absolute; width: 100%; height: 100%; z-index: 1; content: '';
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0, 0, 0, 0.3)); 
  background: -webkit-linear-gradient(-90deg, rgba(0,0,0,0), rgba(0, 0, 0, 0.3)); 
  background: -o-linear-gradient(90deg, rgba(0,0,0,0), rgba(0, 0, 0, 0.3));
  background: -moz-linear-gradient(90deg, rgba(0,0,0,0), rgba(0, 0, 0, 0.3)); 
}
.reliability_slide .item .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.reliability_slide .item .txt{display: none; font-size: 1.2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 2rem;}
.reliability_slide .item .txt em{color: var(--primary); font-size: 1rem; display: block;}
/* active */
.reliability_slide .item.swiper-slide-active{width: 21rem !important;}
.reliability_slide .item.swiper-slide-active .img{ height: 100%; border-color: var(--primary); box-shadow: 0.5rem 0.5rem rgba(221, 77, 63, 0.2);}
.reliability_slide .item.swiper-slide-active .img::before{opacity: 0;}
.reliability_slide .item.swiper-slide-active .txt{display: block;}
.reliability .control{position: absolute; top: 8rem; right: 0;}
.reliability .control a{display: inline-block; width: 4rem; height: 4rem; line-height: 4rem; text-align: center; border-radius: 50%; background: #ddd; color: #666; font-size: 2rem; transition: 0.3s; -webkit-transition: 0.3s;}
.reliability .control a:hover{background: #ffefed; border: 1px solid var(--primary); color: var(--primary);}

/* flow_txt */
/* .flow_txt{overflow: hidden; margin: 6rem 0;}
.flow_txt p{white-space: nowrap; animation: flowText 10s linear infinite; font-size: 6rem; color: #eee; font-weight: 700;}
@keyframes flowText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
} */
.flow_txt_container {overscroll-behavior: none; display: flex; flex-wrap: nowrap; padding-top: 8rem;}
.flow_txt_container span{display: block; font-size: 6rem; color: #eee; font-weight: 700; margin-right: 1rem;}

/* department */
.department_slide{position: relative; overflow: visible;}
.department_slide::before{width: 100vw; height: 1px; background: #999; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); content: '';}
.department_slide .swiper-wrapper{margin-left: -4rem;}
.department_slide .item a{display: flex; height: 21rem; align-items: center;}
.department_slide .item .circle{position: relative; width: 13.25rem; height: 13.25rem; margin: 0 auto; background: url('../img/departmentList.png') no-repeat center / cover; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; color: #ccc; font-size: 1.2rem; border-radius: 50%; transition: 0.6s; -webkit-transition: 0.6s;}
.department_slide .item .circle::before{display: block; width: 130%; height: 130%; border-radius: 50%; position: absolute; top: 5.25rem; left: -0.5rem;content: '';}
.department_slide .item .circle em{color: #fff; font-size: 1.8rem; font-weight: 700; text-align: center; width: 100%;}
/* active */
.department_slide .item.swiper-slide-active{position: relative; width: 25rem !important;}
.department_slide .item.swiper-slide-active .circle{width: 21rem !important; height: 21rem; background-image: url('../img/departmentListOn.png'); color: #fff;}
.department_slide .item.swiper-slide-active .circle::after{display: block; width: calc(100% + 4rem); height: calc(100% + 4rem); border: 2px dotted var(--primary); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); border-radius: 50%; content: '';}
.department_slide .item.swiper-slide-active::before{display: block; width: calc(100% + 4rem); height: calc(100% + 4rem); background: url('../img/departmentOn.png') no-repeat center / contain; animation: rotate2 7s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); content: '';}
@keyframes rotate2{
  0%{transform: translate(-50%, -50%) rotate(0); -webkit-transform: translate(-50%, -50%) rotate(0);}
  100%{transform: translate(-50%, -50%) rotate(360deg); -webkit-transform: translate(-50%, -50%) rotate(360deg);}
}
.department_slide .item.swiper-slide-active .txt{opacity: 1;}
.department .control{position: absolute; top: 8rem; right: 0;}
.department .control a{display: inline-block; width: 4rem; height: 4rem; line-height: 4rem; text-align: center; border-radius: 50%; background: #ddd; color: #666; font-size: 2rem; transition: 0.3s; -webkit-transition: 0.3s;}
.department .control a:hover{background: #ffefed; border: 1px solid var(--primary); color: var(--primary);}
/* department_popup */
#department_popup .popup .pop_tit{margin-bottom: 1.5rem;}
#department_popup .pop_tit h3{font-size: 2rem; font-weight: 700;}
#department_popup .pop_tit h3 em{color: var(--primary); padding-left: 1rem; font-size: 1.2rem; font-weight: 400;}
#department_popup .department_pop_info{background: url('../img/department_popBg1.png') no-repeat center / cover; border-radius: 1rem; overflow: hidden; display: flex; margin-bottom: 2rem;}
#department_popup .department_pop_info div{width: 50%; padding: 5rem 3.5rem;}
#department_popup .department_pop_info div dl dt{font-size: 1.4rem; font-weight: 700; color: #fff; word-break: keep-all; margin-bottom: 1.5rem;}
#department_popup .department_pop_info div dl dd{font-size: 1.2rem; color: #ccc; word-break: keep-all;}
#department_popup .department_pop_chat{background: url('../img/department_popBg2.png') no-repeat center / cover; border-radius: 1rem; overflow: hidden; margin-bottom: 2rem; padding: 3.5rem; line-height: 1.3;}
#department_popup .department_pop_chat dl + dl{margin-top: 2rem;}
#department_popup .department_pop_chat dl dt{position: relative; padding-left: 6.5rem;}
#department_popup .department_pop_chat dl dt::before{width: 5.05rem; height: 5.85rem; position: absolute; bottom: 0; left: 0; background: url('../img/department_popIco1.png') no-repeat center / contain; content: '';}
#department_popup .department_pop_chat dl dt::after{width: 4rem; height: 1.25rem; background: url('../img/popupPoint1.png') no-repeat center / contain; position: absolute; bottom: 0; left: 5.4rem; content: '';}
#department_popup .department_pop_chat dl dt p{display: inline-block; border-radius: 3rem; padding: 1.5rem 2rem; color: #fff; font-size: 1.2rem; font-weight: 600; max-width: 50%;
background: linear-gradient(bottom, #db4a3c, #bb1a0b);
background: -webkit-linear-gradient(top, #db4a3c, #bb1a0b);
}
#department_popup .department_pop_chat dl dd{position: relative; padding-right: 6.5rem; margin-top: -0.5rem; text-align: right;}
#department_popup .department_pop_chat dl dd::before{width: 5rem; height: 5.4rem; position: absolute; bottom: 0; right: 0; background: url('../img/department_popIco2.png') no-repeat center / contain; content: '';}
#department_popup .department_pop_chat dl dd::after{width: 4rem; height: 1.1rem; background: url('../img/popupPoint2.png') no-repeat center / contain; position: absolute; bottom: 0; right: 6.1rem; content: '';}
#department_popup .department_pop_chat dl dd p{display: inline-block; border-radius: 3rem; padding: 2rem 3rem; border: 3px solid #999; background: #fff; font-size: 1.2rem; font-weight: 600; max-width: 80%; text-align: left;}
#department_popup .bottom h3{font-size: 1.4rem; margin-bottom: 1rem;}
#department_popup .bottom ul li{display: inline-block; line-height: 2.2rem; padding: 0 1rem; margin: 0.1rem 0; border: 1px solid #666; color: #666; background: #f7f7f7; font-size: 1.1rem; border-radius: 1rem;}
#department_popup .bottom ul li::before{content: '#';}
#department_popup .bottom ul li + li{margin-left: 0.5rem;}

/* direction */
.direction{padding-bottom: 9rem;}
.direction .bg img{position: absolute;}
.direction .bg .bg1{position: absolute; left: 0; top: 20%; animation: bgEf3 8s ease infinite alternate;}
.direction .bg .bg2{position: absolute; right: 5%; bottom: 10%; animation: bgEf5 6s ease infinite alternate;}
.direction .bg .bg3{position: absolute; left: 0; bottom:-5rem;}
.direction .map_tab{position: absolute; top: 11rem; right: 0; display: flex;}
.direction .map_tab li a{display: block; width: 8rem; line-height: 4rem; background: #ddd; color: #666; border-radius: 1rem; text-align: center; font-size: 1.3rem; margin-left: 0.6rem;}
.direction .map_tab li.active a{background: #ffefed; border: 1px solid var(--primary); color: var(--primary);}
.direction .map_wrap{display: none; flex-wrap: wrap;}
.direction .map_wrap.active{display: flex;}
.direction .map_wrap .map{width: 100%; border-radius: 1rem; margin-bottom: 5rem; overflow: hidden;}
.direction .map_wrap .map img.mob_map{display: none;}
.direction .map_wrap .left{width: 23rem;}
.direction .map_wrap .left .info p{font-size: 1.4rem; margin-top: 2rem;}
.direction .map_wrap table{width: calc(100% - 23rem); border-top: 2px solid #000;}
.direction .map_wrap table tr th,
.direction .map_wrap table tr td {color: #666; padding: 1.75rem 2rem; font-size: 1.2rem; font-weight: 500; border-bottom: 1px solid #ccc; word-break: keep-all;}
.direction .map_wrap table tr th{background: #fffcfb; text-align: center; font-weight: 700; color: #333;}
.direction .map_wrap table tr th i{color: #ed9188; margin-right: 1rem;}
.direction .map_wrap table tr td span{display: inline-block; vertical-align: middle; width: 1.75rem; height: 1.75rem; line-height: 1.75rem; text-align: center; border-radius: 50%; font-size: 1.2rem; color: #fff; font-weight: 700;}
.direction .map_wrap table tr td span.b_org{background: #f56a04;}
.direction .map_wrap table tr td span.b_grn{background: #5b692e;}
.direction .map_wrap table tr td span.b_yel{background: #b39627;}
.direction .map_wrap table tr td span.b_navy{background: #053682;}
.direction .map_wrap table tr td span.b_grn2{background: #3ca13d; margin-left: 1rem;}

@media(max-width:1640px){
  /* visual */
  .visual .bg .v_bg1{width: 20rem;}
  .visual .bg .v_bg2{width: 30rem;}
  .visual .bg .v_bg3{width: 17rem; bottom: -10rem;}

  /* direction */
  .direction .bg .bg1{width: 6rem;}
  .direction .bg .bg2{width: 25rem;}

  /* flow_txt */
  .flow_txt_container{padding-top: 6rem;}
  .flow_txt_container span{font-size: 5rem;}
}

@media(max-width:1440px){
  /* layout */
  #header{width: calc(100% - 2rem); left: 1rem; transform: none; -webkit-transform: none;}
  #footer .contents{width: 100%; padding: 0 1rem;}
  #footer .btn{right: 1rem;}

  /* common */
  .section .contents{width: 100%; padding: 0 1rem;}
  .section .tit h2{font-size: 2.5rem;}
  .section .tit p{font-size: 1rem;}

  /* popup */
  .pop_wrap .popup{width: calc(100% - 2rem); left: 1rem; transform: translateY(-50%); -webkit-transform: translateY(-50%); padding: 2rem;}
  .pop_wrap .pop_close{top: 1rem; right: 2rem;}

  /* visual */
  .visual .bg .v_bg2{width: 25rem;}
  .visual .slogan svg{width: 18rem;}
  .visual .slogan .cube_wrap {max-width: 7rem; margin: 0 3rem;}
  .visual .slogan .cube_wrap .cube{width: 7rem; height: 7rem;}
  .visual .slogan .cube_wrap .cube .front {transform: translateZ(3.5rem);}
  .visual .slogan .cube_wrap .cube .back {transform: translateZ(-3.5rem) rotateY(180deg);}
  .visual .slogan .cube_wrap .cube .left {transform: rotateY(-90deg) translateZ(3.5rem);}
  .visual .slogan .cube_wrap .cube .right {transform: rotateY(90deg) translateZ(3.5rem);}
  .visual .slogan .cube_wrap .cube .top {transform: rotateX(90deg) translateZ(3.5rem);}
  .visual .slogan .cube_wrap .cube .bottom {transform: rotateX(-90deg) translateZ(3.5rem);}
  .visual .slogan .txt{font-size: 1.8rem;}
  .visual .slogan .txt .txt_flip{font-size: 2.5rem;}
  @keyframes bgEf1{
    0%{transform: scale(1); -webkit-transform: scale(1);}
    100%{transform: scale(1.2) translateX(5rem); -webkit-transform: scale(1.2) translateX(5rem);} 
  }

  /* reliability */
  .reliability_slide .item{height: 24rem;}
  .reliability_slide .swiper-wrapper{margin-left: -0.5rem;}
  .reliability_slide .item.swiper-slide-active{width: 18rem !important;}
  .reliability .control{top: 1rem;}

  /* department */
  .department_slide .item.swiper-slide-active{width: 22rem !important;}
  .department_slide .item.swiper-slide-active::before{width: 90%; height: 90%;}
  .department_slide .item .circle{width: 11rem; height: 11rem; font-size: 1rem;}
  .department_slide .item.swiper-slide-active .circle{width: 16rem !important; height: 16rem;}
  .department_slide .item.swiper-slide-active .circle::after{width: calc(100% + 3rem); height: calc(100% + 3rem);}
  .department_slide .item .circle em{font-size: 1.6rem;}
  .department .control{top: 1rem;}
  /* popup */
  #department_popup .department_pop_info div{padding: 3rem;}
  #department_popup .department_pop_chat{padding: 3rem;}

  /* direction */
  .direction .map_wrap .left{width: 100%;}
  .direction .map_wrap table{width: 100%; margin-top: 2rem;}
  .direction .bg .bg1{width: 5rem;}
  .direction .bg .bg2{width: 22rem;}
  .direction .bg .bg3{width: 25rem;}
}

@media(max-width:1024px){
  /* layout */
  #header{position: fixed; padding: 0.25rem 1rem; top: 1rem; left: 1rem; z-index: 99; display: flex; justify-content: space-between; border: 1px solid #eee; border-radius: 0.4rem; background: #fff; box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3);}
  #header .mob_toggle{display: block; position: fixed; top: 1.95rem; right: 2rem; z-index: 99;}
  #header .mob_toggle span {display: block; background: var(--primary); width: 42px; height: 4px; border-radius: 2px;transition: 0.25s margin 0.25s, 0.25s transform;}
  #header .mob_toggle span:nth-child(1) {margin-bottom: 8px;}
  #header .mob_toggle span:nth-child(2) {width: 38px;}
  #header .mob_toggle span:nth-child(3) {margin-top: 8px;}
  #header .mob_toggle.active span {transition: 0.25s margin, 0.25s transform 0.25s; box-shadow: none; background: #fff;}
  #header .mob_toggle.active span:nth-child(1) {margin-top: 8px; margin-bottom: -5px; transform: rotate(45deg);}
  #header .mob_toggle.active span:nth-child(2) {transform: rotate(45deg); width: 42px;}
  #header .mob_toggle.active span:nth-child(3) {margin-top: -4px; transform: rotate(135deg);}
  #header .menu{position: fixed; top: -100%; left: 0; width: 100%; height: 100vh; overflow-y: auto; background: var(--primary); color: #fff; padding: 0 1rem; transition: 0.3s; -webkit-transition: 0.3s;} 
  #header .menu.open{top: 0;}
  /* #header .menu .bg{position: absolute; width: 100%; height: 100%; left: 0; top:-95%; z-index: -1; background: var(--primary); transition: 0.4s; -webkit-transition: 0.4s; transition-delay: 0.4s; -webkit-transition-delay: 0.4s;}
  #header .menu.open .bg{top: 0;} */
  #header .menu ul{margin: 5rem 0 0;}
  #header .menu ul li a{display: block; padding: 1rem 0; font-size: 2rem; font-weight: 800; border-bottom: 2px solid #fff; font-weight: 800;}

  /* intro */
  .intro .intro__title{font-size: 5rem;}
  .land_intro{width: 2rem; display: none;}

  /* common */
  .section .tit h2{font-size: 2.2rem;}
  .section .contents{margin-bottom: 2rem;}

  /* visual */
  .visual .bg .v_bg1{width: 15rem;}
  .visual .bg .v_bg2{width: 20rem;}
  .visual .bg .v_bg3{width: 12rem; bottom: -5rem;}
  .visual .bg .v_bg4{width: 15rem;}
  .visual .slogan svg{width: 15rem;}
  .visual .slogan .cube_wrap {max-width: 5.5rem; margin: 0 2.5rem;}
  .visual .slogan .cube_wrap .cube{width: 5.5rem; height: 5.5rem;}
  .visual .slogan .cube_wrap .cube .front {transform: translateZ(2.75rem);}
  .visual .slogan .cube_wrap .cube .back {transform: translateZ(-2.75rem) rotateY(180deg);}
  .visual .slogan .cube_wrap .cube .left {transform: rotateY(-90deg) translateZ(2.75rem);}
  .visual .slogan .cube_wrap .cube .right {transform: rotateY(90deg) translateZ(2.75rem);}
  .visual .slogan .cube_wrap .cube .top {transform: rotateX(90deg) translateZ(2.75rem);}
  .visual .slogan .cube_wrap .cube .bottom {transform: rotateX(-90deg) translateZ(2.75rem);}
  .visual .slogan .txt{font-size: 1.6rem;}
  .visual .slogan .txt .txt_flip{font-size: 2rem; height: 3.5rem;}
  .visual .slogan .txt .txt_flip::after{height: 2rem; top: 0.75rem;}
  @keyframes bgEf2{
    0%{transform: scale(1); -webkit-transform: scale(1);}
    100%{transform: scale(1.2) translate(0, 0); -webkit-transform: scale(1.2) translate(0, 0);} 
  }

  /* solution */
  .solution .bg img.bg1{width: 18rem;} 
  .solution .bg img.bg2{width: 20rem;}
  .solution .bg img.bg3{width: 25rem;}
  .solution .bg img.bg4{width: 40rem;}
  .solution .solution_list{gap: 2rem 1rem;}
  .solution .solution_list li:nth-of-type(3n-1){transform: translateY(3rem); -webkit-transform: translateY(3rem);}
  .solution .solution_list li a{height: 19.5rem;}
  .solution .solution_list li a .img{height: 14rem;}
  .solution .solution_list li a:hover .img{height: 14rem;}
  .solution .solution_list li a .txt{font-size: 1rem; margin: 1rem; height: 3rem;}
  /* popup */
  #solution_popup .popup .solution_pop_info{padding: 2rem; margin-top: 2rem;}
  #solution_popup .popup .solution_pop_info div{position: static; text-align: center;}
  #solution_popup .popup .solution_pop_info div .btn{display: inline-block; line-height: 4rem;}
  #solution_popup .popup .pop_tit{flex-wrap: wrap;}
  #solution_popup .popup .pop_tit .left{width: 100%;}
  #solution_popup .popup .pop_tit .left h3{font-size: 1.5rem; margin-bottom: 1rem;}
  #solution_popup .popup .pop_tit .right{width: 100%;}
  #solution_popup .popup .pop_tit .left p{font-size: 1rem;}
  #solution_popup .popup .pop_tit .right p{font-size: 1.2rem;}

  /* project */
  .project .project_list1 li a{height: 12rem; padding: 1rem;}
  .project .project_list2 li a::before{font-size: 1.8rem;}
  .project .project_list1 li a em{font-size: 3rem;}
  .project .project_list2 li a{height: 4rem;}
  .project .project_list2 li a .name{font-size: 1.1rem;}
  .project .btn{margin-top: 2rem;}
  .project .btn a{line-height: 3.5rem;}
  
   /* reliability */
  .reliability_slide .swiper-wrapper{margin-left: -1rem;}
  .reliability_slide .item{height: 20rem;}
  .reliability_slide .item.swiper-slide-active{width: 15rem !important;}
  .reliability_slide .item .img{height: 16rem;}
  .reliability .control{right: 1rem; top: 0;}
  .reliability .control a{width: 3rem; height: 3rem; line-height: 3rem; font-size: 1.5rem;}
  
  /* flow_txt */
  .flow_txt_container span{font-size: 3.5rem;}
  .flow_txt_container{padding-top: 3rem;}

  /* department */
  .department_slide .swiper-wrapper{margin-left: -3rem;}
  .department_slide .item.swiper-slide-active{width: 16rem !important;}
  .department_slide .item.swiper-slide-active::before{width: 100%; height: 100%;}
  .department_slide .item .circle{width: 9rem; height: 9rem;}
  .department_slide .item.swiper-slide-active .circle{width: 13rem !important; height: 13rem;}
  .department .control{right: 1rem; top: 0;}
  .department .control a{width: 3rem; height: 3rem; line-height: 3rem; font-size: 1.5rem;}
  /* popup */
  #department_popup .pop_tit h3{font-size: 1.5rem;}
  #department_popup .pop_tit h3 em{font-size: 1rem;}
  #department_popup .department_pop_info{flex-wrap: wrap; padding: 1.5rem;}
  #department_popup .department_pop_info div{width: 100%; padding: 0;}
  #department_popup .department_pop_info div.right{margin-top: 1.5rem;}
  #department_popup .department_pop_info div dl dt{font-size: 1.2rem; margin-bottom: 0.75rem;}
  #department_popup .department_pop_info div dl dd{font-size: 1rem;}
  #department_popup .department_pop_chat{padding: 2.5rem 1.5rem;}
  #department_popup .department_pop_chat dl dt{padding-left: 5rem;}
  #department_popup .department_pop_chat dl dt::before{width: 4rem; height: 4.5rem;}
  #department_popup .department_pop_chat dl dt::after{width: 2.6rem; height: 1.1rem; left: 4.4rem;}
  #department_popup .department_pop_chat dl dt p{max-width: 80%; padding: 1rem 1.5rem; font-size: 1rem; border-radius: 1.5rem;}
  #department_popup .department_pop_chat dl dd{padding-right: 5rem;}
  #department_popup .department_pop_chat dl dd::before{width: 4rem; height: 4.5rem;}
  #department_popup .department_pop_chat dl dd::after{right: 4.5rem;}
  #department_popup .department_pop_chat dl dd p{max-width: 80%; padding: 1rem 1.5rem; font-size: 1rem; border-radius: 1.5rem;}
  

  /* direction */
  .direction{padding-bottom: 5rem;}
  .direction .map_wrap .map{margin-bottom: 3rem;}
  .direction .map_wrap .left .info img{width: 16rem;}
  .direction .map_wrap .left .info p{font-size: 1.2rem; margin-top: 1rem;}
  .direction .map_wrap table tr th, .direction .map_wrap table tr td{padding: 1.25rem 1.5rem; font-size: 1rem;}
}

@media(max-width:860px){
  /* common */
  .section .tit{margin-bottom: 2rem;}

  /* visual */
  .visual .bg .v_bg1{width: 12rem;}
  .visual .bg .v_bg2{width: 15rem;}
  .visual .bg .v_bg3{width: 10rem; bottom: -3rem;}
  .visual .slogan svg{width: 12rem;}
  .visual .slogan .cube_wrap {max-width: 4rem; margin: 0 1.5rem;}
  .visual .slogan .cube_wrap .cube{width: 4rem; height: 4rem;}
  .visual .slogan .cube_wrap .cube .front {transform: translateZ(2rem);}
  .visual .slogan .cube_wrap .cube .back {transform: translateZ(-2rem) rotateY(180deg);}
  .visual .slogan .cube_wrap .cube .left {transform: rotateY(-90deg) translateZ(2rem);}
  .visual .slogan .cube_wrap .cube .right {transform: rotateY(90deg) translateZ(2rem);}
  .visual .slogan .cube_wrap .cube .top {transform: rotateX(90deg) translateZ(2rem);}
  .visual .slogan .cube_wrap .cube .bottom {transform: rotateX(-90deg) translateZ(2rem);}

  /* solution */
  .solution .solution_list{grid-template-columns: repeat(2, 1fr);}
  .solution .solution_list li:nth-of-type(3n-1){transform: translateY(0); -webkit-transform: translateY(0);}
  .solution .solution_list li:nth-of-type(2n){transform: translateY(2rem); -webkit-transform: translateY(2rem);}

  /* project */
  .project .project_list_wrap .sel_btn{display: block; width: 100%; height: 3rem; line-height: 3rem; padding: 0 1rem; background: var(--primary); color: #fff; font-size: 1.2rem; font-weight: 700; border-radius: 0.5rem;}
  .project .project_list_wrap .sel_btn em{position: absolute; right: 0;}
  .project .project_list_wrap .sel_btn em::after{content: '+';}
  .project .project_list1{display: block; border-radius: 0.5rem; overflow: hidden; margin-bottom: 2rem;}
  .project .project_list1 li{width: 100%;}
  .project .project_list1 li a{height: 3rem; line-height: 3rem; padding: 0 1rem; font-size: 1rem; border-radius: 0;}
  .project .project_list1 li a em{top: 0.5rem; left: auto; right: 1rem; font-size: 1.5rem;}
  .project .project_list1 li a em::after{font-size: 1rem;}
  .project .project_list1 li a img{width: 2.5rem;}
  .project .project_list2 li a{flex-wrap: wrap; height: auto; padding: 1rem 2rem;}
  .project .project_list2 li a .cate{width: 100%;}
  .project .project_list2 li a .date{width: 10rem;}
  .project .project_list2 li a .name{width: calc(100% - 12rem);}

   /* reliability */
  .reliability_slide .item{height: 18rem;}
  .reliability_slide .item.swiper-slide-active{width: 13.5rem !important;}
  .reliability_slide .item .img{height: 14rem;}

  /* department */
  .department_slide .swiper-wrapper{margin-left: -1rem;}
  .department_slide .item a{height: 15rem;}
  .department_slide .item.swiper-slide-active{width: 12rem !important;}
  .department_slide .item .circle{width: 7.5rem; height: 7.5rem;}
  .department_slide .item.swiper-slide-active .circle{width: 10rem !important; height: 10rem;}
  .department_slide .item.swiper-slide-active .circle::after{width: calc(100% + 2rem); height: calc(100% + 2rem);}
  .department_slide .item .circle em{font-size: 1.2rem;}


  /* direction */
  .direction .bg .bg1{width: 4rem;}
  .direction .bg .bg2{width: 18rem;}
  .direction .bg .bg3{width: 20rem;}
  .direction .map_wrap .map{border-radius: 0;}
  .direction .map_wrap .map img{display: none;}
  .direction .map_wrap .map img.mob_map{display: block;}
}

@media(max-width:680px){
  /* intro */
  .intro .intro__title{font-size: 4rem;}

  /* layout */
  #footer{padding: 3rem 0 2rem;}
  #footer .btn{line-height: 3rem; height: 3rem; font-size: 0.9rem; position: static; display: inline-block; margin-top: 1rem;}
  #footer .btn i{width: 2.25rem; height: 2.25rem; line-height: 2.25rem;}

  /* common */
  .section .tit h2{font-size: 1.8rem;}
  .section .tit p{font-size: 0.9rem;}

  /* popup */
  .pop_wrap .popup{padding: 3rem 1rem 1.5rem; border-radius: 1rem;}
  .pop_wrap .pop_close{top: 0.25rem; right: 1rem;}
  .pop_wrap .popup .popup_content::-webkit-scrollbar{width: 1.2rem;}
  .pop_wrap .popup .popup_content::-webkit-scrollbar-thumb{border: 0.4rem solid #fff;}
  .pop_wrap .popup .popup_content::-webkit-scrollbar-button:vertical:start:decrement,
  .pop_wrap .popup .popup_content::-webkit-scrollbar-button:vertical:start:increment {height:1.8rem;}

  /* visual */
  .visual .bg .v_bg1{width: 10rem;}
  .visual .bg .v_bg2{width: 12rem;}
  .visual .slogan .cube_wrap{display: none;}
  .visual .slogan .txt{font-size: 1.4rem;}
  .visual .slogan .txt .txt_flip{font-size: 1.8rem; height: 3.2rem;}
  .visual .slogan .txt .txt_flip::after{height: 1.6rem; top: 0.75rem;}
  .visual .slogan .txt .txt_flip::before{width: 1.5rem; height: 1.5rem; top: 0.5rem;}

  /* solution */
  .solution{padding-bottom: 3rem;}
  .solution .bg img.bg1{width: 15rem;} 
  .solution .bg img.bg2{width: 17rem;}
  .solution .bg img.bg3{width: 20rem;}
  .solution .bg img.bg4{width: 30rem;}
  .solution .solution_list li a{height: 16.5rem;}
  .solution .solution_list li a .img{height: 11rem;}
  .solution .solution_list li a:hover .img{height: 11rem;}
  /* popup */
  #solution_popup .popup .pop_tit .right ul li{line-height: 2rem; font-size: 1rem; padding: 0 0.75rem;}
  #solution_popup .popup .solution_pop_info{padding: 1rem; margin-top: 1rem;}
  #solution_popup .popup .solution_pop_info div img{max-width: 12rem; max-height: 20rem;}
  #solution_popup .popup .solution_pop_info div .btn{line-height: 3rem; height: 3rem; font-size: 0.9rem;}
  #solution_popup .popup .solution_pop_info div .btn i{width: 2.25rem; height: 2.25rem; line-height: 2.25rem;}
  #solution_popup .popup .solution_pop_info dl dt{font-size: 1.1rem;}
  #solution_popup .popup .solution_pop_info dl dd ul li{font-size: 0.9rem;}

  /* reliabilty */
  .reliability_slide .item .img{height: 18rem !important;}
  .reliability_slide .item .img::before{display: none;}
  .reliability_slide .item .txt{margin-top: 1rem;}

  /* flow_txt */
  .flow_txt_container{padding-top: 2rem;}
  .flow_txt_container span{font-size: 3rem;}

  /* department */
  #department_popup .department_pop_info div dl dt{font-size: 1rem; margin-bottom: 0.5rem;}
  #department_popup .department_pop_info div dl dd{font-size: 0.9rem;}
  #department_popup .department_pop_chat{padding: 1.5rem 1rem;}
  #department_popup .department_pop_chat dl dt{padding-left: 3rem;}
  #department_popup .department_pop_chat dl dt::before{width: 2.5rem; height: 2.9rem; bottom: auto; top: 0;}
  #department_popup .department_pop_chat dl dt::after{display: none;}
  #department_popup .department_pop_chat dl dt p{max-width: 90%; font-size: 0.9rem; padding: 1rem;}
  #department_popup .department_pop_chat dl dd{padding-right: 3rem;}
  #department_popup .department_pop_chat dl dd::before{width: 2.5rem; height: 2.9rem; bottom: auto; top: 0;}
  #department_popup .department_pop_chat dl dd::after{display: none;}
  #department_popup .department_pop_chat dl dd p{max-width: 90%; font-size: 0.9rem; padding: 1rem;}
  #department_popup .bottom h3{font-size: 1.2rem;}
  #department_popup .bottom ul li{line-height: 2rem; font-size: 1rem; padding: 0 0.75rem;}

  /* direction */
  .direction .bg .bg2{width: 15rem;}
  .direction .bg .bg3{width: 15rem;}
  .direction .map_wrap table tr th, .direction .map_wrap table tr td{padding: 1rem;}
  .direction .map_wrap table tr th{width: 7.5rem;}
  .direction .map_wrap table tr th i{margin-right: 0.5rem;}
}

@media(max-width:480px){
   /* intro */
  .intro .intro__title{font-size: 3.5rem;}

  /* layout */
  #header .menu ul li a{font-size: 1.6rem;}

  /* common */
  .section .tit{margin-bottom: 1rem;}

  /* visual */
  .visual .bg .v_bg1{width: 8rem;}
  .visual .bg .v_bg3{width: 8rem;}
  .visual .bg .v_bg4{width: 12rem; bottom: -5rem;}
  .visual .slogan svg{width: 9.5rem;}
   @keyframes bgEf1{
    0%{transform: scale(1); -webkit-transform: scale(1);}
    100%{transform: scale(1.2) translateX(3rem); -webkit-transform: scale(1.2) translateX(3rem);} 
  }

  /* solution */
  .solution .solution_list{gap: 1rem;}
  .solution .solution_list li a{height: 14.5rem;}
  .solution .solution_list li a .img{height: 9rem;}
  .solution .solution_list li a:hover .img{height: 9rem;}
  .solution .solution_list li a .cate{line-height: 1.5rem; font-size: 0.8rem; top: 1rem; right: 1rem;}

  /* project */
  .project .btn a{width: 10rem; line-height: 3rem;}
  .project .project_list2 li a{padding: 1rem;}
  .project .project_list2 li a::before{top: 25%;}
  .project .project_list2 li a .date{width: 100%;}
  .project .project_list2 li a .name{width: 100%;}

  /* reliability */
  .reliability_slide .swiper-wrapper{margin-left: -2rem;}
  .reliability .control a{width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1.2rem;}

  /* department */
  .department_slide .swiper-wrapper{margin-left: -1.5rem;}
  .department .control a{width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1.2rem;}

  /* direction */
  .direction .map_wrap .map{margin-bottom: 1.5rem;}
  .direction .map_wrap .left .info img{width: 12rem;}
  .direction .map_wrap table{margin-top: 1rem;}
  .direction .map_wrap table tr td span{width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 1rem;}
}