/* common */
#subWrap .subVisual{ position: relative; width: 100%; height: 650px; padding-bottom: 45px; overflow: hidden;}
#subWrap .subVisual .txtBox{ position: absolute; top: 58%; transform:translateY(-50%);  z-index: 10; font-family:var(--Quan); font-weight: bold; color:#fff; -webkit-text-stroke: 6px #fff; line-height: 1; text-transform: uppercase; width: 100%; }
#subWrap .subVisual .txtBox span{ display:block; font-size:20px;  -webkit-text-stroke: 0px #fff; font-weight: bold; margin-bottom: 15px;}
#subWrap .subVisual .bg{ position: absolute; transform:translate(-50%,-50%) scale(1.5); top: 50%; left: 50%; min-width:100%; min-height:100%; width: 100%; height: 100%; transition:all 2s}
#subWrap .subVisual.on .bg{  transform:translate(-50%,-50%) scale(1);}
#subContents{ padding: 170px 0 200px;}

#sv.sv01 .subVisual .bg{ background: url("/img/sub/subVisual01.png") no-repeat 50% 50%; background-size:cover; }
#sv.sv02 .subVisual .bg{ background: url("/img/sub/subVisual02.png") no-repeat 50% 50%; background-size:cover; }
#sv.sv03 .subVisual .bg{ background: url("/img/sub/subVisual03.png") no-repeat 50% 50%; background-size:cover; }
#sv.sv04 .subVisual .bg{ background: url("/img/sub/subVisual04.png") no-repeat 50% 50%; background-size:cover; }
#sv.sv05 .subVisual .bg{ background: url("/img/sub/subVisual01.png") no-repeat 50% 50%; background-size:cover; }

