
/* 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 { }
.intro_top_container .title_wrap { width:1288px; margin:0 auto; height:870px; padding-top:180px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px; background:#fff }
.intro_top_container .title_wrap .t1 { opacity:0; font-family:'Barlow Condensed'; font-weight:300; font-size:20px; line-height:1; letter-spacing:3px; color:var(--color-key); transition:all .8s ease-in-out }
.intro_top_container .title_wrap .t2 { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:20px; margin-top:10px }
.intro_top_container .title_wrap .t2 > p:nth-child(1) { opacity:0; transform:translateY(100px); display:inline-block; position:relative; font-family:'scd-thin'; font-size:100px; color:var(--color-key); line-height:1; letter-spacing:-4px; transition:all .8s ease-out; margin-left:-10px }
.intro_top_container .title_wrap .t2 > p:nth-child(2) { opacity:0; transform:translateY(100px); display:inline-block; position:relative; font-family:'scd-thin'; font-size:100px; color:var(--color-key); line-height:1; letter-spacing:-4px; transition:all .8s ease-out; margin-left:-10px }
.intro_top_container .title_wrap .t2 > p:before { content:''; bottom:8px; left:0; position:absolute; width:100%; transform:scaleX(0); transform-origin:left; height:1px; background:var(--color-key); transition:all 1s ease-in-out }
.intro_top_container .title_wrap .t3 { opacity:0; transform:translateY(80px); font-family:'gmsb'; font-size:56px; color:var(--color-key); line-height:1; letter-spacing:-3px; transition:all .8s ease-out; margin-top:60px }
.intro_top_container .title_wrap .t4 { opacity:0; transform:translateY(80px); font-family:'nsn_1'; font-size:17px; line-height:1.8; color:#333; transition:all .8s ease-out }
.intro_top_container .title_wrap .t1.active { opacity:1 }
.intro_top_container .title_wrap .t2 > p:nth-child(1).active { opacity:1; transform:translateY(0) }
.intro_top_container .title_wrap .t2 > p:nth-child(2).active { opacity:1; transform:translateY(0) }
.intro_top_container .title_wrap .t2 > p:nth-child(1).active:before { transform:scaleX(1) }
.intro_top_container .title_wrap .t2 > p:nth-child(2).active:before { transform:scaleX(1) }
.intro_top_container .title_wrap .t3.active { opacity:1; transform:translateY(0) }
.intro_top_container .title_wrap .t4.active { opacity:1; transform:translateY(0) }

/* 게시판 에니메이션 */
.board_top_container { position:relative; margin-bottom:120px }
.board_top_container:before { content:''; top:0; left:0; position:absolute; width:100%; height:100%; background:url(/images/sub/top/bg_common.jpg) no-repeat center top; opacity:0; transition:all 1s ease-in-out }
.board_top_container.active:before { opacity:1 }
.board_top_container .title_wrap { position:relative; width:1288px; margin:0 auto; height:508px; padding:120px 0 12px 10px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px }
.board_top_container .title_wrap > p:nth-child(1) { opacity:0; transform:translateY(50px); font-family:'Barlow Condensed'; font-size:17px; line-height:1; letter-spacing:4px; color:#fff; transition:all .8s ease-in-out }
.board_top_container .title_wrap > p:nth-child(2) { opacity:0; transform:translateY(100px); font-family:'Barlow Condensed'; font-weight:700; font-size:120px; line-height:1; color:#fff; margin:-20px 0 0 -5px; transition:all 1s ease-in-out }
/*.board_top_container .title_wrap > p:nth-child(2) { opacity:0; transform:translateY(100px); font-family:'Barlow Condensed'; font-weight:700; font-size:120px; line-height:1; color:#fff; margin:-20px 0 0 -5px; transition:all 1s ease-in-out; -webkit-text-stroke:1px #333; -webkit-text-fill-color:rgba(255,255,255,0) }*/
.board_top_container .title_wrap > p:nth-child(3) { opacity:0; transform:translateY(80px); font-family:'scd-thin'; font-size:66px; line-height:1; color:var(--color-key); margin:0px 0 0 -5px; transition:all .8s ease-out }
.board_top_container .title_wrap > p:nth-child(4) { opacity:0; font-family:'nsn_1'; font-size:16px; line-height:1; color:#555; padding-left:25px; border-left:1px solid rgba(0,0,0,.2); transition:all 1s ease-in-out }
.board_top_container .title_wrap > .stripe { bottom:0; left:0; position:absolute; width:100%; height:12px; transform:scaleY(0); transform-origin:bottom; background:var(--color-key); transition:all .5s ease-in-out }
.board_top_container .title_wrap > p:nth-child(1).active { opacity:1; transform:translateY(0) }
.board_top_container .title_wrap > p:nth-child(2).active { opacity:1; transform:translateY(0) }
.board_top_container .title_wrap > p:nth-child(3).active { opacity:1; transform:translateY(0) }
.board_top_container .title_wrap > p:nth-child(4).active { opacity:1 }
.board_top_container .title_wrap > .stripe.active { opacity:1; transform:scaleY(1) }

/* 일반컨텐츠 에니메이션 */
#common_top_container { padding-bottom:0px; background:#fff }
/* gp */
#common_top_container .gp_wrap { width:1920px; left:50%; margin-left:-960px; position:relative; background:#fff; overflow:hidden }
/* photo */
#common_top_container .gp_wrap .left { width:1156px; height:100%; overflow:hidden; position:relative }
#common_top_container .gp_wrap .left img { position:relative; filter: blur(20px); transform:scale(1.2); transition:all 2s ease-out }
#common_top_container .gp_wrap .left img.active { filter:blur(0); transform:scale(1) }
#common_top_container .gp_wrap .left .squ { top:0; left:0; position:absolute; width:100%; height:100%; background:#333; transition:all 1s ease-in-out; transform:scaleX(1); transform-origin:right }
#common_top_container .gp_wrap .left .squ.active { transform:scaleX(0) }
/* title */
#common_top_container .gp_wrap .right { top:0; right:0; position:absolute; width:calc(100% - 1156px); padding-left:90px; height:100%; /*padding-top:170px;*/ display:flex; flex-direction:column; justify-content:center; gap:80px; background:#333 }
#common_top_container .gp_wrap .right .title { position:relative; padding:0 0 0px 0px }
#common_top_container .gp_wrap .right .title:before { content:''; top:0; left:0px; position:absolute; width:15px; height:0; background:#f00; transition:all 1s ease-out }
#common_top_container .gp_wrap .right .title.active:before { /*height:100%*/ }
#common_top_container .gp_wrap .right .title img { opacity:0; transform:translateX(150px); transition:all 1s ease-in-out }
#common_top_container .gp_wrap .right .title img.active { opacity:1; transform:translateX(0) }
/* 20250513 수정 */
#common_top_container .gp_wrap .right .title .wrapper { opacity:0; transform:translateX(150px); transition:all 1s ease-in-out }
#common_top_container .gp_wrap .right .title .wrapper.active { opacity:1; transform:translateX(0) }
#common_top_container .gp_wrap .right .title .wrapper .t1-wrap { display:flex; gap:10px; }
#common_top_container .gp_wrap .right .title .wrapper .t1-wrap .t11 { font-family:'Barlow Condensed'; font-weight:400; font-size:11px; line-height:1; letter-spacing:3px; color:#8f8f8f; }
#common_top_container .gp_wrap .right .title .wrapper .t1-wrap .t12 { position:relative; padding-left:10px; font-family:'Barlow Condensed'; font-weight:400; font-size:11px; line-height:1; letter-spacing:3px; color:#d36978; }
#common_top_container .gp_wrap .right .title .wrapper .t1-wrap .t12:before { content:''; position:absolute; top:0; left:0; width:1px; height:100%; background:rgba(255,255,255,.2); }
#common_top_container .gp_wrap .right .title .wrapper .t2 { margin-top:25px; font-family:'gmsb'; font-size:55px; line-height:1.2; letter-spacing:-3px; color:#dbdbdb; }
#common_top_container .gp_wrap .right .title .wrapper .t3 { margin-top:20px; font-family:'nsn_0'; font-size:17px; line-height:1.8; letter-spacing:-.5px; color:#dbdbdb; }




/* info */
#common_top_container .gp_wrap .right .info { position:relative; /*margin-top:80px;*/ padding:80px 0 0 0px }
#common_top_container .gp_wrap .right .info:before { content:''; top:0; left:0px; position:absolute; width:0px; height:1px; background:rgba(255,255,255,.1); transition:all 1s ease-in-out }
#common_top_container .gp_wrap .right .info.active:before { width:460px }
#common_top_container .gp_wrap .right .info img { opacity:0; transform:translateY(100px); transition:all 1s ease-out }
#common_top_container .gp_wrap .right .info img.active { opacity:1; transform:translateY(0) }



/* ********************** 2025 수정 및 추가 - info ********************** */
#common_top_container .gp_wrap .right .info .info-con { opacity:0; transform:translateY(100px); transition:all 1s ease-out; }

/* normal */
#common_top_container .gp_wrap .right .info .info-con .title-wrap { position:relative; display:flex; gap:10px; }
#common_top_container .gp_wrap .right .info .info-con .title-wrap .title { font-family:'Barlow Semi Condensed'; font-weight:700; font-size:20px; line-height:1; letter-spacing:-.5px; color:#d36978; }
#common_top_container .gp_wrap .right .info .info-con .title-wrap .line { width:1px; height:18px; background:#d36978; transform:translateY(2px); }
#common_top_container .gp_wrap .right .info .info-con .list-wrap { margin-top:30px; display:flex; flex-direction:column; gap:20px; }
#common_top_container .gp_wrap .right .info .info-con .list-wrap .list { display:flex; gap:20px; }
#common_top_container .gp_wrap .right .info .info-con .list-wrap .list .t1 { font-family:'nsn_1'; font-size:17px; line-height:1; letter-spacing:-.5px; color:#aaa; }
#common_top_container .gp_wrap .right .info .info-con .list-wrap .list .t2 { font-family:'nsn_2'; font-size:17px; line-height:1; letter-spacing:-.5px; color:#aaa; }
#common_top_container .gp_wrap .right .info .info-con .notice { margin-top:60px; font-family:'nsn_1'; font-size:13px; line-height:1; letter-spacing:-.5px; color:#666; }

/* personal */
#common_top_container .gp_wrap .right .info .info-con .title-wrap-personal { position:relative; }
#common_top_container .gp_wrap .right .info .info-con .title-wrap-personal .t1 { font-family:'Nanum Myeongjo'; font-weight:400; font-size:70px; line-height:1; letter-spacing:-0px; color:rgba(255,255,255,.2); }
#common_top_container .gp_wrap .right .info .info-con .title-wrap-personal .t2 { margin-top:10px; font-family:'Barlow Semi Condensed'; font-weight:300; font-size:11px; line-height:1; letter-spacing:.5px; color:rgba(255,255,255,.2); text-transform:uppercase; }
#common_top_container .gp_wrap .right .info .info-con .list-wrap-personal { margin-top:60px; display:flex; flex-direction:column; justify-contents:flex-start; align-items:flex-start; gap:25px; }
#common_top_container .gp_wrap .right .info .info-con .list-wrap-personal .list { position:relative; display:flex; gap:15px; }
#common_top_container .gp_wrap .right .info .info-con .list-wrap-personal .list:before { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:rgba(211,105,120,.5); }
#common_top_container .gp_wrap .right .info .info-con .list-wrap-personal .list .t1 { font-family:'gmsl'; font-size:24px; line-height:1; letter-spacing:-1px; color:#d36978; }
#common_top_container .gp_wrap .right .info .info-con .list-wrap-personal .list .t2 { font-family:'gmsl'; font-size:24px; line-height:1; letter-spacing:-1px; color:#d36978; }

/* active */
#common_top_container .gp_wrap .right .info .info-con.active { opacity:1; transform:translateY(0); }






/* 3차메뉴 */
#common_top_container .gp_wrap .right .d3_container { position:relative; /*margin-top:80px;*/ padding:40px 0 0 0px }
#common_top_container .gp_wrap .right .d3_container:before { content:''; top:0; left:0px; position:absolute; width:0px; height:1px; background:rgba(255,255,255,.1); transition:all 1s ease-in-out }
#common_top_container .gp_wrap .right .d3_container.active:before { width:460px }
#common_top_container .gp_wrap .right .d3_container > div { opacity:0; transform:translateY(100px); transition:all 1s ease-out }
#common_top_container .gp_wrap .right .d3_container > div.active { opacity:1; transform:translateY(0) }
@media only screen and (max-width: 1492px) {
	#common_top_container .gp_wrap .right { width:calc(100% - 1056px); padding-left:40px } 
}
/* typo */
#common_top_container .typo_wrap { /*max-width:1492px; margin:0 auto;*/ width:1492px; left:50%; margin-left:-746px; position:relative; padding:180px 0 140px 0; text-align:left; background:#fff }
#common_top_container .typo_wrap .title_d3 { display:inline-block; font-family:'gmsb'; font-size:56px; line-height:1; color:#333; position:relative; padding:0 0 20px 100px; margin-bottom:120px }
#common_top_container .typo_wrap .title_d3:before { content:''; bottom:0; left:100px; position:absolute; width:calc(100% - 100px); height:10px; background:#333 }
#common_top_container .typo_wrap .info_d3 { top:340px; left:50%; margin-left:200px; position:absolute; padding-left:90px; background:#fff }
#common_top_container .typo_wrap .info_d3:before { content:''; top:0; left:0; position:absolute; width:1px; height:100%; background:rgba(0,0,0,.1) }

/* 2025 수정 및 추가 - info(3차메뉴) */
#common_top_container .typo_wrap .info_d3 .info-con { /*opacity:0; transform:translateY(100px); transition:all 1s ease-out;*/ }
#common_top_container .typo_wrap .info_d3 .info-con .title-wrap { position:relative; display:flex; gap:10px; }
#common_top_container .typo_wrap .info_d3 .info-con .title-wrap .title { font-family:'Barlow Semi Condensed'; font-weight:700; font-size:20px; line-height:1; letter-spacing:-.5px; color:#d36978; }
#common_top_container .typo_wrap .info_d3 .info-con .title-wrap .line { width:1px; height:18px; background:#d36978; transform:translateY(2px); }
#common_top_container .typo_wrap .info_d3 .info-con .list-wrap { margin-top:30px; display:flex; flex-direction:column; gap:20px; }
#common_top_container .typo_wrap .info_d3 .info-con .list-wrap .list { display:flex; gap:20px; }
#common_top_container .typo_wrap .info_d3 .info-con .list-wrap .list .t1 { font-family:'nsn_1'; font-size:17px; line-height:1; letter-spacing:-.5px; color:#333; }
#common_top_container .typo_wrap .info_d3 .info-con .list-wrap .list .t2 { font-family:'nsn_2'; font-size:17px; line-height:1; letter-spacing:-.5px; color:#333; }
#common_top_container .typo_wrap .info_d3 .info-con .notice { margin-top:60px; font-family:'nsn_1'; font-size:13px; line-height:1; letter-spacing:-.5px; color:#666; }
#common_top_container .typo_wrap .info_d3 .info-con.active { /*opacity:1; transform:translateY(0);*/ }

#common_top_container .typo_wrap .txt_container .t1 { position:relative; padding-left:100px }
#common_top_container .typo_wrap .txt_container .t1:before { content:''; top:0; left:0; position:absolute; width:25px; height:0; background:var(--color-key); transition:all 1s ease-in-out }
#common_top_container .typo_wrap .txt_container .t1.active:before { height:calc(100% - 10px) }
#common_top_container .typo_wrap .txt_container .t1 .txt_wrap { position:relative; transform:scaleX(.95); transform-origin:left } /* 문단 */
#common_top_container .typo_wrap .txt_container .t1 .txt_wrap .txt { position:relative; display:inline-block }
#common_top_container .typo_wrap .txt_container .t1 .txt_wrap .txt:before { content:''; bottom:15px; left:0; position:absolute; width:0%; height:1px; background:rgba(0,0,0,.5); transition:all 1s ease-in-out }
#common_top_container .typo_wrap .txt_container .t1 .txt_wrap .txt.active:before { width:100% }
#common_top_container .typo_wrap .txt_container .t1 .txt_wrap .txt p { font-family:'gmsb'; font-size:90px; line-height:1; letter-spacing:-4px; color:var(--color-key); opacity:0; transform:translateX(150px); transition:all 1s ease-in-out }
#common_top_container .typo_wrap .txt_container .t1 .txt_wrap .txt p.active { opacity:1; transform:translateX(0) }
#common_top_container .typo_wrap .txt_container .t1 .txt_wrap:nth-child(n+2) { margin-top:20px }
#common_top_container .typo_wrap .txt_container .t2  { padding-left:100px; font-family:'gmsl'; font-size:30px; line-height:1.5; letter-spacing:-1px; color:#555; position:relative; margin-top:50px; opacity:0; transform:translateY(100px); transition:all 1s ease-out }
#common_top_container .typo_wrap .txt_container .t2.active { opacity:1; transform:translateY(0) }
#common_top_container .typo_wrap .contents { padding-left:100px; margin-top:180px /*opacity:0; transition:all 1s ease-in-out*/ }

/* 2025 수정 및 추가 - 2 */
#common_top_container .typo_wrap .contents .txt-wrap { display:flex; word-break:keep-all; }
#common_top_container .typo_wrap .contents .t1 { position:relative; /*width:490px;*/ font-family:'scd-thin'; font-size:80px; line-height:1.2; letter-spacing:-5px; color:var(--color-primary); }
#common_top_container .typo_wrap .contents .t1 span { font-size:50px; }
#common_top_container .typo_wrap .contents .t1:before { content:''; position:absolute; top;0; right:0; width:20px; height:100%; background:#eee; }
#common_top_container .typo_wrap .contents .t2-wrap { /*width:calc(100% - 490px);*/ padding:0 100px 0 60px; display:flex; flex-direction:column; gap:20px; }
#common_top_container .typo_wrap .contents .t2-wrap .t21 { font-family:'nsk-regular'; font-size:22px; line-height:1.8; letter-spacing:-1px; color:var(--color-primary); }
#common_top_container .typo_wrap .contents .t2-wrap .t22 { font-family:'nsk-light'; font-size:19px; line-height:2.0; letter-spacing:-.5px; color:var(--color-primary); }
#common_top_container .typo_wrap .contents .img-add { margin-top:100px; }




/* 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 }*/
/* ************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************* */
