@charset "utf-8";

.company {gap: 80px;}
.company .img {flex: 1;}
.company .txt {width: 50%; padding-top: 16px;}
.company h2 {letter-spacing: -.06em;}

.dot-tit {position: relative; width: fit-content; padding-top: 16px; padding-right: 16px;}
.dot-tit:before {position: absolute; content: ''; top: 0; right: 0; width: 12px; height: 12px; border-radius: 100%; background: #003a90;}

.philosophy .dot-tit {padding: 0;}
.philosophy .dot-tit:before {right: auto; left: -16px; top: -16px;}
.philosophy .txt {padding: 16px 16px 0;}
.desc p:not(:last-child) {margin-bottom: 30px;}
.sign {gap: 20px}

.history-wrap {display: flex; gap: 78px;}
.history-wrap .img, .history-wrap .txt {flex: 1;}
.history-wrap:not(:last-child) {margin-bottom: 80px;}
.history-wrap:nth-child(even) {flex-direction: row-reverse;}
.history li {display: flex; font-weight: 500;}
.history li:not(:last-child) {margin-bottom: 10px;}
.history li span {min-width: 106px;}

.directions .sec:not(:last-child) {margin-bottom: var(--sub-padding);}
.directions h2 {position: relative; padding: 20px 30px 30px; border-top: 1px solid #ddd;}
.directions h2:after {position: absolute; content: ''; left: 0; top: -1px; width: 250px; height: 2px; background: #003a90;}
.direction-info {margin-top: 30px; border-top: 1px solid #ddd;}
.direction-info li {display: flex; padding: 25px 30px; border-bottom: 1px solid #ddd;}
.direction-info li span {min-width: 146px;}
.root_daum_roughmap .wrap_controllers {display: none;}
.root_daum_roughmap .wrap_map,.root_daum_roughmap {width: 100% !important;}

.service {position: relative; overflow: hidden;}
.float-menu {position: fixed; bottom: 20px; right:30px; width: 192px; z-index: 50;}
.float-menu .float-links {height: 0; overflow: hidden; transition: .3s;}
.float-menu .float-links.on {height: 230px; opacity: 1;}
.float-menu .btn-float {display: block; width: 70px; height: 70px; margin: 12px auto 0; border: 0; border-radius: 100%; box-shadow: 2px 2px 30px rgba(0,0,0,.1)}
.float-menu a {display: flex; align-items: center; justify-content: center; gap: 7px; padding: 4px 12px; margin-bottom: 7px; background: #fff; border-radius: 20px; border: 1px solid #ddd; font-size: 14px; font-weight: 600; transition: .1s;}
.float-menu a:hover {background: linear-gradient(to right, #f4b87a, #e83d84); color: #fff; border-color: transparent; background-image: linear-gradient(to right, #f4b87a, #e83d84); background-origin: border-box; }
.float-menu a:hover .icon img {filter: grayscale(1) brightness(20);}

.service .sec:not(:last-child) {margin-bottom: var(--sub-padding);}
.service .sec.bg2 {padding: var(--sub-padding) 0;}
.service .main-txt.flex-wrap .sub-tit,
.partners .main-txt.flex-wrap .sub-tit {flex: 1;}
.service .welcome .img {position: relative; overflow: hidden; width: calc(50% + 700px); height: 450px; margin-left: auto;}
.service .welcome .img img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.service .welcome .mall-info {width: calc(50% + 700px); margin-left: auto;}

.brand-items {display: flex; flex-wrap: wrap; gap: 25px;}
.brand-items .brand {position: relative; width: calc((100% - 100px) / 5); background: #fff;}
.brand-items .brand:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd;}

.product-items {display: flex; flex-wrap: wrap; gap: 25px;}
.product-items .product {display: flex; flex-direction: column; gap: 10px; width: calc((100% - 50px) / 3); height: 320px; padding: 50px 35px; text-align: center; color: #fff; text-shadow: 3px 3px 7px rgba(0,0,0,.35);}
.product-items .txt {flex: 1; display: flex; align-items: center;}
.welfare .product-items {gap: 30px;}
.welfare .product-items .product {width: calc((100% - 90px) / 4); height: 220px;}

.service-process {background: #f6f6f6; padding: 75px 0;}
.service-process .contain {gap: 80px;}
.service-process .txt-center span {margin-top: 10px; display: block; line-height: 1em;}
.btn-inquiry {gap: 8px; width: 300px; height: 64px; margin: 0 auto; font-weight: 700; color: #fff; background: #003a90; border-radius: 10px;}

.mall-info {background: #003a90;}
.mall-info .txt {padding: 30px 120px 30px 100px;}
.mockup {margin-top: -25px; padding-bottom: 20px;}
.mall-sort {display: flex;}
.mall-sort span:not(:last-child) {position: relative; padding-right: 15px; margin-right: 15px;}
.mall-sort span:not(:last-child):before {position: absolute; content: ''; right: 0; top: 50%; margin-top: -10px; width: 2px; height: 20px; background: rgba(255,255,255,.5);}

.benefit-boxes {display: flex; flex-wrap: wrap; gap: 25px 30px;}
.benefit-boxes .box {width: calc((100% - 60px) / 3); min-height: 250px; padding: 45px 50px; background: #fff;}
.circle-list li {position: relative; padding-left: 20px; font-weight: 500; line-height: 1.6115em;}
.circle-list li:before {position: absolute; content:'·'; left: 0; font-weight: 900; font-size: 28px; color: #003a90;}
.circle-list li:not(:last-child) {margin-bottom: 3px;}
.circle-list span.fz16 {display: block;color: #787878;}
.circle-list span.fz16.c7 {display: inline-block;}
.benefit-boxes h3 .num {margin-right: 10px;}

.circle-process {position: relative; z-index: 1;}
.circle-process:before {position: absolute; content:''; z-index: -1; top: 130px; width: 100%; height: 1px; border-bottom: 2px dashed #003a90;}
.bg2 .circle-process:before {top: 115px;}
.circle-process .contain {display: flex; justify-content: space-between; gap: 60px; text-align: center;}

.welfare .product-items.giftmall-products {gap: 30px 25px;}
.product-items.giftmall-products .product {gap: 0; width: calc((100% - 75px) / 4); padding: 20px 40px 5px; border: 1px solid #ddd; text-shadow: none; text-align: center;}
.product-items.giftmall-products .txt {justify-content: center;}

.event-items {display: flex;}
.event-items .item {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex: 1; z-index: 1; height: 350px; text-align: center; color: #fff;}
.event-items .item:before {position: absolute; content: ''; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.2); transition: .2s;}
.event-items .item:hover:before {background: rgba(181,132,0,.7);}
.event-items ul {display: none; margin-top: 30px;}
.event-items ul li:not(:last-child) {margin-bottom: 4px;}
.event-items .item:hover ul {display: block;}

.example-items {display: flex;gap: 70px; flex-wrap: wrap;}
.example-items .item {display: flex; flex-direction: column; width: calc((100% - 140px) / 3);}
.example-items .img {position: relative; width: 100%; padding-bottom: 66.667%; overflow: hidden;}
.example-items .img img {position: absolute; width: 100%; height: 100%; max-width: 100%; max-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.example-items .txt {flex: 1; display: flex; flex-direction: column; justify-content: space-between; background: #fff; padding: 30px;}
.example-items h3 {line-height: 1.272727em; }
.example-items .date {font-weight: 500; font-size: 16px; color: #888;}
.vr .example-items .item {box-shadow: 10px 10px 15px rgba(0,0,0,.07)}
.vr-items .item {padding: 80px 0; flex:1; text-align: center; color: #fff;}
.vr-vatiations .flex-mid {justify-content: space-between; padding: 20px 60px; background: #fff;}
.vr-vatiations .flex-mid:not(:last-child) {margin-bottom: 70px;}
.vr-vatiations .img {margin-top: -40px; width: 35.390625%; text-align: center;}
.service .btn-more {gap: 20px; width: 160px; height: 54px; margin: 0 auto; border: 1px solid #ddd; color: #999; font-size: 16px; font-weight: 500; font-family: "Roboto", sans-serif;}
.service .btn-more:before {content: none;}

.bg-txt {padding: 135px 0;}
.hr-boxes {display: flex; gap: 26px;}
.hr-boxes .box {flex: 1; display: flex; flex-direction: column;}
.hr-boxes .txt {flex: 1; background: #fff; padding: 30px 40px;}

.manufacture-products .items {display: flex; flex-wrap: wrap; gap: 30px 0; margin: 0 -13px;}
.manufacture-products .img {width: 25%; padding: 0 13px;}

.catering-services, .food-safety {gap: 25px;}
.catering-services .item {flex: 1;}
.catering-services h3 {margin-top: 20px;}

.under-tit {position: relative; z-index: 1; width: fit-content; }
.under-tit:before {position: absolute; content: ''; z-index: -1; width: 100%; height: 10px; bottom: -2px; background: #ffebd4;}

.catering-need {padding: var(--main-padding) 0;}
.catering-need .main-txt {margin-bottom: 130px;}
.catering-need .under-tit:before,
.catering-manage .under-tit:before {height: 23px;}
.catering-need-items {gap: 70px;}
.catering-need-items li {font-weight: 600; line-height: 1.33333em;}
.catering-need-items li:not(:last-child) {margin-bottom: 12px;}

.catering-info .item {gap: 50px;}
.catering-info .item:not(:last-child) {margin-bottom: 60px;}
.catering-info .txt {flex: 1;}

.food-safety .item {flex: 1; justify-content: space-between; padding: 40px; background: #fff;}
.food-safety p {font-weight: 500;}
.food-safety h3 {gap: 10px;}

.catering-manage .items {display: flex; flex-wrap: wrap; gap: 20px;}
.catering-manage .item {gap: 80px; width: calc((100% - 20px) / 2); padding: 50px; border: 3px solid #ffa337; border-radius: 20px;}
.catering-manage .title {width: 166px;}
.catering-manage ul {flex: 1;}

.sec-brand {position: relative; padding: var(--main-padding) 0; margin-bottom: var(--main-padding);}
.sec-brand:before, .sec-brand:after {position: absolute; z-index: -1; font-weight: 900; font-size: 168px; line-height: 1em; color: #f6f6f6;}
.sec-brand:before {content: 'PARTNERS OF'; right: 0; top: 0;}
.sec-brand:after {content:'MISUNG CORPORATION'; right: 0; bottom: 0;}