.stroke-b{ -webkit-text-stroke: 2px #111; color:#111; font-family:var(--Quan); font-weight: bold; text-transform: uppercase;}
.stroke-w{ -webkit-text-stroke: 2px #fff; color:#fff; font-family:var(--Quan); font-weight: bold; text-transform: uppercase; }

#sTitle{ font-family:var(--Quan); font-weight: bold; color:#111; margin-bottom: 70px;}

/* sub */
#greeting section:not(:last-child){ margin-bottom: 200px;}
#greeting .who .ctnBox{ position: relative; }
#greeting .who .ctnBox figure{ text-align: center; }
#greeting .who .ctnBox .txtBox{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#greeting .who .ctnBox .txtBox .w1700{ height: 100%; display:flex; flex-direction:column; justify-content:center; }
#greeting .who .ctnBox .txtBox .title{ font-family:var(--Quan); color:#fff; }
#greeting .who .ctnBox .txtBox .txt{ color: rgba(255,255,255,0.9); line-height: 1.7;}
#greeting .who .ctnBox .txtBox p:nth-child(2){ margin: 50px 0 30px; }
#greeting .history > div{ position: relative; }
#greeting .history .ctnBox{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:flex; transform: rotate(0); }
#greeting .history .ctnBox:after{ content:''; display:block; width: 1px; height: 100%; background: rgba(255,255,255,0.3); position: fixed; top: 0; left: calc(50% + 210px); }
#greeting .history .ctnBox:before{ position: fixed; top: 170px; left: calc(50% + 211px); content:''; display:inline-block; width: 3px; height: 3px; border-radius:50%; background: #fff; 
margin-right: 50px; margin-left: -1.5px;}
#greeting .history .ctnBox .title{ position: absolute; top: 0; left: 0; padding: 150px 0 0 110px;}
#greeting .history .ctnBox .historyBox{ position: relative; width: 100%;  overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; display: flex; justify-content: flex-end; }
#greeting .history .ctnBox .historyBox::-webkit-scrollbar { display: none;}
#greeting .history .ctnBox .historyBox .scrollBox{ position: relative; width: 50%; height: 100%; padding-left: 210px; }
#greeting .history .ctnBox .historyBox .scrollBox li{ color:#fff; font-weight: 500; padding-top: 150px; display:flex; align-items:center; }
#greeting .history .ctnBox .historyBox .scrollBox li:last-child{ padding-bottom: 30px;}
#greeting .history .ctnBox .historyBox .scrollBox li span{ position: relative; font-family: var(--Red); font-weight: bold; display:inline-block; width: 80px; margin: 0 50px;}
#greeting .business .slideBox{ position: relative; box-shadow: 0 0 20px rgba(102,102,102,0.25); height: 700px; overflow: hidden;}
#greeting .business .slideBox .buSwiper{ height: 100%; }
#greeting .business .slideBox .swiper-slide{ display:flex;}
#greeting .business .slideBox .swiper-slide > *{ width: 50%; }
#greeting .business .slideBox .swiper-slide .txtBox{ position: relative; padding: 130px 105px; }
#greeting .business .slideBox .swiper-slide .txtBox .num{ font-family:var(--Red); color:#213F99; font-weight: 800; width: 60px; height: 60px; border-radius:50%; border:1px solid #213F99; display:flex; justify-content:center; align-items:center; line-height: 2;}
#greeting .business .slideBox .swiper-slide .txtBox .title{ font-family:var(--Quan); font-weight: bold; text-transform: uppercase; -webkit-text-stroke: 1px #213F99; color:#213F99; margin: 70px 0 20px;}
#greeting .business .slideBox .swiper-slide .txtBox .txt{ color:#555; line-height: 1.8;}
#greeting .business .slideBox .swiper-slide.slide02 .txtBox{ text-align: right;  display: flex; flex-direction: column;  align-items: flex-end;}
#greeting .business .slideBox .swiper-slide.slide02 .txtBox .pagiBox{ left: auto; right: 105px;}
#greeting .business .slideBox .swiper-slide .txtBox .pagiBox{ position: absolute; bottom: 90px; left: 105px; display:flex; gap:20px; }
#greeting .business .slideBox .swiper-slide .txtBox .pagiBox li{ width: 5px; height: 5px; border-radius:50%; background: #d9d9d9; }
#greeting .business .slideBox .swiper-slide .txtBox .pagiBox li.on{ background: #213F99;}
#greeting .supply{}
#greeting .supply .map .area{ cursor:pointer; }
#greeting .supply .map .area path{ fill:#333; }
#greeting .supply .map .area .circle{ fill: #213F99; stroke: rgba(37,88,216,0.8); animation: scaleCircle 1.2s infinite ease; opacity: 0;}
#greeting .supply .map .area.active path{ fill:#213F99; }
#greeting .supply .map .area.active .circle{ opacity: 0.15; }
#greeting .supply .listWrap{ display:flex; overflow: hidden; margin-top: -210px; display:none; }
#greeting .supply .listWrap:first-child{ display:flex; }
#greeting .supply .listWrap .rolling-list{ display:flex; width: max-content;  height: 60px;}
#greeting .supply .listWrap .rolling-list li{ width: max-content; display: flex; justify-content: center; align-items: center; margin-right: 40px;}
#greeting .supply .listWrap .rolling-list li img{  max-width: max-content; max-height: 100%; width: 100%;}
#greeting .supply .listWrap .rolling-list.origin{ animation: 30s linear 0s infinite normal forwards running rollingleft1;}
#greeting .supply .listWrap .rolling-list.clone{ animation: 30s linear 0s infinite normal forwards running rollingleft2;}
#greeting .location{}
#greeting .location .tabBox{ display:flex; gap:90px; margin-bottom: 50px;}
#greeting .location .tabBox li button{ position: relative; color:rgba(51,51,51,0.3); font-family:var(--Quan); font-weight: bold; -webkit-text-stroke:0.5px rgba(51,51,51,0.3); }
#greeting .location .tabBox li button:after{ content:''; display:block; width: 100%; height: 2px; background: #213f99; margin-top: 11px; opacity: 0; transition:all 0.3s; }
#greeting .location .tabBox li.on button{ color:#213F99; -webkit-text-stroke:0.5px #213F99; }
#greeting .location .tabBox li.on button:after{ opacity: 1; }
#greeting .location .itemBox{ display:none; }
#greeting .location .itemBox.on{ display:block; }
#greeting .location .itemBox .innerBox{ display:flex; }
#greeting .location .itemBox .innerBox > *{ width: 50%; }
#greeting .location .itemBox .innerBox .txtBox{ padding: 35px 80px;}
#greeting .location .itemBox .innerBox .txtBox .title{ font-family:var(--Quan); font-weight: bold; color:#213F99; -webkit-text-stroke:0.5px #213F99; }
#greeting .location .itemBox .innerBox .txtBox > .txt{ margin: 16px 0 60px; color:#515151; }
#greeting .location .itemBox .innerBox .txtBox ul{ display:flex; }
#greeting .location .itemBox .innerBox .txtBox ul li{ display:flex; align-items:center; }
#greeting .location .itemBox .innerBox .txtBox ul li:first-child:after{ content:''; width: 1px; height: 21px; background: #666; margin: 0 70px;}
#greeting .location .itemBox .innerBox .txtBox ul li .txt{ color:#515151;}
#greeting .location .itemBox .innerBox .txtBox ul li .txt span{ font-weight: 600; margin:0 10px 0 20px;}

#contact .ctnBox{ border:1px solid #DBDBDB; margin-bottom: 100px;}
#contact .ctnBox .itemBox{ display:flex; }
#contact .ctnBox .itemBox:not(:last-child){ border-bottom:1px solid #DBDBDB; }
#contact .ctnBox .itemBox .title{ width: 350px; height: auto; padding:  27px 33px; color:#222; font-weight: 500; background: rgba(0,57,122,0.1); display:flex; align-items:center;  border-right:1px solid #DBDBDB;
flex-shrink:0; }
#contact .ctnBox .itemBox .title span{ color:#f20000; }
#contact .ctnBox .itemBox .inputBox{ display:flex; align-items:center; gap:10px; padding: 10px 15px; width: 100%; }
#contact .ctnBox .itemBox .inputBox input{ border:1px solid #dbdbdb; width: 50%; padding: 0 20px; color:#222; height: 60px; }
#contact .ctnBox .itemBox .inputBox input[type=file]{ display:none; }
#contact .ctnBox .itemBox .inputBox label{ display:flex; align-items:center;  }
#contact .ctnBox .itemBox .inputBox label .txt{ width: 350px; border:1px solid #dbdbdb; padding: 0 20px; color:#999; height: 60px; font-weight: 300; display:flex; align-items:center; margin-right: 13px;}
#contact .ctnBox .itemBox .inputBox label .btn{ background: #DBDBDB; color:#222; font-weight: 600; width: 170px; height: 60px;cursor:pointer; display:flex; justify-content:center; align-items:center; }
#contact .ctnBox .itemBox .inputBox span.line{ display: inline-block; width: 15px; height: 1px; background: #dbdbdb; }
#contact .ctnBox .itemBox .inputBox select{ height: 60px; border:1px solid #dbdbdb; padding: 0 20px; color:#222; background: url("/img/sub/contact_down.png") no-repeat 90% 50%;}
#contact .ctnBox .itemBox .inputBox select option{ }
#contact .ctnBox .itemBox .inputBox textarea{ width: 100%; height: 175px; border:1px solid #dbdbdb; resize:none; }
#contact .ctnBox .itemBox .inputBox button{ width: 60px; height: 60px; border:1px solid #dbdbdb;}
#contact .ctnBox .itemBox.name > div{ display:flex; align-items:center; width: 50%;}
#contact .ctnBox .itemBox.name .inputBox input{ width: 100%;}
#contact .ctnBox .itemBox.contact .title{ align-items:flex-start; }
#contact .ctnBox .itemBox.phone .inputBox select{ width: 200px; }
#contact .ctnBox .itemBox.phone .inputBox input{ width: calc(50% - 210px); } 
#contact .ctnBox .itemBox.email .inputBox select{ width: 250px; background: url("/img/sub/contact_down.png") no-repeat 90% 50%;}
#contact .ctnBox .itemBox.email .inputBox input{ width: 313px; } 
#contact .ctnBox .itemBox.spam > div{	width: 100%;  padding: 10px 15px;}
#contact .ctnBox .itemBox.spam .inputBox{ padding: 0; margin-bottom: 10px;}
#contact .ctnBox .itemBox.spam .inputBox input{ width: 285px;} 
#contact .ctnBox .itemBox.spam .check input{ display:none; }
#contact .ctnBox .itemBox.spam .check label{ display:inline-block; }
#contact .ctnBox .itemBox.spam .check label p{ display:flex; align-items:center; color:#333; font-family:'Noto Sans KR', 'verdana', sans-serif; cursor:pointer; }
#contact .ctnBox .itemBox.spam .check label span{ position: relative; display:inline-block; width: 22px; height: 22px; border-radius:50%; border: 2px solid #D9D9D9; margin-right: 8px;}
#contact .ctnBox .itemBox.spam .check label span:after{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; border-radius:50%; background: #676767;
width: 10px; height: 10px; opacity: 0; }
#contact .ctnBox .itemBox.spam .check input[id="checkBox"]:checked + label span:after{ opacity: 1; }
#contact .ctnBox .itemBox.select .inputBox select{ width: 50%; background: url("/img/sub/contact_down.png") no-repeat 96% 50%;}
#contact .btnBox{ display:flex; justify-content:center; }
#contact .btnBox #btnBox{ margin-left: 50px; }
#contact .btnBox #btnBox .txt{ left: -21px; color:#213F99; }
#contact .btnBox #btnBox .circle{ background: rgba(33,63,153,0.1); }
#contact .btnBox #btnBox .circle img{ filter: invert(19%) sepia(38%) saturate(3533%) hue-rotate(212deg) brightness(95%) contrast(92%) }
#contact .btnBox #btnBox:hover .circle{ background: #00397A; }
#contact .btnBox #btnBox:hover .circle img{ filter:invert(1); }
#contact .btnBox #btnBox:hover .circle .txt{ color:#fff; }

