@charset "UTF-8";
@import url("S-Core-Dream-light/s-core-dream.css");
@import url("GmarketSans/GmarketSans.css");
@import url("NEXON_Lv2_Gothic/NEXON Lv2 Gothic.css");

/*----------------- 노멀라이즈 -----------------*/
* {margin: 0; padding: 0;
    font-family: "s-core-dream-light", sans-serif !important;}
body, ul, li {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; color: inherit;}

/*------------------ 라이브러리 -----------------*/ 
.block {display: block;}
.inline-block {display: inline-block;}
.relative {position: relative;}
.relative-Allcenter {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);}
.absolute {position: absolute;}
.absolute-Xcenter {position: absolute; left: 50%; transform:translateX(-50%);}
.absolute-Ycenter {position: absolute; top: 50%; transform:translateY(-50%);}
.absolute-Allcenter {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);}
.absolute-center {position: absolute; transform:translate(-50%, -50%);}
.fixed {position: fixed;}
.row::after {display: block; content: ""; clear: both;}
.cell {float: left; box-sizing: border-box;}
.cell-right {float: right; box-sizing: border-box;}
.img-box>img {display: block; width: 100%; height: 100%;}
.bg-cover>img {background-size: cover; box-sizing: border-box;}
.con {margin: 0 auto; box-sizing: border-box;}
.flex {display: flex;}
.flex > .cell {float: none;}
.flex-1-0-auto>* {flex: 1 0 auto;}
.before::before {display: block; content: ""; clear: both; position: absolute;}
.after::after {display: block; content: ""; clear: both; position: absolute;}

