*{transition: all 0.3s ease-in-out;box-sizing: border-box;margin: 0;padding: 0;color: var(--h_333);}
html {scroll-behavior: smooth;}
body{max-width: 1000px;margin: 0 auto;color: var(--h_333);background-color: var(--bg_white);}
a{text-decoration: none;}
a:visited{color: var(--h_333);}
a:hover{color: var(--blue);}

.box-shadow{box-shadow: 0 0 5px var(--shadow);}

header{position: fixed;top: 0;left: 0;z-index: 2;width: 100%;border-bottom: 1px solid var(--h_f1);box-shadow: 0 0 5px var(--shadow);background-color: var(--bg_white);}
header .header{max-width: 1000px;margin: 0 auto;display: flex;justify-content: space-between;}
header .logo{height: 50px;line-height: 50px;font-size: 18px;font-weight: bold;cursor: pointer;}
header .logo:hover{color: var(--h_333);}
header .nav-list{display: flex;font-weight: bold;}
header .nav-list .nav{height: 50px;padding: 0 15px;display: flex;align-items: center;cursor: pointer;}
header .nav-list .nav:hover{color: var(--blue);}
header .nav-list .nav .cup{height: 55%;}
header .nav-list .nav:hover img{transform: scale(1.1);}
header .nav-list .nav:last-child{padding-left: 10px;padding-right: 0;}
header .nav-list .theme{width: 25px;height: 25px;position: relative;}
header .nav-list .theme img{width: 25px;position: absolute;top: 0;left: 0;}
header .nav-list .theme .sun{z-index: 1;opacity: 1;}
header .nav-list .theme .moon{z-index: 0;opacity: 0;}
body[theme="dark"] header{background-color: var(--bg_h_f9);}
body[theme="dark"] header .nav-list .theme .sun{z-index: 0;opacity: 0;}
body[theme="dark"] header .nav-list .theme .moon{z-index: 1;opacity: 1;}

.view{padding: 50px 0 50px;min-height: calc(100vh - 50px);}

footer{display: flex;justify-content: center;height: 50px;line-height: 50px;}