/* @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); */
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css");
/* @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

@font-face {font-family: 'Noto Sans KR';
  unicode-range: U+AC00-D7AF;
  font-style: normal;font-weight: 100;src: 
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) 
  format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) 
  format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) 
  format('opentype');} 
  @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: 
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
     @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
       @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');} 
        @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: 
          url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2')
          ,url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
          url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');} 
          @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: 
            url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
            url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
            url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}
             body, h1, h2, h3, h4, h5, h6, input, textarea, select 
             { font-family: 'Noto Sans KR', sans-serif; }

    @font-face {
  font-family: 'Hahmlet';
  unicode-range: U+0041-005A, U+0061-007A;
  src: url(//fonts.googleapis.com/css2?family=Hahmlet:wght@300;400;500&display=swap);
}

@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;400;500&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
  text-decoration: none;
}



video{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -2;
  opacity: 0.9;
}

.overlay{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: -1;
}



p{ word-break: keep-all;
   text-align: left;
}

html{
  scroll-behavior: smooth;
}

/* custom scroll bar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* all similar content styling codes */
section{
  padding: 100px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: left;
  justify-content: flex-start;
  /* min-height:100vh; */
  
}

/* 스크롤 fade in */
.scrollFade {
  opacity: 1;
  pointer-events: all;
}

.scrollFade--hidden {
  opacity: 0;
  pointer-events: none;
}

.scrollFade--visible {
  opacity: 1;
  pointer-events: all;
}

.scrollFade--animate {
  transition: opacity 0.4s ease-in-out;
}



.home::before {
  animation: bounce 1s ease infinite;
  bottom: 2rem;
  color: rgb(255, 255, 255, 0.5);
  content: '╲╱';
  font-size: 1.5rem;
  font-weight: 600;
  height: 4rem;
  left: 50%;
  letter-spacing: -1px;
  line-height: 4rem;
  margin-left: -3rem;
  opacity: 0.8;
  position: absolute;
  text-align: center;
  width: 2rem;
}

@keyframes bounce {
  50% {
    transform: translateY(-50%);
  }
}

.max-width{
  max-width: 1300px;
  /* padding: 0 80px; */
  margin: auto;
  
}

/*배경 흰색인 section*/
.section2, .section3, .section3-2, .section9,
.section8, .section10, .section7, .section20, .section13,
.section10  .wrapper {
background: rgb(255, 255, 255);
}



.section1, .section2, .section3, .section3-2, .section4,
.section5, .section6, .section7, .section8, .section8-1, .section9, .section10,
.section11, .section12{
  font-family: 'Noto Sans KR', sans-serif;
  }


 .section2, .section2-content,.section2-content-2, .section3, 
.section4,
.section5, .section7,.section10-content .section11, .section12,
.section2-content, .section3-content, .section3-2-content,.section4-content, .section4-2-content,
.section8, .section8-content,
.section5-content,  .section11-content, .section12-content  {
  display: flex;
  flex-wrap: wrap;
  align-items: left;
  align-content: left;
  justify-content: flex-start;
}



/*2-column layout section*/
.section1-content,
.section1,
.section3,.section3-content-2,
.section3-2,.section3-2-content,
.section4, .section4-content-2,
.section5, .section5-content,
.section12, .section12-content
{
  display: flex;
  flex-direction: row;
  align-items: left;
  justify-content: left;
  align-items: flex-start;
}





section .title{
  position: relative;
  text-align: left;
  font-size: 55px;
  font-weight: 600;
  margin-bottom: 70px;
  margin-left: 30px;
  padding-bottom: 20px;
  font-family: 'Noto Sans KR', sans-serif;
  border: none;
  display: flex;
  flex-basis: 33.3%;
}
/* section .title::before{
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #3d2846;
  transform: translateX(-50%);
  border: none;
  text-align: left;
} */
section .title::after{
  position: absolute;
  bottom: -8px;
  /* left: 50%; */
  font-size: 20px;
  color: #fa8072;
  padding: 0 5px;
  background: #fff;
  /* transform: translateX(-50%); */
  text-align: left;
  left:0;
}

/* navbar styling */
.navbar{
  background: transparent;
  width: 100vw;
  position: fixed;
  padding: 30px 0;
  z-index: 999;
  transition: all 0.3s ease;
}

.navbar.sticky{
  padding: 15px 0;
  background: #3d2846;
}


