@charset "UTF-8";

/*
* File    : ml-contents.css
* Author  : MYLINK HOME
* Date    : 2025.03.10
*/


/* 기능 - button */
.button{display:flex; align-items:center; justify-content:center; width: 42px; min-width:42px; height: 42px; min-height:42px; background: #111; border:0; border-radius: 0px; padding:0px; transition: all 0.2s ease; cursor: pointer;}   
.button:hover{box-shadow:initial}
.button i{font-size: 2.2rem; color:#fff}

/* button - square */
.button.square{border-radius: 14px}
.button.square:hover{border-radius: 50%}
.button.square.snow{background: #fff; border-color:#fff; outline: none}
.button.square.snow i{color:#222}

/* button - round */
.button.round{border-radius: 24px; background: #ffffff1a; min-width: 280px; width: auto; height: 80px; min-height: 80px; backdrop-filter:blur(15px); border:1px solid transparent; color:#fff; font-size:2.1rem; box-shadow: 2px 2px 8px 2px #00000030}
.button.round:hover{border-color:#fff}

/* button - Large */
.button.Large{width:100%; min-width: initial; height: 100px; min-height:initial; color:#fff; background:#007CD4; border-radius: 10px; font-size: 2.1rem; font-weight: 700}

/* button - micro */
.button.micro{font-size: 1.4rem; width:initial; min-width: initial; height: 28px; min-height:initial; border-radius: 5px; padding:0px 8px; background: #555;  color:#fff }

/* button - clear */
.button.clear{background: transparent;}

/* button - board */
.button.board{background: #fff; border: 1px solid #008CD4; color:#008CD4; font-size: 1.8rem; min-width:180px; height: 60px; border-radius: 10px; gap:4px}
.button.board i{color:#008CD4}

.button.board.small{min-width:100px; height: 44px; font-size: 1.5rem}
.button.board i{color:#008CD4}

/* button - search */
.button.search{background: #fff; font-size: 1.6rem; height: 60px; padding:0; background:none; border:none; border-radius:0px; z-index:1}
.button.search i{color:#555; font-size: 2rem}


.group-button{display:flex; gap:20px; max-width: 1300px; margin: 0 auto}


.button.bluecola{background:#008CD4; border-color:#008CD4; color:#fff}
.button.bluecola.line{background:#fff; border-color:#008CD4; color:#008CD4}

.button.line{background:#fff; border:1px solid #008CD4; color:#008CD4}


/* button - Alopex */
.Button{height:40px; padding:3px 15px 3px; background:#fff;	border:1px solid #d3d3d3; font-weight:normal; font-size:1.5rem; letter-spacing:-0.8px;color:#333;	border-radius:8px; vertical-align:middle; box-sizing:border-box; transition: all 0.3s}
.Button:active,
.Button:hover,
.Button:focus,
.Button.af-hover,
.Button.Checked{padding:3px 15px 3px; background:#fafafa; border:1px solid #d3d3d3; color:#333}
/* .Button:focus{outline:dotted 1px; outline-offset:-2px} */
.Button span{font-size: 1.5rem}


.Groupbutton{display:flex; gap:4px;} 
.Groupbutton .Button{float: initial; }


/* **************************************** *
*  sub-header
* **************************************** */

.page-tit{width: fit-content; padding-top:80px;}
.page-tit h2{font-size:6.8rem; text-align: center; font-weight: 600}
.page-tit .solution-list{display:flex; align-items:center; justify-content:center; width:938px; padding:6px 8px; height:60px; background: #fff; border-radius: 50px; box-shadow: -1px 2px 4px 2px #00000014; margin: 0 auto}
.page-tit .solution-list .tit{flex:1 0 auto; display:flex; align-items:center; justify-content:center; font-size: 1.8rem; padding:0px 32px; border-radius: 50px; height: 100%; cursor: pointer;}
.page-tit .solution-list .tit.active{background: #008CD4;; color:#fff; font-weight: 600 }
.page-tit .solution-list .tit:hover{color:#008CD4}
.page-tit .solution-list .tit.active:hover{color:#fff; background:#0075b1 }


/* **************************************** *
 * index
 * **************************************** */
.main-wrap{margin-top:80px;} 
.main-wrap .main-swiper{position:relative; padding-top:120px; background: #FAFAFA; padding-left: 5vw; padding-bottom: 60px}



.main-wrap .main-swiper .category-wrap{margin-bottom: 40px; max-width: 2400px; position: relative;}
.main-wrap .main-swiper .category-wrap .ImageCheckbox.round{background:transparent; border-color:#aaa}
.main-wrap .main-swiper .category-wrap .ImageCheckbox.round span{color:#999}
.main-wrap .main-swiper .category-wrap .ImageCheckbox.round.Checked{background:transparent; border-color:#333}
.main-wrap .main-swiper .category-wrap .ImageCheckbox.round.Checked span{color:#111}
.main-wrap .main-swiper .main-award{position: absolute; display:flex; gap:30px; align-items:center; right: 5vw;}
.main-wrap .main-swiper .main-award .award_logos01{width: 140px}
.main-wrap .main-swiper .main-award .award_logos02{width: 80px}
.main-wrap .main-swiper .main-award .award_logos03{width: 100px}
.main-wrap .main-swiper .main-award .award_logos03.en{width: 130px}
.main-wrap .main-swiper .swiper{max-width: 2400px}
.main-wrap .main-swiper .swiper:after{content:""; position: absolute; z-index:1; right: 0px; top:0px; height: 526px; width: 80px; background: linear-gradient(270deg, #fafafa, transparent)}

.main-wrap .main-swiper .swiper-wrapper{height: 590px}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide{position:relative; background: #fff; width:470px; height: 520px; padding:80px; border-radius:48px; flex:none; }

.main-wrap .main-swiper .swiper-wrapper .swiper-slide-active{background: #007CD4; width:920px !important; }
.main-wrap .main-swiper .swiper-wrapper .swiper-slide-prev{opacity: 0.5; background: linear-gradient(270deg, #007CD4, transparent); }

.main-wrap .main-swiper .swiper-wrapper .swiper-slide h3.tit{font-size: 4.8rem; font-weight: 600; margin-bottom: 20px}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide .txt{opacity:0; font-size: 2.4rem; font-weight: 500}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide .Button{position:absolute; right:0px; bottom:0px; z-index:3; background:transparent; border:0; width: 140px; min-width: 140px; height: 140px; min-height: 140px}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide .Button i{color:#111; font-size: 3.2rem;  transition: transform 0.3s ease;}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide .Button:hover{transform:rotate(-45deg);}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide .img-area{position: absolute; overflow: hidden; height: 100%; width: calc(100% - 80px); padding-left:80px; bottom: 0px; left:0px} 
.main-wrap .main-swiper .swiper-wrapper .swiper-slide .img-area > img{width: 100%; border-radius: 10px; box-shadow:1px 2px 8px 2px #00000014 }

.main-wrap .main-swiper .swiper-wrapper .swiper-slide .img-area > .main-img{position:absolute; box-shadow: -11px 9px 17px 2px #0000001a; z-index:2}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide .img-area > .sub-img{position:absolute;  opacity:0; box-shadow: -11px 9px 17px 2px #0000001a; transition: all 0.4s ease;}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide-active .img-area > .sub-img{box-shadow: -11px 9px 17px 2px #0000001a; opacity: 1}

.main-wrap .main-swiper .swiper-wrapper .swiper-slide.link-pms .img-area > .main-img{top:270px; width: 570px;}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide.link-pms .img-area > .sub-img{top: 250px; right:84px;  width: 263px; z-index: 3}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide.link-qms .img-area > .main-img{ top:270px; width: 490px;}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide.link-qms .img-area > .sub-img{top: 250px; right:149px;  width: 300px; z-index: 3}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide.link-dms .img-area > .main-img{top:270px; left:128px; width: 570px;}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide.link-dms .img-area > .sub-img{top: 250px; width: 108px; z-index: 3}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide.link-plm .img-area > .main-img{top:260px; width: 590px;}

.main-wrap .main-swiper .swiper-wrapper .swiper-slide-active h3.tit{color:#fff}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide-active .txt{opacity:1; color:#fff}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide-prev h3.tit{color:#fff}
.main-wrap .main-swiper .swiper-wrapper .swiper-slide-prev .txt{opacity:0; color:#fff}

.main-wrap .main-swiper .swiper-slide .slide-motion{opacity: 0}
.main-wrap .main-swiper .swiper-slide.swiper-slide-active .slide-motion{opacity: 1}

.main-wrap .main-swiper .swiper-slide .slide-motion .slide-box1,
.main-wrap .main-swiper .swiper-slide .slide-motion .slide-box2{background-color: #FAFAFA; position: absolute; bottom: 0; }
.main-wrap .main-swiper .swiper-slide .slide-motion .slide-box1{right: 0; width: 176px; height: 34px}
.main-wrap .main-swiper .swiper-slide .slide-motion .slide-box2{right: 0; bottom:0px; width: 34px; height: 176px}
.main-wrap .main-swiper .swiper-slide .slide-motion .slide-circle1,
.main-wrap .main-swiper .swiper-slide .slide-motion .slide-circle2{position: absolute; width: 80px; height: 80px; border-radius: 50%; z-index: 1; background: #007CD4;}
.main-wrap .main-swiper .swiper-slide .slide-motion .slide-circle1{right: 140px; bottom: 0px}
.main-wrap .main-swiper .swiper-slide .slide-motion .slide-circle2{right: 0px; bottom: 140px}

.main-wrap .main-swiper .swiper-slide .slide-motion .slide-circle3{position:absolute; width: 140px; height: 140px; border-radius:40px 0px 0px 0px; background: #FAFAFA; right: 0px; bottom: 0px; z-index: 2}
.main-wrap .main-swiper .swiper-button-wrap{position: relative; width:200px; margin: 0 auto; height: 28px}
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-next,
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-prev{height: 28px; color:#AAA;}
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-next:focus,
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-prev:focus,
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-next:active,
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-prev:activeP{border: 0}
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-next{color:#AAA}
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-next:after,
.main-wrap .main-swiper .swiper-button-wrap .swiper-button-prev:after{font-size: 20px}

.main-wrap .main-swiper .swiper-horizontal>.swiper-pagination-bullets,
.main-wrap .main-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.main-wrap .main-swiper .swiper-pagination-custom, 
.main-wrap .main-swiper .swiper-pagination-fractionz{bottom:initial; top:initial}

.main-wrap .main-swiper .award-wrap{position: absolute; top:42px; right:42px; display:none; align-items: center; gap:32px; }
.main-wrap .main-swiper .award-wrap > img{width: 100px}
.main-wrap .main-swiper .award-wrap > .award_logos02{width: 60px}

.main-wrap .main-swiper .swiper-wrapper .swiper-slide-active .award-wrap{display:flex;}

.main-wrap .main-solution{margin-top: 140px; margin-bottom: 140px}
.main-wrap .main-solution h3.tit{font-size: 4.8rem; font-weight:700; color:#222; max-width: 1060px; margin: 0 auto; text-align: center; word-break:auto-phrase}
.main-wrap .main-solution h3.tit span{color:#008CD4}
.main-wrap .main-solution .solution-banner{display:flex; justify-content:space-between; max-width:1800px; width:90%; height:348px; border-radius:48px; padding:80px 140px; background:url(../images/main/img_main01.jpg) no-repeat;  margin-top: 80px; margin: 0 auto; transition: all 0.4s ease; margin-top: 80px}
.main-wrap .main-solution .solution-banner .tit-wrap{display:flex; flex-direction:column; gap:60px; padding-top: 16px}
.main-wrap .main-solution .solution-banner .tit-wrap .tit{font-size: 4.8rem; font-weight:600; color:#fff;}
.main-wrap .main-solution .solution-banner .solution-list ul{display:grid; grid-template-columns: repeat(2, 1fr); gap:20px}
.main-wrap .main-solution .solution-banner .solution-list ul li{display:flex; justify-content:center; align-items:center; min-width: 396px; padding:0px 24px; border-radius: 100px; height: 84px; color:#fff; font-weight: 600; font-size: 2.8rem; background: #ffffff18; backdrop-filter:blur(4px); text-align: center; word-break:auto-phrase}
.main-wrap .main-solution .solution-banner:hover{background:url(../images/main/img_main02.jpg) no-repeat;}

.main-wrap .support-wrap{display:flex; justify-content: space-between; gap:80px; max-width:1800px; width:90%; margin:0 auto; margin-bottom: 140px}
.main-wrap .support-wrap .tit-wrap{display:flex; justify-content: space-between; margin-bottom: 40px}
.main-wrap .support-wrap .tit-wrap .tit{font-size: 4.8rem; font-weight: 600; color:#222}
.main-wrap .support-wrap .news-area{display:flex; flex-direction:column; width: 609px; flex:1 auto}
.main-wrap .support-wrap .news-area .news-cont{display:grid; grid-template-columns: repeat(2, 1fr); gap:20px}
.main-wrap .support-wrap .news-area .news-cont .news{position:relative; border:1px solid #DDD; border-radius: 15px; height: 509px; overflow: hidden; padding:40px; cursor: pointer;  transition: all 0.4s ease; }
.main-wrap .support-wrap .news-area .news-cont .news .label{position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center;background: #F4F4F4; border-radius: 0px 0px 35px 0px; color:#222; font-weight: 600; font-size: 2.1rem; height: 64px; width:fit-content; padding:0px 40px}
.main-wrap .support-wrap .news-area .news-cont .news .tit{margin-top: 80px; font-size: 3.2rem; font-weight: 600; color:#333; word-break:auto-phrase}
.main-wrap .support-wrap .news-area .news-cont .news .date{position:absolute; bottom:40px; font-size:2.1rem; color:#999 }
.main-wrap .support-wrap .news-area .news-cont .news:hover{border-color:#b7d7ee; box-shadow: 1px 2px 8px 2px #008CD418}
.main-wrap .support-wrap .news-area .news-cont .news:hover .tit{text-decoration: underline; text-underline-offset:5px;}
.main-wrap .support-wrap .service-area{width: 609px; flex:1 auto}
.main-wrap .support-wrap .service-area .service-list{display:grid; grid-template-columns: repeat(2, 1fr); gap:20px}
.main-wrap .support-wrap .service-area .service-list .service{display:flex; flex-direction:column; gap:20px; align-items: center; justify-content:center; height: 244px; box-shadow: 2px 2px 8px 1px #00000018; border-radius: 15px; cursor: pointer; }
.main-wrap .support-wrap .service-area .service-list .service .tit{font-size: 2.4rem; font-weight: 600; color:#333; transition: all 0.4s ease; }
.main-wrap .support-wrap .service-area .service-list .service:hover .tit{color:#008CD4}

.main-wrap .faq-wrap{position:relative; background:#FAFBFC; width: 100%; padding:140px 5vw;; height: 1133px; overflow: hidden;} 
.main-wrap .faq-wrap > div{position: relative; display:flex; justify-content:space-around; gap:200px; max-width: 1800px; margin: 0 auto}
.main-wrap .faq-wrap > div:before{content:""; position: absolute; display:block; width: 635px; height: 642px; background:url(../images/main/img_main03.svg) no-repeat;  bottom: -140px; left: -247px; opacity:0.2 }
.main-wrap .faq-wrap > div:after{content:""; position: absolute; display:block; width: 740px; height: 700px; bottom: -160px; left: -300px; backdrop-filter:blur(20px)}
.main-wrap .faq-wrap .tit-wrap {position: relative; z-index: 1}
.main-wrap .faq-wrap .tit-wrap .label{color:#008CD4; font-weight: 700; font-size: 3.2rem; margin-bottom: 40px}
.main-wrap .faq-wrap .tit-wrap .tit{font-size: 4.8rem; color:#222; width: 260px; word-break:auto-phrase;}
.main-wrap .faq-wrap .tit-wrap .txt{font-size: 2.1rem; margin-top: 20px; color:#222;  word-break:auto-phrase;}
.main-wrap .faq-wrap .tit-wrap .txt span{color:#008CD4}
.main-wrap .faq-wrap .faq-list{display:grid; grid-template-columns: repeat(1, 1fr); gap:40px; max-width: 1140px; position: relative; z-index: 1}
.main-wrap .faq-wrap .faq-list > li{background: #fff; border-radius: 40px; overflow: hidden; padding:60px 80px}
.main-wrap .faq-wrap .faq-list > li .tit{display: flex; gap:40px; align-items:center; width: 100%; font-weight: 600; color:#333;  cursor: pointer; background: #fff; border:0; font-size: 2.4rem; text-align: left; word-break:auto-phrase}
.main-wrap .faq-wrap .faq-list > li .tit i{font-weight: 400; color:#aaa; font-size: 2.8rem; transition: all 0.4s ease;}
.main-wrap .faq-wrap .faq-list > li .content{max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #fff; }
.main-wrap .faq-wrap .faq-list > li .content p{font-size: 2.1rem; color:#333; word-break:auto-phrase; padding: 20px 0px 0px 0px; border-top:1px solid #ddd; margin-top: 20px; line-height: 1.5}

.main-wrap .faq-wrap .faq-list > li.open{box-shadow:2px 2px 8px #00000018; }
.main-wrap .faq-wrap .faq-list > li.open .tit i{transform:rotate(180deg)}

.main-wrap .contact-wrap {position: relative; width: 100%; height: 830px; background: #fff; overflow: hidden; padding-top:140px}
.main-wrap .contact-wrap .contact-cont{position: relative; z-index: 1}
.main-wrap .contact-wrap .tit{margin: 0 auto; text-align: center; width: fit-content; color:#222; font-size: 4.8rem}
.main-wrap .contact-wrap .tit span{font-weight: 600}
.main-wrap .contact-wrap .contact-icon{max-width: 1800px; margin: 0 auto; margin-top: 80px; margin-bottom: 140px; }
.main-wrap .contact-wrap .contact-icon > ul{display:grid; grid-template-columns: repeat(3, 1fr); gap:0px; align-items:center}
.main-wrap .contact-wrap .contact-icon > ul > li{position:relative; display:flex; align-items: center; justify-content: center; flex-direction: column; gap:25px}
.main-wrap .contact-wrap .contact-icon > ul > li .tit{font-size: 2.4rem; font-weight: 600; color:#333}
.main-wrap .contact-wrap .contact-icon > ul > li:nth-child(2):before{content:""; position: absolute; left:0px; width: 1px; height: 60px; background: #ddd} 
.main-wrap .contact-wrap .contact-icon > ul > li:nth-child(2):after{content:""; position: absolute; right: 0px; width: 1px; height: 60px; background: #ddd}
.main-wrap .contact-wrap .button.Large{width: 320px;; margin: 0 auto; gap:40px; border-radius:25px;}

.main-wrap .contact-wrap .circle {position: absolute; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; transition: opacity 0.4s ease, transform 0.05s ease-out; opacity: 0; filter: blur(40px); z-index: 0}
.main-wrap .contact-wrap .yellow {background: radial-gradient(#007CD4, transparent); top: 280px;}
.main-wrap .contact-wrap .blue {background:radial-gradient(#5629EE, transparent);}




/* **************************************** *
*  기능
* **************************************** */
.function-wrap{position:relative; display:flex; flex-wrap:wrap; gap:0px 130px; justify-content:space-between; height:-webkit-fill-available; background:linear-gradient(180deg, #fff, #f2fbff); overflow:hidden; padding:8px 0vw 40px 5vw; }

.m-function-list{position: relative; display:flex; justify-content:space-between; align-items:center; gap:16px;  width:100%; z-index: 2; margin-top: 120px}
.m-function-list .button{flex:none; background:linear-gradient(180deg, #008CD4, #5629EE); color:#fff; width: fit-content; height:38px; border-radius: 50px; font-size: 1.6rem; padding:0px 24px; font-weight: 600}

.m-function-list .select-wrap {position: relative; display:flex; align-items: center; max-width:280px; }

.custom-select {font-family: 'out', 'suit'; width: 100%; padding: 12px 16px; border: 0px; appearance: none; background: transparent; background-size: 16px; font-size: 1.6rem; color: #333; transition: border 0.3s; font-weight: 600}
.custom-select:focus {outline: none; border-color: #008cd4; box-shadow: 0 0 0 2px #008cd440;}
.custom-select option{font-family: 'out', 'suit';}
.select-wrap i{position: absolute; right: 0px; font-size: 2rem}

.m-tab-list{position: absolute; display:flex; justify-content:space-between; align-items:center; gap:16px;  width:100%; z-index: 2; margin-top: 30px; padding:0px 5vw}
.m-tab-list .select-wrap{position: relative; display:flex; align-items: center; max-width: 100%; width: 100%}
.m-tab-list .custom-select{font-size: 3rem}
.m-tab-list .select-wrap i{font-size: 3rem}
.m-tab-list .custom-select option{font-size: 2rem}


.function-list{position:sticky; padding-top:140px; width: 420px; height:100%; z-index: 99; overflow: hidden; flex:none;}
.function-list .page-tit{position:sticky; display:flex; gap:36px; align-items:center; margin-bottom: 7vh; padding-top:0px }
 
.function-list .page-tit h2{width:fit-content; font-size:6.2rem;  font-weight:600;
	background: linear-gradient(to right, #008CD4, #5629EE);
    -webkit-background-clip: text; /* 텍스트에 배경 클립 적용 */
    color: transparent; /* 텍스트 색상을 투명하게 설정 */
}

.function-category{display:flex; align-items:center; gap:16px; width: 100%; padding:0px 14px}
.function-category .tit{font-size: 1.6rem; font-weight: 700; color:#aaa; cursor: pointer;}
.function-category .tit.active{color:#111}

.function-list ul{display:flex; padding:8px; flex-direction:column; gap:20px; width: 100%; margin-top:16px; height:calc(100% - 20vh); overflow:auto;}
.function-list ul li{display:flex; align-items:center; justify-content:space-between; flex:none;  backdrop-filter:blur(250px); background:#ffffffb0; box-shadow:-1px 2px 4px 3px #00000010; min-height: 52px; border-radius: 10px; padding:0px 12px 0px 16px; cursor:pointer;}
.function-list ul li .tit{font-size: 2rem; color:#555; font-weight:400; word-break:auto-phrase }
.function-list ul li i{font-size: 2.4rem; color:#aaa}
.function-list ul li.active{background: #008CD4}
.function-list ul li.active .tit{color:#fff; font-weight: 600}
.function-list ul li.active i{color:#fff;}

/* 기능 list-scrollbar */
.function-list ul::-webkit-scrollbar-thumb{visibility: hidden; background: #c8c8c8; transition: all 0.4s ease;}
.function-list ul::-webkit-scrollbar-track{visibility: hidden; border-color:transparent; background-color:transparent;  background-image:linear-gradient(to left, transparent 100%, transparent 100%)}
.function-list ul:active::-webkit-scrollbar-thumb,
.function-list ul:hover::-webkit-scrollbar-thumb,
.function-list ul:focus::-webkit-scrollbar-thumb{visibility: visible;  background:#c8c8c8; border-color:#c8c8c8;}
.function-list ul:hover::-webkit-scrollbar-thumb:active,
.function-list ul:hover::-webkit-scrollbar-thumb:hover:hover,
.function-list ul:hover::-webkit-scrollbar-thumb:focus{visibility: visible; background: #8a8a8a; border-color:#8a8a8a}


/* 기능 content */
.function-cont{position:relative; top:0px; left:0px; width:calc(100% - 550px); height:-webkit-fill-available; overflow-y:auto; overflow-x:hidden; }
.function-cont section.function{position:relative; min-height:100vh; height: -webkit-fill-available; background: #ccc; padding-right: 5vw}
.function-cont section:nth-child(1) {background:linear-gradient(180deg, #fff, #f2fbff)}
.function-cont section:nth-child(2) {background:linear-gradient(180deg, #f2fbff, #e2f6ff)}
.function-cont #section-2{background:transparent;}
.function-cont section[id^="section"]{background: transparent !important;}

.function-cont section.function .section-cont{position:relative; display:flex; flex-wrap:wrap; height: 100%; padding-top: 16vh; align-content:flex-start; }
.function-cont section.function .section-cont .tit-wrap{flex:none; width: 100%;}
.function-cont section.function .section-cont .tit-wrap h3.tit{font-size: 4.2rem; color:#222; margin-bottom: 20px; word-break:auto-phrase}
.function-cont section.function .section-cont .tit-wrap .txt{font-size: 2.1rem; color:#222;  word-break:auto-phrase}
.function-cont section.function .section-cont ul.detail{width:55%; font-size: 1.8rem; color:#333; line-height: 32px; text-indent: 20px; margin-top: 42px; margin-bottom: 72px}
.function-cont section.function .section-cont ul.detail .detail-tit{font-weight: 600}
.function-cont section.function .section-cont ul.detail > li{position: relative; margin-bottom: 22px}
.function-cont section.function .section-cont ul.detail > li:before{content:""; position: absolute; left:4px; top:9px; width:4px; height:10px; border-radius:12px; transform:rotate(30deg); background:#008CD4;}
.function-cont section.function .section-cont ul.detail > li > ul > li{position: relative; text-indent: 0px; padding-left: 20px; word-break:auto-phrase}
.function-cont section.function .section-cont ul.detail > li > ul > li:before{content:"-"; position: absolute; left:2px; top:-2px; color:#008CD4;}

.function-cont section.function .section-cont .img-area{flex:none; position:absolute; display:flex; align-items:center; justify-content:center; right:0px; bottom:5vh; padding:24px; width:calc(100% - 55%); height: 60vh; background:#00000008; border-radius: 10px; overflow: hidden; }
.function-cont section.function .section-cont .img-area img{border-radius: 10px;}
.function-cont section.function .section-cont .img-area img:nth-child(1){width: 90%; box-shadow: 3px 1px 10px 2px #0000000d}
.function-cont section.function .section-cont .img-area img:nth-child(2){position:absolute; right:24px; bottom:24px; width: 50%; box-shadow: -15px -12px 14px 6px #0000000f}

/* 기능 content-scrollbar */
.function-cont::-webkit-scrollbar-thumb{visibility: hidden; background: transparent; transition: all 0.4s ease;}
.function-cont::-webkit-scrollbar-track{margin-top:80px; visibility: hidden; border-color:transparent; background-color:transparent;  background-image:linear-gradient(to left, transparent 100%, transparent 100%)}
.function-cont:active::-webkit-scrollbar-thumb,
.function-cont:hover::-webkit-scrollbar-thumb,
.function-cont:focus::-webkit-scrollbar-thumb{visibility: visible;  background:#8a8a8a; border-color:#8a8a8a;}
.function-cont:hover::-webkit-scrollbar-thumb:active,
.function-cont:hover::-webkit-scrollbar-thumb:hover:hover,
.function-cont:hover::-webkit-scrollbar-thumb:focus{background:transparent; border-color:transparent}


/* **************************************** *
*  Solution
* **************************************** */

.solution-wrap{position:relative; height:auto; padding-top:80px; }
.solution-wrap .page-tit{margin: 0 auto; width: fit-content; padding-top:80px;}
.solution-wrap .page-tit h2{font-size:6.8rem; text-align: center; margin-bottom: 72px; font-weight: 600}
.solution-wrap .solution-list{display:flex; align-items:center; justify-content:center; width:938px; padding:6px 8px; height:60px; background: #fff; border-radius: 50px; box-shadow: -1px 2px 4px 2px #00000014}
.solution-wrap .solution-list .tit{display:flex; align-items:center; justify-content:center; font-size: 1.8rem; padding:0px 32px; border-radius: 50px; height: 100%; cursor: pointer;}
.solution-wrap .solution-list .tit.active{background: #008CD4;; color:#fff; font-weight: 600 }
.solution-wrap .solution-list .tit:hover{color:#008CD4}
.solution-wrap .solution-list .tit.active:hover{color:#fff; background:#0075b1 }

.solution-wrap.home{position:relative; height:auto; padding-top:80px; }
.solution-wrap.home .page-tit{width: 100%; background:#EEF3F5; padding-bottom: 12px}
.solution-wrap.home .solution-list{margin:0 auto;}
.solution-wrap.home .solution-cont{padding-top: 0px}

.soluton-visual-wrap{background: #EEF3F5; height: 520px; display:flex; gap:80px; justify-content: center; align-items:center; padding-top:179px; overflow: hidden;}
.soluton-visual-wrap .visual-img{position:relative; width: 948px}
.soluton-visual-wrap .visual-img .main-img{width: 100%; border-radius: 10px; padding:4px; background:#fff; box-shadow:0px 5px 12px 4px #0000000a}
.soluton-visual-wrap .tit-wrap .tit{font-size: 3.4rem; font-weight: 700; color:#222; width: 324px; word-break:auto-phrase;}
.soluton-visual-wrap .tit-wrap .tit span{color:#008CD4; word-break:auto-phrase;}
.soluton-visual-wrap .tit-wrap .txt{font-size:2rem; color:#222; margin-top: 14px; word-break:auto-phrase}
.soluton-visual-wrap .sub-img{position: absolute; top:0px; width: 100%}
.soluton-visual-wrap .sub-img > img{opacity: 0; transform: translateY(10px); animation: fadeInUp 0.6s ease-in-out forwards, floating 2s ease-in-out infinite;}
.soluton-visual-wrap .cut-img01{position: absolute; animation-delay: 0.3s, 0.9s; width:calc(100% - 80%); top:148px; left:94px; box-shadow:20px 19px 20px 0px #00000030; border-radius: 8px; overflow: hidden;}
.soluton-visual-wrap .cut-img02{position: absolute; animation-delay: 0.6s, 1.2s; width: calc(100% - 80%); top:70px; left:442px; box-shadow:20px 19px 20px 0px #00000030; border-radius:10px; overflow: hidden;}
.soluton-visual-wrap .cut-img03{position: absolute; animation-delay: 0.9s, 1.5s; width: calc(100% - 40%); top:238px; left:392px; padding:6px 0px; background:#fff; box-shadow:-5px 0px 20px 0px #00000030; border-radius:20px; overflow: hidden;}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

.solution-cont .soluton-list-detail{height: 600px; margin-top:84px}
.solution-cont .soluton-list-detail > ul {display:grid; grid-template-columns: repeat(2, 1fr); gap:39px 46px; width: 1300px; margin: 0 auto}
.solution-cont .soluton-list-detail > ul > li{position:relative; display:inline-block; background:#fff; height: 206px; box-shadow:2px 1px 8px #0000001a; border-radius: 10px; padding:40px; overflow: hidden; cursor: pointer;}
.solution-cont .soluton-list-detail > ul > li:after{content:"1"; position: absolute; right: 24px; bottom:0px; font-family:"Material Design Icons"; font-size: 12rem; background: linear-gradient(45deg, #008CD4, #5629EE);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity:0.2 }

.solution-cont .soluton-list-detail > ul > li.plm:after{content:"\F066C"; bottom:8px}
.solution-cont .soluton-list-detail > ul > li.wms:after{content:"\F0F81"; bottom:-12px}
.solution-cont .soluton-list-detail > ul > li.pms:after{content:"\F066E"; bottom:16px} 	
.solution-cont .soluton-list-detail > ul > li.qms:after{content:"\F0FD9"; bottom:17px}
.solution-cont .soluton-list-detail > ul > li.dms:after{content:"\F0DCF"; bottom:4px}
.solution-cont .soluton-list-detail > ul > li.toolkit:after{content:"\F0068"; bottom:-4px}

.solution-cont .soluton-list-detail > ul > li .tit{font-size: 2.8rem; color:#222; font-weight: 600; margin-bottom:8px}
.solution-cont .soluton-list-detail > ul > li .txt{font-size: 1.8rem; color:#555; margin-bottom: 46px}
.solution-cont .soluton-list-detail > ul > li  i{display: inline-block; font-size: 2rem; color:#aaa; transition: transform 0.3s ease-in-out;}
.solution-cont .soluton-list-detail > ul > li:hover{background: linear-gradient(45deg, #008CD4, #5629EE)}
.solution-cont .soluton-list-detail > ul > li:hover .tit{color:#fff}
.solution-cont .soluton-list-detail > ul > li:hover .txt{color:#fff}
.solution-cont .soluton-list-detail > ul > li:hover i{transform: translateX(5px); color:#fff}
.solution-cont .soluton-list-detail > ul > li:hover::after{background: #fff;   -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity:0.2 }



.solution-cont{width:100%; margin: 0 auto; padding-top:130px; }
.solution-cont .solution-function-list{position: absolute; left: 5vw}
.solution-cont .solution-function-list > ul > li{font-size: 1.8rem; color:#999; padding:8px 0px; font-weight: 600; cursor: pointer;}
.solution-cont .solution-function-list > ul > li.active{color:#008CD4}
.solution-cont .solution-function-list > ul > li:hover{color:#666}
.solution-cont .solution-function-list > ul > li.active:hover{color:#0075b1}

.solution-cont .intro-wrap{width: 1300px; margin: 0 auto; padding-bottom: 140px}
.solution-cont .intro-wrap h3.tit{font-size: 3.2rem; margin-bottom: 34px}
.solution-cont .intro-wrap .img-area{position:relative; height:auto; border-radius: 10px;  margin-bottom: 80px}
.solution-cont .intro-wrap .img-area img{border-radius:10px; overflow: hidden;}
.solution-cont .intro-wrap .img-area img:nth-child(1) {position:relative; top:10%; left:10px; width: 93%; border:1px solid #DDDDDD;}
.solution-cont .intro-wrap .img-area img:nth-child(2) {position:absolute; width: 45%; top:106px; right:0px; box-shadow: -7px 2px 12px 7px #0000001a}
.solution-cont .intro-wrap p.txt{font-size: 2.1rem; color:#222; margin-top: 20px; word-break:auto-phrase}
.solution-cont .intro-wrap h4.tit{font-size:3.2rem; font-weight:700; word-break:auto-phrase}
.solution-cont .intro-wrap h4.tit span{color:#008CD4}
.solution-cont .intro-wrap .key-features-list{margin-top: 40px}
.solution-cont .intro-wrap .key-features-list > ul{display:grid; grid-template-columns: repeat(3, 1fr);  gap:20px}
.solution-cont .intro-wrap .key-features-list > ul > li{display:flex; align-items:center; justify-content:space-between; height:120px;  background: #fff; border:1px solid #ddd; border-radius: 10px; padding:40px; cursor: pointer;}
.solution-cont .intro-wrap .key-features-list > ul > li:hover{border-color:#008CD4}
.solution-cont .intro-wrap .key-features-list > ul > li .list-tit{font-size: 2.1rem; color:#333; font-weight: 700;  word-break:auto-phrase} 
.solution-cont .intro-wrap .key-features-list > ul > li  i{font-size: 2.4rem; color:#008CD4; transition: transform 0.3s ease-in-out;}
.solution-cont .intro-wrap .key-features-list > ul > li:hover  i{transform: translateX(8px);}
.solution-cont .soluton-function-wrap{width: 1150px; margin: 0 auto; padding-bottom: 140px}
.solution-cont .soluton-function-wrap h3.tit{font-size: 3.2rem; margin-bottom: 34px}
.solution-cont .soluton-function-wrap .img-area{position:relative; background:#F4F4F4; height:520px; border-radius: 10px; overflow: hidden; margin-bottom: 26px}
.solution-cont .soluton-function-wrap .img-area img{border-radius:10px; overflow: hidden;}
.solution-cont .soluton-function-wrap .img-area img:nth-child(1) {position:absolute; top:10%; left:calc(100% - 90%); width: 80%;}
.solution-cont .soluton-function-wrap .img-area img:nth-child(2) {position:absolute; width: 40%; bottom:0px; right:0px}
.solution-cont .soluton-function-wrap p.txt{font-size: 2.1rem; color:#222; line-height: 32px}
.solution-cont .soluton-function-wrap .key-features-list{margin-top: 36px}
.solution-cont .soluton-function-wrap .key-features-list > ul{display:flex; flex-direction: column; gap:20px}
.solution-cont .soluton-function-wrap .key-features-list > ul > li{display:flex; gap:26px; align-items:baseline; height:124px;  background: #FAFBFC; border-radius: 10px; padding:28px 2vw;}
.solution-cont .soluton-function-wrap .key-features-list > ul > li .list-tit{font-size: 1.8rem; color:#333; font-weight: 700; width: 210px; flex:none} 
.solution-cont .soluton-function-wrap .key-features-list > ul > li > ul > li{position:relative; font-size: 1.8rem; color:#333; line-height: 32px; word-break:auto-phrase;  padding-left: 20px}
.solution-cont .soluton-function-wrap .key-features-list > ul > li > ul > li:before{content:"-"; position: absolute; left:0px; color:#008CD4}


.solution-cont .cont-detail{background: #FAFAFA; padding-top:140px; padding-bottom:80px; display:flex; flex-direction:column; align-items: center }
.solution-cont .cont-detail:nth-of-type(1){background: #FAFAFA}
.solution-cont .cont-detail:nth-of-type(2){background: #fff}
.solution-cont .cont-detail:nth-of-type(3){background: #FAFBFC}
.solution-cont .cont-detail .tit-wrap{max-width: 1300px}
.solution-cont .cont-detail .tit-wrap h3.tit{font-size: 3.2rem; color:#222; text-align: center; margin-bottom: 20px; font-weight: 700; word-break:auto-phrase}
.solution-cont .cont-detail .tit-wrap p.txt{font-size: 2.1rem; color:#222; text-align: center; word-break:auto-phrase}

.solution-cont .cont-detail .server-list-wrap{position:relative; width:100%; max-width: 1300px; border-radius: 10px; border:1px solid #008CD4; flex:1 0 auto; margin-top:104px; margin-bottom: 12px}
.solution-cont .cont-detail .server-list-wrap h4.tit{position:absolute; left:40px; top:-24px; display:flex; justify-content:center; align-items:center; border-radius:8px; color:#fff; background: #008CD4; font-size: 1.8rem; font-weight: 600; width: 290px; height: 48px;}
.solution-cont .cont-detail .server-list-wrap .legend{position:absolute; right:12px; top:-32px; display: flex; align-items: center; gap:8px; font-size: 1.5rem; color:#333; font-weight: 600}
.solution-cont .cont-detail .server-list-wrap .legend:before{content:""; display:inline-block; width: 20px; height: 20px; border-radius: 5px; background:#E5F1F8; box-shadow:4px 3px 7px #00000010}
.solution-cont .cont-detail .server-list-wrap .server-list{width: 100%; padding:40px 32px 32px; display: grid; grid-template-columns: repeat(5, 1fr); gap:20px}
.solution-cont .cont-detail .server-list-wrap .server-list > li{background:#fff; border-radius: 10px; padding:20px; font-size: 1.8rem; text-align: center; box-shadow:4px 3px 7px #00000010}
.solution-cont .cont-detail .server-list-wrap .server-list > li > .tit{color:#008CD4; font-weight: 600; margin-bottom: 20px}
.solution-cont .cont-detail .server-list-wrap .server-list > li > ul > li{display:inline-flex; align-items:center; justify-content:center; border-radius: 8px; border:1px solid #DDDDDD; height: 48px; width: 100%; margin-bottom: 14px}
.solution-cont .cont-detail .server-list-wrap .server-list > li > ul > li:last-child{margin-bottom:0px}
.solution-cont .cont-detail .server-list-wrap .server-list > li.option-item{background: #E5F1F8;}
.solution-cont .cont-detail .server-list-wrap .server-list > li.option-item > .tit{color:#333}
.solution-cont .cont-detail .server-list-wrap .server-list > li.option-item > ul > li{background: #fff; border-color:#fff}
.solution-cont .cont-detail .server-list-wrap .server-list > li.row2{grid-column: span 2; display:inline-flex; flex-wrap: wrap; gap:0px 14px}
.solution-cont .cont-detail .server-list-wrap .server-list > li.row2 > .tit{width: 100%;}
.solution-cont .cont-detail .server-list-wrap .server-list > li.row2 > ul{width: 48%;}
.solution-cont .cont-detail .server-list-wrap .server-list > li.row2 > .txt{font-size: 1.4rem; margin-top:14px; color:#555}
.solution-cont .cont-detail > p.txt{font-size: 1.6rem; color:#E63A12; text-align: left; width: 75%; max-width: 1300px}
.solution-cont .cont-detail .frame-arch-wrap{width:90%; max-width:1300px; margin-top: 80px}
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap{margin-bottom:40px}
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap > ul{display: grid; grid-template-columns: repeat(3, 1fr);  gap:14px; border: 1px solid #ddd; border-radius: 10px; width: 100%;  padding:20px;}
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap > ul > li{border-radius: 8px; display:inline-flex; align-items: center; justify-content: center; text-align:center; height: 48px; font-size: 1.8rem; color:#333; word-break:auto-phrase}
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap > ul > li.backend{background:#E0E0E0 }
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap > ul > li.business{background:#FFF8D1 }
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap > ul > li.system{background:#F9E88C }
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap > ul > li.service{background:#E5E8F5 }
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap > ul > li.license{background:#E3EFE6; color:#E63A12 }
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap > ul > li.thirdparty{background:#E3EFE6}
.solution-cont .cont-detail .frame-arch-wrap .legend-wrap p.txt{font-size: 1.6rem; color:#E63A12; margin-top: 12px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list h4.tit{font-size:2.4rem; text-align: center; margin-bottom:32px;}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"]{border-radius: 10px; padding:20px;   box-shadow:2px 2px 9px 1px #0000001c}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] > .tit{font-size:1.8rem; color:#008CD4; font-weight: 600; text-align:center; width: 100%; margin-bottom: 20px }
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] > ul{display:grid;  grid-template-columns: repeat(3, 1fr); gap:14px; font-size: 1.8rem; color:#333}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] > ul > li{background:#E5F1F8; border-radius: 10px; }
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] > ul > li.label{background:#f5f5f5; display:flex; align-items: center; justify-content: center; font-weight: 600}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] > ul > li > .tit{width: 100%; font-weight: 600; text-align: center; margin-top:20px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] > ul > li > ul{padding:20px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] > ul > li > ul > li{display:inline-flex; align-items:center; justify-content:center; width:100%; border-radius:8px; background: #fff; height: 48px; margin-bottom:14px; text-align: center}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] > ul > li > ul > li:last-child {margin-bottom: 0px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] ul li.backend{background:#E0E0E0 }
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] ul li.business{background:#FFF8D1 }
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] ul li.system{background:#F9E88C }
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] ul li.service{background:#E5E8F5 }
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] ul li.service.red{color:#E63A12 }
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] ul li.license{background:#E3EFE6; color:#E63A12 }
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-"] ul li.thirdparty{background:#E3EFE6}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty2"]{margin-bottom:20px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty2"] > ul{grid-template-columns:1.8fr 60px 1fr;}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty2"] > ul > li{background:#fff; font-size: 1.8rem; color:#333}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty2"] > ul > li > .tit{color:#008CD4}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty2"] > ul > li > ul{padding:20px 0px; display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty2"] > ul > li:nth-child(3) > ul{grid-template-columns: repeat(3, 1fr);}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty2"] > ul > li > ul > li{display:inline-flex; align-items:center; justify-content:center; width:100%; border-radius:8px; background: #fff; min-height: 48px; height:auto; margin-bottom:inherit;}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty2"] > ul > li > ul > li:last-child {margin-bottom: 0px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"]{margin-bottom:20px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"] > ul{grid-template-columns:1.8fr 60px 1fr;}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"] > ul > li{background:#fff; font-size: 1.8rem; color:#333}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"] > ul > li > div > .tit{color:#008CD4; font-weight: 600; text-align: center}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"] > ul > li > div > ul{padding:20px 0px; display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"] > ul > li:nth-child(3) > div > ul{grid-template-columns: repeat(2, 1fr);}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"] > ul > li > div > ul > li{display:inline-flex; align-items:center; justify-content:center; width:100%; border-radius:8px; background: #fff; height: 48px; margin-bottom:inherit; text-align: center}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"] > ul > li > div > ul > li:last-child {margin-bottom: 0px}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"] > ul > li:nth-child(3) > div:last-child > ul{grid-template-columns: repeat(1, 1fr);}
.solution-cont .cont-detail .frame-arch-wrap .frame-list > div[class^="frame-ty3"]:last-child > ul > li:first-child > div:nth-child(2) > ul{grid-template-columns: repeat(4, 1fr);}

.solution-cont .cont-detail .frame-arch-wrap .arrow{display:grid;  grid-template-columns: repeat(3, 1fr); gap:14px; text-align: center; padding:12px 0px;}
.solution-cont .cont-detail .frame-arch-wrap .arrow i{font-size: 2.6rem; color:#aaa}

.solution-cont .cont-detail .system-process-wrap{margin-top: 70px;}
.solution-cont .cont-detail .system-process-wrap .tit{font-size: 2.4rem; color:#333}
.solution-cont .cont-detail .system-process-wrap .system-process{display:flex; justify-content:center; align-items:center; border: 1px solid #DDDDDD; border-radius: 10px; width: 1300px; height: 1130px; background: #fff; margin-top:36px}



.solution-cont .cont-detail .maintenance-wrap{display:flex; gap:40px; width:100%; max-width: 1300px; margin-top: 76px}
.solution-cont .cont-detail .maintenance-wrap .tit{font-size: 2.4rem; color:#333}
.solution-cont .cont-detail .maintenance-wrap > div{flex: 1 auto; width: 50%;}
.solution-cont .cont-detail .maintenance-wrap > div > ul{margin-top: 40px}
.solution-cont .cont-detail .maintenance-wrap > div > ul > li{display:flex; align-items:center; background: #fff; border-radius: 10px; box-shadow: 4px 3px 6px 2px #0000000d; margin-bottom: 20px}
.solution-cont .cont-detail .maintenance-wrap > div:first-child > ul > li{height: 140px; padding:0px 20px; gap:38px}
.solution-cont .cont-detail .maintenance-wrap > div:last-child > ul > li{height: 100px; padding:0px 44px;}
.solution-cont .cont-detail .maintenance-wrap > div > ul > li .numbering{position:relative; flex:none; background: #F8F8F8; width:100px; height:100px; border-radius: 10px; overflow:hidden;}
.solution-cont .cont-detail .maintenance-wrap > div > ul > li .numbering .number{position:absolute; bottom:-20px; right:16px; font-size: 7.8rem; color:#D5DDE1; font-weight: 600}
.solution-cont .cont-detail .maintenance-wrap > div > ul > li > p{font-size: 1.8rem; color:#333; word-break:auto-phrase}
.solution-cont .cont-detail .maintenance-wrap > div .txt{font-size: 1.6rem; color:#E63A12}



.solution-cont.pms .intro-wrap{padding-bottom: 60px}
.solution-cont.pms .intro-wrap .pms-intro{display:flex; gap:80px; align-items: center; margin-bottom: 120px}
.solution-cont.pms .intro-wrap .pms-intro .function{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;}
.solution-cont.pms .intro-wrap .pms-intro .function > li{display:flex; flex-direction:column; gap:16px; justify-content:center; align-items:center; background: #fff; width:198px; height: 140px; border-radius: 10px; box-shadow:2px 2px 8px 1px #00000025 }
.solution-cont.pms .intro-wrap .pms-intro .function > li .tit{font-size: 1.8rem; color:#333; text-align: center}
.solution-cont.pms .intro-wrap .pms-intro .function > li i{display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, #18A8F1, #1867F1); width: 40px; height: 40px; border-radius: 50%; color:#fff; font-size: 2rem}
.solution-cont.pms .intro-wrap .pms-intro .function > li.tit{background:linear-gradient(180deg, #18A8F1, #1867F1)}
.solution-cont.pms .intro-wrap .pms-intro .function > li.tit .tit{color:#fff; font-size: 2.1rem; font-weight: 600}
.solution-cont.pms .intro-wrap .pms-intro .tit-wrap {position: relative;}
.solution-cont.pms .intro-wrap .pms-intro .tit-wrap .tit{font-size: 3.2rem; margin-bottom: 80px}
.solution-cont.pms .intro-wrap .pms-intro .tit-wrap .sub-tit{font-size: 2.8rem; font-weight: 700; color:#222}
.solution-cont.pms .intro-wrap .pms-intro .tit-wrap .sub-tit:before{content:""; width: 2px; height: 40px; background: #D9D9D9; position: absolute; left: 0px; top: 60px}
.solution-cont.pms .intro-wrap .pms-intro .tit-wrap .txt{font-size:2.1rem}

.solution-cont.pms .process-wrap { background: #FAFAFA; height: 600px; width: 100%; padding-top:140px}
.solution-cont.pms .process-wrap .process {position:relative; height: 460px; width: max-content; margin: 0 auto; }
.solution-cont.pms .process-wrap .process ul li { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 228px; height: 100px; border-radius: 10px; background: #007CD4; word-break: keep-all; vertical-align: middle; text-align: center; flex-direction: column; font-weight: 600; line-height: 1.4; margin-right: 30px; color: #fff; font-size: 1.8rem; }
.solution-cont.pms .process-wrap .process ul li:after {position: absolute; content: "\ea6e"; font-family: 'remixicon';  right: -29px; color: #aaa; font-size: 2.4rem; font-weight:400}
.solution-cont.pms .process-wrap .process ul li:last-child { margin-right: 0; }
.solution-cont.pms .process-wrap .process ul li:last-child:after { display: none; }
.solution-cont.pms .process-wrap .process ul li span {font-weight: 400; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li { position: relative; background: #0B249F; margin-right: 8px; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li::before { position: absolute; content: ""; width: 142px; height: 1px; background: #aaa; left: -142px; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li::after { display: none; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li:last-child { background: none; position: absolute; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li:last-child > div {position: absolute; display: flex; justify-content: center; align-items: center; left: 250px; background: #333333; color: #fff; width: 120px; height: 28px; font-size: 1.4rem; border-radius: 30px; z-index: 1; line-height: 1}
.solution-cont.pms .process-wrap .process ul.pro_ty1 li:last-child::before{width: 152px; left: 228px; z-index: 0; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li:last-child::after{ content: ""; display: block; width: 1px; height: 70px; background: #aaa; left: 380px; top: 49px; position: absolute; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li .arrow {transform: rotate(90deg); width: 65px; height: 1px; background-color: #aaa; border-radius: 4px; position: relative; top: 45px; z-index: 0; left: -257px; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li .arrow::after { content: ""; display: inline-block; width: 10px; height: 1px; background-color: #aaa; transform: rotate(45deg); position: absolute; right: -1px; bottom: 4px; }
.solution-cont.pms .process-wrap .process ul.pro_ty1 li .arrow::before { content: ""; display: inline-block; width: 10px; height: 1px; background-color: #aaa; transform: rotate(-45deg); position: absolute; right: -1px; bottom: -4px; }
.solution-cont.pms .process-wrap .process ul li > ul { position: absolute; top: 115px; }
.solution-cont.pms .process-wrap .process ul li > ul li { color: #008CD4; border: 1px solid #008CD4; display: flex; background: #fff; margin-right: 0px; margin-top: 16px; }
.solution-cont.pms .process-wrap .process ul li > ul li::after { display: none; }
.solution-cont.pms .process-wrap .process ul li > ul li:before { content: ""; position: absolute; top: -16px; width: 1px; height: 16px; background: #aaa; }
.solution-cont.pms .process-wrap .process ul li > ul li:first-child { margin-top: 0px; }
.solution-cont.pms .process-wrap .process ul li > ul li.row {background:transparent; border: none; display: block; margin-right: 0px; margin-top: 0px; width: auto; position: relative; }
.solution-cont.pms .process-wrap .process ul li > ul li.row:before { display: none; }
.solution-cont.pms .process-wrap .process ul li > ul li.row .arrow { transform: rotate(270deg); width: 115px; height: 1px; background-color: #aaa; border-radius: 4px; position: relative; top: 45px; z-index: 0; }
.solution-cont.pms .process-wrap .process ul li > ul li.row .arrow::after { content: ""; display: inline-block; width: 10px; height: 1px; background-color: #aaa; transform: rotate(45deg); position: absolute; right: -1px; bottom: 4px; }
.solution-cont.pms .process-wrap .process ul li > ul li.row .arrow::before { content: ""; display: inline-block; width: 10px; height: 1px; background-color: #aaa; transform: rotate(-45deg); position: absolute; right: -1px; bottom: -4px; }
.solution-cont.pms .process-wrap .process ul li > ul li.row .ico_link {position: relative; color: #fff; display: inline-flex; background:#333; margin-right: 0px; margin-top: 19px; border-radius: 100px; width: 60px; height: 28px; align-items: center; justify-content: center; z-index: 1; font-size:1.4rem; line-height:1}
.solution-cont.pms .process-wrap .process ul li > ul li.row ul { display: flex; align-items: flex-end; top: 102px; left: -50px; }
.solution-cont.pms .process-wrap .process ul li > ul li.row ul:before { content: ''; position: absolute; top: 0px; left: 48px; width: 378px; height: 1px; background: #aaa; }
.solution-cont.pms .process-wrap .process ul li > ul li.row ul li {display: inline-flex; color: #0B249F; border: 1px solid #0B249F;  background: #fff; margin-right: 32px; margin-top: 16px; border-radius:10px; width: 94px; height: 94px; }

.solution-cont.pms .process-wrap.en .process ul.pro_ty1 li{padding:0px 20px}
.solution-cont.pms .process-wrap.en  .process ul.pro_ty1 li .arrow{top:57px}
.solution-cont.pms .process-wrap.en .process ul li > ul li.row ul li{width: 140px; margin-right:16px}
.solution-cont.pms .process-wrap.en .process ul li > ul li.row ul{left:-180px; top:140px}
.solution-cont.pms .process-wrap.en .process ul li > ul li.row ul:before{left:70px; width: 469px}
.solution-cont.pms .process-wrap.en .process ul li > ul li.row .arrow{width: 152px; top:64px}


.solution-cont.pms .pms-intro .intro-wrap .process ul li > ul li.row ul li:before { background: #6a51d8; }
.solution-cont.pms .pms-feature { padding-top: 140px; padding-bottom: 120px; background: #f7fcff; }



/* QMS */
.solution-cont.qms .intro-wrap{padding-bottom:80px}
.solution-cont.qms .intro-wrap .qms-function{width: 100%; margin: 0 auto; margin-bottom: 80px}
.solution-cont.qms .intro-wrap .qms-function ul{display:flex; gap:20px}
.solution-cont.qms .intro-wrap .qms-function ul li{display:flex; align-items:center; justify-content:center; flex:1 auto; background: red; height: 200px; width: 200px; border-radius: 50%; color:#fff; font-size: 2.1rem; font-weight: 600; text-align: center; word-break:auto-phrase; padding:24px}
.solution-cont.qms .intro-wrap .qms-function ul li:nth-child(odd){background: #007CD4}
.solution-cont.qms .intro-wrap .qms-function ul li:nth-child(even){background: #414649; margin-top: 40px}
.solution-cont.qms .intro-wrap .key-features-list > ul{grid-template-columns:repeat(1, 1fr)}
.solution-cont.qms .intro-wrap .key-features-list > ul > li{justify-content: flex-start; gap:40px}
.solution-cont.qms .intro-wrap .key-features-list > ul > li > div > span{color:#008CD4}
.solution-cont.qms .cont-detail:nth-of-type(1){background: #fff; padding-top:0px; align-items:flex-start; max-width: 1300px; margin: 0 auto}
.solution-cont.qms .cont-detail .feature-wrap{width: 100%}
.solution-cont.qms .cont-detail .feature-wrap .feature_list{display:flex; flex-direction: column; gap:20px; width: 100%;}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li{background:#FAFBFC; border-radius: 10px; width: 100%; padding:40px 60px}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li .tit{position:relative; font-size: 1.8rem; color:#333; font-weight: 600; word-break:auto-phrase; }
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li .tit:before{ content: ""; position: absolute; left: -20px; top: 5px; width: 4px; height: 10px; border-radius: 12px; transform: rotate(30deg); background: #008CD4;}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li > ul{margin-top: 12px}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li > ul > li{position:relative; font-size: 1.8rem; color:#333; word-break:auto-phrase; padding:8px 0px}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li > ul > li span{color:#008CD4}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li > ul > li:before{content: "-"; position: absolute; left: -20px; color: #008CD4; line-height: 1}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li .list_step{position:relative; display:Flex; gap:40px; margin: 20px 0px}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li .list_step > div{position:relative; display:flex; align-items:center; justify-content:center; flex: 1; word-break:auto-phrase; border:1px solid #008CD4; border-radius: 10px; height: 100px; background:#fff; color:#008CD4; font-weight: 600; font-size: 1.8rem; text-align: center; padding:0px 24px}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li .list_step > div:last-child{background:#008CD4; color:#fff}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li .list_step > div:after{content:"\ea6e"; font-family:"remixicon"; position:absolute; right:-30px; color:#008CD4; font-size: 2.4rem; font-weight: 400}
.solution-cont.qms .cont-detail .feature-wrap .feature_list > li .list_step > div:last-child:after{display:none}



/* DMS */
.solution-cont.dms .intro-wrap .key-features-list > ul{grid-template-columns:repeat(2, 1fr)}
.solution-cont.dms .intro-wrap .key-features-list > ul > li > div{word-break:auto-phrase;}
.solution-cont.dms .cont-detail:nth-of-type(1){background: #fff; padding-top:0px; align-items:flex-start; max-width: 1300px; margin: 0 auto}
.solution-cont.dms .cont-detail .feature-wrap{width: 100%}
.solution-cont.dms .cont-detail .feature-wrap .feature_list{display:flex; flex-direction: column; gap:20px; width: 100%;}
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li{background:#FAFBFC; border-radius: 10px; width: 100%; padding:40px 60px}
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li .tit{position:relative; font-size: 1.8rem; color:#333; font-weight: 600}
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li .tit:before{ content: ""; position: absolute; left: -20px; top: 5px; width: 4px; height: 10px; border-radius: 12px; transform: rotate(30deg); background: #008CD4;}
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li > ul{margin-top: 12px}
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li > ul > li{position:relative; font-size: 1.8rem; color:#333; word-break:auto-phrasel; padding:8px 0px}
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li > ul > li span{color:#008CD4}
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li > ul > li:before{content: "-"; position: absolute; left: -20px; color: #008CD4; line-height: 1}
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li > ul > li > ul{background: #fff; width: 100%; border-radius: 10px; padding:20px 40px; margin: 14px 0px; list-style: disc; }
.solution-cont.dms .cont-detail .feature-wrap .feature_list > li > ul > li > ul > li{padding:6px 0px; word-break:auto-phrase;}



/* **************************************** *
*  company
* **************************************** */

.company-wrap{padding-top:80px}
.company-wrap .company-overview{position:relative; z-index:1; background:#fff; padding-top:140px; padding-bottom:140px; display: flex; flex-direction:column; align-items: center;}
.company-wrap .company-overview .tit{font-size: 4.2rem; color:#222222; font-weight: 500; text-align: center; letter-spacing: -0.7px; word-break:auto-phrase; }
.company-wrap .company-overview .tit > span{color:#008CD4; font-weight: 700}
.company-wrap .company-overview .core-values {margin-top: 80px; height: 760px;}
.company-wrap .company-overview .core-values ul{padding: 0; display: flex; gap: 50px; position: relative;}
.company-wrap .company-overview .core-values ul > li{position: relative; width: 406px; height: 670px; border-radius:48px; border:1px solid #D5DDE1; background:#fff;  display: flex; justify-content: center; align-items: center; transition: transform 1.0s ease-in-out; overflow: hidden; }
.company-wrap .company-overview .core-values ul > li:nth-child(2){top:80px}
.company-wrap .company-overview .core-values ul > li:nth-child(4){top:40px}
.company-wrap .company-overview .core-values ul > li:after{content:""; position:absolute; width:402px; height:666px; border-radius:46px; z-index:2; background: #fff;}
.company-wrap .company-overview .core-values ul > li .values-wrap{position: relative; z-index: 99}
.company-wrap .company-overview .core-values ul > li .values-wrap .img-area{width: 280px; height: 320px; border-radius: 140px; transform:rotate(330deg); overflow: hidden;}
.company-wrap .company-overview .core-values ul > li:nth-child(2) .values-wrap .img-area{transform:rotate(285deg);}
.company-wrap .company-overview .core-values ul > li:nth-child(3) .values-wrap .img-area{transform:rotate(45deg);}

.company-wrap .company-overview .core-values ul > li:nth-child(1) .values-wrap .img-area:before{content:""; position:relative; left:-38px; width: 340px; height: 340px;  display: block; background:url(../images/company/img_company01.jpg) no-repeat; background-size: cover; transform:rotate(30deg);  }
.company-wrap .company-overview .core-values ul > li:nth-child(2) .values-wrap .img-area:before{content:""; position:relative; right:280px; top:-178px; width: 597px; height: 478px;  display: block; background:url(../images/company/img_company02.jpg) no-repeat; background-size: cover; transform:rotate(75deg);  }
.company-wrap .company-overview .core-values ul > li:nth-child(3) .values-wrap .img-area:before{content:""; position:relative; left:-110px; top:-96px; width: 613px; height: 345px;  display: block; background:url(../images/company/img_company03.jpg) no-repeat; background-size: cover; transform:rotate(315deg);  }

.company-wrap .company-overview .core-values ul > li .values-wrap .tit-wrap{text-align: center; width: 282px; margin-top: 40px; word-break:auto-phrase; letter-spacing: -0.6px}
.company-wrap .company-overview .core-values ul > li .values-wrap .tit-wrap .tit{font-size:2.8rem; font-weight: 600; color:#333;}
.company-wrap .company-overview .core-values ul > li .values-wrap .tit-wrap .txt{font-size:2rem; color:#333; margin-top: 20px; font-weight: 400}

/* 애니메이션 효과 */
.company-wrap .company-overview .core-values ul li.floating {transform: translateY(-15px); border-color:transparent;}
.company-wrap .company-overview .core-values ul li.falling {transform: translateY(5px); border-color:#D5DDE1;}


/* 회전하는 테두리 */
.company-wrap .company-overview .core-values ul li.floating::before {content: ''; position: absolute; width:800px; height:800px; z-index: -1;
  transition: transform 1.5s linear; background: conic-gradient( from 0deg, #00a8ff, /* 회전하는 테두리 색상 */ #9063ff 90%, #30ffff 100% );
  animation: spin-border 1.5s linear infinite;  /* hover 시 무한 회전 애니메이션 */}

/* 회전 애니메이션 */
@keyframes spin-border {
  100% {transform: rotate(1turn); /* 1회전 */}
  }

.company-wrap .core-banner{position:relative; height: 668px; z-index: 1}
.company-wrap .core-banner .main-banner{display:flex; justify-content:center; gap:144px; height: 546px; background:#FAFAFA; padding-left: 10vw; padding-top:140px}
.company-wrap .core-banner .main-banner .cont-txt{font-size: 3.2rem; font-weight: 400; color:#222; letter-spacing: -0.5px; width: 740px; word-break:auto-phrase}
.company-wrap .core-banner .main-banner .cont-txt span{font-weight: 700}
.company-wrap .core-banner .main-banner .img-area{position:relative; z-index: 3}
.company-wrap .core-banner .main-banner .img-area > img{width: 668px; height: 324px; object-fit:cover; object-position:top; border-radius: 10px; box-shadow: 5px 5px 9px 5px #0000000d; overflow: hidden;}

.company-wrap .core-banner .main-banner .img-area > .point-icon-wrap .icon{position:absolute; display:flex; align-items:center; justify-content:center; border-radius: 50%; box-shadow:1px 3px 9px 0px #00000050;  animation: floating 2s ease-in-out infinite;}
.company-wrap .core-banner .main-banner .img-area > .point-icon-wrap .icon:nth-child(1){left:-282px; animation-delay: 0s;  top:156px; width: 65px; height: 65px; background:linear-gradient(45deg, #18A8F1, #1867F1);}
.company-wrap .core-banner .main-banner .img-area > .point-icon-wrap .icon:nth-child(2){left:-160px; animation-delay: 0.5s;  top:79px; width: 93px; height: 93px; background:#00377E;  box-shadow: none; padding-right: 4px}
.company-wrap .core-banner .main-banner .img-area > .point-icon-wrap .icon:nth-child(3){left:-45px; animation-delay: 1s; top:182px; width: 77px; height: 77px; background:linear-gradient(45deg, #18A8F1, #1867F1);}
.company-wrap .core-banner .main-banner .img-area > .point-icon-wrap .icon:nth-child(4){right:141px; animation-delay:1.5s;  top:-37px; width: 69px; height: 69px; background:linear-gradient(45deg, #18A8F1, #1867F1);}

.company-wrap .core-banner .sub-banner{position:absolute; bottom:0px; right:0px; z-index:2; display:flex; height: 244px; background:#007CD4; border-radius:200px 0 0 200px; width: 90vw; display:flex; align-items: center; justify-content: center; padding-right: 10vw}
.company-wrap .core-banner .sub-banner .cont-txt{font-size: 2.8rem; font-weight:600; color:#fff; letter-spacing: -0.5px; width: 926px; word-break:auto-phrase; text-align: center}

.company-wrap .company-info {position:relative; z-index:1; padding-bottom:140px; background: #fff;}
.company-wrap .company-info .info-detail{position: relative; padding-top:140px}
.company-wrap .company-info .info-detail ul{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; width: 1300px; margin: 0 auto}
.company-wrap .company-info .info-detail ul li{position: relative; background: #fff; box-shadow: 2px 2px 5px 1px #0000001a; width: 420px; height: 220px; border-radius: 10px; padding:40px}
.company-wrap .company-info .info-detail ul li .tit-wrap .tit{font-size: 2.4rem; font-weight: 700; color:#222; margin-bottom: 20px}
.company-wrap .company-info .info-detail ul li .tit-wrap .txt{font-size: 2.1rem; color:#333}
.company-wrap .company-info .info-detail ul li > img{position:absolute; width: 30px; right: 40px; top:40px}

.company-wrap .company-info .location{width: 1300px; margin: 0 auto; margin-top: 80px}
.company-wrap .company-info .location .tit{font-size: 2.8rem; color:#222}
.company-wrap .company-info .location .maps-wrap{display:flex; gap:20px; margin-top: 34px;}
.company-wrap .company-info .location .map-area{width: 50%}
.company-wrap .company-info .location .map-area .map{border-radius: 10px; width: 100%; height: 420px; box-shadow: 2px 2px 5px 1px #0000001a; overflow: hidden;}
.company-wrap .company-info .location .map-area .map iframe{width: 100%; height: 100%;}
.company-wrap .company-info .location .map-area .map .place-card{display:none}

.company-wrap .company-info .location .address-box{display:flex; gap:20px; align-items:center; margin-top: 20px; width: 100%; height:124px; padding:40px; box-shadow: 2px 2px 5px 1px #0000001a; border-radius: 10px; word-break:auto-phrase}
.company-wrap .company-info .location .address-box .tit{font-size: 2.1rem; color:#222; flex:none}
.company-wrap .company-info .location .address-box address{font-size: 1.8rem; color:#333}
.company-wrap .company-info .location .address-box address span{font-weight: 600}

.company-wrap .history{position: relative; height: 100%; overflow: hidden;}
.company-wrap .history .history-banner{position:relative; z-index:1; width: 100%; height: 420px;}
.company-wrap .history .history-banner img{width: 100%; height: 100%; object-fit:cover}
.company-wrap .history h3.tit{position:relative; z-index:1; font-weight: 700; font-size: 4.2rem; color:#222; text-align: center; margin-top: 140px; word-break:auto-phrase;}
.company-wrap .history h3.tit span{color:#008CD4}
.company-wrap .history .bg-txt{display:block; position:fixed; right:-300px; top:40%; font-size: 8.8rem; color:#F8F8F8; font-weight: 700; word-break:auto-phrase; width:85%; z-index: 0}
.company-wrap .history .timeline-wrap {position: relative; width: 1300px; margin: 50px auto; margin-top: 80px;}
/* 타임라인 리스트 */
.company-wrap .history .timeline-wrap ul {padding: 0; position: relative;}

/* 중앙선 (회색 기본, 스크롤에 따라 파란색) */
.company-wrap .history .timeline-wrap::before {content: ""; position: absolute; left: 50%; top: 0;  width: 4px;  height: 100%; /* 전체 높이 */  background:#ddd; /* 기본 회색 */  transform: translateX(-50%);}

.company-wrap .history .timeline-progress {position: absolute;left: 50%; top: 0; width: 4px; height: 0; background: #008CD4; transform: translateX(-50%); transition: height 0.3s ease-out;}
.company-wrap .history .timeline-progress:before{content:""; position: absolute; display:block; left:-3px; background:#008CD4; bottom:0px; width:10px; height: 10px; border-radius: 50%; box-shadow: 0px 0px 11px 11px #008cd430 }

/* 연혁 아이템 (오른쪽, 왼쪽 번갈아가면서) */
.company-wrap .history .timeline-wrap > ul > li {position: relative; width: 45%; margin-bottom:72px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease;}

/* 스크롤되면 나타나기 */
.company-wrap .history .timeline-wrap ul li.active {opacity: 1; transform: translateY(0);}

/* 번갈아 가면서 좌우 정렬 */
.company-wrap .history .timeline-wrap > ul > li:nth-child(odd) {left: 55%; text-align: left; padding-left: 40px}

.company-wrap .history .timeline-wrap > ul > li:nth-child(even) {left: 0; text-align: right; padding-right:40px}
.company-wrap .history .timeline-wrap > ul > li:nth-child(even) > ul > li{justify-content:flex-start; flex-direction:row-reverse;}

.company-wrap .history .timeline-wrap ul > li .tit{font-size: 3.2rem; margin-bottom: 32px}
.company-wrap .history .timeline-wrap ul > li > ul > li{display:flex; gap:18px; width: 100%; margin-bottom: 20px}
.company-wrap .history .timeline-wrap ul > li > ul > li:last-child{margin-bottom: 0}
.company-wrap .history .timeline-wrap ul > li > ul > li .month{font-size: 2.1rem; font-weight: 700; width: 22px}
.company-wrap .history .timeline-wrap ul > li > ul > li .txt{font-size: 2.1rem; width: 78%; word-break:auto-phrase}
.company-wrap .history .timeline-wrap ul > li > ul > li .txt > ul > li{padding-bottom: 16px}
.company-wrap .history .timeline-wrap ul > li > ul > li .txt > ul > li:last-child{padding-bottom: 0}
.company-wrap .history .timeline-wrap ul > li > ul > li .txt span{font-size: 1.8rem; color:#555; padding-top: 8px}
.company-wrap .partnership{position:relative; z-index:1; width: 100%; height:477px; background: #FAFBFC; display:flex; flex-direction: column; align-items: center; justify-content: center; gap:74px}
.company-wrap .partnership .tit {color:#222; font-size: 3.2rem; font-weight: 400; word-break:auto-phrase}
.company-wrap .partnership .tit span{font-weight: 700; word-break:auto-phrase}
.company-wrap .partnership .partner-company{position:relative; width:90%; height:100px; overflow:hidden; }
.company-wrap .partnership .partner-company:before{content:""; position: absolute; left: 0px; top:0px; background: linear-gradient(90deg, #fafbfc, transparent); width: 40px ;height: 100%; z-index: 2}
.company-wrap .partnership .partner-company:after{content:""; position: absolute; right: 0px; top:0px; background: linear-gradient(270deg, #fafbfc, transparent); width: 40px ;height: 100%; z-index: 2}
.company-wrap .partnership .image-slider{width:1670px; display:flex; gap:40px; height:100%;}
.company-wrap .partnership .image-slider .partner{flex:none;}
.company-wrap .partnership .partner{width: 310px; height: 80px; border-radius: 10px; background: #fff; box-shadow: 2px 2px 5px 1px #0000001a;}
.company-wrap .partnership .partner > img {width:100%; height: 100%; object-fit:contain}

.company-wrap .collaboration{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; height: 526px; width: 100%; background:url(../images/company/img_company05.jpg) no-repeat; background-size: cover; text-align: center}
.company-wrap .collaboration .tit{color:#fff; font-size: 4.2rem; font-weight: 700; margin-bottom: 40px; text-align: center; word-break:auto-phrase}
.company-wrap .collaboration .txt{color:#fff; font-size: 2.8rem; margin-bottom: 80px; word-break:auto-phrase}


/* **************************************** *
*  help desk
* **************************************** */

.helpdesk-wrap{position:relative; height:auto; padding-top:80px; margin-bottom: 140px }
.helpdesk-wrap .page-tit{margin: 0 auto; }
.helpdesk-wrap .page-tit h2{margin-bottom: 70px}
.helpdesk-wrap .form-wrap{margin: 0 auto; margin-top:140px; width: 1300px; display:grid; grid-template-columns: repeat(2, 1fr); gap:40px; justify-content:center}
.helpdesk-wrap .form-wrap .form.col1{grid-column:1/3}

.helpdesk-wrap .form-wrap .form .tit{margin-bottom: 20px; font-size: 2.1rem; color:#222}
.helpdesk-wrap .form-wrap .form .info-message{color:#E63A12; font-size: 1.6rem; padding:30px 0px}
.helpdesk-wrap .form-wrap .form .infoTxt01{font-size: 2rem}
.helpdesk-wrap .form-wrap .form Input{width: 100%;}
.helpdesk-wrap .form-wrap .form Input.Checkbox{width: 32px;}
.helpdesk-wrap .form-wrap .form Textarea{width: 100%; height: 240px}
.helpdesk-wrap .form-wrap .form .Divselect{width: 100%;}
.helpdesk-wrap .form-wrap .form .col2{display:flex; gap:20px; align-items: center}
.helpdesk-wrap .form-wrap .form .col3{display:flex; gap:20px; align-items:center; }
.helpdesk-wrap .form-wrap .form .switch-wrap{display:grid; grid-template-columns: repeat(4, 1fr); gap:20px}
.helpdesk-wrap .form-wrap .form .switch-wrap .box-wrap{display:flex; align-items:center; justify-content:center;  width: 100%; height: 80px; border-radius: 10px; border:1px solid #ddd; }

.helpdesk-wrap .form-wrap .form.contact{width: 100%; flex-direction:column; gap:0px}


.helpdesk-wrap .consent{display:flex; align-items:center; justify-content:center; gap: 16px; max-width: 1300px; margin: 0 auto; padding:80px 0px 75px;}
.helpdesk-wrap .consent .ImageCheckbox span{word-break:auto-phrase}
.helpdesk-wrap .contact{display:flex; justify-content:center; gap:20px; width: 1300px; margin: 0 auto; margin-bottom: 70px}
.helpdesk-wrap .contact .contact-box{display:inline-flex; align-items:center; width:50%; gap:20px; padding:40px; border-radius: 10px; height: 120px; flex:1 0 auto; box-shadow: 2px 2px 5px 1px #0000001a}
.helpdesk-wrap .contact .contact-box .label{flex: none; display:inline-flex; align-items:center; justify-content:center; padding:0px 20px; color:#008CD4; background:#E5F1F8; height: 34px; border-radius: 50px; font-size: 1.6rem; font-weight: 600 }
.helpdesk-wrap .contact .contact-box .txt{font-size: 2.1rem; color:#333; flex: 1 auto; width: 100%;}
.helpdesk-wrap .contact .contact-box i{font-size: 3rem; color:#008CD4; flex: none;}

.helpdesk-wrap .button.Large{max-width: 1300px; margin: 0 auto}

.checkbox-wrap{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
.btn-checkbox {display: inline-block;}

.btn-checkbox input {display: none; /* 기본 체크박스 숨김 */}
.btn-checkbox label {display: inline-flex; align-items:center; justify-content:center; gap:40px; width:100%; height:80px; font-size:2.1rem; background-color: #fff; color: #999; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; border: 1px solid #ddd; font-weight: 600}
.btn-checkbox label i{font-size: 2.5rem; font-weight: 400}

/* 체크되었을 때 스타일 변경 */
.btn-checkbox input:checked + label {color: #008CD4; border: 1px solid #008CD4;}

/* 게시판형 */
.helpdesk-wrap .form-wrap.board{ grid-template-columns: repeat(1, 1fr); margin-top: 80px}

.helpdesk-wrap .form-wrap .support-wrap > .tit{background: #f5f8ff; border-radius: 10px; padding: 40px; text-align: center; font-size: 2.1rem; font-weight: 600; color:#333}
.helpdesk-wrap .form-wrap .support-wrap > .tit > a{color:#008CD4; font-weight: 700}


/* **************************************** *
*  약관 컨텐츠
* **************************************** */
.terms-wrap {overflow: auto; height: 100%; padding:42px}
.terms-tit01,
.terms-tit02, 
.terms-info01, 
.terms-info02, 
.terms-list01 > li, 
.terms-list02 > li,
.terms-list03 > li {line-height: 150%; color: #505050; letter-spacing: -0.5px; font-weight:500; font-size: 1.5rem;}

.terms-tit01,
.terms-tit02 {display: block; margin-top: 25px; color: #202020;}

.terms-tit01 {font-size: 1.8em;}
.terms-tit02 {font-size: 1.6rem;}

.terms-info01, 
.terms-info02 {margin-top: 8px; line-height: 155%; font-size: 1.5rem; font-weight: normal;}

.terms-list01 > li, 
.terms-list02 > li, 
.terms-list03 > li {position: relative; margin-bottom: 2px; padding-left: 16px;}

.terms-list01 > li {margin-top: 8px;}
.terms-list02 > li,
.terms-list03 > li {margin-top: 4px;}

.terms-list01 > li:last-child, 
.terms-list02 > li:last-child, 
.terms-list03 > li:last-child {margin-bottom: 0;}

.terms-list01 > li .tit {font-weight: 600; font-size: 1.5rem;}

.terms-list01 li .unt, 
.terms-list02 li .unt, 
.terms-list03 li .unt {position: absolute; top: 0; left: 0;}


.privacy-detail-pop{display:none; position:relative; z-index: 999;}
.privacy-detail-pop:before{content: ""; position:fixed; display: block; width: 100%; height: 100%; background: #00000060; left: 0px;  top: 0px; }
.privacy-detail > a{cursor:pointer; color:#008CD4; text-decoration:underline; text-underline-offset : 1px; font-size: 1.6rem}


.pop-inner{ display: flex; justify-content: center; width: 100%; height: 100%; position: fixed; align-items: center; left: 0px; top: 0px;}
.pop-inner > div{position: relative; display: flex; flex-direction:column; gap:24px; overflow: hidden; background: #fff; width: 680px; height: 680px; z-index: 1000;}
.pop-inner .Textinput{height: 60px; font-size: 1.6rem}


.btn-close{position:absolute; right:12px; top:10px; cursor:pointer; z-index: 9999}
.btn-close i{font-size: 2rem}

/* **************************************** *
*  비밀번호 컨텐츠
* **************************************** */
.pw-wrap{position:relative; display:block; overflow:auto; padding:24px 42px 12px 42px; background:#fff; width:350px; height:200px; z-index:1000;}
.pw-wrap .guide-box {text-align: center; margin-top:12px}
.pw-wrap .guide-box span{ font-size:32px; color:#898989}
.pw-wrap > ul{margin-top:12px;}
.pw-wrap > ul li{width:100%; display:flex; justify-content:center}
.pw-wrap > ul li .button{margin-top:24px; height: 54px}




/* **************************************** *
*  news
* **************************************** */
/* 소셜미디어 */
.news-wrap{position:relative; height:auto; padding-top:80px; margin-bottom: 140px; min-height: 1080px}
.news-wrap .page-tit{margin: 0 auto; }
.news-wrap .page-tit h2{margin-bottom: 70px}

.news-wrap .social-media{margin: 0 auto; margin-top: 140px; margin-bottom: 140px; width: 90%; max-width: 1800px; }
.news-wrap .social-media .social-cont-wrap{display:grid; grid-template-columns:repeat(3, 1fr); gap:80px 40px; margin: 0 auto; margin-top: 80px}
.news-wrap .social-media .social-cont-wrap .social-cont{position:relative; overflow: hidden; cursor: pointer;}
.news-wrap .social-media .social-cont-wrap .social-cont .thumbnail{display:inline-flex; align-items:center; justify-content:center; width: 100%; border-radius: 15px; height: 429px; overflow: hidden; margin-bottom: 32px; background:#D9D9D9 }
.news-wrap .social-media .social-cont-wrap .social-cont .thumbnail:before{content:"\ea6c"; font-family:'remixicon'; position:absolute; display:inline-flex; justify-content:center; align-items:center;  width:140px; height: 140px; border-radius: 32px; background: #00000040; backdrop-filter:blur(10px); color:#fff; font-size: 3rem; box-shadow:2px 4px 12px #00000033; z-index:2;  opacity: 0; transition: opacity 0.3s ease}
.news-wrap .social-media .social-cont-wrap .social-cont:hover .thumbnail:before{opacity: 1;}
.news-wrap .social-media .social-cont-wrap .social-cont .thumbnail .img{width: 100%; height: 100%;}
.news-wrap .social-media .social-cont-wrap .social-cont .thumbnail .img > img{display:inline-block; width:100%;  height: 100%; object-fit:cover; transition:transform 0.3s ease;}
.news-wrap .social-media .social-cont-wrap .social-cont:hover .thumbnail .img > img{transform: scale(1.02);}

.news-wrap .social-media .social-cont-wrap .social-cont .cont-date{display:inline-flex; align-items:center; font-size: 2rem; color:#999; gap:34px; margin-bottom: 20px}
.news-wrap .social-media .social-cont-wrap .social-cont .cont-date:before{content: ""; flex:none; color: #222; font-size: 2rem; font-weight: 600}
.news-wrap .social-media .social-cont-wrap .social-cont.blog .cont-date:before{content:"블로그"; color:#1FC066}
.news-wrap .social-media .social-cont-wrap .social-cont.youtube .cont-date:before{content:"유튜브"; color:#E31C1C}
.news-wrap .social-media .social-cont-wrap .social-cont.facebook .cont-date:before{content:"페이스북"; color:#165FD8}
.news-wrap .social-media .social-cont-wrap .social-cont.insta .cont-date:before{content:"인스타그램"; color:#A044F1}
.news-wrap.en .social-media .social-cont-wrap .social-cont.blog .cont-date:before{content:"Blog"; color:#1FC066}
.news-wrap.en .social-media .social-cont-wrap .social-cont.youtube .cont-date:before{content:"Youtube"; color:#E31C1C}
.news-wrap.en .social-media .social-cont-wrap .social-cont.facebook .cont-date:before{content:"Facebook"; color:#165FD8}
.news-wrap.en .social-media .social-cont-wrap .social-cont.insta .cont-date:before{content:"Instagram"; color:#A044F1}

.news-wrap .social-media .social-cont-wrap .social-cont .cont-tit{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: auto-phrase; font-size: 2.8rem; color:#333; font-weight: 600}

/* 공지사항 */
.news-wrap .notice-list{display:grid; grid-template-columns:repeat(1, 1fr); gap:40px; margin: 0 auto; margin-top: 140px; margin-bottom: 140px; max-width: 1800px; width: 90%; }
.news-wrap .notice-list .notice{display:inline-flex; align-items:flex-end; justify-content:space-between; width: 100%; height: 160px; border-radius: 10px; padding:40px; cursor: pointer;  overflow: hidden;}
.news-wrap .notice-list .notice .tit-wrap{width: calc(100% - 140px); flex:none;}
.news-wrap .notice-list .notice .tit-wrap label{font-weight: 600; font-size: 2rem; color:#008CD4;}
.news-wrap .notice-list .notice .tit-wrap .tit{font-weight: 700; font-size: 2.8rem; color:#333; margin-top: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.news-wrap .notice-list .notice .date{font-size: 2rem; color:#999; font-weight: 400}
.news-wrap .notice-list .notice:hover{box-shadow: -2px 3px 9px 0px #008CD420}

/* 공지사항 - 내용 */
.news-wrap .notice.notice-view{display:flex; flex-direction:column; align-items:center; max-width: 1400px; margin: 0 auto; margin-top:140px; margin-bottom:140px;}
.news-wrap .notice.notice-view .tit{display:flex; flex-direction:column; align-items:center; gap:20px; font-size:2.8rem; padding-bottom:40px; margin-bottom:80px; width: 100%; border-bottom: 1px solid #D9D9D9;}
.news-wrap .notice.notice-view .tit label{color:#008CD4; font-weight: 700; flex:none; font-size: 1.6rem}
.news-wrap .notice.notice-view .tit h2{display:flex; flex-direction:column; align-items:center; justify-content: center; gap:20px; width:100%;}
.news-wrap .notice.notice-view .tit h2 > .date{font-weight: 400; font-size: 1.6rem; color:#999}
.news-wrap .notice.notice-view .txt{font-size: 1.8rem; color: #555; line-height: 32px; word-break: keep-all; margin-bottom:80px}
.news-wrap .notice.notice-view .txt p{font-size: inherit; color: #555; line-height: 32px; word-break: normal;}

.news-wrap .notice.notice-view ul {display: block; top: 0px;}

.news-wrap .notice.notice-view ul li {padding: 4px 0px;  height: initial; border: initial; font-size: initial}
.news-wrap .notice.notice-view img {max-width: 100%; height: auto !important;}




/* **************************************** *
 * 스마트팩토리
 * **************************************** */
.smartfac-wrap{padding-top: 80px;}
.smartfac-wrap .page-tit{display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height: 526px; background:url(../images/content/img_smart06.png) center/cover no-repeat;  padding-top:0px}
.smartfac-wrap .page-tit h2{color:#fff}
.smartfac-wrap .page-tit .group-button{margin-top: 80px}
.smartfac-wrap .factory-overview{max-width: 1300px; margin: 0 auto; padding-top: 140px;  margin-bottom: 140px}
.smartfac-wrap .factory-overview h3.tit{font-size: 3.2rem; color:#222; font-weight: 600}
.smartfac-wrap .factory-overview > ul {display: flex; flex-direction: column; gap:20px; margin-top: 40px }
.smartfac-wrap .factory-overview > ul > li{display:flex; align-items:center; height:120px; gap:60px; border-radius: 10px; box-shadow:1px 1px 4px 1px #0000001c; overflow: hidden;}
.smartfac-wrap .factory-overview > ul > li i{background: linear-gradient(45deg, #008CD4, #5629EE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-size: 2.8rem; font-weight: normal}
.smartfac-wrap .factory-overview > ul > li .tit{display:flex; align-items:center; justify-content:center; gap:21px; flex:none; font-size: 2.1rem; color:#222; font-weight: 600; width: 280px;  height: 100%; background:#FAFBFC; }
.smartfac-wrap .factory-overview > ul > li .txt{font-size: 1.8rem; color:#222; font-weight: 400; word-break:auto-phrase; padding-right: 40px}

.guide-text ul{margin-top: 20px}
.guide-text ul > li{font-size:1.6rem; color:#333; display:flex; gap:8px; align-items: flex-start;; padding:8px 0px; word-break:auto-phrase;}
.guide-text ul > li:before {content:'-'; color:#008CD4; margin-top: -2px; }

.smartfac-wrap .smart-core{background: #FAFAFA; width: 100%; padding-top:130px; height: 826px}
.smartfac-wrap .smart-core > .tit{font-size: 3.2rem; font-weight:600; margin: 0 auto; width:890px; text-align: center; word-break: auto-phrase}
.smartfac-wrap .smart-core > .tit span{color:#008CD4}
.smartfac-wrap .smart-core .core-cont{margin: 0 auto; margin-top:80px; width: fit-content;}
.smartfac-wrap .smart-core .core-cont > ul {display:flex; gap:19px;  }
.smartfac-wrap .smart-core .core-cont > ul > li{position:relative; display:flex; flex-direction:column; padding:40px;  border-radius: 48px; background: red; width: 310px; height: 310px; box-shadow: 1px 1px 10px 0px #00000045; overflow: hidden;}
.smartfac-wrap .smart-core .core-cont > ul > li:nth-of-type(even) {margin-top: 80px}
.smartfac-wrap .smart-core .core-cont > ul > li:nth-child(1) {background:#414649}
.smartfac-wrap .smart-core .core-cont > ul > li:nth-child(2) {background:#007CD4}
.smartfac-wrap .smart-core .core-cont > ul > li:nth-child(3) {background:#154FDF}
.smartfac-wrap .smart-core .core-cont > ul > li:nth-child(4) {background:#0B249F}
.smartfac-wrap .smart-core .core-cont > ul > li:after{content:""; position: absolute; display:block; right: 0px; bottom: 0px; width: 100%; height: 100%; }
.smartfac-wrap .smart-core .core-cont > ul > li:nth-child(1):after{background:url(../images/content/img_smart01.png) no-repeat; background-position: right; }
.smartfac-wrap .smart-core .core-cont > ul > li:nth-child(2):after{background:url(../images/content/img_smart02.png) no-repeat; background-position: right; }
.smartfac-wrap .smart-core .core-cont > ul > li:nth-child(3):after{background:url(../images/content/img_smart03.png) no-repeat; background-position: right; }
.smartfac-wrap .smart-core .core-cont > ul > li:nth-child(4):after{background:url(../images/content/img_smart04.png) no-repeat; background-position: right; }

.smartfac-wrap .smart-core .core-cont > ul > li > div{color:#fff}
.smartfac-wrap .smart-core .core-cont > ul > li .num{font-size:1.6rem; font-weight: 700; margin-bottom: 16px}
.smartfac-wrap .smart-core .core-cont > ul > li .tit{font-size:2.8rem; font-weight: 600; margin-bottom: 20px}
.smartfac-wrap .smart-core .core-cont > ul > li .txt{font-size:1.8rem; font-weight: 400}

.smartfac-wrap .support-service-map{max-width: 1300px; margin: 0 auto; margin-top: 140px; margin-bottom: 140px;}
.smartfac-wrap .support-service-map h3.tit{font-size:3.2rem; font-weight: 600 }
.smartfac-wrap .support-service-map .service-table{margin-top: 80px}
.smartfac-wrap .support-service-map .service-table > ul{display: flex; flex-direction: column; gap:20px}
.smartfac-wrap .support-service-map .service-table > ul > li{display:grid; grid-template-columns: repeat(6, 1fr); align-items:center; height:102px; border-radius:10px; box-shadow:2px 0px 8px 1px #00000024; color :#333; font-size:1.8rem; text-align: center}
.smartfac-wrap .support-service-map .service-table > ul > li.sort{height: 72px; background:#FAFBFC; }
.smartfac-wrap .support-service-map .service-table > ul > li.sort > div{font-weight: 700}
.smartfac-wrap .support-service-map .service-table > ul > li > div{display:flex; align-items:center; justify-content:center; font-weight: 400; height: 100%; width: 100%;}
.smartfac-wrap .support-service-map .service-table > ul > li > div.sort{font-weight:700; background: #FAFBFC}
.smartfac-wrap .support-service-map .service-table > ul > li > div.color-blue1{font-weight:700;}
.smartfac-wrap .support-service-map .service-table .guide-text{margin-top: 20px; font-size: 1.6rem; font-weight: 600; color:#008CD4}

.smart-banner{display:flex; flex-direction:column; align-items: center; justify-content: center; gap:40px; height: 526px; background:url(../images/content/img_smart05.png) center/cover no-repeat; }
.smart-banner .tit{color:#fff; font-size:4.2rem; font-weight: 700; text-align: center; word-break: auto-phrase}
.smart-banner .txt{font-size:2.8rem; color:#fff; margin-bottom: 40px; word-break: auto-phrase; text-align: center}



/* **************************************** *
 * 관리자페이지
 * **************************************** */
.admin-wrap{max-width: 1600px; height:-webkit-fill-available; padding-top:80px; display:block; margin: 0 auto}
.admin-wrap .page-tit{margin: 0 auto}
.admin-wrap .customer-support{padding-bottom: 100px}
.admin-wrap .infoTxt01{font-size: 1.6rem}
.admin-wrap .form-field.ty2{width:1300px; padding-top:42px; padding-bottom:42px; margin: 0 auto}
.admin-wrap .form-field.ty2 > ul {border-top:2px solid #000; border-bottom:1px solid #000; padding:12px 0px}
.admin-wrap .form-field.ty2 > ul li{display: flex; align-items:center; padding:12px; border-left:2px solid transparent}
.admin-wrap .form-field.ty2 > ul li:last-child{border-bottom:none}
.admin-wrap .form-field.ty2 .checkbox{display:flex; align-items: center; gap:16px}

.admin-wrap .form-field.ty2 .regist-privacy{margin-top:12px; display:flex; gap:8px; align-items: center;} 
.admin-wrap .form-field.ty2 .regist-privacy .checkbox{display:flex; align-items: center; gap:16px}
.admin-wrap .form-field.ty2 .regist-privacy .checkbox span{margin-left:0px; line-height:1.3; word-break:keep-all; font-size: 1.6rem}
.admin-wrap .form-field ul li .col{width:50%; display: flex; align-items:center; padding-right:24px;}
.admin-wrap .form-field ul li .col:last-child{padding-right:0px}
.admin-wrap .form-field ul li div{font-size:1.8rem; color:#202020}
.admin-wrap .form-field ul li div.tit{flex:none; width:140px; font-weight:600; word-break:keep-all; font-size:2.1rem; margin-right:12px}
.admin-wrap .form-field ul li div.form{flex:1; }
.admin-wrap .form-field ul li div .Textinput{width: 100%;}
.admin-wrap .form-field ul li div.form .Textarea{width:100%; height:100px;}
.admin-wrap .form-field ul li div.form.col input{flex:1 auto; width: 50%}
.admin-wrap .form-field ul li div.form.col input.Checkbox {width: 32px; flex:none}
.admin-wrap .form-field ul li div.form.col .Timeinput input{width: 100%;}
.admin-wrap .form-field .Timeinput-wrap{display: flex; align-items: center}
.admin-wrap .support-wrap{max-width: 1300px; margin: 0 auto}
.admin-wrap .Groupbutton{justify-content:center}
.admin-wrap .notice.notice-view .tit label{font-size: 1.8rem; background: #111; padding:4px 16px; border-radius: 50px; color:#fff; font-weight: 600}
.admin-wrap .notice.notice-view .date{font-size: 1.6rem; color:#666}