/* 메인 */ /* 팝업 */ .popup{ width: calc(100% - 20px); height: auto; max-width: calc(100% - 20px); min-width: 150px; max-height: calc(100% - 20px); margin: 10px; border-radius: 10px; display: flex; flex-flow: column nowrap; background-color: rgb(255,255,255); position: absolute; z-index: 10000000; overflow: hidden; box-shadow: 2px 2px 15px 2px rgba(0,0,0,0.6); } body#dark .popup{ background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; } .popup:hover{ z-index: 10000001; } .popup>div{ min-width: 150px; min-height: 150px; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; font-size: 14px; } .popup>div::-webkit-scrollbar{ display: none; } .popup>div p.text_tag{ width: 100%; padding: 5px 10px; } .popup>div a{ cursor: pointer; } .popup>div img{ height: auto; max-width: 100%; } /* 팝업의 콘텐트 영역은 사용자가 색상을 변경할 수 있기 때문에 script로 라이트 모드와 다크 모드 색상 값을 제어하며, 그렇기에 아래 요소만 예외적으로 다크 모드 css 기본 값을 라이트 모드의 css 값으로 세팅함 */ body#dark .popup>div p, body#dark .popup>div span { color: rgb(18,18,18); } /* 팝업의 콘텐트 영역에서 b, u 태그 등은 색상 값을 갖지 않기 때문에 부모 요소의 값 상속 */ .popup>div b, .popup>div u { color: inherit !important; } .popup>article{ width: 100%; height: 0; position: relative; } .popup>article>dl{ width: 100%; position: absolute; bottom: 0; left: 0; background-color: rgb(255,255,255); } body#dark .popup>article>dl{ background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; } .popup>article>dl>dt{ width: 30px; height: 25px; margin: auto; border-top-right-radius: 15px; border-top-left-radius: 15px; text-align: center; background-color: rgb(46,168,225); position: absolute; right: 0; top: -25px; left: 0; transition: all 0.12s ease-in-out; cursor: pointer; } .popup>article>dl>dt.on{ background-color: rgb(224,67,88); } body#dark .popup>article>dl>dt{ background-color: rgb(35,129,173); } body#dark .popup>article>dl>dt.on{ background-color: rgb(173,52,68); } .popup>article>dl>dt>i{ margin: auto; color: rgb(255,255,255); font-size: 14px; position: absolute; top: 7px; right: 0; left: 0; transition: all 0.3s ease-in-out; } .popup>article>dl>dt>i:nth-of-type(1){ opacity: 0; } .popup>article>dl>dt.on>i:nth-of-type(1){ opacity: 1; } .popup>article>dl>dt.on>i:nth-of-type(2){ opacity: 0; } .popup>article>dl>dd{ width: 100%; max-height: 100px; padding: 0 10px; border-top: 1px solid rgb(46,168,225); overflow: auto; display: none; } body#dark .popup>article>dl>dd{ border-top-color: rgb(35,129,173); background-color: rgba(255,255,255,0.1); } .popup>article>dl>dd>a{ width: 100%; margin-bottom: 10px; display: flex; flex-flow: row nowrap; align-items: center; transition: all 0.12s ease-in-out; cursor: pointer; } .popup>article>dl>dd>a:nth-of-type(1){ margin-top: 10px; } .popup>article>dl>dd>a>img{ width: 20px; height: 20px; transition: all 0.12s ease-in-out; } .popup>article>dl>dd>a>span{ width: calc(100% - 30px); margin-left: 10px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.12s ease-in-out; } .popup>section{ width: 100%; height: 30px; padding: 5px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background-color: rgb(8,91,176); cursor: move; } body#dark .popup>section{ background-color: rgb(6,66,125); } .popup>section>article{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .popup>section>article>span{ color: rgb(255,255,255); font-size: 12px; font-weight: 300; cursor: pointer; } @media(max-width:480px){ .popup>div{ font-size: 12px; } } /* youtube */ #main_youtube_area{ width: 100%; height: auto; max-height: calc(100vh - 60px); overflow: hidden; } #main_youtube{ width: 100%; height: 0; max-height: calc(100vh - 60px); padding-top: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; } #main_youtube iframe,#main_youtube object,#main_youtube embed{ width: 100%; height: 100%; max-height: calc(100vh - 60px); position: absolute; top: 0; left: 0; } /* swiper slider */ .visual_slide{ width: calc(100% - 80px); height: calc((100vw - 80px) / 2); max-width: 1920px; max-height: 960px; margin: 40px auto 0; overflow: hidden; position: relative; transition: height 0.12s ease-in-out; } .visual_img{ width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; overflow: hidden; transition: all 0.12s ease-in-out; } .visual_img>a{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; cursor: pointer; } .visual_img>div{ width: 100%; height: auto; max-width: 1240px; margin-top: 300px; padding: 0 20px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; transition: all 0.12s ease-in-out; } .visual_img>div>h2, .visual_img>div>h4{ color: rgba(255,255,255,0.95); text-shadow: 2px 2px 3px rgba(0,0,0,0.7); font-size: 50px; line-height: 60px; font-weight: 500; overflow: hidden; transition: all 0.12s ease-in-out; } .visual_img>div>h4{ margin-top: 10px; } .visual_img>div>h6{ margin-top: 50px; color: rgba(255,255,255,0.8); font-size: 20px; font-weight: 500; text-shadow: 2px 2px 3px rgba(0,0,0,0.7); overflow: hidden; transition: all 0.12s ease-in-out; } .visual_slide_m{ display: none; } .visual_slide>figure{ width: 60px; height: 60px; margin: auto; border: 1px solid rgb(255,255,255); border-radius: 60px; position: absolute; right: 0; bottom: 30px; left: 0; z-index: 1; cursor: pointer; } .visual_slide>figure>div{ width: 15px; height: 2px; margin: auto; background-color: rgb(255,255,255); position: absolute; top: 5px; bottom: 0; } .visual_slide>figure>div:nth-of-type(1){ left: 27px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; transform: rotate(-40deg); } .visual_slide>figure>div:nth-of-type(2){ right: 27px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; transform: rotate(40deg); } @media all and (max-width:1400px){ .visual_slide{ width: calc(100% - 40px); height: calc((100vw - 40px) / 2); margin-top: 20px; } } @media all and (max-width:1200px){ .visual_img>div{ margin-top: 60px; } .visual_img>div>h2, .visual_img>div>h4{ font-size: 40px; line-height: 50px; } .visual_img>div>h6{ padding-top: 20px; font-size: 18px; } } @media all and (max-width:960px){ .visual_img>div{ margin-top: 80px; } .visual_img>div>h2, .visual_img>div>h4{ font-size: 35px; line-height: 40px; } .visual_img>div>h6{ padding-top: 15px; font-size: 16px; } } @media all and (max-width:740px){ .visual_slide{ display: none; } .visual_slide_m{ width: 100%; height: calc(100vw / 9 * 16); min-height: calc(320px / 9 * 16); display: block; position: relative; overflow: hidden; transition: height 0.12s ease-in-out; } .visual_img_m{ width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end; transition: all 0.12s ease-in-out; } .visual_img_m>a{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; cursor: pointer; } .visual_img_m>div{ width: 100%; height: auto; max-width: 1200px; margin-bottom: 190px; padding: 0 20px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; transition: all 0.12s ease-in-out; } .visual_img_m>div>h2, .visual_img_m>div>h4{ max-width: 100%; color: rgba(255,255,255,0.95); text-shadow: 2px 2px 3px rgba(0,0,0,0.7); font-size: 30px; font-weight: 500; text-align: center; word-break: keep-all; overflow: hidden; transition: all 0.12s ease-in-out; } .visual_img_m>div>h4{ margin-top: 5px; } .visual_img_m>div>h6{ max-width: 100%; margin-top: 30px; color: rgba(255,255,255,0.8); font-size: 16px; font-weight: 100; text-align: center; word-break: keep-all; text-shadow: 2px 2px 3px rgba(0,0,0,0.7); overflow: hidden; transition: all 0.12s ease-in-out; } .visual_img_m>div>h6>span:nth-of-type(2){ display: none; } .visual_slide_m>figure{ width: 50px; height: 50px; margin: auto; border: 1px solid rgb(255,255,255); border-radius: 60px; position: absolute; right: 0; bottom: 30px; left: 0; z-index: 1; cursor: pointer; } .visual_slide_m>figure>div{ width: 15px; height: 2px; margin: auto; background-color: rgb(255,255,255); position: absolute; top: 5px; bottom: 0; } .visual_slide_m>figure>div:nth-of-type(1){ left: 22px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; transform: rotate(-40deg); } .visual_slide_m>figure>div:nth-of-type(2){ right: 22px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; transform: rotate(40deg); } } @media all and (max-width:600px){ .visual_img_m>div{ margin-bottom: 160px; } .visual_img_m>div>h2, .visual_img_m>div>h4{ font-size: 25px; } .visual_img_m>div>h6{ padding-top: 10px; font-size: 14px; } .visual_img_m>div>h6>span:nth-of-type(1){ display: none; } .visual_img_m>div>h6>span:nth-of-type(2){ display: inline; } } @media all and (max-width:480px){ .visual_img_m>div{ margin-bottom: 140px; } .visual_img_m>div>h2, .visual_img_m>div>h4{ font-size: 22px; } .visual_img_m>div>h6{ padding-top: 5px; } .visual_slide_m>figure{ display: none; } } @media all and (max-width:400px){ .visual_img_m>div{ margin-bottom: 120px; } .visual_img_m>div>h2, .visual_img_m>div>h4{ font-size: 18px; } .visual_img_m>div>h6{ font-size: 12px; } } #main_01{ width: 80%; max-width: 1600px; min-width: 1360px; margin: 40px auto; display: flex; flex-flow: row wrap; transition: all 0.2s ease-in-out; } #main_01>article{ width: calc(50% - 10px); display: flex; flex-flow: row wrap; transition: all 0.2s ease-in-out; } #main_01>article:nth-of-type(2){ margin-left: 20px; } #main_01>article>a{ width: calc(50% - 10px); height: 340px; border-radius: 20px; position: relative; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; transition: all 0.12s ease-in-out; cursor: pointer; } #main_01>article>a:nth-of-type(2n){ margin-left: 20px; } #main_01>article>a:nth-of-type(3){ margin-top: 20px; } #main_01>article>a:nth-of-type(4){ margin-top: 20px; } #main_01>article>a>figure{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.6); transition: all 0.2s ease-in-out; } #main_01>article>a:hover>figure{ background-color: rgba(0,0,0,0.3); } #main_01>article>a>h4{ color: rgb(255,255,255); font-size: 28px; font-weight: 500; position: relative; z-index: 1; } body#dark #main_01>article>a>h4{ color: rgb(220,220,220); } #main_01>article>a>p{ margin-top: 5px; color: rgb(255,255,255); font-size: 16px; font-weight: 400; font-family: 'Satisfy', cursive; opacity: 0.5; position: relative; z-index: 1; } body#dark #main_01>article>a>p{ color: rgb(220,220,220); } #main_01>a{ width: calc(50% - 10px); height: 700px; margin-left: auto; padding: 60px 40px; border-radius: 20px; background-color: rgb(255,255,255); display: block; position: relative; box-shadow: 10px 10px 30px 5px rgba(0,0,0,0.4); overflow: hidden; transition: all 0.2s ease-in-out; cursor: pointer; } #main_01>a:hover{ box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2); } body#dark #main_01>a{ background-color: rgb(42,42,42); background-image: url(/static/img/dark_pattern.jpg); background-position: center top 0; background-repeat: repeat; background-size: auto; } #main_01>a>h6{ width: 100%; color: rgb(255,255,255); font-size: 20px; font-weight: 500; position: relative; z-index: 10; transition: all 0.2s ease-in-out; } body#dark #main_01>a>h6{ color: rgb(220,220,220); } #main_01>a>h4{ width: 100%; margin-top: 5px; color: rgb(255,255,255); font-size: 40px; font-weight: 500; line-height: 1.3; position: relative; z-index: 10; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: all 0.2s ease-in-out; } body#dark #main_01>a>h4{ color: rgb(220,220,220); } #main_01>a>p{ width: 70%; margin-top: 3px; color: rgb(255,255,255); font-size: 16px; font-weight: 400; position: relative; z-index: 10; transition: all 0.2s ease-in-out; } #main_01>a>p:nth-of-type(1){ margin-top: 40px; } body#dark #main_01>a>p{ color: rgb(220,220,220); } #main_01>a>figure{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background-position: 99% 100%; background-size: auto 75%; background-repeat: no-repeat; transition: all 0.3s ease-in-out; } #main_01>a>svg:nth-of-type(1){ width: 100%; height: auto; fill: rgb(8,91,176); position: absolute; top: 0; right: 0; z-index: 0; transition: all 0.12s ease-in-out; } body#dark #main_01>a>svg:nth-of-type(1){ fill: rgb(6,66,125); transition: all 0.2s ease-in-out; } #main_01>a>svg:nth-of-type(2){ width: 50px; height: 50px; position: absolute; top: 10px; right: 10px; z-index: 1; fill: rgba(255,255,255,0); transition: all 0.2s ease-in-out; } #main_01>a:hover>svg:nth-of-type(2){ fill: rgba(255,255,255,0.2); } @media(max-width:1800px){ #main_01>article>a{ height: 290px; } #main_01>article>a>h4{ font-size: 24px; } #main_01>article>a>p{ font-size: 14px; } #main_01>a{ height: 600px; } } @media(max-width:1400px){ #main_01{ width: calc(100% - 40px); min-width: calc(100% - 40px); margin: 20px; } } @media(max-width:1200px){ #main_01>article>a{ height: calc(25vw - 25px); } #main_01>article>a>h4{ font-size: 22px; } #main_01>article>a>p{ font-size: 12px; } #main_01>a{ height: calc(50vw - 30px); padding: 3.3vw; } #main_01>a>h6{ font-size: 18px; } #main_01>a>h4{ font-size: 32px; } } @media(max-width:960px){ #main_01>article>a{ border-radius: 2.2vw; } #main_01>article>a>h4{ font-size: 2.3vw; } #main_01>article>a>p{ font-size: 1.3vw; } #main_01>a{ border-radius: 2.2vw; } #main_01>a>h6{ font-size: 1.8vw; } #main_01>a>h4{ font-size: 3.2vw; } #main_01>a>p{ font-size: 1.7vw; } #main_01>a>p:nth-of-type(1){ margin-top: 4.2vw; } #main_01>a>svg:nth-of-type(2){ width: 5.1vw; height: 5.1vw; } } @media(max-width:740px){ #main_01>article{ order: 2; width: 100%; flex-flow: row nowrap; justify-content: space-between; } #main_01>article:nth-of-type(2){ margin-top: 20px; margin-left: 0; } #main_01>article>a{ width: calc(25vw - 25px); } #main_01>article>a:nth-of-type(2n){ margin-left: 0; } #main_01>article>a:nth-of-type(3){ margin-top: 0; } #main_01>article>a:nth-of-type(4){ margin-top: 0; } #main_01>article>a>h4{ font-size: 18px; } #main_01>article>a>p{ font-size: 12px; } #main_01>a{ order: 1; width: 100%; height: calc(50vw - 30px); margin-bottom: 20px; padding: 20px; border-radius: 10px; } #main_01>a>h6{ width: 60%; font-size: 14px; } #main_01>a>h4{ width: 60%; font-size: 24px; } #main_01>a>p{ width: 60%; font-size: 13px; } #main_01>a>p:nth-of-type(1){ margin-top: 4vw; } #main_01>a>figure{ background-size: auto 95%; } #main_01>a>svg:nth-of-type(1){ top: -30vw; } } @media(max-width:620px){ #main_01>article>a>h4{ font-size: 3vw; } #main_01>article>a>p{ font-size: 2vw; } } @media(max-width:480px){ #main_01>article{ flex-flow: row wrap; } #main_01>article>a{ width: calc(50vw - 30px); height: calc(50vw - 30px); min-width: 130px; min-height: 130px; } #main_01>article>a:nth-of-type(1){ margin-bottom: 20px; } #main_01>article>a:nth-of-type(2){ margin-bottom: 20px; } #main_01>article>a>h4{ font-size: 18px; } #main_01>article>a>p{ font-size: 12px; } #main_01>a{ width: 100%; height: calc(100vw - 40px); min-height: 280px; } #main_01>a>h6{ width: 100%; } #main_01>a>h4{ width: 100%; } #main_01>a>p{ width: 50%; font-size: 14px; } #main_01>a>p:nth-of-type(1){ margin-top: 30px; } #main_01>a>figure{ background-size: auto 75%; } #main_01>a>svg:nth-of-type(1){ top: 0; } } /* 회원가입 완료 */ #join_success{ width: 100%; height: 670px; padding: 0 20px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } #join_success>div{ width: 60px; height: 60px; border-radius: 60px; color: rgb(255,255,255); font-size: 30px; text-align: center; line-height: 60px; background-color: rgb(48,131,242); } body#dark #join_success>div{ color: rgb(220,220,220); background-color: rgb(6,66,125); } #join_success>div>i{ color: inherit; } #join_success>h4{ margin-top: 2vh; font-size: 20px; font-weight: 400; text-align: center; } #join_success>h4>span{ font-size: 24px; font-weight: 500; } #join_success>p{ margin-top: 1vh; font-size: 16px; font-weight: 300; text-align: center; } #join_success>a{ width: 100%; height: 45px; max-width: 380px; margin-top: 5vh; border-radius: 7px; color: rgb(255,255,255); font-size: 20px; font-weight: 300; background-color: rgb(48,131,242); text-align: center; line-height: 43px; transition: all 0.12s ease-in-out; cursor: pointer; } body#dark #join_success>a{ color: rgb(220,220,220); background-color: rgb(6,66,125); } @media(max-width:480px){ #join_success>div{ width: 50px; height: 50px; border-radius: 50px; font-size: 24px; line-height: 50px; } #join_success>h4{ font-size: 16px; } #join_success>h4>span{ font-size: 20px; } #join_success>p{ font-size: 14px; } #join_success>a{ height: 40px; font-size: 16px; line-height: 38px; } } /* 로그인 페이지 */ #member{ width: 100%; height: 1000px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; position: relative; transition: all 0.12s ease-in-out; } #member>figure{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5); transition: all 0.12s ease-in-out; } #member>dl{ width: calc(100% - 40px); height: calc(100% - 40px); max-width: 1200px; max-height: 600px; position: relative; transition: all 0.12s ease-in-out; } #member>dl>dt{ width: 100%; height: 90%; margin: auto; border-radius: 20px; position: absolute; top: 5%; right: 0; bottom: 5%; left: 0; background-color: rgb(36,42,45); display: flex; flex-flow: row nowrap; overflow: hidden; oopacity: 1; transition: all 0.3s ease-in-out; } #member>dl>dt>div{ width: 40%; min-width: 368px; padding: 10% 5%; transition: all 0.12s ease-in-out; } #member>dl>dt>div:nth-of-type(2){ margin-left: 20%; } #member>dl>dt>div>h3{ width: 100%; font-size: 32px; font-weight: 400; transition: all 0.12s ease-in-out; } #member>dl>dt>div>p{ width: 100%; margin-top: 10px; font-size: 14px; font-weight: 300; transition: all 0.12s ease-in-out; } #member>dl>dt>div>p:nth-of-type(1){ margin-top: 20px; } #member>dl>dt>div>button{ width: 170px; height: 45px; margin-top: 50px; border: 1px solid rgb(255,255,255); border-radius: 7px; font-size: 16px; font-weight: 300; transition: all 0.12s ease-in-out; cursor: pointer; } body#dark #member>dl>dt>div>button{ border-color: rgb(220,220,220); } #member>dl>dt>div>button:hover{ color: rgb(36,42,45); background-color: rgb(255,255,255); } body#dark #member>dl>dt>div>button:hover{ background-color: rgb(220,220,220); } #member>dl>dd{ width: 55%; height: 100%; border-radius: 20px; background-color: rgb(255,255,255); position: absolute; top: 0; left: 5%; transition: all 0.6s cubic-bezier(.18,1.18,.54,1.22); overflow: hidden; } #member>dl>dd.right{ left: 40%; } body#dark #member>dl>dd{ background-color: rgb(42,42,42); background-image: url(/static/img/dark_pattern.jpg); background-position: center top 0; background-repeat: repeat; background-size: auto; } #member>dl>dd>form{ width: 80%; height: 80%; margin: 10%; position: absolute; transition: all 0.6s cubic-bezier(.18,1.18,.54,1.22); display: flex; flex-flow: column nowrap; } #member>dl>dd>form:nth-of-type(1){ left: 0; } #member>dl>dd>form:nth-of-type(2){ left: 100%; } #member>dl>dd.right>form:nth-of-type(1){ left: -100%; } #member>dl>dd.right>form:nth-of-type(2){ left: 0; } #member>dl>dd>form>a.shift_btn{ position: absolute; top: 0; right: 0; z-index: -1; opacity: 0; color: rgb(220,220,220); font-size: 14px; font-weight: 400; transition: all 0.12s ease-in-out; cursor: pointer; } #member>dl>dd>form>h2{ width: 100%; color: rgb(48,131,242); font-size: 30px; font-weight: 500; transition: all 0.12s ease-in-out; } body#dark #member>dl>dd>form>h2{ color: rgb(46,168,225); } #member>dl>dd>form>h4{ width: 100%; margin-top: 15px; font-size: 16px; font-weight: 400; transition: all 0.12s ease-in-out; } #member>dl>dd>form>input{ width: 100%; padding: 5px; border-bottom: 1px solid rgb(220,220,220); font-size: 16px; font-weight: 400; transition: all 0.12s ease-in-out; } #member>dl>dd>form>h6{ width: 100%; padding: 5px; color: rgb(176,36,26); font-size: 12px; font-weight: 400; display: none; transition: unset; } body#dark #member>dl>dd>form>h6{ color: rgb(237,202,202); } #member>dl>dd>form>div{ width: 100%; margin-top: 10px; display: flex; flex-flow: row nowrap; justify-content: space-between; transition: all 0.12s ease-in-out; } #member>dl>dd>form>div>label{ display: flex; flex-flow: row nowrap; align-items: center; transition: all 0.12s ease-in-out; cursor: pointer; } #member>dl>dd>form>div>label>svg{ width: 16px; height: 16px; min-width: 16px; position: relative; top: 1px; transition: all 0.12s ease-in-out; } #member>dl>dd>form>div>label>svg path{ fill: rgb(204,204,204); transition: all 0.12s ease-in-out; } body#dark #member>dl>dd>form>div>label>svg path{ fill: rgb(185,185,185); } #member>dl>dd>form>div>label.on>svg path{ fill: rgb(48,131,242); } body#dark #member>dl>dd>form>div>label.on>svg path{ fill: rgb(46,168,225); } #member>dl>dd>form>div>label>input{ display: none; } #member>dl>dd>form>div>label>p{ margin-left: 5px; color: rgb(204,204,204); font-size: 14px; transition: all 0.12s ease-in-out; } body#dark #member>dl>dd>form>div>label>p{ color: rgb(185,185,185); } #member>dl>dd>form>div>label>p>span{ color: inherit; } #member>dl>dd>form>div>label.on>p{ color: rgb(48,131,242); } body#dark #member>dl>dd>form>div>label.on>p{ color: rgb(46,168,225); } #member>dl>dd>form>div>button{ color: rgb(102,102,102); font-size: 14px; transition: all 0.12s ease-in-out; cursor: pointer; } #member>dl>dd>form>button{ width: 100%; height: 45px; border-radius: 7px; color: rgb(255,255,255); font-size: 20px; font-weight: 300; background-color: rgb(48,131,242); position: absolute; bottom: 0; left: 0; transition: all 0.12s ease-in-out; cursor: pointer; } body#dark #member>dl>dd>form>button{ color: rgb(220,220,220); background-color: rgb(6,66,125); } @media(max-width:960px){ #member{ height: 580px; } #member>dl{ height: 540px; max-height: 100%; } #member>dl>dt{ width: 0; height: 0; opacity: 0; } #member>dl>dd{ width: 100%; left: 0 !important; position: relative; background: rgba(0,0,0,0.7) !important; } #member>dl>dd>form{ width: calc(100% - 60px); height: 480px; margin: 30px; transition: all 0.6s ease-in-out; } #member>dl>dd>form>a.shift_btn{ z-index: 0; opacity: 1; } #member>dl>dd>form>h2{ color: rgb(46,168,225); font-size: 24px; } #member>dl>dd>form>h4{ color: rgb(220,220,220); } #member>dl>dd>form>input{ border-bottom-color: rgb(85,85,85); color: rgb(220,220,220); } #member>dl>dd>form>h6{ color: rgb(237,202,202); } #member>dl>dd>form>div>label>svg path{ fill: rgb(185,185,185); } #member>dl>dd>form>div>label.on>svg path{ fill: rgb(46,168,225); } #member>dl>dd>form>div>label>p{ color: rgb(185,185,185); } #member>dl>dd>form>div>label.on>p{ color: rgb(46,168,225); } #member>dl>dd>form>div>button{ color: rgb(220,220,220); } #member>dl>dd>form>button{ color: rgb(220,220,220); background-color: rgb(6,66,125); } } @media(max-width:480px){ #member{ height: 500px; } #member>dl{ height: 460px; } #member>dl>dd>form{ width: calc(100% - 40px); height: 420px; margin: 20px; } #member>dl>dd>form>a.shift_btn{ font-size: 13px; } #member>dl>dd>form>h2{ font-size: 20px; } #member>dl>dd>form>h4{ font-size: 14px; } #member>dl>dd>form>input{ font-size: 14px; } #member>dl>dd>form>div>label>p{ font-size: 13px; } #member>dl>dd>form>div>button{ font-size: 13px; } #member>dl>dd>form>button{ height: 35px; font-size: 16px; } } @media(max-width:380px){ #member>dl>dd>form>div>label>p>span{ display: none; } } /* 회원정보수정 페이지 */ #member_edit{ width: 100%; max-width: 1920px; margin: auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; position: relative; transition: all 0.12s ease-in-out; } #member_edit>dl{ width: 50%; border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row wrap; transition: all 0.12s ease-in-out; } body#dark #member_edit>dl{ border-bottom-color: rgb(85,85,85); } #member_edit>dl.full_width{ width: 100%; border-left-width: 0 !important; } #member_edit>dl.right_dl{ border-left: 1px solid rgb(220,220,220); } body#dark #member_edit>dl.right_dl{ border-left-color: rgb(85,85,85); } #member_edit>dl:nth-of-type(1){ border-top: 1px solid rgb(185,185,185); } #member_edit>dl:nth-of-type(2){ border-top: 1px solid rgb(185,185,185); } body#dark #member_edit>dl:nth-of-type(1){ border-top: 1px solid rgb(85,85,85); } body#dark #member_edit>dl:nth-of-type(2){ border-top: 1px solid rgb(85,85,85); } #member_edit>dl>dt{ width: 100px; padding: 10px 0; border-right: 1px solid rgb(235,235,235); color: rgb(18,18,18); font-size: 14px; font-weight: 700; text-align: center; word-break: keep-all; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; } body#dark #member_edit>dl>dt{ border-right-color: rgb(85,85,85); color: rgb(220,220,220); } #member_edit>dl>dd{ width: calc(100% - 100px); display: flex; flex-flow: row wrap; align-items: center; position: relative; transition: all 0.12s ease-in-out; } #member_edit>dl>dd>input{ width: 100%; height: 40px; padding: 10px; border: 0; outline: 0; background-color: transparent; font-size: 14px; } body#dark #member_edit>dl>dd>input{ color: rgb(220,220,220); } #member_edit>dl>dd>input.only_view{ color: rgb(185,185,185); } #member_edit>dl>dd>input#zip{ width: 70px; } #member_edit>dl>dd>input#addr1{ width: calc(25% - 70px); } #member_edit>dl>dd>input#addr3{ width: 25%; } #member_edit>dl>dd>input#addr2{ width: 25%; } #member_edit>dl>dd>input#addr_jibeon{ width: calc(25% - 80px); } #member_edit>dl>dd>span#guide{ display: none !important; } #member_edit>dl>dd>input#address_btn{ width: 80px; height: 20px; margin: 10px 0; padding: 0; border-radius: 6px; color: rgb(255,255,255); font-size: 12px; font-weight: 500; text-align: center; line-height: 18px; background-color: rgb(153,153,153); transition: all 0.12s ease-in-out; cursor: pointer; } body#dark #member_edit>dl>dd>input#address_btn{ background-color: rgb(102,102,102); } #member_edit>dl>dd.input_birth>label{ width: auto; height: 24px; position: absolute; top: 8px; right: 15px; display: flex; flex-flow: row nowrap; cursor: pointer; } body#dark #member_edit>dl>dd.input_birth>label{ color: rgb(220,220,220); } #member_edit>dl>dd.input_birth>label>svg{ width: 16px; height: 16px; min-width: 16px; margin: 4px 5px 4px 0; } #member_edit>dl>dd.input_birth>label>svg path{ fill: rgb(204,204,204); transition: all 0.12s ease-in-out; } body#dark #member_edit>dl>dd.input_birth>label>svg path{ fill: rgb(185,185,185); } #member_edit>dl>dd.input_birth>label.on>svg path{ fill: rgb(8,91,176); } body#dark #member_edit>dl>dd.input_birth>label.on>svg path{ fill: rgb(46,168,225); } #member_edit>dl>dd.input_birth>label>input{ display: none; } #member_edit>dl>dd.input_birth>label>span{ color: rgb(204,204,204); font-size: 14px; line-height: 24px; transition: all 0.12s ease-in-out; } body#dark #member_edit>dl>dd.input_birth>label>span{ color: rgb(185,185,185); } #member_edit>dl>dd.input_birth>label.on>span{ color: rgb(8,91,176); } body#dark #member_edit>dl>dd.input_birth>label.on>span{ color: rgb(46,168,225); } #member_edit>dl>dd>select{ width: 100%; height: 40px; padding: 10px; border: 0; outline: 0; font-size: 14px; } body#dark #member_edit>dl>dd>select{ background-color: rgb(42,42,42); background-image: url(/static/img/dark_pattern.jpg); background-position: center top 0; background-repeat: repeat; background-size: auto; } @media(max-width:1800px){ #member_edit>dl>dd>input#addr1{ width: calc(50% - 70px); } #member_edit>dl>dd>input#addr3{ width: 50%; } #member_edit>dl>dd>input#addr2{ width: 50%; height: 30px; padding-top: 0; } #member_edit>dl>dd>input#addr_jibeon{ width: calc(50% - 80px); height: 30px; padding-top: 0; } #member_edit>dl>dd>input#address_btn{ margin-top: 0; } } @media(max-width:960px){ #member_edit>dl{ width: 100%; } #member_edit>dl.right_dl{ border-left-width: 0; } #member_edit>dl:nth-of-type(2){ border-top-width: 0 !important; } #member_edit>dl>dt{ padding: 7px 0; font-size: 12px; } #member_edit>dl>dd>input{ height: 31px; padding: 7px; font-size: 12px; } #member_edit>dl>dd>input::placeholder{ font-size: 12px; } #member_edit>dl>dd>input::-webkit-input-placeholder{ font-size: 12px; } #member_edit>dl>dd>input::-ms-input-placeholder{ font-size: 12px; } #member_edit>dl>dd>input#zip{ width: 60px; } #member_edit>dl>dd>input#addr1{ width: calc(50% - 60px); } #member_edit>dl>dd>select{ height: 31px; padding: 7px; font-size: 12px; } #member_edit>dl>dd.input_birth>label{ height: 18px; top: 7px; right: 10px; } #member_edit>dl>dd.input_birth>label>svg{ width: 14px; height: 14px; min-width: 14px; margin: 2px 3px 2px 0; } #member_edit>dl>dd.input_birth>label>span{ font-size: 12px; line-height: 18px; } } @media(max-width:720px){ #member_edit>dl>dd>input#zip{ order: 1; width: calc(100% - 70px); } #member_edit>dl>dd>input#addr1{ order: 3; width: 50%; height: 24px; padding-top: 0; } #member_edit>dl>dd>input#addr3{ order: 4; width: 50%; height: 24px; padding-top: 0; } #member_edit>dl>dd>input#addr2{ order: 5; width: 50%; height: 24px; } #member_edit>dl>dd>input#addr_jibeon{ order: 6; width: 50%; height: 24px; } #member_edit>dl>dd>input#address_btn{ order: 2; width: 70px; height: 17px; margin: 7px 0; font-size: 10px; } } @media(max-width:480px){ #member_edit>dl>dd>input#addr1{ width: 100%; } #member_edit>dl>dd>input#addr3{ width: 100%; } #member_edit>dl>dd>input#addr2{ width: 100%; } #member_edit>dl>dd>input#addr_jibeon{ width: 100%; } } /* */