.navbar .max-width{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.navbar .logo a{
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
.navbar .logo a span{
  color: #fa8072;
  transition: all 0.3s ease;
}
.navbar.sticky .logo a span{
  color: #fff;
}
.navbar .menu li{
  list-style: none;
  display: inline-block;
}
.navbar .menu li a{
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}
.navbar .menu li a:hover{
  color: #fa8072;
}
.navbar.sticky .menu li a:hover{
  color:#fa8072;
}

/* menu btn styling */
.menu-btn{
  color: #fff;
  font-size: 23px;
  cursor: pointer;
  display: none;
}
.scroll-up-btn{
  position: fixed;
  height: 45px;
  width: 42px;
  background: #fa8072;
  right: 30px;
  bottom: 10px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  z-index: 9999;
  font-size: 30px;
  border-radius: 6px;
  border-bottom-width: 2px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.scroll-up-btn.show{
  bottom: 30px;
  opacity: 1;
  pointer-events: auto;
}
.scroll-up-btn:hover{
  filter: brightness(90%);
}


  .scroll-up-btn{
      right: 15px;
      bottom: 15px;
      height: 38px;
      width: 35px;
      font-size: 23px;
      line-height: 38px;
  }



/* home section styling */
.home{
  display: flex;
  background: transparent;
  margin : 0 0 0 0;
	padding : 0 0 0 0;
	/* background : url (src="./video/hormone_video") center center fixed no-repeat; */
  height: 100vh;
  color: #ffffff;
  min-height: 500px;
  background-size: cover;
  font-family: 'Noto Sans KR', sans-serif;
  justify-content: left;
  
}

.home .max-width{
  width: 100%;
  display: flex;
}

.section .max-width .row{
  margin-right: 0;
}

.home .home-content .text1{
  font-size: 28px;
  font-weight: 500;
  line-height: 180%;
  color: #ffffffbd;
}

.home .home-content .text2{
  font-size: 60px;
  font-weight:600;
  margin-left: -3px;
  line-height: 160%;
}

.home .home-content .text3{
  font-size: 60px;
  font-weight: 600;
  margin: 5px 0;
  line-height: 160%;
}

.home .home-content .text3 span{
  color: #fa8072;
  font-weight: 700;
  line-height: 160%;

}

.home .home-content a{
  display: inline-block;
  background: transparent;
  color: #fff;
  font-size: 24px;
  padding: 12px 36px;
  margin-top: 20px;
  font-weight: 500;
  border: 1px solid #fa8072;
  transition: all 0.3s ease;
}
.home .home-content a:hover{
  background: #fa807267;
}




/*section1학습목표 styling*/

.section1{
  color:#fff;
  background:linear-gradient( to bottom,#5e5477, 95%, white );
  /* height:100vh; */
  width:100%;
  min-height: 100vh;
  padding-bottom: 400px;
  padding-top: 200px;
}

.section1 .title::before{
   opacity:0;
  
}

.section1 .title::after{
  background: #5e5477;
  content: "Learning Objectives";
}



.section1-content{
  
  background: #5e5477;
}


.section1 .text1{
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 30px;
  margin-top: 20px;
  padding-top: 10px;
  color:#fff;
  position: relative;
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;
  margin-left: 30px;
}

.section1 .section1-content .left-column{
  justify-content: left;
  flex-shrink: 0;
  flex-basis: 35%;
  padding-right: content;
  background: #5e5477;
  border: none ;
  
}

.section1 .section1-content.right-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: content;
  padding-left: 10px;
  background: #5e5477;
  border: none ;
}

.section1 .text2{
  font-size: 1.3rem;
  font-weight: 300;
  margin-bottom: 20px;
  margin-top: 10px;
  margin-left: 0px;
  padding-top: 30px;
  color:rgba(255, 255, 255, 0.747);
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;
  margin-left: 30px;
}

/* .right-column .text2{
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 10px;
  padding-top: 30px;
  color:#fff;
  text-align: left;
  line-height: 160%;
  word-wrap:break-word;  
} */

/* .section1 .section1-content  p{
  text-align: justify;
  line-height: 160%;
} */


/*section2 thyroid 갑상샘 파트 styling*/
.section2{
  padding-top: 200px;
  padding-bottom: 200px;
}

.section2 .title::after{
  content: "Thyroid Gland";
}

.section2 .title::before{
  opacity:0;
}

/* .section2 .section2-content .left{
  flex: 45%;
  margin-right: auto;
  padding:20px;
  border-radius: 12px;
}

.section2 .section2-content .right{
  flex:auto;
  margin-left: auto;
  padding:20px;
  border-radius: 12px;
} */

.section2 .section2-content  img{
  height: auto;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.section2 .section2-content-2  .text3{
  
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 20px;
  /* padding-right: 3vw; */
  margin-left: 30px;
  color: black;
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;
  margin-right: 15px;
}

.section2 .section2-content-2 .left-column{
  justify-content: left;
  flex-shrink: 0;
  flex-basis: 50%;
  padding-right: content;
   border: none ;
   margin-bottom: auto;
}

.section2 .section2-content-2 .right-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 50%;
  padding-left: 10px;
    border: none ;
    margin-bottom: auto;
}


.section2 .section2-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 30px;
  margin-left: 30px;
  margin-top: 30px;
  
}
.section2 .section2-content  .text1 span{
  color: #fa8072;
}
/* .section2 .section2-content  p{
  text-align: justify;
} */


/*section3 thyroid 갑상샘 해부학 구조 파트 styling*/

.section3{
  padding-top: 200px;
  padding-bottom: 200px;
}

.section3 .title::after{
  content: "Thyroid Anatomy";
}

.section3 .title::before{
  opacity:0;
}

.section3-content{
  align-items: center;
}

.section3 .section3-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 20px;
  margin-left: 30px;
  word-break: keep-all;
  margin-top: 30px;
  padding-top: 30px;

}



.section3 .section3-content-2  .text3{
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 15px;
  /* padding-left: 3vw; */
  color: black;
  text-align: left;
  line-height: 1.618em;
  margin-left: 30px;
  word-break: keep-all;

}

.section3 .section3-content-2 .left-column{
  justify-content: left;
  flex-shrink: 0;
  flex-basis: 50%;
  padding-right: content;
   border: none ;
   padding-right: 30px;
   margin-bottom: auto;
}

.section3 .section3-content-2 .right-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 50%;
  padding-left: 10px;
    border: none ;
    margin-bottom: auto;
}

