@import 'reset.css';
@import 'common.css';

@font-face {
    font-family: 'Gilroy';
    src: url('../font/Gilroy-Light.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 300
}
@font-face {
    font-family: 'Gilroy';
    src: url('../font/Gilroy-Medium.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 400
}
@font-face {
    font-family: 'Gilroy';
    src: url('../font/Gilroy-Medium.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 500
}
@font-face {
    font-family: 'Gilroy';
    src: url('../font/Gilroy-Semibold.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 600
}
@font-face {
    font-family: 'Gilroy';
    src: url('../font/Gilroy-Bold.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 700
}
@font-face {
    font-family: 'Gilroy';
    src: url('../font/Gilroy-ExtraBold.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 800
}
@font-face {
    font-family: 'SFPro';
    src: url('../font/SFProKRDisplay_light.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 300
}
@font-face {
    font-family: 'SFPro';
    src: url('../font/SFProKRDisplay_regular.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 400
}
@font-face {
    font-family: 'SFPro';
    src: url('../font/SFProKRDisplay_medium.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 500
}
@font-face {
    font-family: 'SFPro';
    src: url('../font/SFProKRDisplay_semibold.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 600
}
@font-face {
    font-family: 'SFPro';
    src: url('../font/SFProKRDisplay_bold.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 700
}

body{
   
    font-family: 'Gilroy','SFPro',sans-serif;
    /* font-family: 'proxima',sans-serif; */
    background: #fff;
    min-width:1400px;
    

}
body.hidden{
    overflow: hidden;
}

header{padding: 0 20px; position: fixed; z-index: 1; width: 100%;mix-blend-mode: difference; }
header.block{mix-blend-mode: normal;}
header .logo{
    z-index: 10;
    position: absolute; top: 30px; left:40px; 
    width: 150px;
    height: 96px;

  
    
    
}
header .logo a{
    display: inline-block; width: 100%;
    color:#fff; font-size: 20px; margin: auto;;
    
   
   }
header .side_menu,
.close_btn{padding: 30px; position: absolute;top: 10px;right: 40px; 
box-sizing: border-box;z-index: 10;}
.side_menu a{display: block; height: 100%; width: 100%; }
.side_menu a span{   
    display: block;
    width: 22px; height: 2px; margin-bottom: 5px; background:#fff;}
.side_menu a span:last-child{width: 18px; height: 2px;}
/* 사이드메뉴 */
.menu_page{
    
    display: none;
    position: absolute;
    top: 0;
    z-index: 10 ;
    right: -100%;
    background: #fff;   
    height: 100vh;
    transition:1s;
    opacity: .3;
    
    mix-blend-mode: normal;
}

.menu_page.on{
display: block;
  right: 0;
  opacity: 1;
  transition:1.5s;
}

.close_btn{
    display: block;  
    z-index: 10;
     width: 22px;
     height: 22px;
     
}
.close_btn a {display: block; height: 100%;}
.close_btn span{
    display: block;
    width: 22px; height: 2px;background: #000;
}
.close_btn span:nth-child(2){
    position: absolute;
    transform: rotate(-45deg);
}
.close_btn span:nth-child(3){
    transform: rotate(45deg);
}
.menu_wrap{padding: 190px 30px 210px 45px; position: relative;}

.menu_wrap .top{display: flex;justify-content: center; width: 100%; height: 400px;}

.menu_wrap .left_area{width: 245.95px;display: block; }
.menu_wrap .left_area p{color: rgba(0,0,0,.3);font-size: 16px;padding-bottom: 16px; }
.menu_wrap .left_area a{display: block; width: 100%;color: rgba(0,0,0);font-size: 16px; padding: 12px 0;}

.menu_wrap .right_area{width: 368.4px;display: block;}
.menu_wrap .right_area p:first-child{color: rgba(0,0,0,.3);font-size: 16px; line-height: 1;padding-bottom: 16px; }
.menu_wrap .right_area a{font-size: 60px; display: block;line-height: 74px; display: inline-block;}
.menu_wrap .right_area p:last-child a::after{
    content: '';
    display: inline-block;
    width: 100%;
    height:1 px;
    vertical-align:740px;
    background: #000;
}

.menu_wrap .bottom{padding-top: 70px;}
.menu_wrap .bottom p{color: rgba(0,0,0,.3);font-size: 16px;padding-bottom: 16px; }
.menu_wrap .bottom a{display: inline-block; width: 100%;color: rgba(0,0,0);font-size: 16px; padding: 12px 0; text-decoration: underline;}