/* contents */
#contents { padding:0px 0 0 0; background:#fff; max-width:1920px; margin:0 auto } /* gnb height(pc) */
#contents .box_100 { left:50%; margin-left:-960px; width:1920px; position:relative; text-align:center }
#contents .ready { position:relative; height:600px; display:flex; justify-content:center; align-items:center }
#contents .ready:before { content:''; top:0; left:50%; margin-left:-829px; position:absolute; width:1658px; height:1px; background:#333 }
#contents .ready p { font-family:''nsn_1; font-size:19px; line-height:1; color:#333 }
#common_bottom_space { padding-top:120px; background:#fff }


/* 병원소개 에니메이션 */
.intro_top_container { position:relative }
.intro_top_container .title_wrap { width:1288px; margin:0 auto; padding:250px 0 180px 0; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:25px }
.intro_top_container .title_wrap .t1 { opacity:0; transition:all 1s ease-out; /*font-family:'Nanum Myeongjo';*/ font-family: 'NanumMyeongjo'; font-weight:700; font-size:15px; line-height:1; letter-spacing:1px; color:#999 }
.intro_top_container .title_wrap .t2 { opacity:0; transform:translateY(80px); transition:all 1.2s cubic-bezier(0.65, 0, 0.35, 1); font-family:'nsn_4'; font-size:60px; line-height:1; letter-spacing:-2px; color:#333 }
.intro_top_container .title_wrap .t3 { opacity:0; transform:translateY(60px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1); font-family:'nsn_1'; font-size:18px; line-height:1.6; color:#666 }
.intro_top_container .title_wrap .icon { /*font-family:'Nanum Myeongjo';*/ font-family: 'NanumMyeongjo'; font-size:250px; line-height:1; color:#b0d9dc; height:65px; background:#fff; overflow:hidden } /* 쌍따옴표 */
.intro_top_container .title_wrap .t4 { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:20px;  margin-top:120px }
.intro_top_container .title_wrap .t4 .icon_wrap { opacity:0; transform:translateX(-100px); transition:all 1.2s cubic-bezier(0.65, 0, 0.35, 1); display:flex; align-items:center; gap:0px }
.intro_top_container .title_wrap .t4 .icon_wrap .icon { position:relative; transform:translateX(-20px) } /* 쌍따옴표 */
.intro_top_container .title_wrap .t4 .icon_wrap .line { width:1200px; height:1px; background:#ddd }
.intro_top_container .title_wrap .t4 .txt { position:relative; height:91px; background:#fff; overflow:hidden }
.intro_top_container .title_wrap .t4 .txt > p { /*filter:blur(10px);*/ transform:translateY(100%); transition:all 1.2s cubic-bezier(0.65, 0, 0.35, 1) .3s; /*font-family:'Nanum Myeongjo';*/ font-family: 'NanumMyeongjo'; font-size:95px; line-height:1; color:#b0d9dc }
.intro_top_container .title_wrap .t4 .txt:before { transform:scaleX(0); transform-origin:left; transition:all 1.2s cubic-bezier(0.65, 0, 0.35, 1); content:''; bottom:0px; left:0; position:absolute; width:100%; height:1px; background:#b0d9dc }
.intro_top_container .title_wrap .t5 { opacity:0; transform:translateX(100px); transition:all 1.2s cubic-bezier(0.33, 1, 0.68, 1); display:flex; align-items:flex-end; gap:0px }
.intro_top_container .title_wrap .t5 > p:nth-child(1) { transform:rotate(180deg) translateY(-15px) } /* 쌍따옴표 */
.intro_top_container .title_wrap .t5 > p:nth-child(2) { font-family:'nsn_1'; font-size:18px; line-height:1; color:#333; padding-bottom:10px }
/* active */
.intro_top_container .title_wrap .t1.active { opacity:1 }
.intro_top_container .title_wrap .t2.active { opacity:1; transform:translateY(0) }
.intro_top_container .title_wrap .t3.active { opacity:1; transform:translateY(0) }
.intro_top_container .title_wrap .t4 .icon_wrap.active { opacity:1; transform:translateX(0) } /* 쌍따옴표 */
.intro_top_container .title_wrap .t4 .txt.active > p { /*filter:blur(0px);*/ transform:translateY(0) }
.intro_top_container .title_wrap .t4 .txt.active:before { transform:scaleX(1) }
.intro_top_container .title_wrap .t4 .txt.active2:before { opacity:0 }
.intro_top_container .title_wrap .t5.active { opacity:1; transform:translateX(0) } /* 쌍따옴표 */


/* 게시판 에니메이션 */
.board_top_container { position:relative; border-bottom:60px solid #f5f7fa; margin-bottom:120px; padding:0 }
.board_top_container .title_wrap { width:1288px; margin:0 auto; height:550px; padding:210px 0 0 30px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:0px }
.board_top_container .title_wrap .t1 { opacity:0; transition:all 1s ease-out; font-family:'Barlow Condensed'; font-size:15px; line-height:1; letter-spacing:2px; color:#b0d8de }
.board_top_container .title_wrap .t2 { opacity:0; transform:translateX(-3px) scaleX(1.05) translateY(100px); transition:all 1.2s cubic-bezier(0.65, 0, 0.35, 1); font-family:'Barlow Condensed'; font-weight:800; background:linear-gradient(to right,#afd9dd,#dab1e8,#edc0d0); -webkit-background-clip:text; -webkit-text-fill-color: transparent; font-size:106px; transform-origin:left; line-height:1.5; margin-top:-15px }
.board_top_container .title_wrap .t3 { opacity:0; transform:translateY(80px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1); font-family:'nsn_4'; font-size:50px; line-height:1; color:#333; margin-top:-15px }
.board_top_container .title_wrap .t4 { opacity:0; transform:translateY(60px); transition:all 1.2s cubic-bezier(0.22, 1, 0.36, 1); font-family:'nsn_1'; font-size:16px; line-height:1; color:#555; margin-top:25px }
.board_top_container .title_wrap .t1.active { opacity:1 }
.board_top_container .title_wrap .t2.active { opacity:1; transform:translateX(-3px) scaleX(1.05) translateY(0) }
.board_top_container .title_wrap .t3.active { opacity:1; transform:translateY(0) }
.board_top_container .title_wrap .t4.active { opacity:1; transform:translateY(0)}


/* 일반컨텐츠 에니메이션 */
#common_top_container { position:relative; overflow:hidden }
/* box1 - gp */
#common_top_container .box1_container { width:1920px; left:50%; margin-left:-960px; position:relative; background:#eee; overflow:hidden }
#common_top_container .box1_container > img { position:relative; transform:scale(1.1); transition:all 5s ease-out }
#common_top_container .box1_container > img.active { transform:scale(1) }
#common_top_container .box1_container .typo_container { top:0; left:0; position:absolute; width:100%; height:100%; padding-top:220px }
#common_top_container .box1_container .typo_wrap { width:1288px; margin:0 auto }
#common_top_container .box1_container .typo_wrap .t_fix1 { opacity:0; font-family:'Barlow Condensed'; font-weight:400; font-size:15px; line-height:1; letter-spacing:2px; color:#666; transition:all 1s ease-in-out }
#common_top_container .box1_container .typo_wrap .t_fix1 span { color:var(--color-key) }
#common_top_container .box1_container .typo_wrap .t1_wrap { margin-top:110px; position:relative; display:flex; flex-direction:column; justify-conetnt:flex-start; align-items:flex-start; gap:20px }
#common_top_container .box1_container .typo_wrap .t1_wrap > div { position:relative; overflow:hidden }
#common_top_container .box1_container .typo_wrap .t1_wrap > div:before { transform:scaleX(0); content:''; bottom:1px; left:0; position:absolute; width:100%; height:1px; background:rgba(0,0,0,.2); transform-origin:left; transition:all 1.5s cubic-bezier(0.65, 0, 0.35, 1) }
#common_top_container .box1_container .typo_wrap .t1_wrap > div > p { transform:translateY(100%); /*font-family:'Nanum Myeongjo';*/ font-family: 'NanumMyeongjo'; font-size:39px; line-height:1; letter-spacing:-1px; color:#333; transition:all 1s cubic-bezier(0.33, 1, 0.68, 1) .8s }
#common_top_container .box1_container .typo_wrap .t2 { opacity:0; transform:translateY(80px); margin-top:60px; font-family:'nsn_4'; font-size:60px; line-height:1.1; letter-spacing:-2px; color:#333; transition:all 1.2s cubic-bezier(0.33, 1, 0.68, 1) }
#common_top_container .box1_container .typo_wrap .t3 { opacity:0; transform:translateY(60px); margin-top:30px; font-family:'nsn_1'; font-size:16px; line-height:1.6; color:#333; transition:all .8s cubic-bezier(0.33, 1, 0.68, 1) }
#common_top_container .box1_container .typo_wrap .t4 { opacity:0; filter:blur(5px); margin-top:70px; transform:translateX(-15px); /*font-family:'Nanum Myeongjo';*/ font-family: 'NanumMyeongjo'; font-size:130px; line-height:.85; letter-spacing:-2px; color:#fff; transition:all 1.6s ease-out }
#common_top_container .box1_container .typo_wrap .t_fix2 { opacity:0; margin-top:30px; /*font-family:'Nanum Myeongjo';*/ font-family: 'NanumMyeongjo'; font-size:14px; line-height:1; letter-spacing:10px; color:#fff; transition:all 1s ease-out }
#common_top_container .box1_container .typo_wrap .t_fix1.active { opacity:1 }
#common_top_container .box1_container .typo_wrap .t1_wrap > div.active:before { transform:scaleX(1) }
#common_top_container .box1_container .typo_wrap .t1_wrap > div.active > p { transform:translateY(0) }
#common_top_container .box1_container .typo_wrap .t2.active { opacity:1; transform:translateY(0) }
#common_top_container .box1_container .typo_wrap .t3.active { opacity:1; transform:translateY(0) }
#common_top_container .box1_container .typo_wrap .t4.active { opacity:1; filter:blur(0) }
#common_top_container .box1_container .typo_wrap .t_fix2.active { opacity:1 }
/* box2 - 수술정보 */
#common_top_container .box2_container { padding:120px 0; width:1288px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start }
#common_top_container .box2_container .wrap1 { width:560px; background:#fff }
#common_top_container .box2_container .wrap1 > p:nth-child(1) { opacity:0; font-family:'Barlow Condensed'; font-weight:200; font-size:18px; line-height:1; letter-spacing:1px; color:#aaa; transition:all 1s cubic-bezier(0.33, 1, 0.68, 1) }
#common_top_container .box2_container .wrap1 > p:nth-child(2) { opacity:0; transform:translateY(100px) translateX(-12px); margin-top:40px; font-family:'GloberThin'; font-size:120px; line-height:1; letter-spacing:-2px; color:#666; transition:all 1.4s cubic-bezier(0.33, 1, 0.68, 1) .4s }
#common_top_container .box2_container .wrap1 > p:nth-child(3) { opacity:0; transform:translateY(100px); margin-top:40px; font-family:'nsn_1'; font-size:17px; line-height:2; color:#333; word-break:keep-all; transition:all 1.4s cubic-bezier(0.33, 1, 0.68, 1) .8s }
#common_top_container .box2_container .wrap1 > p:nth-child(4) { opacity:0; transform:translateY(100px); margin-top:40px; font-family:'nsn_2'; font-size:18px; line-height:2; color:#333; word-break:keep-all; transition:all 1.4s cubic-bezier(0.33, 1, 0.68, 1) 1.2s }
#common_top_container .box2_container .wrap1.active > p:nth-child(1) { opacity:1 }
#common_top_container .box2_container .wrap1.active > p:nth-child(2) { opacity:1; transform:translateY(0) translateX(-12px) }
#common_top_container .box2_container .wrap1.active > p:nth-child(3) { opacity:1; transform:translateY(0) }
#common_top_container .box2_container .wrap1.active > p:nth-child(4) { opacity:1; transform:translateY(0) }
#common_top_container .box2_container .wrap2 { width:560px; padding-top:180px }
#common_top_container .box2_container .wrap2 .list_wrap { display:flex; flex-wrap:wrap }
#common_top_container .box2_container .wrap2 .list_wrap .list { opacity:0; position:relative; width:50%; padding:35px 0; display:flex; align-items:center; gap:40px; transition:all 1.4s cubic-bezier(0.33, 1, 0.68, 1) }
#common_top_container .box2_container .wrap2 .list_wrap .list:nth-child(odd) { transform:translateX(100px) }
#common_top_container .box2_container .wrap2 .list_wrap .list:nth-child(even) { transform:translateX(-100px) }
#common_top_container .box2_container .wrap2 .list_wrap .list .icon { width:60px; height:60px }
#common_top_container .box2_container .wrap2 .list_wrap .list .txt p:nth-child(1) { font-family:'nsn_2'; font-size:16px; line-height:1; color:#333 }
#common_top_container .box2_container .wrap2 .list_wrap .list .txt p:nth-child(2) { font-family:'nsn_2'; font-size:17px; line-height:1; color:var(--color-key); margin-top:10px }
#common_top_container .box2_container .wrap2 .list_wrap .list:before { content:''; bottom:0; left:0; position:absolute; width:100%; height:1px; background:#ddd }
#common_top_container .box2_container .wrap2 .list_wrap .list:nth-child(2n) { padding-left:40px }
#common_top_container .box2_container .wrap2 .list_wrap .list:nth-child(2n):after { content:''; top:35%; left:0; position:absolute; width:1px; height:30%; background:#eee }
#common_top_container .box2_container .wrap2 .list_wrap .list.active { opacity:1; transform:translateX(0) }
#common_top_container .box2_container .wrap2 .notice { opacity:0; transform:translateY(60px); margin-top:40px; font-family:'nsn_1'; font-size:13px; line-height:1; color:#333; transition:all 1s cubic-bezier(0.33, 1, 0.68, 1) }
#common_top_container .box2_container .wrap2 .notice.active { opacity:1; transform:translateY(0) }
/* box3 - moto */
#common_top_container .box3_container { position:relative; overflow:hidden }
#common_top_container .box3_container .bg_wrap { width:1920px; left:50%; margin-left:-960px; position:relative; background:#eee; overflow:hidden }
#common_top_container .box3_container .bg_wrap:after { content:''; top:0; left:0; position:absolute; width:100%; height:100%; background:url(/images/common/pattern.png) center top }
#common_top_container .box3_container .bg_wrap > img { position:relative; transform:scale(1.1); transition:all 5s ease-out }
#common_top_container .box3_container .bg_wrap > img.active { transform:scale(1) }
#common_top_container .box3_container .typo_container { top:0; left:50%; margin-left:-644px; position:absolute; width:1288px; height:100%; padding-top:120px }
#common_top_container .box3_container .typo_container .t1 { opacity:0; font-family:'Barlow Condensed'; font-weight:200; font-size:18px; line-height:1; letter-spacing:1px; color:rgba(0255,255,255,.5); transition:all 1s cubic-bezier(0.33, 1, 0.68, 1) }
#common_top_container .box3_container .typo_container .t2 { opacity:0; transform:translateY(100px) translateX(-12px); margin-top:40px; font-family:'GloberThin'; font-size:120px; line-height:1; letter-spacing:-2px; color:rgba(255,255,255,.5); transition:all 1.4s cubic-bezier(0.33, 1, 0.68, 1) }
#common_top_container .box3_container .typo_container .t3_wrap { margin-top:40px; position:relative; display:flex; flex-direction:column; justify-conetnt:flex-start; align-items:flex-start; gap:10px }
#common_top_container .box3_container .typo_container .t3_wrap > div { position:relative }
#common_top_container .box3_container .typo_container .t3_wrap > div:before { transform:scaleX(0); content:''; bottom:17px; left:0; position:absolute; width:100%; height:1px; background:rgba(255,255,255,1); filter:drop-shadow(0 0 2px #fff); transform-origin:left; transition:all 1.6s cubic-bezier(0.65, 0, 0.35, 1) }
#common_top_container .box3_container .typo_container .t3_wrap > div > p { opacity:0; transform:translateX(150px); font-family:'gmsb'; font-size:120px; line-height:1; letter-spacing:-1px; -webkit-text-stroke:.5px rgba(255,255,255,1); -webkit-text-fill-color:rgba(0,0,0,0); transition:all 1.2s cubic-bezier(0.33, 1, 0.68, 1) .4s }
#common_top_container .box3_container .typo_container .t1.active { opacity:1 }
#common_top_container .box3_container .typo_container .t2.active { opacity:1; transform:translateY(0) translateX(-12px) }
#common_top_container .box3_container .typo_container .t3_wrap > div.active:before { transform:scaleX(100%) }
#common_top_container .box3_container .typo_container .t3_wrap > div.active > p { opacity:1; transform:translateX(0) }
#common_top_container .box3_container .typo_container .t3_wrap > div.active2:before { opacity:0 }
#common_top_container .box3_container .typo_container .t4_wrap { opacity:0; transform:translateY(80px); margin-top:30px; display:flex; gap:30px; transition:all 1.2s cubic-bezier(0.65, 0, 0.35, 1) }
#common_top_container .box3_container .typo_container .t4_wrap.active { opacity:1; transform:translateY(0) }
#common_top_container .box3_container .typo_container .t4_wrap > div { display:flex; gap:10px }
#common_top_container .box3_container .typo_container .t4_wrap > div p { font-family:'nsn_1'; font-size:20px; line-height:1; color:#fff }
#common_top_container .box3_container .typo_container .t4_wrap > div .sharp { color:var(--color-key) }








/* video(mp4/youtube/vimeo) */
.video_container .video_wrap { width:100%; height:0; padding-bottom:56.25%; position:relative; background:#000 }
.video_container .video_wrap iframe { top:0; left:0; position:absolute; width:100%; height:100% }



@media only screen and (max-width:1287px) {
	#contents { /*padding-top:60px*/ } /* gnb height(mobile) */
}
/*#contents .top_gp_container { margin-bottom:120px }
#contents .top_gp_container .title { height:410px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:30px; background:#fff }
#contents .top_gp_container .title p:nth-child(1) { font-family:'Barlow Condensed'; font-weight:300; font-size:11px; letter-spacing:3px; color:#333 }
#contents .top_gp_container .title p:nth-child(2) { font-family:'GloberThin'; font-size:70px; color:#333; letter-spacing:-1px }
#contents .top_gp_container .title p:nth-child(3) { font-family:'nsk-black'; font-size:50px; color:#333; letter-spacing:-1px; margin-top:-30px }
#contents .top_gp_container .title p:nth-child(4) { font-family:'nsk-light'; font-size:16px; color:#333; letter-spacing:-.5px }*/
@media only screen and (max-width:1287px) {
	/*#contents { padding-top:60px }*/ /* gnb height(mobile) */
}
@media only screen and (max-width:767px) {
	/*#contents .top_gp_container { margin-bottom:60px }
	#contents .top_gp_container .title { height:210px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:15px; background:#fff }
	#contents .top_gp_container .title p:nth-child(1) { font-family:'Barlow Condensed'; font-weight:300; font-size:10px; letter-spacing:2px; color:#333 }
	#contents .top_gp_container .title p:nth-child(2) { font-family:'GloberThin'; font-size:38px; color:#333; letter-spacing:-.5px }
	#contents .top_gp_container .title p:nth-child(3) { font-family:'nsk-black'; font-size:28px; color:#333; letter-spacing:-.5px; margin-top:-15px }
	#contents .top_gp_container .title p:nth-child(4) { font-family:'nsk-light'; font-size:11px; color:#333; letter-spacing:-.5px }*/
}

/* mobile ****************************************************************************************************************************************** */
/* ************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************* */
/*#mobile { max-width:720px; margin:0 auto }
#board_container_mobile { margin-top:40px; }
#board_container_mobile img { width:auto }*/
/* ************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************* */