@charset "utf-8";

/*==========서브 반응형==========*/
/*2000px - 1640px*/
@media only screen and (max-width:2000px) {

	#header { padding: 0 84px; }
	#header .etc { right:84px; }
    .navbar_burger { display: none; }
    .navbar_menu { display: none; }

}


/*1640px - 1241px*/
@media only screen and (max-width: 1640px){
	:root {
		/* font */
		--font-size-13:12px;
		--font-size-14:13px;
		--font-size-15:14px;
		--font-size-16:15px;
		--font-size-17:15px;
		--font-size-18:17px;
		--font-size-20:18px;
		--font-size-22:19px;
		--font-size-24:20px;
		--font-size-26:21px;
		--font-size-28:22px;
		--font-size-38:30px;
		--font-size-42:32px;
		--font-size-44:33px;
		--font-size-46:34px;
		--font-size-56:55px;

		/* height */
		--header-height: 80px;

		/* radius */
		--radius-24: 20px;
		--radius-34: 25px;
	}

	#header { padding: 0 60px; }
	#header h1 a { width: 180px; height: 47px; }
	#header nav > ul { margin-left: 6vw; }
	#header nav > ul > li > a { padding: 0 1.4vw; }
	#header nav > ul > li:hover > a::before { width: calc(100% - 2vw) }
	#header nav > ul > li > a > span { font-size: 16px; }

	#header .etc { right: 60px; }
	#header .etc > * { margin-left: 35px; }

	#container { height: auto;}

    /* .visual_sect { height: auto;}
    .visual_sect video { position: static; width: 100%;} */

    .navbar_burger { display: none; }
    .navbar_menu { display: none; }

    .treatment_etc { margin: 2rem auto;}
    .treatment_etc .etc_area { border-radius: 4rem;}

}


