@import url('common.css');

body.nav_open,
html.nav_open { overflow: hidden; }
header { transition : background .3s ease }
header.header_scroll { backdrop-filter: blur(10px); }
header:hover { background-color: #fff;}
header.desktop_header { position : fixed; top : 0; left : 50%; width : 100%; margin : 0 auto; transform : translateX(-50%); padding : 0 2rem; display : flex; justify-content: space-between; align-items: center; z-index: 33; }
header.desktop_header nav > ul { display : flex }
header.desktop_header nav > ul > li { position : relative; }
header.desktop_header nav ol { position : absolute; top : 100%; left : 50%; transform : translateX(-50%); min-width : 100%; border-radius : 0 0 1rem 1rem; background-color: var(--white); border : 1px solid #eee; padding : 1rem; opacity: 0; visibility: hidden; transition : opacity .3s ease, visibility .3s ease; }

header.desktop_header nav li:first-child ol { width : 250px }
header.desktop_header nav li:nth-child(2) ol { width : 280px }
header.desktop_header nav ol a { white-space: nowrap; font-size : .9rem; padding : .3rem 0 }
header.desktop_header nav ol a:hover { font-weight: bold; }
header.desktop_header nav a { display : block }
header.desktop_header nav .depth1 { text-align: center; font-size : 1.2rem; padding : 0 2rem; }
header.desktop_header nav .depth1 span { position : relative; display : inline-block; line-height : 5rem; font-weight: 500; white-space : nowrap; word-break : keep-all }
header.desktop_header nav .depth1 span:before { content : ''; width : 100%; height : 5px; background-color: var(--point); position : absolute; bottom : -5px; left : 0; transition : all .3s ease; opacity: 0; }
header.desktop_header nav > ul > li:hover .depth1 span:before { bottom : 0; opacity: 1; }
header.desktop_header nav > ul > li:hover ol { opacity: 1; visibility: visible }
header.desktop_header .nav_ctrl { display : flex; align-items: center; gap : 1rem }
header.desktop_header .nav_ctrl button { border-radius: 100%; background-color : var(--point); width : 3rem; height: 3rem }
header.desktop_header .nav_ctrl button svg { width : 1.5rem }
header.desktop_header .nav_ctrl ul { display : flex; align-items: center; }
header.desktop_header .nav_ctrl ul li { position : relative; padding : 0 1rem }
header.desktop_header .nav_ctrl ul li a { color :#999; font-weight: 500; }
header.desktop_header .nav_ctrl ul li.active a { color : #111 }
header.desktop_header .nav_ctrl ul li:first-child:before { display : none }
header.desktop_header .nav_ctrl ul li:before { content : ''; width : 1px; height : 12px; background-color: #b2b2b2; position : absolute; top : 50%; left : 0; transform : translateY(-50%) }

header.mobile_header { position : fixed; top : 0; left : 0; width : 100%; display : none; z-index: 33; }
header.mobile_header .inner { position: relative; display : flex; justify-content: space-between; padding : 1rem; z-index: 9 }
header.mobile_header .inner h1,
header.mobile_header .inner h1 a { display: flex; align-items: center;}
header.mobile_header h1 img { width: 80%; }
header.mobile_header button.open_btn {border-radius: 100%;background-color : var(--point);width : 2rem;height: 2rem;display: flex;align-items: center;justify-content: center;}
header.mobile_header button.open_btn svg { width : 1rem }
header.mobile_header button.close_btn { display : none }
header.mobile_header.active .inner { background-color: #fff;}
header.mobile_header.active .open_btn { display : none }
header.mobile_header.active .close_btn { display : block }
header.mobile_header.active .close_btn svg { width : 25px; height : 25px }

header.mobile_header nav { position : fixed; top : -100%; left : 0; width : 100%; height : 100%; background-color: var(--white); padding-top : 3rem; z-index: 4; overflow : hidden auto; transition : top .7s ease }
header.mobile_header.active nav { top : 0 }
header.mobile_header ul { padding : 1rem }
header.mobile_header ul li { position : relative }

header.mobile_header .depth1 { position : relative; display : block; padding : 1rem 0; border-bottom : 1px solid #cccccc }
header.mobile_header .depth1.active { color : var(--point); border-color : var(--point) }

header.mobile_header ul span { font-weight: 600; }
header.mobile_header .depth1:after { content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23333'%3E%3Cpath d='M480-344 240-584l47.33-47.33L480-438.67l192.67-192.66L720-584 480-344Z'/%3E%3C/svg%3E") no-repeat center center / contain; position : absolute; top : 1rem; right : 0 }
header.mobile_header .depth1.active:after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23e95040'%3E%3Cpath d='M480-545.33 287.33-352.67 240-400l240-240 240 240-47.33 47.33L480-545.33Z'/%3E%3C/svg%3E") no-repeat center center / contain; }

header.mobile_header ul > li:nth-child(3) a:after { display : none }
header.mobile_header ul ol { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
header.mobile_header ul ol li { margin : 1rem 0 }
header.mobile_header ul ol a { position : relative; padding-left : 10px; font-size : .9rem; font-weight: 500 }
header.mobile_header ul ol a:before { content : ''; width : 3px; height : 3px; background-color: var(--point); position : absolute; top : .4rem; left : 0; border-radius : 100% }



#sideMap { position : fixed; top : 0; left : 0; width : 100%; height : 100%; background-color: rgba(0, 0, 0, 0.7); padding : 1.5rem; display: none; z-index: 99; }
#sideMap.active { display: block; }
#sideMap .close_btn { position : absolute; top : 1rem; right : .5rem; }
#sideMap .close_btn svg { width : 1.5rem }
#sideMap .container { max-width : 60rem; background-color: var(--white); padding : 1rem }
#sideMap ul { display : flex; justify-content: space-between; }
#sideMap ul > li { width : 20%; }
#sideMap a { display : block; text-align: center; }
#sideMap ul > li > a { text-align: center; padding : 0.5rem 0 1rem 0; border-bottom : 1px solid #eee }
#sideMap ul span { font-weight: bold; font-size : 1.1rem }
#sideMap ul ol { border : 1px solid #eee; border-top : none; height: calc(100% - 56px); padding : 1rem .5rem }
#sideMap ul ol li { margin : .5rem 0 }
#sideMap ul li:nth-child(2n) ol { background-color: #ffecea; }
#sideMap ul ol a { position : relative; font-size : .75rem; text-align: left; padding-left : 7px }
#sideMap ul ol a:before { content : ''; width : 2px; height : 2px; background-color: #333; position : absolute; top : 10px; left : 0; border-radius: 100%; }
#sideMap ul ol a:hover { color : var(--point); font-weight: 500; }


@media ( max-width : 1300px ) { header.desktop_header nav .depth1 span { line-height : 4rem; font-size : 1rem }
 header.desktop_header nav .depth1 { padding : 0 1rem }
 header.desktop_header .nav_ctrl { gap : .5rem }
 header.desktop_header nav ol a { font-size : .8rem }
 header.desktop_header nav li:first-child ol { width : 220px }
header.desktop_header nav li:nth-child(2) ol { width : 250px }
 }


@media ( max-width : 1200px ) { header.desktop_header { display : none }
 header.mobile_header { display : block }
 }