@font-face {
    font-family: 'Cafe24Shiningstar';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

.line_wrap {width:100%; height:2px;  overflow:hidden; margin-bottom:50px}

.slide-in-right {width:100%; height:1px; background:#ddd}
.slide-in-right {
	-webkit-animation: slide-in-right 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
  

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(-3000px);
            transform: translateX(-3000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(-3000px);
            transform: translateX(-3000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}


.con  {width:100%; display:block; box-sizing:border-box;   max-width:1300px;  padding:200px 5% 150px 5%;  margin:0 auto;   }
.con_in {width:100%; box-sizing:border-box;  display:inline-block;}


 h2.guide {margin-bottom:30px;     display:flex;  align-items:center;   }
 h2.guide span {font-size:3.5rem; color:#333; font-weight:800;  font-family:'Montserrat';}
 h2.guide span.s_t2 {font-size:1.5rem;  line-height:1em;  font-weight:600; color:#333}
 h2.guide p {margin-left:auto; line-height:1em; }
h2.guide a {font-size:1.2rem; font-weight:500; border:1px solid #a320ca; display:inline-block; padding:11px 30px; line-height:1em; color:#333 !important }
h2.guide span.s_t {font-size:1rem; font-weight:400; margin-left:auto;  color:#888; display:none }


/*크루프로필*/

.profile_wrap {width:100%; display:inline-block; margin-top:10px;   }

.profile {width:100%; display:flex; align-items:center; margin-bottom:100px; }
.profile:last-child { margin-bottom:0}


.profile  .name {  color:#333;  width:100%; display:inline-block; font-size:3rem; font-weight:700;  line-height:0.9em;   color:#333; letter-spacing:-3px;   }
 .profile  .name  span {width:100%; display:block; margin-top:5px; font-size:0.5em; font-weight:600; color:#333;  letter-spacing:0; font-family:'Montserrat', 'Noto Sans KR';  }

.profile .info_t {  width:72%; display:inline-block; }

 .profile .career_wrap {width:100%; display:flex; margin-top:30px  }
 .profile .career {font-size:0.95rem;  line-height:1.4em; color:#555; font-weight:300;  width:60%  }
  .profile .career ul {width:100%}
   .profile .career ul li {margin-bottom:1px; width:100%; display:inline-block}
  
 .profile .career:first-child { box-sizing:border-box; width:40%; font-weight:500; font-size:1.1rem; color:#111;   }
 .profile .career:first-child ul li {margin-bottom:6px; width:100%; display:inline-block}

 .profile .career b {font-family:'Montserrat'; font-size:1.1rem; font-weight:600; line-height:1.5rem; color:#333 !important; /* text-decoration:underline */; display:block;  margin-bottom:3px; }

 .profile .profile_img {width:28%; position:relative; margin-top:0px }
 .profile .profile_img img {  float:right; width:100%;   position:Relative }
 .profile .profile_img .one_bg {width:90%; padding-bottom:90%; background-color:#752f8a;  float:right; margin-top:-91%; border-radius:50%;}
 


 
 @media all and (max-width:1000px){
       
	   .con  { padding:110px 5% 100px 5%;    }

}

 @media all and (max-width:900px){
       
 		.sub_vi {width:100%; display:inline-block;  text-align:center; box-sizing:border-box;  background:url('/img/ .jpg') no-repeat center; background-attachment: fixed;  height:30px; position:relative; float:left;  }

		 h2.guide { text-align:center; margin-bottom:20px;  }
		 h2.guide span {font-size:2rem; line-height:1.2em }
		 h2.guide span.s_t {display:none}
         h2.guide span.s_t2 {font-size:1.2rem;  }

		.line_wrap {margin-bottom:45px}

		 
  
		 .profile {flex-wrap:wrap; margin-bottom:50px; overflow:hidden}
		 

		 .profile .info_t {  width:100%;   }

		 .profile  .profile_img {width:60%; position:relative; left:20%; order:1 ; margin-top:0 }
		  .profile .info_t  {order:2}
		 .profile:nth-child(2n) .info_t {text-align:left}
		 .profile .name {font-size:2.5rem;  margin-top:30px;   }
		 
		  
		  .profile  .career_wrap {display:block; margin-top:20px }
		  .profile .career_wrap .career {width:100%; line-height:1.5em; }
		  .profile .career:first-child {width:100%;}
		  .profile .career_wrap .career:nth-child(2) {margin-top:20px}
		  .profile .career b {font-size:1.15rem; }

		  .profile .career  ul li {margin-bottom:0; }
		  .profile .career:first-child ul li {margin-bottom:0; }

 } 



 

 /*포트폴리오*/

 .portfolio {width:100%;  overflow:hidden;  display:inline-block; margin-bottom:-20px }
 .portfolio ul {  width:calc(100% + 20px);   display:flex; float:left; margin-top:20px; }
 
  .portfolio ul li {margin-right:20px; background-color:#ddd;   font-size:0; line-height:0; position:relative;  }

.portfolio ul li  .image-hover-image { width:100%; height:100%;  overflow:hidden;}
.portfolio ul li img {height:100%; width:100%; object-fit: cover;  }
.portfolio ul:last-child {margin-bottom:0}

.portfolio ul li a {display:inline-block ; width:100%; height:100%; }


.image-hover-text-container 
{
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  transition: all 0.2s linear; 
}

 
 

.image-hover-text 
{
  position: absolute;
  top: 0;
  width: 100%;  
  height: 100%;
  margin: 0 auto;
  opacity: 0;
 cursor:pointer;
  transition: opacity 0.2s linear;

}
.image-hover-text:hover 
{
  opacity: 1;
}


.image-hover-text-bubble 
{
  position: relative;
  box-sizing: border-box;
  top: 0; left: 0; right: 100%;
  height: 100%;
   background: rgba(0, 0, 0, 0.5);
  border-radius: 0%;
  margin: 0 auto;
  
  overflow: hidden;
  }
.image-hover-text-bubble  div {position:absolute; left:0; bottom:8%;  width:100%;}
.image-hover-text-bubble p {width:100%; display:inline-block; font-size:1rem; color:#fff; line-height:1.3rem; box-sizing:border-box; padding:0 5%; margin:2px 0; }
 .image-hover-text-bubble p b {font-size:1.4rem; display:block; margin-bottom:5px;  font-weight:600; color:#fff; }

.port_view {width:100%; display:flex; border-bottom:1px solid #ddd; padding-bottom:30px}
.port_view div:nth-child(1)   {width:60%;  font-size:1rem; color:#666; line-height:1.5em}
.port_view div:nth-child(2) {width:40%; margin-left:4%; font-size:1rem; color:#666; line-height:1.5em }
.port_view h2 {font-size:2rem;  line-height:1.15em; font-weight:700; color:#333; display:block; margin-bottom:40px}
.port_view h3 {font-size:1.3rem; font-weight:600; color:#333; display:block; margin-bottom:15px}

 @media all and (max-width:900px){
		 .portfolio ul {flex-wrap:wrap; width:100%; margin-bottom:0 }
		 .portfolio ul li {width:100% !important; margin-right:0; margin-bottom:20px}
		 .portfolio ul:last-child li:last-child {margin-bottom:0}
           .portfolio ul li img {     width:100%; height:auto; } 
		.image-hover-text { opacity: 1; }

		.port_view {display:inline-block}
		.port_view div:nth-child(1)   {width:100%; }
		.port_view div:nth-child(2) {width:100%; padding-top:40px; margin-top:40px; border-top:1px solid #ddd;  margin-left:0 }
		.port_view h2 {font-size:1.5rem;  margin-bottom:20px}
		.port_view h3 {font-size:1.2rem;  }

}

/**/
.location_box {width:100%; display:flex; align-items:flex-end}
.location_box div {margin-left:50px; font-size:1.1rem; color:#555; line-height:1.4em; }
.location_box div  b {font-size:1.15rem; color:#333; font-weight:600; width:100%; display:block; margin-bottom:10px}
.location_box div a {text-decoration:underline}
.location_box iframe {width:50%; height:300px}

 @media all and (max-width:900px){
		.location_box { display:block;  }
		.location_box div {margin-left:0; margin-top:20px}
		.location_box div  b {font-size:1.05rem;  margin-bottom:0}
        .location_box div  img {display:none}
		.location_box iframe {width:100%; height:200px}
 }

/**/

 .intro_text {width:100%;   font-size:1.1rem;  font-weight:400; color:#444; line-height:1.7em}
.intro_text .t_wrap {display:flex; width:700px; margin:0 auto;   }
.intro_text .t_wrap p.left_box {width:30%; color:#752f8a}
.intro_text .t_wrap p {font-size:3.5rem; color:#493c52; font-family: 'Poppins'; line-height:1.3em; font-weight:200}
.intro_text .t_wrap p:first-letter {color:#752f8a; font-weight:500}
.intro_text .t_wrap p:nth-child(4) { margin-bottom:50px}

 .content_logo {width:100%; display:inline-block; box-sizing:border-box; background-color:#752f8a; padding:30px; margin-bottom:80px }
.content_logo img {width:50%; max-width:250px}

@media all and (max-width:900px){
		.intro_text {  line-height:1.7em; font-size:1rem} 
		.content_logo {margin-bottom:30px;}
		.intro_text .t_wrap { width:100%;    }
		.intro_text .t_wrap p {font-size:2rem;   }
		.intro_text .t_wrap p.left_box {width:20%; }
        .intro_text .t_wrap p:nth-child(4) { margin-bottom:30px}

 }