/*Font Road*/
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');

@font-face {
  font-family: 'Paperlogy';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.otf') format('opentype'),
        url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.ttf') format('truetype');
}



body{ font-family: 'GMarketSans', 'Paperlogy', Pretendard;}

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
/*img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}*/

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

body {
	line-height: 1;   
    background-color: #000000;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clear {
  clear: both; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

.hidden {
  font: 0px;
  height: 0;
  overflow: hidden;
  position: absolute;
  visibility: hidden;
  width: 0;
  text-indent: -99999px; }
/*reset_end*/

#wrap { 
    width: 100%; 
    position: relative; 
    margin: 0 auto;    
    max-width: 1920px;     
}

/*링크 컨트롤
a {
  text-decoration: none;
  color: inherit;
  line-height: 1;
}*/

/* 공통 a 스타일 초기화 
a, .link, .link-text {
  text-decoration: none;
  color: inherit;
  line-height: 1;
}*/

.m_effect {
  display: block; /* 링크 영역 전체를 클릭 가능하게 */
  text-decoration: none;  
  transition: transform 0.3s ease-out, filter 0.3s ease-out; 
}

.m_effect img {
  display: block; 
  max-width: 100%;
  height: auto;
  filter: brightness(100%); 
  transition: filter 0.3s ease-out; 
}

.m_effect:hover {  
  filter: brightness(130%);   
  transform: scale(1.05); 
}

/* 컨텐츠 관련 */
.contents { width:100%; height:9350px; display:flex; justify-content:center; flex-direction: column; }
.section_1 { width:100%; height:1080px; background-image:url('//image.brabragames.jp/dnr/update/251224/update_image_01.png'); background-repeat:no-repeat; }
.section_1 .menu_btn_1{ position:absolute; top:520px; left:275px; z-index:5;}

.section_1 .menu_btn_2{ position:relative; top:850px; left:414px; width:196px; height:172px; background-image: url('//image.brabragames.jp/dnr/update/251224/btn_02_off.png'); background-repeat:no-repeat; z-index:7; }
.section_1 .menu_btn_2::before { 
    position: absolute; 
    content: "";
    top: 0; 
    left: 0;
    width:196px; 
    height:172px;   
    opacity: 0; 
    background-image: url('//image.brabragames.jp/dnr/update/251224/btn_02_on.png'); background-repeat:no-repeat;
    transition: opacity 0.3s ease-in-out; 
    cursor: pointer; 
  }
.section_1 .menu_btn_2:hover::before { opacity: 1; }

.section_1 .menu_btn_3{ position:relative; top:593px; left:556px; width:196px; height:172px; background-image: url('//image.brabragames.jp/dnr/update/251224/btn_03_off.png'); background-repeat:no-repeat; z-index:6; }
.section_1 .menu_btn_3::before { 
    position: absolute; 
    content: "";
    top: 0; 
    left: 0;
    width:196px; 
    height:172px;   
    opacity: 0; 
    background-image: url('//image.brabragames.jp/dnr/update/251224/btn_03_on.png'); background-repeat:no-repeat;
    transition: opacity 0.3s ease-in-out; 
    cursor: pointer; 
  }
.section_1 .menu_btn_3:hover::before { opacity: 1; }

.section_1 .menu_btn_4{ position:relative; top:507px; left:698px; width:196px; height:172px; background-image: url('//image.brabragames.jp/dnr/update/251224/btn_04_off.png'); background-repeat:no-repeat;z-index:5; }
.section_1 .menu_btn_4::before { 
    position: absolute; 
    content: "";
    top: 0; 
    left: 0;
    width:196px; 
    height:172px;   
    opacity: 0; 
    background-image: url('//image.brabragames.jp/dnr/update/251224/btn_04_on.png'); background-repeat:no-repeat;
    transition: opacity 0.3s ease-in-out; 
    cursor: pointer; 
  }
.section_1 .menu_btn_4:hover::before { opacity: 1; }

.section_1 .menu_btn_5{ position:relative; top:251px; left:840px; width:196px; height:172px; background-image: url('//image.brabragames.jp/dnr/update/251224/btn_05_off.png'); background-repeat:no-repeat; z-index:4; }
.section_1 .menu_btn_5::before { 
    position: absolute; 
    content: "";
    top: 0; 
    left: 0;
    width:196px; 
    height:172px;   
    opacity: 0; 
    background-image: url('//image.brabragames.jp/dnr/update/251224/btn_05_on.png'); background-repeat:no-repeat;
    transition: opacity 0.3s ease-in-out; 
    cursor: pointer; 
  }
.section_1 .menu_btn_5:hover::before { opacity: 1; }
.section_2 { width:100%; height:1091px; background-image:url('//image.brabragames.jp/dnr/update/251224/update_image_02.png'); background-repeat:no-repeat;}
.section_2 .dn_video { position:absolute; top:1455px; right:270px; }
.section_3 { width:100%; height:2409px; background-image:url('//image.brabragames.jp/dnr/update/251224/update_image_03.png'); background-repeat:no-repeat;}
.section_4 { width:100%; height:1599px; background-image:url('//image.brabragames.jp/dnr/update/251224/update_image_04.png'); background-repeat:no-repeat;}
.section_5 { width:100%; height:1661px; background-image:url('//image.brabragames.jp/dnr/update/251224/update_image_05.png'); background-repeat:no-repeat;}
.section_6 { width:100%; height:1343px; background-image:url('//image.brabragames.jp/dnr/update/251224/update_image_06.png'); background-repeat:no-repeat;}
.copyright { width:100%; height:167px; background-image:url('//image.brabragames.jp/dnr/update/251224/update_image_07.png'); background-repeat:no-repeat;}

.btn_patch { width:298px; height:76px; top:1120px; left:50%; transform:translateX(-50%); background-image:url('//image.brabragames.jp/dnr/update/251224/btn_06_off.png'); background-repeat:no-repeat;display: flex; justify-content: space-between; position:relative; } 



.hover-effect {
    /* 기본 밝기 설정 (100%는 원본 밝기) */
    filter: brightness(100%); 
    
    /* 2. 전환(transition) 속성 설정 (필수!)
      0.3초 동안 filter 속성의 변화가 부드럽게 일어나도록 설정합니다.
      (다른 속성이 아닌 filter 속성만 지정하는 것이 성능에 좋습니다.)
    */
    transition: filter 0.3s ease-in-out; 
    
    /* 혹시 모를 브라우저 호환성을 위해 접두사 사용 가능 (최신 브라우저에서는 불필요) */
    /* -webkit-transition: filter 0.3s ease-in-out; */
}

/* 3. 마우스 오버 시 (Hover) 상태 정의
*/
.hover-effect:hover {
    /* 마우스 오버 시 밝기를 130%로 증가시켜 살짝 밝아지게 합니다. */
    filter: brightness(130%);
}