@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
/*------------PC------------*


/* 탑배너 */

.top_banner_section {height: 950px; overflow: hidden; position: relative;}
.top_banner_bg::before {display: block; content: ""; clear: both; background-color: #00000075; width: 100%; height: 1080px; position: absolute; top: 0; left: 0;}
.top_banner_section .top_banner_title {width:100%; text-align: center; position: absolute; top: 70%; left: 50%; transform: translate(-50%,-50%); transition: all 3s; opacity: 0;}
.top_banner_section.fade-in .top_banner_title{top:50%; opacity: 1;}
.top_banner_section .top_banner_title h3 {font-family: "Noto Serif KR", serif; font-size: 42px; color: #fff;}
.top_banner_section .top_banner_title p { font-size: 20px; color: #fff;}
.top_banner_section .mouse-scroll {position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; z-index: 5; display: block;}
.top_banner_section .mouse-scroll .mouse { position: relative; width: 16px; height: 25px; margin: 0 auto; border: 2px solid #ffffff; border-radius: 2rem;}
.top_banner_section .mouse-scroll .mouse::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: -0.03rem; margin: auto; background-color: #ffffff; width: 5px; height: 5px; border-radius: 100%; animation: bounce 5s linear infinite;}
@keyframes bounce {
    0% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	6% {
		opacity: 1;
		transform: scale(0.5) translateY(5px);
	}

	14% {
		opacity: 0;
		transform: scale(0.2) translateY(40px);
	}

	15%,
	19% {
		opacity: 0;
		transform: scale(0.2) translateY(-2px);
	}

	28%,
	29.99% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	30% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	36% {
		opacity: 1;
		transform: scale(0.5) translateY(5px);
	}

	44% {
		opacity: 0;
		transform: scale(0.2) translateY(40px);
	}

	45%,
	49% {
		opacity: 0;
		transform: scale(0.2) translateY(-2px);
	}

	58%,
	59.99% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	60% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	66% {
		opacity: 1;
		transform: scale(0.5) translateY(5px);
	}

	74% {
		opacity: 0;
		transform: scale(0.2) translateY(40px);
	}

	75%,
	79% {
		opacity: 0;
		transform: scale(0.2) translateY(-2px);
	}

	88%,
	100% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}
}
.top_banner_section .mouse-scroll span {display: inline-block;}


/* 인트로 섹션 */
.intro_section {text-align:center; margin-top: 100px; position: relative; padding: 250px 0;}
.intro_section .intro_tit .intro_logo {width:70px; margin: 0 auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.intro_section .intro_tit .intro_logo img {width:0; transition:all 4s; opacity:0;}
.intro_section .intro_tit.fade-in .intro_logo img{width:100%; opacity:1;}
.intro_section .intro_tit .intro_txt {position: absolute; top: 160px; left: 50%; transform: translateX(-50%); transition: 2s all 0.4s; opacity: 0;}
.intro_section .intro_tit.fade-in .intro_txt {opacity:1; top: 120px;}

.intro_box {display:flex; justify-content:center; margin:150px 0 0; position: relative;}
.intro_box .intro_desc h3 {display: block; font-family: "Noto Serif KR", serif; font-size: 30px; font-weight: 300; line-height: 1.3; color: #3b3b3b;}
.intro_box .intro_desc p {width: 530px; font-size: 20px; font-weight: 300;  line-height:30px; color:#8c8c8c; margin-bottom: 0; letter-spacing: -1px; word-break: keep-all;}
.intro_box .intro_img {box-shadow: -3px 3px 8px rgb(0 0 0 / 9%);}
.intro_1 .intro_img {margin-left: 50px;}
.intro_1 .intro_desc {margin-right:80px; text-align:right; display: flex; flex-direction: column; justify-content: center;  position: relative; width: 737px;}
.intro_1 .intro_desc h3 {position: absolute; top: 30%; right: 30px; transition: all 2s ease; opacity: 0;}
.intro_1 .intro_desc p {position: absolute; top: 60%; right: 0; transition: all 2s ease; opacity: 0;}
.intro_1 .intro_desc.fade-in h3{right: 0; opacity: 1;}
.intro_1 .intro_desc.fade-in p{top: 45%; opacity: 1;}
.intro_2 .intro_desc {margin-left:80px; text-align:left; display: flex; flex-direction: column; justify-content: center;  position: relative; width: 737px;}
.intro_2 .intro_desc h3 {position: absolute; top: 30%; left: -30px; transition: all 2s ease; opacity: 0;}
.intro_2_1 .intro_desc h3 {top: 20%; opacity: 0;}
.intro_2 .intro_desc p {position: absolute; top: 60%; transition: all 2s ease; opacity: 0;}
.intro_2 .intro_desc.fade-in h3{left: 0; opacity: 1;}
.intro_2 .intro_desc.fade-in p{top: 45%; opacity: 1;}
.intro_2 .intro_img {margin-right: 50px;}


/*------의료진소개------*/
#doctor_section {padding: 180px 0; }
#doctor_section .main_tit {text-align: center; transform: translateY(100px); transition: all 2s; opacity: 0;}
#doctor_section .main_tit.fade-in {transform: translateY(0); opacity: 1;}
#doctor_section .main_tit h1 {font-size: 30px; color: #595757;}
#doctor_section .main_tit p {font-size: 18px; padding-top: 10px; line-height: 1.4; color: #595757;}
#doctor_section .doctor_desc {font-family: "Noto Serif KR", serif; text-align: center; margin-top: 100px; color: #595757; font-size: 26px; font-weight: 400; font-style: italic; line-height: 1.5; padding: 10px; transition: all 2s 1s; opacity: 0;}
#doctor_section .doctor_desc.fade-in {opacity: 1;}
#doctor_section .doctor{padding-top:50px; text-align:center;}
#doctor_section .doctor li {display: inline-block; position: relative; width: 400px; box-shadow: 0px 0px 9px rgb(0 0 0 / 7%); overflow: hidden;}
#doctor_section .doctor li:nth-of-type(1) {margin-right: 10%;}
#doctor_section .doctor .doctor_name {width: 90%; position: absolute; bottom: 5%; right: -5%; background-color: #a2bba59c; padding: 34px 67px; text-align: left;}
#doctor_section .doctor .doctor_name span, #doctor_section .doctor .doctor_name h1 {line-height: 1.2; font-family: 'Cafe24ClassicType-Regular';} 
#doctor_section .doctor .doctor_name span {display: inline-block; font-size: 28px; font-weight: 400; margin-left: 10px; color: #fff;} 
#doctor_section .doctor .doctor_name h1 {display: inline-block; font-family: "Noto Serif KR", serif; font-size: 38px; color: #fff;} 


/* 스크롤배경섹션 */
.scroll_bg_section {position: relative; text-align: center; height: 460px; z-index: -1; overflow: hidden;}
.scroll_bg_section::after {display: block; content: ""; clear: both; width: 80%; height: 1px; background-color: #222; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.scroll_bg_section .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.scroll_bg_section .bg_wrap .bg {background: url("http://www.tomatoclinic.com/main/images/sub/common/scroll_bg.jpg") no-repeat; background-size: cover; position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh;}
.scroll_bg_section .scroll_bg_txt .txt1 {position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); transition: all 2s; opacity: 0;}
.scroll_bg_section.fade-in .scroll_bg_txt .txt1 {width: 100%;top: 35%;opacity: 1;}
.scroll_bg_section .scroll_bg_txt .txt1 span {font-family: "Noto Serif KR", serif; color: #222; font-size: 20px;}
.scroll_bg_section .scroll_bg_txt .txt1 h4 {font-family: "Noto Serif KR", serif; font-weight: 500; color: #222; font-size: 32px; margin-top: 6px;}
.scroll_bg_section .scroll_bg_txt .txt2 {width: 900px; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); transition: all 3s; opacity: 0; word-break: keep-all;}
.scroll_bg_section.fade-in .scroll_bg_txt .txt2 { top: 70%; opacity: 1;}
.scroll_bg_section .scroll_bg_txt .txt2 p {color: #222; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 400; word-break: keep-all; line-height: 24px;}




/* 메인내용 */

.main_list {text-align:center; overflow: hidden;}
.main_list .main_box {display:flex; justify-content:center; padding: 200px 0; position: relative;}
.main_list .main_box .main_img {box-shadow: 3px 3px 8px rgb(0 0 0 / 9%); margin-right: 50px; overflow: hidden; opacity: 0; transition: all 2s;}
.main_list .main_box .main_img.fade-in {opacity: 1;}
.main_list .main_box .main_img img {height:-webkit-fill-available;}
.main_list .main_box .main_desc {width: 30%; margin-left:80px; text-align:left; display: flex; flex-direction: column; justify-content: center;  position: relative;}
.main_list .main_box .main_desc .desc1 {transform: translateX(200px); transition: all 2s; opacity: 0; padding-bottom: 30px; border-bottom: 1px solid #d3d3d3;}
.main_list .main_box .main_desc.fade-in .desc1 {transform: translateX(0); opacity: 1;}
.main_list .main_box .main_desc .desc2 li:nth-child(1) {transition: all 2s 0.2s;}
.main_list .main_box .main_desc .desc2 li:nth-child(2) {transition: all 2s 0.3s;}
.main_list .main_box .main_desc .desc2 li:nth-child(3) {transition: all 2s 0.4s;}
.main_list .main_box .main_desc .desc2 li:nth-child(4) {transition: all 2s 0.5s;}
.main_list .main_box .main_desc .desc2 li:nth-child(5) {transition: all 2s 0.6s;}
.main_list .main_box .main_desc .desc2 li:nth-child(6) {transition: all 2s 0.7s;}
.main_list .main_box .main_desc.fade-in .desc2 li {transform: translateX(0); opacity: 1;}
.main_list .main_box .main_desc .desc2 a {display: block; transform: translateX(200px); opacity: 0; transition: all 2s 1s;}
.main_list .main_box .main_desc.fade-in .desc2 a {transform: translateX(0); opacity: 1;}
.main_list .main_box::after {display: block; content:""; clear:both; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 1px; background-color: #d3d3d3;}
.main_list .main_box:nth-last-child(1)::after {display: none;}
.main_list .main_box .main_desc h3 {display: block; font-family: "Noto Serif KR", serif; font-size: 32px; font-weight: 500; line-height: 38px; color: #628a67;}
.main_list .main_box .main_desc p {width: 500px; word-break: keep-all; font-size: 19px; font-weight: 400;  line-height:30px; color:#050505; margin-top: 30px; margin-bottom: 0; letter-spacing: -1.2px;}
.main_list .main_box .main_desc span {display: block; padding-top: 20px; letter-spacing: -0.5px;}
.main_list .main_box .main_desc > div {margin-top: 20px;}
.main_list .main_box .main_desc > div li {background-color: #a2bba5; border-radius: 30px; color: #fff; text-align: center; font-size: 17px; font-weight: 400; padding: 5px 0; margin-bottom: 10px; transform: translateX(200px); opacity: 0;}





/* 카테고리섹션 */
.category_section {padding: 150px 0;}
.category_btn {text-align: center;}
.tab {display: none;}
.tab.on {display: block!important;}
/* .tab:target {display: block;} */
.tab-nav li {display: inline-block; margin-right: 10px; background-color: #e5e5e5; border-radius: 10px; overflow: hidden; cursor: pointer;}
.tab-nav li .list {display: block; padding: 10px 35px;  font-size: 1.2rem; font-weight: 500; color: #000;}
.tab-nav li .list.on {background-color: #a2bba5; color: #ffffff;}

/* 카테고리 메인내용 */
.category_desc {text-align:center; overflow: hidden;}
.category_desc .main_box {display:flex; justify-content:center; padding: 100px 0; position: relative;}
.category_desc .main_box .main_img {opacity: 0; transition: all 2s;}
.category_desc .main_box .main_img.fade-in {opacity: 1;}
.category_desc .main_box .main_img img {box-shadow: 3px 3px 8px rgb(0 0 0 / 9%);}
.category_desc .main_box .main_desc {width: 30%; margin-left:80px; text-align:left; display: flex; flex-direction: column; justify-content: center;  position: relative;}
.category_desc .main_box .main_desc .desc1 {transform: translateX(200px); transition: all 2s; opacity: 0; border-bottom: 1px solid #d3d3d3; padding-bottom: 30px;}
.category_desc .main_box .main_desc.fade-in .desc1 {transform: translateX(0); opacity: 1;}
.category_desc .main_box .main_desc .desc2 li {transform: translateX(200px); opacity: 0;}
.category_desc .main_box .main_desc .desc2 li:nth-child(1) {transition: all 2s 0.2s;}
.category_desc .main_box .main_desc .desc2 li:nth-child(2) {transition: all 2s 0.3s;}
.category_desc .main_box .main_desc .desc2 li:nth-child(3) {transition: all 2s 0.4s;}
.category_desc .main_box .main_desc .desc2 li:nth-child(4) {transition: all 2s 0.5s;}
.category_desc .main_box .main_desc.fade-in .desc2 li {transform: translateX(0); opacity: 1;}
.category_desc .main_box::after {display: block; content:""; clear:both; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 1px; background-color: #d3d3d3;}
.category_desc .main_box:nth-last-child(1)::after {display: none;}
.category_desc .main_box .main_desc h3 {display: block; font-family: "Noto Serif KR", serif; font-size: 32px; font-weight: 600; color: #a2bba5; line-height: 1.2;}
.category_desc .main_box .main_desc p {font-size: 19px; font-weight: 400;  line-height:30px; color:#050505; margin-top: 20px; margin-bottom: 0; letter-spacing: -1.2px; word-break: keep-all;}
.category_desc .main_box .main_desc > div {margin-top: 30px;}
.category_desc .main_box .main_desc > div li {background-color: #a2bba5; border-radius: 30px; color: #fff; text-align: center; font-size: 17px; font-weight: 400; padding: 5px 0; margin-bottom: 10px;}


/* 추천대상섹션 */
.whos_section {padding: 160px 0; text-align: center;}
.whos_section .whos_tit {transform: translateY(-100px); transition: all 2s; opacity: 0;}
.whos_section .whos_tit.fade-in {transform: translateY(0); opacity: 1;}
.whos_section .whos_tit h3 {font-size: 1.75rem; color: #a2bba5; font-family: "Noto Serif KR", serif; font-weight: 500;}
.whos_section .whos_tit h2 {font-size: 40px; padding-top: 20px; color: #212529; font-weight: 500;}
.whos_section .whos_list {margin-top: 34px;}
.whos_section .whos_list ul {width: 100vw; max-width: 1040px; margin: 0 auto; font-size: 0;}
.whos_section .whos_list ul li {display: inline-block; width: calc(100% / 2 - 30px); opacity: 0; transform: translateY(100px); border: 1px solid #a2bba5; background-color: #f1f1f1; height: 100px; margin: 15px; border-radius: 10px;}
.whos_section .whos_list.fade-in ul li {transform: translateY(0); opacity: 1;}
.whos_section .whos_list ul li:nth-child(1) {transition: all 2s 0.3s;}
.whos_section .whos_list ul li:nth-child(2) {transition: all 2s 0.4s;}
.whos_section .whos_list ul li:nth-child(3) {transition: all 2s 0.5s;}
.whos_section .whos_list ul li:nth-child(4) {transition: all 2s 0.6s;;}
.whos_section .whos_list ul li .list_txt {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; justify-self: center;}
.whos_section .whos_list ul li p,.whos_section .whos_list ul li p strong { width: 100%; color: #000; font-size: 20px; line-height: 1.5; word-break: keep-all; vertical-align: initial;}
.whos_section .whos_list ul li p strong {font-weight: 600;}
#skin .whos_section .whos_list ul li {width: 80%;}
#skin .whos_section .whos_list ul li p {width: 98%; font-size: 19px; }

/*------가이드------*/
.main_container {padding-top: 150px;}
.main_container::after {display: block; content: ""; clear: both; width: 100%; height: 94px; position: absolute; top: 0; background-color: #7f7e7b;}
.container_title {text-align: center;}
.container_title h1 {font-size: 3em; font-weight: bold; color: #000; line-height: 1;}
.container_title p {font-size: 1.2em; font-weight: 500; color: #a2a2a2; padding-top: 5px;}
.ctt_con {width: 100%;}
.privacy_wrap {width: 900px; padding: 10px 0 30px 0; margin: 0 auto; line-height: 1.6;}
.privacy_wrap .title {margin-bottom: 20px;}
.privacy_wrap .title h2 {font-size: 2em; margin-bottom: 6px; color: #111; font-weight: bold; line-height: 1;}
.privacy_wrap .title h3 {font-size: 1.7em; margin-bottom: 4px; color: #111; font-weight: bold; line-height: 1;}
.privacy_wrap dl dt, .privacy_wrap dl dd {font-size: 100%}
.privacy_wrap dl dd span {font-size: inherit;}
.privacy_wrap dl dt {margin-bottom: 8px; padding: 8px 12px; background: #f1f1f1; border-radius: 8px; font-size: 100%; box-sizing: border-box; letter-spacing: 0; color: #000;}
.privacy_wrap dl dd {padding-left: 12px; margin-bottom: 28px; color: #444; font-size: 0.8em}
.privacy_wrap dl dd span {display: block; padding-left: 12px; margin: 4px 0; font-size: 0.9em;}
.privacy_wrap .title p {font-size: 1.05em; width: 100%; color: #444; letter-spacing: 0;}



/*------------MOBILE------------*/
@media all and (max-width: 1119px){

	.top_banner_section {height: 370px;}
	.top_banner_section .top_banner_title h3 {font-size: 30px;}
	.top_banner_section .top_banner_title p {font-size: 15px;}



	.intro_section {margin-top: 60px; padding-bottom: 0;}
	.intro_section .intro_tit .intro_logo {width: 50px;}
	.intro_section .intro_tit .intro_txt {width: 90%;}
	.intro_section .intro_tit.fade-in .intro_txt {top: 100px;}

	.sub_title_img {height: 370px;}
	.intro_box {margin: 0;}
    .intro_1, .intro_3 {flex-direction: column-reverse;}
    .intro_2 {flex-direction: column;}
    .intro_box .intro_img {margin: 0 auto;}
    .intro_box .intro_desc {height: 250px; text-align: left; margin: 50px auto 0; width: 90%;}
    .intro_box .intro_desc h3 {left: -30px; right: initial; font-size: 20px; top: 0; letter-spacing: -1px;}
    .intro_box .intro_desc.fade-in h3 {left: 0; right: initial;}
    .intro_box .intro_desc p {width: auto; top: 40%; right: initial; left: 0; font-size: 16px; letter-spacing: -2.5px;}
    .intro_box .intro_desc.fade-in p {top: 30%;}

	/* 의료진소개 */
	#doctor_section {padding: 120px 0;}
	#doctor_section .main_tit h1 {font-size: 22px;}
	#doctor_section .doctor_desc {margin-top: 50px; font-size: 20px; word-break: keep-all;}
	#doctor_section .doctor {width: 95%; margin: 0 auto;}
	#doctor_section .doctor li {width: 46%;}
	#doctor_section .doctor li:nth-of-type(1) {margin-right: 4%;}
	#doctor_section .doctor .doctor_name {padding: 5px 20px;}
	#doctor_section .doctor .doctor_name h1 {font-size: 22px;}
	#doctor_section .doctor .doctor_name span {font-size: 18px; font-weight: 300; margin-left: 2px; }


	/* 공지사항 페이지 */
	#bo_list {width: auto!important;}

	.scroll_bg_section {margin-top: 100px;}
	.scroll_bg_section .bg_wrap .bg {background-position-x: 45%;}
    .scroll_bg_section .scroll_bg_txt .txt1 span {font-size: 16px;}
    .scroll_bg_section .scroll_bg_txt .txt1 h4 {font-size: 26px;}
	.scroll_bg_section .scroll_bg_txt .txt2 {width: 90%;}
    .scroll_bg_section .scroll_bg_txt .txt2 p {font-size: 15px; letter-spacing: -2px;}


	.category_section {padding: 60px 0 0;}
	.tab-nav li {margin-top: 10px;}
	.tab-nav li .list {padding: 7px 20px; font-size: 1rem;}

	.main_list .main_box {flex-direction: column; padding: 100px 0;}
    .main_list .main_box .main_img {width: 90%; margin: 0 auto;}
    .main_list .main_box .main_desc {width: 90%; margin: 30px auto 0;}
	.main_list .main_box .main_desc h3 {font-size: 26px;}
    .main_list .main_box .main_desc p {width: auto; font-size: 16px; letter-spacing: -2px;}
    .main_list .main_box .main_desc > div li {font-size: 15px; letter-spacing: -2px;}
	.main_list .main_box .main_desc span {font-size: 13px;}
    .main_list .main_box::after {width: 80%; bottom: 10px;}
	.main_list .main_box .main_img img {height: initial;}

	.category_section .main_box {flex-direction: column; padding: 50px 0;}
    .category_section .main_box .main_img {width: 90%; margin: 0 auto;}
    .category_section .main_box .main_desc {width: 90%; margin: 30px auto 0;}
	.category_section .main_box .main_desc h3 {font-size: 26px;}
    .category_section .main_box .main_desc p {width: auto; font-size: 16px; letter-spacing: -2px;}
    .category_section .main_box .main_desc > div li {font-size: 15px; letter-spacing: -2px;}
	.category_section .main_box .main_desc span {font-size: 13px;}
    .category_section .main_box::after {display: none;}
	

	.whos_section {padding: 100px 0}
    .whos_section .whos_tit h3 {font-size: 21px; word-break: keep-all; width: 300px; margin: 0 auto; line-height: 1.2;}
    .whos_section .whos_tit h2 {font-size: 32px;}
    .whos_section .whos_list ul li {width: 90%; height: 70px;}
    .whos_section .whos_list ul li p, .whos_section .whos_list ul li p strong {font-size: 15px; height: auto;}
    .whos_section .whos_list ul li:nth-child(1) {transition: all 2s 0.3s;}
    .whos_section .whos_list ul li:nth-child(2) {transition: all 2s 0.5s;}
    .whos_section .whos_list ul li:nth-child(3) {transition: all 2s 0.7s;}
    .whos_section .whos_list ul li:nth-child(4) {transition: all 2s 0.9s;}
	#skin .whos_section .whos_list {margin-top: 20px;}
	#skin .whos_section .whos_list ul li {width: 90%; height: 120px; margin: 10px;}
	#skin .whos_section .whos_list ul li p {width: 88%; font-size: 15px;}
    
    /*------가이드------*/
    .main_container {padding-top: 130px;}

    .ctt_con {width: 90%; margin: 0 auto;}
    .privacy_wrap {width: 100%;}
    .privacy_wrap:first-child {padding-top: 30px;}
    .privacy_wrap.provision .title {margin-bottom: 6px;}
    .privacy_wrap .title h2 {font-size: 1.3em;}
    .privacy_wrap .title h3 {font-size: 1.3em;}
    .privacy_wrap .title p {font-size: 0.9em;}

    .container_title h1 {font-size: 2em;}
    .container_title p {font-size: 1em;}


}