html {overflow:auto; min-height: 780px;min-width:340px;  scroll-behavior: smooth;}
body {margin:0;padding:0;font-size:0.75em; height:100%;font-family: 'Pretendard'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;   position: relative; width: 100%; letter-spacing:0px; min-width:340px;margin:0 auto; } 
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: 'Pretendard';}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle; font-family: 'Pretendard';}
input, button {margin:0;padding:0;font-size:1em;font-family: 'Pretendard';}
button {cursor:pointer}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:1em; -webkit-appearance:none}
textarea, select {font-size:1em;font-family: 'Pretendard';}
textarea {border-radius:0;-webkit-appearance:none;font-family: 'Pretendard';}
select {margin:0;background:none;font-family: 'Pretendard';}
p {margin:0;padding:0;word-break:break-all; font-family: 'Pretendard';}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none; font-weight:400; font-family: 'Pretendard';}
ul,li,dl,dt,dd {padding:0;margin:0; font-family: 'Pretendard';}
ul {list-style:none}
*,:after,:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
input[type="text"]:focus {outline: none;}
input[type="password"]:focus {outline: none;}
textarea:focus {outline: none;}
input[type="text"]::placeholder {color:#aaa;}
input[type="password"]::placeholder {color:#aaa;}
textarea::placeholder {color:#aaa;}








header {padding:0 60px; height:100px; display: flex;  left:0; top:0; width:100%; z-index: 10;   align-items: center; flex-direction: row; position: fixed; background:#fff;}
header:after {content:''; clear:both; display: table;}
header .logo {float:left; margin-right:105px; margin-top:-5px;}
header ul:after {content:''; clear:both; display: table;}
header ul li {float:left; margin-right:60px;}
header ul li a {display: inline-block; font-size: 17px; color:#000; font-weight:400; position: relative;}
header ul li.write a:after {content:url('../img/heart.svg'); position: absolute; left:50%; top:-20px; transform: translate(-50%,0) rotateY(0deg); animation: rotate_image 3.5s linear infinite;}
header ul li.mo {display: none;}
header .right {position: absolute; right:60px; top:50%; transform: translate(0,-50%);}
header .right button {border:none; background:none; float:left; border-right:1px solid #e4e4e4; font-size:14px; color:#999; padding:0 20px;}
header .right button.mo {display: none;}
header .right button.letter {display: none;}
header .right button:nth-last-child(-n+4) {border-right:none;}
header .right button:nth-child(-n+3) {margin-top:6px;}

@keyframes rotate_image{
    100% {
        transform: translate(-50%,0) rotateY(360deg);
    }
}



nav {position: fixed; left:0; bottom:0; width:100%; height:70px; border-radius:20px 20px 0 0; box-shadow: 0 -1px 4px rgba(0,0,0,.1); background:#fff; z-index: 10; display: none;}
nav:after {content:''; clear:both; display: table;}
nav button {float:left; width:20%; text-align: center; font-size:11px ;color:#b6b6b6; height:70px; border:none; background:none;}
nav button img {opacity: .3; margin-bottom:5px;}
nav button.on {color:#111; font-weight:500;}
nav button.on img {opacity: 1;}


.my_menu .bg {display: none; position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index: 12;}
.my_menu .view {right:-100%; top:40px; width:300px; height:calc(100% - 80px); border-radius:20px; background:#fff; position: fixed; transition: .3s; z-index: 13;}
.my_menu.on .view {right:40px;}
.my_menu.on .bg {display: block;} 
.my_menu .my_menu_close {position: absolute; top:5px; left:-55px; height:40px; width:40px; border:none; background:none;}
.my_menu .profile {background:#f8f8f8; padding:32px 0; text-align: center; border-radius:20px 20px 0 0;}
.my_menu .profile .img {width:85px; height:85px; border-radius:50%; border:1px solid #E9E9E9; margin:0 auto;}
.my_menu .profile h2 {font-size:16px; font-weight:300; margin-top:10px; color:#000;}
.my_menu .profile h2 b {font-weight:600;}
.my_menu .profile p {margin-top:7px; font-size:12px; color:#999;}
.my_menu .profile p img {margin:0px 2px 0 0;}
.my_menu ul {margin-top:25px; padding-left:25px; height:calc(100% - 296px); overflow-y: scroll;}
.my_menu ul::-webkit-scrollbar {display: none;}
.my_menu ul li {margin-bottom:6px; width:100%; display: inline-block; position: relative;}
.my_menu ul li a {display: inline-block; padding:14px 0 13px 19px; font-size:14px; coloR:#555; border-radius:20px 0 0 20px; width:100%;}
.my_menu ul li a img {margin:-2px 10px 0 0; opacity: .7;}
.my_menu ul li:hover a {background:url('../img/arrow_right.svg')no-repeat right 22px center #f8f8f8; color:#111;}
.my_menu ul li:hover a img {opacity: 1;}
.my_menu ul li.on a {background:url('../img/arrow_right.svg')no-repeat right 22px center #f8f8f8; color:#111;}
.my_menu ul li.on a img {opacity: 1;}
.my_menu .bt {position: absolute; bottom:20px; left:20px; width:calc(100% - 40px);}
.my_menu .bt button {float:left; width:calc((100% - 6px) / 2); height:35px; background:#f2f2f2; border:none; color:#aaa; font-size:13px; border-radius:50px;}
.my_menu .bt button:last-child {float:right;}



footer {display: inline-block; width:100%; background:#f8f8f8; padding:50px 60px;}
footer .wid {max-width:1600px; margin:0 auto; width:100%;}
footer .link:after {content:''; clear:both; display: table;}
footer .link {margin-bottom:45px;}
footer .link a {float:left;margin-right:27px; color:#000; font-size:14px; font-weight:500;}
footer .link a:last-child {margin-right:0;}
footer span {display: inline-block; margin-right:15px; position: relative; color:#222; margin-top:5px; font-weight:300; font-size:13px;} 
footer span:after {content:''; position: absolute; right:-10px; top:2px; height:11px; width:1px; background:#000;}
footer span.last:after {content:none;}
footer span.last {margin-right:0;}
footer p {font-size:12px; color:#b6b6b6; margin-top:20px;}

@media screen and (max-width:1440px) {
  header {padding:0 40px;}
  header .logo {margin-right:80px;}
  header .right {right:40px;}
}

@media screen and (max-width:1200px) {
  header {height:90px;}
  header .logo {margin-right:60px;}
  header .logo img {width:90px;}
  header ul li {margin-right:50px;}
  header ul li a {font-size:15px;}
  header .right button {border:none;}
  header .right button.pc {display: none;}
  header .right button img {height:27px;}
  header .right button {padding:0; margin-left:25px;}
  header .right button.letter {display: block;}
}

@media screen and (max-width:767px) {
  nav {display: block;}
  header {height:100px; padding:0 20px; display: inline-block; width:100%;}
  header .logo {margin-top:17px; float:initial; display: inline-block;}
  header .logo img {width:72px;}
  header .right {right:20px; top:20px; transform: initial;}
  header .right button.my {display: none;}
  header .right button.mo {display: block;}
  header .right button img {height:auto;}
  header .right button {margin-left:15px;}
  header ul {width:100%; float:initial; margin-top:10px; margin-left:-20px; width:calc(100% + 40px); padding:0 18px; display: flex; overflow-x: scroll;}
  header ul::-webkit-scrollbar {display: none;}
  header ul li {margin-right:25px; flex:0 0 auto;}
  header ul li:last-child {margin-right:0;}
  header ul li a {padding:8px 0; font-size:15px;}
  header ul li.write {display: none;}
  header ul li.mo {display: inline-block;}

  .my_menu .view {top:0; border-radius:20px 0 0 20px; height:100%;}
  .my_menu.on .view {right:0;}
  .my_menu .my_menu_close {top:10px; left:-45px;}
  .my_menu .my_menu_close img {width:35px; height:35px;}

  footer {padding:40px 20px 105px 20px;}
  footer .link {margin-bottom:30px;}
  footer .link a {font-size:13px;}
  footer span {font-size:12px;}
}


.click {cursor: pointer;}