/* BASIC css start */
* {font-size: 15px;}

/* header */

header {position: fixed; width: 100%; z-index:111;}
header h1 {margin: 20px 30px; font-size: 1em; font-weight: bold; color: #fff; z-index:131;}
header nav {}

header nav .nav_icon {z-index: 111; position: absolute; top: 17px; right: 5%; width: 24px; height: 22px;}
header nav .nav_icon i {position: absolute; width: 100%; height: 2px; background-color: #fff;  transition: top 0.4s 0.4s, transform 0.4s 0s, width 0.4s 0s;}
header nav .nav_icon i:nth-of-type(1) {top: 0; left: 0;}
header nav .nav_icon i:nth-of-type(2) {top: 10px; left: 0;}
header nav .nav_icon i:nth-of-type(3) {top: 20px; left: 0;}


/* header icon checked */
#menu_icon:checked ~ label i {transition: top 0.4s 0s, transform 0.4s 0.4s, width 0.4s 0.4s; background-color: #000 !important;}
#menu_icon:checked ~ label i:nth-of-type(1) {transform: rotate(45deg); top: 8px;}
#menu_icon:checked ~ label i:nth-of-type(2) {width: 0; animation-delay: 0.3s;}
#menu_icon:checked ~ label i:nth-of-type(3) {transform: rotate(-45deg); top: 8px;}
#menu_icon:checked ~ .nav_area {transform: translate(0%, 0%); transition: 0.5s;}
  
header nav .nav_area {position: absolute; top: 0; left: 0; padding: 20px; width: 100%; height: 100vh; overflow: auto; background-color: #fff; transform: translateX(100%); transition: 0.5s; z-index: 11;}
header nav .nav_area .login {font-weight: 700; font-size: 0.97em;}
header nav .nav_area .login_box {margin-top: 20px; padding: 5%; width: 100%; background-color: #f2f2f2; border-radius: 10px;}
header nav .nav_area .login_box ul {display: flex; justify-content: space-evenly;}
header nav .nav_area .login_box ul li {color: #6B6B6B; font-size: 0.93em; font-weight: 700;}
header nav .nav_area .login_box ul li a {}

header nav .nav_area .menu {}
header nav .nav_area .menu .depth_1 {}
header nav .nav_area .menu .depth_1 li {}
header nav .nav_area .menu .depth_1>li>a {position: relative; display: block; padding: 15px 0; font-size: 1.2em; font-weight: 700;}
header nav .nav_area .menu .depth_1>li>label {position: relative; display: block; padding: 15px 0; font-size: 1.2em; font-weight: 700;}
header nav .nav_area .menu .depth_1>li>label::before {content: ""; display: inline-block; top: 19px; right: 15px; position: absolute; width: 12px; height: 7px; background: center / 100% no-repeat url(/design/peterjin/Arrow.png);}

header nav .nav_area .menu .depth_1>li:nth-of-type(2)>a::before{content: ""; display: none;}

header nav .nav_area .menu .depth_1>li:nth-of-type(1) {padding-top: 15px;}
header nav .nav_area .menu .depth_1>li:nth-of-type(4) {padding-bottom: 15px;}
header nav .nav_area .menu .depth_1>li:nth-of-type(5) {padding-top: 15px; border-top: 2px solid #CCCCCC;}
header nav .nav_area .menu .depth_1>li:nth-of-type(6) {padding-bottom: 15px;}
header nav .nav_area .menu .depth_1>li:nth-of-type(7) {padding-top: 15px; border-top: 2px solid #CCCCCC;}

header nav .nav_area .menu .depth_1 li .depth_2 {display: none; padding: 20px 30px; grid-template-columns: 1fr 1fr; background-color: #F2F2F2; border-radius: 10px; color: #6B6B6B; font-weight: 700;}

header nav .nav_area .menu .depth_1 li:nth-of-type(7) .depth_2 {display: grid; padding: 20px 15px; color: #000; background-color: #fff;}

header nav .nav_area .menu .depth_1 li .depth_2 a {} 
header nav .nav_area .menu .depth_1 li .depth_2 li {margin: 7px;}
header nav .nav_area .menu .depth_1 li .depth_2 li a {}

header nav .nav_area .menu .depth_1 li .mail_info {display: flex; justify-content: space-evenly; margin-top: 20px; padding: 20px; background-color: #F2F2F2; border-radius: 10px; color: #6B6B6B;}

/* menu checked */

#about_bx:checked ~ .depth_2 {display: grid;}
#portfolio_bx:checked ~ .depth_2 {display: grid;}
#order_bx:checked ~ .depth_2 {display: grid;}
#fn_bx:checked ~ .depth_2 {display: grid;}
#help_bx:checked ~ .depth_2 {display: grid;}

#about_bx:checked ~ label::before {content: ""; background: url(/design/peterjin/Arrow_up.png);}
#portfolio_bx:checked ~ label::before {content: ""; background: url(/design/peterjin/Arrow_up.png);}
#order_bx:checked ~ label::before {content: ""; background: url(/design/peterjin/Arrow_up.png);}
#fn_bx:checked ~ label::before {content: ""; background: url(/design/peterjin/Arrow_up.png);}
#help_bx:checked ~ label::before {content: ""; background: url(/design/peterjin/Arrow_up.png);}

/* BASIC css end */