/*1240px - 769px*/
@media only screen and (max-width: 1240px){


	/*
	[1240px~ 폰트사이즈]
	- 3.5rem -> 3rem
	- 3rem -> 2.4rem
	- 1.8rem - > 1.6rem

	[1240px~ 영역 여백]
	- 상단여백 10rem
	- 하단여백 15rem
	*/

	body, input, textarea, select, button, table { font-size: 15px;}

	#header {justify-content: space-between; padding: 0 20px;}
	#header::after { }
	#header h1 {position:static;transform: none; }
	#header nav { position: fixed; top: 0; left: 0; width:100%; bottom: 0; background: #1c5c6b; z-index: 2; transform:translate(100%, 0); overflow: auto; transition:left .5s; }
	#header nav { -ms-overflow-style: none; scrollbar-width: none; }
	#header nav::-webkit-scrollbar { display: none; }
	#header nav > ul {flex-direction: column; align-items: flex-start; overflow:visible; width: 100%; padding: 8rem 5rem 5rem; margin-left: 0;}
	#header nav > ul > li{height:auto;}
	#header nav > ul > li + li{margin-top: 4.5rem;}
	#header nav > ul > li:last-of-type {padding-bottom: 100px; }
	#header nav > ul > li > a {height:auto;justify-content: flex-start;padding: 0; }
	#header nav > ul > li > a::before {display:none; }
	#header nav > ul > li > a > span {color: #fff; font-weight: 600; font-size: 3.5rem;}
	#header nav > ul > li > a > span:before {display:none; }
	#header nav > ul > li > a:hover > span,
	#header nav > ul > li > a.active > span {color:#fff; }
	#header nav > ul > li:hover > a > span {color: #fff; }

	#header .etc {position:static; z-index:auto; transform: none;}
	#header .etc > * { width:100px; margin-left: 24px; text-align: center; }

    #header .btn_menu { display: flex; align-items: center; justify-content: center; font-size: 0; top: 50%; transform: translateY(-50%); position: absolute; right: 0px; flex-direction: column; width: 30px; height: 30px;}
    #header .btn_menu span { display: block; width: 14px; height: 2px; background: #000; border-radius: 6px; margin-bottom: 3px;}

    /* 햄거버관련 */
    .navbar_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.1s ease;  z-index: 9998;}
    .navbar_burger { position: fixed; top: 1rem; right: 1rem; cursor: pointer; color: #000; }
    .navbar_burger_back { position: fixed; top: 1.5rem; right: 1.5rem; cursor: pointer; color: #fff; }
    .navbar_menu { position: fixed; top: 0; right: 0; width: 50%; height: 100%; background-color: #0e0e0e; padding: 0 2rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; transform: translateX(100%); z-index: 999; color: #000; transition: transform 0.3s ease;  z-index: 9999;}
    .navbar_menu a { position: relative; color: #ffffff; font-size: 1.5rem; margin-left: 1rem; margin-bottom: 3rem; text-decoration: none; }
    .navbar_menu.active { transform: translateX(0); z-index: 9999;}      
    .navbar_overlay.active { opacity: 1; pointer-events: auto; z-index: 9998;}
    /* 햄버거관련 끝 */
    
	.Msection0 { display: none;}
	.Msection1 { display: block;}

    .Msection1 { position: relative; height: 50vw; overflow-x: hidden;}
	.Msection1 .txt1 { top: 16.2vw;}
	.Msection1 .txt1, .Msection1 .txt2 { position: absolute;}
	.Msection1 .txt1 img { max-width: 54vw;}
	.Msection1 .txt2 { top: 33.7vw;}
	.Msection1 .txt2 img { max-width: 54vw;}


    .treatment_tit { margin: 0 auto; text-align: center; font-size:var(--font-size-56); font-weight: 500; line-height: 9.4vw; letter-spacing: -0.05em;}
    .treatment_etc { margin: 1.6rem auto; padding: 0 6vw;}
    .treatment_etc .etc_area { border-radius: 3.2rem;}
    

	.main-ache .contain .box { padding: 40px 30px;}
	.main-ache .contain .m-txt { margin-bottom: 10px;}
	.main-ache .contain .m-tit { margin-bottom: 40px;}

	.output-cnt { min-height: 345px;}
	.output-cnt.desc .title { height: 45px;}

    .story .story_area .record .cont_txt { width: 70%; padding-left: 110px;}

    .media .content .right .cont .notice li { padding: 2.75rem 1rem 1.75rem 3rem;}


	.footer .info { grid-template-columns: minmax(0, 1fr);}
	.footer .info .info_area { grid-row: 1;}
	.footer .info .ft_cont { grid-row: 3;}
	.footer .info .ft_cont .logo { width: 100%;}
	.footer .info .map { grid-row: 2; grid-column: 1;}
	.footer .info .map .img { position: relative; padding-top: 55%; overflow: hidden;}
	
    
}


/*768px ~ */
@media only screen and (max-width: 768px){
	:root {
		/* font */
		--font-size-12:11px;
		--font-size-13:12px;
		--font-size-14:13px;
		--font-size-15:14px;
		--font-size-16:15px;
		--font-size-17:16px;
		--font-size-18:17px;
		--font-size-20:19px;
		--font-size-22:21px;
		--font-size-24:23px;
		--font-size-26:25px;
		--font-size-28:27px;
		--font-size-38:37px;
		--font-size-42:41px;
		--font-size-44:43px;
		--font-size-46:45px;
		--font-size-52:51px;

		/* 
		타이틀 : 24 , weight: 600, letter-spacing:-0.02em;
		소타이틀: 18, weight: 500, letter-spacing:-.04em;

		내용타이틀 : 20
		내용 : 16
		*/
	}

	body, input, textarea, select, button, table { font-size: 16px;}

	#header {padding: 0 15px;height: 60px; }
	#header h1 {left:15px; }
	#header h1 a {width: 150px;height: 47px; }
	#header nav > ul {padding: 6rem 3rem 3rem;}
	#header nav > ul > li > a > span {font-size: 2.4rem; }

    #header .etc {right:10px; }
	#header .etc > * {width: 90px;margin-left: -20px; font-size: 1.5rem; }

    #header .btn_menu { display: flex; align-items: center; justify-content: center; font-size: 0; top: 50%; transform: translateY(-50%); position: absolute; right: 0px; flex-direction: column; width: 30px; height: 30px;}
    #header .btn_menu span { display: block; width: 15px; height: 2px; background: #000; border-radius: 6px; margin-bottom: 3px;}

    .visual_sect video { content: url(../img/main_768.mp4);}

    .Msection1 { position: relative; height: 60vw; overflow-x: hidden;}
	.Msection1 .txt1 { top: 16.2vw;}
	.Msection1 .txt1, .Msection1 .txt2 { position: absolute;}
	.Msection1 .txt1 img { max-width: 54vw;}
	.Msection1 .txt2 { top: 33.7vw;}
	.Msection1 .txt2 img { max-width: 54vw;}


	.treatment_tit { margin: 0 auto; text-align: center; font-size: var(--font-size-24); font-weight: 600; letter-spacing:-0.02em;}
    .treatment_etc { max-width: 100%; padding: 0 2rem;}
    .treatment_etc .etc_area { border-radius: 2.4rem;}
    .treatment_etc .etc_area .etc_box { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); margin: 0 auto; text-align:center; margin-top: 3rem;}


	.main-ache .contain { display: block;}
	.main-ache .contain .human { width: 100%; text-align: center; margin-bottom: 30px;}
	.main-ache .contain .box { width: 100%; margin: 0; padding: 30px;}
	.main-ache .contain .m-txt { margin-bottom: 10px; font-size: var(--font-size-16);}
	.main-ache .contain .m-tit { margin-bottom: 20px; font-size: var(--font-size-20);}

	.output-cnt { min-height: 280px; border-radius: 18px;}
	.output-cnt.desc .title { height: 40px;}
	.output-cnt.desc .cnt { padding:15px;}
	.output-cnt.desc .cnt .txt { margin-bottom: 20px;}
    .output-cnt.default p {font-size: var(--font-size-18);}


	.program { padding: 80px 0 100px;}
	.program .tit .s_title { text-align: center; font-size: var(--font-size-18); font-weight: 500; letter-spacing:-.04em; line-height:1.4em;}
	.program .tit .title { text-align: center; font-size:var(--font-size-24); font-weight: 600; letter-spacing:-.04em; line-height:1.4em;}
	.program_container .item { width: 100%;}
	.program_container .info-inner { padding: 40px 20px;}
	.program_container .info-inner .tit { margin: 0 0 20px; font-size: var(--font-size-20); letter-spacing:-.04em;}
	.program_container .info-inner .desc { margin: 0 0 25px; font-size: var(--font-size-16); letter-spacing:-.04em; line-height:1.4em;}
	

	.story { padding: 80px 0 100px;}
	.story .story_area .record { display: block; margin-top: 50px;}
	.story .story_area .s_title { font-size: var(--font-size-20); letter-spacing:-.04em; line-height:1.4em; font-weight: 600;}
	.story .story_area .title { font-size:var(--font-size-24); font-weight: 500; letter-spacing:-.04em; line-height:1.4em;}
	.story .story_area .record .img { width: 100%; text-align: center; margin-top: 0px;}
	.story .story_area .record .img .img_tit { width: 78%; padding-top: 5px; font-size: var(--font-size-16); font-weight: 600; font-family: 'Noto Serif KR', serif;}
	.story .story_area .record .cont_txt { width: 100%; padding-left: 0; margin-top: 50px;}

	.story .story_area .record .cont_txt .tit { font-size: var(--font-size-52); font-weight: 800; letter-spacing:0.02em; font-family: 'Cormorant Garamond Bold Italic'; text-align: left;}
	.story .story_area .record .cont_txt .s_tit { font-size: var(--font-size-22); padding: 30px 0;}
	.story .story_area .record .cont_txt .desc { height: 100%;}
	.story .story_area .record .cont_txt .txt { display: flex; width: 100%; font-size: var(--font-size-17); letter-spacing:-.04em; margin-top: 40px;}
	.story .story_area .record .cont_txt .txt .left { width: 100%; padding-right: 0;}
	.story .story_area .record .cont_txt .txt .right { width: 100%;}


	.media { padding: 80px 0 100px;}
	.media .media_area .title { font-size: 22px; line-height: 1.1em;}
	.media .media_area .s_title { font-size: 11px; line-height: 1.3em; word-break: keep-all;}

	.media .content { flex-direction: column; margin-top: 30px;}
	.media .content .left { width: 100%; margin-right: 0;}

	.media .content .right { width: 100%; margin-right: 0; margin-top: 20px;}
    .media .content .left .youtube_box { position: absolute; width: 728px; height: 274px; background: #000; opacity: 0;}
	.media .content .right .top_tit .tit { font-size: 28px;}
	.media .content .right .top_tit .txt { font-size: 10px;}
	.media .content .right .cont .notice li { padding: 2rem;}
	.media .content .right .cont .notice .date_area .date { font-size: 2rem;}
	.media .content .right .cont .notice li .tit { font-size: 13px;}

    .media .content .right .detail_box { width: 80%; height: 60%;}
    .media .content .right .detail_box .view_box { padding: 1rem;}


	.footer .info .info_area { padding: 5rem 20px;}
    .footer .info .info_area .num { font-size: 3.8rem;}
    .footer .info .info_area .num2 { font-size: 3.8rem;}
    .footer .info .info_area .num3 { font-size: 3.8rem;}
	.footer .info .info_area .num_area { grid-row: 2; grid-column: 1 / 2;}
	.footer .info .info_area .num_area .tit { margin-bottom: 1rem;}
	.footer .info .info_area .time_area { grid-row: 2; grid-column: 2 / 3;}
	.footer .info .info_area .time_area .tit { margin-bottom: 1rem;}

	.footer .info .ft_cont { padding: 4rem 0 50px;}
	.footer .info .ft_cont .menu_box { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; padding: 0 20px; overflow: auto;}
	.footer .info .ft_cont .menu_box .menu { white-space: nowrap;}
	.footer .info .map .img { padding-top: 55%;}

}


/*500px ~ */
@media only screen and (max-width: 500px){

    .visual_sect { margin-top: 0;}

    #popup .popup_box { top: 60px; bottom: 0px; padding: 0 20px;}

    .treatment_list { margin-top: 50px;}
    .treatment_area .area_list_tit_on { height: 125px;}
    .treatment_etc .etc_area .etc_box { display: grid; grid-template-columns: repeat(1, minmax(0px, 1fr)); margin: 0 auto; text-align:center; margin-top: 3rem;}
    .treatment_etc .etc_area h3 { text-align: center; font-size:var(--font-size-24); font-weight: 500;}
    .treatment_etc .etc_area .etc_box .item { margin: 1rem 0; padding: 1.6rem 2.6rem;}

    .story .story_area .record .img .img_tit { width: 95%;}
    .story .story_area .record .cont_txt .txt { display: block;}
	
    .media .content .left .youtube_box { position: absolute; width: 310px; height: 274px; background: #000; opacity: 0;}
    .media .content .right .detail_box { width: 90%; height: 60%; padding: 0 30px;}
    .media .content .right .detail_box .tit_box .tit { font-size: var(--font-size-22); margin-top: 1rem;}

    .footer .info .info_area .tit { font-size: 3.8rem;}
    .footer .info .info_area .num { font-size: 2.6rem; margin-left: 0.9rem;}
    .footer .info .info_area .num img { margin-top: 0.5rem; margin-right: 0.5rem;}
    .footer .info .info_area .num2 { font-size: 2.8rem; margin-top: 9.4rem;}
    .footer .info .info_area .num3 { font-size: 2.6rem; margin-left: 0.9rem;}
    .footer .info .info_area .num3 img { margin-top: 0.5rem; margin-right: 0.5rem;}
	.footer .info .info_area .num_area { grid-column: 1 / 3;}
	.footer .info .info_area .time_area { grid-row: 3; grid-column: 1 / 3;}
	.footer .info .map .img { padding-top: 55%;}
    

}