.section3 .section3-content  p{
  text-align: justify;
  font-weight: 500;
}


.iframebox{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  display:flex; 
  margin-left: 30px; 
}

.iframebox iframe{
  position: absolute;
  width: 80%;
  height: 80%;
  display:flex;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

/*section3-2 thyroid 갑상샘의 생리 파트 styling*/
.section3-2{
  padding-top: 200px;
  padding-bottom: 200px;
}

.section3-2 .title::after{
  content: "Physiology";
}

.section3-2 .title::before{
  opacity:0;
}



.section3-2 .section3-2-content .left-column{
  justify-content: left;
  flex-shrink: 0;
  flex-basis: 45%;
  
  border: none ;

}

.section3-2 .section3-2-content .right-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 50%;
   width: 50%;
  border: none ;
 margin-left: 30px;
}

.section3-2 .section3-2-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 10px;
  /* margin-top: 10px; */
  /* padding-top: 30px; */
  /* margin-left: 30px;  */
}

.section3-2 .section3-2-content .text3{
  font-size: 21px;
  font-weight: medium;
  margin-bottom: 20px;
  padding-top: 20px;
  color: black;
  text-align: left;
  line-height:1.618em;
  word-break: keep-all;  
  /* margin-left: 30px;  */
  
}

.section3-2 .section3-2-content img{
  width: 100%;
  
  object-fit: cover;
  align-content: left;
}
/* 
.section3-2 .section3-2-content .img-container{
  
  object-fit: contain;
align-content: left;
} */


.section3-2 .section3-2-content  p{
  text-align: justify;
  font-weight: medium;
}


.iframebox{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  display:flex; 
  margin-left: 30px; 
}

.iframebox iframe{
  position: absolute;
  width: 80%;
  height: 80%;
  display:flex;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}


/*section4 thyroid 갑상샘 미세구조와 호르몬 styling*/

.section4{
  color:#fff;
  background:linear-gradient( to top,#5e5477, 95%, white );
  width:100%;
  padding-top: 250px;
  padding-bottom: 150px;
}

.section4 .title::before{
  opacity:0;
  
}

.section4 .title::after{
  content: "Microscopic structure";
  background: #5e547700;
}

.section4-content,
.section4-content-2{
  align-items: center;
}

.section4 .section4-content  img{
  height: auto;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.section4 .section4-content-2 .left-column{
  justify-content: left;
  flex-shrink: 0;
  flex-basis: 50%;
  
  border: none ;
  margin-bottom: auto;
}

.section4 .section4-content-2 .right-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 50%;
   width: 50%;
  border: none ;
 padding-left: 20px;
 margin-bottom: auto;
}


.section4 .section4-content-2 .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 30px;
  padding-top: 30px;
  display:flex;
  color:white;
  margin-left: 30px;
}