#cmb .info{ position: relative; background: #000; padding: 120px 0 100px;}
#cmb .info .circleBg{ position: absolute; top: 0; left: 0;}
#cmb .info .w1700{ display:flex; }
#cmb .info .w1700 > div{ width: 50%; z-index: 2;}
#cmb .info .txtBox .title{ margin: 90px 0 70px;}
#cmb .info .txtBox .txt{ line-height: 1.7; color:#fff; }
#cmb .info .slideBox{ display: flex; flex-direction: column; align-items: center;}
#cmb .info .slideBox .mainBox{ position: relative; margin-bottom: 50px; }
#cmb .info .slideBox .mainBox .arrowBox{ position: absolute;  transform: translate(-50%,-50%); top: 50%; left: 50%;  z-index: 2; display: flex;  justify-content: space-between; width: calc(100% + 35px);}
#cmb .info .slideBox .mainBox .arrowBox .arrow{ width: 35px; height: 35px; border-radius: 50%; background: #213f99; color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer;}
#cmb .info .slideBox .mainBox .mainSwiper{ position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; width: 100%; height: 100%; }
#cmb .info .slideBox .mainBox .mainSwiper .swiper-slide{ display:flex; justify-content:center; align-items:center; width: 100%;}
#cmb .info .slideBox .subBox{ width: 100%; }
#cmb .info .slideBox .subBox .subSwiper{ padding: 20px;}
#cmb .info .slideBox .subBox .subSwiper .swiper-slide{ position: relative; height: 160px; display:flex; justify-content:center; align-items:center; cursor:pointer; }
#cmb .info .slideBox .subBox .subSwiper .swiper-slide:after{ pointer-events:none; content:''; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; border-radius:50%; box-shadow:0 0 20px rgba(0,57,122,0.6); display:block; width: 100%; height: 100%;  opacity: 0; transition:all 0.5s; }
#cmb .info .slideBox .subBox .subSwiper .swiper-slide:hover:after{ opacity: 1;}
#cmb .process{ padding: 150px 0 200px; overflow: hidden;}
#cmb .process h2.title{ margin-bottom: 90px; }
#cmb .process .ctnBox{ display:flex; align-items:center; gap:42px; margin-bottom: 200px;}
#cmb .process .ctnBox .itemBox{  width: calc((100% - 120px) / 4); height: 250px; transition:all 0.5s; }
#cmb .process .ctnBox .itemBox:first-child{ pointer-events: none; }
#cmb .process .ctnBox .itemBox .txtBox{ width: 100%; height: 100%; border:1px solid #e9e9e9; padding: 25px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; }
#cmb .process .ctnBox .itemBox .txtBox .title, #cmb .process .ctnBox .itemBox .txtBox img{ transition:all 0.5s; }
#cmb .process .ctnBox .itemBox .slickBox{ position: relative; position: fixed; transform: translate(-50%,-50%); top: 50%; left: 50%;  z-index: 100002; width: 60%; height: auto; display:none; }
#cmb .process .ctnBox .itemBox .slickBox .close{ color:#fff; font-weight: bold; position: absolute; top: 30px; right:30px;  height: 30px; font-size:30px; z-index: 6; cursor:pointer;}
#cmb .process .ctnBox .itemBox .slickBox .slick-slide{ position: relative; overflow: hidden ; width: 100%; height: 700px; }
#cmb .process .ctnBox .itemBox .slickBox .slick-slide img{ position:absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; 
transition:all 0.5s; }
#cmb .process .ctnBox .itemBox .slickBox .slick-nav{ position: absolute;  transform: translate(-50%,-50%); top: 50%;  left: 50%;  width: calc(100% + 150px);  display: flex; justify-content: space-between;  z-index: 1006;}
#cmb .process .ctnBox .itemBox .slickBox .slick-nav button i{ font-size:50px; color:#fff; font-weight: 300;}
#cmb .process .ctnBox .itemBox .title{ margin: 15px 0 0 5px; font-family:var(--Quan); color:#222; font-weight: bold; }
#cmb .process .ctnBox .itemBox figure{ text-align: right; }
#cmb .process .ctnBox .itemBox:hover{ background: #00397A; }
#cmb .process .ctnBox .itemBox:hover .txtBox .title{ color:#fff; }
#cmb .process .ctnBox .itemBox:hover .txtBox img{filter: invert(84%) sepia(99%) saturate(2%) hue-rotate(194deg) brightness(108%) contrast(101%);}
#cmb .process .slideBox .proSwiper{ width: 800px; height: 580px; overflow:visible; }
#cmb .process .slideBox .swiper-slide figure{ position: relative; height: 450px; overflow: hidden; transition:all 0.5s; }
#cmb .process .slideBox .swiper-slide figure:after{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:block; background: rgba(255,255,255,0.5); opacity: 1; transition:all 0.5s; }
#cmb .process .slideBox .swiper-slide figure img{ position: absolute;  transform: translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
#cmb .process .slideBox .swiper-slide-active figure{ height: 580px;}
#cmb .process .slideBox .swiper-slide-active figure:after{ opacity: 0; }
#cmb .process .slideBox .swiper-slide-active p{ opacity: 1;}
#cmb .process .slideBox .txt{ display:block; width: 100%; text-align: center; color:#333; line-height: 1.7; transition:all 0.5s; margin: 50px auto 100px;}
#cmb .process .slideBox .pagiBox{ display:flex; justify-content:center; align-items:center; gap:40px; }
#cmb .process .slideBox .pagiBox .arrow{ cursor:pointer; }
#cmb .process .slideBox .pagiBox .numBox{ display:flex; align-items:center; font-family:var(--Quan); font-weight: bold;}
#cmb .process .slideBox .pagiBox .numBox .num{ color:#000; }
#cmb .process .slideBox .pagiBox .numBox .num:after{ content:''; display: inline-block; width: 2px; height: 9px; background: rgba(17,17,17,0.2); margin: 0 25px 2px;}
#cmb .process .slideBox .pagiBox .numBox .total{ color: rgba(17,17,17,0.2); }
#cmb .enjoy{ position: relative; }
#cmb .enjoy > figure{ text-align: center; }
#cmb .enjoy .ctnBox{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:flex; align-items:center;}
#cmb .enjoy .ctnBox > div{ display:flex;justify-content: space-between; align-items: flex-end; width: 100%;} 
#cmb .enjoy .ctnBox .title{ margin-bottom: 20px;}
#cmb .enjoy .ctnBox .txt{ color:#fff; line-height: 1.4;}
#cmb .enjoy .ctnBox .btnBox{ display:flex; justify-content:flex-end; margin-bottom: -60px;}
#cmb .enjoy .ctnBox #btnBox .txt{ left: -85px; color:#fff; }
#cmb .enjoy .ctnBox #btnBox .circle{ background: rgba(255,255,255,0.1); }
#cmb .enjoy .ctnBox #btnBox .circle img{ filter: invert(1); transition:none; }
#cmb .enjoy .ctnBox #btnBox:hover .circle{ background: #fff; }
#cmb .enjoy .ctnBox #btnBox:hover .circle img{ filter: invert(19%) sepia(38%) saturate(3533%) hue-rotate(212deg) brightness(95%) contrast(92%) }
#cmb .enjoy .ctnBox #btnBox:hover .circle .txt{ color:#00397A; }

