/* font */
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* //font */

:root {
  --black : #000000;
  --gray_8 : #888888;
  --wt : #fff;
  --wt_f5 : #f5f5f5;
}

button,a,td,th,dl,dt,dd,input,textarea,select {font-family: 'Pre';}
body {font-family: 'Pre';}
.container {max-width: 1400px; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box;}
.sec1 {position: relative; padding-top: 120px; padding-bottom: 71px; z-index: 1;}
.sec1:before {position: absolute; top: 0; left: 0; content: ''; display: block; width: 933px; height: 880px; background: url(./../img/sec1_bg1.webp)no-repeat 50% 50%; background-size: cover; z-index: -1;}
.sec1:after {position: absolute; bottom: 0; right: 0; content: ''; display: block; width: 1197px; height: 588px; background: url(./../img/sec1_bg2.webp)no-repeat 50% 50%; background-size: cover; z-index: -1;}

.sec2 {position: relative; padding-top: 89px; padding-bottom: 160px; z-index: 1;}
.sec2:before {position: absolute; top: 28px; right: 0; content: ''; display: block; width: 917px; height: 880px; background: url(./../img/sec2_bg2.webp)no-repeat 50% 50%; background-size: cover;}
.sec2:after {position: absolute; bottom: -258px; left: -234px; content: ''; display: block; width: 917px; height: 486px; background: url(./../img/sec2_bg3.webp)no-repeat 50% 50%; background-size: cover; z-index: -1;}
.sec2 .container {position: relative;}
.sec2 .container:before {position: absolute; top: -120px; left: -116px; content: ''; display: block; max-width: 626px; width: 100%; height: auto; aspect-ratio: 16/3; background: url(./../img/sec2_bg1.webp)no-repeat 50% 50%; background-size: cover;}

/* tit-box */
.tit-box {margin-bottom: 48px; text-align: center;}
.tit-box .sub {margin-bottom: 12px; font-size: 28px; font-weight: bold; line-height: 1; color: var(--black);}
.tit-box .tit {margin-bottom: 40px; font-size: 56px; font-weight: bold; line-height: 1; color: var(--black);}
.tit-box .txt {font-size: 21px; font-weight: 600; line-height: 1; color: var(--gray_8);}