:root {
  color: #111;
  font-size: 16px;
  font-family: "NanumSquareNeo", Arial, Helvetica, sans-serif;
  --red: #FF2627;
  --red-gradation:linear-gradient(270deg, #FF9AA1 0%, #F92728 102.64%);
  --lightred: #FFF2F2;
  --white: #ffffff;
  --container_width-01: 1400px;
  --container_width-02: 1100px;
  --contents-space10:10px;
  --contents-space20:20px;
  --contents-space40:40px;
  --contents-space80:80px;
}

html,
body {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none !important;
  color: #222;
}

* {
  margin: 0;
}

@font-face {
  font-family: "NanumSquareNeoLight";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf) format("truetype");
}
@font-face {
  font-family: "NanumSquareNeo";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}
@font-face {
  font-family: "NanumSquareNeoBold";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
}
@font-face {
  font-family: "NanumSquareNeoExtraBold";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format("truetype");
}
@font-face {
  font-family: "NanumSquareNeoHeavy";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format("truetype");
}
@font-face {
  font-family: "NanumSquareNeoVariable";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.ttf) format("truetype");
}
.navigation {
  width: 100%;
}
.navigation .navbar {
  margin: auto;
  width: var(--container_width-01);
  padding: 20px 0;
}

.top-visual {
  width: var(--container_width-01);
  height: 490px;
  background-image: url(img/canada_bg.png);
  border-radius: 40px;
  margin: auto;
}
.top-visual .title {
  width: var(--container_width-02);
  margin: auto;
  padding-top: var(--contents-space80);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--contents-space10);
}
.top-visual .title h1 span {
  font-family: "NanumSquareNeoBold";
}

.contents {
  width: var(--container_width-02);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: var(--contents-space80);
}
.contents .address {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--contents-space40);
}
.contents .address .address-text {
  display: flex;
  flex-direction: column;
  gap: var(--contents-space10);
}
.contents .address .address-text .title {
  display: flex;
  gap: var(--contents-space10);
}
.contents .address .address-text .title img {
  width: 18.074px;
  height: 24px;
}
.contents .address .address-text .title h1 {
  color: var(--gray01, #111);
  font-family: "NanumSquareNeoBold";
  font-size: 24px;
  letter-spacing: -1.2px;
}
.contents .address .canada-btn {
  text-align: left;
  width: 226px;
  padding: 20px;
  flex-shrink: 0;
  border-radius: var(--contents-space10);
  background: var(--red, #F92728);
  border: none;
}
.contents .address .canada-btn a {
  display: flex;
  justify-content: space-between;
}
.contents .address .canada-btn a .text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contents .address .canada-btn a .text p {
  color: var(--white, #FFF);
  font-size: 18px;
  letter-spacing: -0.9px;
}
.contents .address .canada-btn a .text p .bold {
  font-family: "NanumSquareNeoExtraBold";
}
.contents .spot-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--contents-space10);
}
.contents .spot-group .spot {
  background-color: var(--lightred);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: 10px;
}
.contents .spot-group .spot .title {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.contents .spot-group .spot .title h3 {
  font-family: "NanumSquareNeoBold";
}
.contents .spot-group .spot p {
  font-size: 12px;
}
.contents .spot-group .recruiting {
  border-radius: var(--contents-space10);
  border: 1px solid var(--red);
  background: var(--white, #FFF);
  color: var(--red);
  font-family: "NanumSquareNeoBold";
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--contents-space10);
}
.contents .spot-group .recruiting img {
  width: 25px;
  height: 25px;
}
.contents .affiliation {
  margin-bottom: var(--contents-space80);
}
.contents .affiliation h1 {
  margin-bottom: var(--contents-space20);
  font-family: "NanumSquareNeoBold";
  font-size: 24px;
}
.contents .affiliation .flow {
  width: 1100px;
  height: 132px;
  padding: 0 40px;
  background-image: url(img/flow_bg.svg);
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  margin-bottom: var(--contents-space20);
}
.contents .affiliation .flow .step {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--contents-space10);
  width: 950px;
}
.contents .affiliation .flow .step span {
  display: flex;
  height: 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid var(--red);
  color: var(--red);
  background: var(--white, #FFF);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-family: "NanumSquareNeoBold";
}