@media (max-width: 3860px) {
/*************** BG ***************/
.main_body {
    height: 650px;
    /* overflow: hidden; */
}

.main_body>.main_BG001 {
    background: #FFD457;
    padding: 500px 0;
    transform: skewY(-30deg) translateY(-200px);
}

.main_body>.main_BG002 {
    background: #FFD457;
    padding: 800px 0;
    transform: skewY(-30deg) translateY(600px);
}

.main_body>.main_BG003 {
    background: #ff8826;
    padding: 600px 0;
    transform: skewY(15deg) translateY(-1600px);
}

/*************** PC Visual ***************/
.web_logo {
    top: 0px;
    right: 53%;
    width: 450px;
}

.web_logo>a {
    display: inline-block;
    width: 160px;
    height: 160px;
    margin: 0px 0px 0px 140px;
}

.web_logo>h3 {
    font-family: "s-core-dream-thin", sans-serif !important;
    font-size: 26px;
    padding-left: 20px;
}

.web_logo>h3>span:nth-of-type(1) {
    font-family: "s-core-dream-medium", sans-serif !important;
    font-size: 26px;
    color: #ff8826;
    text-shadow: 0px 0px 5px #ffffff;
}

.web_logo>h3>span:nth-of-type(2) {
    font-family: "s-core-dream-bold", sans-serif !important;
    font-size: 34px;
    color: #C771F2;
    text-shadow: 0px 0px 5px #ffffff;
}

.TXT_001 {
    top: 260px;
    right: calc(53% + 240px);
    font-family: "GmarketSans", sans-serif !important;
    font-size: 140px;
    color: #ffffff;
    text-shadow: 0px 0px 10px #C771F2;
}

.TXT_002 {
    top: 267px;
    right: calc(53% + 70px);
}

.TXT_002>h3 {
    font-family: "GmarketSans", sans-serif !important;
    font-size: 40px;
    color: #ffffff;
    line-height: 43px;
    text-shadow: 0px 0px 10px #C771F2;
}

.Visual_AM_001 {
    top: 420px;
    right: calc(53% + 100px);
    width: 260px;
}

.Visual_AM_001>div>.animate_001 {
    width: 260px;
    height: 140px;
    border: 2px solid #c771f2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 5px #444444;
}

.Visual_AM_001>div>.store_find {
    top : 106px;
    left: 20px;
}

.Visual_AM_001>div>.store_find>a {
    font-family: "GmarketSans", sans-serif !important;
    color:#c771f2;
    background:#fff;
    padding:2px 15px 3px;
    border:2px solid #c771f2;    
    border-radius:30px;
    transition:all 0.2s;
}

.Visual_AM_001>div>.store_find>a:hover {
    color:#ffffff;
    background:#c771f2;
}

.Visual_AM_001>div>div:nth-of-type(3)>a{
    top: 160px;
    left: 20px;
    width: 120px;
    height: 30px;
    background:#c771f2;
    padding:3px 15px;
    box-sizing: border-box;
    border:2px solid #c771f2;    
    border-radius:30px;    
    transition:all 0.2s;
}

.Visual_AM_001>div>div:nth-of-type(3)>.App_google {
    left: 0px;
}

.Visual_AM_001>div>div:nth-of-type(3)>.App_apple {
    left: 140px;
}

.Visual_AM_001>div>div:nth-of-type(3)>a:hover {
    color:#ffffff;
    background: #ff8826;
}

/********** mobile_body **********/
.mobile_body {
    top: 0%;
    left: 50%;
    width: 420px;
    height: 610px;
    background-color: #444444;
}

.header_BG {
    top: 0px;
    width: 100%;
    height: 60px;
    background-color: #C771F2;
    opacity: 0.3;
}

.header {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
    z-index: 300;
}

.header>div>.shop_Find {
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 5px;
    overflow: hidden;
    opacity: 0.5;
    cursor: pointer;
    box-shadow: 0px 0px 5px #54007e;
}

.header>div>.shop_Find>h3 {
    font-size: 40px;
    color: #C771F2;
    margin: -9px 0px 0px 3px;
}

.header>div>.shop_Find:hover {
    background-color: #FFD457;
    box-shadow: 0px 0px 5px #ff8826;
    transition: 0.5s;
}

.header>div>.shop_Find:hover h3{
    font-size: 30px;
    color: #FF7300;
    margin: -2px 0px 0px 7px;
    transition: 0.5s;
}

.header>div>.mobile_LOGO {
    top: 15px;
    width: 180px;
    height: 36px;
}

.header>div>.SNS {
    width: 100%;
    margin-top: 80px;
    z-index: 200;
}

.header>div>.SNS>a {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

/********** visual **********/
.visual {
    height: 650px;
    overflow: hidden;
}

.visual {
    margin-bottom:0;
}
  
.visual>.slick-list>.slick-track>.slick-slide>div {
    line-height:0;
}
  
.visual>.slick-list>.slick-track>.slick-slide>div>* {
    line-height:normal;
}

/********** visul event **********/
.visual_event {
    top: 10%;
    left: 20px;
    width: 180px;
    transition: 0.5s;
    z-index: 110;
}

/********** visul text **********/
.visual_text {
    top: 64%;
    left: 20px;
    width: 200px;
    background-color: #FFFFFF;
    padding: 2px;    
    box-shadow: 0px 0px 3px #FDD000;
}

/********** notice **********/
.notice {
    top: 70%;
    width: 100%;
    background-color: #C771F2;
    opacity: 0.5;
}

.notice>div>h4 {
    font-size: 16px;
    color: #FFFFFF;
    margin: 3px 0px 0px 10px;
}

.notice>.notice_slide {
    width: calc(100% - 20px);
    height: 37px;
    margin: 28px auto 10px;
    background-color: #FFFFFF;
    border-radius: 5px;
    overflow: hidden;
}

.notice>.notice_slide>.slick-list>.slick-track>.slick-slide>div>li>ul:nth-of-type(1) {
    width: 17%;
    margin-right: 1%;
    text-align: center;
    border-right: 1px solid #444444;
}

.notice>.notice_slide>.slick-list>.slick-track>.slick-slide>div>li>ul {
    height: 37px;
}

.notice>.notice_slide>.slick-list>.slick-track>.slick-slide>div>li>ul:nth-of-type(2) {
    width: 82%;
}

.notice>.notice_slide>.slick-list>.slick-track>.slick-slide>div>li>ul:nth-of-type(1)>.notice_day {
    font-family: "s-core-dream-bold", sans-serif !important;
    font-size: 16px;
    color: #54007E;
}

.notice>.notice_slide>.slick-list>.slick-track>.slick-slide>div>li>ul:nth-of-type(1)>.notice_month {
    font-size: 12px;
}

.notice>.notice_slide>.slick-list>.slick-track>.slick-slide>div>li>ul:nth-of-type(2)>li {
    font-size: 14px;
    margin: 10px 0px 0px 5px;
}

/********** menu **********/
.menu {    
    top: -10px;
    left: 0px;
    width: 100%;
    height: 660px;
    z-index: 100;
}

.menu>div {
    top: 84%;
    left: 80%;
    transform:translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: #FFD457;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 5px #444444;
    transition: 0.5s;
}

.menu>.menu_ON {    
    opacity: 0;
}

.menu>.menu_ON>a {
    visibility: hidden;
}

.menu>.menu_OFF>a {
    visibility: hidden;
}

.menu>div>h1 {
    font-size: 70px;
    font-weight: 200;
    color: #54007e;
    opacity: 0.5;
}

.menu>div:hover {
    background-color: #C771F2;
}

.menu>div:hover h1 {
    font-weight: 200;
    color: #FDD000;
    opacity: 0.5;
}

.menu>div>h2 {
    display: none;
    font-size: 70px;
    font-weight: 200;
    color: #54007e;
    opacity: 0.5;
}

.menu>div:hover h2 {
    font-weight: 200;
    color: #FDD000;
    opacity: 0.5;
}

.menu>div>a {    
    top: 0px;
    left: 0px;
    width: 80px;
    height: 80px;
    text-align: center;
    background-color: #FFD457;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #444444;
    opacity: 0;
    transition: 0.5s;
}

.menu>div>a>.menu_img {
    width: 40px;
    height: 30px;
    margin: 15px auto 5px;
    opacity: 0;
}

.menu>div>.menu_001>.menu_img {
    width: 50px;
}

.menu>div>a>h4 {
    opacity: 0;
    font-size: 12px;
    transition: 2s;
}

/********** shop list **********/
.shop_List {
    top: -100%;
    width: 100%;
    height: 650px;
    background-color: #eeeeee;
    transition: 0.5s;
    z-index: 300;
}

.shop_List>.shop_List_LOGO {
    width: 180px;
    height: 36px;
    margin: 15px auto;
}

.shop_List>ul {
    width: calc(100% - 40px);
    margin: 0 auto;
    background-color: #FFD457;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
}

.shop_List>ul>li {
    width: 32%;
    padding: 10px;
    margin-right: 2%;
    text-align: center;
}

.shop_List>ul>li:nth-of-type(3n) {
    margin-right: 0%;
}

.shop_List>ul>li:hover h5 {
    color: #ff8826;
}

.shop_List>ul>li>a {
    width: 60px;
    height: 60px;
    margin: 0 auto;  
}

.shop_List>ul>li>a>img {
    width: 60px;
    height: auto;    
}

.shop_List>ul:nth-of-type(1)>li:nth-of-type(2)>a>img {
    padding: 15px 0px;    
}

.shop_List>ul:nth-of-type(1)>li:nth-of-type(3)>a>img {
    height: 50px;
    margin-top: 5px;
}

.shop_List>ul:nth-of-type(1)>li:nth-of-type(4)>a>img {
    height: 50px;
    margin-top: 5px;
}

.shop_List>ul:nth-of-type(1)>li:nth-of-type(5)>a>img {
    width: 50px;
    height: 50px;
    margin-top: 5px;
}

.shop_List>ul>li>h5 {
    font-size: 13px;
    margin-top: 10px;
}

.shop_List>ul:nth-of-type(2) {
    margin-top: 20px;
}

/********** 딩펫 펫 살롱 **********/
.mobile_body>.main>div>.go_Home {
    top: 18px;
    right: 0px;
    padding: 5px 10px 5px 5px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: #C771F2;
    color: #ffffff;
    box-shadow: -2px 2px 3px #aaaaaa;
}

.dinkpet_Pet_salon {
    top: -100%;
    width: 100%;
    height: 650px;
    background-color: #eeeeee;
    transition: 0.5s;
    z-index: 300;
}

.dinkpet_Pet_salon>.dinkpet_Pet_salon_LOGO {
    width: 180px;
    height: 36px;
    margin: 15px auto;
}

.dinkpet_Pet_salon>ul {
    height: 580px;
    overflow-Y: scroll; 
}

.dinkpet_Pet_salon>ul>.intro_002 {
    width: 400px;
    height: 250px;
    margin: 0px auto 3px;
}

.dinkpet_Pet_salon>ul>.intro_002_2 {
    padding: 10px;
    box-sizing: border-box;
    background-color: #EEEEEE;
}

.dinkpet_Pet_salon>ul>li>h3 {
    font-family: "s-core-dream-regular", sans-serif !important;
    font-size: 20px;
    color: #444444;
    margin: 20px 0px 0px 30px;
}

.dinkpet_Pet_salon>ul>li>h3::before {
    display: block;
    content: "⧉";
    clear: both;
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translate(-50%, -50%);
    color: #C771F2;
}

.dinkpet_Pet_salon>ul>li>h3::after {
    display: block;
    content: "";
    clear: both;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 2px;
    background-color: #C771F2;
}

.dinkpet_Pet_salon>ul>.intro_002_2>h3::after {
    display: block;
    content: "";
    clear: both;
    position: absolute;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 2px;
    background-color: #C771F2;
}

.dinkpet_Pet_salon>ul>.intro_003 {
    margin: 0px auto;
    overflow: hidden;
}

.dinkpet_Pet_salon>ul>.intro_004 {
    padding: 10px;
    box-sizing: border-box;
    background-color: #EEEEEE;
}

.dinkpet_Pet_salon>ul>.intro_004>.row>div {
    width: 48%;
    margin-right: 2%;    
    margin-bottom: 5px;
    box-sizing: border-box;
}

.dinkpet_Pet_salon>ul>.intro_004>.row>div:nth-of-type(even) {
    margin-right: 0px;
}

.dinkpet_Pet_salon>ul>.intro_004>.row>.blank_img {
    height : 102px;
    background-color: #C771F2;
    text-align: center;
}

.dinkpet_Pet_salon>ul>.intro_004>.row>.blank_img>h3 {
    color: #FFD457;
    padding-top: 38px;   
}

.dinkpet_Pet_salon>ul>.intro_004>.row>div>p>iframe {
    width: 100% !important;
    height: 100px !important;
}

.dinkpet_Pet_salon>ul>.intro_005 {
    padding: 10px;
    box-sizing: border-box;
}

.intro_005>.blog_load_001>.text_box {
    width: 100%;
    padding: 5px 0px;
    text-align: center;
    margin: 5px auto;
    background-color: #34af36;
    border-radius: 8px;
    font-size: 14px;
}

.intro_005>.blog_load_001>.text_box>h3 {
    color: #ffffff;
}

.intro_005>.blog_load_001>ul {
    margin: 10px auto;
}

.intro_005>.blog_load_001>ul>li {    
    width: 23.5%;
    margin-right: 2%;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 5px #c771f2
}

.intro_005>.blog_load_001>ul>li:nth-of-type(4n) {
    margin-right: 0%;
}

.intro_005>.blog_bar {
    width: 100%;
    height: 5px;
    background-color: #c771f2;
    margin-bottom: 30px;
}

/********** 지점 안내 **********/
.shop_Add {
    top: -100%;
    width: 100%;
    height: 650px;
    background-color: #eeeeee;
    transition: 0.5s;
    z-index: 300;
}

.shop_Add>.shop_Add_LOGO {
    width: 180px;
    height: 36px;
    margin: 15px auto;
}

.shop_Add>ul {     
    width: calc(100% - 40px);
    height: 570px;
    margin: 0 auto;
    background-color: #FFD457;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow-Y: scroll;
}

.shop_Add>ul>ul {
    margin-bottom: 20px;
}

.shop_Add>ul>ul>.shop_name {
    width: 25%;
    padding: 10px;
    text-align: center;
}

.shop_Add>ul>ul>.shop_name>h5 {
    font-size: 12px;
}

.shop_Add>ul>ul>ul{
    width: 75%;
    padding: 5px;
    text-align: center;
}

.shop_Add>ul>ul>ul>li {
    height: 50px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(1)>h5 {
    font-size: 11px;
    margin: 10px 0px 5px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(1)>span {
    font-size: 11px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(1)>a {
    font-size: 14px;
    font-weight: bold;
}

.shop_Add>ul>ul>ul>li:nth-of-type(1)>a:hover {
    color: #C771F2;
}

.shop_Add>ul>ul>ul>li:nth-of-type(2) {
    width: 250px;
    height: 50px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(2)>a {
    width: 40px;
    height: 40px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(2)>a>img {
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.shop_Add>ul>.view_Page {
    width: 100%;
    height: 0px;
    background-color: #C771F2;
}

.shop_Add>ul>.Line_bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: #C771F2;
    margin: 10px 0px;
}

/********** event **********/
.event {
    top: -100%;
    width: 100%;
    height: 650px;
    background-color: #eeeeee;
    transition: 0.5s;
    z-index: 300;
}

.event>.dinkpet_event_LOGO {
    width: 180px;
    height: 36px;
    margin: 15px auto;
}

.event>ul {
    height: 580px;
    overflow-Y: scroll; 
}

.event>ul>li {
    /* height: 200px; */
    height: auto;
}

.event>ul>li:nth-of-type(odd) {
    background-color: #cccccc;
}

.event>ul>li:nth-of-type(even) {
    background-color: #aaaaaa;
}

/********** insta **********/
.insta_List {
    top: -100%;
    width: 100%;
    height: 650px;
    background-color: #dddddd;
    transition: 0.5s;
    z-index: 300;
}

.insta_List>.dinkpet_insta_LOGO {
    width: 180px;
    height: 36px;
    margin: 15px auto;
}

.insta_List>ul {
    width: calc(100% -20px);
    height: 550px;
    background-color: #f5f4f4;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
}

.insta_List>ul>li{
    width:25%;
    text-align:center;
}

.insta_List>ul>li>a{
    width:100%;
    padding:20px 0px;
}

.insta_List>ul>li>a>h3{
    font-family: "s-core-dream-bold", sans-serif !important;
    font-size: 14px;
    margin: 10px 0px 0px 0px;
    color: #c771f2;
}

.insta_List>ul>li>a>h4 {
    font-family: "s-core-dream-bold", sans-serif !important;
    font-size: 12px;
    margin: 0px 0px 0px 0px;
    color: #333333;
}

/********** naver **********/
.naver_List {
    top: -100%;
    width: 100%;
    height: 650px;
    background-color: #dddddd;
    transition: 0.5s;
    z-index: 300;
}

.naver_List>.dinkpet_naver_LOGO {
    width: 180px;
    height: 36px;
    margin: 15px auto;
}

.naver_List>ul {
    width: calc(100% -20px);
    height: 550px;
    background-color: #f5f4f4;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
}

.naver_List>ul>li{
    width:25%;
    text-align:center;
}

.naver_List>ul>li>a{
    width:100%;
    padding:20px 0px;
}

.naver_List>ul>li>a>h3{
    font-family: "s-core-dream-bold", sans-serif !important;
    font-size: 14px;
    margin: 10px 0px 0px 0px;
    color: #c771f2;
}

.naver_List>ul>li>a>h4 {
    font-family: "s-core-dream-bold", sans-serif !important;
    font-size: 12px;
    margin: 0px 0px 0px 0px;
    color: #333333;
}

/********** kakao **********/
.kakao_List {
    top: -100%;
    width: 100%;
    height: 650px;
    background-color: #dddddd;
    transition: 0.5s;
    z-index: 300;
}

.kakao_List>.dinkpet_kakao_LOGO {
    width: 180px;
    height: 36px;
    margin: 15px auto;
}

.kakao_List>ul {
    width: calc(100% -20px);
    height: 550px;
    background-color: #f5f4f4;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
}

.kakao_List>ul>li{
    width:25%;
    text-align:center;
}

.kakao_List>ul>li>a{
    width:100%;
    padding:20px 0px;
}

.kakao_List>ul>li>a>h3{
    font-family: "s-core-dream-bold", sans-serif !important;
    font-size: 14px;
    margin: 10px 0px 0px 0px;
    color: #c771f2;
}

.kakao_List>ul>li>a>h4 {
    font-family: "s-core-dream-bold", sans-serif !important;
    font-size: 12px;
    margin: 0px 0px 0px 0px;
    color: #333333;
}

/********** footer **********/
.footer {
    padding: 10px 10px;
    background-color: #444444;
}

.footer>h5 {
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.footer>div {
    width: 100px;
    height: auto;
    margin: 20px auto;
}
    
}

@media (max-width: 1024px) {
body {
    width: 100%;
}

.main_body {
    display: none;
}

.web_logo {
    display: none;
}

.TXT_001 {
    display: none;
}

.TXT_002 {
    display: none;
}

.Visual_AM_001 {
    display: none;
}

.mobile_body {
    left: 50%;
    transform: translateX(-50%);
}

}

@media (max-width: 420px) {
/********** mobile_body **********/
.mobile_body {
    width: 100%;
}

/********** notice **********/
.notice>.notice_slide {
    margin: 30px auto 10px;
}

.notice>.notice_slide>.slick-list>.slick-track>.slick-slide>div>li>ul:nth-of-type(2)>li {
    font-size: 12px;
}

/********** 딩펫 펫 살롱 **********/
.dinkpet_Pet_salon>ul>.intro_002 {
    width: calc(100% - 10px);
    height: 300px;
    margin: 5px auto;
}

.dinkpet_Pet_salon>ul>li>h3::after {
    width: 150px;
}

/********** 지점 안내 **********/
.shop_Add>ul>ul {
    margin-bottom: 40px;
}

.shop_Add>ul>ul>.shop_name>h5 {
    font-size: 10px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(1)>h5 {
    font-size: 10px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(1)>span {
    font-size: 11px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(1)>a {
    font-size: 13px;
}

.shop_Add>ul>ul>ul>li:nth-of-type(2) {
    width: 200px;
    margin-top: 5px;
}

/********** insta **********/
.insta_List>ul>li{
    width: 33.3333%;
}

/********** naver **********/
.naver_List>ul>li{
    width: 33.3333%;
}

/********** kakao **********/
.kakao_List>ul>li{
    width: 33.3333%;
}

/********** footer **********/
.footer>h5 {
    font-size: 11px;
}

}