/* BASIC css start */
#footer {margin:0 !important; }
#contentWrapper { padding-top: 139px !important;}


.visual_box {margin-bottom:144px; }
.visualSwiper {}
.visualSwiper .swiper-slide {position:relative; }
.visualSwiper .swiper-slide  a {display:inline-block; width:100%}
.visualSwiper .swiper-slide  a img {width:100%;  border-radius: 250px 0 250px 0; border:1px solid #e8e8e8}
.visualSwiper .swiper-button-prev, .visualSwiper .swiper-button-next {position: absolute; margin: 0; top: 50%; transform: translateY(-50%); z-index: 10; width: 64px; height: 64px;  }
.visualSwiper .swiper-button-prev { left: 4%; background: url("/design/medicopet/img/icon_prev.svg") no-repeat center/24px auto;}
.visualSwiper .swiper-button-next {right: 4%; background: url("/design/medicopet/img/icon_next.svg") no-repeat center/24px auto;}

.visualSwiper .swiper-pagination { bottom: 4% !important; left: 0; width: 100%;  font-size: 30px;}
.visualSwiper .swiper-pagination-bullet { width: 50px; height: 3px; display: inline-block; border-radius: 0; background: #fff; opacity: 0.2; margin: 0 6px; }
.visualSwiper .swiper-pagination-bullet-active { opacity: 1; background: #fff;}


.visualBtn {position: absolute;right: 0;bottom: -120px;background: #f38383;width: 250px;height: 250px;border-radius: 100%; font-weight: 400;line-height: 1.3;box-shadow: 2px 1px 25px rgba(0, 0, 0, 0.2);z-index: 500;}
.visualBtn a:hover::before { content: ''; display: block; position: absolute; width: 260px; height: 260px; background: #f38383; border-radius: 100%; animation: moveAction 1.5s ease 0s infinite; left: -5px; top: -5px; }
.visualBtn a:hover::after { content: ''; display: block; position: absolute; width: 270px; height: 270px; background: #f38383; border-radius: 100%; animation: moveAction02 1.5s ease 0s infinite; left: -10px; top: -10px; }
.visualBtn a {display: flex;align-items: center;justify-content: center;flex-direction: column;color:#000;width: 100%;height: 100%;line-height:1;box-sizing: border-box;padding: 35px 22px 23px;font-size:20px;}
.visualBtn a span {display: flex;align-items: center;justify-content: center;flex-direction: column;z-index:1; color:#fff;  }
.visualBtn a img {margin-bottom:10px;height:52px;}

@keyframes moveAction {
    75%,100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

@keyframes moveAction02 {
    75%,100% {
        transform: scale(1.2);
        opacity: 0;
    }
}



.section {position:relative; margin-bottom:200px }
.sect_tt {text-align:center; margin-bottom:70px; }
.sect_tt .tt {font-size:40px; font-weight:bold; }
.sect_tt .des {font-size: 22px; color: #313232; margin-top:20px; }


.section .prod_list .prodSwiper .item {width:100%}
.section .prod_list.grid3 .item {width:33.333%;}

.section .swiper-pagination {position:static}
.section .swiper-pagination-bullet { background:rgba(0,0,0,0.1); border-radius: 100%; width: 8px; height: 8px; opacity:1}
.section .swiper-pagination-bullet-active { background:#000; margin-top: 0 !important }

.section .swiper-button-prev, .section .swiper-button-next {width: 27px;height: 50px;background-repeat:no-repeat;background-size:100% auto;background-position:center}
.section .swiper-button-prev:after, .section .swiper-button-next:after  {display:none; }
.section .swiper-button-prev {left:-32px; background-image: url("/design/medicopet/img/icon_prev_bk.svg") }
.section .swiper-button-next  {right:-32px; background-image: url("/design/medicopet/img/icon_next_bk.svg")}

.tab_box {display:flex;align-items: center;justify-content: center; padding-bottom:64px}
.tab_box a {box-sizing:border-box;display:flex;justify-content: center;align-items: center;height:50px;border-radius:30px;padding:0px 24px;border: 2px solid #E0E0E0;margin-right:8px;color:#666;font-size: 16px;}
.tab_box a:last-child {margin-right:0}
.tab_box a.active {background: #202020; color:#fff; }

.tab_con_box {}
.tab_con {display:none; }
.tab_con.active {display:block;; }


#BRAND {text-align:center; height:1200px;  }
#BRAND .txt_box { }
#BRAND .txt_box .img {display:inline-block;padding-bottom:120px; position:relative; }
#BRAND .txt_box .img:after { content: ''; position: absolute; left: 50%; bottom:20px; transform: translate(-50%, 0px); width: 1px; height: 80px; background-color: #ccc;}
#BRAND .txt_box .img img {height:170px}
#BRAND .txt_box .txt {font-size: 24px;line-height: 1.5;color:#666;}
#BRAND .txt_box .tt {font-size: 44px;color: #313232;margin-bottom: 10px;font-weight:bold;}
#BRAND .txt_box .point {font-size:30px;font-weight:600;margin-top: 21px;color: #bc1e2d;border-bottom: 1px solid;}
#BRAND .txt_box .btn {margin-top: 40px;display:inline-block;font-size: 18px;padding: 17px 57px;border-radius: 50px;background:#f38383;color: #fff;position: relative;width: 200px;box-sizing: border-box;height: 56px;}
#BRAND .img_box span { position:absolute;   }
#BRAND .img_box .img_l {left: -80px;top: 70px;}
#BRAND .img_box .img_c {right: -40px;top: 440px;}   
#BRAND .img_box .img_r { left: 15%; top: 700px; }

#BRAND .txt_box .btn:hover::before { content: ''; display: block; position: absolute; width: 210px; height:66px; background: #f38383; border-radius: 50px; animation: moveAction 1.5s ease 0s infinite; left: -5px; top: -5px; }
#BRAND .txt_box .btn:hover::after{ content: ''; display: block; position: absolute; width: 220px; height: 76px; background: #f38383; border-radius: 50px; animation: moveAction02 1.5s ease 0s infinite; left: -10px; top: -10px; }
#BRAND .txt_box .btn span {display: flex;align-items: center;justify-content: center;z-index:1;position: relative;}

#EVENT  {position:relative; width:100%; height:400px; background:center top no-repeat fixed; background-size:100% auto; }
/*#EVENT .swiper-slide {position:relative; display:block; }
#EVENT .img img {width: 100%;}*/

#BANNER {margin:0}
#BANNER a {margin-bottom: 10px;overflow: hidden;display:flex;align-items: center;justify-content: center;text-align: center;padding: 148px 0 80px;width: 100%;height: 400px;box-sizing:border-box;background: no-repeat center;background-size: 100% 100%;transition: background-size 0.6s ease;-moz-transition: background-size 0.6s ease;-web-kit-transition: background-size 0.6s ease;position:relative;}
#BANNER a:hover { background-size: 105% 105%;}
#BANNER .txt {position:relative; z-index:1;}
#BANNER .txt h2 {font-size: 32px;font-weight:bold;margin-bottom:20px; display:flex;align-items: center;justify-content: center}
#BANNER .txt h2 .icon {width: 65px;margin-right:10px;}
#BANNER .txt > span {color: #000;text-decoration: underline;text-underline-position: under;font-size: 20px;font-weight: 500;}
#BANNER .btm {display:flex; align-items: center;justify-content: center; }
#BANNER .btm .txt h2 {width:400px}
#BANNER .zoonin01 { background-image:url('/design/medicopet/img/part1_new.jpg')}
#BANNER .zoonin02 { background-image:url('/design/medicopet/img/part2_new.jpg')}
#BANNER .zoonin03 { background-image:url('/design/medicopet/img/part3_new.png')}
#BANNER .zoonin02 .txt {padding-top: 140px;}
#BANNER .zoonin02 .txt h2, #BANNER .zoonin02 .txt > span {color:#fff;   }


#QNA .chk_box { margin:24px 0 38px;text-align:center;font-size:16px;}
#QNA .chk_lb { margin-right:24px; cursor: pointer;}
#QNA .chk_lb:last-child {margin-right:0}

#QNA .table_box .table {table-layout: inherit;}
#QNA .table_box .table tbody {width:100%; }
#QNA .table_box .table tr {border-bottom: 1px solid #f0f0f0;}                       
#QNA .table_box .table th {text-align:left;font-size:16px;}
#QNA .table_box .table td {position: relative; padding:10px; height:auto; box-sizing:border-box; padding-right:32px; }
#QNA .table_box .table td input {height:42px; border:1px solid #e0e0e0; padding:0 20px; width:100%;  box-sizing:border-box }
/*.table_box .table td:before {content: attr(data-label);display: block;position: absolute;left: 10px;top: calc(50% - 6.5px);width: auto;padding: 0;text-align: left;font-weight: bold;opacity: 0.8;font-size: 13px;z-index: 2;}
.file_lb {width: 90px;  font-size:14px; line-height: 34px; right:0;  top: calc(50% - 19px)}*/
#QNA .textarea_box textarea {height: 240px;padding:16px;font-size: 14px; width:100%;  box-sizing:border-box}
#QNA .btn_box {text-align:center; }
#QNA .btn_box .btn {margin-top: 40px;display:inline-block;font-size: 18px;padding: 17px 57px;border-radius: 50px;background:#f38383;color: #fff;position: relative;width: 200px;box-sizing: border-box;height: 56px;border:none;z-index: 10;overflow: visible;}
#QNA .btn_box .btn:hover::before {content: '';display: block;position: absolute;width: 210px;height:66px;background: #f38383;border-radius: 50px;animation: moveAction 1.5s ease 0s infinite;left: -5px;top: -5px;}
#QNA .btn_box .btn:hover::after{ content: ''; display: block; position: absolute; width: 220px; height: 76px; background: #f38383; border-radius: 50px; animation: moveAction02 1.5s ease 0s infinite; left: -10px; top: -10px; }
#QNA .btn_box .btn span {display: flex;align-items: center;justify-content: center;z-index:1;position: relative;}
#QNA .agree_inquire_box {margin: 70px 0;}
#QNA .agree_inquire_area {height: 326px;overflow:auto;margin-bottom:20px;border:1px solid #ddd;padding:20px;box-sizing: border-box;}
#QNA .agree_inquire_area .sec {margin-bottom:10px; }
#QNA .agree_inquire_area .sec:last-child {margin-bottom:0}
#QNA .agree_inquire_area p {font-size:15px; word-wrap: break-word; word-break: keep-all;font-weight:300; }
#QNA .agree_inquire_box .chk_box {text-align:right; }



/*
[data-scroll] { opacity: 0; transition: .8s; transition-delay: 0.3s; }
[data-scroll="in"] { opacity: 1;}
.visualSwiper {animation: 1.5s right-enter;}

@keyframes right-enter {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    100% {
        clip-path: inset(0);
        opacity: 1;
    }
}
*/


/* BASIC css end */