@charset "utf-8";

/*== 공통 ==*/
.main .section {}
.main .section_title {margin-bottom: 64px;}
.main .section_title .eng {display: block; margin-bottom: 0.889em; opacity: 0.5; filter:alpha(opacity=50); letter-spacing: 0.4em; text-transform: uppercase; font-size: 0.9rem; font-weight: 300;}
.main .section_title .title {font-size: 2.75rem; font-weight: 500; text-transform: uppercase; line-height: 1.3em;}
.main .section_title .subtxt1 {margin-top: 0.667em; font-size: 1.5rem; line-height: 1.44em;}
.main .section_title .subtxt2 {margin-top: 5px; font-size: 1rem; font-weight: 300; line-height: 1.44em;}

/* 마우스 아이콘 */
.icon_mouse{position: absolute; left:0; bottom:0 ;z-index:3; width:100%; height:0; text-align:center; transition:0.7s;}
.icon_mouse i {position: relative; top: -76px; display:inline-block; width: 26px; height: 38px; border: 3px solid #fff; border-radius: 13px;}
.icon_mouse i:before {content: ""; position: absolute; left: 9px; top: 7px; overflow:hidden; width: 2px; height: 7px; background-color:#fff;}



/*== 메인섹션01 - 비주얼 이미지 ==*/
.ms1 {position: relative; background: url(../img/main/section1_bg.jpg) no-repeat center center; background-size: cover; color: #fff; }

.ms1 .absolute0 {position: absolute; top: 0; right: 0; bottom: 0;  left: 0; overflow: hidden;}
.ms1 .object_fit_cover {position: relative; overflow: hidden; opacity: 0; transition: .3s opacitymargin-top: -1px; height: calc(100vh + 1px)}
.ms1 .object_fit_cover.activated {opacity: 1}
.ms1 .object_fit_cover > .obj_inner {
    position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
    -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%)
}
.ms1 .object_fit_cover> .obj_inner > * {
    position: absolute; top: 50%;  left: 50%; width: 100%; height: 0;
    -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%)
}

.ms1 .object_fit_cover> .obj_inner > * > * {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.ms1 .video {height: 0;padding-bottom: 56.25%}

.ms1 .video .iframe {width: 100%; height: 100%}
.ms1 .tam_wrap {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;}
.ms1 .tam_wrap .inner {max-width: 100%; height: 100%; text-align: center;}
.ms1 .tam_wrap .visual_txt {display: none;}
.ms1 .visual_txt .br {display: block;}

.quick_menu {position: fixed; right: 44px; bottom: 50%; transform: translateY(50%); webkit-transform: translateY(50%); -ms-transform: translateY(50%); z-index:9;}
.quick_menu li {display: table; width: 96px; height: 96px; margin: 3px 0; padding: 4px; text-align: center;}
.quick_menu li a {display: table-cell; vertical-align: middle; width: 100%; height: 100%; font-size: 1rem; font-weight: 700; word-break: keep-all;}
.quick_menu .quick1 {background-color: #5fcc12;}
.quick_menu .quick1 a, .quick_menu .quick3 a {border: 1px solid rgba(255,255,255,0.5); color: #fff;}
.quick_menu .quick2 {background-color: #fff;}
.quick_menu .quick2 a {border: 1px solid #e8e8e8;}
.quick_menu .quick3 {background-color: #2fb44a;}
.quick_menu .quick3 a {background: url(../img/blog_ico.png) no-repeat center 10px; padding-top: 46px;}

.quick_mo {position: absolute; left: 241px; top: 0%; display:none; z-index:99;}
.quick_mo li {display: table; width: 80px; height: auto; margin: 5px 0; padding: 4px; text-align: center;}
.quick_mo li a {display: table-cell; vertical-align: middle; width: 100%; height: 100%; font-size: 1rem; font-weight: 700; word-break: keep-all;}
.quick_mo .quick1 {background-color: #2fb44a;}
.quick_mo .quick1 a {background: url(../img/blog_ico.png) no-repeat center 7px; background-size: 50%; padding-top: 38px; border: 1px solid rgba(255,255,255,0.5); color: #fff;}


/*== 메인섹션02 - 전인치유 프로그램 ==*/
.ms2 {background: url(../img/main/section2_bg.jpg) no-repeat center center; background-size: cover; color: #fff;}
.ms2 .contents {}
.ms2 .ms_box {position: relative; width: 100%; height: 168px;}
.ms2 .ms_box:after {display:block;visibility:hidden;clear:both;content:""}
/* .ms2 .ms_box dl {
    position: absolute;
    float: left; width: 678px; height: 168px; text-align: center;
    padding: 2.05rem 1rem; border: 1px solid #fff; border-radius: 168px;
} */
.ms2 .ms_box dt {display: block; margin-bottom: 0.578em; font-size: 38px; line-height: 1em; font-weight: 300;}
.ms2 .ms_box dt a {color: #fff;}
/* .ms2 .ms_box dd {position: relative; display: inline-block; padding: 0 0.5em; font-size: 18px; line-height: 2.44em; font-weight: 300;} */
.ms2 .ms_box dd:after {content: ""; width: 1px; height: 0.9em; background-color: #fff; position: absolute; right: -0.1em; top: 50%; margin-top: -0.4em; opacity: 0.5; filter:alpha(opacity=50);}
.ms2 .ms_box dd:last-child:after {display: none;}

/* .ms2 .ms_box .left_box {left: 0; padding-right: 76px;}
.ms2 .ms_box .right_box {right: 0; padding-left: 76px;}
.ms2 .ms_box .icon_plus {position: absolute; left: 621px; top: 42px; font-size: 4.6875em; font-weight: 100; line-height: 1em; display: block;} */

.ms2 .ms_box dl {
    position: absolute;
    float: left; width: 448px; height: 168px; text-align: center;
    padding: 1.8rem 1rem; border: 1px solid #fff; border-radius: 168px;
}
.ms2 .ms_box dd {position: relative; display: inline-block; padding: 0 0.5em; font-size: 18px; line-height: 1.44em; font-weight: 300;}
.ms2 .ms_box .left_box {left: 0; padding-right: 26px;}
.ms2 .ms_box .right_box {right: 0; padding-left: 26px;}
.ms2 .ms_box .center_box {left: 50%; transform:translateX(-50%); padding-left: 26px;}
.ms2 .ms_box .icon_plus {position: absolute; left: 421px; top: 60px; font-size: 2.6875em; font-weight: 100; line-height: 1em; display: block;}
.ms2 .ms_box .icon_plus02 {left:837px;}


.ms22 .ms_box dl {
    position: absolute;
    float: left; width: 448px; height: 168px; text-align: center;
    padding: 1.8rem 1rem; border: 1px solid #fff; border-radius: 168px;
}
.ms22 .ms_box dd {position: relative; display: inline-block; padding: 0 0.5em; font-size: 18px; line-height: 1.44em; font-weight: 300;}
.ms22 .ms_box .left_box {left: 0; padding-right: 26px;}
.ms22 .ms_box .right_box {right: 0; padding-left: 26px;}
.ms22 .ms_box .center_box {left: 50%; transform:translateX(-50%); padding-left: 26px;}
.ms22 .ms_box .icon_plus {position: absolute; left: 421px; top: 60px; font-size: 2.6875em; font-weight: 100; line-height: 1em; display: block;}
.ms22 .ms_box .icon_plus02 {left:837px;}












/*== 메인섹션03 - 면역 식이요법 ==*/ 
.ms3 {background: url(../img/main/section3_bg2.jpg) no-repeat center center; background-size: cover; color: #fff;}
.ms3 .btn_more {display: block; max-width: 230px; margin: 0 auto; margin-top: 5rem; font-size: 1.125em; line-height: 3em; border: 1px solid rgba(255,255,255,0.3); color: #fff; text-align: center;}


/*== 메인섹션04 - 자연을 담은 윤성에서 일상을 되찾다 ==*/
.ms4 {background: url(../img/main/section4_bg.jpg) no-repeat center center; background-size: cover;}
.ms4 .contents {text-align: center;}
.ms4 .ms_therapy {margin-bottom: 2.75rem}
.ms4 .ms_therapy ul {max-width: 1242px; margin: 0 auto;}
.ms4 .ms_therapy ul:after {display:block;visibility:hidden;clear:both;content:""}
.ms4 .ms_therapy li {float: left; padding: 0 0.75rem; text-align: center;}
.ms4 .ms_therapy li a {display: block; position: relative; width: 384px; height: 128px; color: #fff; padding: 25px 0;}
.ms4 .ms_therapy .txt {display: inline-block; padding-top: 36px; background: url(../img/main/icon_pulse.png) no-repeat center top; font-size: 1.1rem; font-weight: 700; line-height: 1em;}
.ms4 .ms_therapy .more {display: block; position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,0.5); width: 1.85rem; line-height: 1em; font-size: 1.85rem; font-weight: 100; text-align: center;}
.ms4 .ms_therapy .trp_box1 a {background: url(../img/main/ms4_trp1.png) no-repeat center center; background-size: cover;}
.ms4 .ms_therapy .trp_box1 .more {color: #466600;}
.ms4 .ms_therapy .trp_box2 {padding-top: 2.1rem;}
.ms4 .ms_therapy .trp_box2 a {background: url(../img/main/ms4_trp2.png) no-repeat center center; background-size: cover;}
.ms4 .ms_therapy .trp_box2 .more {color: #cd780a;}
.ms4 .ms_therapy .trp_box3 a {background: url(../img/main/ms4_trp3.png) no-repeat center center; background-size: cover;}
.ms4 .ms_therapy .trp_box3 .more {color: #21528d;}
.ms4 .contents .explain {font-size: 1.3125em; line-height: 1.44em;}
.ms4 .contents .explain .br {display: block;}
.ms4 .icon_mouse i {border-color: #222;}
.ms4 .icon_mouse i:before {background-color: #222;}

.icon_mouse02 {padding-top: 60px;}
.icon_mouse02 span {position: absolute; bottom: 40px; left: 50%; width: 46px; height: 46px; margin-left:-23px; border: 2px solid #FF7200; border-radius: 100%; -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite; box-sizing: border-box; z-index:99999;}
.icon_mouse02 span::after {
  position: absolute; top: 50%; left: 50%; content: ''; width: 16px; height: 
  16px; margin: -12px 0 0 -8px; border-left: 2px solid #FF7200; border-bottom: 2px 
  solid #FF7200; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); 
  box-sizing: border-box;}

  @-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(0deg) translate(0, 0);
  }
  40% {
    -webkit-transform: rotate(0deg) translate(0, 25px);
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0, 0);
  }
}
@keyframes sdb {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  40% {
    transform: rotate(0deg) translate(0, 25px);
  }
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
}


/* .ms4 .icon_mouse02 span {border-color: #222;}
.ms4  .icon_mouse02 span::after {border-color:#222;} */



/*== 메인섹션05 - 자연을 담고, 삶에 답을 하다 ==*/
.ms5 {background: url(../img/main/section5_bg.jpg) no-repeat center bottom; background-size: cover; color: #fff;}
.ms5 a {color:#fff;}
.ms5 .strong_list {}
.ms5 .strong_list:after {display:block;visibility:hidden;clear:both; content:""}
.ms5 .strong_list li {float: left; width: 25%; padding: 0 1rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.6);}
.ms5 .strong_list li:last-child {border-right: 0;}
.ms5 .strong_list .icon {display: block; margin-bottom: 1.85rem;}
.ms5 .strong_list .txt .eng {display: block; font-size: 0.9375em; font-weight: 500; line-height: 1em; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.5; filter:alpha(opacity=50);}
.ms5 .strong_list .txt .kor {display: block; font-size: 1.3rem; font-weight: 700;}



/*== 메인섹션06 - 고객센터 ==*/
.ms6 {background: url(../img/main/section6_bg.jpg) no-repeat center center; background-size: cover; color: #fff;}
.ms6 .section_title {margin-bottom: 2.5rem; text-align: left;}
.ms6 .ms_box {float: left; width: 50%;}
.ms6 .ms_info {padding-right: 5rem;}
.ms6 .ms_info .mb_con {margin-bottom: 3rem;}
.ms6 .ms_info .mb_con:after {display:block;visibility:hidden;clear:both;content:""}
.ms6 .ms_info .cont {float: left; width: 50%;}
.ms6 .ms_info .cont h3 {margin-bottom: 0.766em; font-size: 1.5rem; font-weight: 500; line-height: 1em;}
.ms6 .ms_info .tel {font-size: 1.75rem; font-weight: 700; line-height: 1em; color: #fff;}
.ms6 .ms_info .time {margin-top: 0.5rem; font-size: 1.0625em; color: #fff;}
.ms6 .ms_info .time th {font-weight: normal; text-align: left; }
.ms6 .ms_info .lt_box {position: relative;}
.ms6 .ms_info .lt_box li {margin-bottom: 0.5rem; font-size: 1.0625em; line-height: 1.444em;}
.ms6 .ms_info .lt_box li:last-child {margin-bottom: 0;;}
.ms6 .ms_info .lt_box .lt_notice {font-size: 1.294em;}
.ms6 .ms_info .lt_more {position: absolute; top: 0; right: 0; font-size: 1.5rem; font-weight: 100; line-height: 1em; color: #fff;}
.ms6 .link_btn {margin: 0 -0.7rem;}
.ms6 .link_btn:after {display:block;visibility:hidden;clear:both;content:""}
.ms6 .link_btn li {float: left; padding: 0 0.7rem;}
.ms6 .link_btn li a {display:block; width: 104px; padding: 1.25rem 0.5rem; border: 1px solid #fff; text-align: center; font-size: 22px; line-height: 1.181em; color: #fff;}

.ms6 .ms_map {height: 475px;}
.ms6 .ms_map #map {width: 100%; height: 100%;}
.ms6 .ms_map #daumRoughmapContainer1602564372086 {width: 100%; height: 100%;}
.ms6 .ms_map .root_daum_roughmap .wrap_map {height: 100%;}




/*=== PC 1279px 이하 ===*/
@media all and (max-width: 1279px) {
    /*== 공통 ==*/
    .main .section_title {margin-bottom: 2.5rem;}
    .main .section_title .title {font-size: 2.5rem;}
    .main .section_title .subtxt1 {font-size: 1.3rem;}
    
    /*== 전인치유 프로그램 ==*/
    .ms2 .ms_box {height: auto;}
    .ms2 .ms_box dl {position: static; float: none; height: auto; margin: 0 auto;}
    .ms2 .ms_box dt {font-size: 1.5rem;}
    .ms2 .ms_box dd {font-size: 1rem;}
    .ms2 .ms_box .icon_plus {position: static; text-align: center;}
    .ms2 .ms_box dl {padding: 1.5rem 1rem;}
    .ms2 .ms_box .left_box {padding-right: 1rem;}
    .ms2 .ms_box .right_box {padding-left: 1rem;}
    .ms2 .ms_box .center_box {padding-left: 1rem; transform:none;}

    /*== 자연을 담은 윤성에서 일상을 되찾다 ==*/
    .ms4 .ms_therapy {margin-bottom: 2rem;}
    .ms4 .ms_therapy ul {margin: 0 -1%;}
    .ms4 .ms_therapy li {width: 33.333%; padding: 0 1%;}
    .ms4 .ms_therapy li a {width: 100%;}

    /*== 고객센터 ==*/
    .ms6 .inner {max-width: 1025px;}
    .ms6 .section_title {text-align: center;}
    .ms6 .ms_box {float: none; width: 100%;}
    .ms6 .ms_info {padding-right: 0;}
    .ms6 .ms_info .cont h3 {margin-bottom: 0.5em;}
    .ms6 .ms_info .mb_con {margin-bottom: 2rem;}
    .ms6 .ms_info .time th {width: 80px;}
    .ms6 .link_btn {margin: 0 -1%; margin-bottom: 2.5rem;}
    .ms6 .link_btn li {width: 33.33%; padding: 0 1%;}
    .ms6 .link_btn li a {width: 100%; padding: 0.8rem 0.5rem; font-size: 1.125em;}
    .ms6 .ms_map {height: 400px;}
}

/*=== 테블릿 ===*/
@media all and (max-width: 1024px) {
     /*== 공통 ==*/
    .main .section_title .title {font-size: 2.25rem;}
    .main .section {height: auto !important; padding: 5rem 0;}
    .main .fp-tableCell {height: auto !important; display: block;}

    /* 마우스 아이콘 */
    .icon_mouse {display: none;}
    .icon_mouse02 {display: none;}

    /*== 비주얼 이미지 ==*/
    .main .ms1 {padding-top: 10rem; padding-bottom: 10rem;}
    .ms1 .absolute0 {position: static;}
    .ms1 .object_fit_cover {display: none;}
    .ms1 .object_fit_cover.activated {opacity: 0;}
    .ms1 .tam_wrap {position: static;}
    .ms1 .tam_wrap .visual_txt {display: block;}
    .ms1 .quick_menu {display: none;}

    /*== 자연을 담고, 삶에 답을 하다 ==*/
    .ms5 .strong_list .icon {margin-bottom: 1rem;}
    .ms5 .strong_list .icon img {width: 56px;}
    .ms5 .strong_list .txt .kor {font-size: 1.2rem;}

    /*== 고객센터 ==*/
    .ms6 .ms_map {height: 350px;}

	/* ==퀵메뉴 == */
	.quick_mo {display:block;}
}

/*=== 모바일 ===*/
@media all and (max-width: 768px) {
    /*== 공통 ==*/
    .main .section_title .eng {margin-bottom: 0.3em;}
    .main .section_title .title {font-size: 2.1em;}
    .main .section_title .subtxt1 {font-size: 1.2rem;}

    /*== 전인치유 프로그램 ==*/
    .ms2 .ms_box dl {width: 100%;}
    
    /*== 자연을 담은 윤성에서 일상을 되찾다 ==*/
    .ms4 .ms_therapy ul {margin: -5px auto;}
    .ms4 .ms_therapy .trp_box2 {padding-top: 5px;}
    .ms4 .ms_therapy li {float: none; width: 100%; padding: 5px 0; text-align: left;}
    .ms4 .ms_therapy li a {height: 60px; line-height: 60px; padding: 0; padding-left: 1.5rem}
    .ms4 .ms_therapy .txt {padding: 0; padding-left: 40px; padding-right: 60px; background-position: left center; background-size: 25px;}
    .ms4 .ms_therapy .more {width: 60px; line-height: 60px;}
    .ms4 .contents .explain {padding: 0 2rem; font-size: 1.1rem;}
    .ms4 .contents .explain .br {display: inline;}

    /*== 자연을 담고, 삶에 답을 하다 ==*/
    .ms5 .strong_list li {width: 50%; padding: 2rem 3%;}
    .ms5 .strong_list li:nth-of-type(2n) {border-right: 0;}
    .ms5 .strong_list li:first-of-type, .ms5 .strong_list li:nth-of-type(2) {border-bottom: 1px solid rgba(255,255,255,0.6);}

    /*== 고객센터 ==*/
    .ms6 .ms_map {height: 250px;}

	
	/* ==퀵메뉴 == */
	.quick_mo {position:absolute; left:200px; top:0%;}
	.quick_mo li {width:75px;}
	.quick_mo li a {font-weight: 500;}
	.quick_mo .quick1 a {background: url(../img/blog_ico.png) no-repeat center 5px; background-size: 50%; padding-top:31px;}
}

/*=== 모바일 490px 이하 ===*/
@media all and (max-width: 490px) {
    .ms1 .visual_txt .br {display: inline;}

    /*== 고객센터 ==*/
    .ms6 .ms_info .mb_con {margin-bottom: 0.5rem;}
    .ms6 .ms_info .cont {float: none; width: 100%; padding-bottom: 1.5rem;}
    .ms6 .ms_info .time, .ms6 .ms_info .lt_box li {font-size: 1rem;}
    .ms6 .link_btn {margin-top: -1%; margin-left: 0; margin-right: 0;}
    .ms6 .link_btn li {float: none; width: 100%; padding: 1% 0;}
}