@charset "utf-8";

#doctorIntroduce .top-intro	{color:#fff;}
#doctorIntroduce .doctor-tab { margin-top: 118px;} 
#doctorIntroduce .doctor-tab .view-doctor {float: left;cursor: pointer;width: 128px;height: 174px;text-align: center;margin-right: 9px; color: #fff;position:relative;} 
#doctorIntroduce .doctor-tab .view-doctor:after{content:"";position:absolute;width: 128px;height: 173px;box-shadow: 0 0 0 1px #f2f2f2;left: 0px;top: 0px; transition: all .5s ease;} 
#doctorIntroduce .doctor-tab .view-doctor.active:after {box-shadow: 0 0 0 1px #900020;}
#doctorIntroduce .doctor-tab .view-doctor .role-and-name {font-size: 16px;font-weight: 500;line-height: 1.2;padding: 6px 0 4px;background: #d5d5d5;} 
#doctorIntroduce .doctor-tab .view-doctor.active .role-and-name {font-size: 16px;font-weight: 500;line-height: 1.2;padding: 6px 0 4px;background: #900020;} 
#doctorIntroduce .doctor-tab .view-doctor .empty-thumb {width:128px; height:125px;}
#doctorIntroduce .doctor-tab .view-doctor .thumb-01 {background:url('/images/doctor_hong_mini_thumb_off.jpg') no-repeat center; background-size:cover;}
#doctorIntroduce .doctor-tab .view-doctor .thumb-02 {background:url('/images/doctor_choi_mini_thumb_off.jpg') no-repeat center; background-size:cover;}
#doctorIntroduce .doctor-tab .view-doctor.active .thumb-01 {background:url('/images/doctor_hong_mini_thumb.jpg') no-repeat center; background-size:cover;}
#doctorIntroduce .doctor-tab .view-doctor.active .thumb-02 {background:url('/images/doctor_choi_mini_thumb.jpg') no-repeat center; background-size:cover;}

#doctorIntroduce .doctor-info-wrapper { margin-top: 50px; position: relative; height: 1116px; } 
#doctorIntroduce .doctor-info { opacity:0; z-index:-1; position: absolute; left: 50%; transform: translateX(-50%); } 
#doctorIntroduce .doctor-info .container-2 { position: relative; padding-bottom: 60px; } 
#doctorIntroduce .doctor-info.viewing { opacity:1; z-index:1; } 
#doctorIntroduce .doctor-info.viewing .doctor-name { opacity: 1; transform: translateY(0px); transition: all 1.5s ease; } 
#doctorIntroduce .doctor-info .doctor-name { opacity: 0; transform: translateY(70px); } 
#doctorIntroduce .doctor-info .doctor-name .tit { font-size: 35px; font-weight: 500; display: block; line-height: 1; margin-bottom: 27px; } 
#doctorIntroduce .doctor-info .doctor-name .con { font-size: 58px; font-weight: bold; line-height: 1; } 
#doctorIntroduce .doctor-info .doctor-career { margin-top: 57px; margin-bottom: 103px; } 
#doctorIntroduce .doctor-info .doctor-career .tit { font-size: 25px; font-weight: bold; line-height: 1; margin-bottom: 25px; display: block; opacity: 0; transform: translateY(40px); } 
#doctorIntroduce .doctor-info .doctor-career .con { opacity: 0; transform: translateY(40px); } 
#doctorIntroduce .doctor-info.viewing .doctor-career .tit { opacity: 1; transform: translateY(0px); transition: all 1.5s 0.4s ease; } 
#doctorIntroduce .doctor-info.viewing .doctor-report .tit { opacity: 1; transform: translateY(0px); transition: all 1.5s 1.2s ease; } 
#doctorIntroduce .doctor-info.viewing .doctor-career .con { opacity: 1; transform: translateY(0px); transition: all 1.5s 0.8s ease; } 
#doctorIntroduce .doctor-info.viewing .doctor-report .con { opacity: 1; transform: translateY(0px); transition: all 1.5s 1.6s ease; } 