.section4 .section4-content-2  .text3{
  font-size: 20px;
  font-weight: medium;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-right: 3vw;
  color: rgb(230, 230, 230);
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 

}

.section4 .section4-content-2  .text3{
  font-size: 20px;
  font-weight: medium;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-right: 3vw;
  color: rgb(230, 230, 230);
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 

}

.section4 .section4-content  p{
  text-align: justify;
  display:flex;
  line-height: 1.618em;
  color:#fff;
  font-weight: 500;
}

/*section5 호르몬 분비 파트 styling*/
.section5{
  color:#fff;
  background: #5e5477;
  width:100%;
  padding-top: 200px;
  padding-bottom: 150px;
}

.section5 .title::before{
  opacity:0;
  
}

.section5 .title::after{
  content: "Hormone Secretion";
  background: #5e5477;
}

.section5-content{
  align-items: center;
}

.section5 .section5-content .left-column{
  justify-content: left;
  flex-shrink: 0;
  flex-basis: 50%;
  
  border: none ;
  margin-bottom: auto;
}

.section5 .section5-content .right-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 50%;
   width: 50%;
  border: none ;
 padding-left: 20px;
 margin-bottom: auto;
}


.section5 .section5-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 30px;
  margin-left: 30px;
  padding-top: 30px;
  display:flex;
  color:white;
}

.section5 .section5-content  .text3{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-right: 3vw;
  color: rgb(230, 230, 230);
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 
}

.section5 .section5-content  .right-column .text3{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 20px;
  /* padding-left: 3vw; */
  color: rgb(230, 230, 230);
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 
}

.section5 .section5-content  p{
  text-align: justify;
  line-height: 1.618em;
  display:flex;
  color:#fff;
  font-weight: 500;
}


.iframebox{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  display:flex; 
}

.iframebox iframe{
  position: absolute;
  width: 100%;
  height: 100%;
  display:flex;
  margin-bottom: 10px;
  margin-top: 10px;
}

/*section12 호르몬 조절기전 파트 styling*/


.section12{
  color:#fff;
  background:linear-gradient( to bottom,#5e5477, 95%, white ); 
  width:100%;
  padding-top: 200px;
  padding-bottom: 220px;
}

.section12 .title::before{
  opacity:0;
  
}

.section12 .title::after{
  content: "Thyroid Axis";
  background: #5e5477;
}

.section12-content{
  align-items: center;
}

.section12 .section12-content .left-column{
  justify-content: left;
  flex-shrink: 0;
  flex-basis: 50%;
  
  border: none ;
  margin-bottom: auto;
}

.section12 .section12-content .right-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 50%;
   width: 50%;
  border: none ;
 padding-left: 20px;
 margin-bottom: auto;
}


.section12 .section12-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 30px;
  margin-left: 30px;
  padding-top: 30px;
  display:flex;
  color:white;
}

.section12 .section12-content  .text3{
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-right: 3vw;
  color: rgb(230, 230, 230);
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 
}

.section12 .section12-content  .right-column .text3{
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 20px;
  /* padding-left: 3vw; */
  color: rgb(230, 230, 230);
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 
}

/* .section12 .section12-content  p{
  text-align: justify;
  line-height: 160%;
  display:flex;
  color:#fff;
  font-weight: 500;
} */


.iframebox{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  display:flex; 
}

.iframebox iframe{
  position: absolute;
  width: 100%;
  height: 100%;
  display:flex;
  margin-bottom: 10px;
  margin-top: 10px;
}


/*section8 갑상샘 기능검사 종류 styling*/

.section8{
  padding-top: 200px;
  padding-bottom: 150px;
  width: 100%;
}

.section8 .title::after{
  content: "Function Panel";
  
}

.section8 .title::before{
  opacity:0;
}


.section8 .section8-content {
  align-items: center;
  width:100%;
}




.section8 .section8-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 20px;
  margin-top: 10px;
  padding-top: 20px;
  margin-left: 30px;
  display: flex;
}

