body{}
.wrap{min-height: 100vh;position: relative; overflow: hidden;}
.inner{padding: 0 3%;}
.naviPage{padding-bottom: 120px; padding-top: 50px;}
.utillPage{padding-top:80px; padding-bottom: 20px; }
.bar{width: 100%; height: 1px; background-color: #ECECEC; margin: 24px 0;}
.naviPage.utillPage{padding-bottom: 130px;}
.arti{margin-bottom: 20px;}
.mainPage{padding-bottom: 120px;}
.clearfix:after{content: :""; display: block; clear: both;}

.titWrap{margin-bottom: 12px;}
.mainTit{font-size: 20px; color: #4E4539; font-weight: 500;}

/*select*/
.selectBox {position: relative;width: 200px; border-radius: 4px; border: 2px solid #4E4539; margin-bottom: 12px; background-color: #fff;}
.selectBox .select {
  width: inherit;background: transparent;
 border: 0 none;outline: 0 none; padding: 0 5px;  position: relative; z-index: 3; font-size: 15px; height: 40px;
}
.selectBox .select option {background: lightcoral; color: #fff; padding: 3px 0; font-size: 16px;}
.selectBox .icoArrow {
  position: absolute; top: 0; right: 0; z-index: 1;
  width: 40px; height: 40px; border-left: 2px solid #4E4539; display: flex; justify-content: center; align-items: center; background-color: #4E4539;}

/*btn*/
.btn01{display: inlin-block; padding: 12px; border: 1px solid #555; text-align: center; width: 30px; height: 30px; background: url(../img/right_icon.svg) no-repeat center; text-indent: -9999px;}
.btn02{color: #4C4CD3 !important;}
.btn03_wrap{margin-bottom: 12px; }
.btn03{color: #fff; display: inline-block; padding: 10px 20px; background-color: #F35E1E; margin-top: 4px; margin-left: auto; margin-right: 0; text-align: center; border-radius: 24px;}
.btn04{padding: 4px 12px; border: 1px solid #0A9420; color: #0A9420 !important; display: inline-block; cursor: pointer; font-size: 14px; border-radius: 4px;}
.btn05{padding: 4px 12px; color: #204EC3 !important; border: 1px solid #204EC3; display: inline-block; font-size: 14px; border-radius: 4px; cursor: pointer;}

/*table*/
.table{border: 1px solid #dae2e6;}
.table tr{font-size: 16px;}
.table tr th{background-color: #4E4539; color: #fff; font-weight: normal; word-break: keep-all; padding: 12px 8px !important;}
.table tr td{word-break: keep-all; background-color: #fff;}

/*nav*/
nav{position: fixed; bottom: 0;  width: 100%;  z-index: 100; padding: 0 2%; margin: 0 auto;}
nav ul{box-shadow:  0px -4px 20px 1px rgba(0, 0, 0, 0.1);  background-color: #fff; border-radius: 12px 12px 0 0;}
nav ul:after{display: block; clear: both; content: ""; }
nav li{padding: 4px; float: left; width: 50%;}
nav li a{display: block; padding: 16px 2px; text-align: center; }
nav li a img{margin: 0 auto 8px auto; display: block;}
nav li a p{font-size: 16px; color: #000; }

/*utill*/
.utill{position: fixed; top: 0; left: 0; width: 100%; text-align: center; padding:  20px 0; border-bottom: 1px solid #ececec; background-color: #fff; z-index: 100;}
.utill{position: fixed; top: 0; left: 0; width: 100%; text-align: center; padding:  20px 0; border-bottom: 1px solid #ececec; background-color: #fff; z-index: 100;}
.utill .logo{float: left;}
.utill .logo span{font-size: 12px; margin-left: 4px; position: relative; color: #4e4e4e;}
.utill .right-menu{float: right; }
.utill .right-menu li{display: inline-block; vertical-align: middle; margin-left: 12px;}

/*.intro*/
.intro{background-color: #FAFAFA; width: 100%; height: 100%; position: absolute; color: #fff; padding: 100px; background: url(../img/splash.svg)  no-repeat #fafafa;
background-size: 70% auto; background-position: center; text-indent: -9999px;}

/*怨듯넻 �젙蹂� 諛뺤뒪*/
.infoBox li{padding: 20px 12px; border: 1px solid #ddd; background-color: #fff; border-bottom: none;}
.infoBox li:last-child{border-bottom: 1px solid #ddd; }
.infoBox li > a{display: block;}
.infoBox li h5{font-size: 17px; font-weight: 500; color: #222; margin-bottom: 6px;}
.infoBox .detail p{position: relative;font-size: 15px; display: inline-block; margin-right: 8px; padding-right: 8px; color: #555;}
.infoBox .detail p:after{content: ""; display: block; width: 1px; height: 12px; background: #999; position: absolute; right: 0; top: 6px;}
.infoBox .detail p:last-child:after{display: none;}

/*main*/
.mainTop{background-image: url(../img/mainImg.svg) ; background-repeat: no-repeat; background-position: 96% center; background-size: 150px auto; background-color: #FAFAFA; padding: 50px 0;}
.mainTop .t1{color: #4C4CD3; font-weight: 500; font-size: 16px; word-break: keep-all;}
.mainTop .t2{font-size: 22px; font-weight:500; color: #000; margin: 10px 0; word-break: keep-all;}
.mainTop .t3{font-size:16px; font-weight: 400; word-break: keep-all; color: #555;}
.mainTop button{text-indent: -9999px; background-color: transparent; width: 40px; height: 40px; background-repeat: no-repeat; background: url(../img/arrow-right.svg); margin-top: 24px; background-position: center; background-repeat: no-repeat; background-size: 100% auto;}
.mainTop > div > div{display: inline-block; width: 49%; vertical-align: top; }
.mainTop .img{text-align: center; }
.mainBottom{ background-color: #fff;  box-shadow: 0 -17px 12px -6px rgba(0 0 0 / 5%); padding: 40px 0 30px 0;;}
.mainBottom .tit{padding-left: 28px; background-repeat: no-repeat; background-position: 0 center; font-size: 18px; font-weight: bold; color: #000; line-height: 24px; margin-bottom: 12px; background-size: 22px auto;}
.mainBottom .arti01 .tit{background-image: url(../img/main_icon01.svg);}
.mainBottom .arti01 .text{background: #F2FAFF; font-size: 16px; padding: 24px 12px; word-break: keep-all; font-weight: 400;}
.mainBottom .arti01{margin-bottom: 24px;}
.mainBottom .arti02{margin-bottom: 24px;}
.mainBottom .arti02 .tit{background-image: url(../img/main_icon02.svg);}
.mainBottom .arti02 ul{background-color: #f8f8f8; padding: 24px 12px; }
.mainBottom .arti02 ul:after{content: ""; display: block; clear: both;}
.mainBottom .arti02 ul li{height: 100px; background-color: #fff; border: 1px solid #e6e6e6; float: left; width: calc((100% - 10px) / 2); margin-right: 10px; margin-bottom: 5px; background-repeat: no-repeat; background-size: 80% 100%; background-position: center;;}
.mainBottom .arti02 ul li:nth-child(2n){margin-right: 0;}
.mainBottom .arti02 .part01{background-image: url(../img/partner01.svg);}
.mainBottom .arti02 .part02{background-image: url(../img/partner02.svg);}
.mainBottom .arti02 .part03{background-image: url(../img/partner03.svg);}
.mainBottom .arti03{padding: 24px 32px; border: 1px solid #dedede; background-color: #f5f5f5; font-size: 16px; word-break: keep-all; line-height: 1.5; text-align: center;}
.mainBottom .arti03 img{margin: 0 4px; }

/*�긽�꽭�럹�씠吏�*/
.infoWrap{background-color: #fafafa;}
.infoPage .medicine{margin-bottom: 32px;  padding: 12px; background-color: #fff;}
/*.infoPage .medicine .img{width: 60px; height: 60px; border-radius: 50%; border: 1px solid #ccc; background: url(../img/sample.png) no-repeat; background-size: 100% 100%; display: inline-block; vertical-align: middle;}*/
.infoPage .medicine .img img{width: 60px; height: 60px; object-fit: cover;}
.infoPage .medicine .desc{display: inline-block; width:calc(100% - 60px - 24px); margin-left: 20px; vertical-align: middle;}
.infoPage .medicine .desc > p{font-size: 20px; font-weight: 600; margin-bottom: 2px;}
.infoPage .medicine .desc > div img{max-width: 130px; vertical-align: middle;}
.infoPage .medicine .desc > div span{font-size: 14px; margin-left: 2px; font-size: 12px; color:#7A7A7A}
.infoPage .card{background-color: #fff; padding: 12px 16px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 12px;}
.infoPage .medicineInfo .img{display: inline-block; vertical-align: top; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;}
.infoPage .medicineInfo .img img{width: 100%; height: 100%; object-fit: cover;}
.infoPage .medicineInfo .desc{display: inline-block; margin-left: 12px; vertical-align: top; width:calc(100% - 5px - 16px);}
.infoPage .medicineInfo .desc > p{font-size: 16px; }
.infoPage .medicineInfo .desc > div > span{font-size: 14px; display: inline-block;}
.infoPage .medicineInfo .desc .btnWrap{margin-top: 8px;}

/*�긽�꽭�럹�씠吏�*/
.list > div{padding: 8px 4px; border-bottom: 1px solid #ddd; }
.list > div:last-child{border-bottom: none;}
.list > div > span{color: #4e4e4e; margin-bottom: 4px; display: block;}
.list > div >  p{font-size: 16px; word-break: keep-all;}

.banner{
    padding: 40px 12px 40px 130px; border: 1px solid #ddd;
    background-image: url(../img/mainImg.svg); background-repeat: no-repeat; background-size: 70px auto; background-position: 30px center; margin-top: 50px;
}
.banner > p > img{max-width: 50px}
.banner > p:first-child{margin-bottom: 4px;}
.banner > p > span{font-weight: bold; color: #000;}

/*tab*/
.tabWrap{border-bottom: none; margin-bottom: 4px;}
.tabWrap ul li{width: 50%; text-align: center;}
.tabWrap ul li a{display: block; padding: 12px 0; color: #fff; font-size: 16px; color: #4E4539; margin: 0; border-bottom: none; border-radius: 0; background-color: #f9f9f9; border: 1px solid #ccc;border-radius: 16px 16px 0 0;}
.tabWrap ul li a:hover{background-color: #f9f9f9; border: 1px solid #ccc;}
.tabWrap ul li.active>a, .tabWrap ul li.active>a:hover, .tabWrap ul li.active>a:focus{background-color: #4C4CD3; color: #fff;}
.tabWrap ul li.active a{background-color: #4C4CD3; color: #fff;}