body {
  margin:0;
  padding:0;
  font-family: 'NotoSerifKR-Regular';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  min-height: 100%;
  background:white;
}

#root {
  min-height: 100%;
}

html {
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: inherit;
}

header{
  position: absolute;
  max-width: 1920px;
  width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 12;
}

header .logo img{
  width:130px;
}

header .nav{
  position: relative;
  width: 305px;
  display: flex;
  flex-direction: row;
  font-family: 'Quicksand-Light';
  font-size: 18px;
  color:black;
}

header .nav .nav_about,
header .nav .nav_interview
{
  width: 122.5px;
  margin-right: 30px;
  cursor: pointer;
}
header .nav .nav_menu_btn{
  position: absolute;
  right:0;
  cursor: pointer;
}

header .nav .nav_menu_btn img{
  width:38px;
}

.container.title{
  display: flex;
  flex-direction: column;
  max-width: none;
  position: relative;
  align-items: center;
  height: 1490px;
  width: 100%;
  background: #c882fa;
  min-height: 100%;
  background-position: center;
  background-size: cover;
  padding:0;
  justify-content: flex-start;
}

.container.title.page2{
  background: #fafa64;
  height: 1400px;
}

.container.title.page3{
  background: #82ffb4;
  height: 1440px;
}

.container.title.page4{
  background: #f06e5a;
  height: 1400px;
}

.container.title.page5{
  background: #8cfa64;
  height: 1440px;
}

.container.title.page6{
  background: #faa032;
  height: 1369px;;
}

.container.title.page7{
  background: #78b4fa;
  height: 1400px;
}


.container.title .page_title{
  margin-top: 150px;
  width:500px;
}

.container.title .page_title .p3{
  margin-top: 150px;
  width:470px;
}

.container.title .page_title.p7{
  margin-top: 150px;
  width:300px;
}

.container.title .page_img{
  width: 560px; padding-top:65px;
}

.container.title .desc{
  font-family: 'NotoSerifKR-Regular';
  font-size: 28px;
  padding-top: 100px;
  line-height: 38px;
  text-align: center;
}