.section8 .section8-content .text3{
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 
  margin-bottom: 40px;
 

  }

  /*기능검사 아코디언*/
  ::selection{
    background: rgba(132, 0, 255, 0.3);
  }
 
  .wrapper-accordian{
    width: 80vw;
    padding: 0 20px;
  }
  .wrapper-accordian .parent-tab,
  .wrapper-accordian .child-tab{
    margin-bottom: 8px;
    border-radius: 3px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
  }
  .wrapper-accordian .parent-tab label,
  .wrapper-accordian .child-tab label{
    background: #3d2846;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    z-index: 99;
    transition: all 0.3s ease;
  }
  .wrapper-accordian .parent-tab label:hover{
    background: #7c4f8f;
  }
  .parent-tab input:checked ~ label,
  .child-tab input:checked ~ label{
    border-radius: 3px 3px 0 0;
    background: #3d2846;
  }
  .wrapper-accordian label span{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-shadow: 0 -1px 1px #36203f;
  }
  .wrapper-accordian .child-tab label span{
    font-size: 17px;
  }
  .parent-tab label .icon{
    position: relative;
    height: 30px;
    width: 30px;
    font-size: 15px;
    color: #3d2846;
    display: block;
    background: #fff;
    border-radius: 50%;
    text-shadow: 0 -1px 1px #36203f;
  }
  .wrapper-accordian .child-tab label .icon{
    height: 27px;
    width: 27px;
  }
  .parent-tab label .icon i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .parent-tab input:checked ~ label .icon i:before,
  .child-tab input:checked ~ label .icon i:before{
    content: '\f068';
  }
  .wrapper-accordian .parent-tab .content,
  .wrapper-accordian .child-tab .sub-content{
    max-height: 0px;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 3px 3px;
    transition: all 0.4s ease;
  }
  .parent-tab input:checked ~ .content,
  .child-tab input:checked ~ .sub-content{
    max-height: 100vh;
  }
  .tab-3 input:checked ~ .content{
    padding: 15px 20px;
  }
  .parent-tab .content p,
  .child-tab .sub-content p{
    padding: 15px 20px;
    font-size: 16px;
  }
  .child-tab .sub-content p{
    font-size: 15px;
  }
  input[type="radio"],
  input[type="checkbox"]{
    display: none;
  }


  

/*section9 환자 진료과정 styling*/

.section9{
  padding-top: 200px;
  padding-bottom: 200px;
}

.section9 .title::after{
  content: "Diagnostic Process";
  }
  .section9 .title::before{
    opacity:0;
  }


.section9-content{
  align-items: center;
}

.section9 .section9-content  img{
  height: auto;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.section9 .section9-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-top: 30px;

}

.section9 .section9-content  p{
  text-align: justify;
  display:flex;
  font-weight: 500;
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 
  margin-bottom: 30px;
}

/*section9 - vertical timeline test*/
::selection{
  color: #fa8072;
  background: #fa8072;
}
.section9 .section9-content .wrapper-timeline{
  max-width: 1080px;
  margin: 50px auto;
  padding: 0 20px;
  position: relative;
}
.section9 .section9-content .wrapper-timeline .center-line{
  position: absolute;
  height: 100%;
  width: 2px;
  background: #3d2846;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}
.section9 .section9-content .wrapper-timeline .row{
  display: flex;
}
.section9 .section9-content .wrapper-timeline .row-1{
  justify-content: flex-start;
}
.section9 .section9-content .wrapper-timeline .row-2{
  justify-content: flex-end;
}
.section9 .section9-content .wrapper-timeline .row section{
  background: #3d2846;
  border-radius: 5px;
  width: calc(50% - 40px);
  padding: 20px;
  position: relative;
}
.section9 .section9-content .wrapper-timeline .row section::before{
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #3d2846;
  top: 28px;
  z-index: -1;
  transform: rotate(45deg);
}

.section9 .section9-content .row section .icon,
.section9 .section9-content .center-line .scroll-icon{
  position: absolute;
  background: #f2f2f2;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #3d2846;
  font-size: 17px;
  box-shadow: 0 0 0 2px #a190a8, inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 0 2px rgba(0,0,0,0.05);
}
.section9 .section9-content .center-line .scroll-icon{
  bottom: 0px;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}
.section9 .section9-content .row-1 section .icon{
  top: 15px;
  right: -60px;
}
.section9 .section9-content .row-2 section .icon{
  top: 15px;
  left: -60px;
}
.section9 .section9-content .row section .details,
.section9 .section9-content .row section .bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section9 .section9-content .row section .details .title2{
  font-size: 22px;
  font-weight: 700;
  color: #fa8072;
  line-height:  1.618em;
}
.section9 .section9-content .row section p{
  margin: 10px 0 17px 0;
  color:white;
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  
}
.section9 .section9-content .row section .bottom a{
  text-decoration: none;
  background: #3d2846;
  color: white;
  padding: 7px 15px;
  border-radius: 5px;
  /* font-size: 17px; */
  font-weight: 400;
  transition: all 0.3s ease;
}
.section9 .section9-content .row section .bottom a:hover{
  transform: scale(0.97);
}






@media(max-width: 790px){
  .section9 .section9-content .wrapper-timeline .center-line{
    left: 40px;
  }
  .section9 .section9-content .wrapper-timeline .row{
    margin: 30px 0 3px 60px;
  }
  .section9 .section9-content .wrapper-timeline .row section{
    width: 100%;
  }
  .section9 .section9-content .row-1 section::before{
    left: -7px;
  }
  .section9 .section9-content .row-1 section .icon{
    left: -60px;
  }

}
@media(max-width: 440px){
  .section9 .section9-content .wrapper-timeline .center-line,
  .section9 .section9-content .row section::before,
  .section9 .section9-content .row section .icon{
    display: none;
  }
  .section9 .section9-content .wrapper-timeline .row{
    margin: 10px 0;
  }
}

/*section10 갑상샘 질환 파트 styling*/


.section10{
  width:100%;
  padding:200px 0 200px 0;
}

.section10 .title::after{
  content: "Thyroid Disease";
}
.section10 .title::before{
  opacity:0;
}

.section10-content{
  align-items: center;
}


 .section10 .section10-content img{
  height: auto;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
} 




.section10 .section10-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-top: 30px;

}

