/* reset */ 
@charset "utf-8";
@import url('https://googleapis.com');
html {overflow-y:scroll}
body { margin:0; padding:0;
	font-size:14px;
    font-family: -apple-system,BlinkMacSystemFont,Pretendard Variable,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
}
body.dogdict { margin:0; padding:0;
	font-size:14px;	
    font-family: -apple-system,BlinkMacSystemFont,Pretendard Variable,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
	background-color:#f2f4f7;
}
a {color:#000;text-decoration:none;}
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
input[type=text],input[type=password], textarea {
outline:none;
}
button { background:transparent; border:0; }
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
fieldset { border:0; margin:0; padding:0; }
li { list-style:none; margin:0; padding:0; border:0; 
    font-family: -apple-system,BlinkMacSystemFont,Pretendard Variable,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
}
ul { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 { margin:0; padding:0; border:0; 
    font-family: -apple-system,BlinkMacSystemFont,Pretendard Variable,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }

.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.p-0 { padding: 0; }
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }

.pt-10 { padding-top:10px; }
.pt-20 { padding-top:20px; }
.pt-30 { padding-top:30px; }
.pt-40 { padding-top:40px; }
.pt-50 { padding-top:50px; }
.pt-60 { padding-top:60px; }
.pt-70 { padding-top:70px; }
.pt-80 { padding-top:80px; }
.pt-90 { padding-top:90px; }

.pb-10 { padding-bottom:10px; }
.pb-20 { padding-bottom:20px; }
.pb-30 { padding-bottom:30px; }
.pb-40 { padding-bottom:40px; }
.pb-50 { padding-bottom:50px; }
.pb-60 { padding-bottom:60px; }
.pb-70 { padding-bottom:70px; }
.pb-80 { padding-bottom:80px; }
.pb-90 { padding-bottom:90px; }

.pl-10 { padding-left:10px; }
.pl-20 { padding-left:20px; }
.pl-30 { padding-left:30px; }
.pl-40 { padding-left:40px; }
.pl-50 { padding-left:50px; }
.pl-60 { padding-left:60px; }
.pl-70 { padding-left:70px; }
.pl-80 { padding-left:80px; }
.pl-90 { padding-left:90px; }

.pr-10 { padding-right:10px; }
.pr-20 { padding-right:20px; }
.pr-30 { padding-right:30px; }
.pr-40 { padding-right:40px; }
.pr-50 { padding-right:50px; }
.pr-60 { padding-right:60px; }
.pr-70 { padding-right:70px; }
.pr-80 { padding-right:80px; }
.pr-90 { padding-right:90px; }

.radius-5 { border-radius:5px; }
.radius-10 { border-radius:10px; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

@media (min-width: 1024px) {

#dogdict-wrap {  }
#dogdict-wrap header { border-bottom:1px solid #ddd; background:#fff;  }
#dogdict-wrap header ul { display:flex; justify-content: space-between; width:1240px; height:80px; line-height:72px; margin-left:auto; margin-right:auto;  } 
#dogdict-wrap header .char-logo { display:flex; align-items: center; height:70px; }
#dogdict-wrap header .char-logo img { width:40px; height:40px; }
#dogdict-wrap header .char-logo h1 { font-size:24px; line-height:37px; padding-left:5px; }
#dogdict-wrap header nav { display:flex; gap:40px; }
#dogdict-wrap header nav li { font-size:16px; }
#dogdict-wrap header .member { display:flex; align-items: center; height:72px; }
#dogdict-wrap header .member li { background:#fff; border:1px solid #dedede; width:60px; height:30px; line-height:28px; text-align:center; color:#777; margin-right:10px; }

#dogdict-container { width:1240px; min-height:600px; margin-left:auto; margin-right:auto; text-align:center; } 
#dogdict-container { display:flex; }
.dogdict-search { width:100%; height:500px; display:flex; flex-direction: column; justify-content:center;   }
.dogdict-search fieldset { margin:0; padding:0;  }
.dogdict-search input.keysearch { width:70%; height:55px; border-radius:30px; margin-top:20px; border:1px solid #ddd; box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
padding:0px 0px 0px 25px; }
.dogdict-search button { position:relative; right:65px; top:3px; font-size:20px; cursor:pointer; }
.dogdict-search .popular { margin-top:30px; }
.dogdict-search .popular ul { display:flex; justify-content: center;  gap:5px; }
.dogdict-search h2.popular-text { font-size:14px; margin-right:10px; padding-top:14px; }
.dogdict-search .popular span { border:1px solid #5b9efe; padding:12px 15px 12px 15px; margin-right:10px; border-radius:35px; cursor:pointer; }
.dogdict-search .popular span:hover { background:#f9f8f7; }
.copyright { text-align:center; padding-top:30px; }
.nav-mobile { display:none; }
}
@media (max-width: 1024px) {

header { border-bottom:1px solid #ddd; background:#fff;  }
header ul { display:flex; justify-content: space-between; width:100%; height:75px; line-height:72px; margin-left:auto; margin-right:auto;  } 
header .char-logo { display:flex; align-items: center; height:70px; margin-left:10px; }
header .char-logo img { width:40px; height:40px; }
header .char-logo h1 { font-size:24px; line-height:37px; padding-left:5px; }
header nav { display:flex; gap:40px; display:none; }
header nav li { font-size:16px; }
header .member { display:flex; align-items: center; height:72px; margin-right:10px; }
header .member li { background:#fff; border:1px solid #dedede; width:60px; height:30px; line-height:28px; text-align:center; color:#777; margin-right:10px; }
.nav-mobile { height:45px; line-height:45px; background:#fff; border-bottom:1px solid #eee; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; box-shadow: 0px 2px 13px 0px rgba(31, 31, 31, 0.08); }
.nav-mobile::-webkit-scrollbar { display: none; }
.nav-mobile ul { display:flex; gap:18px; white-space: nowrap; padding: 0 15px;  }
.nav-mobile li { flex-shrink: 0; }

#dogdict-container { width:100%; min-height:375px; margin-left:auto; margin-right:auto; text-align:center; padding:10px; } 

.dogdict-search { width:100%; height:500px; display:flex; flex-direction: column; justify-content:center;   }
.dogdict-search fieldset { margin:0; padding:0;  }
.dogdict-search input.keysearch { width:90%; height:55px; border-radius:30px; margin-top:20px; border:1px solid #ddd; box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
padding:0px 0px 0px 25px; margin-left:auto; margin-right:auto; }
.dogdict-search button { position:absolute; right:45px; margin-top:35px; font-size:20px; cursor:pointer; }
.dogdict-search .popular { display:block; margin-top:0px; width:95%; margin-left:auto; margin-right:auto; margin-top:40px; }
.dogdict-search .popular ul { display:flex; flex-wrap: wrap; justify-content: center; align-items: center; gap:10px;  }
.dogdict-search h2.popular-text { font-size:14px; margin-right:10px; padding-top:0px; }
.dogdict-search .popular span { border:1px solid #5b9efe; padding:8px 15px; border-radius:35px; cursor:pointer; white-space: nowrap; }

.copyright { font-size:12px; text-align:center; padding-top:30px; padding-bottom:30px; }

}