.container{
  max-width: 1300px;
  padding: 100px 0 0 0;
  width: 100%;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.container + .container{
  padding: 100px 0 0 0;
}

.container.content1{
  max-width: 1300px;
  /* height:2075px; */
  padding: 100px 0 80px 0;
  width: 100%;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  z-index: 10;
}

.container .table{
  display: flex;
}

.container .table .left{
  display: inline-block;
  width: 635px;
  border:0;
  border-top: 1px solid black;
  margin-right: 30px;
}

.container .table .right{
  display: inline-block;
  border:0;
  width: 635px;
  border-top: 1px solid black;
  font-size: 22px;
  line-height: 38px;
}

.container .table .left.odd{
  display: inline-block;
  width: 384px;
  border:0;
  border-top: 1px solid black;
  margin-right: 30px;
}

.container .table .right.odd{
  display: inline-block;
  border:0;
  width: 886px;
  border-top: 1px solid black;
  font-size: 22px;
  line-height: 38px;
}

.container .table .left.odd2{
  display: inline-block;
  width: 967px;
  border:0;
  border-top: 1px solid black;
  margin-right: 30px;
}

.container .table .right.odd2{
  display: inline-block;
  border:0;
  width: 303px;
  border-top: 1px solid black;
  font-size: 22px;
  line-height: 38px;
}

.container .table .left.full{
  display: inline-block;
  border:0;
  width: 1300px;
  border-top: 1px solid black;
  font-size: 22px;
  line-height: 38px;
  border:0 
}

.container .table .left.noborder,
.container .table .right.noborder
{
 border:0 
}

.container .table .left .interview_title,
.container .table .right .interview_title
{
  font-family: 'NotoSerifKR-Bold';
  font-size: 35px;
  line-height: 45px;
  color:#c882fa;
  padding-bottom: 50px;
  transition: 0.75s;
}

.container .table .left .interview_q,
.container .table .right .interview_q{
  font-family: 'NotoSerifKR-Bold';
  font-size: 22px;
  line-height: 37px;
  color:#c882fa;
  /* padding-bottom: 20px; */
  transition: 0.75s;
  padding-bottom: 30px;
}


.container .table .left .interview_a,
.container .table .right .interview_a{
  font-size: 22px;
  line-height: 37px;
  color:black;
  transition: 0.75s;
  padding:0 0 50px 0;
}

.container .table .left .interview_a .bold,
.container .table .right .interview_a .bold{
  font-family: 'NotoSerifKR-Bold';
}

.container .table .right .interview_a +.container .table .right .interview_a{
  padding-top: 0;
}

.container .table .left .interview_title.p2,
.container .table .right .interview_title.p2,
.container .table .left .interview_q.p2,
.container .table .right .interview_q.p2
{
  color:#fafa64;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.container .table .left .interview_title.p3,
.container .table .right .interview_title.p3,
.container .table .left .interview_q.p3,
.container .table .right .interview_q.p3{
  color:#82ffb4;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.container .table .left .interview_title.p4,
.container .table .right .interview_title.p4,
.container .table .left .interview_q.p4,
.container .table .right .interview_q.p4{
  color:#f06e5a;
}

.container .table .left .interview_title.p5,
.container .table .right .interview_title.p5,
.container .table .left .interview_q.p5,
.container .table .right .interview_q.p5{
  color:#8cfa64;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.container .table .left .interview_title.p6,
.container .table .right .interview_title.p6,
.container .table .left .interview_q.p6,
.container .table .right .interview_q.p6{
  color:#faa032;
}

.container .table .left .interview_title.p7,
.container .table .right .interview_title.p7,
.container .table .left .interview_q.p7,
.container .table .right .interview_q.p7{
  color:#78b4fa;
}

.container .table.heart{
  position: relative;
}
.container .table.heart .heart_p3{
  position: absolute;
  top:20px;
  left:50%; 
  transform:translateX(-50%);
  width:635px;
  z-index: 12;
  /* opacity:0.5; */
}
.container .table.heart .heart_p4{
  position: absolute;
  top: 235px;
  left: 70%; 
  transform:translateX(-50%);
  width:745px;
  z-index: 12;
  opacity:0.5;
}

.container .table .left .interview_a.p3 .heart_left {
  shape-outside: polygon(100% 8%, 100% 99%, 18% 56%, 1% 43%, 0% 41%, -3% 25%, 32% 0);
  float: right;
  width:330px;
  height: 500px;
}

.container .table .right .interview_a.p3 .heart_right {
  shape-outside: polygon(0 0, 0% 100%, 0 100%, 6% 97%, 93% 51%, 110% 21%, 80% 0);
  float: left;
  width:330px;
  height: 500px;
}

.container .table .left .heart_left_p4 {
  shape-outside: polygon(100% 8%, 100% 109%, 18% 57%, 1% 44%, 0% 41%, -3% 25%, 24% 0);
  float: right;
  width: 460px;
  height: 632px;
}


.container .table .left .heart_left_p5 {
  shape-outside: polygon(100% 0%, 58% 115%, 12% 59%, 8% 50%, 5% 37%, 5% 19%, 16% 0);
  float: right;
  width: 458px;
  height: 336px;
}


.container .table .left img,
.container .table .right img{
  width:100%;
  margin: 100px 0 80px;
}

.container .table .right img.middle2{
  margin:0 0 100px;

}


.container.content1 img{
  width: 100%;
}

.container .left .nav,
.container .right .nav{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 635px;
  border-bottom: 1px solid black;
}

.container .left .nav.anchor_nav,
.container .right .nav.anchor_nav{
  cursor: pointer;
}

.container .left .nav .num,
.container .right .nav .num{
  font-family: "Quicksand-Bold";
  font-size: 20px;
  line-height: 42px;
}
.container .left .nav .title,
.container .right .nav .title{
  font-family: 'NotoSerifKR-Bold';
  font-size: 20px;
  line-height: 42px;
}

.container.content2{
  max-width: 1300px;
  /* height:3472px; */
  padding: 100px 0 0 0;
  width: 100%;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  z-index: 10;
}

.parallax2 {
  /* The image used */
  /* margin: 100px 0 80px; */
  background-image: url("./assets/images/page1_middle.png");

  /* Set a specific height */
  min-height: 800px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax3 {
  /* The image used */
  /* margin: 100px 0 80px; */
  background-image: url("./assets/images/page2_img1.png");

  /* Set a specific height */
  min-height: 800px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 100px 0 0;
}

.parallax4 {
  /* The image used */
  /* margin: 100px 0 80px; */
  background-image: url("./assets/images/page3_img4.png");

  /* Set a specific height */
  min-height: 800px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 100px 0 0;
}

.parallax5 {
  /* The image used */
  /* margin: 100px 0 80px; */
  background-image: url("./assets/images/page4_img4.png");

  /* Set a specific height */
  min-height: 800px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 100px 0 0;
}

.parallax6 {
  /* The image used */
  /* margin: 100px 0 80px; */
  background-image: url("./assets/images/page7_img4.png");

  /* Set a specific height */
  min-height: 800px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 100px 0 0;
}

.container .footer_interview{
  font-size: 20px;
  line-height: 24px;
  /* position: absolute; */
  width: 580px;
  left: 0;
  right: 0;
  margin: 80px auto;
  padding: 0 60px;
  bottom: 120px;
  color: black;
}

.container .footer_interview .more_btn{
  font-family: 'NotoSerifKR-Bold';
  line-height: 60px;
  width: 580px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: black 0.5px solid;
}


@media screen and (max-width: 768px) {

  
  .parallax2,
  .parallax3,
  .parallax4,
  .parallax5,
  .parallax6 {
    background-attachment: unset;
  }
}