.pmd h2.title{ margin-bottom: 70px;}
.pmd .linkBox{ display:flex; justify-content:space-between; margin-bottom: 150px; }
.pmd .linkBox li button{ border:1px solid #E9E9E9;}
.pmd .linkBox li button .imgBox{ position: relative; }
.pmd .linkBox li button .imgBox .icon{ position: absolute; bottom: -70px; right: 30px; width: 140px; height: 140px; background: #fff; border-radius:50%; display:flex; justify-content:center; align-items:center; text-align: right; box-shadow: 0 0 3px rgba(0,0,0,0.25); transition: background 0.5s; }
.pmd .linkBox li button .txt{ text-align: left; font-family:var(--Quan); font-weight: bold; color:#222; line-height: 1.4; display:flex; padding: 110px 30px 50px 30px; transition:all 0.5s; }
.pmd .linkBox li:hover button,.pmd .linkBox li.on button{ border:1px solid #fff; }
.pmd .linkBox li:hover button .txt,.pmd .linkBox li.on button .txt{ background: #00397A; color:#fff; }
.pmd .linkBox li:hover button .imgBox .icon,.pmd .linkBox li.on button .imgBox .icon{ background: #00397A; border:1px solid rgba(255,255,255,0.3)}
.pmd .bottomBox{ background: #f9f9f9; padding: 100px 0 200px;}
.pmd .bottomBox .tabBox{ display:flex; gap:50px; margin-bottom: 60px;}
.pmd .bottomBox .tabBox li button{ color:rgba(51,51,51,0.3); font-family:var(--Quan); font-weight: bold; transition:all 0.5s; text-transform: uppercase;}
.pmd .bottomBox .tabBox li button:after{ content:''; display:block; background: #213F99; width: 100%; height: 2px; margin-top: 10px; opacity: 0; transition:all 0.5s; }
.pmd .bottomBox .tabBox li.on button{ color:#213F99; }
.pmd .bottomBox .tabBox li.on button:after{ opacity: 1; }
.pmd .bottomBox .itemBox{ gap:80px; align-items: center; display:none; }
.pmd .bottomBox .itemBox .imgBox{ flex-shrink:0; }
.pmd .bottomBox .itemBox .txtBox{ display:flex; flex-wrap:wrap; }
.pmd .bottomBox .itemBox .txtBox .item{ padding: 60px 0; width: 50%;}
.pmd .bottomBox .itemBox .txtBox .item:first-child{ width: 100%; border-bottom:1px solid #D9D9D9;}
.pmd .bottomBox .itemBox .txtBox .item .title{ font-family:var(--Quan); font-weight: 900; color:#222; margin-bottom: 20px; line-height: 1.2; text-transform: uppercase;}
.pmd .bottomBox .itemBox .txtBox .item .txt{ color:#555; line-height: 1.5; text-transform: capitalize;}
.pmd .bottomBox .itemBox.on{ display:flex;}