.section10 .section10-content p{
  text-align: justify;
  line-height: 1.618em;
  font-weight: 500;
  font-size: 21px;
}


.iframebox{
  position: relative;
  width: 100%;
  max-width: 100vw;
  padding-bottom: 56.25%;
  display:flex; 
}

.iframebox iframe{
  position: absolute;
  width: 100%;
  height: 100%;
  display:flex;
  margin-bottom: 10px;
  margin-top: 10px;
}

/*radio menu*/

.section20{
  width:100%;
 
}

.section20 .title{
  text-align: left;
}

.section20 .title::before{
  opacity:0;
}

.section20-content{
  align-items: left;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

::selection{
  background: rgba(163, 103, 68, 0.3);
}
.wrapper{
  
  max-width: 1300px;
  width: 100%;
  margin: 30px auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.wrapper nav{
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.wrapper nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  color: #fa8072;
  font-size: 17px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
}
.wrapper nav label:hover{
  background: rgba(238, 119, 83, 0.3);
}
#disease:checked ~ nav label.disease,
#blog:checked ~ nav label.blog,
#code:checked ~ nav label.code,
#help:checked ~ nav label.help,
  #about:checked ~ nav label.about{
  color: #fff;
}
nav label i{
  padding-right: 7px;
}
nav .slider2{
  position: absolute;
  height: 100%;
  width: 25%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 5px;
  background: #fa8072;
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#blog:checked ~ nav .slider2{
  left: 25%;
}
#code:checked ~ nav .slider2{
  left: 50%;
}
#help:checked ~ nav .slider2{
  left: 75%;
}
/* #about:checked ~ nav .slider2{
  left: 80%;
} */
section .content{
  display: none;
  background: #fff;
}
#disease:checked ~ section .content-1,
#blog:checked ~ section .content-2,
#code:checked ~ section .content-3,
#help:checked ~ section .content-4,
#about:checked ~ section .content-5{
  display: block;
}
section .content .title2{
  font-size: 25px;
  font-weight: 600;
  margin: 30px 0 10px 30px;
}
section .content p{
text-align: left;
line-height: 1.618em;
margin-left: 30px;
font-size: 20px;
}





/*section7 프로젝트 about styling*/

.section7{
  width:100%;
  height: 100vh;
  padding: 200px 0 200px 0;
  margin-bottom: 50px;
  background: transparent;
  padding-top: 200px;
  padding-bottom: 100px;
}

.section7 .title::after{
  content: "Project description";
}

.section7-content{
  align-items: center;
  padding-bottom: 50px;
}

/* .section7 .section7-content .left-column{
  justify-content: left;
  flex-shrink: 0;
  flex-basis: 50%;
  padding-right: content;
   border: none ;
}

.section7 .section7-content .right-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 50%;
  padding-left: 10px;
    border: none ;
}

.section7 .section7-content .last-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 50%;
  padding-left: 10px;
    border: none ;
} */

.section7 .section7-content .text1{
  font-size: 29px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-top: 30px;
  margin-left: 30px; 
}



.section7 .section7-content .text3{
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 20px;
  /* padding-right: 3vw; */
  color: black;
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 
  margin-bottom: 30px;
}

