/* 공통사항 */ /* =========== 탭메뉴 =========== */ .tab_btns {max-width: 1640px; margin: 0 auto 80px; display: flex; justify-content: space-between; padding: 0 20px;} .tab_btns button {background-color: transparent; border: 0; padding: 20px; font-size: 18px; cursor: pointer; transition-duration: .3s; font-weight: 500;} .tab_btns button.active {color: #fff;} .tab_group {display: none;} .tab_group.active {display: block; animation: fadeUp 0.3s ease;} @keyframes fadeUp { from { opacity:0;} to { opacity:1;} } @media screen and (max-width: 960px) { .tab_btns {margin: 0 auto 60px;} .tab_btns button {font-size: 16px;} } @media screen and (max-width: 640px) { .tab_btns {margin: 0 auto 50px;} .tab_btns button {font-size: 14px; padding: 10px;} } /* =========== 탭메뉴 =========== */ /* =========== scon =========== */ .scon {max-width: 1640px; padding: 0 20px; margin: 0 auto 120px;} .scon:last-child {margin-bottom: 0;} @media screen and (max-width: 960px) { .scon {margin: 0 auto 100px;} } @media screen and (max-width: 640px) { .scon {margin: 0 auto 80px;} } /* =========== scon =========== */ /* =========== movwrap =========== */ .movwrap iframe {} @media screen and (max-width: 960px) { .movwrap iframe {height: 500px !important;} } /* =========== movwrap =========== */ /* =========== scon titwrap =========== */ .scon .titwrap {text-align: center; margin-bottom: 50px;} .scon .titwrap h4 {font-size: 16px; font-weight: 400; letter-spacing: 5px; margin-bottom: 10px;} .scon .titwrap h2 {font-size: 50px; margin-bottom: 20px;} .scon .titwrap h2 b {font-size: 60px; font-weight: 700;} .scon .titwrap h3 {font-size: 20px; line-height: 1.7; font-weight: 400; color: #666;} .scon .titwrap h5 {font-size: 40px;} .scon .titwrap h6 {font-size: 24px; color: #f58323; font-weight: 500;} .scon .titwrap p {margin-top: 20px; font-size: 20px; line-height: 1.7; color: #666;} .scon .revpagebtn {margin-top: 30px; display: flex; justify-content: center;} .scon .revpagebtn a { border: 1px solid #121212; padding: 10px 20px; font-size: 18px; border-radius: 23px; transition-duration: 0.3s;} .scon .revpagebtn a:hover {background-color: #121212; color: #fff;} @media screen and (max-width: 960px) { .scon .titwrap {margin-bottom: 40px;} .scon .titwrap h4 {font-size: 15px;} .scon .titwrap h2 {font-size: 30px; margin-bottom: 15px;} .scon .titwrap h2 b {font-size: 40px;} .scon .titwrap h3 {font-size: 18px;} .scon .titwrap h5 {font-size: 30px;} .scon .titwrap h6 {font-size: 20px;} .scon .titwrap p {font-size: 18px;} .scon .revpagebtn a {font-size: 16px;} } @media screen and (max-width: 640px) { .scon .titwrap {margin-bottom: 30px;} .scon .titwrap h4 {font-size: 14px;} .scon .titwrap h2 {font-size: 24px;} .scon .titwrap h2 b {font-size: 30px;} .scon .titwrap h3 {font-size: 16px;} .scon .titwrap h5 {font-size: 24px;} .scon .titwrap h6 {font-size: 18px;} .scon .titwrap p {font-size: 16px;} .scon .revpagebtn a {font-size: 14px;} } /* =========== scon titwrap =========== */ /* =========== subtitwrap =========== */ .subtitwrap {text-align: center; margin-bottom: 40px;} .subtitwrap h3 {font-size: 18px; color: #f58323; letter-spacing: 5px; font-weight: 400; margin-bottom: 20px;} .subtitwrap h2 {font-size: 40px;} .subtitwrap h2 span {color: #f58323;} .subtitwrap p {font-size: 18px; line-height: 1.7; color: #666; margin-top: 20px;} @media screen and (max-width: 960px) { .subtitwrap h2 {font-size: 30px;} .subtitwrap p {font-size: 16px;} } @media screen and (max-width: 640px) { .subtitwrap {margin-bottom: 30px;} .subtitwrap h2 {font-size: 24px;} .subtitwrap p {font-size: 16px;} } /* =========== subtitwrap =========== */ /* =========== procedurewrap =========== */ .procedurewrap {position: relative;} .procedurewrap::after {position: absolute;content: '';width: 1px;height: 100%;background-color: #eee; top: 0;left: 15px; z-index: -1;} .procedurewrap .p_box {margin-bottom: 80px; display: flex;} .procedurewrap .p_box:last-child {margin-bottom: 0;} .procedurewrap .p_box h3 {font-size: 18px; font-weight: 500; color: #fff; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; flex-shrink: 0;} .procedurewrap .p_box .txtbox {margin-left: 30px;} .procedurewrap .p_box .txtbox h2 {font-size: 24px; margin-bottom: 10px;} .procedurewrap .p_box .txtbox p {font-size: 18px; line-height: 1.7; color: #666;} @media screen and (max-width: 960px) { .procedurewrap .p_box {margin-bottom: 60px;} .procedurewrap .p_box h3 {font-size: 16px;} .procedurewrap .p_box .txtbox h2 {font-size: 20px;} .procedurewrap .p_box .txtbox p {font-size: 16px;} } @media screen and (max-width: 640px) { .procedurewrap .p_box {margin-bottom: 50px;} .procedurewrap .p_box h3 {font-size: 14px;} .procedurewrap .p_box .txtbox h2 {font-size: 18px;} .procedurewrap .p_box .txtbox p {font-size: 14px;} } /* =========== procedurewrap =========== */ /* =========== Q&A =========== */ ul.qawrap {max-width: 1640px; margin: 0 auto; text-align: left;} ul.qawrap li {border-bottom: 1px solid #121212; cursor: pointer;} ul.qawrap li:first-child {border-top: 1px solid #121212;} ul.qawrap li .q_box {font-size: 24px; font-weight: 700; display: flex; align-items: center; padding: 40px 30px; justify-content: space-between; transition-duration: 0.3s;} ul.qawrap li.hover .q_box {color: #f58323;} ul.qawrap li.open .q_box {color: #f58323;} ul.qawrap li .q_box span {position: relative; width: 20px; height: 20px; display: block;} ul.qawrap li .q_box span::after {position: absolute; content: ''; width: 20px; height: 1px; background-color: #121212; top: 50%;} ul.qawrap li .q_box span::before {position: absolute; content: ''; width: 1px; height: 20px; background-color: #121212; left: 50%; transition-duration: 0.3s;} ul.qawrap li.open .q_box span::before {transform: rotate(90deg); opacity: 0;} ul.qawrap li .a_box {display: none; padding: 30px; border-top: 1px solid #121212; font-size: 20px; font-weight: 400; line-height: 1.7; color: #666;} @media screen and (max-width: 960px) { ul.qawrap li .q_box {padding: 30px; font-size: 20px;} ul.qawrap li .a_box {padding: 20px; font-size: 18px;} } @media screen and (max-width: 640px) { ul.qawrap li .q_box {font-size: 16px; padding: 20px;} ul.qawrap li .a_box {font-size: 14px;} } /* =========== Q&A =========== */ /* =========== effectwrap =========== */ .effectwrap {display: flex; justify-content: space-between;} .effectwrap .e_box { border-right: 1px solid #eee; text-align: center; padding: 0 20px; display: flex; flex-direction: column; align-items: center;} .effectwrap .e_box:last-child {border-right: 0;} .effectwrap .e_box i {font-size: 25px; width: 60px; height: 60px; border-radius: 50%; line-height: 60px; margin-bottom: 30px;} .effectwrap .e_box h2 {font-size: 24px; margin-bottom: 10px;} .effectwrap .e_box p {font-size: 18px; line-height: 1.7; color: #666;} .effectwrap .e_box .icon {width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 30px;} @media screen and (max-width: 960px) { .effectwrap .e_box h2 {font-size: 20px;} .effectwrap .e_box i {margin-bottom: 20px;} .effectwrap .e_box p {font-size: 16px;} } @media screen and (max-width: 640px) { .effectwrap {flex-direction: column;} .effectwrap .e_box {padding: 0; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd; border-right: 0;} .effectwrap .e_box:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: 0;} .effectwrap .e_box h2 {font-size: 18px;} .effectwrap .e_box p {font-size: 14px;} } /* =========== effectwrap =========== */ /* =========== cautionwrap =========== */ .cautionwrap li {margin-bottom: 15px; border: 1px solid #eee; background-color: #f5f5f5; font-size: 20px; font-weight: 400; padding: 20px;} .cautionwrap li:last-child {margin-bottom: 0;} @media screen and (max-width: 960px) { .cautionwrap li {font-size: 18px;} } @media screen and (max-width: 640px) { .cautionwrap li {font-size: 16px;} } /* =========== cautionwrap =========== */ /* =========== pointwrap =========== */ .pointwrap {display: flex; flex-wrap: wrap;} .pointwrap .p_box {width: 49%; border-right: 1px solid #ddd; border-top: 1px solid #ddd; padding: 30px;} .pointwrap .p_box:nth-child(2n) {border-right: 0;} .pointwrap .p_box:nth-child(-n+2) {border-top: 0;} .pointwrap .p_box h4 {font-size: 14px; font-weight: 500; margin-bottom: 30px;} .pointwrap .p_box h4.orange {color: #f58323;} .pointwrap .p_box h4.mint {color: #00a6a6;} .pointwrap .p_box h2 {font-size: 30px;margin-bottom: 20px;} .pointwrap .p_box p {font-size: 18px; line-height: 1.7; color: #666;} @media screen and (max-width: 960px) { .pointwrap .p_box h2 {font-size: 24px;} .pointwrap .p_box p {font-size: 16px;} } @media screen and (max-width: 640px) { .pointwrap .p_box {width: 100%; padding: 20px; border-right: 0;} .pointwrap .p_box:nth-child(-n+2) {border-top: 1px solid #ddd;} .pointwrap .p_box:first-child {border-top: 0;} .pointwrap .p_box h2 {font-size: 20px;} .pointwrap .p_box p {font-size: 14px;} } /* =========== pointwrap =========== */ /* =========== meritwrap =========== */ .meritwrap .m_box {margin-bottom: 80px; text-align: center;} .meritwrap .m_box .subtit {display: flex; flex-direction: column; align-items: center;} .meritwrap .m_box .subtit .num {display: flex; flex-direction: column; justify-content: center; background-color: #121212; width: 80px; height: 80px; color: #fff; margin-bottom: 30px;} .meritwrap .m_box .subtit .num h5 {font-size: 15px; font-weight: 400;} .meritwrap .m_box .subtit .num h3 {font-size: 24px; font-weight: 700;} .meritwrap .m_box .subtit > h2 {font-size: 40px; margin-bottom: 20px;} .meritwrap .m_box .subtit > p {font-size: 20px; line-height: 1.7; color: #666;} .meritwrap .m_box .imgwrap {margin-top: 50px;} .meritwrap .m_box .imgwrap img {max-width: 800px; width: 100%;} @media screen and (max-width: 960px) { .meritwrap .m_box {margin-bottom: 60px;} .meritwrap .m_box .subtit .num {width: 70px; height: 70px; margin-bottom: 20px;} .meritwrap .m_box .subtit .num h5 {font-size: 14px;} .meritwrap .m_box .subtit .num h3 {font-size: 20px;} .meritwrap .m_box .subtit > h2 {font-size: 30px;} .meritwrap .m_box .subtit > p {font-size: 18px;} .meritwrap .m_box .imgwrap {margin-top: 40px;} } @media screen and (max-width: 640px) { .meritwrap .m_box {margin-bottom: 50px;} .meritwrap .m_box .subtit .num {width: 60px; height: 60px;} .meritwrap .m_box .subtit .num h5 {font-size: 12px;} .meritwrap .m_box .subtit .num h3 {font-size: 18px;} .meritwrap .m_box .subtit > h2 {font-size: 24px;} .meritwrap .m_box .subtit > p {font-size: 16px;} .meritwrap .m_box .imgwrap {margin-top: 30px;} } /* =========== meritwrap =========== */ /* =========== processwrap =========== */ .processwrap .iconwrap {display: flex; justify-content: space-between; max-width: 1640px; margin: 0 auto;} .processwrap .iconwrap li {border-radius: 50%; display: flex; justify-content: center; align-items: center;} .processwrap .deco {position: relative;} .processwrap .deco .line {width: 100%; height: 1px; background-color: #ddd; position: absolute; top: 50%;} .processwrap .deco .dots {display: flex; justify-content: space-between; max-width: 1640px; margin: 50px auto; position: relative; z-index: 1} .processwrap .deco .dots .dotbox {display: flex; justify-content: center} .processwrap .deco .dots .dotbox .dot {width: 13px; height: 13px; display: block; border-radius: 50%;} .processwrap .txtwrap {display: flex; max-width: 1640px; margin: 0 auto;} .processwrap .txtwrap .txt {display: flex; flex-direction: column; align-items: center; text-align: center;} .processwrap .txtwrap .txt h2 {font-size: 24px; margin-bottom: 15px;} .processwrap .txtwrap .txt p {font-size: 18px; line-height: 1.7; color: #666;} @media screen and (max-width: 960px) { .processwrap .iconwrap li img {height: 100px;} .processwrap .deco .dots {margin: 40px auto;} .processwrap .deco .dots .dotbox .dot {width: 11px; height: 11px;} .processwrap .txtwrap .txt h2 {font-size: 20px;} .processwrap .txtwrap .txt p {font-size: 16px;} } @media screen and (max-width: 640px) { .processwrap {display: flex;} .processwrap .iconwrap {flex-direction: column; margin: 0; gap: 50px;} .processwrap .iconwrap li img {height: 80px;} .processwrap .deco {margin: 0 20px;} .processwrap .deco .line {width: 1px; height: 100%; top: 0; left: 50%;} .processwrap .deco .dots {flex-direction: column; margin: auto; height: 100%; gap: 50px;} .processwrap .deco .dots .dotbox {align-items: center;} .processwrap .deco .dots .dotbox .dot {width: 10px; height: 10px;} .processwrap .txtwrap {flex-direction: column; margin: 0; width: 100%; gap: 50px;} .processwrap .txtwrap .txt {display: block; text-align: left;} .processwrap .txtwrap .txt h2 {font-size: 18px;} .processwrap .txtwrap .txt p {font-size: 14px;} } /* =========== processwrap =========== */ /* =========== checkwrap =========== */ .checkwrap {text-align: left; max-width: 1000px; margin: 0 auto; padding: 80px 50px; margin-bottom: 50px;} .checkwrap li {display: flex; align-items: center; margin-bottom: 40px; padding: 0 20px 40px; border-bottom: 1px dashed #ddd; font-size: 26px; font-weight: 400;} .checkwrap li:last-child {padding-bottom: 0; margin-bottom: 0; border-bottom: 0;} .checkwrap li span {width: 40px; height: 40px; display: inline-block; margin-right: 30px; background-size: cover; background-repeat: no-repeat; flex-shrink: 0;} .checkwrap.orange {background: #fffbf7;} .checkwrap.orange li span {background-image: url(../html/img/a1_img1.png);} .checkwrap.mint {background: #ebf5f5;} .checkwrap.mint li span {background-image: url(../html/img/b1_img6.png);} @media screen and (max-width: 960px) { .checkwrap {padding: 50px;} .checkwrap li {padding: 0 20px 30px; margin-bottom: 30px; font-size: 22px;} .checkwrap li span {width: 30px; height: 30px; margin-right: 20px;} } @media screen and (max-width: 640px) { .checkwrap {padding: 30px; margin-bottom: 30px;} .checkwrap li {font-size: 18px; padding: 0 0 30px;} .checkwrap li span {width: 25px; height: 25px; margin-right: 15px;} } /* =========== checkwrap =========== */ /* =========== realreview =========== */ .realreview {padding: 30px; font-size: 20px; font-weight: 500; text-align: center;} .realreview.mint {background-color: #ebf5f5; color: #00a6a6;} .realreview.orange {background-color: #fffbf7; color: #f58323;} @media screen and (max-width: 960px) { .realreview {padding: 20px; font-size: 18px; line-height: 1.7;} } @media screen and (max-width: 640px) { .realreview {font-size: 16px;} } /* =========== realreview =========== */ /* =========== 컨텐츠 내 탭메뉴 css =========== */ .tab-content .sub-tab {max-width: 1640px; padding: 0 20px; margin: 0 auto 80px; display: flex; justify-content: space-between;} .tab-content .sub-tab li {width: 49%; padding: 20px; text-align: center; font-size: 20px; cursor: pointer; transition-duration: 0.3s;} .tab-content .sub-tab li.active {color: #fff; font-weight: 700;} .tab-content .sub-content {display: none;} .tab-content .sub-content.active {display: block;} @media screen and (max-width: 960px) { .tab-content .sub-tab {margin-bottom: 60px;} .tab-content .sub-tab li {padding: 15px; font-size: 18px;} } @media screen and (max-width: 640px) { .tab-content .sub-tab {margin-bottom: 50px;} .tab-content .sub-tab li {font-size: 16px;} } /* =========== 컨텐츠 내 탭메뉴 css =========== */ /* =========== 피부미용 맨 밑 .grsrwrap =========== */ .grsrbg {padding: 120px 0; background-image: url(../html/img/b_grsr.jpg);} .grsrbg .grsrwrap {max-width: 1640px;padding: 0 20px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;flex-direction: column;} .grsrbg .grsrwrap .txtwrap {text-align: center; margin-bottom: 30px;} .grsrbg .grsrwrap .txtwrap h2 {font-size: 40px; color: #fff;} .grsrbg .grsrwrap .txtwrap ul {display: flex; justify-content: center; margin-top: 10px;} .grsrbg .grsrwrap .txtwrap ul li {font-size: 18px; color: #fff; font-weight: 500; margin-right: 10px; padding-right: 10px; position: relative;} .grsrbg .grsrwrap .txtwrap ul li:last-child {margin-right: 0; padding-right: 0;} .grsrbg .grsrwrap .txtwrap ul li::after {position: absolute; content: ''; width: 1px; height: 80%; background-color: rgba(255,255,255,.8); top: 50%; right: 0; transform: translateY(-50%);} .grsrbg .grsrwrap .txtwrap ul li:last-child::after {display: none;} .grsrbg .grsrwrap .txtwrap p {margin-top: 15px; font-size: 18px; opacity: .8; line-height: 1.7; color: #fff;} .grsrbg .grsrwrap .btnwrap {display: flex;} .grsrbg .grsrwrap .btnwrap > div {margin-right: 15px;} .grsrbg .grsrwrap .btnwrap > div:last-child {margin-right: 0;} .grsrbg .grsrwrap .btnwrap > div a {padding: 15px 40px; display: flex; align-items: center; font-size: 24px; font-weight: 500; color: #fff; border-radius: 31px;} .grsrbg .grsrwrap .btnwrap > div.n_btn a {background-color: #06be34;} .grsrbg .grsrwrap .btnwrap > div.k_btn a {background-color: #f2cc30; color: #352223;} .grsrbg .grsrwrap .btnwrap > div a img {margin-right: 15px; height: 20px;} .grsrbg_o {background-image: url(../html/img/d_grsr.jpg);} .grsrbg_o .grsrwrap .txtwrap h2 {font-weight: 400; font-size: 30px;} .grsrbg_o .grsrwrap .txtwrap h2 b {font-weight: 700; font-size: 40px;} @media screen and (max-width: 960px) { .grsrbg {padding: 100px 0;} .grsrbg .grsrwrap .txtwrap h2 {font-size: 26px;} .grsrbg_o .grsrwrap .txtwrap h2 b {font-size: 30px;} .grsrbg .grsrwrap .txtwrap ul li {font-size: 16px;} .grsrbg .grsrwrap .btnwrap > div a {padding: 10px 30px; font-size: 20px;} } @media screen and (max-width: 640px) { .grsrbg {padding: 80px 0;} .grsrbg .grsrwrap .txtwrap h2 {font-size: 20px;} .grsrbg_o .grsrwrap .txtwrap h2 b {font-size: 24px;} .grsrbg .grsrwrap .txtwrap ul li {font-size: 14px;} .grsrbg .grsrwrap .btnwrap {flex-direction: column;} .grsrbg .grsrwrap .btnwrap > div {margin-right: 0; margin-bottom: 10px;} .grsrbg .grsrwrap .btnwrap > div:last-child {margin-bottom: 0;} .grsrbg .grsrwrap .btnwrap > div a {font-size: 18px;} .grsrbg .grsrwrap .btnwrap > div a img {margin-right: 10px; height: 16px;} } /* =========== 피부미용 맨 밑 .grsrwrap =========== */ /* 공통사항 */ /* a1 */ #a1 .scon1 .titwrap h2 {font-weight: 300;} #a1 .scon1 .titwrap h2 b {color: #f58323;} #a1 .scon2 {display: flex; justify-content: space-between;} #a1 .scon2 > div {width: 49%;} #a1 .scon3 {text-align: center; padding: 120px 0; max-width: 100%; background-color: #f5f5f5;} #a1 .scon3 .titwrap {margin-bottom: 0; padding: 0 20px;} #a1 .scon3 .titwrap h2 {display: flex; justify-content: center; align-items: center; margin-bottom: 30px;} #a1 .scon3 .titwrap h2 span {font-family: 'Cafe24ShiningStar'; font-size: 60px; font-weight: 100; background-color: #f58323; color: #fff; padding: 5px 20px; margin-right: 10px;} #a1 .scon3 .titwrap p {font-size: 28px; line-height: 1.7; color: #666;} #a1 .scon3 .titwrap p b {font-weight: 700; color: #121212;} #a1 .scon4 {text-align: center;} #a1 .scon4 h3 {font-size: 20px; font-weight: 400; letter-spacing: 4px; margin-bottom: 10px; color: #666;} #a1 .scon4 h3 span {color: #f58323;} #a1 .scon4 h2 {font-size: 60px; margin-bottom: 50px;} #a1 .scon4 .incon .score li {font-size: 24px; margin-bottom: 10px;} #a1 .scon4 .incon .score li:last-child {margin-bottom: 0;} #a1 .scon4 .incon .score li span {color: #f58323; font-weight: 700; display: inline-block;} #a1 .scon5 {text-align: center;} #a1 .scon5 h2 {font-size: 50px; font-weight: 700; margin-bottom: 30px;} #a1 .scon5 h2 span {color: #f58323;} #a1 .scon5 .symwrap {display: flex; justify-content: space-between; margin-bottom: 50px;} #a1 .scon5 .symwrap .symbox {width: 24%; border: 1px solid #f58323; padding: 30px;} #a1 .scon5 .symwrap .symbox h5 {font-size: 22px; border-bottom: 1px solid #f58323; margin-bottom: 20px; padding-bottom: 20px; color: #f58323;} #a1 .scon5 .symwrap .symbox p {font-size: 18px; line-height: 1.7; color: #666;} #a1 .scon5 .infograph ul {display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px;} #a1 .scon5 .infograph ul li.txt {width: 30%; background-color: #f5f5f5; border: 1px solid #ddd; padding: 20px; font-size: 20px; color: #666; border-radius: 34px; transition-duration: 0.3s;} #a1 .scon5 .infograph ul li.txt.active {background-color: #f58323; border-color: #f58323; color: #fff; font-weight: 700; box-shadow: 0px 0px 20px rgb(245 131 35 / 50%);} #a1 .scon5 .infograph h3 {font-size: 30px;} #a1 .scon5 .infograph h3 span {position: relative; z-index: 1; } #a1 .scon5 .infograph h3 span::after {position: absolute; content: ''; width: 100%; height: 40%; background-color: #f58323; bottom: 0; left: 0; opacity: 0.6; z-index: -1; } #a1 .scon6 {text-align: center;} #a1 .scon6 .titwrap {margin-bottom: 80px;} #a1 .scon6 .titwrap h2 span {color: #f58323;} #a1 .scon6 .titwrap p {font-size: 24px; color: #666; line-height: 1.7;} #a1 .scon6 .incon {margin-bottom: 80px;} #a1 .scon6 .incon:last-child {margin-bottom: 0;} #a1 .scon6 .incon .txtwrap h4 {font-size: 30px; color: #fff; background-color: #f58323; display: inline-block; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; margin-bottom: 30px;} #a1 .scon6 .incon .txtwrap h3 {font-size: 34px; margin-bottom: 20px; padding-bottom: 20px; position: relative;} #a1 .scon6 .incon .txtwrap h3::after {position: absolute; content: ''; width: 30px; height: 5px; background-color: #f58323; bottom: 0; left: 50%; transform: translateX(-50%);} #a1 .scon6 .incon .txtwrap h5 {font-size: 24px; margin-bottom: 20px;} #a1 .scon6 .incon .txtwrap p {font-size: 18px; line-height: 1.7;} #a1 .scon6 .incon .imgwrap {margin-top: 50px;} #a1 .scon6 .incon .imgwrap li img {max-width: 100%;} #a1 .scon6 .incon3 .imgwrap {display: flex; flex-wrap: wrap;} #a1 .scon6 .incon3 .imgwrap li {width: 32.333%; margin-right: 1.5%; margin-top: 1.5%;} #a1 .scon6 .incon3 .imgwrap li:nth-child(3n) {margin-right: 0;} #a1 .scon6 .incon3 .imgwrap li:nth-child(-n+3) {margin-top: 0;} #a1 .scon6 .incon3 .imgwrap li img {border: 1px solid #ddd;} #a1 .scon6 .incon3 .imgwrap li p {font-size: 20px; background-color: #f58323; padding: 10px; color: #fff; font-weight: 500;} #a1 .scon7 {text-align: center;} #a1 .scon7 .titwrap {margin-bottom: 80px;} #a1 .scon7 .titwrap h2 {font-size: 50px; margin-bottom: 20px;} #a1 .scon7 .titwrap h2 span {color: #f58323;} #a1 .scon7 ul.qawrap li.hover .q_box {color: #f58323;} #a1 .scon7 ul.qawrap li.open .q_box {color: #f58323;} @media screen and (max-width: 960px) { #a1 .scon2 {flex-direction: column;} #a1 .scon2 > div {width: 100%; margin-bottom: 20px;} #a1 .scon2 > div:last-child {margin-bottom: 0;} #a1 .scon3 {padding: 100px 0;} #a1 .scon3 .titwrap h2 span {font-size: 40px;} #a1 .scon3 .titwrap p {font-size: 24px;} #a1 .scon4 h3 {font-size: 18px;} #a1 .scon4 h2 {font-size: 40px;} #a1 .scon4 .incon .score li {font-size: 20px;} #a1 .scon5 h2 {font-size: 40px;} #a1 .scon5 .symwrap {flex-wrap: wrap;} #a1 .scon5 .symwrap .symbox {width: 49%; margin-top: 2%;} #a1 .scon5 .symwrap .symbox:nth-child(-n+2) {margin-top: 0;} #a1 .scon5 .symwrap .symbox h5 {font-size: 20px;} #a1 .scon5 .symwrap .symbox p {font-size: 16px;} #a1 .scon5 .infograph ul li.txt {font-size: 18px;} #a1 .scon5 .infograph h3 {font-size: 26px;} #a1 .scon6 .titwrap p {font-size: 20px;} #a1 .scon6 .incon {margin-bottom: 60px;} #a1 .scon6 .incon .txtwrap h4 {font-size: 24px; width: 40px; height: 40px; line-height: 40px;} #a1 .scon6 .incon .txtwrap h3 {font-size: 28px;} #a1 .scon6 .incon .txtwrap h5 {font-size: 20px;} #a1 .scon6 .incon .txtwrap p {font-size: 16px;} #a1 .scon6 .incon3 .imgwrap li {width: 49%; margin-right: 2%; margin-top: 2%;} #a1 .scon6 .incon3 .imgwrap li:nth-child(-n+3) {margin-top: 2%;} #a1 .scon6 .incon3 .imgwrap li:nth-child(3n) {margin-right: 2%;} #a1 .scon6 .incon3 .imgwrap li:nth-child(-n+2) {margin-top: 0;} #a1 .scon6 .incon3 .imgwrap li:nth-child(2n) {margin-right: 0;} #a1 .scon6 .incon3 .imgwrap li p {font-size: 18px;} #a1 .scon7 .titwrap {margin-bottom: 50px;} #a1 .scon7 .titwrap h2 {font-size: 40px;} } @media screen and (max-width: 640px) { #a1 .scon3 {padding: 80px 0;} #a1 .scon3 .titwrap p {font-size: 20px;} #a1 .scon4 h3 {font-size: 16px;} #a1 .scon4 h2 {font-size: 30px; margin-bottom: 30px;} #a1 .scon4 .incon .score li {font-size: 16px;} #a1 .scon5 h2 {font-size: 28px;} #a1 .scon5 .symwrap {flex-direction: column; margin-bottom: 30px;} #a1 .scon5 .symwrap .symbox {width: 100%; padding: 20px;} #a1 .scon5 .symwrap .symbox:nth-child(-n+2) {margin-top: 2%;} #a1 .scon5 .symwrap .symbox:first-child {margin-top: 0;} #a1 .scon5 .symwrap .symbox h5 {font-size: 18px; margin-bottom: 15px; padding-bottom: 15px;} #a1 .scon5 .symwrap .symbox p {font-size: 14px;} #a1 .scon5 .infograph ul {flex-direction: column;} #a1 .scon5 .infograph ul li.txt {font-size: 16px; width: 100%;} #a1 .scon5 .infograph ul li img {transform: rotate(90deg); margin: 10px 0;} #a1 .scon5 .infograph h3 {font-size: 20px;} #a1 .scon6 .titwrap p {font-size: 18px;} #a1 .scon6 .incon .txtwrap h4 {font-size: 18px; width: 30px; height: 30px; line-height: 30px; margin-bottom: 20px;} #a1 .scon6 .incon .txtwrap h3 {font-size: 22px;} #a1 .scon6 .incon .txtwrap h5 {font-size: 18px;} #a1 .scon6 .incon .txtwrap p {font-size: 14px;} #a1 .scon6 .incon3 .imgwrap {flex-direction: column;} #a1 .scon6 .incon3 .imgwrap li {width: 100%; margin-right: 0;} #a1 .scon6 .incon3 .imgwrap li:nth-child(-n+2) {margin-top: 2%;} #a1 .scon6 .incon3 .imgwrap li:nth-child(2n) {margin-right: 0;} #a1 .scon6 .incon3 .imgwrap li:first-child {margin-top: 0;} #a1 .scon6 .incon3 .imgwrap li p {font-size: 16px;} #a1 .scon7 .titwrap {margin-bottom: 30px;} #a1 .scon7 .titwrap h2 {font-size: 24px;} } /* a1 */ /* a2 */ #a2 {max-width: 1640px; margin: 0 auto; width: 100%;} #a2 .scon {margin-bottom: 80px;} #a2 .scon:last-child {margin-bottom: 0;} #a2 .scon1 {text-align: center;} #a2 .scon1 .titwrap h3 {letter-spacing: 5px; color: #f58323; font-weight: 400;} #a2 .scon1 .titwrap h2 {font-size: 50px; margin-bottom: 20px;} #a2 .scon1 .titwrap p {margin-bottom: 30px; color: #666;} #a2 .scon1 #startBtn {border: 1px solid #f58323; background: transparent; color: #f58323; font-size: 24px; font-weight: 400; padding: 10px 30px; height: auto; border-radius: 29px; transition-duration: 0.3s; position: relative; overflow: hidden; z-index: 1;} #a2 .scon1 #startBtn:hover {color: #fff;} #a2 .scon1 #startBtn::after {position: absolute; content: ''; width: 0; height: 100%; background-color: #f58323; left: 0; top: 0; transition-duration: 0.3s; z-index: -1;} #a2 .scon1 #startBtn:hover::after {width: 100%;} #a2 .scon2 {display: none;} #a2 .scon2 .progress {display: flex; max-width: 1000px; margin: 0 auto 80px; justify-content: space-between; position: relative;} #a2 .scon2 .progress::after {position: absolute; content: ''; width: 100%; height: 1px; background-color: #ddd; top: -17px; z-index: -1;} #a2 .scon2 .progress li { position:relative; font-size: 20px; font-weight: 500;} /* 위에 점 */ #a2 .scon2 .progress li::before {content:''; position:absolute; top:-20px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:#ffd5b3;} /* 활성 상태 */ #a2 .scon2 .progress li.active::before {animation:pulseDot 1.2s ease-in-out infinite;} /* 애니메이션 */ @keyframes pulseDot { 0% { background-color: #f58323; transform:translateX(-50%);} 50% {background-color: #ffd5b3; transform:translateX(-50%);} 100% { background-color: #f58323; transform:translateX(-50%);} } #a2 .scon2 .panel {display: none; max-width: 1200px; margin: 0 auto;} #a2 .scon2 .panel.active {display: block;} #a2 .scon2 .panel .step-head {text-align: center; margin-bottom: 30px;} #a2 .scon2 .panel .step-head h2 {font-size: 30px; margin-bottom: 10px; display: flex; justify-content: center; flex-direction: column; align-items: center;} #a2 .scon2 .panel .step-head h2 span {font-size: 20px; font-weight: 500; background-color: #f58323; display: inline-block; color: #fff; padding: 7px 20px; border-radius: 20px; margin-bottom: 10px;} #a2 .scon2 .panel .step-head p { font-size: 20px; color: #666; font-weight: 400;} #a2 .scon2 .panel .cards-grid {display: flex; flex-direction: column; margin-bottom: 50px;} #a2 .scon2 .panel .cards-grid button {background-color: transparent; border: 1px solid #ddd; margin-bottom: 20px; padding: 30px; text-align: left; transition-duration: 0.3s;} #a2 .scon2 .panel .cards-grid button:last-child {margin-bottom: 0;} #a2 .scon2 .panel .cards-grid button:hover {border-color: #f58323;} #a2 .scon2 .panel .cards-grid button.selected {border-color: #f58323; background-color: #f58323;} #a2 .scon2 .panel .cards-grid button h3 {font-size: 24px; margin-bottom: 5px; transition-duration: 0.3s;} #a2 .scon2 .panel .cards-grid button p.line {font-size: 18px; font-weight: 500; color: #f58323; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; transition-duration: 0.3s;} #a2 .scon2 .panel .cards-grid button p.detail { font-size: 16px; color: #666; transition-duration: 0.3s; line-height: 1.7;} #a2 .scon2 .panel .cards-grid button.selected h3 {color: #fff;} #a2 .scon2 .panel .cards-grid button.selected p.line {border-color: #fff; color: #fff;} #a2 .scon2 .panel .cards-grid button.selected p.detail {color: #fff;} #a2 .scon2 .panel .pattern-list {margin-bottom: 50px;} #a2 .scon2 .panel .pattern-list .pattern-card {margin-bottom: 20px; border: 1px solid #ddd; padding: 30px; transition-duration: 0.3s;} #a2 .scon2 .panel .pattern-list .pattern-card.selected {border-color: #f58323;} #a2 .scon2 .panel .pattern-list .pattern-card:hover {border-color: #f58323;} #a2 .scon2 .panel .pattern-list .pattern-card:last-child {margin-bottom: 0;} #a2 .scon2 .panel .pattern-list .pattern-card button {background-color: transparent; width: 100%; border: 0; text-align: left;} #a2 .scon2 .panel .pattern-list .pattern-card button > div {margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd;} #a2 .scon2 .panel .pattern-list .pattern-card button > div h3 { font-size: 24px; margin-bottom: 5px;} #a2 .scon2 .panel .pattern-list .pattern-card button > div p {font-size: 18px; color: #666;} #a2 .scon2 .panel .pattern-list .pattern-card .chips .chip {display: none;} #a2 .scon2 .panel .pattern-list .pattern-card .chips .chip-label {display: inline-block; padding: 8px 16px; border: 1px solid #ddd; border-radius: 20px; margin-right: 8px; font-size: 18px; color: #aaa; cursor: pointer; transition-duration: 0.3s;} #a2 .scon2 .panel .pattern-list .pattern-card .chips .chip:checked + .chip-label {background: #f58323; color: #fff; border-color: #f58323;} #a2 .scon2 .panel .checklist {margin-bottom: 50px; display: flex; flex-wrap: wrap; gap: 10px;} #a2 .scon2 .panel .checklist .symptom {display: none;} #a2 .scon2 .panel .checklist .symptom-label {display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 5px; border: 1px solid #ddd; background: #f5f5f5; color: #666; max-width: 100%; font-size: 18px; transition-duration: 0.3s; cursor: pointer;} #a2 .scon2 .panel .checklist .symptom-label:hover {background-color: #f58323; color: #fff; border-color: #f58323} #a2 .scon2 .panel .checklist .symptom:checked + .symptom-label {background: #f58323; color: #fff; border-color: #f58323;} #a2 .scon2 .panel .result-card {border: 1px solid #ddd; background-color: #f7f7f7; margin-bottom: 50px; padding: 50px;} #a2 .scon2 .panel .result-card .seal {font-size: 20px; color: #fff; background-color: #f58323; display: inline-block; padding: 5px 20px; font-weight: 700; border-radius: 18px; margin-bottom: 20px;} #a2 .scon2 .panel .result-card p.result-eyebrow {font-size: 18px; color: #e20000; font-weight: 500; margin-bottom: 10px;} #a2 .scon2 .panel .result-card h2 {font-size: 30px; margin-bottom: 20px;} #a2 .scon2 .panel .result-card .result-block {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ddd;} #a2 .scon2 .panel .result-card .result-block h4 {font-size: 18px; margin-bottom: 10px; color: #f58323;} #a2 .scon2 .panel .result-card .result-block p {font-size: 18px; line-height: 1.7; color: #666;} #a2 .scon2 .panel .result-card .result-ctas {display: flex;} #a2 .scon2 .panel .result-card .result-ctas button {border: 0; margin-right: 10px; background-color: transparent;} #a2 .scon2 .panel .result-card .result-ctas button:last-child {margin-right: 0;} #a2 .scon2 .panel .result-card .result-ctas button a {display: flex; align-items: center; font-size: 18px; font-weight: 500; padding: 10px; border-radius: 25px;} #a2 .scon2 .panel .result-card .result-ctas button.naverbtn a {background-color: #e3f8e8; color: #06be34;} #a2 .scon2 .panel .result-card .result-ctas button.kakaobtn {background-color: #381c1e; color: #fae100; display: flex; align-items: center; font-size: 18px; font-weight: 500; padding: 10px; border-radius: 25px;} #a2 .scon2 .panel .result-card .result-ctas button img {margin-right: 10px;} #a2 .scon2 .panel p.disclaimer {font-size: 18px; text-align: center; font-weight: 400; color: #121212; margin-bottom: 30px;} #a2 .scon2 .panel .restart {display: flex; justify-content: center;} #a2 .scon2 .panel .restart button {border: 0; background-color: transparent; font-size: 16px; color: #999; border-bottom: 1px solid #999; padding: 0 10px 5px;} /* 다음/이전버튼 */ #a2 .scon2 .panel .nav-buttons {display: flex; justify-content: flex-end;} #a2 .scon2 .panel .nav-buttons .btn-primary { background-color: #121212; color: #fff;} #a2 .scon2 .panel .nav-buttons .btn-primary:disabled {background-color: #f5f5f5; color: #999;} #a2 .scon2 .panel .nav-buttons .btn-ghost {margin-right: 10px;} @media screen and (max-width: 960px) { #a2 .scon1 .titwrap h2 {font-size: 40px;} #a2 .scon1 #startBtn {font-size: 20px;} #a2 .scon2 .progress li {font-size: 18px;} #a2 .scon2 .panel .step-head h2 span {font-size: 18px;} #a2 .scon2 .panel .step-head h2 {font-size: 26px;} #a2 .scon2 .panel .step-head p {font-size: 18px;} #a2 .scon2 .panel .cards-grid {margin-bottom: 40px;} #a2 .scon2 .panel .cards-grid button h3 {font-size: 20px;} #a2 .scon2 .panel .cards-grid button p.line {font-size: 16px;} #a2 .scon2 .panel .cards-grid button p.detail {font-size: 15px;} #a2 .scon2 .panel .pattern-list {margin-bottom: 40px;} #a2 .scon2 .panel .pattern-list .pattern-card button > div h3 {font-size: 20px;} #a2 .scon2 .panel .pattern-list .pattern-card button > div p {font-size: 16px;} #a2 .scon2 .panel .pattern-list .pattern-card .chips .chip-label {font-size: 16px;} #a2 .scon2 .panel .checklist {margin-bottom: 40px;} #a2 .scon2 .panel .checklist .symptom-label {font-size: 16px;} #a2 .scon2 .panel .result-card {margin-bottom: 40px;} #a2 .scon2 .panel .result-card .seal {font-size: 18px;} #a2 .scon2 .panel .result-card p.result-eyebrow {font-size: 16px;} #a2 .scon2 .panel .result-card h2 {font-size: 26px;} #a2 .scon2 .panel .result-card .result-block h4 {font-size: 16px;} #a2 .scon2 .panel .result-card .result-block p {font-size: 16px;} #a2 .scon2 .panel .result-card .result-ctas {flex-direction: column;} #a2 .scon2 .panel .result-card .result-ctas button {margin-right: 0; margin-bottom: 10px;} #a2 .scon2 .panel .result-card .result-ctas button:last-child {margin-bottom: 0;} #a2 .scon2 .panel .result-card .result-ctas button a {font-size: 16px; justify-content: center;} #a2 .scon2 .panel .result-card .result-ctas button.kakaobtn {justify-content: center; font-size: 16px;} #a2 .scon2 .panel p.disclaimer {font-size: 16px;} #a2 .scon2 .panel .restart button {font-size: 14px;} } @media screen and (max-width: 640px) { #a2 .scon1 .titwrap h2 {font-size: 30px;} #a2 .scon1 #startBtn {font-size: 17px;} #a2 .scon2 .progress li {font-size: 16px;} #a2 .scon2 .panel .step-head h2 {font-size: 22px;} #a2 .scon2 .panel .step-head h2 span {font-size: 16px;} #a2 .scon2 .panel .step-head p {font-size: 16px;} #a2 .scon2 .panel .cards-grid {margin-bottom: 30px;} #a2 .scon2 .panel .cards-grid button {margin-bottom: 15px;} #a2 .scon2 .panel .cards-grid button h3 {font-size: 18px;} #a2 .scon2 .panel .cards-grid button p.line {font-size: 14px;} #a2 .scon2 .panel .cards-grid button p.detail {font-size: 14px;} #a2 .scon2 .panel .pattern-list {margin-bottom: 30px;} #a2 .scon2 .panel .pattern-list .pattern-card button > div h3 {font-size: 18px;} #a2 .scon2 .panel .pattern-list .pattern-card button > div p {font-size: 14px;} #a2 .scon2 .panel .pattern-list .pattern-card .chips .chip-label {font-size: 14px;} #a2 .scon2 .panel .checklist {margin-bottom: 30px;} #a2 .scon2 .panel .checklist .symptom-label {font-size: 14px;} #a2 .scon2 .panel .result-card {padding: 40px; margin-bottom: 30px;} #a2 .scon2 .panel .result-card .seal {font-size: 16px;} #a2 .scon2 .panel .result-card p.result-eyebrow {font-size: 14px;} #a2 .scon2 .panel .result-card h2 {font-size: 22px;} #a2 .scon2 .panel .result-card .result-block h4 {font-size: 15px;} #a2 .scon2 .panel .result-card .result-block p {font-size: 14px;} #a2 .scon2 .panel .result-card .result-ctas button a {font-size: 15px;} #a2 .scon2 .panel .result-card .result-ctas button.kakaobtn {font-size: 15px;} #a2 .scon2 .panel p.disclaimer {font-size: 15px;} } /* a2 */ /* a3 */ #a3 .tab_btns button {width: 49%; border: 1px solid #f58323; color: #f58323;} #a3 .tab_btns button.active {background-color: #f58323; color: #fff;} /* tab1 */ #a3 .scon1 .titwrap h2 span {color: #f58323;font-size: 50px; font-weight: 700;} #a3 .scon1 .btnwrap {display: flex; justify-content: center; margin-bottom: 60px;} #a3 .scon1 .btnwrap li:first-child {margin-right: 10px;} #a3 .scon1 .btnwrap li a {font-size: 18px; border: 1px solid #f58323; color: #f58323; padding: 8px 20px; display: block; border-radius: 21px; transition-duration: 0.3s} #a3 .scon1 .btnwrap li a:hover {background-color: #f58323; color: #fff;} #a3 .scon2 .section-head {margin-bottom: 30px; text-align: center;} #a3 .scon2 .section-head p.section-tag {font-size: 20px; font-weight: 500; background-color: #f58323; display: inline-block; color: #fff; padding: 7px 20px; border-radius: 20px; margin-bottom: 10px;} #a3 .scon2 .section-head h2 {font-size: 30px; margin-bottom: 10px;} #a3 .scon2 .section-head p.section-desc {font-size: 20px; color: #666; font-weight: 400;} #a3 .scon2 .quiz {padding: 50px; border: 1px solid #ffd8b8; background-color:#fff8ee;} #a3 .scon2 .quiz .quiz-progress {display: flex; align-items: center; margin-bottom: 50px;} #a3 .scon2 .quiz .quiz-progress #progressLabel {font-size: 14px; color: #666; display: block; margin-right: 10px;} #a3 .scon2 .quiz .quiz-progress .dots {display: flex;} #a3 .scon2 .quiz .quiz-progress .dots .dot {width: 10px; height: 10px; background-color: #ffdfc4; display: block; border-radius: 50%; margin-right: 5px;} #a3 .scon2 .quiz .quiz-progress .dots .dot:last-child {margin-right: 0;} #a3 .scon2 .quiz .quiz-progress .dots .dot.active {background-color: #f58323;} #a3 .scon2 .quiz .quiz-step {display: none;} #a3 .scon2 .quiz .quiz-step.active {display: block;} #a3 .scon2 .quiz .quiz-step .quiz-q {font-size: 24px; font-weight: 700; margin-bottom: 20px;} #a3 .scon2 .quiz .quiz-step .quiz-options {display: flex; justify-content: space-between;} #a3 .scon2 .quiz .quiz-step .quiz-options button {width: 49%; padding: 30px; background-color: #fff; border: 1px solid #fff; display: flex; flex-direction: column; text-align: left; transition-duration: 0.3s; font-size: 16px; color: #666; line-height: 1.7;} #a3 .scon2 .quiz .quiz-step .quiz-options button:hover {border-color: #ffd8b8;} #a3 .scon2 .quiz .quiz-step .quiz-options button span {color: #999; font-weight: 400; font-size: 14px; margin-bottom: 20px;} #a3 .scon2 .quiz .quiz-step .quiz-options button strong {font-size: 20px; margin-bottom: 10px; color: #f58323;} #a3 .scon2 .quiz .quiz-step .quiz-options.three button {width: 32.333%;} #a3 .scon2 .quiz .quiz-step .quiz-back {background-color: transparent; border: 0; font-size: 15px; color: #ffaa62; position: relative; margin-top: 20px;} #a3 .scon2 .quiz .quiz-step .quiz-back::after {position: absolute; content: ''; width: 0; height: 1px; background-color: #ffaa62; bottom: -5px; left:0; transition-duration: 0.3s;} #a3 .scon2 .quiz .quiz-step .quiz-back:hover::after {width: 100%;} #a3 .scon2 .result {margin: 50px auto 0; background-color: #f5f5f5; border: 1px solid #ddd; padding: 50px;} #a3 .scon2 .result .slip-meta span {font-size: 14px; margin-bottom: 20px; padding-bottom: 20px; color: #999; border-bottom: 1px solid #ddd;} #a3 .scon2 .result .slip-title {font-size: 30px; margin-bottom: 5px; color: #f58323;} #a3 .scon2 .result .slip-sub {font-size: 18px; line-height: 1.7; color: #666; margin-bottom: 30px;} #a3 .scon2 .result .slip-grid {display: flex; justify-content: space-between; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #ddd;} #a3 .scon2 .result .slip-grid .slip-block {margin-bottom: 30px; width: 50%} #a3 .scon2 .result .slip-grid .slip-block h3 {font-size: 20px; margin-bottom: 10px; font-weight: 500; position: relative; padding-left: 15px;} #a3 .scon2 .result .slip-grid .slip-block h3::after {position: absolute; content: ''; width: 3px; height: 60%; background-color: #f58323; left: 0; top: 50%; transform: translateY(-50%);} #a3 .scon2 .result .slip-grid .slip-block ul li {font-size: 16px; line-height: 1.7; margin-bottom: 5px; color: #666;} #a3 .scon2 .result .slip-grid .slip-block .slip-cross {background-color: #ffe8c5; padding: 20px; border-radius: 5px; font-size: 15px; line-height: 1.7; color: #121212;} #a3 .scon2 .result .slip-note {font-size: 16px; margin-bottom: 20px; color: #666; text-align: center;} #a3 .scon2 .result .slip-actions {display: flex; justify-content: center; margin-bottom: 30px;} #a3 .scon2 .result .slip-actions a {border: 1px solid #121212; display: block; padding: 8px 20px; height: auto; border-radius: 26px; font-weight: 500; margin-right: 10px; transition-duration: 0.3s;} #a3 .scon2 .result .slip-actions a:last-child {margin-right: 0;} #a3 .scon2 .result .slip-actions a:hover {background-color: #121212; color: #fff;} #a3 .scon2 .result .retry {border: 0; background-color: transparent; display: block; text-align: center; color: #999; font-size: 14px; position: relative; margin: 0 auto;} #a3 .scon2 .result .retry::after {position: absolute; content: ''; width: 0; height: 1px; background-color: #999; bottom: -5px; left: 0; transition-duration: 0.3s;} #a3 .scon2 .result .retry:hover::after {width: 100%;} #a3 .scon3 {width: 100%; max-width: 100%; padding: 120px 0; background-color: #fff8ee;} #a3 .scon3 .titwrap {text-align: center; max-width: 1640px; padding: 0 20px; margin: 0 auto 50px;} #a3 .scon3 .titwrap h3 {font-size: 16px; letter-spacing: 5px; font-weight: 500; color: #f58323; margin-bottom: 10px;} #a3 .scon3 .titwrap h2 {font-size: 30px; margin-bottom: 20px;} #a3 .scon3 .inboxwrap {max-width: 1640px; margin: 0 auto 50px; padding: 0 20px;} #a3 .scon3 .inboxwrap:last-child {margin-bottom: 0;} #a3 .scon3 .inboxwrap .intxt {margin-bottom: 30px;} #a3 .scon3 .inboxwrap .intxt h3 {font-size: 24px; padding-left: 20px; position: relative;} #a3 .scon3 .inboxwrap .intxt h3::after {position: absolute; content: ''; width: 4px; height: 70%; background-color: #f58323; left: 0; top: 50%; transform: translateY(-50%);} #a3 .scon3 .inboxwrap .intxt h3 span { font-size: 16px; font-weight: 400; color: #666; margin-left: 10px;} #a3 .scon3 .inboxwrap .innerbox {display: flex; justify-content: space-between;} #a3 .scon3 .inboxwrap .inbox {width: 32.333%; background-color: #fff; padding: 50px; border: 1px solid #ddd; position: relative;} #a3 .scon3 .inboxwrap .inbox1 {border: 1px solid #f58323;} #a3 .scon3 .inboxwrap .inbox span.badge {position: absolute; top: -20px; right: 10px; background-color: #f58323; color: #fff; font-size: 18px; padding: 8px 20px; border-radius: 20px; font-weight: 700;} #a3 .scon3 .inboxwrap .inbox span.opt-label {font-size: 16px; color: #f58323; margin-bottom: 20px; display: block;} #a3 .scon3 .inboxwrap .inbox h3 {font-size: 28px; margin-bottom: 10px;} #a3 .scon3 .inboxwrap .inbox .card-sub {font-size: 18px; color: #666;} #a3 .scon3 .inboxwrap .inbox ul {margin-top: 30px;} #a3 .scon3 .inboxwrap .inbox ul li {margin-bottom: 15px;} #a3 .scon3 .inboxwrap .inbox ul li:last-child {margin-bottom: 0;} #a3 .scon3 .inboxwrap .inbox ul li h4 {font-size: 18px; padding-left: 15px; position: relative; margin-bottom: 5px;} #a3 .scon3 .inboxwrap .inbox ul li h4::after {position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #f58323; left: 0; top: 50%; transform: translateY(-50%);} #a3 .scon3 .inboxwrap .inbox ul li p {font-size: 16px; color: #333; line-height: 1.7;} #a3 .scon3 .inboxwrap .inbox .btnwrap {margin-top: 50px;} #a3 .scon3 .inboxwrap .inbox .btnwrap a {width: 100%; text-align: center; display: block; border: 1px solid #f58323; padding: 15px 20px; font-size: 16px; font-weight: 500; color: #f58323; border-radius: 27px; transition-duration: 0.3s;} #a3 .scon3 .inboxwrap .inbox .btnwrap a:hover {background-color: #f58323; color: #fff;} #a3 .scon3 .inboxwrap2 .inbox {width: 49%;} #a3 .scon4 h3 {font-size: 24px; text-align: center; line-height: 1.7; font-weight: 500;} #a3 .scon4 .line {margin: 30px auto; width: 1px; height: 50px; background-color: #ddd;} #a3 .scon4 p {font-size: 15px; text-align: center; color: #666;} #a3 .scon5 {text-align: center;} #a3 .scon5 .titwrap {margin-bottom: 80px;} #a3 .scon5 .titwrap h2 span {color: #f58323;} #a3 .scon5 ul li.hover .q_box {color: #f58323;} #a3 .scon5 ul li.open .q_box {color: #f58323;} /* tab2 */ #a3 .scon6 {text-align: center;} #a3 .scon6 .titwrap {margin-bottom: 30px;} #a3 .scon6 .titwrap h2 span {color: #f58323;} #a3 .scon6 .txtwrap {padding: 30px; background-color: #fff5ec; font-size: 18px; line-height: 1.7; color: #666;} #a3 .scon7 .medibox {margin-bottom: 50px;} #a3 .scon7 .medibox:last-child {margin-bottom: 0;} #a3 .scon7 .medibox .meditit {text-align: center; margin-bottom: 50px;} #a3 .scon7 .medibox .meditit h3 {font-size: 16px; font-weight: 400; letter-spacing: 5px; color: #f58323; margin-bottom: 15px;} #a3 .scon7 .medibox .meditit h2 {font-size: 30px; margin-bottom: 20px;} #a3 .scon7 .medibox .mediprd {display: flex; flex-wrap: wrap;} #a3 .scon7 .medibox .mediprd .medi {width: 49%; margin-right: 2%; margin-top: 2%; background: linear-gradient(90deg,rgba(245, 131, 35, 1) 0%, rgba(255, 161, 84, 1) 100%); padding: 30px; color: #fff;} #a3 .scon7 .medibox .mediprd .medi:nth-child(2n) {margin-right: 0;} #a3 .scon7 .medibox .mediprd .medi:nth-child(-n+2) {margin-top: 0;} #a3 .scon7 .medibox .mediprd .medi h2 {font-size: 26px; margin-bottom: 5px;} #a3 .scon7 .medibox .mediprd .medi h3 {font-size: 18px; font-weight: 500;} #a3 .scon7 .medibox .mediprd .medi ul {margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.5)} #a3 .scon7 .medibox .mediprd .medi ul li {font-size: 16px; line-height: 1.7; margin-bottom: 10px;} #a3 .scon7 .medibox .mediprd .medi ul li:last-child {margin-bottom: 0;} #a3 .scon7 .medibox:nth-child(2) .mediprd .medi {width: 100%; margin-right: 0;} #a3 .scon7 .medibox:nth-child(5) .mediprd .medi {width: 100%; margin-right: 0;} #a3 .scon8 .titwrap {text-align: center;} #a3 .scon8 .titwrap h3 {font-size: 16px; font-weight: 400; letter-spacing: 5px; color: #f58323; margin-bottom: 15px;} #a3 .scon8 .titwrap h2 {font-size: 30px; margin-bottom: 20px;} #a3 .scon8 table {width: 100%; border-collapse: collapse;} #a3 .scon8 table th {background-color: #f58323; padding: 20px; text-align: center; color: #fff; font-size: 18px; border-right: 1px solid rgba(255,255,255,.3);} #a3 .scon8 table th:last-child {border-right: 0;} #a3 .scon8 table td {border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 20px; font-size: 18px;} #a3 .scon8 table td:last-child { border-right: 0;} #a3 .scon9 h3 {font-size: 24px; text-align: center; line-height: 1.7; font-weight: 500;} #a3 .scon9 .line {margin: 30px auto; width: 1px; height: 50px; background-color: #ddd;} #a3 .scon9 p {font-size: 15px; text-align: center; color: #666;} #a3 .scon10 {text-align: center;} #a3 .scon10 .titwrap {margin-bottom: 80px;} #a3 .scon10 .titwrap h2 span {color: #f58323;} #a3 .scon10 ul li.hover .q_box {color: #f58323;} #a3 .scon10 ul li.open .q_box {color: #f58323;} @media screen and (max-width: 960px) { #a3 .scon1 .titwrap h2 span {font-size: 30px;} #a3 .scon1 .btnwrap li a {font-size: 16px;} #a3 .scon2 .section-head p.section-tag {font-size: 18px;} #a3 .scon2 .section-head h2 {font-size: 26px;} #a3 .scon2 .section-head p.section-desc {font-size: 18px;} #a3 .scon2 .quiz {padding: 40px;} #a3 .scon2 .quiz .quiz-progress {margin-bottom: 40px;} #a3 .scon2 .quiz .quiz-step .quiz-q {font-size: 20px;} #a3 .scon2 .quiz .quiz-step .quiz-options {flex-direction: column;} #a3 .scon2 .quiz .quiz-step .quiz-options button {font-size: 15px; width: 100%; margin-top: 15px;} #a3 .scon2 .quiz .quiz-step .quiz-options button:first-child {margin-top: 0;} #a3 .scon2 .quiz .quiz-step .quiz-options.three button {width: 100%;} #a3 .scon2 .quiz .quiz-step .quiz-options button strong {font-size: 18px;} #a3 .scon2 .result .slip-title {font-size: 26px;} #a3 .scon2 .result .slip-sub {font-size: 16px;} #a3 .scon2 .result .slip-grid .slip-block h3 {font-size: 18px;} #a3 .scon2 .result .slip-grid .slip-block ul li {font-size: 15px;} #a3 .scon2 .result .slip-grid .slip-block .slip-cross {font-size: 14px;} #a3 .scon2 .result .slip-note {font-size: 15px;} #a3 .scon2 .result .slip-actions a {font-size: 15px;} #a3 .scon3 {padding: 100px 0;} #a3 .scon3 .titwrap h3 {font-size: 15px;} #a3 .scon3 .titwrap h2 {font-size: 26px;} #a3 .scon3 .inboxwrap .intxt h3 {font-size: 20px;} #a3 .scon3 .inboxwrap .intxt h3 span {font-size: 15px;} #a3 .scon3 .inboxwrap .innerbox {flex-direction: column;} #a3 .scon3 .inboxwrap .inbox {width: 100%; padding: 40px; margin-top: 15px;} #a3 .scon3 .inboxwrap .inbox:first-child {margin-top: 0;} #a3 .scon3 .inboxwrap .inbox span.badge {font-size: 16px;} #a3 .scon3 .inboxwrap .inbox span.opt-label {font-size: 15px;} #a3 .scon3 .inboxwrap .inbox h3 {font-size: 25px;} #a3 .scon3 .inboxwrap .inbox .card-sub {font-size: 16px;} #a3 .scon3 .inboxwrap .inbox ul {margin-top: 20px;} #a3 .scon3 .inboxwrap .inbox ul li h4 {font-size: 16px;} #a3 .scon3 .inboxwrap .inbox ul li p {font-size: 15px;} #a3 .scon3 .inboxwrap .inbox .btnwrap {margin-top: 40px;} #a3 .scon3 .inboxwrap .inbox .btnwrap a {font-size: 15px;} #a3 .scon3 .inboxwrap2 .inbox {width: 100%;} #a3 .scon4 h3 {font-size: 20px;} #a3 .scon6 .txtwrap {font-size: 16px} #a3 .scon7 .medibox .meditit {margin-bottom: 40px;} #a3 .scon7 .medibox .meditit h3 {font-size: 15px;} #a3 .scon7 .medibox .meditit h2 {font-size: 26px;} #a3 .scon7 .medibox .mediprd .medi {width: 100%; margin-right: 0;} #a3 .scon7 .medibox .mediprd .medi:nth-child(-n+2) {margin-top: 2%;} #a3 .scon7 .medibox .mediprd .medi:first-child {margin-top: 0;} #a3 .scon7 .medibox .mediprd .medi h2 {font-size: 22px;} #a3 .scon7 .medibox .mediprd .medi h3 {font-size: 16px;} #a3 .scon7 .medibox .mediprd .medi ul li {font-size: 15px;} #a3 .scon8 .titwrap h3 {font-size: 15px;} #a3 .scon8 .titwrap h2 {font-size: 26px;} #a3 .scon8 table th {font-size: 16px; padding: 15px;} #a3 .scon8 table td {font-size: 16px; padding: 15px;} #a3 .scon9 h3 {font-size: 20px;} #a3 .scon10 .titwrap {margin-bottom: 60px;} } @media screen and (max-width: 640px) { #a3 .scon1 .titwrap h2 span {font-size: 24px;} #a3 .scon1 .btnwrap li a {font-size: 14px;} #a3 .scon2 .section-head p.section-tag {font-size: 16px;} #a3 .scon2 .section-head h2 {font-size: 22px;} #a3 .scon2 .section-head p.section-desc {font-size: 16px;} #a3 .scon2 .quiz {padding: 30px;} #a3 .scon2 .quiz .quiz-progress {margin-bottom: 30px;} #a3 .scon2 .quiz .quiz-progress #progressLabel {font-size: 13px;} #a3 .scon2 .quiz .quiz-step .quiz-q {font-size: 18px;} #a3 .scon2 .quiz .quiz-step .quiz-options button {font-size: 14px;} #a3 .scon2 .quiz .quiz-step .quiz-options button strong {font-size: 16px;} #a3 .scon3 {padding: 80px 0;} #a3 .scon3 .titwrap h3 {font-size: 14px;} #a3 .scon3 .titwrap h2 {font-size: 22px;} #a3 .scon3 .inboxwrap .intxt h3 {font-size: 18px;} #a3 .scon3 .inboxwrap .intxt h3 span {font-size: 14px;} #a3 .scon3 .inboxwrap .inbox {padding: 30px;} #a3 .scon3 .inboxwrap .inbox span.badge {font-size: 14px;} #a3 .scon3 .inboxwrap .inbox span.opt-label {font-size: 14px;} #a3 .scon3 .inboxwrap .inbox h3 {font-size: 20px;} #a3 .scon3 .inboxwrap .inbox .card-sub {font-size: 14px;} #a3 .scon3 .inboxwrap .inbox ul li h4 {font-size: 15px;} #a3 .scon3 .inboxwrap .inbox ul li p {font-size: 14px;} #a3 .scon3 .inboxwrap .inbox .btnwrap {margin-top: 30px;} #a3 .scon3 .inboxwrap .inbox .btnwrap a {font-size: 14px;} #a3 .scon4 h3 {font-size: 18px;} #a3 .scon6 .txtwrap {font-size: 14px;} #a3 .scon7 .medibox .meditit {margin-bottom: 30px;} #a3 .scon7 .medibox .meditit h3 {font-size: 15px;} #a3 .scon7 .medibox .meditit h2 {font-size: 22px;} #a3 .scon7 .medibox .mediprd .medi h2 {font-size: 18px;} #a3 .scon7 .medibox .mediprd .medi h3 {font-size: 14px;} #a3 .scon7 .medibox .mediprd .medi ul {margin-top: 15px; padding-top: 15px;} #a3 .scon7 .medibox .mediprd .medi ul li {font-size: 14px;} #a3 .scon8 .titwrap h3 {font-size: 14px;} #a3 .scon8 .titwrap h2 {font-size: 22px;} #a3 .scon8 table th {font-size: 14px; padding: 10px;} #a3 .scon8 table td {font-size: 14px; padding: 10px;} #a3 .scon9 h3 {font-size: 18px;} #a3 .scon10 .titwrap {margin-bottom: 50px;} } /* a3 */ /* a4 */ #a4 .tab_btns button {width: 24%; border: 1px solid #f58323; color: #f58323} #a4 .tab_btns button.active {background-color: #f58323; color: #fff;} #a4 .result {max-width: 100%; width: 100%; padding: 120px 0; background-color: #f5f5f5;} #a4 .result .resultwrap {max-width: 1640px; margin: 0 auto; padding: 0 20px;} #a4 .result .resultwrap .resulttit {margin-bottom: 30px;} #a4 .result .resultwrap .resulttit h3 {font-size: 30px; margin-bottom: 10px;} #a4 .result .resultwrap .resulttit p {font-size: 20px; line-height: 1.7; color: #666;} #a4 .result .resultwrap .resultbox {display: flex; justify-content: space-between;} #a4 .result .resultwrap .resultbox .r_box {width: 32.333%; background-color: #fff; padding: 50px; position: relative;} #a4 .result .resultwrap .resultbox .r_box::after {position: absolute; content: ''; width: 100%; height: 4px; background-color: #f58323; top: 0; left: 0;} #a4 .result .resultwrap .resultbox .r_box .icon {margin-bottom: 20px;} #a4 .result .resultwrap .resultbox .r_box h2 {font-size: 26px; margin-bottom: 20px;} #a4 .result .resultwrap .resultbox .r_box .babox {display: flex;justify-content: space-between;align-items: center;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba h4 {font-size: 16px; color: #666; font-weight: 400; margin-bottom: 5px;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba h3 {font-size: 22px; color: #ffb271; font-weight: 400;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba.bold h3 {color: #121212; font-weight: 700; font-size: 28px;} #a4 .result .resultwrap .resultbox .r_box ul li {font-size: 16px; border-bottom: 1px dashed #ddd; margin-bottom: 10px; padding-bottom: 10px; display: flex; align-items: center;} #a4 .result .resultwrap .resultbox .r_box ul li:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: 0;} #a4 .result .resultwrap .resultbox .r_box ul li span {width: 6px; height: 6px; border-radius: 50%; background-color: #f58323; display: block; margin-right: 10px;} #a4 .effect .effectwrap .e_box {width: 50%} #a4 .effect .effectwrap .e_box i {color: #f58323; background-color: #fff5ec; } #a4 .review .reviewwrap {display: flex; justify-content: space-between;} #a4 .review .reviewwrap li {width: 49%; border: 1px solid #eee;} #a4 .review .reviewwrap li img {max-width: 960px; width: 100%;} #a4 .bds .bdswrap {display: flex; justify-content: space-between;} #a4 .bds .bdswrap .b_box {width: 24%; border: 1px solid #f58323; padding: 30px; text-align: center; filter: grayscale(1); opacity: .5;} #a4 .bds .bdswrap .b_box h4 {font-size: 18px; width: 30px; height: 30px; border-radius: 50%; background-color: #f58323; color: #fff; line-height: 30px; margin: 0 auto 30px;} #a4 .bds .bdswrap .b_box h2 {font-size: 26px; margin-bottom: 15px;} #a4 .bds .bdswrap .b_box ul li {font-size: 16px; color: #666; margin-bottom: 5px;} #a4 .bds .bdswrap .b_box ul li:last-child {margin-bottom: 0;} #a4 .caution ul li {width: 100%; border: 1px solid #ddd; padding: 30px; margin-bottom: 15px; font-size: 18px; line-height: 1.7;} #a4 .caution ul li:last-child {margin-bottom: 0; border-color: #ecbebe; background-color: #fff3f3;} #a4 .caution ul li:last-child b {color: #de0f0f;} #a4 .caution ul li span {width: 50px; height: 50px; background-color: #fffbf7; display: inline-block; border-radius: 50%; color: #f58323; margin-right: 20px; font-size: 24px; text-align: center;} #a4 .caution ul li:last-child span {color: #de0f0f;} #a4 .caution ul li span i {line-height: 45px;} @media screen and (max-width: 960px) { #a4 .result {padding: 100px 0;} #a4 .result .resultwrap .resulttit h3 {font-size: 24px;} #a4 .result .resultwrap .resulttit p {font-size: 18px;} #a4 .result .resultwrap .resultbox {flex-direction: column;} #a4 .result .resultwrap .resultbox .r_box {width: 100%; margin-top: 15px; padding: 40px;} #a4 .result .resultwrap .resultbox .r_box:first-child {margin-top: 0;} #a4 .result .resultwrap .resultbox .r_box h2 {font-size: 22px;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba h4 {font-size: 15px;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba h3 {font-size: 20px;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba.bold h3 {font-size: 26px;} #a4 .result .resultwrap .resultbox .r_box ul li {font-size: 15px;} #a4 .review .reviewwrap {flex-direction: column;} #a4 .review .reviewwrap li {width: 100%; margin-top: 15px;} #a4 .review .reviewwrap li:first-child {margin-top: 0;} #a4 .bds .bdswrap {flex-wrap: wrap;} #a4 .bds .bdswrap .b_box {width: 49%; margin-top: 2%;} #a4 .bds .bdswrap .b_box:nth-child(-n+2) {margin-top: 0;} #a4 .bds .bdswrap .b_box h4 {margin: 0 auto 20px; font-size: 16px;} #a4 .bds .bdswrap .b_box h2 {font-size: 22px;} #a4 .bds .bdswrap .b_box ul li {font-size: 15px;} #a4 .caution ul li {font-size: 16px;} #a4 .caution ul li span {width: 40px; height: 40px; font-size: 20px;} #a4 .caution ul li span i {line-height: 40px;} } @media screen and (max-width: 640px) { #a4 .result .resultwrap .resulttit {margin-bottom: 20px;} #a4 .result .resultwrap .resulttit h3 {font-size: 20px;} #a4 .result .resultwrap .resulttit p {font-size: 16px;} #a4 .result .resultwrap .resultbox .r_box h2 {font-size: 20px;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba h4 {font-size: 14px;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba h3 {font-size: 18px;} #a4 .result .resultwrap .resultbox .r_box .babox > div.ba.bold h3 {font-size: 22px;} #a4 .result .resultwrap .resultbox .r_box ul li {font-size: 14px;} #a4 .bds .bdswrap .b_box {width: 100%;} #a4 .bds .bdswrap .b_box:nth-child(-n+2) {margin-top: 2%;} #a4 .bds .bdswrap .b_box:first-child {margin-top: 0;} #a4 .effect .effectwrap .e_box {width: 100%;} #a4 .caution ul li {padding: 20px;} } /* a4 */ /* a5 */ #a5 .tab_btns button {width: 13.285%; border: 1px solid #f58323; color: #f58323;} #a5 .tab_btns button.active {background-color: #f58323; color: #fff;} #a5 .scon {max-width: 1640px; padding: 0 20px; width: 100%;} #a5 .scon:last-child {margin-bottom: 0;} #a5 .scon .titwrap {margin-bottom: 40px;} #a5 .scon1 .movwrap {margin-bottom: 50px;} #a5 .scon1 .txtwrap {text-align: center;} #a5 .scon1 .txtwrap h3 {font-size: 30px; margin-bottom: 15px;} #a5 .scon1 .txtwrap p {font-size: 18px; line-height: 1.7; color: #666;} #a5 .scon2 .inboxwrap {display: flex; flex-wrap: wrap; margin-bottom: 20px;} #a5 .scon2 .inboxwrap .inbox {background-color: #fff6ed; padding: 30px; width: 32.333%; margin-right: 1.5%; margin-top: 1.5%;} #a5 .scon2 .inboxwrap .inbox:nth-child(3n) {margin-right: 0;} #a5 .scon2 .inboxwrap .inbox:nth-child(-n+3) {margin-top: 0;} #a5 .scon2 .inboxwrap .inbox h5 {font-size: 16px; color: #f58323; margin-bottom: 20px;} #a5 .scon2 .inboxwrap .inbox h2 {font-size: 20px;} #a5 .scon2 .inboxwrap .inbox p {margin-top: 10px; font-size: 18px; color: #666; line-height: 1.7;} #a5 .scon2 .inboxwrap .inbox ul li {font-size: 18px; line-height: 1.7; color: #666; margin-bottom: 5px;} #a5 .scon2 .inboxwrap .inbox ul li:last-child {margin-bottom: 0;} #a5 .scon2 .inboxwrap .inbox ul li span {font-weight: 700; color: #121212; margin-right: 10px;} #a5 .scon2 .methodwrap {display: flex; justify-content: space-between; position: relative;} #a5 .scon2 .methodwrap::after {position: absolute; content: ''; width: 100%; height: 1px; background-color: #ddd; top: 50%; z-index: -1;} #a5 .scon2 .methodwrap li {width: 19%; border: 1px solid #ddd; background-color: #f5f5f5; font-size: 18px; padding: 20px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; color: #666;} #a5 .scon3 .procedurewrap .p_box h3 {background-color: #f58323;} #a5 .scon4 .tab_group .titbox {text-align: center; margin-bottom: 40px;} #a5 .scon4 .tab_group .titbox h4 {font-size: 16px; color: #fff; background-color: #f58323; display: inline-block; padding: 10px 20px; border-radius: 22px; margin-bottom: 20px;} #a5 .scon4 .tab_group .titbox h3 {font-size: 30px; line-height: 1.7;} #a5 .scon4 .reviewwrap .an_box {margin-bottom: 20px; padding: 30px; background-color: #f8e9e2; text-align: center;} #a5 .scon4 .reviewwrap .an_box h3 {font-size: 24px; margin-bottom: 10px; color: #c14f19;} #a5 .scon4 .reviewwrap .an_box p {font-size: 18px; line-height: 1.7;} #a5 .scon4 .reviewwrap .review {display: flex; justify-content: space-between;} #a5 .scon4 .reviewwrap .review .r_box {width: 32.333%; padding: 30px;} #a5 .scon4 .reviewwrap .review .r_box .prize {font-size: 16px; margin-bottom: 20px; font-weight: 700;} #a5 .scon4 .reviewwrap .review .r_box .prize span {width: 25px; height: 25px; border-radius: 50%; display: inline-block; color: #fff; font-weight: 400; text-align: center; line-height: 25px; margin-right: 5px;} #a5 .scon4 .reviewwrap .review .r_box h2 {font-size: 20px; margin-bottom: 10px;} #a5 .scon4 .reviewwrap .review .r_box h3 {font-size: 16px; color: #b5643f;} #a5 .scon4 .reviewwrap .review .r_box p {font-size: 18px; line-height: 1.7; margin-top: 15px; color: #666;} #a5 .scon4 .reviewwrap .review .r_box .btnwrap {margin-top: 30px;} #a5 .scon4 .reviewwrap .review .r_box .btnwrap a {border: 1px solid #121212; padding: 10px 20px; font-size: 16px; display: inline-block; border-radius: 22px; transition-duration: 0.3s;} #a5 .scon4 .reviewwrap .review .r_box .btnwrap a:hover {background-color: #121212; color: #fff;} #a5 .scon4 .reviewwrap .review .r_box.r_box1 {background-color: #fffdf3;} #a5 .scon4 .reviewwrap .review .r_box.r_box1 .prize {color: #c9a227;} #a5 .scon4 .reviewwrap .review .r_box.r_box1 .prize span {background-color: #c9a227;} #a5 .scon4 .reviewwrap .review .r_box.r_box2 {background-color: #f5f5f5;} #a5 .scon4 .reviewwrap .review .r_box.r_box2 .prize {color: #999;} #a5 .scon4 .reviewwrap .review .r_box.r_box2 .prize span {background-color: #999;} #a5 .scon4 .reviewwrap .review .r_box.r_box3 {background-color: #f7e9db;} #a5 .scon4 .reviewwrap .review .r_box.r_box3 .prize {color: #b0763e;} #a5 .scon4 .reviewwrap .review .r_box.r_box3 .prize span {background-color: #b0763e;} #a5 .scon4 .reviewwrap .r_btn {margin-top: 40px; display: flex; justify-content: center;} #a5 .scon4 .reviewwrap .r_btn a {font-size: 18px; color: #666; font-weight: 500; position: relative;} #a5 .scon4 .reviewwrap .r_btn a::after {position: absolute; content: ''; width: 0; height: 1px; background-color: #666; bottom: -5px; left: 0; transition-duration: 0.3s;} #a5 .scon4 .reviewwrap .r_btn a:hover::after {width: 100%;} #a5 .scon5 .solvewrap {margin-bottom: 30px;} #a5 .scon5 .solvewrap .s_box {border-bottom: 1px solid #ddd; display: flex; align-items: center; padding: 30px;} #a5 .scon5 .solvewrap .s_box:first-child {border-top: 1px solid #ddd;} #a5 .scon5 .solvewrap .s_box h3 {color: #f58323; font-size: 30px; width: 5%;} #a5 .scon5 .solvewrap .s_box .txtbox {display: flex; justify-content: space-between; align-items: center; width: 95%;} #a5 .scon5 .solvewrap .s_box .txtbox h2 {font-size: 24px;} #a5 .scon5 .solvewrap .s_box .txtbox p {font-size: 18px; color: #666;} #a5 .scon5 .s_txt {font-size: 18px; line-height: 1.7; color: #666; text-align: center;} #a5 .scon6 .exwrap {display: flex; justify-content: space-between;} #a5 .scon6 .exwrap .e_box {width: 50%; border-right: 1px solid #ddd; padding: 30px; text-align: center;} #a5 .scon6 .exwrap .e_box:last-child {border-right: 0;} #a5 .scon6 .exwrap .e_box span {display: inline-block; margin-bottom: 30px;} #a5 .scon6 .exwrap .e_box span i {font-size: 30px; background-color: #f8e9e2; border-radius: 50%; color: #f58323; width: 70px; height: 70px; line-height: 70px;} #a5 .scon6 .exwrap .e_box h2 {font-size: 30px; margin-bottom: 10px; color: #f58323;} #a5 .scon6 .exwrap .e_box h3 {font-size: 24px; font-weight: 500; margin-bottom: 10px;} #a5 .scon6 .exwrap .e_box p {font-size: 18px; line-height: 1.7; color: #666;} #a5 .scon7 {max-width: 100%; background-color: #f58323; padding: 120px 0; background-image: url(../html/img/a5_bg.jpg);} #a5 .scon7 .subtitwrap {color: #fff;} #a5 .scon7 .appwrap {max-width: 1640px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between;} #a5 .scon7 .appwrap .a_box {width: 32.333%; background-color: #fff; padding: 30px;} #a5 .scon7 .appwrap .a_box h5 {font-size: 16px; color: #f58323; margin-bottom: 50px; font-weight: 400;} #a5 .scon7 .appwrap .a_box h4 {font-size: 26px; margin-bottom: 10px;} #a5 .scon7 .appwrap .a_box p {font-size: 18px; line-height: 1.7; color: #666;} #a5 .scon7 .kakaobtn {max-width: 1640px; margin: 50px auto 0; padding: 0 20px; display: flex; justify-content: center;} #a5 .scon7 .kakaobtn a {color: #fff; font-size: 20px; text-align: center; border: 1px solid #fff; padding: 15px 25px; border-radius: 28px; transition-duration: 0.3s;} #a5 .scon7 .kakaobtn a:hover {background-color: #fff; color: #f58323;} @media screen and (max-width: 960px) { #a5 .scon {margin-bottom: 100px;} #a5 .scon1 .txtwrap h3 {font-size: 24px;} #a5 .scon1 .txtwrap p {font-size: 16px;} #a5 .scon2 .inboxwrap .inbox {width: 49%; margin-right: 2%;} #a5 .scon2 .inboxwrap .inbox:nth-child(-n+3) {margin-top: 2%;} #a5 .scon2 .inboxwrap .inbox:nth-child(-n+2) {margin-top: 0;} #a5 .scon2 .inboxwrap .inbox:nth-child(3n) {margin-right: 2%;} #a5 .scon2 .inboxwrap .inbox:nth-child(2n) {margin-right: 0;} #a5 .scon2 .inboxwrap .inbox h2 {font-size: 18px;} #a5 .scon2 .inboxwrap .inbox p {font-size: 16px;} #a5 .scon2 .inboxwrap .inbox ul li {font-size: 16px;} #a5 .scon2 .methodwrap li {font-size: 16px;} #a5 .scon4 .tab_group .titbox {margin-bottom: 30px;} #a5 .scon4 .tab_group .titbox h4 {font-size: 15px;} #a5 .scon4 .tab_group .titbox h3 {font-size: 26px;} #a5 .scon4 .reviewwrap .review .r_box h2 {font-size: 18px;} #a5 .scon4 .reviewwrap .review .r_box h3 {font-size: 15px;} #a5 .scon4 .reviewwrap .review .r_box h3 {font-size: 16px;} #a5 .scon4 .reviewwrap .review .r_box .btnwrap a {font-size: 15px;} #a5 .scon4 .reviewwrap .r_btn a {font-size: 16px;} #a5 .scon4 .reviewwrap .an_box h3 {font-size: 20px;} #a5 .scon4 .reviewwrap .an_box p {font-size: 16px;} #a5 .scon5 .solvewrap .s_box h3 {font-size: 26px;} #a5 .scon5 .solvewrap .s_box .txtbox h2 {font-size: 20px;} #a5 .scon5 .solvewrap .s_box .txtbox p {font-size: 16px;} #a5 .scon5 .s_txt {font-size: 16px;} #a5 .scon6 .exwrap .e_box span {margin-bottom: 20px;} #a5 .scon6 .exwrap .e_box span i {font-size: 26px; width: 60px; height: 60px; line-height: 60px;} #a5 .scon6 .exwrap .e_box h2 {font-size: 26px;} #a5 .scon6 .exwrap .e_box h3 {font-size: 20px;} #a5 .scon6 .exwrap .e_box p {font-size: 16px;} #a5 .scon7 {padding: 100px 0;} #a5 .scon7 .appwrap .a_box h5 {font-size: 15px; margin-bottom: 40px;} #a5 .scon7 .appwrap .a_box h4 {font-size: 22px;} #a5 .scon7 .appwrap .a_box p {font-size: 16px;} #a5 .scon7 .kakaobtn {margin-top: 40px;} #a5 .scon7 .kakaobtn a {font-size: 18px;} } @media screen and (max-width: 640px) { #a5 .scon {margin-bottom: 80px;} #a5 .scon1 .txtwrap h3 {font-size: 20px;} #a5 .scon1 .txtwrap p {font-size: 14px;} #a5 .scon2 .inboxwrap .inbox {width: 100%; margin-right: 0; padding: 20px;} #a5 .scon2 .inboxwrap .inbox:nth-child(-n+2) {margin-top: 2%;} #a5 .scon2 .inboxwrap .inbox:first-child {margin-top: 0;} #a5 .scon2 .inboxwrap .inbox:nth-child(3n) {margin-right: 0;} #a5 .scon2 .inboxwrap .inbox h5 {font-size: 14px; margin-bottom: 15px;} #a5 .scon2 .inboxwrap .inbox h2 {font-size: 16px;} #a5 .scon2 .inboxwrap .inbox p {font-size: 14px;} #a5 .scon2 .inboxwrap .inbox ul li {font-size: 14px;} #a5 .scon2 .methodwrap {flex-direction: column;} #a5 .scon2 .methodwrap li {width: 100%; font-size: 14px; padding: 15px; margin-bottom: 15px;} #a5 .scon2 .methodwrap li:last-child {margin-bottom: 0;} #a5 .scon2 .methodwrap::after {width: 1px; height: 100%; top: 0; left: 50%;} #a5 .scon4 .tab_group .titbox h4 {font-size: 14px;} #a5 .scon4 .tab_group .titbox h3 {font-size: 22px;} #a5 .scon4 .reviewwrap .review {flex-direction: column;} #a5 .scon4 .reviewwrap .review .r_box {width: 100%; padding: 20px; margin-bottom: 15px;} #a5 .scon4 .reviewwrap .review .r_box:last-child {margin-bottom: 0;} #a5 .scon4 .reviewwrap .review .r_box .prize {font-size: 14px;} #a5 .scon4 .reviewwrap .review .r_box h2 {font-size: 16px;} #a5 .scon4 .reviewwrap .review .r_box h3 {font-size: 14px;} #a5 .scon4 .reviewwrap .review .r_box p {font-size: 16px;} #a5 .scon4 .reviewwrap .review .r_box .btnwrap {margin-top: 20px;} #a5 .scon4 .reviewwrap .review .r_box .btnwrap a {font-size: 14px;} #a5 .scon4 .reviewwrap .an_box h3 {font-size: 18px;} #a5 .scon4 .reviewwrap .an_box p {font-size: 14px;} #a5 .scon4 .reviewwrap .r_btn {margin-top: 30px;} #a5 .scon5 .solvewrap .s_box {padding: 20px;} #a5 .scon5 .solvewrap .s_box h3 {font-size: 20px; margin-right: 10px;} #a5 .scon5 .solvewrap .s_box .txtbox h2 {font-size: 18px;} #a5 .scon5 .solvewrap .s_box .txtbox p {font-size: 14px;} #a5 .scon5 .s_txt {font-size: 14px;} #a5 .scon6 .exwrap {flex-direction: column;} #a5 .scon6 .exwrap .e_box {width: 100%; border-bottom: 1px solid #ddd; border-right: 0;} #a5 .scon6 .exwrap .e_box:last-child {border-bottom: 0;} #a5 .scon6 .exwrap .e_box span i {font-size: 22px; width: 50px; height: 50px; line-height: 50px;} #a5 .scon6 .exwrap .e_box h2 {font-size: 20px;} #a5 .scon6 .exwrap .e_box h3 {font-size: 18px;} #a5 .scon6 .exwrap .e_box p {font-size: 14px;} #a5 .scon7 {padding: 80px 0;} #a5 .scon7 .appwrap .a_box {width: 100%; padding: 20px; margin-bottom: 15px;} #a5 .scon7 .appwrap .a_box:last-child {margin-bottom: 0;} #a5 .scon7 .appwrap .a_box h5 {font-size: 14px; margin-bottom: 30px;} #a5 .scon7 .appwrap .a_box h4 {font-size: 18px;} #a5 .scon7 .appwrap .a_box p {font-size: 14px;} #a5 .scon7 .kakaobtn {margin-top: 30px;} #a5 .scon7 .kakaobtn a {font-size: 16px;} } /* a5 */ /* a6 */ #a6 .scon {max-width: 1640px; padding: 0 20px;} #a6 .scon2 .inboxwrap {display: flex; justify-content: space-between;} #a6 .scon2 .inboxwrap .inbox {width: 49%; border: 1px solid #f58323; padding: 30px;} #a6 .scon2 .inboxwrap .inbox h5 {font-size: 14px; font-weight: 400; margin-bottom: 20px; color: #f58323;} #a6 .scon2 .inboxwrap .inbox h2 {font-size: 24px; margin-bottom: 10px;} #a6 .scon2 .inboxwrap .inbox p {font-size: 18px; line-height: 1.7; color: #666;} #a6 .scon3 {background-color: #f7f7f7; max-width: 100%; width: 100%; padding: 120px 20px;} #a6 .scon3 .processwrap .iconwrap li {width: 25%;} #a6 .scon3 .processwrap .deco .dots .dotbox {width: 25%;} #a6 .scon3 .processwrap .deco .dots .dotbox .dot {background-color: #f58323;} #a6 .scon3 .processwrap .txtwrap .txt {width: 25%;} #a6 .scon4 .btnwrap {display: flex; justify-content: center;} #a6 .scon4 .btnwrap li {margin-right: 10px;} #a6 .scon4 .btnwrap li:last-child {margin-right: 0;} #a6 .scon4 .btnwrap li a {padding: 10px 20px; font-size: 18px; color: #fff; border-radius: 23px; transition-duration: 0.3s; display: inline-block;} #a6 .scon4 .btnwrap li:first-child a {border: 1px solid #00c73d; color: #00c73d;} #a6 .scon4 .btnwrap li:first-child a:hover {background-color: #00c73d; color: #fff;} #a6 .scon4 .btnwrap li:last-child a {border: 1px solid #425cd3; color: #425cd3;} #a6 .scon4 .btnwrap li:last-child a:hover {background-color: #425cd3; color: #fff;} #a6 .scon5 {text-align: center;} #a6 .scon5 ul li.hover .q_box {color: #f58323;} #a6 .scon5 ul li.open .q_box {color: #f58323;} @media screen and (max-width: 960px) { #a6 .scon2 .inboxwrap .inbox h2 {font-size: 20px;} #a6 .scon2 .inboxwrap .inbox p {font-size: 16px;} #a6 .scon3 {padding: 100px 20px;} #a6 .scon4 .btnwrap li a {font-size: 16px;} } @media screen and (max-width: 640px) { #a6 .scon2 .inboxwrap {flex-direction: column;} #a6 .scon2 .inboxwrap .inbox {width: 100%; padding: 20px; margin-bottom: 15px;} #a6 .scon2 .inboxwrap .inbox:last-child {margin-bottom: 0;} #a6 .scon2 .inboxwrap .inbox h2 {font-size: 18px;} #a6 .scon2 .inboxwrap .inbox p {font-size: 14px;} #a6 .scon3 .processwrap .iconwrap li {height: 25%; width: auto;} #a6 .scon3 .processwrap .deco .dots .dotbox {height: 25%; width: auto;} #a6 .scon3 .processwrap .txtwrap .txt {height: 25%; width: auto; text-align: left; align-items: flex-start;} #a6 .scon4 .btnwrap li a {font-size: 14px;} } /* a6 */ /* b1 */ #b1 .scon {max-width: 1640px; padding: 0 20px; width: 100%;} #b1 .scon:last-child {margin-bottom: 0;} #b1 .scon .titwrap h4 {color: #59c1c1;} #b1 .scon .titwrap h2 {color: #00a6a6;} #b1 .scon2 {max-width: 100%; padding: 120px 20px; background-image: url(../html/img/b1_bg.jpg);} #b1 .scon2 .imgwrap {margin-bottom: 50px;} #b1 .scon2 .imgwrap img {margin: 0 auto; width: 100%; display: block; max-width: 1243px;} #b1 .scon2 .txtwrap {display: flex; flex-direction: column; align-items: center;} #b1 .scon2 .txtwrap li {margin-bottom: 15px; font-size: 20px; display: flex; align-items: center;} #b1 .scon2 .txtwrap li:last-child {margin-bottom: 0;} #b1 .scon2 .txtwrap li span {margin-right: 20px; display: flex;} #b1 .scon2 .txtwrap li span img {height: 25px;} #b1 .scon2 .txtwrap li b {display: contents;} #b1 .scon4 .twrap table {width: 100%; border-collapse: collapse; border-top: 2px solid #00a6a6;} #b1 .scon4 .twrap table th {padding: 20px; font-size: 24px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;} #b1 .scon4 .twrap table th:nth-child(2) {background-color: #f5f5f5;} #b1 .scon4 .twrap table th:last-child {border-right: 0; background-color: #59c1c1; color: #fff;} #b1 .scon4 .twrap table td {text-align: center; padding: 20px; font-size: 21px; color: #666; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;} #b1 .scon4 .twrap table td:nth-child(2) {background-color: #f5f5f5; font-weight: 500;} #b1 .scon4 .twrap table td:last-child {border-right: 0; background-color: #ebf5f5; color: #00a6a6 ; font-weight: 500; font-size: 20px;} #b1 .scon6 .processwrap .iconwrap li {width: 33.333%;} #b1 .scon6 .processwrap .dots .dotbox {width: 33.333%;} #b1 .scon6 .processwrap .dots .dotbox .dot {background-color: #00a6a6;} #b1 .scon6 .processwrap .txtwrap .txt {width: 33.333%;} #b1 .scon7 .btnwrap {display: flex; justify-content: center; margin-top: 50px;} #b1 .scon7 .btnwrap a {color: #00a6a6; border: 1px solid #00a6a6; padding: 10px 20px; font-size: 18px; border-radius: 24px; transition-duration: 0.3s;} #b1 .scon7 .btnwrap a:hover {background-color: #00a6a6; color: #fff;} @media screen and (max-width: 960px) { #b1 .scon2 .txtwrap li {font-size: 18px;} #b1 .scon4 .twrap table th {font-size: 18px; padding: 15px;} #b1 .scon4 .twrap table td {padding: 15px; font-size: 16px;} #b1 .scon4 .twrap table td:last-child {font-size: 18px;} #b1 .scon7 .btnwrap a {font-size: 16px;} } @media screen and (max-width: 640px) { #b1 .scon2 .txtwrap li {font-size: 16px;} #b1 .scon6 .processwrap .iconwrap li {width: auto; height: 33.333%;} #b1 .scon6 .processwrap .dots .dotbox {width: auto; height: 33.333%;} #b1 .scon6 .processwrap .txtwrap .txt {width: auto; height: 33.333%;} #b1 .scon7 .btnwrap a {font-size: 16px;} } /* b1 */ /* b2 */ #b2 .tab_btns button {width: 32.333%; border: 1px solid #00a6a6; color: #00a6a6;} #b2 .tab_btns button.active {background-color: #00a6a6; color: #fff;} #b2 .scon .titwrap h4 {color: #59c1c1;} #b2 .scon .titwrap h2 {color: #00a6a6;} #b2 .scon1 .txtwrap p {text-align: center; font-size: 20px; line-height: 1.7; color: #666;} @media screen and (max-width: 960px) { #b2 .scon1 .txtwrap p {font-size: 18px;} } @media screen and (max-width: 640px) { #b2 .scon1 .txtwrap p {font-size: 16px;} } /* b2 */ /* b3 */ #b3 .tab_btns button {width: 32.333%; border: 1px solid #00a6a6; color: #00a6a6;} #b3 .tab_btns button.active {background-color: #00a6a6; color: #fff;} /* tab3 내 탭메뉴 css */ #b3 #tab3 .sub-tab li {border: 1px solid #121212;} #b3 #tab3 .sub-tab li.active {background-color: #121212;} #b3 .scon .titwrap h4 {color: #59c1c1;} #b3 .scon .titwrap h2 {color: #00a6a6;} /* tab1 */ #b3 .tab1 .scon2 .effectwrap .e_box {width: 33.333%;} #b3 .tab1 .scon2 .effectwrap .e_box .icon {background-color: #ebf5f5;} #b3 .tab1 .scon4 .jawrap {display: flex; justify-content: space-between;} #b3 .tab1 .scon4 .jawrap .imgwrap {width: 50%;} #b3 .tab1 .scon4 .jawrap .imgwrap img {width: 100%;} #b3 .tab1 .scon4 .jawrap .txtwrap {width: 45%; display: flex; justify-content: center; flex-direction: column;} #b3 .tab1 .scon4 .jawrap .txtwrap h2 {font-size: 30px; margin-bottom: 20px;} #b3 .tab1 .scon4 .jawrap .txtwrap p {font-size: 20px; line-height: 1.7; color: #666;} #b3 .tab1 .scon5 table {width: 100%; border-collapse: collapse; border-top: 2px solid #00a6a6;} #b3 .tab1 .scon5 table th {background-color: #ebf5f5; padding: 20px; color: #00a6a6; border-right: 1px solid #fff; font-size: 20px; font-weight: 500;} #b3 .tab1 .scon5 table th:first-child {color: #fff; background-color: #59c1c1;} #b3 .tab1 .scon5 table td {padding: 20px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 16px; text-align: center;} #b3 .tab1 .scon5 table td:first-child {background-color: #ebf5f5; color: #00a6a6; border-bottom: 1px solid #fff; font-size: 20px; font-weight: 500; text-align: center; border-right: 1px solid #fff;} #b3 .tab1 .scon5 table td:last-child {border-right: 0;} #b3 .tab1 .scon6 .reviewwrap {display: flex; justify-content: space-between;} #b3 .tab1 .scon6 .reviewwrap li {width: 49%; border: 1px solid #eee;} #b3 .tab1 .scon6 .reviewwrap li img {max-width: 960px; width: 100%;} #b3 .tab1 .scon7 .btnwrap {display: flex; justify-content: center; margin-top: 50px;} #b3 .tab1 .scon7 .btnwrap a {color: #00a6a6; border: 1px solid #00a6a6; padding: 10px 20px; font-size: 18px; border-radius: 24px; transition-duration: 0.3s;} #b3 .tab1 .scon7 .btnwrap a:hover {background-color: #00a6a6; color: #fff;} /* tab1 */ /* tab2 */ #b3 .tab2 .scon2 .habbitwrap {display: flex; justify-content: space-between;} #b3 .tab2 .scon2 .habbitwrap .h_box {width: 49%; border-radius: 10px; padding: 30px;} #b3 .tab2 .scon2 .habbitwrap .h_box:first-child {background-color: #fff3f3;} #b3 .tab2 .scon2 .habbitwrap .h_box:last-child {background-color: #ebf5f5;} #b3 .tab2 .scon2 .habbitwrap .h_box h3 {font-size: 24px; margin-bottom: 20px;} #b3 .tab2 .scon2 .habbitwrap .h_box:first-child h3 {color: #c96363;} #b3 .tab2 .scon2 .habbitwrap .h_box:last-child h3 {color: #00a6a6;} #b3 .tab2 .scon2 .habbitwrap .h_box ul li {font-size: 18px; line-height: 1.7; margin-bottom: 5px; padding-left: 15px; position: relative;} #b3 .tab2 .scon2 .habbitwrap .h_box ul li::after {position: absolute; content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: #121212; left: 0; top: 50%; transform: translateY(-50%);} #b3 .tab2 .scon2 .habbitwrap .h_box ul li:last-child {margin-bottom: 0;} #b3 .tab2 .scon3 .processwrap .iconwrap li {width: 25%;} #b3 .tab2 .scon3 .processwrap .dots .dotbox {width: 25%;} #b3 .tab2 .scon3 .processwrap .dots .dotbox .dot {background-color: #00a6a6;} #b3 .tab2 .scon3 .processwrap .txtwrap .txt {width: 25%;} #b3 .tab2 .scon3 .processwrap .txtwrap .txt h2 {margin-bottom: 0;} #b3 .tab2 .scon3 .processwrap .txtwrap .txt h2 span {color: #00a6a6;} #b3 .tab2 .scon5 .painwrap ul {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px;} #b3 .tab2 .scon5 .painwrap ul li {width: 49%; background-color: #f5f5f5; border: 1px solid #ddd; padding: 30px; font-size: 20px; margin-top: 2%;} #b3 .tab2 .scon5 .painwrap ul li:nth-child(-n+2) {margin-top: 0;} #b3 .tab2 .scon5 .painwrap ul li i {margin-right: 10px;} #b3 .tab2 .scon5 .painwrap p {text-align: center; font-size: 18px; color: #999;} #b3 .tab2 .scon6 .reviewwrap {display: flex; flex-wrap: wrap; justify-content: space-between;} #b3 .tab2 .scon6 .reviewwrap p {width: 49%;} #b3 .tab2 .scon7 ul li.hover .q_box {color: #00a6a6;} #b3 .tab2 .scon7 ul li.open .q_box {color: #00a6a6;} /* tab2 */ /* tab3 */ #b3 .tab3 .scon1 .machinewrap .imgwrap {border: 1px solid #ddd; margin-bottom: 30px;} #b3 .tab3 .scon1 .machinewrap .imgwrap img {width: 100%;} #b3 .tab3 .scon1 .machinewrap p {font-size: 20px; line-height: 1.7; text-align: center;} #b3 .tab3 .scon2 .imgwrap {display: flex; justify-content: space-between; margin-bottom: 30px;} #b3 .tab3 .scon2 .imgwrap li {width: 49%; border: 1px solid #ddd; display: flex; align-items: center; padding: 30px;} #b3 .tab3 .scon2 .imgwrap li img {width: 100%;} #b3 .tab3 .scon2 p {font-size: 20px; line-height: 1.7; text-align: center; color: #666;} #b3 .tab3 .scon3 .imgwrap {border: 1px solid #ddd; padding: 30px; display: flex; justify-content: center; align-items: center; margin-bottom: 30px;} #b3 .tab3 .scon3 .imgwrap img {width: 100%; max-width: 913px;} #b3 .tab3 .scon3 p {font-size: 20px; line-height: 1.7; text-align: center; color: #666;} #b3 .tab3 .scon6 .effectwrap .e_box {width: 33.333%;} #b3 .tab3 .scon6 .effectwrap .e_box .icon {background-color: #ebf5f5;} /* tab3 */ @media screen and (max-width: 960px) { /* tab1 */ #b3 .tab1 .scon4 .jawrap {flex-direction: column;} #b3 .tab1 .scon4 .jawrap .imgwrap {width: 100%; margin-bottom: 30px;} #b3 .tab1 .scon4 .jawrap .txtwrap {width: 100%; text-align: center;} #b3 .tab1 .scon4 .jawrap .txtwrap h2 {font-size: 24px; margin-bottom: 15px;} #b3 .tab1 .scon4 .jawrap .txtwrap p {font-size: 18px;} #b3 .tab1 .scon5 table th {font-size: 18px; padding: 15px;} #b3 .tab1 .scon5 table td {padding: 15px;} #b3 .tab1 .scon5 table td:first-child {font-size: 18px;} #b3 .tab1 .scon6 .reviewwrap {flex-direction: column;} #b3 .tab1 .scon6 .reviewwrap li {width: 100%; margin-top: 15px;} #b3 .tab1 .scon6 .reviewwrap li:first-child {margin-top: 0;} #b3 .tab1 .scon7 .btnwrap {margin-top: 40px;} #b3 .tab1 .scon7 .btnwrap a {font-size: 16px;} /* tab1 */ /* tab2 */ #b3 .tab2 .scon2 .habbitwrap .h_box:first-child h3 {font-size: 20px;} #b3 .tab2 .scon2 .habbitwrap .h_box ul li {font-size: 16px;} #b3 .tab2 .scon5 .painwrap ul li {font-size: 18px; padding: 20px;} #b3 .tab2 .scon5 .painwrap p {font-size: 16px;} /* tab2 */ /* tab3 */ #b3 .tab3 .scon1 .machinewrap p {font-size: 18px;} #b3 .tab3 .scon2 p {font-size: 18px;} #b3 .tab3 .scon3 p {font-size: 18px;} /* tab3 */ } @media screen and (max-width: 640px) { /* tab1 */ #b3 .tab1 .scon2 .effectwrap .e_box {width: 100%;} #b3 .tab1 .scon4 .jawrap .txtwrap h2 {font-size: 20px; margin-bottom: 10px;} #b3 .tab1 .scon4 .jawrap .txtwrap p {font-size: 16px;} #b3 .tab1 .scon5 table th {font-size: 16px; padding: 10px;} #b3 .tab1 .scon5 table td {padding: 10px; font-size: 14px;} #b3 .tab1 .scon5 table td:first-child {font-size: 16px;} #b3 .tab1 .scon7 .btnwrap {margin-top: 30px;} #b3 .tab1 .scon7 .btnwrap a {font-size: 14px;} /* tab1 */ /* tab2 */ #b3 .tab2 .scon2 .habbitwrap {flex-direction: column;} #b3 .tab2 .scon2 .habbitwrap .h_box {width: 100%; margin-top: 15px;} #b3 .tab2 .scon2 .habbitwrap .h_box:first-child {margin-top: 0;} #b3 .tab2 .scon2 .habbitwrap .h_box:first-child h3 {font-size: 18px; margin-bottom: 15px;} #b3 .tab2 .scon2 .habbitwrap .h_box ul li {font-size: 14px;} #b3 .tab2 .scon3 .processwrap .iconwrap li {width: auto; height: 25%;} #b3 .tab2 .scon3 .processwrap .dots .dotbox {width: auto; height: 25%;} #b3 .tab2 .scon3 .processwrap .txtwrap .txt {width: auto; height: 25%; display: flex; align-items: flex-start; justify-content: center;} #b3 .tab2 .scon5 .painwrap ul li {width: 100%; font-size: 16px;} #b3 .tab2 .scon5 .painwrap ul li:nth-child(-n+2) {margin-top: 2%;} #b3 .tab2 .scon5 .painwrap ul li:first-child {margin-top: 0;} #b3 .tab2 .scon6 .reviewwrap {flex-direction: column;} #b3 .tab2 .scon6 .reviewwrap p {width: 100%; margin-top: 15px;} #b3 .tab2 .scon6 .reviewwrap p:first-child {margin-top: 0;} /* tab2 */ /* tab3 */ #b3 .tab3 .scon1 .machinewrap p {font-size: 16px;} #b3 .tab3 .scon2 p {font-size: 16px;} #b3 .tab3 .scon3 p {font-size: 16px;} /* tab3 */ } /* b3 */ /* b4 */ #b4 .tab_btns button {width: 24%; border: 1px solid #00a6a6; color: #00a6a6; } #b4 .tab_btns button.active {background-color: #00a6a6; color: #fff;} #b4 .scon .titwrap h4 {color: #59c1c1;} #b4 .scon .titwrap h2 {color: #00a6a6;} /* tab1 */ #b4 .tab1 .scon2 .pointwrap .p_box h4 {color: #00a6a6;} #b4 .tab1 .scon4 .reviewwrap {display: flex; justify-content: space-between;} #b4 .tab1 .scon4 .reviewwrap li {width: 49%; border: 1px solid #eee;} #b4 .tab1 .scon4 .reviewwrap li img {max-width: 960px; width: 100%;} /* tab1 */ /* tab2 */ #b4 .tab2 .scon2 .effectwrap .e_box {width: 50%;} #b4 .tab2 .scon2 .effectwrap .e_box .icon {background-color: #ebf5f5;} #b4 .tab2 .scon4 .productwrap .imgwrap {border: 1px solid #ddd; padding: 50px; margin-bottom: 30px;} #b4 .tab2 .scon4 .productwrap .imgwrap img {margin: 0 auto; display: block; width: 100%; max-width: 741px;} #b4 .tab2 .scon4 .productwrap .txtwrap p {font-size: 20px; line-height: 1.7; text-align: center;} #b4 .tab2 .scon5 .imgwrap img {width: 100%; max-width: max-content; margin: 0 auto 50px; display: block;} #b4 .tab2 .scon5 .txtwrap {display: flex; justify-content: space-between;} #b4 .tab2 .scon5 .txtwrap .txt {width: 49%; display: flex; flex-direction: column;} #b4 .tab2 .scon5 .txtwrap .txt h2 {font-size: 30px; text-align: center; margin-bottom: 10px;} #b4 .tab2 .scon5 .txtwrap .txt1 h2 {color: #007fab;} #b4 .tab2 .scon5 .txtwrap .txt2 h2 {color: #091b37;} #b4 .tab2 .scon5 .txtwrap .txt .intxt {padding: 30px; flex: 1;} #b4 .tab2 .scon5 .txtwrap .txt1 .intxt {background-color: #007fab;} #b4 .tab2 .scon5 .txtwrap .txt2 .intxt {background-color: #091b37;} #b4 .tab2 .scon5 .txtwrap .txt .intxt ul {color: #fff;} #b4 .tab2 .scon5 .txtwrap .txt .intxt ul li {font-size: 18px; line-height: 1.7; margin-bottom: 5px;} #b4 .tab2 .scon5 .txtwrap .txt .intxt ul li:last-child {margin-bottom: 0;} #b4 .tab2 .scon5 .txtwrap .txt .intxt p {color: #fff; font-size: 20px; margin-top: 20px; font-weight: 700;} /* tab2 */ /* tab3 */ #b4 .tab3 .scon2 .pointwrap .p_box h4 {color: #00a6a6;} #b4 .tab3 .scon3 .basicwrap .b_box {padding: 30px; border: 1px solid #59c1c1; background-color: #ebf5f5; margin-bottom: 15px; display: flex; align-items: center;} #b4 .tab3 .scon3 .basicwrap .b_box:last-child {margin-bottom: 0;} #b4 .tab3 .scon3 .basicwrap .b_box span {background-color: #fff; width: 80px; height: 80px; border-radius: 50%; margin-right: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} #b4 .tab3 .scon3 .basicwrap .b_box span i {font-size: 30px; color: #00a6a6;} #b4 .tab3 .scon3 .basicwrap .b_box .txt h2 {font-size: 24px; margin-bottom: 10px;} #b4 .tab3 .scon3 .basicwrap .b_box .txt p {font-size: 18px; color: #666;} #b4 .tab3 .scon4 .effectwrap .e_box {width: 25%;} #b4 .tab3 .scon4 .effectwrap .e_box .icon {background-color: #ebf5f5;} #b4 .tab3 .scon5 .pricewrap {display: flex; justify-content: space-between;} #b4 .tab3 .scon5 .pricewrap .p_box {width: 49%; padding: 30px; text-align: center;} #b4 .tab3 .scon5 .pricewrap .p_box:first-child {border: 1px solid #ddd; background-color: #f5f5f5;} #b4 .tab3 .scon5 .pricewrap .p_box:last-child {border: 1px solid #aad4d4; background-color: #ebf5f5;} #b4 .tab3 .scon5 .pricewrap .p_box h5 {font-size: 20px; font-weight: 500; color: #fff; display: inline-block; padding: 10px 20px; margin-bottom: 20px; border-radius: 23px;} #b4 .tab3 .scon5 .pricewrap .p_box:first-child h5 {background-color: #999;} #b4 .tab3 .scon5 .pricewrap .p_box:last-child h5 {background-color: #58c1c1;} #b4 .tab3 .scon5 .pricewrap .p_box h2 {font-size: 30px; font-weight: 500;} #b4 .tab3 .scon5 .pricewrap .p_box:first-child h2 {color: #666;} #b4 .tab3 .scon5 .pricewrap .p_box:last-child h2 {color: #58c1c1;} #b4 .tab3 .scon6 .downwrap .iconwrap {display: flex; position: relative; margin-bottom: 30px;} #b4 .tab3 .scon6 .downwrap .iconwrap::after {position: absolute; content: ''; width: 100%; height: 1px; top: 50%; left: 0; background-color: #ddd; z-index: -1;} #b4 .tab3 .scon6 .downwrap .iconwrap .icon {width: 33.333%; display: flex; justify-content: center;} #b4 .tab3 .scon6 .downwrap .iconwrap .icon span {width: 80px; height: 80px; background-color: #ebf5f5; border-radius: 50%; display: flex; justify-content: center; align-items: center;} #b4 .tab3 .scon6 .downwrap .iconwrap .icon span i {color: #58c1c1; font-size: 24px;} #b4 .tab3 .scon6 .downwrap .txtwrap {display: flex;} #b4 .tab3 .scon6 .downwrap .txtwrap .txt {width: 33.333%; text-align: center;} #b4 .tab3 .scon6 .downwrap .txtwrap .txt h2 {font-size: 24px; margin-bottom: 15px; color: #00a6a6;} #b4 .tab3 .scon6 .downwrap .txtwrap .txt p {font-size: 18px; line-height: 1.7; color: #666;} /* tab3 내 탭메뉴 css */ #b4 .tab-content .sub-tab li {border: 1px solid #00a6a6; color: #00a6a6;} #b4 .tab-content .sub-tab li.active {background-color: #00a6a6; color: #fff;} #b4 .tab4 .scon2 .effectwrap {margin-bottom: 50px;} #b4 .tab4 .scon2 .effectwrap .e_box {width: 25%;} #b4 .tab4 .scon2 .effectwrap .e_box .icon {background-color: #ebf5f5;} #b4 .tab4 .scon2 .progresswrap .p_box h3 {background-color: #00a6a6;} #b4 .tab4 .scon2 .procedurewrap .p_box h3 {background-color: #00a6a6;} #b4 .tab4 .scon5 .title {text-align: center; margin-bottom: 50px;} #b4 .tab4 .scon5 .title h2 {font-size: 30px; background-color: #121212; color: #fff; display: inline-block; padding: 10px 30px; margin-bottom: 15px; border-radius: 30px;} #b4 .tab4 .scon5 .title p {font-size: 20px; color: #666;} #b4 .tab4 .scon5 .lhawrap {display: flex;justify-content: space-between;max-width: 1000px;margin: 0 auto 30px;} #b4 .tab4 .scon5 .lhawrap .l_box {width: 49%;display: flex;flex-direction: column;align-items: center;text-align: center; max-width: 471px;} #b4 .tab4 .scon5 .lhawrap .l_box .imgwrap img {width: 100%;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox {padding: 30px;width: 100%;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox1 {background-color: #f5f5f5;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox2 {background-color: #00a6a6;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox h3 {font-size: 24px; margin-bottom: 15px;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox2 h3 {color: #fff;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox p {font-size: 18px; line-height: 1.7;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox1 p {color: #666;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox2 p {color: #fff;} #b4 .tab4 .scon5 .certification p {font-size: 16px; text-align: center; color: #666;} #b4 .tab4 .scon6 .p_inbox {width: 100%;} #b4 .tab4 .scon6 .p_inbox h3 {font-size: 30px; margin-bottom: 50px;} #b4 .tab4 .scon6 .p_inbox .imgwrap {margin-top: 0; margin-bottom: 50px;} #b4 .tab4 .scon6 .p1 .imgwrap img {max-width: 312px; width: 100%;} #b4 .tab4 .scon6 .p1 ul li {font-size: 24px; font-weight: 500; margin-bottom: 15px; text-align: center; font-weight: 400; line-height: 1.7;} #b4 .tab4 .scon6 .p1 ul li:last-child {margin-bottom: 0;} #b4 .tab4 .scon6 .p1 ul li span {width: 40px; height: 40px; display: inline-block; background-color: #00a6a6; line-height: 40px; color: #fff; border-radius: 50%; text-align: center; margin-right: 10px; font-weight: 500;} #b4 .tab4 .scon6 .p2 .effectwrap .e_box {width: 25%;} #b4 .tab4 .scon6 .p3 .imgwrap img {width: 100%; max-width: 664px;} #b4 .tab4 .scon6 .p3 table {width: 100%; border-collapse: collapse; border-top: 2px solid #00a6a6;} #b4 .tab4 .scon6 .p3 table th {padding: 20px; font-size: 20px; background-color: #ebf5f5; border-right: 1px solid #ddd; color: #00a6a6;} #b4 .tab4 .scon6 .p3 table th:last-child {border-right: 0;} #b4 .tab4 .scon6 .p3 table td {padding: 20px; font-size: 16px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;} #b4 .tab4 .scon6 .p3 table td:last-child {border-right: 0;} #b4 .tab4 .scon6 .p3 table tr:last-child td {background-color: #00a6a6; color: #fff; font-size: 20px; font-weight: 700;} #b4 .scon7 ul li.hover .q_box {color: #00a6a6;} #b4 .scon7 ul li.open .q_box {color: #00a6a6;} /* tab3 */ @media screen and (max-width: 960px) { /* tab1 */ #b4 .tab1 .scon4 .reviewwrap {flex-direction: column;} #b4 .tab1 .scon4 .reviewwrap li {width: 100%; margin-top: 15px;} #b4 .tab1 .scon4 .reviewwrap li:first-child {margin-top: 0;} /* tab1 */ /* tab2 */ #b4 .tab2 .scon4 .productwrap .txtwrap p {font-size: 18px;} #b4 .tab2 .scon5 .txtwrap .txt h2 {font-size: 25px;} #b4 .tab2 .scon5 .txtwrap .txt .intxt ul li {font-size: 16px;} #b4 .tab2 .scon5 .txtwrap .txt .intxt p {font-size: 18px;} /* tab2 */ /* tab3 */ #b4 .tab3 .scon3 .basicwrap .b_box {padding: 20px;} #b4 .tab3 .scon3 .basicwrap .b_box .txt h2 {font-size: 20px;} #b4 .tab3 .scon3 .basicwrap .b_box .txt p {font-size: 16px;} #b4 .tab3 .scon5 .pricewrap .p_box h5 {font-size: 18px;} #b4 .tab3 .scon5 .pricewrap .p_box h2 {font-size: 25px;} #b4 .tab3 .scon6 .downwrap .iconwrap {margin-bottom: 20px;} #b4 .tab3 .scon6 .downwrap .txtwrap .txt h2 {font-size: 20px;} #b4 .tab3 .scon6 .downwrap .txtwrap .txt p {font-size: 16px;} /* tab3 */ /* tab4 */ #b4 .tab4 .scon5 .title {margin-bottom: 40px;} #b4 .tab4 .scon5 .title h2 {font-size: 24px;} #b4 .tab4 .scon5 .title p {font-size: 18px;} #b4 .tab4 .scon5 .lhawrap {flex-direction: column; align-items: center;} #b4 .tab4 .scon5 .lhawrap .l_box {margin-bottom: 20px;} #b4 .tab4 .scon5 .lhawrap .l_box:last-child {margin-bottom: 0;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox h3 {font-size: 20px;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox p {font-size: 16px;} #b4 .tab4 .scon5 .certification p {font-size: 15px;} #b4 .tab4 .scon6 .p_inbox h3 {font-size: 24px;} #b4 .tab4 .scon6 .p1 ul li {font-size: 20px;} #b4 .tab4 .scon6 .p1 ul li span {width: 35px; height: 35px; line-height: 35px;} #b4 .tab4 .scon6 .p3 table th {padding: 15px; font-size: 18px;} #b4 .tab4 .scon6 .p3 table td {padding: 15px; font-size: 14px;} #b4 .tab4 .scon6 .p3 table tr:last-child td {font-size: 18px;} /* tab4 */ } @media screen and (max-width: 640px) { /* tab1 */ /* tab1 */ /* tab2 */ #b4 .tab2 .scon2 .effectwrap .e_box {width: 100%;} #b4 .tab2 .scon4 .productwrap .txtwrap p {font-size: 16px;} #b4 .tab2 .scon5 .txtwrap {flex-direction: column;} #b4 .tab2 .scon5 .txtwrap .txt {width: 100%; margin-top: 20px;} #b4 .tab2 .scon5 .txtwrap .txt:first-child {margin-top: 0;} #b4 .tab2 .scon5 .txtwrap .txt h2 {font-size: 20px;} #b4 .tab2 .scon5 .txtwrap .txt .intxt ul li {font-size: 14px;} #b4 .tab2 .scon5 .txtwrap .txt .intxt p {font-size: 16px;} /* tab2 */ /* tab3 */ #b4 .tab3 .scon3 .basicwrap .b_box .txt h2 {font-size: 18px;} #b4 .tab3 .scon3 .basicwrap .b_box .txt p {font-size: 14px;} #b4 .tab3 .scon4 .effectwrap .e_box {width: 100%;} #b4 .tab3 .scon5 .pricewrap .p_box h5 {font-size: 16px;} #b4 .tab3 .scon5 .pricewrap .p_box h2 {font-size: 20px;} #b4 .tab3 .scon6 .downwrap {display: flex;} #b4 .tab3 .scon6 .downwrap .iconwrap {flex-direction: column; gap: 50px;} #b4 .tab3 .scon6 .downwrap .iconwrap::after {width: 1px; height: 100%; top: 0; left: 50%;} #b4 .tab3 .scon6 .downwrap .iconwrap .icon {width: auto; height: 33.333%;} #b4 .tab3 .scon6 .downwrap .iconwrap .icon span i {font-size: 20px;} #b4 .tab3 .scon6 .downwrap .txtwrap {flex-direction: column; margin-left: 30px; gap: 50px; width: 100%;} #b4 .tab3 .scon6 .downwrap .txtwrap .txt {width: auto; height: 33.333%; text-align: left;} #b4 .tab3 .scon6 .downwrap .txtwrap .txt h2 {font-size: 18px; margin-bottom: 10px;} #b4 .tab3 .scon6 .downwrap .txtwrap .txt p {font-size: 14px;} /* tab3 */ /* tab4 */ #b4 .tab4 .scon2 .effectwrap .e_box {width: 100%;} #b4 .tab4 .scon5 .title {margin-bottom: 30px;} #b4 .tab4 .scon5 .title h2 {font-size: 20px;} #b4 .tab4 .scon5 .title p {font-size: 18px;} #b4 .tab4 .scon5 .lhawrap .l_box {width: 100%; max-width: 100%;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox {padding: 20px;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox h3 {font-size: 18px;} #b4 .tab4 .scon5 .lhawrap .l_box .txtbox p {font-size: 14px;} #b4 .tab4 .scon6 .p_inbox h3 {font-size: 20px;} #b4 .tab4 .scon6 .p1 ul li {font-size: 18px; margin-bottom: 10px;} #b4 .tab4 .scon6 .p1 ul li span {width: 30px; height: 30px; line-height: 30px;} #b4 .tab4 .scon6 .p2 .effectwrap .e_box {width: 100%;} #b4 .tab4 .scon6 .p3 table th {padding: 10px; font-size: 16px;} #b4 .tab4 .scon6 .p3 table td {padding: 10px; font-size: 12px;} #b4 .tab4 .scon6 .p3 table tr:last-child td {font-size: 16px;} /* tab4 */ } /* b4 */ /* b5 */ #b5 .scon .titwrap h4 {color: #59c1c1;} #b5 .scon .titwrap h2 {color: #00a6a6;} #b5 .tab-content .sub-tab {flex-wrap: wrap; border: 1px solid #00a6a6; padding: 0;} #b5 .tab-content .sub-tab li {border-top: 1px solid #00a6a6; color: #00a6a6; width: 25%; border-right: 1px solid #00a6a6;} #b5 .tab-content .sub-tab li:nth-child(-n+4) {border-top: 0;} #b5 .tab-content .sub-tab li:nth-child(4n) {border-right: 0;} #b5 .tab-content .sub-tab li.active {background-color: #00a6a6; color: #fff;} #b5 .scon2 p.text {text-align: center; font-size: 24px; font-weight: 700; color: #00a6a6;} #b5 .scon3 .tabwrap {padding: 30px;background-color: #f7f7f7;} #b5 .scon3 .tabwrap h4 {font-size: 20px; margin-bottom: 10px; background-color: #58c1c1; display: inline-block; padding: 5px 15px; color: #fff; border-radius: 18px;} #b5 .scon3 .tabwrap .title {margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dashed #ddd;} #b5 .scon3 .tabwrap .title h2 {font-size: 30px; margin-bottom: 10px; display: flex; align-items: center;} #b5 .scon3 .tabwrap .title h2 span {width: 50px; height: 50px; background-color: #ebf5f5; display: inline-block; border-radius: 5px; margin-right: 10px; display: flex; align-items: center; justify-content: center;} #b5 .scon3 .tabwrap .title h2 span i {color: #00a6a6;} #b5 .scon3 .tabwrap .title h3 {font-weight: 500; font-size: 20px; margin-bottom: 10px; color: #00a6a6;} #b5 .scon3 .tabwrap .title p {font-size: 18px; color: #666; line-height: 1.7;} #b5 .scon3 .tabwrap .ulbox ul li {font-size: 18px; margin-bottom: 10px;} #b5 .scon3 .tabwrap .ulbox ul li:last-child {margin-bottom: 0;} #b5 .scon3 .tabwrap .ulwrap {display: flex;} #b5 .scon3 .tabwrap .ulwrap .ulbox {width: 50%;} #b5 .scon3 .tabwrap .st_text {margin-top: 20px;} #b5 .scon3 .tabwrap .st_text p {font-size: 18px; line-height: 1.7;} #b5 .scon3 .tabwrap .reviewbox {margin-top: 30px;} #b5 .scon3 .tabwrap .reviewbox p {padding: 20px; text-align: center; background-color: #ebf5f5; color: #00a6a6; font-size: 20px; font-weight: 500;} #b5 .scon4 .treatwrap {display: flex; flex-wrap: wrap; border: 1px solid #ddd;} #b5 .scon4 .treatwrap .t_box {width: 50%; border-right: 1px solid #ddd; border-top: 1px solid #ddd; padding: 50px;} #b5 .scon4 .treatwrap .t_box:nth-child(2n) {border-right: 0;} #b5 .scon4 .treatwrap .t_box:nth-child(-n+2) {border-top: 0;} #b5 .scon4 .treatwrap .t_box .title {margin-bottom: 20px;} #b5 .scon4 .treatwrap .t_box .title h2 {font-size: 30px; margin-bottom: 10px;} #b5 .scon4 .treatwrap .t_box .title h3 {font-size: 18px;font-weight: 500;color: #00a6a6;} #b5 .scon4 .treatwrap .t_box ul {display: flex;} #b5 .scon4 .treatwrap .t_box ul li {margin-right: 10px; font-size: 16px; background-color: #ebf5f5; padding: 5px 15px; color: #00a6a6; border-radius: 16px;} #b5 .scon4 .treatwrap .t_box ul li:last-child {margin-right: 0;} #b5 .scon4 .treatwrap .t_box p.re_text {font-size: 18px; color: #666; line-height: 1.7; margin-top: 15px; padding: 20px; background-color: #f5f5f5;} #b5 .scon4 .treatwrap .t_box p.ex_text {font-size: 18px; color: #666; line-height: 1.7; margin-top: 15px;} #b5 .scon5 .imgwrap img {width: 100%; max-width: 760px; margin: 0 auto; display: block;} #b5 .scon6 ul li.hover .q_box {color: #00a6a6;} #b5 .scon6 ul li.open .q_box {color: #00a6a6;} #b5 .scon7 .reviewwrap {display: flex; justify-content: space-between;} #b5 .scon7 .reviewwrap li {width: 49%; border: 1px solid #eee;} #b5 .scon7 .reviewwrap li img {max-width: 960px; width: 100%;} #b5 .scon7 p.text {font-size: 20px; text-align: center; line-height: 1.7; color: #00a6a6; margin-top: 30px; background-color: #ebf5f5; padding: 20px; font-weight: 500;} @media screen and (max-width: 960px) { #b5 .tab-content .sub-tab {flex-wrap: wrap;} #b5 .tab-content .sub-tab li {width: 50%;} #b5 .tab-content .sub-tab li:nth-child(-n+4) {border-top: 1px solid #00a6a6;} #b5 .tab-content .sub-tab li:nth-child(-n+2) {border-top: 0;} #b5 .tab-content .sub-tab li:nth-child(4n) {border-right: 1px solid #00a6a6;} #b5 .tab-content .sub-tab li:nth-child(2n) {border-right: 0;} #b5 .scon3 .tabwrap .title h2 {font-size: 24px;} #b5 .scon3 .tabwrap .title h2 span {width: 45px; height: 45px;} #b5 .scon3 .tabwrap .title h3 {font-size: 18px;} #b5 .scon3 .tabwrap .title p {font-size: 16px;} #b5 .scon3 .tabwrap h4 {font-size: 18px;} #b5 .scon3 .tabwrap .ulbox ul li {font-size: 16px;} #b5 .scon4 .treatwrap .t_box {padding: 40px;} #b5 .scon4 .treatwrap .t_box .title h2 {font-size: 24px;} #b5 .scon4 .treatwrap .t_box .title h3 {font-size: 16px;} #b5 .scon4 .treatwrap .t_box ul {flex-wrap: wrap; gap: 7px;} #b5 .scon4 .treatwrap .t_box ul li {font-size: 15px; margin-right: 0;} #b5 .scon4 .treatwrap .t_box p.re_text {padding: 15px; font-size: 16px;} #b5 .scon4 .treatwrap .t_box p.ex_text {font-size: 16px;} #b5 .scon7 .reviewwrap {flex-direction: column;} #b5 .scon7 .reviewwrap li {width: 100%; margin-top: 15px;} #b5 .scon7 .reviewwrap li:first-child {margin-top: 0;} #b5 .scon7 p.text {font-size: 18px;} } @media screen and (max-width: 640px) { #b5 .scon3 .tabwrap .title h2 {font-size: 20px;} #b5 .scon3 .tabwrap .title h3 {font-size: 16px;} #b5 .scon3 .tabwrap .ulwrap {flex-direction: column;} #b5 .scon3 .tabwrap .ulwrap .ulbox {width: 100%; margin-bottom: 15px;} #b5 .scon3 .tabwrap .ulwrap .ulbox:last-child {margin-bottom: 0;} #b5 .scon3 .tabwrap h4 {font-size: 16px;} #b5 .scon3 .tabwrap .ulbox ul li {font-size: 14px;} #b5 .scon4 .treatwrap .t_box {width: 100%; border-right: 0; padding: 30px;} #b5 .scon4 .treatwrap .t_box:nth-child(-n+2) {border-top: 1px solid #ddd;} #b5 .scon4 .treatwrap .t_box:first-child {border-top: 0;} #b5 .scon4 .treatwrap .t_box .title h2 {font-size: 20px;} #b5 .scon4 .treatwrap .t_box .title h3 {font-size: 14px;} #b5 .scon4 .treatwrap .t_box ul li {font-size: 14px;} #b5 .scon4 .treatwrap .t_box p.ex_text {font-size: 14px;} #b5 .scon4 .treatwrap .t_box p.re_text {font-size: 14px;} #b5 .scon7 p.text {font-size: 16px; padding: 15px;} } /* b5 */ /* d1 */ #d1 .tab-content .sub-tab li {border: 1px solid #f58323; color: #f58323;} #d1 .tab-content .sub-tab li.active {background-color: #f58323; color: #fff;} #d1 .scon .titwrap h4 {color: #ffad6a;} #d1 .scon .titwrap h2 {color: #f58323;} #d1 .scon4 .safewrap {display: flex; justify-content: space-between; margin-bottom: 30px;} #d1 .scon4 .safewrap .s_box {border: 1px solid #ddd; width: 32.333%; padding: 50px;} #d1 .scon4 .safewrap .s_box h3 {font-size: 16px; font-weight: 400; color: #f58323; margin-bottom: 30px;} #d1 .scon4 .safewrap .s_box h2 {font-size: 24px; margin-bottom: 10px;} #d1 .scon4 .safewrap .s_box p {font-size: 18px; color: #666;} #d1 .scon5 .tabwrap > div {margin-bottom: 50px;} #d1 .scon5 .tabwrap > div:last-child {margin-bottom: 0;} #d1 .scon5 .tabwrap .title {text-align: center;} #d1 .scon5 .tabwrap .title h2 {font-size: 30px; margin-bottom: 20px;} #d1 .scon5 .tabwrap .title p {font-size: 18px; line-height: 1.7; color: #666;} #d1 .scon5 .tabwrap .treatwrap .t_box {display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 30px;} #d1 .scon5 .tabwrap .treatwrap .t_box:last-child {border-bottom: 0;} #d1 .scon5 .tabwrap .treatwrap .t_box .num {width: 60px; height: 60px; background-color: #f58323; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 20px; flex-shrink: 0;} #d1 .scon5 .tabwrap .treatwrap .t_box .num h4 {font-size: 20px; font-weight: 400; color: #fff;} #d1 .scon5 .tabwrap .treatwrap .t_box .txtwrap h2 {font-size: 24px; margin-bottom: 10px;} #d1 .scon5 .tabwrap .treatwrap .t_box .txtwrap p {font-size: 18px; color: #666; font-weight: 400;} #d1 .scon5 .tabwrap .reviewwrap p {margin-bottom: 15px;} #d1 .scon5 .tabwrap .reviewwrap p:last-child {margin-bottom: 0;} #d1 .scon5 .tabwrap .underwrap {display: flex; justify-content: space-between;} #d1 .scon5 .tabwrap .underwrap .u_box {width: 50%; padding: 30px; border-right: 1px solid #ddd;} #d1 .scon5 .tabwrap .underwrap .u_box:last-child {border-right: 0;} #d1 .scon5 .tabwrap .underwrap .u_box h2 {font-size: 24px; position: relative; padding-left: 20px; margin-bottom: 20px;} #d1 .scon5 .tabwrap .underwrap .u_box h2::after {position: absolute; content: ''; width: 4px; height: 70%; background-color: #f58323; top: 50%; left: 0; transform: translateY(-50%);} #d1 .scon5 .tabwrap .underwrap .u_box ul li {position: relative; padding-left: 20px; font-size: 18px; margin-bottom: 10px;} #d1 .scon5 .tabwrap .underwrap .u_box ul li:last-child {margin-bottom: 0;} #d1 .scon5 .tabwrap .underwrap .u_box ul li::after {position: absolute; content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: #f58323; left: 0; top: 50%; transform: translateY(-50%);} #d1 .scon5 .tabwrap .underwrap .u_box p {font-size: 18px; line-height: 1.7; color: #666;} @media screen and (max-width: 960px) { #d1 .scon4 .safewrap {flex-direction: column;} #d1 .scon4 .safewrap .s_box {width: 100%; margin-top: 15px; padding: 30px;} #d1 .scon4 .safewrap .s_box:first-child {margin-top: 0;} #d1 .scon4 .safewrap .s_box h3 {font-size: 15px;} #d1 .scon4 .safewrap .s_box h2 {font-size: 20px;} #d1 .scon4 .safewrap .s_box p {font-size: 16px;} #d1 .scon5 .tabwrap > div {margin-bottom: 40px;} #d1 .scon5 .tabwrap .title h2 {font-size: 24px; margin-bottom: 15px;} #d1 .scon5 .tabwrap .title p {font-size: 16px;} #d1 .scon5 .tabwrap .treatwrap .t_box .num {width: 50px; height: 50px;} #d1 .scon5 .tabwrap .treatwrap .t_box .num h4 {font-size: 18px;} #d1 .scon5 .tabwrap .treatwrap .t_box .txtwrap h2 {font-size: 20px;} #d1 .scon5 .tabwrap .treatwrap .t_box .txtwrap p {font-size: 16px;} #d1 .scon5 .tabwrap .underwrap .u_box h2 {font-size: 20px;} #d1 .scon5 .tabwrap .underwrap .u_box ul li {font-size: 16px;} } @media screen and (max-width: 640px) { #d1 .scon4 .safewrap .s_box h3 {font-size: 14px; margin-bottom: 20px;} #d1 .scon4 .safewrap .s_box h2 {font-size: 18px;} #d1 .scon4 .safewrap .s_box p {font-size: 14px;} #d1 .scon5 .tabwrap .title h2 {font-size: 20px;} #d1 .scon5 .tabwrap .title p {font-size: 14px;} #d1 .scon5 .tabwrap .treatwrap .t_box {padding: 20px;} #d1 .scon5 .tabwrap .treatwrap .t_box .txtwrap h2 {font-size: 20px;} #d1 .scon5 .tabwrap .treatwrap .t_box .txtwrap p {font-size: 14px;} #d1 .scon5 .tabwrap .underwrap {flex-direction: column;} #d1 .scon5 .tabwrap .underwrap .u_box {width: 100%; padding: 20px; border-right: 0; border-bottom: 1px solid #ddd;} #d1 .scon5 .tabwrap .underwrap .u_box:last-child {border-bottom: 0;} } /* d1 */ /* d2 */ #d2 .scon .titwrap h4 {color: #ffad6a;} #d2 .scon .titwrap h2 {color: #f58323;} #d2 .scon1 .mediwrap .m_box {display: flex; align-items: center; margin-bottom: 80px;} #d2 .scon1 .mediwrap .m_box:last-child {margin-bottom: 0;} #d2 .scon1 .mediwrap .m_box:nth-child(2n) {flex-direction: row-reverse;} #d2 .scon1 .mediwrap .m_box .imgwrap {width: 48%;overflow: hidden;} #d2 .scon1 .mediwrap .m_box .imgwrap img {width: 100%;} #d2 .scon1 .mediwrap .m_box .txtwrap {width: 52%; padding: 50px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox {margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #ddd;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox h2 {font-size: 30px; margin-bottom: 10px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox h3 {font-size: 20px; margin-bottom: 10px; color: #f58323;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox p {font-size: 18px; line-height: 1.7; color: #666; font-weight: 400;} #d2 .scon1 .mediwrap .m_box ul {display: flex; flex-wrap: wrap; gap: 10px;} #d2 .scon1 .mediwrap .m_box ul li {font-size: 16px; background-color: #fffbf7; color: #f58323; padding: 10px 20px; border-radius: 21px;} #d2 .scon1 .mediwrap .m_box .r_reviewwrap {margin-top: 30px;} #d2 .scon1 .mediwrap .m_box .r_reviewwrap p {margin-bottom: 10px; padding: 20px; background-color: #f5f5f5; font-size: 16px; color: #666;} #d2 .scon1 .mediwrap .m_box .r_reviewwrap p:last-child {margin-bottom: 0;} #d2 .scon1 .mediwrap .m_box .txtbox {font-size: 18px; color: #666; margin-top: 30px; line-height: 1.7;} #d2 .scon1 .mediwrap .m_box .txtbox span {font-weight: 500; color: #b3621e;} #d2 .scon1 .mediwrap .m_box .btnwrap {margin-top: 30px;} #d2 .scon1 .mediwrap .m_box .btnwrap a {border: 1px solid #121212; padding: 10px 20px; display: inline-block; font-size: 16px; border-radius: 22px; transition-duration: 0.3s;} #d2 .scon1 .mediwrap .m_box .btnwrap a:hover {color: #fff; background-color: #121212;} #d2 .scon2 .doctorwrap {max-width: 1000px; margin: 0 auto 50px;} #d2 .scon2 .doctorwrap .d_box {width: 100%; background-color: #fffbf7; padding: 20px; display: flex; align-items: center; margin-bottom: 15px; border-radius: 55.5px;} #d2 .scon2 .doctorwrap .d_box:last-child {margin-bottom: 0;} #d2 .scon2 .doctorwrap .d_box .num {background-color: #f58323; width: 80px; height: 80px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 30px; flex-shrink: 0;} #d2 .scon2 .doctorwrap .d_box .num h4 {font-weight: 700; color: #fff; font-size: 24px;} #d2 .scon2 .doctorwrap .d_box .txtwrap h2 {font-size: 24px; margin-bottom: 15px; color: #f58323; font-weight: 500;} #d2 .scon2 .doctorwrap .d_box .txtwrap p {font-size: 18px; color: #666;} #d2 .scon2 p.l_text {font-size: 20px; text-align: center; line-height: 1.7; color: #f58323;} @media screen and (max-width: 960px) { #d2 .scon1 .mediwrap .m_box {flex-direction: column; margin-bottom: 60px;} #d2 .scon1 .mediwrap .m_box .imgwrap {width: 100%;} #d2 .scon1 .mediwrap .m_box .txtwrap {width: 100%; padding: 30px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox h2 {font-size: 24px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox h3 {font-size: 18px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox p {font-size: 16px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox {margin-bottom: 20px; padding-bottom: 20px;} #d2 .scon1 .mediwrap .m_box ul li {font-size: 15px;} #d2 .scon1 .mediwrap .m_box .txtbox {margin-top: 20px; font-size: 16px;} #d2 .scon1 .mediwrap .m_box:nth-child(2n) {flex-direction: column;} #d2 .scon1 .mediwrap .m_box .r_reviewwrap p {font-size: 15px;} #d2 .scon2 .doctorwrap .d_box .num {width: 60px; height: 60px;} #d2 .scon2 .doctorwrap .d_box .num h4 {font-size: 20px;} #d2 .scon2 .doctorwrap .d_box .txtwrap h2 {font-size: 20px; margin-bottom: 10px;} #d2 .scon2 .doctorwrap .d_box .txtwrap p {font-size: 16px;} #d2 .scon2 p.l_text {font-size: 18px;} } @media screen and (max-width: 640px) { #d2 .scon1 .mediwrap .m_box {margin-bottom: 50px;} #d2 .scon1 .mediwrap .m_box .txtwrap {padding: 20px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox h2 {font-size: 20px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox h3 {font-size: 16px;} #d2 .scon1 .mediwrap .m_box .txtwrap .titbox p {font-size: 14px;} #d2 .scon1 .mediwrap .m_box ul li {font-size: 14px;} #d2 .scon1 .mediwrap .m_box .txtbox {font-size: 14px;} #d2 .scon1 .mediwrap .m_box .r_reviewwrap p {font-size: 14px;} #d2 .scon2 .doctorwrap .d_box .num {width: 50px; height: 50px;} #d2 .scon2 .doctorwrap .d_box .num h4 {font-size: 18px;} #d2 .scon2 .doctorwrap .d_box .txtwrap h2 {font-size: 18px;} #d2 .scon2 .doctorwrap .d_box .txtwrap p {font-size: 14px;} #d2 .scon2 p.l_text {font-size: 16px;} } /* d2 */ /* e3 */ #e3 .scon .titwrap h4 {color: #59c1c1;} #e3 .scon .titwrap h2 {color: #00a6a6;} #e3 .scon1 .countwrap {display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto;} #e3 .scon1 .countwrap .c_box {width: 33.333%; display: flex; flex-direction: column; align-items: center; text-align: center; border-right: 1px solid #ddd;} #e3 .scon1 .countwrap .c_box:last-child {border-right: 0;} #e3 .scon1 .countwrap .c_box .icon {width: 150px; height: 150px; background-color: #ebf5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 30px;} #e3 .scon1 .countwrap .c_box h2 {font-size: 24px; margin-bottom: 10px; font-weight: 500; color: #59c1c1;} #e3 .scon1 .countwrap .c_box p {font-size: 18px; color: #666;} #e3 .scon1 .countwrap .c_box p span {font-size: 30px; color: #121212; font-weight: 700;} #e3 .scon3 .reimgwrap {margin-bottom: 50px;} #e3 .scon3 .reimgwrap img {display: block; width: 100%; max-width: 1032px; margin: 0 auto;} #e3 .scon3 .goalwrap {margin-top: 50px;} #e3 .scon3 .goalwrap .g_box {display: flex; align-items: center;} #e3 .scon3 .goalwrap .g_box:nth-child(2n) {flex-direction: row-reverse;} #e3 .scon3 .goalwrap .g_box .imgwrap {background-color: #ddd; width: 50%;} #e3 .scon3 .goalwrap .g_box .imgwrap img {width: 100%;} #e3 .scon3 .goalwrap .g_box .txtwrap {width: 50%; padding: 50px; position: relative;} #e3 .scon3 .goalwrap .g_box .txtwrap h3 {font-size: 60px;color: #00a6a6;opacity: .2;position: absolute;top:0; font-style: italic;} #e3 .scon3 .goalwrap .g_box .txtwrap h2 {font-size: 30px; position: relative; margin-bottom: 20px;} #e3 .scon3 .goalwrap .g_box .txtwrap p {font-size: 18px; line-height: 1.7; color: #666;} #e3 .scon4 {max-width: 100%; padding: 0;} #e3 .scon4 .ceowrap .c_wrap:first-child {background-color: #ebf5f5;} #e3 .scon4 .ceowrap .c_wrap .c_box {max-width: 1640px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; padding: 120px 0;} #e3 .scon4 .ceowrap .c_wrap:last-child .c_box {flex-direction: row-reverse; text-align: right;} #e3 .scon4 .ceowrap .c_wrap .c_box .imgwrap {width: 32%; max-width: 500px; margin: 0 auto; display: block;} #e3 .scon4 .ceowrap .c_wrap .c_box .imgwrap img {width: 100%;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap {width: 49%;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt {margin-bottom: 50px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt h4 {font-size: 20px; color: #59c1c1; font-weight: 500; margin-bottom: 20px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt h2 {font-size: 40px; margin-bottom: 10px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt p {font-size: 18px; line-height: 1.7; color: #666;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .history {display: flex;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .history .h_box {width: 50%;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .history ul li {font-size: 18px; margin-bottom: 10px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .history ul li:last-child {margin-bottom: 0;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .review {margin-top: 30px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .review p {font-size: 18px; line-height: 1.7; color: #00a6a6; padding: 20px; background-color: #d9eeee;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .btnwrap {margin-top: 30px; display: inline-block;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .btnwrap a {border: 1px solid #121212; display: flex; justify-content: flex-start; align-items: center; background-color: #fff; padding: 15px 30px; font-size: 18px; border-radius: 28px; transition-duration: 0.3s;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .btnwrap a:hover {background-color: #121212; color: #fff;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .btnwrap a img {height: 20px; margin-right: 10px;} #e3 .scon5 .intwrap {display: flex; flex-wrap: wrap; margin-bottom: 50px;} #e3 .scon5 .intwrap .i_box {width: 32.333%; margin-right: 1.5%; margin-top: 1.5%;} #e3 .scon5 .intwrap .i_box:nth-child(3n) {margin-right: 0;} #e3 .scon5 .intwrap .i_box:nth-child(-n+3) {margin-top: 0;} #e3 .scon5 .intwrap .i_box .imgwrap img {width: 100%;} #e3 .scon5 .intwrap .i_box .txtwrap {background-color: #f5f5f5; padding: 30px;} #e3 .scon5 .intwrap .i_box .txtwrap h2 {font-size: 22px; margin-bottom: 10px;} #e3 .scon5 .intwrap .i_box .txtwrap p {font-size: 18px; font-weight: 400; color: #666;} @media screen and (max-width: 960px) { #e3 .scon1 .countwrap .c_box .icon {width: 100px; height: 100px;} #e3 .scon1 .countwrap .c_box .icon img {height: 50px;} #e3 .scon1 .countwrap .c_box h2 {font-size: 20px;} #e3 .scon1 .countwrap .c_box p {font-size: 16px;} #e3 .scon1 .countwrap .c_box p span {font-size: 24px;} #e3 .scon3 .goalwrap .g_box {flex-direction: column; margin-bottom: 60px;} #e3 .scon3 .goalwrap .g_box:nth-child(2n) {flex-direction: column;} #e3 .scon3 .goalwrap .g_box:last-child {margin-bottom: 0;} #e3 .scon3 .goalwrap .g_box .imgwrap {width: 100%;} #e3 .scon3 .goalwrap .g_box .txtwrap {width: 100%; padding: 30px;} #e3 .scon3 .goalwrap .g_box .txtwrap h3 {position: initial; font-size: 40px;} #e3 .scon3 .goalwrap .g_box .txtwrap h2 {font-size: 24px; margin-bottom: 15px;} #e3 .scon3 .goalwrap .g_box .txtwrap p {font-size: 16px;} #e3 .scon4 .ceowrap .c_wrap {padding: 0 20px;} #e3 .scon4 .ceowrap .c_wrap .c_box {padding: 100px 0; flex-direction: column;} #e3 .scon4 .ceowrap .c_wrap:last-child .c_box {flex-direction: column; text-align: left;} #e3 .scon4 .ceowrap .c_wrap .c_box .imgwrap {max-width: 400px; width: 100%; margin: 0 auto 30px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap {width: 100%;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt {margin-bottom: 40px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt h4 {font-size: 18px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt h2 {font-size: 30px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt p {font-size: 16px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .history h2 {font-size: 20px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .history ul li {font-size: 16px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .review p {font-size: 16px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .btnwrap a {font-size: 16px;} #e3 .scon5 .intwrap .i_box {width: 49%; margin-right: 2%; margin-top: 2%;} #e3 .scon5 .intwrap .i_box:nth-child(-n+3) {margin-top: 2%;} #e3 .scon5 .intwrap .i_box:nth-child(-n+2) {margin-top: 0;} #e3 .scon5 .intwrap .i_box:nth-child(3n) {margin-right: 2%;} #e3 .scon5 .intwrap .i_box:nth-child(2n) {margin-right: 0;} #e3 .scon5 .intwrap .i_box .txtwrap {padding: 20px;} #e3 .scon5 .intwrap .i_box .txtwrap h2 {font-size: 20px;} #e3 .scon5 .intwrap .i_box .txtwrap p {font-size: 16px;} } @media screen and (max-width: 640px) { #e3 .scon1 .countwrap .c_box .icon {width: 80px; height: 80px;} #e3 .scon1 .countwrap .c_box .icon img {height: 40px;} #e3 .scon1 .countwrap .c_box h2 {font-size: 18px;} #e3 .scon1 .countwrap .c_box p {font-size: 14px;} #e3 .scon1 .countwrap .c_box p span {font-size: 20px;} #e3 .scon3 .goalwrap .g_box {margin-bottom: 50px;} #e3 .scon3 .goalwrap .g_box .txtwrap {padding: 20px;} #e3 .scon3 .goalwrap .g_box .txtwrap h3 {font-size: 30px;} #e3 .scon3 .goalwrap .g_box .txtwrap h2 {font-size: 20px;} #e3 .scon3 .goalwrap .g_box .txtwrap p {font-size: 14px;} #e3 .scon4 .ceowrap .c_wrap .c_box {padding: 80px 0;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt h4 {font-size: 16px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .ceotxt h2 {font-size: 24px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .history ul li {font-size: 14px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .review p {font-size: 14px;} #e3 .scon4 .ceowrap .c_wrap .c_box .txtwrap .btnwrap a {font-size: 14px;} #e3 .scon5 .intwrap .i_box {width: 100%; margin-right: 0;} #e3 .scon5 .intwrap .i_box:nth-child(3n) {margin-right: 0;} #e3 .scon5 .intwrap .i_box:nth-child(-n+2) {margin-top: 2%;} #e3 .scon5 .intwrap .i_box:first-child {margin-top: 0;} #e3 .scon5 .intwrap .i_box .txtwrap h2 {font-size: 16px;} #e3 .scon5 .intwrap .i_box .txtwrap p {font-size: 14px;} } /* e3 */ /* e4 */ #e4 .scon .titwrap h4 {color: #59c1c1;} #e4 .scon .titwrap h2 {color: #00a6a6;} #e4 .scon1 .mapwrap {margin-bottom: 50px;} #e4 .scon1 .m_box {margin-bottom: 50px;} #e4 .scon1 .m_box .root_daum_roughmap_landing {border: 1px solid #ddd;} #e4 .scon1 .m_box .root_daum_roughmap .wrap_controllers {display: none;} #e4 .scon1 .m_box .root_daum_roughmap .map_border {display: none;} #e4 .scon1 .m_site {display: flex; justify-content: space-between; margin-bottom: 30px;} #e4 .scon1 .m_site li {width: 24%;} #e4 .scon1 .m_site li a {border: 1px solid #ddd; width: 100%; display: flex; align-items: center; justify-content: center; padding: 20px;} #e4 .scon1 .m_site li a span {margin-right: 10px;} #e4 .scon1 .m_site li a p {font-size: 18px;} #e4 .scon1 .m_txt .traffic {display: flex; justify-content: space-between;} #e4 .scon1 .m_txt .traffic h2 {font-size: 30px; width: 30%;} #e4 .scon1 .m_txt .traffic .t_wrap {width: 70%;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box {padding: 30px; border-bottom: 1px solid #ddd;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box:first-child {border-top: 1px solid #ddd;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box h3 {font-size: 24px; margin-bottom: 20px;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box p {font-size: 18px; line-height: 1.7; color: #666;} @media screen and (max-width: 960px) { #e4 .scon1 .m_box {margin-bottom: 40px;} #e4 .scon1 .m_site li a p {font-size: 16px;} #e4 .scon1 .m_txt .traffic {flex-direction: column;} #e4 .scon1 .m_txt .traffic h2 {font-size: 24px; width: 100%; margin-bottom: 20px;} #e4 .scon1 .m_txt .traffic .t_wrap {width: 100%;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box {padding: 20px;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box h3 {font-size: 20px;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box p {font-size: 16px;} } @media screen and (max-width: 640px) { #e4 .scon1 .m_box {margin-bottom: 30px;} #e4 .scon1 .m_site {flex-wrap: wrap;} #e4 .scon1 .m_site li {width: 49%; margin-top: 2%;} #e4 .scon1 .m_site li:nth-child(-n+2) {margin-top: 0;} #e4 .scon1 .m_site li a {padding: 15px;} #e4 .scon1 .m_site li a p {font-size: 14px;} #e4 .scon1 .m_txt .traffic h2 {font-size: 20px;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box h3 {font-size: 18px;} #e4 .scon1 .m_txt .traffic .t_wrap .t_box p {font-size: 14px;} } /* e4 */