@charset "utf-8";
/* Styles from the GreenSock website */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:"NotoSansKR", sans-serif;
  overflow-x: hidden;
}
/* 기본 사용 */
@font-face {
  font-family: 'GmarketSans';
  src: url('../../fonts/GmarketSansTTFBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* 여러 폰트 파일 사용 */
@font-face {
  font-family: 'GmarketSans';
  src: url('../../fonts/GmarketSansTTFLight.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('../../fonts/GmarketSansTTFMedium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
/* Noto Sans KR */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../../fonts/NotoSansKR-Thin.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../../fonts/NotoSansKR-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Bold */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../../fonts/NotoSansKR-ExtraLight.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Bold */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../../fonts/NotoSansKR-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



* {-webkit-text-size-adjust:none;}
* { margin:0;padding:0; }

 
html, body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  display:flex;
  justify-content: center;
  align-items: center;
}
a,a:visited,a:hover{
  color:#333;
}

#wrap{
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal; 
  margin:0 ;
  padding:0 ;
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
  overflow-x: hidden;
  color:#444;
}
#wrap #body .ipsContent {
  max-width: 700px;
  width:100%;
  margin-top: 50px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
  margin-bottom: 100px;
}

.ipsContent >#board  a{
  position: relative;
 text-decoration: none;
 color:#242424;
}
.ipsContent > #board  a:visited{
   text-decoration: none;
  color:#444; 
}

.ipsContent > #board  a:hover{
  text-decoration: none ;
  color:#242424; 
}



.navgation {
  position: relative;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
  padding:5px 0;
  width:100%;
  margin:10px auto;
  overflow:hidden;
  height:120px;
}
  
  .navgation >.nav-bar{
    position: relative;
    display: flex;
    width:100%;
    margin:0 auto;
    padding:0;
    height:100%;
    justify-content:center;
    align-items: center;
  }

  .navgation >.nav-bar >.ul-top{
    display: inline-block; 
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    height:90px;
    max-width:380px;
    padding:5px;
    margin:0 auto;
    width:100%;
    text-align:center;
    align-items: center;
    border: thick double  #cecdcd;
    border-radius: 10px;
    box-shadow: 0px 2px 2px 2px blue;
    overflow: hidden;
  }
  .navgation >.nav-bar > ul>li{
    position:relative; 
    display:inline-block;
    margin:0;
    list-style:none;
    padding:0;
    height:100%;
    overflow: hidden;
    padding-right:5px;
  }
  
 
  .navgation >.nav-bar > ul>li>div{
    position:relative;
    width:100%;
    padding:6px;
    margin:0 auto ;
    height:100%;
    align-items: center;
  }
  .navgation >.nav-bar > ul>li>div>a{
    display:block ;
    width:40px;
    height:auto;
  }
  .navgation >.nav-bar > ul>li>div>a>img{
    width:100%;
    height:100%;
  }
  .navgation >.nav-bar > ul>li .name{
    position:absolute;
    top:50px;
    line-height: 1em;
    left:0;
    padding:0;
    margin:0;
    width:100%;
    color:#333;
    font-size:0.7em;
    text-align:center;
  }   

 .navgation .nav-fixed{
  top: 0px;
	position: fixed;
  z-index:100;
  width:100%;
  background:#006EFD;
}



	
/*원장소개*/
.text-ani{
  width:100%;
  display: flex;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  overflow: hidden;	
margin-top:100px;
}
.text-ani .wrapper{
  display:block;
  left:0;
  overflow-x: hidden;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
  
}
.text-ani .wrapper img{
  border:3px solid #aaabac;
  border-radius: 15px;
  width:100%;
  height:100%;
  margin-top: 0;
  padding-top:0;
}

.wrapper .static-txt{
  color:#3e3d3d;
  font-size:1.8em;
  font-weight:600;
  margin-left: 10px;
  margin-bottom: 30px;

}
.wrapper .dynamic-txts{
  margin-left:0;
  height:1.6em;
  line-height:1.6em;
  margin-bottom: 20px;
  margin-left:10px;
  height:100%;
  
}
.wrapper .dynamic-txts li{
  color:#2c2c2c;
  list-style: none;
  font-size: 1.2em;
  font-weight: 400;
  position: relative;
  line-height:1.6em;
}