.section7 .section7-content .text4{
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-top: 20px;
  /* padding-right: 3vw; */
  color: black;
  text-align: left;
  line-height: 1.618em;
  word-break: keep-all;  
  margin-right: 15px;
  margin-left: 30px; 
  margin-bottom: 30px;
}

.section7 .section7-content .text4 span{
  color: #fa8072;
  
}

.section7 .section7-content .text4 p{
  font-family: 'Hahmlet', serif;
  color: #797979;
  font-size: 16px;
}





/* responsive media query start */
@media (max-width: 1104px) {
  section .title{
    font-size: 40px;
  }

  .text1{
    font-size: 28px;
  }

  .text3{
    font-size: 24px;
  }

  .section2 .section2-content  img,
  .section4 .section4-content  img{
      height: auto;
      width: 100%;
  }

  .section3-2-content{
    display: flex;
    flex-direction: column;
    
    }

  .section3-2 .section3-2-content .left-column{
  
 width: 100%;    
    border: none ;
  
  }
  
  .section3-2 .section3-2-content .right-column{
   
     width: 100%;
    border: none ;
   padding-right: auto;
   align-content: left;
  }

  .section3-2 .section3-2-content img{
    width: 95%;
    
    object-fit: cover;
    align-content: center;
    margin-left: 30px;
  }

 
  /* .section1-content,
  .section7-content,
  .section10-content,
  .section3-2-content-2,
  .section5-content,
  .section12-content{
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-between;
    align-items: flex-start;
  }

  .right-column{
    justify-content: left;
    flex-shrink: 0; 
    flex-basis: 50%; 
    padding-left: 0px;
  } */

  .section3-2 .section3-2-content .text1{
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 30px;
    margin-left: 30px; 
  }
  
  .section3-2 .section3-2-content .text3{
    font-size: 21px;
    font-weight: medium;
    margin-bottom: 20px;
    padding-top: 20px;

    color: black;
    text-align: left;
    line-height: 180%;
    word-break: keep-all;  
    margin-left: 30px;
  
  }

 

  .menu-btn{
    display: block;
    z-index: 999;
}
.menu-btn i.active:before{
    content: "\f00d";
}
.navbar .menu{
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: #3d2846;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
}
.navbar .menu.active{
    left: 0;
}
.navbar .menu li{
    display: block;
}
.navbar .menu li a{
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
}
}

@media (max-width: 991px) {
  .max-width{
      padding: 0 50px;
      
  }

  .section3-2-content{
    display: flex;
    flex-direction: column;
    
    }

  .section3-2 .section3-2-content .left-column{
  
 width: 100%;    
    border: none ;
  
  }
  
  .section3-2 .section3-2-content .right-column{
   
     width: 100%;
    border: none ;
   padding-right: auto;
   align-content: left;
  }

  .section3-2 .section3-2-content img{
    width: 95%;
    
    object-fit: cover;
    align-content: center;
    margin-left: 30px;
  }

 
  .section3-2-content{
    display: flex;
    flex-direction: column;
    
    }

  .section3-2 .section3-2-content .left-column{
  
 width: 100%;    
    border: none ;
  
  }
  
  .section3-2 .section3-2-content .right-column{
   
     width: 100%;
    border: none ;
   padding-right: auto;
   align-content: left;
  }

  .section3-2 .section3-2-content img{
    width: 95%;
    
    object-fit: cover;
    align-content: center;
    margin-left: 30px;
  }

}
@media (max-width: 947px){

  
 
  .home .home-content .text1{
    font-size: 24px;
}

  .home .home-content .text2{
      font-size: 50px;
  }
  .home .home-content .text3{
      font-size: 50px;
  }
  .home .home-content a{
      font-size: 24px;
      padding: 10px 30px;
  }
  .max-width{
      max-width: 930px;
  }
  .section2 .section2-content .column{
      width: 100%;
  }
  .section2 .section2-content  .left{
      display: flex;
      justify-content: center;
      margin: 0 auto 60px;
  }
  .section2 .section2-content  .right{
      flex: 100%;
  }
  .section2-1 .section2-1 .card{
      width: calc(50% - 10px);
      margin-bottom: 20px;
  }
  .skills .skills-content .column,
  .contact .contact-content .column{
      width: 100%;
      margin-bottom: 35px;
  }
  p{ word-wrap:break-word;  
    text-align: left;
 }

 .wrapper nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 20px;
  padding-top:5px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  color: #fa8072;
  font-size: 16px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
  word-break: keep-all;
}

