@charset "utf-8";

/*-------------------------------------------------------------------
	@ Variables
-------------------------------------------------------------------*/
:root{
	--color-primary: #f04137;
}

/*-------------------------------------------------------------------
	@ Layout
-------------------------------------------------------------------*/

#wrap{overflow: hidden;}

/* header */
header{display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; top: 0; width: 100%; height: 50px; padding: 0 20px; background: #fff; z-index: 1100; box-sizing: border-box;}
header h1 a{display: block; width: 99px; height: 24px; background: url('../images/common/logo.svg') center / 100% auto no-repeat; text-indent: -9999em;}
header .btn-buy{padding: 0 26px 0 8px; margin-left: auto; margin-right: 9px; border-radius: 5px; background: url('../images/common/ico_cart.svg') right 8px center / 14px auto no-repeat #00ADEF; color: #FFF; font-size: 13px; font-weight: 600; line-height: 24px;}
header .btn-menu{width: 24px; height: 24px; background: url('../images/common/ico_menu.svg') center / 100% auto no-repeat; text-indent: -9999em;}
header .all-menu{display: none; position: absolute; left: 0; top: 50px; width: 100%; height: calc(100vh - 50px); background: #fff; z-index: 1300;}
header .all-menu nav{width: 100%; height: 100%;}
header .all-menu .menu{width: 50%; height: 100%; border-right: 1px solid #DFDFDF; background: #f9f9f9;}
header .all-menu .menu > li > button{width: 100%; height: 60px; padding: 0 20px; background: none; color: #333; font-size: 16px; font-weight: 700; text-align: left; box-sizing: border-box;}
header .all-menu .menu > li .depth2{display: none; position: absolute; right: 0; top: 0; width: 50%;}
header .all-menu .menu > li .depth2 li{border-bottom: 1px solid #DFDFDF;}
header .all-menu .menu > li .depth2 li a{display: block; width: 100%; padding: 0 20px; color: #333; font-size: 14px; font-weight: 500; line-height: 59px; box-sizing: border-box;}
header .all-menu .menu > li .depth2 li.on a{font-weight: 700;}
header .all-menu .menu > li.on > button{background: #fff;}
header .all-menu .menu > li.on .depth2{display: block;}
header .all-menu .menu > li.menu1.on > button{color: #002755;}
header .all-menu .menu > li.menu1.on .depth2 li.on a{color: #002755;}
header .all-menu .menu > li.menu2.on > button{color: #7B57C4;}
header .all-menu .menu > li.menu2.on .depth2 li.on a{color: #7B57C4;}
header .all-menu .menu > li.menu3.on > button{color: #008A1A;}
header .all-menu .menu > li.menu3.on .depth2 li.on a{color: #008A1A;}
header .all-menu .menu > li.menu4.on > button{color: #247DE3;}
header .all-menu .menu > li.menu4.on .depth2 li.on a{color: #247DE3;}
header .all-menu .menu > li.menu5.on > button{color: #00BBB6;}
header .all-menu .menu > li.menu5.on .depth2 li.on a{color:  #00BBB6;}
header.menu-open{background: #012756 !important;}
header.menu-open h1 a{background-image: url('../images/common/logo_w.svg');}
header.menu-open .btn-buy{display: none;}
header.menu-open .btn-menu{background-image: url('../images/common/ico_menu_close.svg');}
header.menu-open .all-menu{display: block;}
body.page-main header{background: none;}
body.page-main header.on{background: #fff;}

/* footer */
footer{padding: 28px 20px;}
footer .tel{display: inline-flex; align-items: center;}
footer .tel span{display: block; padding-left: 21px; background: url('../images/common/ico_tel.svg') left center / 16px auto no-repeat; font-size: 13px; line-height: 22px; color: #444;}
footer .tel strong{display: block; margin-left: 14px; font-weight: 700; font-size: 22px; line-height: 100%; color: #334FA1;}
footer .menu{margin-top: 30px;}
footer .menu ul{display: inline-flex; gap: 20px;}
footer .menu li a{display: block; font-weight: 500; font-size: 13px; color: #444;}
footer .info{display: inline-block; width: auto; margin-top: 16px;}
footer .info::after{content: ""; display: block; clear: both;}
footer .info li{float: left; position: relative; padding-left: 8px; margin-left: 8px; font-size: 12px; line-height: 140%; color: #444;}
footer .info li::after{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #888; content: "";}
footer .info li:first-child{padding-left: 0; margin-left: 0;}
footer .info li:first-child::after{display: none;}
footer .info li.block{clear: both; padding-left: 0; margin-left: 0;}
footer .info li.block::after{display: none;}
footer .copy{font-size: 12px; line-height: 140%; color: #444;}
footer .btn-top{position: fixed; right: 10px; bottom: 20px; width: 40px; height: 40px; transform: translateY(30px); border-radius: 100%; border: 1px solid #334FA1; background: url('../images/common/ico_top.svg') center / 10px auto no-repeat #fff; text-indent: -9999em; opacity: 0; box-sizing: border-box; z-index: 9000; transition: all 0.3s ease;}
footer .btn-top.on{transform: translateY(0); opacity: 1;}

/*-------------------------------------------------------------------
	@ Componets
-------------------------------------------------------------------*/
/* button */
.btn-wrap > div{position: relative;}
.btn-wrap > div > div:last-child{position: absolute; right: 0; top: 0;}
.btn-wrap a + a{margin-left: 10px;}
.btn-large{display: inline-flex; padding: 0 20px; border-radius: 5px; font-size: 14px; color: #fff; font-weight: 700; line-height: 40px; box-sizing: border-box; cursor: pointer;}
.btn-primary{display: inline-flex; align-items: center; height: 60px; padding: 0 40px; background: #01AEF0; color: #FFF; font-size: 18px; font-weight: 600; color: #fff;}
.btn-primary.arw-r{padding-right: 68px; background: url('../images/common/ico_btn_arw_r.svg') right 40px center no-repeat #01AEF0;}
.btn-secondary{display: inline-flex; align-items: center; justify-content: center; min-width: 110px; height: 44px; background: #001F5B; color: #FFF; font-size: 14px; font-weight: 600; color: #fff; box-sizing: border-box;}
.btn-secondary.outline{border: 1px solid #001F5B; background: #fff; color: #001F5B;}

/* board */
.board-list{width: 100%; border-top: 2px solid #3e3a39;}
.board-list > li{border-bottom: 1px solid #cfcfcf;}
.board-list > li a{display: block; position: relative; padding: 10px 0;}
.board-list > li .no{position: absolute; left: 5px; top: 10px; color: #000; font-size: 13px; font-weight: 500; line-height: 150%;}
.board-list > li .tit{padding-left: 50px; color: #000; font-size: 13px; font-weight: 500; line-height: 150%;}
.board-list > li .date{padding-left: 50px; margin-top: 3px; color: #000; font-size: 12px; font-weight: 400; line-height: 150%;}
.board-gallery{width: 100%;}
.board-gallery > li + li{margin-top: 30px;}
.board-gallery > li a{display: block;}
.board-gallery > li .img{position: relative; width: 100%; aspect-ratio: 320 / 180; border-radius: 20px; overflow: hidden;}
.board-gallery > li .img.play::after{position:absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/common/ico_play.svg') center / 50px auto no-repeat; content: "";}
.board-gallery > li .img img{width: 100%; height: 100%; object-fit: cover;}
.board-gallery > li strong{display: block; margin-top: 24px; color: #001F5B; font-size: 16px; font-weight: 700; line-height: 100%;}
.board-gallery > li p{margin-top: 12px; color: #000; font-size: 13px; font-weight: 400; line-height: 160%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.board-view{width: 100%; margin: 0 auto;}
.board-view .head{padding: 15px 20px; border-top: 2px solid #3e3a39;}
.board-view .head h3{display: block; color: #001F5B; font-size: 15px; font-weight: 700; line-height: 140%;}
.board-view .cont{padding: 20px 0 35px; border-top: 1px solid #CFCFCF; color: #000; font-size: 13px; font-weight: 400; line-height: 180%;}
.board-view .cont img{max-width: 100%;}
.board-view .btn-wrap{margin-top: 40px; text-align: center;}
.board-entry ul{border-top: 1px solid #3E3A39;}
.board-entry ul li{display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #CFCFCF;}
.board-entry ul li .tit{display: block; padding-left: 25px; color: #000; font-size: 13px; font-weight: 500; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.board-entry ul li .tit.prev{background: url('../images/common/ico_post_prev.svg') left center / 12px auto no-repeat;}
.board-entry ul li .tit.next{background: url('../images/common/ico_post_next.svg') left center / 12px auto no-repeat;}
.pagination{margin-top: 40px; text-align: center;}
.pagination ul{display: inline-flex;}
.pagination ul li .page-num{display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 100%; color: #666; font-size: 13px; font-weight: 400; letter-spacing: 0.3px;}
.pagination ul li .page-num.active{margin: 0 5px; background: #001F5B; color: #fff; font-weight: 700;}
.pagination ul li .page-prev{display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: url('../images/common/ico_page_prev.svg') center no-repeat; text-indent: -9999em;}
.pagination ul li .page-next{display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: url('../images/common/ico_page_next.svg') center no-repeat; text-indent: -9999em;}

/* form */
.form-wrap{border-top: 2px solid #3e3a39;}
.form-wrap .form-group{display: flex; align-items: center; width: 100%; padding: 8px 0; border-bottom: 1px solid #cfcfcf; color: #333; font-size: 13px; font-weight: 500;}
.form-wrap .form-group.no-flex{display: block;}
.form-wrap .form-group > label{align-self: flex-start; width: 80px; color: #000; font-size: 13px; font-weight: 600; line-height: 34px; box-sizing: border-box;}
.form-wrap .form-group > label span{display: block; line-height: 120%;}
.form-wrap .form-group.spacebet{justify-content: space-between;}
.form-wrap .form-group.spacebet > label{width: 500px;}
.form-wrap .form-group input[type=email],
.form-wrap .form-group input[type=tel],
.form-wrap .form-group input[type=text]{flex: 1; width: 100%; height: 34px; padding: 0 10px; border: 1px solid #cfcfcf; border-radius: 0; font-size: 12px; line-height: 100%; font-weight: 500; color: #333; box-sizing: border-box;}
.form-wrap .form-group input[type=text]::placeholder{color: #C2C2C2; font-weight: 400;}
.form-wrap .form-group input[type="checkbox"]{display: block; position: absolute; overflow: hidden; height: 1px; border: 0; width: 1px; clip: rect(1px, 1px, 1px, 1px);}
.form-wrap .form-group input[type="checkbox"] + label{display: inline-block; position: relative; padding-left: 34px; margin-right: 20px; cursor: pointer; color: #333; font-size: 12px; font-weight: 500; line-height: 24px;}
.form-wrap .form-group input[type="checkbox"] + label:before{position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: url('../images/common/checkbox.svg') center / 100% auto no-repeat; cursor: pointer; box-sizing: border-box; content: "";}
.form-wrap .form-group input[type="checkbox"]:checked + label:before{background-image: url('../images/common/checkbox_on.svg');}
.form-wrap .form-group input[type="radio"]{display: block; position: absolute; overflow: hidden; height: 1px; border: 0; width: 1px; clip: rect(1px, 1px, 1px, 1px);}
.form-wrap .form-group input[type="radio"] + label{display: inline-block; position: relative; padding-left: 34px; margin-right: 20px; cursor: pointer; color: #333; font-size: 12px; font-weight: 500; line-height: 24px;}
.form-wrap .form-group input[type="radio"] + label:before{position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: url('../images/common/radio.svg') center / 100% auto no-repeat; cursor: pointer; box-sizing: border-box; content: "";}
.form-wrap .form-group input[type="radio"]:checked + label:before{background-image: url('../images/common/radio_on.svg');}
.form-wrap .form-group select{flex: 1; width: 100%; height: 34px; padding: 0 10px; border: 1px solid #cfcfcf; border-radius: 0; background: url('../images/common/ico_select.svg') right 10px center / 10px auto no-repeat; font-size: 12px; line-height: 100%; font-weight: 500; color: #333; box-sizing: border-box;}
.form-wrap .form-group textarea{flex: 1; height: 135px; padding: 10px 10px; border: 1px solid #E0E0E0;  font-size: 12px; line-height: 100%; font-weight: 500; color: #333; line-height: 150%; box-sizing: border-box;}
.form-wrap .form-group .phone{flex: 1; display: flex; justify-content: space-between; align-items: center;}
.form-wrap .form-group #phone1{flex: none; width: 24%; padding: 0; text-align: center;}
.form-wrap .form-group #phone2{flex: none; width: 28%; padding: 0; text-align: center;}
.form-wrap .form-group #phone3{flex: none; width: 28%; padding: 0; text-align: center;}
.form-wrap .form-group .email{flex: 1;}
.form-wrap .form-group #email1{flex: none; width: 90%; margin-right: 5px;}
.form-wrap .form-group #email2{flex: none; width: 100%; margin: 8px 0;}
.form-wrap .form-group #emailDomainSelect{width: 100%;}
.form-wrap .form-group .datepicker{flex: 1; display: flex; flex-wrap: wrap;}
.form-wrap .form-group #datepicker{flex: none; width: 89%;}
.form-wrap .form-group .btn-datepicker{width: 20px; height: 34px; margin-left: 5px; background: url('../images/common/ico_cal.svg') center / 100% auto no-repeat; text-indent: -9999em;}
.form-wrap .form-group #time{width: 100%; margin-top: 8px;}
.form-wrap .form-group #privacy{margin-top: 10px;}
.form-wrap .privacy-box{padding: 10px; margin-bottom: 10px; border: 1px solid #E0E0E0; border-top: 0; color: #333; font-size: 12px; font-weight: 500; line-height: 140%;}
.form-wrap .privacy-box + .form-group{border-top: 1px solid #E0E0E0;}
.ui-datepicker{font-size: 13px;}

/*-------------------------------------------------------------------
	@ Pages
-------------------------------------------------------------------*/
/* 메인 */
body.page-main{background: #f9f9f9;}
.main .slide .swiper-slide{height: 410px;}
.main .slide .swiper-slide .info{position: absolute; left: 20px; top: 88px;}
.main .slide .swiper-slide .info p{font-weight: 500; font-size: 12px; line-height: 150%; color: #4D4D4D;}
.main .slide .swiper-slide .info .tit{display: block; margin-top: 5px; font-weight: 800; font-size: 30px; line-height: 100%; color: #002756; color: #4D4D4D;}
.main .slide .swiper-slide .info .tag{display: flex; margin-top: 16px;}
.main .slide .swiper-slide .info .tag li{padding: 0 8px; margin-left: 4px; border-radius: 100px; background: #B2DDF1; font-weight: 500; font-size: 11px; line-height: 21px;}
.main .slide .swiper-slide .info .tag li:first-child{margin-left: 0;}
.main .slide .swiper-slide .btn-link{display: block; position: absolute; left: 20px; top: 306px; min-width: 95px; padding: 0 25px; border-radius: 8px; background: #002756; font-weight: 700; font-size: 13px; line-height: 100%; line-height: 33px; color: #fff; box-sizing: border-box;}
.main .slide .swiper-slide.item1{display: flex; justify-content: flex-end; background: url('../images/main/slide1_bg.jpg') right bottom / 360px auto no-repeat #eeecf7;}
.main .slide .swiper-slide.item1 .info .tit{color: #7B57C4;}
.main .slide .swiper-slide.item1 .info .tag li{background: #BEC5D7;}
.main .slide .swiper-slide.item2{display: flex; justify-content: flex-end; background: url('../images/main/slide2_bg.jpg') right bottom / 360px auto no-repeat #ebf9f7;}
.main .slide .swiper-slide.item2 .info .tit{color: #00BBB6;}
.main .slide .swiper-slide.item2 .info .tag li{background: #BCCFD7;}
.main .slide .swiper-slide.item3{display: flex; justify-content: flex-end; background: url('../images/main/slide3_bg.jpg') right bottom / 360px auto no-repeat #d9f1fc;}
.main .slide .swiper-slide.item3 .info .tit{color: #002755;}
.main .slide .swiper-slide.item3 .info .tag li{background: #BEC5D7;}
.main .slide .control{position: absolute; left: 20px; top: 355px; text-align: left; z-index: 10;}
.main .slide .control > div{display: inline-flex; align-items: center; justify-content: space-between; position: relative;}
.main .slide .control .swiper-pagination-wrap{display: flex; align-items: center;}
.main .slide .control .swiper-pagination{position: relative; left: auto; top: auto; bottom: auto; width: auto; margin-right: 5px;}
.main .slide .control .swiper-pagination .swiper-pagination-bullet{width: 8px; height: 8px; margin: 0; margin-left: 6px; background: #002756; opacity: 0.2; transition: all 0.7s ease;}
.main .slide .control .swiper-pagination .swiper-pagination-bullet:nth-of-type(1){margin-left: 0;}
.main .slide .control .swiper-pagination .swiper-pagination-bullet-active{background: #002756; opacity: 1;}
.main .slide .control .swiper-button-play{width: 20px; height: 20px; background: url('../images/main/ico_pause.svg') center / 10px auto no-repeat; text-indent: -9999em;}
.main .slide .control .swiper-button-play.on{background-image: url('../images/main/ico_play.svg')}
.main .slide .control .swiper-button-wrap{display: flex;}
.main .slide .control .swiper-button-prev{position: relative; left: auto; width: 31px; height: 31px; padding: 0; margin: 0; background: url('../images/main/btn_prev.png') center / 100% auto no-repeat;}
.main .slide .control .swiper-button-prev::after{display: none;}
.main .slide .control .swiper-button-next{position: relative; right: auto; width: 31px; height: 31px; padding: 0; margin: 0 0 0 8px; background: url('../images/main/btn_next.png') center / 100% auto no-repeat;}
.main .slide .control .swiper-button-next::after{display: none;}
.main .content{padding: 24px 20px 32px;}
.main .content .prd-list{display: flex; flex-wrap: wrap; gap: 12px; position: relative; width: 100%; box-sizing: border-box;}
.main .content .prd-list li{position: relative; width: calc(50% - 6px); height: 154px;}
.main .content .prd-list li a{display: block; width: 100%; height: 100%; padding: 20px; border: 1px solid #9C9C9C; border-radius: 14px; box-sizing: border-box;}
.main .content .prd-list li a h3{display: block; font-weight: 700; font-size: 18px; line-height: 120%; color: #002756;}
.main .content .prd-list li a p{margin-top: 10px; font-size: 12px; line-height: 150%; color: #444;}
.main .content .prd-list li.item1 a{background: url('../images/main/list_item1.svg') right 20px bottom 13px / 38px auto no-repeat #fff;}
.main .content .prd-list li.item2 a{background: url('../images/main/list_item2.svg') right 20px bottom 10px / 30px auto no-repeat #fff;}
.main .content .prd-list li.item3 a{background: url('../images/main/list_item3.svg') right 20px bottom 20px / 40px auto no-repeat #fff;}
.main .content .prd-list li.item4 a{background: url('../images/main/list_item4.svg') right 20px bottom 20px / 37px auto no-repeat #fff;}
.main .content .prd-list li.item5 a{background: url('../images/main/list_item5.svg') right 20px bottom 20px / 37px auto no-repeat #fff;}
.main .content .prd-list li.item6 a{background: url('../images/main/list_item6.svg') right 20px bottom 20px / 40px auto no-repeat #fff;}
.main .content .prd-list li.banner{width: 100%; height: 160px; background: #fff;}
.main .content .prd-list li.banner a{position: relative; background: url('../images/main/list_banner.svg') center 35px no-repeat; text-indent: -9999em; z-index: 10;}
.main .content .prd-list li.banner span{position: absolute; right: 20px; top: 18px; padding-right: 10px; background: url('../images/main/ico_more.svg') right center no-repeat; font-size: 13px; line-height: 100%; color: #444;}

/* 서브공통 */
.sub{padding-top: 50px;}
.sub .visual{display: flex; align-items: center; justify-content: center; height: 130px; box-sizing: border-box;}
.sub .visual h2{display: block; color: #002756; font-size: 24px; font-weight: 700; line-height: 100%;}
.sub .sub-menu{width: 100%; height: 50px;}
.sub .sub-menu > div{position: relative; border-bottom: 1px solid #DFDFDF; background: #fff; z-index: 1000;}
.sub .sub-menu.fixed > div{position: fixed; left: 0; top: 50px; width: 100%;}
.sub .sub-menu .swiper-slide{position: relative; width: auto;}
.sub .sub-menu .swiper-slide::after{position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: #DFDFDF; content: "";}
.sub .sub-menu .swiper-slide:first-child::after{display: none;}
.sub .sub-menu .swiper-slide a{display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 20px; color: #333; font-size: 14px; font-weight: 500;}
.sub .sub-menu .swiper-slide a.on{font-weight: 700;}
.sub.healthcare .sub-menu .swiper-slide a.on{color: #002755;}
.sub.product .sub-menu .swiper-slide a.on{color: #7B57C4;}
.sub.campaign .sub-menu .swiper-slide a.on{color: #008A1A;}
.sub.support .sub-menu .swiper-slide a.on{color: #002756;}
.sub .tab-sub{margin-top: -15px; text-align: center;}
.sub .tab-sub ul{display: inline-flex;}
.sub .tab-sub ul li{position: relative; margin: 0 8px;}
.sub .tab-sub ul li:first-child::after{display: none;}
.sub .tab-sub ul li a{display: block; background: none; color: #444; font-size: 14px; line-height: 40px;}
.sub .tab-sub ul li.on a{color: #00A0E9; font-weight: 700;}
.sub .content{padding: 30px 20px 50px;}
.sub .content .full{width: calc(100% + 40px); margin-left: -20px;}

/* 헬스케어 */
.healthcare .visual{background: url('../images/healthcare/bg_visual.jpg') center / cover;}
.company .overview{margin-top: 20px;}
.company .overview h3{display: block; color: #333; text-align: center; font-size: 22px; font-weight: 700; line-height: 150%;}
.company .highlights{width: 220px; margin: 38px auto 0; background: url('../images/healthcare/bg_highlight.png') center / 220px auto no-repeat;}
.company .highlights li{display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; border-radius: 100%; background: #CCCCDC;}
.company .highlights li h4{display: block; color: #041F5A; text-align: center; font-size: 20px; font-weight: 700; line-height: 140%;}
.company .highlights li p{margin-top: 14px; color: #444; text-align: center; font-size: 13px; line-height: 140%;}
.company .highlights li + li{margin-top: 220px;}
.company .vision{margin-top: 55px;}
.company .vision h4{display: block; color: #333; font-size: 20px; font-weight: 700; line-height: 150%;}
.company .vision .stat-box{padding: 25px 0 25px 112px; margin-top: 20px; background: url('../images/healthcare/bg_vision.png') left 20px center / 72px auto no-repeat #051F5A; color: #FFF; box-sizing: border-box;}
.company .vision .stat-box .t1{font-size: 16px; font-weight: 700; line-height: 150%;}
.company .vision .stat-box .t2{font-size: 20px; font-weight: 700; line-height: 150%;}
.company .vision .stat-box .t2 strong{font-size: 30px;}
.company .vision .stat-box .t3{font-size: 12px; font-weight: 500; line-height: 150%;}
.company .vision .img{width: calc(100% + 20px); margin-top: 20px; border-radius: 10px 0 0 10px; overflow-x: auto;}
.company .vision .img > div{width: 662px;}
.company .vision .img > div img{width: 662px;}
.company .vision .swp-txt{padding-left: 30px; margin-top: 20px; background: url('../images/common/ico_swipe.svg') left center / 20px auto no-repeat; color: #313131; font-size: 13px; font-weight: 500; line-height: 26px;}
.company .btn-box{margin-top: 40px; text-align: center;}
.business{padding: 60px 0 345px !important; background: url('../images/healthcare/bg_business.jpg') center bottom / 100% auto no-repeat #E8F3FB; text-align: center; box-sizing: border-box;}
.business h3{display: block; color: #333; font-size: 22px; font-weight: 700; line-height: 100%;}
.business p{margin-top: 24px; color: #333; font-size: 14px; line-height: 180%;}
.brand{padding: 0 0 150px; background: #fff; text-align: center;}
.brand h3{display: block; margin-top: 30px;}
.brand h3 span{display: block; margin-bottom: 24px; color: #002756; font-size: 18px; font-weight: 700; line-height: 100%;}
.brand h3 img{width: 175px;}
.brand .txt1{margin-top: 40px; color: #002756; text-align: center; font-size: 16px; font-weight: 500; line-height: 150%;}
.brand .dia{margin-top: 24px;}
.brand .dia img{max-width: 320px;}
.brand .txt2{margin-top: 24px; color: #002756; font-size: 14px; font-weight: 500; line-height: 150%;}
.brand .txt2 strong span{font-size: 14px; font-weight: 500;}
.brand .txt2 .type1{color: #00A0E9;}
.brand .txt2 .type2{color: #00BAB5;}
.brand .prd{position: relative; width: 100%; max-width: 320px; padding: 50px 0 35px; margin: 60px auto 0; border-radius: 20px; border: 1px solid #002756; background: #FFF;}
.brand .prd h4{display: inline-block; position: absolute; left: 50%; top: -21px; transform: translateX(-50%); width: 260px; padding: 0 40px; border-radius: 50px; background: #002756; color: #FFF; text-align: center; font-size: 18px; font-weight: 500; line-height: 42px; box-sizing: border-box;}
.brand .prd h4 strong{font-weight: 800;}
.brand .prd ul{display: inline-flex; flex-wrap: wrap; gap: 15px 20px; width: 260px; margin: 0 auto;}
.brand .prd ul li{display: flex; align-items: flex-end; justify-content: center; position: relative; width: 120px; height: 100px; color: #002756; text-align: center; font-size: 14px; font-weight: 500; line-height: 150%;}
.brand .prd ul li:nth-child(even):after{position: absolute; left: -10px; top: 50%; width: 1px; height: 80px; margin-top: -40px; background: #617596; content: "";}
.brand .prd ul li.item1{background: url('../images/healthcare/ico_prd1.png') center top / 80px auto no-repeat;}
.brand .prd ul li.item2{background: url('../images/healthcare/ico_prd2.png') center top / 80px auto no-repeat;}
.brand .prd ul li.item3{background: url('../images/healthcare/ico_prd3.png') center top / 80px auto no-repeat;}
.brand .prd ul li.item4{background: url('../images/healthcare/ico_prd4.png') center top / 80px auto no-repeat;}
.brand .prd ul li.item5{background: url('../images/healthcare/ico_prd5.png') center top / 80px auto no-repeat;}
.brand .prd ul li.item6{background: url('../images/healthcare/ico_prd6.png') center top / 80px auto no-repeat;}
.brand .prd ul li.item7{background: url('../images/healthcare/ico_prd7.png') center top / 80px auto no-repeat;}
.brand .prd ul li.item8{background: url('../images/healthcare/ico_prd8.png') center top / 80px auto no-repeat;}
.brand .prd ul li.item9{background: url('../images/healthcare/ico_prd9.png') center top / 80px auto no-repeat;}
.brand .txt3{margin-top: 24px; color: #002756; text-align: center; font-size: 14px; font-weight: 500; line-height: 150%;}
.brand .txt3 strong{font-weight: 800;}
.character{padding-bottom: 100px; text-align: center;}
.character h3{display: block; margin-top: 30px; color: #002756; text-align: center; font-size: 16px; font-weight: 400; line-height: 150%;}
.character h3 strong{font-weight: 800;}
.character .healdory{margin-top: 20px; text-align: center;}
.character .healdory img{max-width: 320px;}
.character .highlights{width: 220px; margin: 80px auto 0; background: url('../images/healthcare/bg_highlight2.png') center / 220px auto no-repeat;}
.character .highlights li{display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; border-radius: 100%; background: #CCECFB;}
.character .highlights li h4{display: block; color: #041F5A; text-align: center; font-size: 20px; font-weight: 700; line-height: 140%;}
.character .highlights li p{margin-top: 14px; color: #444; text-align: center; font-size: 13px; line-height: 140%;}
.character .highlights li + li{margin-top: 220px;}

/* 제품소개 */
.product.pack .visual{background: url('../images/product/bg_pack.jpg') center / cover;}
.product.gown .visual{background: url('../images/product/bg_gown.jpg') center / cover;}
.product.glove .visual{background: url('../images/product/bg_glove.jpg') center / cover;}
.product.mask .visual{background: url('../images/product/bg_mask.jpg') center / cover;}
.product.sterile .visual{background: url('../images/product/bg_product.jpg') center / cover;}
.product.etc .visual{background: url('../images/product/bg_product.jpg') center / cover;}
.product.view .visual{background: url('../images/product/bg_product.jpg') center / cover;}
.product h2{display: block; color: #7B57C4; font-size: 20px; font-weight: 700; line-height: 100%;}
.product h2 + p{margin-top: 16px; color: #444; font-size: 14px; line-height: 150%;}
.product .guide-list{margin-top: 16px;}
.product .guide-list li button{display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border: 1px solid #444; background: none; box-sizing: border-box;}
.product .guide-list li button span{display: block; padding-right: 22px; background: url('../images/common/ico_arw_r.svg') right center / 12px auto no-repeat; color: #444; font-size: 14px; line-height: 1;}
.product .guide-list li + li{margin-top: 16px;}
.product h3{display: block; margin-top: 40px; color: #333; font-size: 22px; font-weight: 700; line-height: 100%;}
.product .expertise{margin-top: 24px;}
.product .expertise li{position: relative; width: 100%; padding: 28px 0 28px 116px; border-radius: 30px; background:  #F9F9F9; box-sizing: border-box;}
.product .expertise li + li{margin-top: 16px;}
.product .expertise li::before{position: absolute; left: 0; top: 0; width: 116px; height: 100%; content: "";}
.product .expertise li h4{display: block; color: #002755; font-size: 16px; font-weight: 700; line-height: 100%;}
.product .expertise li p{margin-top: 15px; color: #000; font-size: 13px; line-height: 160%;}
.product.pack .expertise li.item1::before{background: url('../images/product/bg_pack_expertise1.png') center / 65px auto no-repeat;}
.product.pack .expertise li.item2::before{background: url('../images/product/bg_pack_expertise2.png') center / 68px auto no-repeat;}
.product.pack .expertise li.item3::before{background: url('../images/product/bg_pack_expertise3.png') center / 64px auto no-repeat;}
.product.gown .expertise li.item1::before{background: url('../images/product/bg_gown_expertise1.png') center / 58px auto no-repeat;}
.product.gown .expertise li.item2::before{background: url('../images/product/bg_gown_expertise2.png') center / 62px auto no-repeat;}
.product.gown .expertise li.item3::before{background: url('../images/product/bg_gown_expertise3.png') center / 63px auto no-repeat;}
.product .sms{padding: 30px 20px 30px; margin-top: 24px; border-radius: 30px; background: #f9f9f9; text-align: center;}
.product .sms img{max-width: 280px;}
.product .sms h4{display: block; margin-top: 30px; color: #002755; font-size: 16px; font-weight: 700; line-height: 100%;}
.product .sms p{margin-top: 15px; color: #000; font-size: 13px; line-height: 160%;}
.product .prd-list{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 0; margin-top: 40px;}
.product .prd-list li{position: relative; width: calc(50% - 5px);}
.product .prd-list li .label{position: absolute; left: 0; top: 0; width: 100%; background: #7B57C4; color: #FFF; text-align: center; font-size: 18px; font-weight: 700; line-height: 30px; z-index: 10;}
.product .prd-list li .img{display: flex; justify-content: center; align-items: center; position: relative; height: auto;}
.product .prd-list li .img::before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #e6e6e6; box-sizing: border-box; content: "";}
.product .prd-list li p{margin-top: 12px; color: #000; font-size: 13px; font-weight: 500; line-height: 140%;}
.product .prd-list li a{display: block; position: relative;}
.product .prd-list li a .img img{width: 100%;}
.product .prd-list li a .img.full img{width: 100%;}
.product .prd-list li strong{display: block; margin-top: 12px; color: #000; font-size: 13px; font-weight: 500; line-height: 140%;}
.product.pack .prd-list{margin-top: 24px;}
.product.pack .prd-list li{padding-top: 30px;}
.product.pack .prd-list li .img img{width: auto; height: 140px;}
.product .more{padding-top: 24px; margin-top: 80px; border-top: 1px solid #D8D8D8;}
.product .more h3{margin-top: 0;}
.product .more p{margin-top: 16px; color: #444; font-size: 14px; line-height: 150%;}
.product .more .btn-customer{display: inline-flex; align-items: center; height: 34px; padding: 0 18px; margin-top: 16px; border: 1px solid #444; box-sizing: border-box;}
.product .more .btn-customer span{display: block; padding-right: 22px; background: url('../images/common/ico_arw_r.svg') right center / 12px auto no-repeat; color: #444; font-size: 14px; line-height: 140%;}
.product .pop-guide{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 2000;}
.product .pop-guide.on{display: block;}
.product .pop-guide > div{position: relative; width: 100%; padding: 5px 0 20px 20px; background: #fff; text-align: center; box-sizing: border-box;}
.product .pop-guide .scroll-box{overflow-x: auto;}
.product .pop-guide .scroll-box img{width: 1170px;}
.product .pop-guide .swp-txt{padding-left: 30px; background: url('../images/common/ico_swipe.svg') left center / 20px auto no-repeat; color: #313131; font-size: 13px; font-weight: 500; line-height: 26px; text-align: left;}
.product .pop-guide .btn-close{position: absolute; right: 20px; top: 10px; width: 24px; height: 24px; background: url('../images/common/ico_close.svg') center / 24px auto no-repeat; text-indent: -9999em; z-index: 10;}
.product .view .detail .img-box .swiper-container{overflow: hidden;}
.product .view .detail .img-box .big{position: relative; width: 100%;}
.product .view .detail .img-box .big .swiper-slide img{width: 100%;}
.product .view .detail .img-box .big .swiper-pagination{display: inline-block; position: absolute; left: auto; right: 0; bottom: 0; width: auto; padding: 0 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.50); color: #FFF; font-size: 11px; line-height: 1; font-weight: 400;}
.product .view .detail .img-box .big .swiper-pagination > div{display: flex; align-items: center; height: 18px; gap: 5px;}
.product .view .detail .img-box .big .swiper-pagination > div .curr{font-weight: 600;}
.product .view .detail .info-box{margin-top: 24px;}
.product .view .detail .info-box .ctg{display: block; font-weight: 600; font-size: 12px; line-height: 160%; color: #002755;}
.product .view .detail .info-box .tit{display: block; margin-top: 5px; font-weight: 700; font-size: 20px; line-height: 140%; color: #000000;}
.product .view .detail .info-box .code{margin-top: 12px;}
.product .view .detail .info-box .code li{font-weight: 500; font-size: 13px; line-height: 160%; color: #000;}
.product .view .detail .info-box .btn-inquiry{display: block; width: 140px; margin-top: 24px; background: #B2B2B2; font-weight: 600; font-size: 14px; line-height: 34px; color: #fff; text-align: center;}
.product .view .detail + div{padding-top: 30px; margin-top: 30px; border-top: 1px solid #d8d8d8;}
.product .view h3{display: block; margin: 0 0 15px; font-weight: 700; font-size: 18px; line-height: 100%; color: #333;}
.product .view table.type1{align-self: flex-start;}
.product .view table.type1 th,
.product .view table.type1 td{font-size: 13px; line-height: 180%; color: #000; text-align: left; vertical-align: top;}
.product .view table.type1 th{width: 80px; font-weight: 700;}
.product .view table.type1 td ul.desc li{position: relative; padding-left: 8px;}
.product .view table.type1 td ul.desc li::before{position: absolute; left: 0; top: 0; content: "-";}
.product .view table.type2{width: 580px; border-top: 2px solid #3E3A39;}
.product .view table.type2 th,
.product .view table.type2 td{padding: 13px 0; border-bottom: 1px solid #CFCFCF; color: #000; text-align: center;}
.product .view table.type2 th{font-size: 13px; line-height: 140%; font-weight: 700;}
.product .view table.type2 td{font-size: 13px; line-height: 140%;}
.product .view .prd-info table{width: 100%;}
.product .view .sec + .sec{padding-top: 30px; margin-top: 30px; border-top: 1px solid #d8d8d8;}
.product .view .sec-detail{margin-top: 40px; text-align: center;}
.product .view .scroll-box{overflow-x: auto;}
.product .view .swp-txt{padding-left: 30px; margin-top: 20px; background: url('../images/common/ico_swipe.svg') left center / 20px auto no-repeat; color: #313131; font-size: 13px; font-weight: 500; line-height: 26px;}
.product .view .btn-wrap{margin-top: 40px; text-align: center;}
.product .view .btn-wrap .btn-list{display: inline-block; padding: 0 30px; background: #01AEF0; font-size: 14px; color: #fff; line-height: 44px;}

/* 캠페인 */
.campaign .visual{background: url('../images/campaign/bg_visual.jpg') center / cover;}
.campaign .purpose{width: 100%; margin: 30px auto 0; text-align: center;}
.campaign .purpose img{width: 276px;}
.campaign .purpose p{padding-top: 30px; margin-top: 30px; border-top: 1px solid #D8D8D8; color: #002756; text-align: center; font-size: 14px; line-height: 150%;}
.campaign .plan{position: relative; width: 320px; height: 1009px; margin: 35px auto; background: url('../images/campaign/bg_plan.jpg') left top / 100% auto no-repeat;}
.campaign .plan ol{padding-top: 170px;}
.campaign .plan ol li{position: relative; padding-left: 110px;}
.campaign .plan ol li::before{position: absolute; left: 75px; top: -15px; color: #EDEDED; font-size: 90px; font-weight: 100; line-height: 100%;}
.campaign .plan ol li + li{margin-top: 70px;}
.campaign .plan ol li strong{display: block; color: #002755; font-size: 18px; font-weight: 700; line-height: 120%;}
.campaign .plan ol li p{margin-top: 5px; color: #000; font-size: 13px; line-height: 160%;}
.campaign .objective{position: relative; width: 320px; height: 1009px; margin: 35px auto 0; background: url('../images/campaign/bg_objective.jpg') left top / 100% auto no-repeat;}
.campaign .objective ol{padding-top: 170px;}
.campaign .objective ol li{position: relative; padding-left: 115px;}
.campaign .objective ol li + li{margin-top: 50px;}
.campaign .objective ol li:nth-of-type(3){margin-top: 65px;}
.campaign .objective ol li:nth-of-type(5){margin-top: 65px;}
.campaign .objective ol li strong{display: block; color: #002755; font-size: 18px; font-weight: 700; line-height: 120%;}
.campaign .objective ol li p{margin-top: 5px; color: #000; font-size: 13px; line-height: 160%;}
.campaign .library{padding: 100px 0;}
.campaign .library .coming{padding-top: 50px; background: url('../images/common/ico_exc.svg') center top / 34px auto no-repeat ; color: #002756; font-size: 18px; font-weight: 700; line-height: 100%; text-align: center;}

/* 고객센터 */
.support .visual{background: url('../images/support/bg_visual.jpg') center / cover;}
.support .inquiry .guide-txt{color: #333; font-size: 18px; font-weight: 700; line-height: 150%;}
.support .inquiry .cs-info{padding: 20px 0; margin: 36px 0 20px; background: #F9F9F9; text-align: center;}
.support .inquiry .cs-info .tel{display: inline-block; padding-left: 32px; background: url('../images/support/ico_cs.svg') left center / auto 24px no-repeat; color: #002756; font-size: 16px; font-weight: 600; line-height: 140%;}
.support .inquiry .cs-info .tel strong{color: #002756; font-size: 18px; font-weight: 600; line-height: 140%;}
.support .inquiry .cs-info .time{margin-top: 8px; color: #333; font-size: 13px; font-weight: 500; line-height: 100%;}
.support .inquiry .btn-wrap{margin-top: 40px; text-align: center;}

/* 시스템 오류 */
.error-wrap{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.error-wrap .box{display: flex; justify-content: center; align-items: center; width: 100%;}
.error-wrap .box > div{padding-top: 175px; background: url('../images/common/error.png') center top / 143px auto no-repeat; text-align: center;}
.error-wrap .box h1{display: block; color: #002756; font-size: 20px; font-weight: 700; line-height: 100%;}
.error-wrap .box p{margin-top: 20px; color: #000; font-size: 13px; font-weight: 500; line-height: 180%;}
.error-wrap .box .logo{width: 88px; margin-top: 80px;}