/* 구글폰트정의 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+TAS:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Playwrite+AU+TAS:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');

/* 페이지 공통 css start */
* {margin: 0; padding: 0; font-family: "Noto Sans KR", sans-serif; font-style: normal;}
body {position: relative;}
a {text-decoration:none;}
a:visited {color: inherit;}
ul {list-style-type: none;}
video, iframe {width: 100%; height: 100%;}
img {width: 100%; vertical-align: top;}
.playWrite {font-family: "Playwrite AU TAS", cursive;}
.PlaywriteAuTas {font-family: "Playwrite AU TAS", cursive;}
.anton {font-family: "Anton", sans-serif;}
button .button {cursor: pointer;}

.button .bg-purple {background-color: #bb0f6f;}

:root {
	--font-size-XXXL :	200px;	/* h1 */
	--font-size-XXL :	120px;	/* h1 */	
	--font-size-XL :	90px;	/* h2 */
	--font-size-L :		60px;	/* h3 */
	--font-size-M:		45px;	/* h4 */
	--font-size-SL :	30px;	/* h5 */
	--font-size-SM :	25px;	/* h6 */
	--font-size-SS :	20px;	/* p */
	
	--font-weight-XXL :	900;	/* h1 */	
	--font-weight-XL :	800;	/* h2 */
	--font-weight-L :	700;	/* h3 */
	--font-weight-M:	600;	/* h4 */
	--font-weight-SL :	500;	/* h5 */
	--font-weight-SS :	400;	/* p */
	
	--background-color-dack-nomal : #1D1D1D;
	--font-color-nomal : #1D1D1D;
	--font-color-star : #e1b416;
	--font-color-dr : #12818a;
}

.scroll {width: 50px; margin: 0 auto; padding: 200px 0;}
/* 페이지 공통 css end */

/* 메뉴바 css start */
.navbar {display: none; justify-content: space-between; align-items: center; background-color: var(--background-color-dack-nomal); padding: 12px 12px; position: relative;}
.navbar__logo a {color: #fff; font-family: "Playwrite AU TAS", cursive; font-size: 25px; font-weight: 900;}
.navbar__logo i {color: #fff; font-size: 30px;}
.navbar__menu {display: flex;}
.navbar__menu li {padding: 8px 30px;}
.navbar__menu li a {color: #fff;}
.navbar__icons {display: flex; font-size: 20px;}
.navbar__icons li {padding: 8px 12px;}
.navbar__icons li i {color: #fff;}
.navbar__toogleBtn {position: absolute; top: 50%; right: 32px; transform: translate(0, -50%); font-size: 24px; color: #fff; display: none;}
/* 메뉴바 css end */

.container-doc {width: 100%; position: relative;}
.fullScreenContainer-doc {width: 100%; position: relative; background-color: var(--background-color-dack-nomal);}
.popDim {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: black; opacity: 0.8; display: block; display: none;}
/* section-01 css start */
.section-01 {width: 100%; padding-top: 150px;}
.section-01 .row {width: 500px; margin: 0 auto; display: flex; flex-direction: column;}
.section-01 .row .img {width: 100%; border-radius: 30px 90px; overflow: hidden;}
.section-01 .row .text {width: 100%; color: var(--font-color-nomal); margin-top: 30px;}
.section-01 .row .text h4 {font-size: var(--font-size-M); font-weight: var(--font-weight-XL); color: var(--font-color-dr);}
.section-01 .row .text h5 {font-size: var(--font-size-SL); font-weight: var(--font-weight-M); margin-top: -10px;}
.section-01 .row .text h6 {font-size: var(--font-size-SM); font-weight: var(--font-weight-XL); color: var(--font-color-dr); margin-top: 50px;}
.section-01 .row .text .star {font-size: var(--font-size-SL); font-weight: var(--font-weight-X); letter-spacing: -5px; color: var(--font-color-star);}
.section-01 .row .text p {font-size: var(--font-size-SS); font-weight: var(--font-weight-SS); margin-top: 5px;}
.section-01 .row .button {padding-top: 30px; box-sizing: border-box;}
.section-01 .row .button a {padding: 15px 30px; background-color: #12818a; border-radius: 30px; color: #fff; font-size: 17px; font-weight: 600;}
.section-01:last-child {padding-bottom: 150px;}
/* section-01 css end */

/* section-02 css start */
.section-02 {width: 100%; padding-top: 300px;}
.section-02.none-padding {padding-top: 0;}
.section-02 .row {width: 1200px; margin: 0 auto; display: flex; flex-direction: row; align-items: center;}
.section-02 .row .text {width: 480px; padding-right: 70px; box-sizing: border-box;}
.section-02 .row.rev {flex-direction: row-reverse;}
.section-02 .row.rev .text {padding-left: 70px; padding-right: 0;}
.section-02 .row .text .button {padding-top: 30px; box-sizing: border-box;}
.section-02 .row .text .button a {padding: 15px 30px; background-color: #12818a; border-radius: 30px; color: #fff; font-size: 17px; font-weight: 600;}
.section-02.teethCorrection .row .text .button a {background: #ff3193;}
.section-02 .row .video {width: 720px; height: 405px; border-radius: 30px; overflow: hidden; position: relative;}
.section-02 .row .video .subtitles {position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, 0); color: #fff; padding: 5px 10px; background-color: #ff369a; font-size: 20px; border-radius: 20px;}
.section-02 .row .img {width: 400px; border-radius: 30px; border-radius: 30px; overflow: hidden;}
.section-02 .row .img.img-max {width: 720px;}
.section-02 .row .text h4 {font-size: var(--font-size-M); font-weight: var(--font-weight-XXL);}
.section-02 .row .text h5 {font-size: var(--font-size-SL); font-weight: var(--font-weight-M);}
.section-02 .row .text p {font-size: var(--font-size-SS); font-weight: var(--font-weight-SS); padding-top: 30px; box-sizing: border-box;}
.section-02:last-child {padding-bottom: 300px;}
/* section-02 css end */

/* section-03 css start */
.section-03 {width: 100%; padding-top: 150px;}
.section-03.no-padding {padding-top: 0;}
.section-03 .row {width: 1200px; height: 676px; border-radius:30px; overflow: hidden; margin: 0 auto; position: relative;}
.section-03 .row .video {width: 100%; height: 100%;}
.section-03 .row .dim {width: 100%; height: 100%; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.7;}
.section-03 .row .textButton {width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.section-03 .row .textButton .text {background-color: #1f80a6; background: linear-gradient(90deg,rgba(31, 128, 166, 1) 0%, rgba(87, 173, 199, 1) 50%, rgba(255, 249, 186, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section-03.teethCorrection .row .textButton .text {background: linear-gradient(137deg, rgba(255, 0, 72, 1) 0%, rgba(255, 94, 215, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section-03 .row .textButton .text h5 {font-size: var(--font-size-SL); font-weight: var(--font-weight-SS);}
.section-03 .row .textButton .text h3 {font-size: var(--font-size-L); font-weight: var(--font-weight-XXL); margin-top: -10px;}
.section-03 .row .textButton .text h1 {font-size: var(--font-size-XXXL); font-weight: var(--font-weight-XXL); margin-top: -80px; letter-spacing: -10px;}
.section-03 .row .textButton .text h1.font-size-150 {font-size: 100px; font-family: "Playwrite AU TAS", cursive;}
.section-03 .row .textButton .text p {display: inline; padding: 10px 20px; box-sizing: border-box; font-size: 17px; font-weight: 500; color: #ff369a; -webkit-text-fill-color: #ff369a; background-color: #fff; border-radius: 30px; border: 1px solid #ff369a;}
.section-03 .row .textButton .button a {padding: 20px 40px; background-color: #1f80a6;; border-radius: 50px; font-size: 20px; font-weight: 400; color: #fff;}
.section-03.teethCorrection .row .textButton .button a {background-color: #ff3193;}
/* section-03 css end */

.section-04 {width: 100%; padding: 150px 0; background-color: #efefef;}
.section-04 .text {width: 500px; margin: 0 auto; text-align: center;}
.section-04 .text h4 {font-size: 45px; font-weight: 700;}
.section-04 .text h5 {font-size: 20px; font-weight: 400; margin: 20px 0;}
.section-04 .userForm {width: 500px; margin: 0 auto; text-align: center;}
.section-04 .userForm form {width: 80%; display: flex;  flex-direction: column; margin: 0 auto; text-align: center;}
.section-04 .userForm form input {padding: 16px; box-sizing: border-box; border: none; background-color: #fff; border-radius: 30px; margin-bottom: 20px; font-size: 20px; font-weight: 400; font-family: "Noto Sans KR", sans-serif; text-align: center;}
.section-04 .userForm form input::placeholder {color: #ff369a; font-size: 17px;}
.section-04 .userForm form input::-webkit-input-placeholder{color: #ff369a; font-size: 17px;}
.section-04 .userForm form input:-ms-input-placeholder{color: #ff369a; font-size: 17px;}
.section-04 .userForm form button {width: 100%; padding: 15px; font-size: 20px; font-weight: 600; border-radius: 30px; border: none; background-color: #ff369a; color: #fff; box-sizing: border-box;}

.section-05 {width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.section-05 .row {width: 1200px; margin: 0 auto;}
.section-05 .row .text {width: 100%;}
.section-05 .row .text h2 {font-size: 90px; font-weight: 900; background: #2A7B9B; background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section-05 .row .text h3 {font-size: 45px; font-weight: 200; color: #fff; font-family: "Playwrite AU TAS", cursive;}
.section-05 .row .text h5 {width: 50%; margin: 0 auto; font-size: 20px; font-weight: 400; color: #fff;}
.section-05 .row .button {width: 100%; margin-top: 50px; display: flex; flex-direction: row; font-size: 17px; font-weight: 500; justify-content: center;}
.section-05 .row .button li {margin-right: 20px;}
.section-05 .row .button li:last-child {margin-right: 0;}
.section-05 .row .button li a {padding: 15px 30px; background-color: #fff; border-radius: 30px; background-color: #77cc7b; color: #fff;}
.section-05 .row .button li a.event-button {border: 2px solid #77cc7b; box-sizing: border-box; background-color: transparent; color: #77cc7b;}

.section-06 {width: 100%; padding: 150px 0; background-color: #efefef; margin-top: 300px;}
.section-06 .row {width: 800px; margin: 0 auto;}
.section-06 .row.title {margin-bottom: 20px;}
.section-06 .row.title h3 {font-size: 45px; font-weight: 600;}
.section-06 .row.title h5 {width:70%; font-size: 20px; font-weight: 400;}
.section-06 ul {display: flex; flex-direction: row; text-align: center; justify-content: center;}
.section-06 ul li {font-size: 17px; font-weight: 400; border: 1px solid black; border-bottom: none; padding: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.section-06 ul li:nth-child(1) {width: 30%;}
.section-06 ul li:nth-child(2) {width: 70%; border-left: none;}
.section-06 ul:last-child li {border-bottom: 1px solid black;}

.section-07 {width: 100%; padding: 150px 0; background-color: #efefef; margin-bottom: 200px;}
.section-07 .text {width: 1200px; margin: 0 auto; text-align: center;}
.section-07 .text h1 {font-size: 120px; font-weight: 400; font-family: "Nanum Brush Script", cursive; ;line-height: 100px;}
.section-07 .text h1 span {color: #ff369a; font-family: "Nanum Brush Script", cursive;}

.popup-01 {display: none; width: 100%; position: absolute; top: 0; left: 0; z-index: 99;}
.popup-01 .row {width: 700px; margin: 0 auto; border-radius: 30px; padding: 80px 50px; box-sizing: border-box; background-color: #efefef;}
.popup-01 .row .text {width: 100%; text-align: center;}
.popup-01 .row .text h4 {font-size: 45px; font-weight: 700;}
.popup-01 .row .text h5 {font-size: 20px; font-weight: 400; margin: 20px 0;}
.popup-01 .row .userForm {width: 100%; margin: 0 auto; text-align: center;}
.popup-01 .row .userForm form {width: 80%; display: flex;  flex-direction: column; margin: 0 auto; text-align: center;}
.popup-01 .row .userForm form input {padding: 16px; box-sizing: border-box; border: none; background-color: #fff; border-radius: 30px; margin-bottom: 20px; font-size: 20px; font-weight: 400; font-family: "Noto Sans KR", sans-serif; text-align: center;}
.popup-01 .row .userForm form input::placeholder {color: #ff369a; font-size: 17px;}
.popup-01 .row .userForm form input::-webkit-input-placeholder{color: #ff369a; font-size: 17px;}
.popup-01 .row .userForm form input:-ms-input-placeholder{color: #ff369a; font-size: 17px;}
.popup-01 .row .userForm form button {width: 100%; padding: 15px; font-size: 20px; font-weight: 600; border-radius: 30px; border: none; background-color: #ff369a; color: #fff; box-sizing: border-box;}
.popup-01 .popButton.close {font-size: 70px; text-align: center; margin-top: 30px;}
.popup-01.freeDr .row .userForm form button {background-color: #1f80a6;}
.popup-01.freeDr .row .userForm form input::placeholder {color: #1f80a6;}
.popup-01.freeDr .row .userForm form input::-webkit-input-placeholder {color: #1f80a6;}
.popup-01.freeDr .row .userForm form input:-ms-input-placeholder {color: #1f80a6;}
.popup-01.osstem .row .userForm form button {background-color: #12818a;}
.popup-01.osstem .row .userForm form input::placeholder {color: #12818a;}
.popup-01.osstem .row .userForm form input::-webkit-input-placeholder {color: #12818a;}
.popup-01.osstem .row .userForm form input:-ms-input-placeholder {color: #12818a;}

.popup-01.drLee .row .userForm form input::placeholder,
.popup-01.drLim .row .userForm form input::placeholder {color: #12818a;}
.popup-01.drLee .row .userForm form button,
.popup-01.drLim .row .userForm form button {background-color: #12818a;}
.popup-01.drLee .popButton.close,
.popup-01.drLim .popButton.close {color: #12818a;}
.popup-01.success .row {background-color: #fff;}
.popup-01.success .row .text h2 {font-size: 70px; color: #11a159;}
.popup-01.success .row .text h4 {color: #11a159;}
.popup-01.success .row .popButton {font-size: 0;}
.popup-01.success .row .popButton button {font-size: 20px; font-weight: 700; padding: 15px 45px; border: 1px solid #11a159; border-radius: 30px; background-color: #fff; color: #11a159; box-sizing: border-box;}

footer {width: 100%; padding: 80px 30px; box-sizing: border-box; background-color: #ff3193; color: #fff; position: relative; z-index: -1;}
footer .text p {font-size: 17px; font-weight: 400;}
footer .text {width: 1200px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;}
footer .text .row.logo i {color: #fff; font-size: 30px;}
footer .text .row.logo a {color: #fff; font-size: 25px; font-family: "Playwrite AU TAS", cursive;}
/* 반응형 모바일 css start */
@media screen and (max-width: 700px) {
	:root {
		--font-size-XXL :		120px;	/* h1 */	
		--font-size-XL :		90px;	/* h2 */
		--font-size-L :			60px;	/* h3 */
		--mobile-font-size-M:	40px;	/* h4 */
		--mobile-font-size-SL:	30px;	/* h5 */
		--mobile-font-size-SM:	25px;	/* h6 */
		--font-size-SS :		17px;	/* p */
	}
	
	.scroll {padding: 40px 0;}

	/* 반응형 모바일 메뉴 css start */
	.navbar {flex-direction: column; align-items: flex-start;}
	.navbar__menu {flex-direction: column; align-items: center; width: 100%; padding: 20px 0; display: none;}
	.navbar__icons {display: none; justify-content: center; width: 100%;}
	.navbar__menu li {width: 100%; text-align: center;}
	.navbar__toogleBtn {display: block; top: 30px;}
	.navbar__menu.active, .navbar__icons.active {display: flex;}
	.navbar__logo a {font-size: 18px; font-weight: 400;}
	.navbar__logo i {font-size: 20px;}
	/* 반응형 모바일 메뉴 css end */
	
	.section-01 {padding: 80px 20px 0 20px; box-sizing: border-box;}
	.section-01 .row {width: 100%;}
	.section-01 .row .img {border-radius: 20px 60px; overflow: hidden;}
	.section-01 .row .text {margin-top: 20px;}
	.section-01 .row .text h4 {font-size: var(--mobile-font-size-M);}
	.section-01 .row .text h5 {font-size: var(--mobile-font-size-SM); font-weight: var(--font-weight-SL); margin-top: -5px;}
	.section-01 .row .text h6 {margin-top: 20px;}
	.section-01:last-child {padding-bottom: 80px;}
	
	.section-02 {padding-top: 120px; box-sizing: border-box;}
	.section-02 .row,  .section-02 .row.rev {width: 100%; flex-direction: column-reverse;}
	.section-02 .row .text, .section-02 .row.rev .text {width: 100%; padding: 20px 20px 0 20px;}
	.section-02 .row .video {width: 100%; height: 210px; border-radius: 0;}
	.section-02 .row .video .subtitles {bottom: 20px;padding: 3px 5px; font-size: 15px; border-radius: 10px;}
	.section-02 .row .img {width: 60%; margin: 0 auto;}
	.section-02 .row .img.img-95 {width: 95%; margin: 0 auto;}
	.section-02 .row .text h4 {font-size: 35px;}
	.section-02 .row .text h5 {font-size: 25px;}
	.section-02 .row .text p {padding-top: 10px;}
	.section-02 .row .text .button a {padding: 15px 25px; font-size: 15px; font-weight: 400;}
	
	.section-03 {width: 100%; padding-top: 0;}
	.section-03 .row {width: 100%; height: 500px; border-radius: 0; overflow: hidden; position: relative;}
	.section-03 .row .video {position: absolute; top: 0; right: 280px;}
	.section-03 .row .video iframe {width: 900px; height: 100%;}
	.section-03 .row .textButton .text h5 {font-size: var(--font-size-SM);}
	.section-03 .row .textButton .text h3 {font-size: var(--font-size-M);}
	.section-03 .row .textButton .text h1 {font-size: 150px; margin-top: -60px;}
	.section-03 .row .textButton .text h1.font-size-150 {font-size: 55px; letter-spacing: -5px;}
	.section-03 .row .textButton .text p {font-size: 15px;}
	.section-03 .row .textButton .button a {padding: 15px 25px; font-size: 15px;}
	
	.section-04 {padding: 100px 0;}
	.section-04 .text, .section-04 .userForm {width: 100%; margin: 0 auto; text-align: center; padding: 0 30px; box-sizing: border-box;}
	.section-04 .text h4 {font-size: 35px;}
	.section-04 .text h5 {font-size: 17px;}
	.section-04 .userForm form input {padding: 14px;}
	.section-04 .userForm form input::placeholder {font-size: 15px;}
	.section-04 .userForm form input::-webkit-input-placeholder{font-size: 15px;}
	.section-04 .userForm form input:-ms-input-placeholder{font-size: 15px;}
	.section-04 .userForm form button {font-size: 17px;}
	
	.section-05 {padding: 0 20px; box-sizing: border-box;}
	.section-05 .row {width: 100%;}
	.section-05 .row .text h2 {width: 100%; font-size: 35px;}
	.section-05 .row .text h3 {width: 100%; font-size: 25px;}
	.section-05 .row .text h5 {margin-top: 10px; width: 100%; font-size: 17px;}
	.section-05 .row .button {flex-direction: column; margin-top: 20px;}
	.section-05 .row .button li {margin-right: 0;}
	.section-05 .row .button li {margin-top: 35px;}
	.section-05 .row .button li a {font-size: 15px; padding: 15px 20px;}
	
	.section-06 {padding: 80px 20px; margin-top: 120px; box-sizing: border-box;}
	.section-06 .row {width: 100%;}
	.section-06 .row.title h3 {font-size: 30px;}
	.section-06 .row.title h5 {width: 100%; font-size: 15px;}
	.section-06 .row ul li {font-size: 15px; padding: 10px;}
	
	.section-07 {padding: 80px 0; margin-bottom: 0;}
	.section-07 .text {width: 100%; padding: 20px; box-sizing: border-box;}
	.section-07 .text h1 {font-size: 70px; line-height: 60px;}
	
	.popup-01 {padding: 0 20px; box-sizing: border-box;}
	.popup-01 .row {width: 100%; padding: 60px 25px;}
	.popup-01 .row .text, .popup-01 .row .userForm {width: 100%; margin: 0 auto; text-align: center;}
	.popup-01 .row .text h4 {font-size: 35px;}
	.popup-01 .row .text h5 {font-size: 15px; margin: 10px 0;}

	.popup-01 .row .userForm form input {padding: 14px;}
	.popup-01 .row .userForm form input::placeholder {font-size: 15px;}
	.popup-01 .row .userForm form input::-webkit-input-placeholder{font-size: 15px;}
	.popup-01 .row .userForm form input:-ms-input-placeholder{font-size: 15px;}
	.popup-01 .row .userForm form button {font-size: 17px;}
	.popup-01 .row .popButton.close {font-size: 50px;}
	.popup-01.success .row .text h2 {font-size: 55px; color: #11a159;}
	.popup-01.success .row .text h4 {color: #11a159;}
	.popup-01.success .row .popButton {font-size: 0;}
	.popup-01.success .row .popButton.close {font-size: 0;}
	.popup-01.success .row .popButton button {font-size: 15px; padding: 15px 35px;}
	
	footer .text {width: 100%; flex-direction: column; text-align: center;}
	footer .text p {font-size: 15px;}
	footer .text .row {margin-bottom: 10px;}
	footer .text .row:last-child {margin-bottom: 0;}
	footer .text .row.logo i {font-size: 25px;}
	footer .text .row.logo a {font-size: 20px;}
}
/* 반응형 모바일 end */