.section3-2 .section3-2-content .text1{
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-top: 30px;
  margin-left: 120px; 
}

.section3-2 .section3-2-content .text3{
  font-size: 21px;
  font-weight: medium;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-right: 3vw;
  color: black;
  text-align: left;
  line-height: 180%;
  word-break: keep-all;  
  margin-right: 80px;
  margin-left: 120px; 

}


}

@media (max-width: 690px) {
 
  .section{
    width: 100%;
  }

  section .title{
    font-size: 34px;
  }

  section .text1{
    font-size: 26px;
  }

  section .text3{
    font-size: 24px;
    padding-left: 0px;
    margin-left: 0px;
  }

  .section8 .section8-content{
    width:100%;
    overflow-x: auto;
  }

  .section8 .section8-content .text3{
    width:100%;
    max-width: 80vw;
    overflow-x: auto;
  }

  section .slider{
    max-width: 80vw;
  }

  section .slider img{
    width: 100%;
    max-width:80vw;
  }

  .iframebox{
    position: relative;
    width: 100%;
    max-width: 90vw;
    padding-bottom: 56.25%;
    display:flex; 
    margin-left: 30px; 
  }

  /*2-column layout section*/
.section1-content,
.section1,
.section3,.section3-content-2,
.section3-2,.section3-2-content,
.section4, .section4-content-2,
.section5, .section5-content,
.section12, .section12-content
{
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  align-items: flex-start;

}


.section1 .section1-content .right-column,
.section2 .section2-content-2 .right-column,
.section3.section3-content-2 .right-column,
.section3-2.section3-2-content .right-column,
.section4 .section4-content-2 .right-column,
.section5 .section5-content .right-column,
.section12 .section12-content .right-column,

.section1 .section1-content .left-column,
.section2 .section2-content-2 .left-column,
.section3.section3-content-2 .left-column,
.section3-2.section3-2-content .left-column,
.section4 .section4-content-2 .left-column,
.section5 .section5-content .left-column,
.section12 .section12-content .left-column{
  justify-content: left;
  flex-shrink: 0; 
  flex-basis: 100%;
  width: 100%;
  padding-left: 0px;
    border: none ;
    margin-bottom: auto;
}




  .navbar .logo a{
    font-size: 24px;
    font-weight: 400;
  }

  .home .home-content .text2{
      font-size: 38px;
  }
  .home .home-content .text3{
      font-size: 38px;
  }
 




  .wrapper nav label{
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: #fa8072;
    font-size: 14px;
    border-radius: 5px;
    margin: 0px 5px;
    padding-top: 6px;
    transition: all 0.3s ease;
    word-break: keep-all;
  }

  .section3-2 .section3-2-content .text1{
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 30px;
    margin-left: 40px; 
  }
  
  .section3-2 .section3-2-content .text3{
    font-size: 21px;
    font-weight: medium;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-right: 3vw;
    color: black;
    text-align: left;
    line-height: 180%;
    word-break: keep-all;  
    margin-right: 20px;
    margin-left: 40px; 
  
  }
}

@media (max-width: 500px) {
  section{
    height:auto;
    width:100%;
    padding: 80px 0 80px 0;
  }

  .section20{
    padding-top: 50px;
  }

  .section10{
    padding-top: 80px;
  }

  .section7{
    width:100%;
    height:auto;
  }


  .section2 .section2-content img,
  .section4 .section4-content img,
  .section3-2 .section3-2-content  img{
      height: auto;
      width: 100%;
  }



  .section2 .section2-content .right .text,
  .skills .skills-content .left .text{
      font-size: 19px;
  }
  .contact .right form .fields{
      flex-direction: column;
  }
  .contact .right form .name,
  .contact .right form .email{
      margin: 0;
  }
  .right form .error-box{
     width: 150px;
  }
  .scroll-up-btn{
      right: 15px;
      bottom: 15px;
      height: 38px;
      width: 35px;
      font-size: 23px;
      line-height: 38px;
  }

  section .title{
    position: relative;
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 70px;
    padding-bottom: 20px;
    font-family: 'Noto Sans KR', sans-serif;
    border: none;
  }
  /* section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #3d2846;
    transform: translateX(-50%);
    border: none;
  } */

  section .title::after{
    position: absolute;
    bottom: -8px;
    /* left: 50%; */
    font-size: 16px;
    color: #fa8072;
    padding: 0 5px;
    background: #fff;
    /* transform: translateX(-50%); */
    text-align: center;
    text-decoration: none;
  }
}