/*메인슬라이드*/ #visual{position: relative;width: 100%; margin: 0 auto; border-radius: 10px; overflow: hidden; max-width: 1300px} #visual .swiper-slide{ background-repeat: no-repeat; background-position: 50%; background-size: cover;} #visual .slg{max-width: 1200px; width: 95%; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: 1.4em;} #visual .slg.left{text-align: left;} #visual .slg.center{text-align: center;} #visual .slg span{font-size: 1em; font-weight: 600;} #visual .slg h3{ font-weight: 300; font-size: 2em; line-height: 1.5em; letter-spacing: px} #visual .slg p{ opacity: 0.8; line-height: 1.6em;} #visual .slg a.slg_btn{display: inline-block; font-size: 0.8em; font-weight: 600; padding: 8px 20px; background:rgba(0,0,0,0.5); color: #fff; margin-top: 0px; text-shadow:none;} #visual .slg a.slg_btn i{margin-left: 10px;} #visual .swiper-button{max-width: 1200px; width: 95%; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10; } #visual .swiper-pagination{all:unset; position: relative; width: auto; background: rgba(0,0,0,0.5); color: #fff; padding: 4px 10px; border-radius: 60px; margin-right: 2px; position: absolute; bottom: 20px; left: 20px; z-index: 3} #visual .swiper-button-prev, #visual .swiper-button-next{all:unset; position: relative; width: auto; background: rgba(0,0,0,0.5); color: #fff; padding: 4px 10px; border-radius: 60px; margin-right: 2px;} #visual .swiper-button-prev, #visual .swiper-button-next{cursor: pointer;} #visual .swiper-button-prev:after, #visual .swiper-button-next:after{display: none;} #wrapper.index h4{text-align: center;/* display: flex; */align-items: center; justify-content: center; padding: 40px 0;} #wrapper.index h4 span{display: inline-blockblock; margin-bottom: 15px} @media screen and (max-width: 1400px) { #visual .slg, #visual .swiper-button{width: 95%;} } @media screen and (max-width: 1300px) { #visual{ border-radius:0px;} } @media screen and (max-width: 992px) { #visual .slg{font-size: 1.2em;} } @media screen and (max-width: 768px) {} @media screen and (max-width: 550px) { #visual .slg{font-size: 1em;} } .index .product_list li{width: calc((100% / 4) - 23px)!important; margin-right: 30px; margin-bottom: 40px; display: flex; cursor: pointer} .index .product_list li:hover{box-shadow: 0 0 15px #eee; border-radius: 10px; padding: 10px; background: #fff} .index .product_list .area_img {width: calc(30%); margin-bottom: 0} .index .area_text {width: calc(70%); padding: 10px} #idx_sale .product_list .area_img {width: calc(40%); margin-bottom: 0} #idx_sale .area_text {width: calc(60%);} #idx_new .product_list .area_img {width: calc(40%); margin-bottom: 0} #idx_new .area_text {width: calc(60%);} .index .product_list li:nth-child(4n){margin-right: 0!important;} .index .product_list .area_text .p_price u {font-size: 0.5em;} @media screen and (max-width: 768px) { .index .product_list{font-size: 0.9em;} .index .product_list li{width: calc((100% / 2) - 8px)!important; margin-right: 15px; margin-bottom: 40px;} .index .product_list li:nth-child(2n){margin-right: 0!important;} .index .product_list .area_text .p_name {margin-bottom: 0px;} .index .product_list .area_text .p_price u {display: none;} } /*login*/ .login {color: #000000; padding: 25px 0px 20px; border-radius: 5px; font-size: 1.4em; text-align: left; width: 75%;transition: background-color 500ms linear;} .login i {color: #30b8e2;margin-right: 15px; font-size: 2.75em} .login p {color: #000;margin-top: 10px; font-size: 1.2em} .login p storng {color: #30b8e2} .login h6 {color: #000;font-size: 0.8em} .login h6 span {color: #30b8e2} /*past_purchase*/ .past_purchase {color: #30e2a4;background-color: #e9fffb; padding: 25px 20px 20px; border-radius: 5px; font-size: 1.4em; text-align: center; width: 100%;transition: background-color 500ms linear;} .past_purchase:hover {background-color: #c6ffe9; transition: background-color 500ms linear;} .past_purchase a span {color: #000;margin-left: 10px; font-size: 1.2em; display: block; margin-top: 10px} .past_purchase a em {font-style: normal; position: relative; font-weight: 700} .past_purchase a em:before {position: absolute; top: -10px; left: 5px;content: "";display: inline-block;width: 6px;height: 6px;background: #30e298;border-radius: 50%;vertical-align: top;} .past_purchase a i {color: #30e2a4} /*간편구매*/ .quick_purchase {color: #30b8e2;background-color: #e9f6ff; padding: 25px 20px 20px; border-radius: 5px; font-size: 1.4em; text-align: center; width: 100%;transition: background-color 500ms linear;} .quick_purchase:hover {background-color: #c6e9ff; transition: background-color 500ms linear;} .quick_purchase a span {color: #000; margin-left: 10px; font-size: 1.2em; display: block; margin-top: 10px} .quick_purchase a em {font-style: normal; position: relative; font-weight: 700} .quick_purchase a em:before {position: absolute; top: -10px; left: 5px;content: "";display: inline-block;width: 6px;height: 6px;background: #30b8e2;border-radius: 50%;vertical-align: top;} .quick_purchase a span i {color: #30b8e2} @media screen and (max-width: 768px) { .index_panel .flex {flex-wrap: wrap; font-size: 0.9em} .index_panel .login {display: none} .index_panel .past_purchase {width: 50%} .index_panel .quick_purchase {width: 50%} } /*추천약재*/ #idx_drugs{background:#F8F4EB; padding: 50px 0; margin: 50px 0;} #idx_drugs .circle_list ul{display: flex; align-items: center; justify-content: center;} #idx_drugs .circle_list li{margin: 0 15px;} #idx_drugs .circle_list .area_img{width: 160px; height: 160px;} #idx_drugs .circle_list p{text-align: center; font-weight: 600; font-size: 1.1em; margin-top: 10px;} /*신상상품*/ #idx_new{background: #f6faff; padding: 50px 0;width: 95%; margin: 0 auto; border-radius: 10px; } /*할인상품*/ #idx_sale{padding: 50px 0; } @media screen and (max-width: 1200px) { #idx_drugs .circle_list ul{overflow-y: auto; padding-bottom: 20px;} } #idx_guide{ width: 95%; margin: 0 auto; border-radius: 10px; overflow: hidden;text-align: center; padding: 50px 0; color: #fff;} #idx_guide img {width: 200px;} #idx_guide h4{} #idx_guide p{font-size: 1.2em;line-height: 1.6em;margin-bottom: 20px; margin-top: 10px} /*약재초성검색*/ .index .sch_initial{display: block;padding: 10px 0 0;} .index .sch_initial > * {margin-bottom: 10px} @media screen and (max-width: 1200px) { .index .sch_initial{justify-content: left;} } /*비회원&첫구매자*/ #first00 { margin-bottom: 70px } #first00 img { max-width: 300px} #first00 .inr {text-align: center;padding: 50px 0 10px; border-radius: 10px; position: relative;margin-top: 50px; background: url("../img/main/mainbg.jpg") no-repeat; background-size: cover;background-color:#1a2a49; background-blend-mode: saturation } #first00.result .inr {padding: 50px 0; } #first00 h6 {font-weight: 600; font-size: 1.2em; letter-spacing: -0.5px;margin-bottom: 15px } #first00 h6 span {padding: 5px 10px; border-radius: 10px;background-color: #ffffff20;color: #fff; } #first00 h5 {letter-spacing: -2px;font-weight: 400;font-size: 3em;line-height: 1.5em;color: #fff;} #first00 p {letter-spacing: -2px;font-weight: 700;font-size: 3em;line-height: 1.5em;color: #fff;} #first00 p span { box-shadow: inset 0px -0.5em 0 0 rgba(48, 184, 226, 0.3)} #first00 p em {color: #30b8e2; font-style: normal} @media screen and (max-width: 1000px) { #first00 h5 {font-size: 2em;} #first00 p {font-size: 2em;} #first00 img { max-width: 200px} } @media screen and (max-width: 500px) { #first00 h6 { font-size: 1.05em;} #first00 h5 {font-size: 1.6em;} #first00 p {font-size: 1.6em;} #first00 img { max-width: 170px} } #first01 .drugs {width: 100%;height: 60px;} #first01 .drugs .swiper-slide {text-align: center;background: #fff0;display: flex;justify-content: center;align-items: center; font-weight: 800; font-size: 3em; line-height: 1.5em; } #first01 .drugs .swiper-slide span {color: #dedede; margin: 0 15px} #first01 .drugs .swiper-slide {opacity: 0.5; color: #666666} #first01 .drugs .swiper-slide-active {opacity: 1; color: #111111} #first01 .drugs .swiper-slide-active span {color: #30b8e2} #first01 .drugs .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;} #first01 {text-align: center;margin-top: 50px; padding-bottom: 50px; position: relative;} #first01 h6 {font-weight: 800; font-size: 1.2em; letter-spacing: -0.5px;margin-bottom: 15px } #first01 h6 span {padding: 5px 10px; border-radius: 10px;background-color: #30b8e2;border: 1px solid #30b8e2;color: #fff; } #first01 h5 {font-weight: 600; font-size: 2em; line-height: 1.5em; color: rgb(26, 42, 73);margin-bottom: 15px} #first01 p {letter-spacing: -2px;font-weight: 800; font-size: 3em; line-height: 1.5em; color: #1a2a49;/* position: absolute;bottom: 0px; left: 50%; transform: translateX(-50%); z-index: 2*/ } #first01 p span { box-shadow: inset 0px -0.5em 0 0 rgba(48, 184, 226, 0.21)} #first01 img {display: inline-block; height: 45px; margin-right: 5px } @media screen and (max-width: 1000px) { #first01 h5 {font-size: 2em;} #first01 .drugs .swiper-slide{font-size: 2em;} #first01 .drugs .swiper-slide span { margin: 0 10px} #first01 p {font-size: 2em;} } @media screen and (max-width: 500px) { #first01 h6 { font-size: 1.05em;} #first01 h5 {font-size: 1.6em;} #first01 .drugs .swiper-slide{letter-spacing: -2px; font-size: 1.6em;} #first01 p {font-size: 1.6em;} #first01 .drugs {height: 35px;} } #first02 { margin-bottom: 30px } #first02 .inr {border: 1px solid #eee6;padding: 20px; border-radius: 10px; /*box-shadow: 0 10px 25px 0 #afafaf;*/ position: relative; padding-top: 100px; margin-top: 50px; background: url("../img/main/paper.png") } #first02 .inr .clip {position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 200px} #first02 .compare {display: flex; align-items: flex-start; justify-content: space-between; position: relative; flex-wrap: wrap} #first02 .compare:after {content: ' '; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; mix-blend-mode: color-burn;border-right: 1px solid #1414148a} #first02 .compare > div {width: 49%;margin-bottom: 30px} #first02 .compare > div >h6 { border-radius: 0px;padding: 15px;font-weight: 800; font-size: 1.5em; letter-spacing: -1px;margin-bottom: 15px;border: 1px solid #475789;border-right: 0; border-left:0;color:#475789 } #first02 .compare > div >h6.st {color: #fff;background: #475789;} #first02 .compare > div >h6.or {mix-blend-mode: color-burn;border-color: #1414148a;color: #141414;} #first02 .info{mix-blend-mode: color-burn; } #first02 .info p { font-weight: 600; font-size: 1.15em; letter-spacing: -1px;margin-bottom: 15px; color:#181818; display: inline-block } #first02 .info h6 {text-align: center; font-weight: 600;padding: 30px 0; font-size: 2.5em;text-transform: uppercase;margin-bottom: 15px; color:#181818; border: 2px dashed #181818;border-right: 0; border-left:0; } #first02 > h1 {margin-top: 20px;text-align: center; font-weight: 600;padding: 30px 0; font-size: 2em;margin-bottom:0px; color:#000;line-height: 1.5em} #first02 > h1 i { font-size: 2em;} #first02 > h1 b { color:#132e9d;} #first02 .inr > h1 {;text-align: center; font-weight: 600;padding: 30px 0; font-size: 2.5em;margin-bottom:0px; color:#fff; background: #475789; line-height: 1.15em} #first02 .btn_list a {position: relative} #first02 .btn_list a .speech-bubble{animation:bounce-bubble 2s ease-in-out infinite;top: -50px;height: fit-content;left: 50%; transform:translate(-50%, 0);font-size: 13px;position:absolute;background:#fff;border:1px solid #ccc;padding:10px;border-radius:10px; width: 100%;max-width:500px;line-height: normal} #first02 .btn_list a .speech-bubble::after{content:'';position:absolute;bottom:-10px;left: 50%; transform: translateX(-50%);border-width:10px 10px 0;border-style:solid;border-color:#ccc transparent;} #first02 .box_red p { font-weight: 600; font-size: 1.35em; letter-spacing: -1px; color:#fff; display: inline-block } @keyframes bounce-bubble{0%,100%{transform:translate(-50%, 0);}50%{transform:translate(-50%, -10px);}} #first02 .main_list #drugs_list {display: grid;grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; position: relative} #first02 .main_list .none {text-align: center; padding: 20px 0 40px} #first02 .main_list .none p{font-size: 1.2em; padding-bottom: 5px} #first02 .main_list .none p i{font-size: 1.5em; padding-bottom: 5px} #first02 .drugs_list li div.flex {align-items: start!important;} #first02 .drugs_list li div.flex div.text-right {min-width: 15%} #first02 .drugs_list li div.flex div.text-right .p_price_2 em {color: #666; font-weight: 400; font-size: 0.8em; opacity: 0.7;margin-right: 5px} #first02 #listOpen {display: none} #first02 h5:has(#listOpen) ~ ul {display: block} #first02 h5:has(#listOpen.on) ~ ul {display: none} #first02 .drugs_list {background: #fff; padding: 15px} #first02 .drugs_list.or {background: #fff0; padding: 15px} #first02 .drugs_list.or .p_price { color: #858585} #first02 .drugs_list .p_price_2 { color: #132e9d} #first02 .drugs_list.st .p_price { color: #1a2a49; box-shadow: inset 0px 0.5em 0 0 rgba(48, 184, 226, 0.21)} #first02 .drugs_list h5 {font-size: 1.3em;font-weight: 700;margin-right: 20px; margin-bottom: 10px;} #first02 .drugs_list li {width: calc(100%); margin-bottom: -10px} #first02 .drugs_list li button + .area_text {margin-right: auto} #first02 .table table td {white-space: nowrap} #first02 .list_wrap .table_wrap.table table{ background: #fff0 ;border-bottom: 1px solid #1a2a49;} #first02 .list_wrap .table_wrap.table table input{ cursor: pointer} #first02 .list_wrap .table_wrap.table table input:read-only:hover{background: #00000020} #first02 .list_wrap .table_wrap.table table tr:nth-last-of-type(2) td{ border-bottom: 1px solid #1a2a49;} #first02 .list_wrap .table_wrap.table table tr:last-of-type td{ border-bottom: 2px solid #1a2a49; font-weight: 600} #first02 .list_wrap .table_wrap.table table p.temp {opacity: 0.3} #first02 .list_wrap .table_wrap.table table th { border-top: 2px solid #1a2a49;border-bottom: 2px solid #1a2a49;color: #1a2a49;background: #fff;} #first02 .list_wrap .table_wrap.table table .number_controller {margin: 0 auto;} #first02 .list_wrap div.table_total {padding: 15px; border: 2px solid #1a2a49; } #first02 .list_wrap div.table_total h5 {display: flex; align-items: center; color:#1a2a49; font-size: 1.25em} #first02 .list_wrap div.table_total h5.origin {color: #868686; margin-bottom: 10px} #first02 .list_wrap div.table_total h5.origin em {min-width: unset;} #first02 .list_wrap div.table_total h5.origin .txt_red {font-size: 1.2em;} #first02 .list_wrap div.table_total h5 > span:first-of-type {width: 200px;margin-right: auto;} #first02 .list_wrap div.table_total h5 em {min-width: 200px; display: inline-block; font-style: normal; text-align: right} #first02 .list_wrap h6.table_total {display: flex; align-items: center; padding: 15px; border: 2px solid #1a2a49; color:#1a2a49; font-size: 1.25em} #first02 .list_wrap h6.table_total > span:first-of-type {width: 200px;margin-right: auto;} #first02 .list_wrap h6.table_total em {min-width: 200px; display: inline-block; font-style: normal; text-align: right} .table_total:nth-child(2) {margin-top: 10px} .price-wrapper{ position: relative; display: inline-block;} .price-slash{position: relative; width: 100%; height: 0; border-top: 2px solid red; transform: rotate(-4deg); top: 12px; mix-blend-mode: color-burn} #first02 .btn_list {margin: 20px 0} #first02 + .btn_ani { max-width: 1300px; margin: 30px auto;transition: 0.5s; animation: mymove 5s infinite linear; color: #fff; background:repeating-linear-gradient(75grad, #1a2a4925 24%, #30b8e225 25%, #1a2a4925 70%, rgba(0,0,0,0) 100%),#1a2a49;} #first02 .list_wrap .table_wrap.table {padding-bottom: 0} #first02 .list_wrap .table_wrap.table thead th:last-of-type {background: #1a2a49; color: #fff } #first02 .list_wrap .table_wrap.table tbody tr td em {display: none} #first02 .list_wrap .total_table.table table{ background: #fff0 ;border-bottom: 0; border-top: 0} #first02 .list_wrap .total_table.table table th { border: 3px solid #fff0; background: rgba(0, 0, 0, 0.04)} #first02 .list_wrap .total_table.table table td { border: 0; font-weight: 800; font-size: 2em; letter-spacing: -1.5px; padding: 35px 0;border-bottom: 2px solid rgba(0, 0, 0, 0.04)} #ver2 #first02 {margin-bottom: 10px} @media screen and (max-width: 1000px) { #first02 .main_list #drugs_list {display: block} #first02 .drugs_list li { margin-bottom: 10px} #first02 .box_red p { font-size: 1.2em;} #first02 .inr {padding: 10px;} #first02 .list_wrap div.table_total h5 {flex-wrap: wrap;flex-direction: column; font-size: 1em; letter-spacing: -.9px} #first02 .list_wrap div.table_total h5.origin {flex-wrap: nowrap; flex-direction: unset} #first02 .list_wrap div.table_total h5 > span {width: 100% !important} #first02 .list_wrap div.table_total h5.origin > span {width: fit-content !important} #first02 .list_wrap div.table_total h5 > span:last-of-type {text-align: right} #first02 .list_wrap div.table_total h5 em {min-width: 50%;} #first02 .list_wrap h6.table_total {flex-wrap: wrap;flex-direction: column; font-size: 1em; letter-spacing: -.9px} #first02 .list_wrap h6.table_total > span {width: 100% !important} #first02 .list_wrap h6.table_total > span:last-of-type {text-align: right} #first02 .list_wrap h6.table_total em {min-width: 50%;} #first02 .list_wrap .table_wrap:before {opacity: 0.7;margin-top: 5px;} #first02 .list_wrap .table_wrap.table table {border-top: 0px!important;border-bottom: 0px!important;} #first02 .list_wrap .table_wrap.table thead {display: none;} #first02 .list_wrap .table_wrap.table tbody tr td em {display: inline-block;padding: 0px 5px;height: auto !important;font-size: 10px;margin-right:5px;font-weight: 800; opacity: 0.3} #first02 .list_wrap .table_wrap.table tbody tr {border: 1px dotted #cbcbcb;padding: 0px;border-radius: 0px; display: grid; grid-template-columns: repeat(auto-fill, minmax(50%, auto));align-items: center;justify-content: space-between;position: relative;background: #fff;margin-bottom: 15px;} #first02 .list_wrap .table_wrap.table tbody tr td{border: 0px;width: 100%;} #first02 .list_wrap .table_wrap.table tbody tr td:first-of-type {grid-column: 1/3;background: rgba(0, 0, 0, 0.1);text-align: left;padding: 5px 15px;} #first02 .list_wrap .table_wrap.table tbody tr td:first-of-type p {display: flex;justify-content: space-between;font-weight: 800;align-items: center;} #first02 .list_wrap .table_wrap.table tbody tr td:nth-of-type(2) {font-weight: 800;} #first02 .list_wrap .table_wrap.table tbody tr td:nth-of-type(4) {grid-column: 1/3;} #first02 .list_wrap .table_wrap.table tbody tr td:nth-of-type(4) .number_controller {margin: unset; margin-left: auto;} #first02 .list_wrap .table_wrap.table tbody tr td:nth-of-type(9) {grid-column: 1/3; background: #c5f3ff;} #first02 .list_wrap .total_table.table {flex-wrap: wrap} #first02 .list_wrap .total_table.table table td { font-size: 1.5em; } #first02 .list_wrap .table_wrap.table table tr:nth-last-of-type(2) td {border-bottom: 0px solid #1a2a49;} #first02 .list_wrap .table_wrap.table table tr:last-of-type {display: none} #first02 .btn_list {font-size: 0.7em} #first02 .btn_list a {padding: 10px 0} #first02 .list_wrap .total_table.table table {margin-top: 0} #first02 .btn_list a .speech-bubble{width: 300%; transform: unset; left: unset; right: 0} #first02 .btn_list a .speech-bubble::after{ transform: unset; left: unset; right: 10px} } #first02 .search{display: flex; align-items: center; justify-content: space-between; border-radius: 3px; border: 1px solid #1a2a49; height: fit-content; margin-bottom: 10px} #first02 .search form{width: 100%;display: flex; align-items: center; justify-content: space-between; } #first02 .search input{all: unset;width: 100%; line-height: 50px; padding: 0 20px;padding: 0 20px 0 10px; font-size: 1.05em!important; min-width: 400px;} #first02 .search button{font-size: 1.15em!important; background: #fff0 } #first02 #allDelete{ margin-bottom: 10px } #first02.result { margin-top: 150px } #first02.result .area_text {width: calc(100%)!important; justify-content: space-between;padding: 10px;margin-left: 0;} #first02.result button { transition: 0.5s; animation: mymove 5s infinite linear; background:repeating-linear-gradient(75grad, #1a2a4925 24%, #30b8e225 25%, #1a2a4925 70%, rgba(0,0,0,0) 100%),#1a2a49;} #first02 .down {text-align: center;padding: 30px 0 20px; border-radius: 2px; position: relative;margin-top: 10px; background: url("../img/main/mainbg.jpg") no-repeat; background-size: cover;background-color:#1a2a49; background-blend-mode: saturation } #first02 .down h6 {font-weight: 600; font-size: 1.2em; letter-spacing: -0.5px;margin-bottom: 10px } #first02 .down h6 span {padding: 5px 10px; border-radius: 10px;background-color: #ffffff20;color: #fff; } #first02 .down h5 {letter-spacing: -2px;font-weight: 400;font-size: 3em;line-height: 1.5em;color: #fff;} #first02 .down p {letter-spacing: -2px;font-weight: 700;font-size: 3em;line-height: 1.5em;color: #fff;} #first02 .down p em {color: #30b8e2; font-style: normal} #first02 .drugs_list .more {font-size: 1.2em;background: #f3f3f3; padding: 10px; padding-left: 32.50px; transition: all 0.1s ease} #first02 .drugs_list .more:hover {background: #cbcbcb; } #first02 .drugs_list .more:hover span {background: #cbcbcb; color: #000;border: 1px solid #666 } #first02 .drugs_list .more > i {font-size: 0.8em;opacity: 0.7} #first02 .drugs_list .more span {background: #fff; padding: 2.5px 5px; border-radius: 4px; border: 1px solid #cbcbcb } #first02.member.off {display: none} #first02.member {display: block} @keyframes mymove { 0% {background-position: 0px 0px;} 5% {background-position: 500px 0px;} 100% {background-position: 0px 0px;} } @media screen and (max-width: 1000px) { #first02 .compare > div {width: 100%; margin-bottom: 10px} #first02 .compare:after {display: none} #first02 #listOpen {display: inline-block} #first02 .search input{min-width: unset;} #first02 .btn_large{letter-spacing: -1px; font-size: 1.4em;} #first02 .info {flex-wrap: wrap;} #first02 .sch_initial {width: 100%;} } @media screen and (max-width: 500px) { #first00 .inr {margin-top: 15px;} #first02 > h1 {font-size: 1.5em;} #first02 .inr > h1 {font-size: 1.5em;line-height: 1.25em; margin-top: 80px} #first02 .info h6 {font-size: 1.5em;line-height: 1.25em} #first02 .down h6 { font-size: 1.05em;} #first02 .down h5 {font-size: 1.6em;} #first02 .down p {font-size: 1.6em;} #first02 .info p {font-size: 1em;} } .fixed.main .btn_ani { transition: 0.5s; animation: mymove 5s infinite linear; color: #fff; background:repeating-linear-gradient(75grad, #1a2a4925 24%, #30b8e225 25%, #1a2a4925 70%, rgba(0,0,0,0) 100%),#1a2a49;} .fixed.main {transition: all 0.3s ease} .fixed.main .drugs_cart .cart_list ul{max-height: 350px; } .fixed.main .drugs_cart{border: 1px solid #1a2a49;background: #fff; border-radius: 10px; padding: 30px 25px; width: 700px;} .fixed.main .drugs_cart .total {max-width: unset;}/* .fixed.main .drugs_cart ul:has(li:nth-child(2)) li:first-of-type {display: none}*/ .fixed.main .drugs_cart li > p.p_price {font-weight: 800} .fixed.main .drugs_cart li > p.p_price_2 {display: none} .fixed.main .drugs_cart li > div.price {display: flex; margin-left: auto; gap: 10px; margin-right: 10px} .fixed.main .drugs_cart li > div.price .ori {font-weight: 600;display: none; } .fixed.main .drugs_cart li > div.price .ori em {font-weight: 400; font-size: 0.8em; opacity: 0.7;margin-right: 5px} .fixed.main .drugs_cart li > div.price .now {font-weight: 800; } .fixed.main .drugs_cart .liProducts {padding-top:0px} .fixed.main .prodPriceDisplay2 {text-decoration: line-through} .fixed.main .total_price {gap: 0px;} .fixed.main .total_price > div:first-of-type {display: none} .fixed.main .total_price > * {width: calc( 100% );display: flex; justify-content: space-between; align-items: center} #drugs_list_cons_modal .p_price {text-align: right; color: #1a2a49; font-weight: 600; font-size: 1.15em} body:has(.index) {position: relative;height: fit-content;} div#wrapper.index {position: relative;height: fit-content;} div#wrapper.index .main_hide {display: none!important;} #loading {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to bottom, #133187, #0000007a); transition: all 0.3s ease; z-index: 999; backdrop-filter: blur(5px)} #loading >div {position: sticky;top: 50%;transform: translate(0, -50%);text-align: center; color: #fff; font-size: 1.35em} #loading >div h4{font-size: 2em;font-weight: 800;padding: 0px 0 20px} #loading >div p{padding-bottom: 20px} #loading >div i{font-size: 1.5em;} .loading {display: flex;justify-content: center;} .loading div {/*width: 2rem;height: 2rem;background: #fff;border-radius: 50%;*/ margin: 2rem 1rem;animation: 0.9s bounce infinite alternate;} .loading div:nth-child(2) {animation-delay: 0.3s;} .loading div:nth-child(3) {animation-delay: 0.6s;} div#drungChecked{position: absolute;text-align: center;width: 100%;height: 100%;background: #ffffffc7;backdrop-filter: blur(1px);z-index: 1;display: flex;align-items: center;justify-content: center;} div#drungChecked p{font-weight: 600; font-size: 1.5em} @keyframes spinspin { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @keyframes bounce { to { opacity: 0.3; transform: translate3d(0, -1rem, 0); } } /*의약품 2 index2*/ #user { margin-bottom: 70px } #user .inr {align-items: flex-start; flex-wrap: wrap} #user .inr > section {width: 49%; margin-bottom: 30px} #user .inr > section > div { border-radius: 2px; padding: 15px} #user.ver2 .inr > section > div { min-height: 800px; max-height: 800px; overflow-y: hidden; overflow-x: hidden} #user.ver2 .inr > section:last-of-type > div .drugs_list ul { min-height: 600px; max-height: 600px; overflow-y: scroll; padding-right: 15px; display: block} #user.ver2 .inr > section:last-of-type .drugs_list button.delete { cursor: pointer;min-width: 25px; width: 25px; height: 42.6px; border-color: #fff0 !important; background: rgb(64, 64, 66) !important; border-radius: 2px; color: #fff} #user.ver2 .inr > section:last-of-type .drugs_list input[type="checkbox"] {display: none} #user.ver2 .inr > section:last-of-type .drugs_list input[type="checkbox"]:checked + label .p_name:before {display: none} #user .inr > section:first-child > div { max-height:680px; overflow-y: scroll; } #user.ver2 .inr > section > div .drugs_list ul .empty { padding: 20vh 0; text-align: center} #user.ver2 {margin-bottom: 0;} #user.ver2 .inr {padding-bottom: 0} #user .inr > section:first-child > div {background: #f8fcff; border: 1px solid #ebf1f6} #user .inr > section:last-child > div {background: #f8f9ff;border: 1px solid #e9ebf6} #user .inr > section:last-child > div .btn_large {margin-bottom: 15px;} #user .inr > section > h6 {font-weight: 700;font-size: 1.6em;letter-spacing: -0.5px;margin-bottom: 15px;} #user .sch_initial {padding: 0 0 10px} #user #drugs_list_recent_modal > .flex {padding: 0 0 10px} #user .drugs_list li {width: calc(100%); margin-bottom: 10px;} #user .drugs_list .p_price { font-size: 1.25em;letter-spacing: -1px; } #user .area_text {align-items: center;width: calc( 100% - 50px );justify-content: flex-start;margin-left: 0!important;} #user .area_text div {margin-right: auto;} #user .p_date {line-height: 1.3;;min-width: 85px;margin-right: 10px;} #user .p_date span {color: #30b8e2; font-weight: 800;} #user .sub strong {margin: 0 10px} #user .sub {padding: 15px 0;height: 47px;font-size: 1.1em;} #user .sch_initial a {padding: 2px 5px;} #user .search{background: #fff;display: flex; align-items: center; justify-content: space-between; border-radius: 3px; border: 1px solid #1a2a49; height: fit-content; margin: 10px 0} #user .search form{width: 100%;display: flex; align-items: center; justify-content: space-between; } #user .search input{all: unset; line-height: 50px; padding: 0 20px;padding: 0 20px 0 10px; font-size: 1.05em!important;min-width: 400px; width: 100%} #user .search button{font-size: 1.15em!important; background: #fff0 } #user .search + button{margin-bottom: 15px } #user.search #drugs_list {max-height: 60vh; overflow-y: auto} #user #allDelete{ margin-bottom: 10px } #user.ver2 .sub {font-size: 1.1em;background: #fff;padding: 10px;margin-bottom: 15px;} #user .drugs_count.on {display: block!important;} #user .drugs_count {display: none!important;} #user .drugs_count button{border-radius: 20px;font-size: 1.2em; padding: 10px; box-shadow: 0px 5px 10px #00000029;} #user .drugs_count button h5{font-size: 0.85em; margin: 0 0 10px; font-weight: 800;} #user .drugs_count button p{font-size: 1em;font-weight: 800; display: inline-block} #user .drugs_count button i{font-size: 1.2em; } #user .drugs_count button p span { padding: 0px 5px; color: #337ab7; background:#fff; border-radius: 50px; } #user .drugs_cart {display: none!important;} #user .drugs_cart.on {display: block!important;} #user .fixed.v2 .drugs_cart {background: #fff;padding: 20px 25px;width: 500px;} #user .fixed.v2 .drugs_cart .btn_sky {min-width: 50px; width: 50px;} #user #listOpen1, #user #listOpen2 {display: none; font-size: 0.7em} #user h6:has(#listOpen1) ~ div, #user h6:has(#listOpen2) ~ div {display: block} #user h6:has(#listOpen1.on) ~ div, #user h6:has(#listOpen2.on) ~ div {display: none} .more_modal .search{display: flex; align-items: center; justify-content: space-between; border-radius: 3px; border: 1px solid #1a2a49; height: fit-content; margin: 10px 0} .more_modal .search form{width: 100%;display: flex; align-items: center; justify-content: space-between; } .more_modal .search input{width: calc(100% - 50px) !important;all: unset; line-height: 50px; padding: 0 20px;padding: 0 20px 0 10px; font-size: 1.05em!important; } .more_modal .search button{font-size: 1.15em!important; background: #fff0 } .more_modal .drugs_list {gap: 10px; display: flex;flex-wrap: wrap} .more_modal .drugs_list li{width: calc( ( 100% - 30px ) / 3 ) !important; margin-bottom: 0;} .more_modal .drugs_list .p_price {font-size: 1.25em;letter-spacing: -1px;} .more_modal .box {padding: 10px 15px!important;} .more_modal div> .txt_blue {margin-bottom: 10px} .more_modal .basic .p_name {font-size: 1.3em;font-weight: 600;}/* .more_modal .basic {margin-bottom: 15px}*/ .more_modal .cart_list{padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.05);} .more_modal .cart_list h5{margin-bottom: 10px;} .more_modal .cart_list ul{max-height: 120px; overflow-y: auto; padding-right: 0px; } .more_modal .cart_list li{padding: 4px 0; border-bottom: 1px dotted rgba(0,0,0,0.1); border-top: 0} .more_modal .cart_list li:last-child{border-bottom: 0;} .more_modal .cart_list li .div_pro{display: flex; align-items: center; width: calc(100% - 500px);} .more_modal .cart_list li p.p_name{text-align: left; width: 100%;font-weight: 700;display:inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; white-space: nowrap;} .more_modal .cart_list li p.p_price{width: fit-content} .more_modal .cart_list li p.p_price2{width: fit-content; font-weight: 700;display: flex; align-items: center; justify-content: right; white-space: nowrap} .more_modal .cart_list li span{display: flex; align-items: center; justify-content: space-between;} .more_modal .cart_list li > span:nth-child(1){font-size: 1.1em; margin-bottom: 5px; padding: 5px 0} .more_modal .cart_list li > span:nth-child(2){justify-content: flex-end;} .more_modal .cart_list li > p.p_price2{width: 100px;text-align: right; font-weight: 700;display: flex; align-items: center; justify-content: right;} .more_modal .cart_list a {padding: 0!important;} .more_modal .number_controller {height: fit-content;width: 80px;justify-content: space-between;padding: 0 5px;} .more_modal .number_controller button{width: 20px; height: 25px; font-size: 0.8em} .more_modal .number_controller input[type=number] {height: 25px} #drugs_list_recent_modal input[type="date"]:before { content: attr(data-placeholder); width: 100%; } #drugs_list_recent_modal input[type="date"]:focus:before, #drugs_list_recent_modal input[type="date"]:valid:before { display: none; } @media screen and (max-width: 1200px) { #user .search input {min-width: unset;} #user .sch_initial {width: 100%;} .more_modal .drugs_list li{width: calc( ( 100% - 20px ) / 2 ) !important;} } @media screen and (max-width: 1000px) { #user .inr > section {width: 100%;margin-bottom: 30px} #user .fixed.v2 .drugs_cart {width: 100%} #user .drugs_count {margin: 15px;text-align: right;} #user #listOpen1, #user #listOpen2 {display: inline-block} } @media screen and (max-width: 992px) { .fixed.main .drugs_cart {border: 0px} } @media screen and (max-width: 750px) { .more_modal .drugs_list li {width: calc(100%) !important;} #drugs_list_recent_modal > .flex {flex-wrap: wrap} #drugs_list_recent_modal > .flex > strong {width: 100%} #drugs_list_recent_modal input[type="checkbox"] + label {flex-wrap: wrap;} #user #drugs_list_recent_modal .area_text {display: flex!important; width: 100% !important} #user #drugs_list_recent_modal .area_text .p_date {display: flex!important;gap: 5px } #user #drugs_list_recent_modal .area_text .p_date br{display: none!important; } #user #drugs_list_recent_modal .p_price{border-top: 0!important; margin-top: 0px!important; padding-top: 0!important;margin-left: auto} } @media screen and (max-width: 550px) { #user .area_text {flex-wrap: wrap} #user .drugs_list li {align-items: flex-start;} #user .area_text {padding: 0 10px 10px; text-align: right} #user .area_text div {margin-left: 0px;} #user .drugs_list .p_price {text-align: right;} #user .p_date {width: 100%;} #user .p_date span {margin-right: 0px} #user .p_date span:after {content: '|';display: inline-block;margin-left: 5px;color: #555;opacity: 0.3;} #user .p_date span:after {display: none} #user .drugs_list input[type="checkbox"] + label {align-items: flex-start;margin-bottom: 0px;height: calc( 100% - 6px );} #user .drugs_list .area_img {height: 100%; aspect-ratio: unset;} #user .area_img img {height: 100%;} .fixed.main .btn_wrap {font-size: 0.8em;flex-wrap: wrap;} } #user .drugs_list .more:hover span {background: #cbcbcb; color: #000;border: 1px solid #666 } #user .drugs_list .more > i {font-size: 0.8em;opacity: 0.7} #user .drugs_list .more span {background: #fff; padding: 2.5px 5px; border-radius: 4px; border: 1px solid #cbcbcb } .examSwiper .nav-tabs{position: relative;justify-content: center;gap: 10px;max-width: 1300px; margin: 0 auto 0px; display: flex; align-items: flex-start; padding: 20px 20px 0; overflow: hidden; background: #ffffff;border-radius: 10px 10px 0 0;} .examSwiper .nav-tabs{border-bottom: 0;bottom: 0;} .examSwiper .nav-tabs>li.swiper-pagination-bullet-active>a { background: #f7f8fb} .examSwiper .nav-tabs>li>a span { background: #fff; padding: 2px 5px; border-radius: 5px} .examSwiper .nav-tabs>li.swiper-pagination-bullet-active>a span { background:#10419c; color: #ffff; } .examSwiper .nav-tabs>li>a { background: #d7d7d7;border: 0!important; font-weight: 800} .examSwiper .nav-tabs>li:hover>a {border: 0!important;} .examSwiper .swiper-pagination-bullet {height: fit-content;width: fit-content; background: #fff0; margin: 0!important;} .contsTitle{max-width: 1300px; margin:80px auto 0px;padding: 20px 20px;background: #fff;border-radius: 10px 10px; position: relative; text-align: center} .contsTitle h2{font-size: 1.2em;margin-bottom: 20px; opacity: 0.35} .contsTitle h1 {font-size: 3.2em;font-weight: 800;margin-bottom: 50px;} .contsTitle h3 {font-size: 3.2em;font-weight: 800;margin-bottom: 0px; color: #10419c} .contsTitle.member {margin-top: 50px} #ver2 .contsTitle{max-width: 1300px; margin:30px auto 0px;padding: 0px 20px;background: #fff;border-radius: 10px 10px; position: relative; text-align: center} #ver2 .contsTitle h2{font-size: 1.05em;margin-bottom: 5px; opacity: 0.35} #ver2 .contsTitle h1 {font-size: 1.75em;font-weight: 800;margin-bottom: 5px;} #ver2 .contsTitle h3 {font-size: 1.5em;font-weight: 800;margin-bottom: 0px; color: #10419c} #ver2 .contsTitle.member {margin-top: 50px} .contsBtn .btn_ani { border-radius: 10px; font-size: 1.5em;position: relative;transition: 0.5s; animation: mymove 5s infinite linear; color: #fff;background:repeating-linear-gradient(75grad, #1a2a4925 24%, #30b8e225 25%, #1a2a4925 70%, rgba(0,0,0,0) 100%),#1a2a49;} .contsBtn{background:linear-gradient(to top, #f7f8fb, transparent);padding: 20px 20px; position: relative; text-align: center} .contsBtn button {max-width: 1300px; margin: 0 auto 0px;} .contsBtn button .tooltip {font-family: 'SUIT', sans-serif;margin-left: 0!important;background: #f1f1f5;bottom: 100%;color: #000000;display: block;left: 50%;margin-bottom:0px;opacity: 0;padding: 10px 20px; font-weight: 600;pointer-events: none;position: absolute;width: fit-content;transform: translate(-50%,5px)!important;transition: all .25s ease-out;box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); font-size: 0.9em} .contsBtn button .tooltip:before {bottom: -20px;content: " ";display: block;height: 20px;left: 0;position: absolute;width: 100%;} .contsBtn button .tooltip:after {border-left: solid transparent 10px;border-right: solid transparent 10px;border-top: solid #f1f1f5 10px;bottom: -8px; content: " ";height: 0;left: 50%;margin-left: -13px;position: absolute;width: 0;} .contsBtn button .tooltip {visibility: visible;opacity: 1;pointer-events: auto} .contsBtn {padding-bottom: 15vh} #wrapper:has(.contsBtn) ~ #contact {margin-top: 0!important;} #ver2 .contsBtn{background:#fff;padding: 20px 20px; position: relative; text-align: center} .contsBtn2 {position: relative; min-height: 50px} .contsBtn2 .btn_ani { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);border-radius: 10px; font-weight: 700;font-size: 1.5em; transition: 0.5s; animation: mymove2 1.5s infinite linear, mymove3 1.5s infinite linear; background: radial-gradient(#1e1e1e, #464646); display: flex; align-items: center; justify-content: center; border: none; border-bottom: 10px solid #000; color: #fff; gap: 10px; padding: 20px 30px} .contsBtn2 .btn_ani span { color: #000; background: #fff; padding: 0 10px; border-radius: 50px; font-size: 14px; height: fit-content; margin-left: auto} .contsBtn2 .btn_ani i.fa-hand-pointer {transform: rotate(-35deg); font-size: 1.5em; margin-top: 5px; text-shadow: 0 0 10px #000000c7} @keyframes mymove2 { 0% {margin-top: 4px; border-bottom-width: 10px;} 50% {margin-top: 10px; border-bottom-width: 4px;} 75% {margin-top: 10px; border-bottom-width: 0px;} 100% {margin-top: 4px; border-bottom-width: 10px;} }/* @keyframes mymove3 { 0% {background: radial-gradient(#475082, #414d8e, #263274) no-repeat #263274} 50% {background: radial-gradient(#8693d0, #414d8e, #263274) no-repeat #263274} 100% {background: radial-gradient(#475082, #414d8e, #263274) no-repeat #263274} }*/ .contsBtn2{ padding: 00px 20px; position: relative; text-align: center} .contsBtn2 .btn_wrap {max-width: 1300px; margin: 60px auto 0px;position: relative} .contsBtn2 .btn_wrap:before { content: ''; position: absolute; left: -2px; top: -2px; background: linear-gradient(45deg, #00d8fb, #00ff97, #064898, #0089ff, #00c4ff, #00e2fb, #0600ff, #198aff, #00adff, #201797); background-size: 200%; width: calc(100% + 4px); height: 30px; z-index: -1; filter: blur(40px); max-width: 1700px; animation: steam 20s linear infinite;} @keyframes steam { 0% { background-position: 0 0; } 50% { background-position: 400% 150% ; } 100% { background-position: 0 0; } } .contsBtn2 button .tooltip {font-family: 'SUIT', sans-serif;margin-left: 0!important;background: #ffffff;bottom: 100%;color: #000000;display: block;left: 20px;margin-bottom:0px;opacity: 0;padding: 10px 20px; font-weight: 600;pointer-events: none;position: absolute;width: fit-content;transform: translate(0%,5px)!important;transition: all .25s ease-out;box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.15); font-size: 0.7em} .contsBtn2 button .tooltip:before {bottom: -20px;content: " ";display: block;height: 20px;left: 0;position: absolute;width: 100%;} .contsBtn2 button .tooltip:after {border-left: solid transparent 10px;border-right: solid transparent 10px;border-top: solid #ffffff 10px;bottom: -8px; content: " ";height: 0;left: 50%;margin-left: -13px;position: absolute;width: 0;} .contsBtn2 button .tooltip {visibility: visible;opacity: 1;pointer-events: auto} .contsTable{max-width: 1300px; margin: 0 auto 0px;padding: 20px 20px;background:linear-gradient(to bottom, #f7f8fb, transparent);border-radius: 10px 10px; box-shadow: 0 10px 20px #f7f8fb; position: relative} .contsTable table{font-size: 1.2em} .contsTable table tr td:last-child{color: #2e6da4; font-weight: 600} .contsTable table tr:nth-child(odd) td{background: rgba(247, 248, 251, 0.35)} .contsTable table tr:hover td{background: rgba(247, 248, 251)!important;} .contsTable {overflow-y: auto; width: 100%} #ver2 .contsTable {max-width: 1300px; margin: 0 auto 0px;padding: 10px;background:linear-gradient(to bottom, #f7f8fb, transparent);border-radius: 10px 10px; box-shadow: 0 10px 20px #f7f8fb; position: relative} #ver2 .contsTable table {margin-top: 0;font-size: 1.2em} #ver2 .contsTable table tr th {padding: 5px 10px} #ver2 .contsTable table tr td:last-child{color: #2e6da4; font-weight: 600} #ver2 .contsTable table tr:nth-child(odd) td{background: rgba(247, 248, 251, 0.35)} #ver2 .contsTable table tr:hover td{background: rgba(247, 248, 251)!important;} #ver2 .contsTable {overflow-y: auto; width: 100%} .contsBanner{max-width: 1300px; margin: 0 auto 0px;padding: 20px 0px 40px;border-radius: 10px; overflow: hidden; position: relative} .contsBanner .swiper-slide{height: 250px;} .contsBanner img{border-radius: 10px; overflow: hidden; position: relative; width: 100%; height: 250px; object-fit: cover} .contsLink{z-index: 12;position: relative;max-width: 1300px; margin: -50px auto 140px; display: flex; align-items: flex-start; padding: 50px 0 0; overflow: hidden;border-radius: 10px} .contsLink button i{font-size: 1.5em;} .contsLink button{border-radius: 10px; font-size: 1.2em; display: flex;justify-content: space-between;padding: 15px;align-items: center;} .contsLink button:nth-of-type(1) {background: #00d3ac; color: #fff} .contsLink button:nth-of-type(2) {background: #0094d3; color: #fff} .contsLink button:nth-of-type(3) {background: #be00d3; color: #fff} .contsArea{max-width: 1300px; margin: 0 auto 0px; display: flex; align-items: flex-start; padding: 50px 0;background: #f7f8fb; overflow: hidden;border-radius: 10px} .contsArea dl{padding: 0 50px;position: relative;text-align: center; width: 100%} .contsArea dl:not(:last-child):after{content: ""; display: inline-block; width: 1px; height: 60%; background-color: #eee; position: absolute; right: 0; bottom: 0;} .contsArea .icon{text-align: center; margin-bottom: 30px;} .contsArea .icon i{font-size: 5em; color: #10419c; cursor: pointer} .contsArea dt{font-size: 2.3em;font-weight: 800;margin-bottom: 10px;} .contsArea dd{font-size: 1.2em;margin-top: 15px;} .contsArea dd strong{display:block;font-size: 1.2em; margin-bottom: 4px;} #ver2 .contsArea{max-width: 1300px; margin: 0 auto 0px; display: flex; align-items: flex-start; padding: 15px 0;background: #f7f8fb; overflow: hidden;border-radius: 10px} #ver2 .contsArea dl{padding: 0 25px;position: relative;text-align: left; width: 100%} #ver2 .contsArea dl:not(:last-child):after{content: ""; display: inline-block; width: 1px; height: 60%; background-color: #eee; position: absolute; right: 0; bottom: 0;} #ver2 .contsArea .icon{text-align: center; margin-bottom: 0px; margin-right: 5px; display: inline-block} #ver2 .contsArea .icon i{font-size: 1em; color: #10419c; cursor: pointer} #ver2 .contsArea dt{font-size: 1.5em;font-weight: 800;margin-bottom: 0px;} #ver2 .contsArea dd{font-size: 1em;margin-top: 0px;} #ver2 .contsArea dd strong{display:inline-block;font-size: 1em; margin:0 4px;} .contsArea.member {margin-top: 20px; margin-bottom: 0px} .contsArea.member .icon i{cursor: none} .counterareabg{ max-width: 1300px;margin: 0 auto 70px;padding-top: 50px;} .counterareabg div{ display: flex;align-items: flex-start;} .counterareabg span.title{ font-size:1.75em; font-weight:bold; text-align:center; margin:0px 0px 50px !important; display:inline-block; width:100%} .counterareabg span.title span{ font-size:0.75em; font-weight:bold; padding: 5px 10px; border-radius: 50px;color: #2e6da4; background: rgba(46, 109, 164, 0.06); letter-spacing: -.5px} .counterareabg span.counter{ font-size:4.0em; font-weight:bold; text-align:center; margin:0px !important; display:inline-block; width:100%} .counterareabg:after{content:"";display:block;clear:both;} .scroll_comm { display: none; } @media screen and (max-width: 1300px) { .contsTable table {margin-top: 0!important;} } @media screen and (max-width: 1200px) { .contsTitle{ margin-top: 30px; padding-bottom: 0} .contsArea{display: block;border-radius: 0 0 15px 15px;font-size: 0.8em; padding:25px 0;background: #edeff140} .contsArea .icon {margin-bottom: 0px;} .contsArea .icon i {color: #51c1eb;} .contsArea div {color: #1a2a49;} .contsArea dl {display: flex;flex-wrap: wrap; text-align: left; align-items: center; padding: 0 20px } .contsArea dd {margin-top: 5px; display: flex; gap: 2.5px} .contsArea p {margin-right: 15px; width: 70px} .contsArea div {width: calc(100% - 85px); white-space: nowrap} .contsArea dd strong{display: inline-block; font-size: 1em;} .contsArea dl:not(:last-child):after{display: block;width: 100%;height: 1px;position: relative;margin: 10px 0;} #ver2 .contsArea {border-radius: 0} #ver2 .contsArea dt {text-align: center; letter-spacing: -1.5px} #ver2 .contsArea .icon {width: fit-content; margin-right: 2px;} #ver2 .contsArea dl {padding: 0; display: block} #ver2 .contsArea dl div {width: 100%} #ver2 .contsArea dd{display: none} #ver2 .contsArea dl:not(:last-child):after {display: none} .contsBtn2 {min-height: 80px;padding-top: 20px} .contsBtn2 .btn_wrap {margin-top: 20px} .contsBtn2 button .tooltip {display: none} .examSwiper .nav-tabs {padding: 20px 0 0; text-align: center; letter-spacing: -.5px} .examSwiper .nav-tabs>li>a {padding:10px } .examSwiper .nav-tabs>li>a span {display: inline-flex} } @media screen and (max-width: 1000px) { .contsArea .icon i {font-size: 3.5em;} .scroll_comm{ display:block; margin:0px 0 10px; font-weight:600;text-align: center;position: sticky;top: 0;left: 0;} .counterareabg {display: flex; margin-bottom: 10px} .counterareabg div {display: block} .counterareabg span.title{font-size: 1.25em;padding: 0 10px;text-align: left;padding-left: 20px;margin: 0px 0px 20px !important; } .counterareabg span.counter{font-size: 2em;text-align: right;padding-right: 20px;margin: 0px 0px 20px !important;letter-spacing: -.5px } .counterareabg span.title span {display: inline-flex; margin-top: 05px} .contsBtn button .tooltip {font-size: 0.7em} .contsTitle h2{font-size:1.2em!important; line-height: 1.25em;margin-bottom: 10px;} .contsTitle h1 {font-size: 2.25em; line-height: 1.25em;margin-bottom:25px;} .contsTitle h3 {margin-bottom:25px;} .contsLink {flex-wrap: wrap} .contsLink button{margin: 0!important;} .contsLink button:first-of-type {width: 100%} .contsLink button:not(:first-of-type) {width: 100%} .contsBanner {padding-bottom: 0;} .contsBanner .swiper-slide{height: 200px;} .contsBanner img{ height: 200px; border-radius: 0} } @media screen and (max-width: 500px) { .contsArea {font-size: 0.65em;} .contsArea.member {margin-top: 0px} .contsArea p {margin-right: 5px; width: 50px} .contsArea dt { font-size: 1.75em; margin-bottom: 0} .contsArea dd {flex-wrap: wrap; justify-content: right} .contsArea div {width: calc(100% - 55px); white-space: unset; text-align: right} .contsArea div strong { width: 100%; margin-bottom: 0} .contsLink button{font-size: 1em} .contsTab .nav-tabs {gap: 5px;} .contsTab .nav-tabs>li>a {white-space: nowrap} .contsTab .nav-tabs>li>a span{display: block; margin-top: 05px; text-align: center} .contsTable table {font-size: 1em} } #estimate .board_view {margin-top: 25px} #estimate .board_view .table table td {white-space: nowrap} #estimate .board_view .list_wrap .table_wrap.table table{ background: #fff0 ;border-bottom: 1px solid #1a2a49;} #estimate .board_view .list_wrap .table_wrap.table table tr:nth-last-of-type(2) td{ border-bottom: 1px solid #1a2a49;} #estimate .board_view .list_wrap .table_wrap.table table tr:last-of-type td{ border-bottom: 2px solid #1a2a49; font-weight: 600} #estimate .board_view .list_wrap .table_wrap.table table p.temp {opacity: 0.3} #estimate .board_view .list_wrap .table_wrap.table table th { border-top: 2px solid #1a2a49;border-bottom: 2px solid #1a2a49;color: #1a2a49;background: #fff;} #estimate .board_view .list_wrap .table_wrap.table table .number_controller {margin: 0 auto;} #estimate .board_view .list_wrap .table_total {display: flex; align-items: center; padding: 15px; border: 2px solid #1a2a49; color:#1a2a49; font-size: 1.25em} #estimate .board_view .list_wrap .table_total > span:first-of-type {width: 200px;margin-right: auto;} #estimate .board_view .list_wrap .table_total em {min-width: 200px; display: inline-block; font-style: normal; text-align: right} #estimate .board_view .list_wrap .btn_ani {transition: 0.5s; animation: mymove 5s infinite linear; color: #fff; background:repeating-linear-gradient(75grad, #1a2a4925 24%, #30b8e225 25%, #1a2a4925 70%, rgba(0,0,0,0) 100%),#1a2a49;} #estimate .board_view .list_wrap .table_wrap.table {padding-bottom: 0} #estimate .board_view .list_wrap .table_wrap.table thead th:last-of-type {background: #1a2a49; color: #fff } #estimate .board_view .list_wrap .table_wrap.table tbody tr td em {display: none} #estimate .board_view .list_wrap .total_table.table table{ background: #fff0 ;border-bottom: 0; border-top: 0} #estimate .board_view .list_wrap .total_table.table table th { border: 3px solid #fff0; background: rgba(0, 0, 0, 0.04)} #estimate .board_view .list_wrap .total_table.table table td { border: 0; font-weight: 800; font-size: 2em; letter-spacing: -1.5px; padding: 35px 0;border-bottom: 2px solid rgba(0, 0, 0, 0.04)} #mediRequest {width: 100%!important;text-align: center; font-size: 2em; padding: 50px;} #mediRequest button{margin-top: 25px; font-size: 15px;} #mediRequest i{margin-bottom: 15px;font-size: 2em;opacity: 0.2;} @media screen and (max-width: 1000px) { #estimate .board_view .boxline {padding: 10px;} #estimate .board_view .drugs_list li { margin-bottom: 10px} #estimate .board_view .box_red p { font-size: 1.2em;} #estimate .board_view .list_wrap .table_total {flex-wrap: wrap;flex-direction: column} #estimate .board_view .list_wrap .table_total > span {width: 100% !important} #estimate .board_view .list_wrap .table_total > span:last-of-type {text-align: right} #estimate .board_view .list_wrap .table_total em {min-width: 50%;} #estimate .board_view .list_wrap .table_wrap:before {opacity: 0.7;margin-top: 5px;} #estimate .board_view .list_wrap .table_wrap.table table {border-top: 0px!important;border-bottom: 0px!important;} #estimate .board_view .list_wrap .table_wrap.table thead {display: none;} #estimate .board_view .list_wrap .table_wrap.table tbody tr td em {display: inline-block;padding: 0px 5px;height: auto !important;font-size: 10px;margin-right:5px;font-weight: 800; opacity: 0.3} #estimate .board_view .list_wrap .table_wrap.table tbody tr {border: 1px dotted #cbcbcb;padding: 0px;border-radius: 0px; display: grid; grid-template-columns: repeat(auto-fill, minmax(50%, auto));align-items: center;justify-content: space-between;position: relative;background: #fff;margin-bottom: 15px;} #estimate .board_view .list_wrap .table_wrap.table tbody tr td{border: 0px;width: 100%;} #estimate .board_view .list_wrap .table_wrap.table tbody tr td:first-of-type {grid-column: 1/3;background: rgba(0, 0, 0, 0.1);text-align: left;padding: 5px 15px;} #estimate .board_view .list_wrap .table_wrap.table tbody tr td:first-of-type p {display: flex;justify-content: space-between;font-weight: 800;align-items: center;} #estimate .board_view .list_wrap .table_wrap.table tbody tr td:nth-of-type(2) {font-weight: 800;} #estimate .board_view .list_wrap .table_wrap.table tbody tr td:nth-of-type(4) {grid-column: 1/3;} #estimate .board_view .list_wrap .table_wrap.table tbody tr td:nth-of-type(4) .number_controller {margin: unset; margin-left: auto;} #estimate .board_view .list_wrap .table_wrap.table tbody tr td:nth-of-type(9) {grid-column: 1/3; background: #c5f3ff;} #estimate .board_view .list_wrap .total_table.table {flex-wrap: wrap} #estimate .board_view .list_wrap .total_table.table table td { font-size: 1.5em; } #estimate .board_view .list_wrap .table_wrap.table table tr:nth-last-of-type(2) td {border-bottom: 0px solid #1a2a49;} #estimate .board_view .list_wrap .table_wrap.table table tr:last-of-type {display: none} } #greet{font-size: 1.5em; line-height: 1.8em;max-width: 1300px; margin: 50px auto} #greet h2 {font-size:2.5em;line-height:1em; text-align:center; color:#1a2a49;margin-bottom:80px; padding: 0 25px} #greet h2 span{font-size:20px;color:#4d7ecd;display: inline-block;margin-bottom: 10px;} #greet h2 strong{font-size:.5em;color:#1a2a49;} #greet h3:before{content: ""; display: block; width: 30px; height: 2px; background-color:#0b4380; margin-bottom: 15px; } #greet h3{font-size: 1.6em; margin: 10px auto 30px auto; color: #0b4380;} /*인사말*/ #greet .inner{ background:url('../img/sub/company.jpg') no-repeat left 280px/500px auto; padding-bottom:200px; } #greet p{ font-size:.92em; line-height:1.6em; color:#333; padding-left:250px; background:#fff; padding:50px 50px; margin:160px 0 0 400px;word-break: keep-all; word-wrap:break-word;} #greet p strong{ font-size:1.7em; display:inline-block; margin-bottom:20px ;color: #4d7ecd;} #greet .sign {display: block;padding: 0 50px; text-align: right} @media (max-width: 1000px) { #greet h2 {padding-bottom: 80px; background: #fff} #greet .inner{ background-position:center -0px; background-size:100%; padding-bottom:0;} #greet{font-size: 1.2em; } #greet p{ font-size:1.1em; padding:30px 20px; width:100%; margin:200px auto 0px;} #greet p strong{ font-size:1.4em; line-height: 1.4em} #greet .sign {padding: 00 20px 100px;} } @media (max-width: 768px) { #greet h2 {font-size:2em;} #greet h2 img {height: 40px;} #greet p {margin: 120px auto 0px;} #greet .inner {background-position: center 150px;} } /**/ body:has(main#new) #ft_wrapper {max-width: 1600px;} body:has(main#new) #hd_wrapper {max-width: 1600px;} body:has(main#new) #contact .inr {max-width: 1600px;} body:has(main#new) #header{position: fixed;background: #0000;} body:has(main#new) #header.on{background: #fff;} body:has(main#new) #header.on{background: #fff;} body:has(main#new) #header .hd_search input::placeholder{color:#000;} body:has(main#new) #contact {margin-top: 0px!important;} main#new .contsBanner#visual {max-width: unset; padding: 0!important;border-radius: 0px 0 30px 30px!important;} main#new .contsBanner#visual img {border-radius: 0px!important;height: 700px;} main#new .contsBanner#visual .slg {max-width: 1600px; top: 50%} main#new .contsBanner#visual .swiper-slide {height: 700px;} main#new .contsBanner#visual .swiper-slide h3 {font-size: 1.2em} main#new .contsBanner#visual .swiper-slide h2 {font-size: 3.6em; margin: 35px 0} main#new .contsBanner#visual .swiper-slide .btn {border-radius: 50px; padding: 10px 25px;margin-top: 15px;font-size: 14px;display: inline-block} main#new .contsBanner#visual .swiper-slide .btn i {margin-left: 15px} main#new .contsArea {background: #fff; margin: 50px auto} main#new .contsArea .icon i {color: #89bedd; cursor: unset!important;} @media screen and (max-width: 1200px) { body:has(main#new) #header { border-bottom: 1px solid #eee0; } } main#new .company{background: #F7F9FA;width: 100%;display: flex;text-align: center;justify-content: space-between; margin: 0px 0 0} main#new .company .slogan{text-align: right;padding: 120px 0 ;width: 100%;margin-left: 0 !important; margin-right:260px ;} main#new .company .slogan div p:nth-child(1){font-weight: 400; font-size: 3.6em;letter-spacing: normal;color: #1a2a49} main#new .company .slogan div p:nth-child(2){font-size: 18px;line-height: 1.8;font-weight: 400; width: 100%;margin: 50px auto 0;} main#new .company .imgBox{overflow: hidden;width: 100%;} main#new .company .imgBox1{margin-left: 0;border-radius: 0 0 30px 0 ;} main#new .company .imgBox2{margin-right: -20px;border-radius: 0 0 0 30px;} main#new .company .imgBox img{width: 100%;height: 100%;margin: 0 !important;transition: 0.7s ease;;object-fit: cover;} main#new .company:hover img{transform: scale(1.1);} main#new .company .btn {font-size: 14px;border-radius: 50px; padding: 10px 25px;margin-top: 35px; width: fit-content; display: inline-flex; align-items: center; justify-content: space-between} main#new .company .btn i {margin-left: 15px} main#new .medicine{background: #1a2a49;color: #ffffff;} main#new .medicine .swiper-pagination{margin-right: 20px;position: relative;} main#new .medicine .swiper-button-next, main#new .medicine .swiper-button-prev{position: relative;color: #1a1a1a;left: 0;top: 0;right: 0;bottom: 0;width: max-content;height: auto;margin: 0;} main#new .medicine .swiper-button-lock{display: block} main#new .medicine .swiper-button-next:after, main#new .medicine .swiper-button-prev:after{display: none;} main#new .medicine .swiper-button-next:before, main#new .medicine .swiper-button-prev:before{content: "\f054";font-family: "Font Awesome 6 Pro";font-weight: 100;display: block;padding: 14px;background: #f3f3f3;position: relative;font-size: 2em;margin: 0;color: #333333;} main#new .medicine .swiper-button-prev:before {content: "\f053";background: #fff;color: #1a2a49;} main#new .medicine .swiper-button-next:before{content: "\f054";background: #5f77a2;color: #fff;} main#new .medicine .hd_title{padding-left: 260px;color: #fff;} main#new .medicine .hd_title .btn_more{color: #fff;margin-top: 40px;display: flex;align-items: center;font-size: 14px; background: #fff0; padding: 10px 25px; border-radius: 50px; width: fit-content} main#new .medicine .hd_title .btn_more i {margin-left: 15px} main#new .medicine .hd_title .eng {font-size: 3.6em; margin: 35px 0} main#new .medicine .hd_title h3 {font-size: 1.2em} main#new .medicine .area_swiper{overflow: hidden} main#new .medicine{display: grid; grid-template-columns: 600px 1fr; padding: 140px 0;} main#new .medicine .swiper-button-wrap{width: 950px; display: flex;align-items: center;justify-content: right;max-width: 1400px;margin: 0 auto 40px auto;overflow: hidden;} main#new .medicine .swiper-pagination-bullet{background: #bababa;border-radius: 50%;margin-left: 8px;} main#new .medicine .swiper-pagination-bullet-active{width: 10px;} main#new .medicine .swiper-slide{position: relative;} main#new .medicine .swiper-slide::after{content: '';width: 100%;height: 100%;position: absolute;left: 0;top: 0;} main#new .medicine .swiper-slide{display: flex; align-items: flex-end; background: rgba(0,0,0,0.2);} main#new .medicine .swiper-slide dl{width: 100%;color: #fff; padding: 25px 30px; font-size: 1.1em; position: relative;z-index: 10;} main#new .medicine .swiper-slide dl dt{font-size: 1.4em; margin-bottom: 6px;display:inline-block; width:100%; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; white-space: nowrap; font-family: 'GowunBatang'; letter-spacing: -0.05em;} main#new .medicine .swiper-slide dl dt strong{ font-weight: 800; font-size: 1.5em;} main#new .medicine .swiper-slide dl dt:last-of-type { text-align: right; margin-bottom: 0} main#new .medicine .swiper-slide dl dt:last-of-type u { color: #89bedd;text-decoration: none; font-style: normal; margin: 0 5px} main#new .medicine .swiper-slide dl dt:last-of-type span { font-weight: 400; font-size: 0.8em; opacity: 0.8; } main#new .medicine .swiper-slide dl dt:last-of-type span b{ text-decoration: line-through} main#new .medicine .swiper-slide dl dd{opacity: 0.5; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width:100%;} @media screen and (max-width: 1500px) { main#new .medicine .swiper-slide dl dt:last-of-type span {display: block;} main#new .medicine .swiper-button-wrap{width: 100%;margin-bottom: 0;} main#new .medicine{display: grid;grid-template-columns: auto;padding: 35px 0 0;} main#new .medicine .hd_title {padding: 0 20px;padding-left: 50px !important;font-size: 1em;} main#new .medicine .hd_title .eng {font-size: 2.6em;margin: 25px 0;} main#new .medicine .swiper-slide dl dt strong {font-size: 1.15em;} main#new .company .slogan{ margin-right:5vw ;} main#new .company .slogan div p:nth-child(1) { font-size: 2.6em;} main#new .company .btn {width: fit-content;} } @media screen and (max-width: 1200px) { div#wrapper:has(main#new) {padding-top: 0px;} main#new .medicine {border-radius: 30px 30px 0 0 ;} main#new .company {flex-direction: column} main#new .company .imgBox1 {height: 200px;border-radius: 0 0 30px 30px;} main#new .company .slogan{width: 100%;max-width: unset;padding: 50px 20px; margin: 0; text-align: left } main#new .contsArea dl:not(:last-child):after {margin: 20px 0;} } @media screen and (max-width: 768px) { main#new .contsBanner#visual .swiper-slide {height: 550px;} main#new .contsBanner#visual img {height:600px;} main#new .contsBanner#visual .slg {width: 100%;padding: 0 20px;} main#new .medicine .hd_title {padding-left: 20px !important;} main#new .company .slogan div p:nth-child(2) {font-size: 14px;} main#new .medicine .swiper-slide dl{font-size: 1.05em;} main#new .medicine .swiper-slide dl dt{font-size: 1.3em;} }