#doctorIntroduce .doctor-info .doctor-career .con li { color: #888; font-size: 17px; line-height: 1.8; } 
#doctorIntroduce .doctor-info .doctor-report .tit { font-size: 25px; font-weight: bold; line-height: 1; margin-bottom: 25px; display: block; opacity: 0; transform: translateY(40px); } 
#doctorIntroduce .doctor-info .doctor-report .con { opacity: 0; transform: translateY(40px); } 
#doctorIntroduce .doctor-info .doctor-report .con li { overflow: hidden; margin-bottom: 15px; } 
#doctorIntroduce .doctor-info .doctor-report .con li .year { font-family: "Merriweather", serif; font-size: 30px; float: left; line-height: 1; width: 90px; } 
#doctorIntroduce .doctor-info .doctor-report .con li .report-name { font-size: 15px; color: #888; float: left; width: 348px; padding-top: 6px; } 
#doctorIntroduce .doctor-info .doctor-report .con li .report-name .emphasis-report { font-weight: bold;color:#333; } 
#doctorIntroduce .doctor-info .ani-box .circle-1 { width: 62px; height: 62px; right: 85px; top: -64px; z-index: -1; animation: upDown1 5s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; } 
#doctorIntroduce .doctor-info .ani-box .circle-2 { width: 380px; height: 380px; position: absolute; right: 55px; top: -120px; border-width: 10px; z-index: -3; animation: upDown1 5s 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; } 
#doctorIntroduce .doctor-info .ani-box .circle-3 { width: 62px; height: 62px; top: -86px; right: 54px; border-width: 6px; z-index: -2; animation: upDown1 5s 1s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; } 
#doctorIntroduce .doctor-info .ani-box .plus-1 { right: 170px; top: -190px; animation: upDown1 5s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; } 
#doctorIntroduce .doctor-info .univ-logo {  position: absolute;top: 70px;left: 200px;z-index: -1;transform:translateX(60px); opacity: 0; transition: all 2s ease;} 
#doctorIntroduce .doctor-info.viewing .univ-logo {transform:translateX(0px); opacity:1; } 
#doctorIntroduce .doctor-info .doctor-img { position: absolute; top: 100px; right: 140px; transform:translateX(60px); opacity: 0; transition: all 2s ease; } 
#doctorIntroduce .doctor-info.viewing .doctor-img { transform:translateX(0px); opacity:1; } 
#doctorIntroduce .doctor-info .doctor-youtube-videos { position: absolute; width: 546px; height: 218px; right: 20px; bottom: 60px; overflow: hidden; transform:translateX(60px); opacity: 0; transition: all 2s ease; } 
#doctorIntroduce .doctor-info.viewing .doctor-youtube-videos { transform:translateX(0px); opacity:1; } 
#doctorIntroduce .doctor-info .doctor-youtube-videos .tit { font-size: 21px; font-weight: bold; line-height: 1; padding-top: 36px; margin-bottom: 27px; color: #fff; } 
#doctorIntroduce .doctor-info .doctor-youtube-videos .youtube-slider { padding: 0 4px; } 
#doctorIntroduce .doctor-info .doctor-youtube-videos .youtube-slider .swiper-slide { width: 167px !important; margin-right: 18px; } 

#doctorIntroduce .left-right-btn { height: 100%; position: absolute; width: 100%; } 
#doctorIntroduce .left-right-btn .container-2 { position:relative; height: 100%; } 
#doctorIntroduce .left-right-btn .arrow-btn { position: absolute; padding: 20px; box-shadow: 1px -1px 0 1px #999 inset; -webkit-box-shadow: 3px -3px #999 inset; border: solid transparent; border-width: 0 0 2rem 2rem; transition: 0.4s; cursor: pointer; } 
#doctorIntroduce .left-right-btn .arrow-btn:hover { box-shadow: 2px -2px 0 2px #900020 inset; -webkit-box-shadow: 6px -6px #900020 inset; } 
#doctorIntroduce .left-right-btn .arrow-left-btn { transform: translateY(-50%) rotate(45deg); left: -157px; top: 50%; } 
#doctorIntroduce .left-right-btn .arrow-right-btn { transform: translateY(-50%) rotate(225deg); top: 50%; right: -120px; } 

#doctorIntroduce .doctor-info-2 { width: calc(100% - 50px); margin-top: 125px; text-align: center; min-width: 1236px; opacity: 0; transform: translateX(50px); transition: all ease 1.5s; } 
#doctorIntroduce .doctor-info-2.viewing { width:100%; opacity: 1; transform: translateX(0px); } 
#doctorIntroduce .doctor-info-2 .tit { font-size: 42px; font-weight: bold; line-height: 1; margin-bottom: 33px; } 
#doctorIntroduce .doctor-info-2 .sub-tit { color: #666; font-size: 17px; } 
#doctorIntroduce .doctor-info-2 .thesis-slider { margin-top: 122px; overflow: hidden; height: 470px; position: relative; margin-left: auto; margin-bottom: 126px; padding:0 30px; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide { width: 300px; margin-right: 40px; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide:last-child { margin-right:0px; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide .thesis-top { overflow: hidden; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide .thesis-top .sort { float: left; font-size: 20px; font-weight: bold; line-height: 1; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide .thesis-top .release-date { float: right; font-size: 16px; font-weight: bold; color: #999; line-height: 1.2; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide .thesis-thumb { margin: 13px 0 10px; display: flex; background: #fff; color: #fff; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; height: 270px; border: 1px solid #efefef; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide .thesis-thumb > img { max-width: 298px; max-height: 268px; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide .thesis-name { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .swiper-slide .thesis-name-eng { font-size: 15px; font-weight: 500; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: #666;margin-top: 3px;text-align:left; } 
#doctorIntroduce .doctor-info-2 .thesis-slider .common-bar-paging { border-radius: 0; left: 50%; background: #f5f2f0; height: 6px; width: 1236px; bottom: 0; transform: translateX(-50%); }