@charset "UTF-8"; /*변수*/ /*반응형 화면 크기*/ /*css 디폴트는 모바일이 기준*/ /*반응형, 브라우저 크기가 300px 이하일때*/ /*반응형, 브라우저 크기가 800px 이상일때*/ /*@media (min-width: $mobile ) and (max-width: $tablet){*/ /*반응형, 브라우저 크기가 1025px 이상일때*/ /*반응형, 브라우저 크기가 1204px 이상일때*/ /*넓이, 높이 자동 계산함수*/ /*변수파일 import*/ .member { width: 100%; padding-left: 2rem; padding-right: 2rem; } @media (min-width: 1240px) { .member { width: 120rem; padding-left: 0rem; padding-right: 0rem; } } .member .pageTitle h1 { font-size: 2.8rem; font-weight: 600; } @media (min-width: 768px) { .member .pageTitle h1 { font-size: 4.5rem; } } @media (max-width: 768px) { .member .pageTitle h1 { font-size: 3rem; line-height: 3.6rem; } } .member .pageTitle h1 br { content: ""; display: inline-block; width: 1rem; } .member .carswBtn { margin-top: 5rem; } .member .carswBtn .towButton { margin: 0 auto; } .member .section1 { margin-top: 7rem; } .member .section1 .memberComplet { border: 1px solid #DEDEDE; border-radius: 0.6rem; padding: 5rem; } .member .section1 .memberComplet p { text-align: center; } .member .section1 .memberComplet p strong { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .member .section1 .memberComplet p strong { font-size: 2.4rem; } } .member .section1 .memberComplet p span { display: block; font-size: 1.4rem; font-weight: 400; margin-top: 1rem; line-height: 2.2rem; } @media (min-width: 768px) { .member .section1 .memberComplet p span { font-size: 1.6rem; line-height: 2.4rem; margin-top: 2rem; } } .member .section2 { margin-top: 5rem; } .member .section3 { margin-top: 7rem; } .member .section3 h2 + p { margin-top: 2rem; margin-bottom: 2.5rem; font-size: 1.4rem; line-height: 2.2rem; } @media (min-width: 768px) { .member .section3 h2 + p { font-size: 1.6rem; line-height: 2.4rem; margin-bottom: 3rem; } } .member .section1 .editorBox, .member .section2 .editorBox, .member .section3 .editorBox { width: 100%; margin-top: 2rem; min-height: 20rem; overflow-y: scroll; bordeR: 1px solid #DEDEDE; border-radius: 0.6rem; padding: 2rem; } .member .section1 h2, .member .section2 h2, .member .section3 h2 { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .member .section1 h2, .member .section2 h2, .member .section3 h2 { font-size: 2.4rem; } } .member .section1 label, .member .section2 label, .member .section3 label { margin-top: 1.5rem; displaY: flex; align-items: center; } @media (min-width: 768px) { .member .section1 label, .member .section2 label, .member .section3 label { margin-top: 2rem; } } .member .section1 label input, .member .section2 label input, .member .section3 label input { min-width: 2rem; } .member .section1 label span, .member .section2 label span, .member .section3 label span { margin-left: 1rem; font-size: 1.4rem; } @media (min-width: 768px) { .member .section1 label span, .member .section2 label span, .member .section3 label span { font-size: 1.6rem; } } .member .btnWarp { width: 16rem; margin: 0 auto; margin-top: 4rem; } @media (min-width: 768px) { .member .btnWarp { margin-top: 5rem; } } .member .btnWarp a::after, .member .btnWarp a::before { width: 3.2rem; } .member .termsTop { displaY: flex; align-items: center; justify-content: space-between; margin-top: 5rem; flex-wrap: wrap; } @media (min-width: 768px) { .member .termsTop { flex-wrap: nowrap; } } .member .termsTop .tabWarp { margin-top: 0; width: 100%; } @media (min-width: 768px) { .member .termsTop .tabWarp { width: auto; } } .member .termsTop .searchBoxWarp { width: 100%; margin-top: 2rem; } @media (min-width: 768px) { .member .termsTop .searchBoxWarp { width: auto; margin-top: 0; } } .member .termsTop .searchBoxWarp .searchBox { width: 100%; } @media (min-width: 768px) { .member .termsTop .searchBoxWarp .searchBox { width: auto; } } .member .termsTop .searchBoxWarp .searchBox .cont-select { width: 100%; min-width: 30rem; } .member .termsContents { margin-top: 4rem; } .member .termsContents h2 { font-size: 1.8rem; font-weight: 600; } @media (min-width: 768px) { .member .termsContents h2 { font-size: 2.4rem; } } .member .termsContents h3 { margin-top: 2rem; } @media (min-width: 768px) { .member .termsContents h3 { margin-top: 3rem; } } .member .termsContents h4 { margin-top: 4rem; } .member .termsContents > p { margin-top: 2rem; line-height: 2.2rem; font-size: 1.4rem; color: #676767; } .member .termsContents ul, .member .termsContents ol { margin-top: 2rem; } .member .termsContents ul li, .member .termsContents ol li { line-height: 2.2rem; font-size: 1.4rem; color: #676767; } .member .termsContents ol li { padding: 0.2rem 0; } .member .termsContents ol li span { line-height: 2.2rem; font-size: 1.4rem; } .member .termsContents ol li span::before { display: block; padding-right: 0.5rem; font-style: normal; margin-top: 0.2rem; } .member .termsContents ol li ol { margin-top: 0.3rem; margin-bottom: 1rem; } .member .termsContents ol li ol li { padding: 0 0 0 2rem; } .member .termsContents ol li ol li span { line-height: 2.2rem; font-size: 1.4rem; } .member .termsContents ol li ol li span::before { display: block; padding-right: 0.5rem; font-style: normal; margin-top: 0.2rem; } .member .memberJoinBoxWrap { margin-top: 5rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap { margin-top: 4rem; } } @media (min-width: 769px) { .member .memberJoinBoxWrap .JoinBoxTopper { padding-left: 4rem; } } @media (max-width: 768px) { .member .memberJoinBoxWrap .JoinBoxTopper { margin-bottom: 3rem; } } .member .memberJoinBoxWrap .JoinBoxTopper label { display: flex; justify-content: flex-start; align-items: center; width: -moz-fit-content; width: fit-content; } .member .memberJoinBoxWrap .JoinBoxTopper label input { min-width: 2rem; } .member .memberJoinBoxWrap .JoinBoxTopper label span { margin-left: 1rem; font-size: 1.6rem; line-height: 2.4rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .JoinBoxTopper label span { font-size: 1.4rem; line-height: 2.2rem; } } .member .memberJoinBoxWrap .JoinBoxTopper label a { font-size: 1.6rem; font-weight: 400; color: #676767; margin-left: 1rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .JoinBoxTopper label a { font-size: 1.4rem; margin-left: 0.5rem; } } .member .memberJoinBoxWrap .JoinBoxTopper .agree-all { font-weight: 600; } .member .memberJoinBoxWrap .memberJoinBox { padding: 4rem; border: 1px solid #DEDEDE; border-radius: 0.6rem; margin-top: 2rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox { margin-top: 0; margin-bottom: 4rem; padding: 0; border: none; } } .member .memberJoinBoxWrap .memberJoinBox label { display: flex; justify-content: flex-start; align-items: center; width: -moz-fit-content; width: fit-content; } .member .memberJoinBoxWrap .memberJoinBox label input { min-width: 2rem; } .member .memberJoinBoxWrap .memberJoinBox label span { margin-left: 1rem; font-size: 1.6rem; line-height: 2.4rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox label span { font-size: 1.4rem; line-height: 2.2rem; } } .member .memberJoinBoxWrap .memberJoinBox label a { font-size: 1.6rem; font-weight: 400; color: #676767; margin-left: 1rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox label a { font-size: 1.4rem; margin-left: 0.5rem; } } .member .memberJoinBoxWrap .memberJoinBox .title { font-size: 2.4rem; font-weight: 600; color: #000000; line-height: 3.2rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .title { font-size: 1.8rem; line-height: 2.4rem; } } .member .memberJoinBoxWrap .memberJoinBox .unitCheck { padding: 3rem 0; border-bottom: 1px solid #DEDEDE; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .unitCheck { padding: 2.5rem 0 2rem 0; } } .member .memberJoinBoxWrap .memberJoinBox .unitCheck label:last-child { margin-top: 2.4rem; } .member .memberJoinBoxWrap .memberJoinBox .unitCheck2 { padding: 3rem 0; border-top: 1px solid #DEDEDE; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .unitCheck2 { padding: 2.5rem 0 2rem 0; } } .member .memberJoinBoxWrap .memberJoinBox .unitCheck2 .info { padding-bottom: 2.4rem; font-size: 2.4rem; font-weight: 600; color: #000000; line-height: 3.2rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .unitCheck2 .info { font-size: 1.8rem; line-height: 2.4rem; } } .member .memberJoinBoxWrap .memberJoinBox .unitCheck2 label:last-child { margin-top: 2rem; } .member .memberJoinBoxWrap .memberJoinBox .marketingCheck { margin-top: 3rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .marketingCheck { margin-top: 2rem; } } .member .memberJoinBoxWrap .memberJoinBox .marketingCheck span { font-size: 1.6rem; font-weight: 400; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .marketingCheck span { font-size: 1.4rem; line-height: 2.4rem; } } .member .memberJoinBoxWrap .memberJoinBox .allCheck { margin-top: 3rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .allCheck { margin-top: 2rem; } } .member .memberJoinBoxWrap .memberJoinBox .allCheck span { font-size: 1.6rem; font-weight: 600; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .allCheck span { font-size: 1.4rem; line-height: 2.4rem; } } .member .memberJoinBoxWrap .memberJoinBox .contents { margin-top: 2rem; font-size: 1.6rem; font-weight: 400; color: #676767; line-height: 2.4rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .contents { font-size: 1.4rem; line-height: 2.2rem; } } .member .memberJoinBoxWrap .memberJoinBox .optionNotice { margin-bottom: 2rem; font-size: 1.6rem; font-weight: 400; color: #676767; line-height: 2.4rem; } @media (max-width: 768px) { .member .memberJoinBoxWrap .memberJoinBox .optionNotice { font-size: 1.4rem; line-height: 2.2rem; } }