.wrapper .dynamic-txts li span{
  position: relative;
  left:10px;
  color:#006EFD;
}
.wrapper .dynamic-txts li span::after{
  content:'';
  clear: both;

  position:absolute;
  left:0;
  height:105%;
  width:100%;
  background:#fff;
  border-left:2px solid #444;
  animation:typing 2s steps(20) infinite;
}
@keyframes typing{
  100%{
    left:100%;
    margin: 0 -35px 0 35px;
  }
}
.wrapper .name{
  position: relative;
  margin-top:50px;
  padding-top:0px;
  line-height: 2em;
  font-size: 1em;
  color:#3e3d3d;
  margin-left: 20px;
  font-weight: 400;
  /* font-style: italic; */
}


	
 /* video
–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#video-isam{
    width:100%;
    max-width:600;
    height:700px;
    object-fit: cover;
    padding:0;
    margin:100px 0;
    overflow: hidden;
    font-family: 'GmarketSans', sans-serif;
    font-weight: 600;
  
  }
  #video-isam >video{
    position: relative;
    width:100%;
    height:500px;
    padding:0;
    margin:0;
    object-fit: cover;
    border:3px solid #aaabac;
    border-radius: 15px;
  }
  #video-isam >video>source{
    position: relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    object-fit: cover;
  }
  #video-isam p{
    line-height: 1.8;
    position: relative;
    display: block;
    text-align: left;
    font-size: 1em;
    color:#444;
    padding:20px;
    margin: 30px auto;
    justify-content: center;
  }
  #video-isam p > i{
    margin-top: 50px;
    color: #0e4b9b;
    font-size: 1.2em;
  }
  /* vanilla
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#vanilla {
  width:100%;
  padding:5px 0px;
  background-color: #fff;
  margin:50px 0;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
}
 #vanilla .asset {
  display: grid;
  position: relative;
  place-items: center;
  align-items: center;
  justify-content: center;
  height: 800px;
  padding:0 ;
  margin:0;
 width:100%;
}

/* Content */

#vanilla >.asset > .content { 
  position: relative;
  color: #c7c7c7c9;
  display:block;
  padding: 0 10px;
  margin:0;
  left:0;
  text-align: center;
  align-items: center;
  justify-content: center;
}


#vanilla >.asset > .content> h1 {
 
  font-family: 'GmarketSans', sans-serif;
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 700;
  color:#333;
  line-height: 1.1;
  top:50%;
  padding-bottom: 50px;
  width:400px;
  padding-left: 20px;
}
#vanilla >.asset > .content> h1>i{
  font-size:1rem;
  color:#0e4b9b;
}
#vanilla >.asset >.content> p {
  font-size: clamp(1.2rem, 3vw, 1.2rem);
  line-height: 1.8;
  padding-left: 100px;
  color:#444;
  text-align: left;
  width:100%;
font-family: 'Noto Sans KR', sans-serif;
font-weight:400;
}


/* Stacked Cards */

 #vanilla .asset .stack {
  position: relative;
  width:100%;
  z-index:10;
 margin:5px 0;
 padding:0;
 height:400px ;
}

#vanilla .asset .stack .card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 300px;
  border-radius: 2rem;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25),
    0 15px 20px 0 rgba(0, 0, 0, 0.125);
  transition: transform 0.3s;
  user-select: none;
}

#vanilla .asset .stack .card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

#vanilla .asset .stack .card:nth-last-child(n + 5) {
  --x: calc(-50% + 90px);
  transform: translate(var(--x), -50%) scale(0.85);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.01);
}

#vanilla .asset .stack .card:nth-last-child(4) {
  --x: calc(-50% + 60px);
  transform: translate(var(--x), -50%) scale(0.9);
}

#vanilla .asset .stack .card:nth-last-child(3) {
  --x: calc(-50% + 30px);
  transform: translate(var(--x), -50%) scale(0.95);
}

#vanilla .asset  .stack .card:nth-last-child(2) {
  --x: calc(-50%);
  transform: translate(var(--x), -50%) scale(1);
}

#vanilla .asset .stack .card:nth-last-child(1) {
  --x: calc(-50% - 30px);
  transform: translate(var(--x), -50%) scale(1.05);
}

#vanilla .asset .stack .card:nth-last-child(1) img {
  box-shadow: 0 1px 5px 5px rgba(70, 109, 247, 0.5);
}

#vanilla .asset .stack .swap {
  animation: swap 1s ease-out forwards;
}

@keyframes swap {
  30% {
    transform: translate(calc(var(--x) - 250px), -50%) scale(0.85) rotate(-5deg)
      rotateY(65deg);
  }
  100% {
    transform: translate(calc(var(--x) - 30px), -50%) scale(0.5);
    z-index: -1;
  }
}


/* Media queries for other classes */

@media (max-width: 990px) {
  #vanilla .asset .content p {
    padding-right: 0;
  }

  #vanilla .asset .stack .card {
    width: 200px;
    height: 300px;
  }
}


@media (max-width: 650px) {
  #vanilla .asset{
    grid-template-rows: 1fr 1fr;
  }

  #vanilla .asset .content {
    padding: 0 50px;
  }

  #vanilla .asset .content h1 {
    padding-left: 0;
  }


  #vanilla .asset .stack .card {
    width: 200px;
    height: 300px;
  }
}

