@charset "utf-8";

*, *:before, *:after{transition:all 300ms;}

#wrap{}
#wrap .wrap{margin:0 auto;width:100%;max-width:1572px;}
#wrap .pg_wrap{display:flex;align-items:center;justify-content:center;margin:64px 0;gap:8px;width:100%;float:unset;}
#wrap .pg_wrap .pg{display:flex;align-items:center;justify-content:center;gap:8px;}
#wrap .pg_wrap .pg_page{display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:40px;height:40px;font-size:16px;font-weight:400;color:#acacac;border:0;border-radius:0;background:transparent;}
#wrap .pg_wrap .pg_page:hover{color:#000000;}
#wrap .pg_wrap .pg_current{background:#000000;font-weight:500;color:#ffffff;}
#wrap .pg_wrap .pg_current:hover{color:#ffffff}
#wrap .pg_wrap .pg_prev{width:24px;height:24px;background:url("../img/sub/pg_prev.svg") no-repeat center / 24px auto;}
#wrap .pg_wrap .pg_next{width:24px;height:24px;background:url("../img/sub/pg_next.svg") no-repeat center / 24px auto;}
#wrap .pg_wrap .pg_start{width:24px;height:24px;background:url("../img/sub/pg_start.svg") no-repeat center / 24px auto;}
#wrap .pg_wrap .pg_end{width:24px;height:24px;background:url("../img/sub/pg_end.svg") no-repeat center / 24px auto;}

#header{position:fixed;top:0;left:0;z-index:10000;width:100%;height:72px;background:#111111;display:flex;align-items:center;justify-content:center;}
#header .logo{}
#header .logo img{display:block;width:48px;height:auto;}
#header .menu{position:absolute;top:24px;left:40px;z-index:2;}
#header .menu a{display:flex;align-items:center;justify-content:center;width:24px;height:24px;}
#header .mypage{position:absolute;top:24px;right:40px;z-index:2;}
#header .mypage a{display:flex;align-items:center;justify-content:center;width:24px;height:24px;}

#menu{position:fixed;top:0;left:0;z-index:10001;height:100dvh;border-radius:0 16px 16px 0;background:#ffffff;box-shadow:16px 16px 30px rgb(0 0 0 / 5%);width:360px;max-width:100%;opacity:0;visibility:hidden;transition: top 150ms, opacity 50ms, visibility 0s;overflow: hidden;}
#menu.active{opacity:1;visibility:visible;}
#menu.active .menu .dp1 .dl1 .da1.on ~ .dp2{opacity:1;visibility:visible;}
#menu.hover{width:640px;}
#menu *{transition:100ms;}
#menu .head{}
#menu .link{display:none;}
#menu .close{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:24px;height:72px;}
#menu .close:after{content:'';position:absolute;bottom:0;left:0;width:100%;border-bottom:1px solid #eaeaea;}
#menu .close a{display:flex;align-items:center;justify-content:center;gap:8px;}
#menu .close a:after{content:'';width:20px;height:20px;background:url("../img/main/close.svg") no-repeat 50% 50% / contain;text-indent:-9999em;}
#menu .close a:before{content:'Close';font-size:18px;font-weight:300;color:#111111;}
#menu .menu{position:relative;padding:24px 0;}
#menu .menu .dp1{display:flex;flex-direction:column;width:360px;}
#menu .menu .dp1 .dl1{padding:0 24px;}
#menu .menu .dp1 .dl1 .da1{display:flex;align-items:center;height:57px;font-size:16px;font-weight:300;color:#909090;}
#menu .menu .dp1 .dl1 .da1 span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
#menu .menu .dp1 .dl1 .da1:after{content:'';flex:0 0 auto;width:16px;height:16px;background:url("../img/main/link.svg") no-repeat 50% 50% / contain;margin:0 0 0 auto;opacity:0.35;}
#menu .menu .dp1 .dl1 .da1:hover{color:#111111;}
#menu .menu .dp1 .dl1 .da1.on{color:#111111;}
#menu .menu .dp1 .dl1 .da1.on:after{opacity:1;}
#menu .menu .dp2{position:absolute;top:0;left:360px;padding:24px 24px 24px;display:flex;flex-direction:column;width:280px;height:calc(100dvh - 72px);background:#fafafa;opacity:0;visibility:hidden;border-radius:0 8px 8px 0;overflow-y: auto;}
#menu .menu .dp2 .dl2{}
#menu .menu .dp2 .dl2 .da2{display:flex;align-items:center;height:57px;font-size:16px;font-weight:300;color:#909090;}
#menu .menu .dp2 .dl2 .da2:hover,
#menu .menu .dp2 .dl2 .da2.on{color:#111111;opacity:1;}

#footer{position:relative;z-index:9998;background:#111111;}
#footer .wrap{position:relative;max-width:1560px;width:100%;margin:0 auto;}
#footer .menu{position:relative;padding:28px 0 14px 0;display:flex;}
#footer .menu:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:#222222;}
#footer .menu a{display:flex;align-items:center;line-height:22px;font-size:16px;font-weight:500;color:#909090;}
#footer .menu a strong{font-weight:500;color:#c5a880;}
#footer .menu a:after{content:'';margin:0 10px;width:1px;height:12px;background:#434343;}
#footer .menu a:last-child:after{display:none;}
#footer .footer{position:relative;padding:60px 0;display:flex;flex-direction:column;}
#footer .logo{position:absolute;bottom:60px;right:0;}
#footer .address{}
#footer .address ul{display:flex;flex-wrap:wrap;}
#footer .address ul + ul{margin-top:8px;}
#footer .address li{display:flex;align-items:center;line-height:22px;font-size:16px;font-weight:300;color:#909090;}
#footer .address li:after{content:'';margin:0 6px;width:2px;height:2px;background:#909090;border-radius:2px;}
#footer .address li:last-child:after{display:none;}
#footer .address li a{display:flex;align-items:center;justify-content:center;margin:0 0 0 8px;padding:0 8px;height:22px;border-radius:2px;border:1px solid #c5a880;font-size:12px;font-weight:300;color:#c5a880;}
#footer .social{position:absolute;top:0;right:0;display:flex;gap:16px;align-items:center;padding:24px 0 8px;}
#footer .social a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;}
#footer .cite{line-height:20px;font-size:14px;font-weight:100;color:#909090;margin:48px 0 0 0;}