<!--  over-->
  /*coding over*/
.over
{
  position: relative;
  margin: 0 auto;
  width:100%;
  display:flex;
  font-family: 'GmarketSans', sans-serif;
  font-weight: 500;
  padding:0;
}
.over .over_bg{
  position: relative;
  width:100%;
  color:#333;
  text-align: center;
  padding:10px 0;
  font-size: 1.5em;
  font-family: 'GmarketSans', sans-serif;
  font-weight: 500;
  line-height: 2em;
  margin-top:20px;

}

.over .tiles{
  width:100%;
  font-family: 'GmarketSans', sans-serif;
 top: 0;
  display: grid;
  gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(min(350px), 1fr));
  grid-template-rows:auto;
  place-items:center;
  margin: 10px 0 100px 0;
  padding:0 ;

}
.over .tiles .tile
{
  position:relative;
  width:100%;
  height:500px;
  margin:0;
  text-align: center;
  align-content: center;
  background-color:#fff;
  display:flex;
  flex:1;
  cursor:pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.01);
  overflow:hidden;
  font-weight: 500;
}
.over .tiles .tile > a{
 display: block;
 position: relative;
 width:100%;
 height:450px;
}
.tile img
{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:0;
  transition: all 0.4s ease-out;
}

.over >.tiles >.tile >.title{
  position: absolute;
  bottom:-50px;
  width:100%;
  height:80px;
  left:0;
  z-index: 1;
}
.over >.tiles >.tile >.title> h1{
  display: block;
  font-size: 1.2em;
  line-height: 1.5;
  padding:0;
  color:#333;
  padding:0;
  margin:0;

}
.tile .text::before{
  content:'';
  background-color:#26345d;
}
.tile .text
{
  font-family: 'GmarketSans', sans-serif;
  top:50px;
  position:absolute;
  padding:30px;
  height:calc(100% - 110px);
  color:#333;
  text-shadow: 0px 0px 3px 3px rgba(0,0,0,0.2);
}


.tile h2
{
  font-weight:600;
  margin:20px 0 0 0;
  font-style:italic;
   transform: translateX(200px);
   transition-delay: 0.1s;
}
.tile p
{
  font-size: 0.8em;
  font-weight:600;
  margin:10px 0 0 0;
  line-height: 25px;
  padding:10%;
  transform: translateX(-200%);
  transition-delay: 0.1s;
}
.animate-text
{
  opacity:0;
  transition: all 0.6s ease-in-out;
}
.tile:hover
{
  background:#0f0f0f;
  transform:scale(1.1);
}
.tile:hover a > img
{
  opacity: 0.1;
}
.tile:hover >.text >.animate-text
{
  transform:translateX(0);
  opacity:1;
}



<!--  rain-->
.rain{
  width:100%;
  height:510px;
  overflow: hidden;	
  display: flex;
  align-items: center;
  position: relative;
  overflow-x: hidden;

}
.sum{
  width:100%;
  height:710px;
  overflow: hidden;	
  display: flex;
  align-items: center;
  position: relative;
  overflow-x: hidden;

}
.two{
  width:100%;
  height:1010px;
  overflow: hidden;	
  display: flex;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  margin-top: 50px;

}
.bonbon{
  width:100%;
  height:430px;
  overflow: hidden;	
  display: flex;
  align-items: center;
  position: relative;
  overflow-x: hidden
  ;margin-top:5px;

}
/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */



.auto_box{
 width:100%;
 height:500px;
 overflow: hidden;	
 display: fixed;
 align-items: center;
 position: relative;
 overflow:hidden;

}

  /*상장*/
.bontop {
  width:100%;
  
  position: relative;
  margin: 0;
  overflow:hidden;
  padding:0;
  background-color: #fff;
  font-family: 'GmarketSans', sans-serif;
  font-weight: 500;
  margin-bottom:100px ;
  justify-content: center;
  align-items: center;
}
.bontop .bonwrap{
  width:100%;
  position: relative;
  margin:10px auto ;
  padding:5px 0;
  justify-content: center;
  align-items: center;
  
}
.bontop .white{
  height: 200px;
  position: relative;
  top:25px;
}
.bontop .bonwrap .titleText{
  font-size: 1.6em; 
  line-height: 1.6em;
  color:#006EFD; 
  letter-spacing:5px;
  padding-top:10px;
}

.bontop .bonwrap .titleText	 span{
  color:#006EFD; 
  }
.bonwrap .title{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  font-size: 1.1em;
  line-height: 2em;
}
.bonwrap .title .imgBx{
  position: relative;
  width:130px;
  height:130px;
  margin:5px auto;

}

.bonwrap .white .titleText,
.bonwrap .white p{
  color:#212121;
  margin-bottom:5px;

}
.bonwrap .bonsw{
  position: relative;
  display:flex;
  width:100%;
  align-items: center;
  justify-content:center;
  flex-wrap:wrap;
  flex-direction:row;
  padding:2px 0;
  margin:5px auto;
  background-color: #fff;
}
.bonwrap .bonsw .box{
  position:relative;
  top: 0;
  left: 0;
  width:48%;
  height:330px;
  margin: 10px auto ;
  padding:0 ;
  display:block;
  border: 0.5px solid #e4e5e7;
  border-radius:20px ;
  justify-content: center;
  align-items:center;
  flex-direction: column;
  box-shadow: 1px 1px 5px 1px rgba(33, 31, 31, 0.07);
overflow-y: hidden;
}
.bonwrap .bonsw .box::before{
  content: ' ';
  position: absolute;
  top: -0.5px;
  left: -0.5px;
  right: -1px;
  bottom: -1px;
  background: #ccc;
  transform: skew(1deg, 1deg);
  z-index: -1;
  background:linear-gradient(315deg, #CCC, #333);
  filter: blur(5px);

  }
.bonwrap .bonsw .box a{
  position:relative;
  text-decoration:none;
  display:block;
  border:1px solid #006EFD;
  border-radius: 20px;
  padding:3px 10px;
  text-align:center;
  font-size:0.8rem;
  color:#666;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  opacity:1;
  transform:translateY(5px);
  transition:0.5s;
  margin:0px 20px 5px;
}
.bontop  .bonsw .box a:hover{
  color:#006EFD;
  background:#fff;
  opacity:1;
  }

.bonwrap .bonsw .box:hover a{
  transform:translateY(20px);
  opacity: 1;
  visibility:visible;
  }
  
.bontop .bonwrap .bonsw .box .imgBx{
  position:relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow:hidden;
  padding-top: 0;
  top:10px;
  margin:5px auto;
  border: 5px solid transparent;
  background-image: linear-gradient(#fff, #fff), 
  linear-gradient(to right, #8dbbf8  0%,  #CCC 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  transition:0.5s;

}
.bontop .bonwrap .bonsw .box:hover .imgBx {
  top:30px;
  }
  
.bontop .bonwrap .bonsw .box .imgBx img{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: 50%;
  
}
.bontop .bonwrap .bonsw .box .text{
  text-align:center;
  padding: 10px;
  position: relative;
  margin-top:10px;
  font-size: 0.8rem;
  font-family: 'GmarketSans', sans-serif;
}
.bontop .bonwrap .bonsw .box .text p{
  color:#666;
  font-style:italic;

}
.bontop .bonwrap .bonsw .box .text h2{
  line-height: 2.3rem;
  color:#0e4b9b;
  font-weight:700;
  letter-spacing:10px;
}
	
/* computer*/
.feat{
  position: relative;
  font-family: "Roboto", sans-serif;
  margin:30px auto;
  padding:10px 0;
  display: flex;
  width:100%;
  max-width:600px ;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  background-color: #fff;
  color: #444;
}
h1 {
  margin-top: 30px;
  font-size:1.6em ;
  line-height: 3;
  margin-bottom: 10px;
  color:#02183b;
}

.feat >.box {
    position: relative;
    display: block;
    margin:5px auto;
    background-color: #fff;
    color: #444;
    display: grid;
    place-content: center;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    height: 500px;
    overflow: hidden;

}
.feat >.box >.titles{
  position: relative;
  margin:10px auto;
  padding:0;
  animation: bounceInRight 0.4s ease-in-out;
  animation-delay: 0.2s;
  opacity:1 ;
}
.feat >.box >.titles> h2{
  margin-top:0px;
    font-size: 1.5em;
    color:#333;
}
.feat >.box >.titles> h2>strong{
  color:#45b4ec;
  font-size: 0.8em;
}
.feat >.box >.titles >p{
  padding-left:10px;
  font-size: 1em;
}
.feat >.box >.titles >p>a{
  text-decoration: none;
  display: block;
  color:#444;
}

.feat >.box >.card{
  position: relative;
  top:0px;
  left:0px;
  margin:0;
  padding:20px;
  width:340px;
  height:340px;
  cursor:pointer;
  border:0.1px solid #eee;
 overflow: hidden;
  animation: bounceInLeft 0.4s ease-in-out;
  animation-delay: 0.3s;
  opacity:1 ;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
 
}
.feat >.box >.card > img{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}


.box.show {
  transform: translateX(0);
  
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-300%);
  }
  60% {
    transform: translateX(20px);
  }
  80% {
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(300%);
  }
  60% {
    transform: translateX(-20px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}