#container{position:relative;z-index:9999;padding:72px 0 0;min-height:calc(100dvh - 346px);}

#intro{position:fixed;top:0;left:0;width:100%;height:100dvh;display:flex;}
#intro:before{content:'';position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:286px;height:auto;aspect-ratio:1/1;background:url("../img/main/intro_mark.png") no-repeat center / contain;pointer-events:none;}
#intro .intro{position:relative;flex:1;width:50%;}
#intro .intro a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;}
#intro .intro a:hover .image:before{background:rgb(0 0 0 / 20%);}
#intro .intro .text{position:relative;z-index:2;}
#intro .intro .text .tit{line-height:45px;font-size:32px;font-weight:300;color:#ffffff;font-family: 'Bookk', sans-serif;;margin:0 0 8px 0;}
#intro .intro .text .txt{line-height:28px;font-size:20px;font-weight:500;color:#ffffff;}
#intro .intro .image{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;}
#intro .intro .image:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / 80%);transition:all 300ms;}
#intro .intro .image img{display:block;width:100%;height:100%;object-fit:cover;}

@media all and (max-width:748px) {
    #header{height:64px;}
    #header .logo{}
    #header .logo img{height:40px;}
    #header .menu{top:20px;left:16px;}
    #header .mypage{top:20px;right:16px;}

    #menu{top:0;left:0;width:100%;height:100dvh;}
    #menu.active{top:0;border-radius:0;}
    #menu.hover .menu{}
    #menu.hover .menu .dp1{width:123px;}
    #menu.hover .menu .dp1 .dl1 .da1{height:50px;}
    #menu.hover .menu .dp1 .dl1 .da1:after{display:none;}
    #menu .head{display:flex;align-items:center;justify-content:space-between;height:64px;background:#111111;padding:0 16px;}
    #menu .link{display:flex;align-items:center;justify-content:flex-start;gap:16px;}
    #menu .link a{font-size:14px;color:#ffffff;font-weight:200;}
    #menu .close{padding:20px 0;}
    #menu .close a{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:url("../img/main/close_w.svg") no-repeat 50% 50% / contain;}
    #menu .close a:before,
    #menu .close a:after{display:none;}
    #menu .menu{position:relative;padding:8px 0;height:calc(100dvh - 64px);overflow-y:auto;}
    #menu .menu .dp1{width:100%;gap:0;}
    #menu .menu .dp1 .dl1{padding:0;}
    #menu .menu .dp1 .dl1 .da1{padding:0 16px;height:54px;color:#111111;}
    #menu .menu .dp1 .dl1 .da1.on{background:#fafafa;}
    #menu .menu .dp2{left:123px;width:calc(100% - 123px);height:calc(100dvh - 64px);padding:8px 0;overflow-y:auto;}
    #menu .menu .dp2 .dl2{padding:0;}
    #menu .menu .dp2 .dl2 .da2{padding:0 16px;height:54px;color:#111111;}
    #menu .menu .dp2 .dl2 .da2:after{content:'';flex:0 0 auto;width:16px;height:16px;background:url("../img/main/link.svg") no-repeat 50% 50% / contain;margin:0 0 0 auto;opacity:0.35;}

    #footer{padding:0;display:flex;flex-direction:column;}
    #footer .footer{padding:40px 16px 20px;}
    #footer .logo{order:10;margin:40px 0 0;position:relative;bottom:0;}
    #footer .logo a{display:block;width:60px;height:60px;}
    #footer .logo img{display:block;width:60px;height:60px;}
    #footer .menu{order:1;border-bottom:1px solid #222222;height:54px;padding:0 16px;margin:0;}
    #footer .menu a{font-size:16px;font-weight:300;}
    #footer .address{order:2;}
    #footer .address ul{display:block;}
    #footer .address li{display:inline;line-height:25px;font-size:15px;font-weight:300;}
    #footer .address li a{display:flex;align-items:center;height:21px;width:60px;font-size:12px;margin:4px 0 0 0;}
    #footer .cite{order:3;position:relative;bottom:unset;right:unset;font-size:13px;font-weight:300;}
    #footer .social{top:unset;bottom:16px;right:16px;}

    #container{padding:64px 0 0 0;}

    #intro{flex-direction:column;}
    #intro:before{content:'';position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:164px;height:auto;aspect-ratio:1/1;background:url("../img/main/intro_mark.png") no-repeat center / contain;pointer-events:none;max-width:50vw;}
    #intro .intro{width:100%;height:50%;}
    #intro .intro .image:before{background:rgb(0 0 0 / 50%)}
    #intro .intro .text .tit{line-height:39px;font-size:28px;margin:0 0 4px 0;}
    #intro .intro .text .txt{line-height:25px;font-size:18px;font-weight:300;}

}