/* webfonts */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* *******************************************/ /* global */ /* *******************************************/ .bgPri {background-color: var(--SubColor02);} .bgPriDark {background-color: var(--SubColor03);} .bgGrayLight {background-color: var(--box02);} .bgGrayDark {background-color: var(--box03);} .pointcolor1 {color:var(--PointColor01) !important;} .pointcolor2 {color:var(--PointColor02) !important;} .pointcolor3 {color:var(--PointColor03) !important;} .subcolor {color:var(--SubColor02) !important;} .subcolor2 {color:var(--SubColor03) !important;} .subcolor3 {color:var(--SubColorRed02) !important;} .subcolorRed {color:var(--SubColorRed02) !important;} .u_line {text-decoration: underline !important} .t_line {text-decoration: line-through !important} .al {text-align: left !important} .ar {text-align: right !important} .ac {text-align: center !important} /* Margin,Padding*/ .mt0 {margin-top:0rem !important} .mt5 {margin-top:.5rem !important} .mt48 {margin-top:4.8rem !important} .mt24 {margin-top:2.4rem !important} .mt12 {margin-top:1.2rem !important} .mt10 {margin-top:1rem !important} .mt15 {margin-top:1.5rem !important} .mt16 {margin-top:1.6rem !important} .mt20 {margin-top:2rem !important} .mt30 {margin-top:3rem !important} .mt40 {margin-top:4rem !important} .mt50 {margin-top:5rem !important} .mt60 {margin-top:6rem !important} .mt70 {margin-top:6rem !important} .mt80 {margin-top:6rem !important} .mt90 {margin-top:6rem !important} .mt100 {margin-top:10rem !important} .mt-5 {margin-top:.5rem !important} .mt-10 {margin-top:-1rem !important} .mt-20 {margin-top:-2rem !important} .mt-15 {margin-top:-1.5rem !important} .mb-10 {margin-bottom:-1rem !important} .mb0 {margin-bottom:0rem !important} .mb5 {margin-bottom:.5rem !important} .mb10 {margin-bottom:1rem !important} .mb20 {margin-bottom:2rem !important} .mb30 {margin-bottom:3rem !important} .mb40 {margin-bottom:4rem !important} .mb50 {margin-bottom:5rem !important} .mb60 {margin-bottom:6rem !important} .mb100 {margin-bottom:10rem !important} .noticetxt {font-size: 1.2rem; font-weight: 400; color:var(--SubColor03); } .das_ttbb {font-size:2rem; font-weight: 800; line-height: 120%; color:var(--TextColor07); letter-spacing:-0.02rem;} .das_ttb {font-size:2rem; font-weight: 400; line-height: 120%; color:var(--TextColor07); letter-spacing:-0.02rem;} .das_ttbsb {font-size:1.6rem; font-weight: 800; line-height: 120%; color:var(--TextColor07); letter-spacing:-0.02rem;} .das_ttbs {font-size:1.6rem; font-weight: 400; line-height: 120%; color:var(--TextColor07); letter-spacing:-0.02rem;} .das_ttmb {font-size:1.3rem; font-weight: 600; line-height: 120%; color:var(--TextColor07); letter-spacing:-0.02rem;} .das_ttm {font-size:1.3rem; font-weight: 400; color:var(--TextColor07); letter-spacing:-0.02rem;} .das_ttsb {font-size: 1.2rem; font-weight: 600; color:var(--TextColor04); letter-spacing:-0.02rem;} .das_tts {font-size: 1.2rem; font-weight: 400; color:var(--TextColor04); letter-spacing:-0.02rem;} .das_chk_txt {font-size: 1.2rem; font-weight: 400; color:var(--TextColor07); padding-top: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .das_line {width:100%; height:0rem; border-bottom:.1rem solid var(--box04); background-color:transparent; margin:1.5rem 0;} /* 약관 텍스트에어리어박스 */ .textareaBox {width:100%; height:15rem; font-size:1.2rem;color:var(--TextColor03); line-height: 160%; border-radius: var(--border-R6); background-color:var(--box02); padding:3rem; overflow-y: auto;} .textareaBox::-webkit-scrollbar {width: 1rem;} .textareaBox::-webkit-scrollbar-thumb {background-color: var(--box03);border-radius: 1rem;background-clip: padding-box;} .textareaBox::-webkit-scrollbar-track {background-color: transparent; border-radius: 1rem;} /*admin-dashboard에 사용한 flex박스*/ .flexRowBox {width:100%; display: flex; flex-direction: row; gap: 1.5%;} .flexColBox {width:100%; display: flex; flex-direction: column; gap: 1.5%;} .justify_spaA {justify-content: space-around;} .justify_spaB {justify-content: space-between;} .flex_basis25 {flex-basis:25%;} .flex_basis33 {flex-basis:33.3%;} .flex_basis50 {flex-basis:50%;} .flex_basis100 {flex-basis:100%;} .flex1of4 {width:25%;} .flex1of3 {width:33%;} .flex1of2 {width:50%;} .flex1of1 {width:100%;} .RoundBox1 {padding:2rem; margin:1rem 0; border-radius:var(--border-R6); background-color: var(--box02);} .RoundBox2 {padding:2rem; border-radius:var(--border-R6); background-color: var(--box03);} @media (max-width: 860px) { .flexRowBox {width:100%; display: flex; flex-direction: column;} .flexRowBox.RoundBox2 {width:100%; display: flex; flex-direction: row;} /*.flexRowBox .flex1of4 {width:50%; padding:.7rem 0;}*/ } html {font-size:62.5%;line-height:normal;margin: 0;-webkit-touch-callout:none;height: 100vh; /*background-color: var(--PointColor02);*/} body {} /* 기본 대형 인풋요소 */ input[type=text], input[type=password], select { width:100%; border: 0.1rem solid var(--box04); padding:0 1rem; height: 4.8rem; background: var(--box00); font-size:1.8rem; font-weight:600; color:var(--PointColor02); text-align: center; line-height: 4rem; border-radius: var(--border-R6);} input[type=text].on {border: 3px solid var(--PointColor02); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; box-sizing: border-box;} input[type=text].off:hover {border: 0.1rem solid var(--box04);} input[type=text]:hover, input[type=text]:focus, input[type=password]:hover, input[type=password]:focus, select:hover {border: 3px solid var(--PointColor02); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; box-sizing: border-box;} input::placeholder {color:var(--TextColor02); font-weight:300;} input:hover::placeholder { font-weight:300; visibility: none;} /* 기본 소형 인풋요소 */ input[type=text].mini, input[type=password].mini, select.mini { width:100%; border: 0.1rem solid var(--box04); padding:0 1rem; height: 3.8rem; background: var(--box00); font-size:1.4rem; font-weight:500; color:var(--TextColor06); text-align: center; line-height: 4rem; border-radius: var(--border-R6);} input[type=text].mini.on {border: 3px solid var(--PointColor02); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; box-sizing: border-box;} input[type=text].mini.off:hover {border: 0.1rem solid var(--box04);} input[type=text].mini:hover, input[type=password].mini:hover, select.mini:hover {border: 3px solid var(--PointColor02); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; box-sizing: border-box;} input.mini::placeholder {color:var(--TextColor02); font-weight:300;} input.mini:hover::placeholder { font-weight:300; visibility: none;} label {display:inline-block; min-width:30%; line-height: 0rem; /*padding: 0.2em 0.4em;*/} span {vertical-align: middle; margin-left: 5px;} input[type=radio], input[type=checkbox] {vertical-align: middle; appearance: none; border: max(2px, 0.1em) solid var(--TextColor02); border-radius: 50%; width: 1.5em; height: 1.5em; transition: border 0.1s ease-in-out; background-color: var(--box00); margin-right:0.5rem; cursor: pointer;} input[type=checkbox] {border-radius: 0.6rem; width: 1.5em; height: 1.5em; transition: border 0.1s ease-in-out; background-color: var(--box00);} input[type="radio"]:checked, input[type=checkbox]:checked {border: 0.2em solid var(--TextColor02); background-color: var(--PointColor02); color: var(--PointColor02);} input[type="radio"]:focus-visible, input[type="checked"]:focus-visible {outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted var(--TextColor02);} input[type="radio"]:hover, input[type="checked"]:hover { box-shadow: 0 0 0 max(4px, 0.2em) lightgray; cursor: pointer;} input[type="radio"]:disabled, input[type="checked"]:disabled { background-color: lightgray; box-shadow: none; opacity: 0.7; cursor: not-allowed;} input[type="radio"]:disabled + span, input[type="checked"]:disabled + span { opacity: 0.7; cursor: not-allowed;} input[type=text]:read-only, textarea:read-only {border:0; background-color: var(--box03) !important;} input[type=text]:read-only:hover, textarea:read-only:hover {border:0;} input::placeholder {font-size: 1.4rem;} textarea { width:100%; border: 0.1rem solid var(--box04); padding:1rem; min-height: 5rem; background: var(--box00); font-size:1.4rem; font-weight:500; color:var(--TextColor04); text-align: left; line-height: 2rem; border-radius: var(--border-R6); resize: vertical;} textarea::placeholder {color:var(--TextColor05); font-size:15px; font-weight:300; resize : vertical; } textarea:hover::placeholder {color:var(--TextColor05); font-weight:300; visibility: none;} /*배경색 있을경우의 체크박스 색상 오렌지로*/ input[type=radio].Orange, input[type=checkbox].Orange {border: max(2px, 0.1em) solid var(--SubColor02); } input[type="radio"].Orange:checked, input[type=checkbox].Orange:checked {border: 0.4em solid var(--SubColor02); background-color: var(--SubColor03);} .searchInput {height:unset !important;} /*필수입력체크*/ sup { font-size: 1.2rem; color:var(--SubColorRed02); font-weight: 600;} .radio2ea {width:100%; display: flex; flex-direction: row;} .radio2ea div {width:50%;} .radio2ea div input[type=radio] {margin-bottom: 1rem;} /* dim */ .dim {position: fixed; width:100%; height:100%; top:0; z-index: 20; background: var(--DimBlack); opacity: 0.8} .dim .img_center{display: flex; height: 100%; justify-content: center; align-items: center;} .dim .img_center img{width:100px; hieght:100px;} .transparentLayer {position: fixed !important;top: 0;width: 100%;height: 100%;overflow: hidden; z-index: 999} .layer_center {position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;display: block; background:none; margin:0} .layer_center .content {display:inline-block;vertical-align:middle;position:relative; width: 35.4rem;background: var(--box02); border-radius:var(--border-R6); padding:2rem 2rem 2.4rem 2rem;} .layer_center .content .txt {min-height:4rem;font-size: 1.6rem; line-height:2.6rem; text-align: center; letter-spacing: -0.6px; padding-top:2rem; font-weight: 500;} .layer_center .content .txt .icon {font-size:2rem; vertical-align: middle;} .layer_center .content .txt_m {font-size:1.3rem; color: var(--TextColor06); display: block; padding-top:1rem; line-height:1.8rem;} .layer_center .content .txt_s {font-size:1.2rem; color: var(--TextColor03); } .layer_center .content .title {border-bottom:.1rem solid var(--box03); padding-bottom:2rem; margin-bottom: 1rem; font-size:1.8rem; font-weight: 700; line-height: 2rem; text-align: center; color:var(--PointColor02);} .layer_center .content .btn_area {display: block;margin-top:2rem} .layer_center .content .btn_area button {min-width:16rem} .layer_center .content .btn_area.col2 {display: flex} .layer_center .content .btn_area.col2 button { flex: 1;min-width:10rem} .layer_center .content textarea { width:100%; font-size:1.2rem; resize: vertical;} .layer_center .chk-area {margin-left:-2rem;position: absolute; width:100%} .layer_center .chk-area .ip_chk {float:left} .layer_center .chk-area .ip_chk label {font-size:1.4rem; color:var(--TextColor00); font-weight:100; line-height: 1.8rem} .layer_center .chk-area input[type="checkbox"] + label:before {background: url(../img/form_set.png) no-repeat -8.5rem .8rem; background-size: 14rem auto} .layer_center .chk-area input:checked + label:before {background: url(../img/form_set.png) no-repeat 0rem -2.4rem; background-size: 14rem auto} .layer_center .chk-area button {background: url(../img/form_set.png) no-repeat -11rem 1rem;float:right;width:3rem; height:3rem; text-indent: -100px; overflow: hidden;background-size: 14rem auto} .layer_center .chk-area._top {top:-4rem} .layer_center .chk-area._bottom {bottom:-3rem} .toast_pop {width:100%; position:fixed;bottom:1rem; padding:2rem} .toast_pop .msg_box {line-height:2rem; background: var(--box03);opacity: 0.6;border-radius:var(--border-R6);color:var(--box00); padding:2rem; text-align:center} .layer_center .blank {display:inline-block; width:0; height:100%; vertical-align:middle} .layer_center .scrollbox_y {width:100%; max-height:15rem; padding:1rem; border-radius: var(--border-R6); overflow-y: auto; background-color:var(--box00);} .layer_center .scrollbox_y::-webkit-scrollbar {width: 1rem;} .layer_center .scrollbox_y::-webkit-scrollbar-thumb {background-color: var(--box03);border-radius: 1rem;background-clip: padding-box;} .layer_center .scrollbox_y::-webkit-scrollbar-track {background-color: transparent; border-radius: 1rem;} .layer_center .scrollbox_y .list{width:100%; padding:.5rem; text-align: left;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;} .layer_center .scrollbox_y .list i{cursor: pointer;} .layer_center .qrcode {width:10rem; height:10rem; margin:0 auto; background-size:cover; background-repeat: no-repeat;background-position: center; background-color: var(--box03);} .simpleTxtList {width:100%; padding:1rem; background-color: var(--box00); min-height:20rem; line-height: 180%; font-size:1.3rem;white-space: nowrap; overflow: hidden;text-overflow: ellipsis; } /* button */ .btn_area {display: flex; justify-content: space-between; margin-top:2.4rem; } .btn_margintop {margin-top:.5rem} .btn_area button { flex:1; line-height:2.2rem} .btn_b {background: var(--PointColor02); border-radius:var(--border-R6);color:var(--TextColor00); height:4.8rem; font-weight: 500; font-size:1.6rem; border:unset; cursor: pointer;} .btn_b:hover {background: var(--PointColor03); transition: 0.3s; cursor: pointer;} .btn_b .subtext {font-size: 1.2rem; font-weight: 400;} .btn_b.ty2 {border:1px solid var(--box04); color:var(--PointColor02); background: var(--box00);} .btn_b.ty2:hover {background: var(--box03); transition: 0.3s;} .btn_b.ty4 {border:1px solid var(--box03); color:var(--TextColor07 ); background: var(--box03);} .btn_b.ty4:hover {border:1px solid var(--PointColor02); color:var(--TextColor00); background: var(--PointColor02); cursor: pointer; transition: 0.3s;} /*.btn_b.ty3 {min-width:12rem; color: #777778; border:1px solid #c8c8c8;background: var(--box00);} .btn_b.ty4 {min-width:8.6rem;color: #555558;font-size:1.4rem; line-height:3rem;height:3.6rem;border: 1px solid #555558;background: var(--box00);} .btn_b.ty5 {min-width:10rem;color: #323232;font-size:1.6rem; line-height:1.8rem;height:4.8rem;border:1px solid var(--box00);background:#FBCC3B;} .btn_b.ty5:hover {background: #F6AB00; transition: 0.3s;} .btn_b.ty6 {color:#111118;background: #E1E1E8; text-align: left; padding-left: 1rem;} .btn_b.ty6 img:nth-child(2) {position: absolute; right: 3rem; text-align: right;} .btn_b.ty6:hover {background: #505564; transition: 0.3s;}*/ /*블루배경위의 진한블루버튼*/ .btn_b.ty7 {min-width:10rem; font-size:1.4rem; color: var(--TextColor00);background:var(--PointColor02); margin:0 !important;} .btn_b.ty7:hover {background: var(--PointColor03); transition: 0.3s;} /*블루배경위의 yellow버튼*/ .btn_b.ty8 {min-width:10rem; font-size:1.4rem; color: var(--TextColor07);background:var(--SubColor02); margin:0 !important;} .btn_b.ty8:hover {background: var(--SubColor03); transition: 0.3s;} .btn_m {width:100%;height:4.4rem;background: var(--PointColor02); border-radius:var(--border-R6);color:var(--TextColor00);border:unset;} .btn_m:hover {background: var(--PointColor03); transition: 0.3s; cursor: pointer;} .btn_m.ty2 {border:1px solid var(--PointColor02);color:var(--PointColor02);background: var(--box02);} .btn_m.ty2:hover {background: var(--box03); transition: 0.3s;} /*.btn_m.ty3 {border:1px solid #777778;color:#777778;background: #FDFDFF;}*/ .btn_m.ty4 {border:1px solid var(--box03); color:var(--TextColor07 ); background: var(--box03);} .btn_m.ty4:hover {border:1px solid var(--PointColor02); color:var(--TextColor00); background: var(--PointColor02); cursor: pointer; transition: 0.3s;} /*.btn_m.ty5 {min-width:10rem;color: #323232;font-size:1.4rem; line-height:1.8rem;height:4rem;border:1px solid var(--box00);background:#FBCC3B}*/ .btn_s {font-size: 1.2rem;line-height:1.8rem;width:100%;height:3.6rem;background: var(--box00); border-radius:var(--border-R6);border: 1px solid #E6E6E6} .btn_area button.off, .btn_m.off {background:var(--box05); color:var(--TextColor00)} .btn_area.fixed {position:absolute; width:calc(100% - 5rem); bottom: 2.4rem} .btn_area button:first-child {margin-right:.4rem} .btn_area button:last-child {margin-left:.4rem} .btn_area.inner {margin-top:2.4rem} .btn_area_c {text-align: center; margin-top:2.4rem} .btn_row2 {display: block} .btn_row2 button {width:100%; margin-top:1rem} /*** 파일 업로드 스타일 ***/ .filebox {width:100%;} .filebox input[type="file"] { position: absolute; width: .1rem; height: .1rem; padding: 0; margin: -0.1rem; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .filebox label { display: inline-block; width:100%; padding: 2.2rem 0rem; font-weight: 500; vertical-align: middle; text-align: center; font-size:1.4rem; color: var(--TextColor00); background:var(--PointColor02); cursor: pointer; border-radius: var(--border-R6); } .filebox label:hover {background: var(--PointColor03); transition: 0.3s;} /* named upload */ .filebox .upload-name { display: inline-block; width:100%; padding: 1.3rem; margin:.5rem 0; vertical-align: middle; background-color: var(--box00); border: 1px solid var(--box04); border-radius: var(--border-R6); -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; } /* 안내박스 */ .noticeBox {padding:1rem 1rem; margin: 1rem 0; border-radius:.3rem ; background-color: var(--box04); color:var(--TextColor02); font-weight: 400; font-size:1.2rem;line-height:200%; text-align:left; } /* 톱니바퀴 아이콘 */ .editIconOnTxt { width:1.4rem; padding:0 .3rem;} .editIconOnTxt:hover {filter: invert(68%) sepia(73%) saturate(5221%) hue-rotate(10deg) brightness(106%) contrast(106%); cursor: pointer;} .IconOnTxt { width:1.4rem; padding:0 .3rem 0 0;} .linkcursor { cursor: pointer;} .linkcursor:hover { color:var(--SubColorRed02);} /**이미지 뷰어**/ .scrollLock {overflow:hidden !important; touch-action:none;} .choViewerWarp {display:none; position: fixed; top:0; left:0; width:100%; height:100%; padding:5%; text-align: center; background-color: rgba( 0, 0, 0, 0.85 ); z-index: 1001; cursor: pointer; } .choViewerWarp p.choViewerNotice {position:relative; font-size:12px; color:var(--fixWhite); font-weight: 400; } .choViewerWarp .imgBox {width:100%; height:100%; display: flex; justify-content: center; align-items: center;} .choViewerWarp .imgBox img {width:unset; object-fit:cover;} .choViewerWarp .shortsBox {position:relative; width:0; height:100%; padding-right:43.75%; top:50%; left:50%; transform: translate(-50%, -50%);} .choViewerWarp .videoBox {position:relative; width:100%; height:0; padding-bottom:56.25%; top:50%; left:50%; transform: translate(-50%, -50%);} .choViewerWarp iframe, .choViewerWarp video {position:absolute; top:0;left:0; width:100%; height:100% ;} @media only screen and (max-width: 1600px) { .choViewerWarp .shortsBox {width:0; height:80%; padding-right:70%; top:50%; left:50%; transform: translate(-50%, -50%);} } @media only screen and (max-width: 900px) { .choViewerWarp .shortsBox {width:0; height:70%; padding-right:90%; top:50%; left:50%; transform: translate(-50%, -50%);} } /** 금고 디자인 **/ .list_safe {width:100%; padding:2rem; display: flex; justify-content: center; align-items: center; background-color: unset; border:.0rem solid var(--box05);border-radius:var(--border-R6); } .list_safe_inline1 {width:100%; hight:100%; padding:0rem; border-radius:var(--border-R6);} .list_safe_inline2 {width:100%; hight:100%; padding:5rem 0; text-align: center; color:var(--TextColor03); display: flex; justify-content: center; align-items: center; border-radius:var(--border-R6); border:.0rem solid var(--box06); } .safe_wrap { width:34rem; display: flex; flex-direction: column; justify-content: center; align-items: center} .safe_wrap { width:34rem;display: flex; flex-direction: column; justify-content: center; align-items: center;} .safe_wrap .dialBox {width:34rem; height:34rem; background: url('../img/dial_num.png') no-repeat center center; background-size: 34rem 34rem; display: flex; justify-content: center; align-items: center;} .safe_wrap .dialBox img {width:24rem;} /*6.5rem*/ .safe_wrap .pwBox {width:34rem; padding:2rem 1rem; background-color: var(--box0);border-radius:var(--border-R6);} .safe_wrap .pwBox .passwordBox {padding:0 0 1rem 3rem; color:var(--TextColor03);} .safe_wrap .pwBox input {width:4rem; border: 0.0rem solid var(--box0); background-color: var(--box03); color:var(--TextColor10);} .safe_wrap .pwBox input:focus {border:.3rem solid var(--PointColor02);} .btnBox100 {width:100%; display: flex; justify-content: center;} .btnBox100 .btn_b {width: 80%; background-color: var(--box0); color:var(--TextColor02); border:.1rem solid var(--box04);} .btnBox100 .btn_b:hover {background-color: var(--PointColor02); color:var(--fixWhite); border:0;} .list_safe .noticeBox { padding: 2rem 2rem; margin: 0rem 0; border-radius: .3rem; background-color: unset; color: var(--TextColor02); font-weight: 400; font-size: 1.2rem; line-height: 200%; text-align: left; } /* *******************************************/ /* login & joinmember */ /* *******************************************/ .memBG {width:100%;height:100%;} .memBox {width:70rem; margin:0 auto; padding:3rem;} /*.memLogo {width:100%; height:5rem; background: url('../img/logo.svg') no-repeat center center; background-size: 70% 60%; margin-top: 2rem;}*/ .memLogo {width:100%; height:5rem; -webkit-mask: url('../img/logo.svg') no-repeat center center; mask: url('../img/logo.svg') no-repeat center center; background-color: var(--box07); margin-top: 2rem;} /*로그인 화면에만 사용 - 폼 중앙배치*/ .memBox.login {position: absolute; left: 50%;top: 50%; width:46rem; transform: translate(-50%, -50%); } .memLogo.login {margin-top: 0rem;} .social_btn { width:100%; color: var(--TextColor07); height:4.8rem; display: flex; justify-content: center; align-items: center; gap: 2.4rem 3.2%; border:unset; background: var(--box02); border-radius:var(--border-R6); transition: 0.3s;} .social_btn:hover {background: var(--box03); transition: 0.3s; cursor: pointer;} .social_btn div:nth-child(1) {} .social_btn div:nth-child(1) img {width:2.3rem;} .social_btn div:nth-child(2) { font-size:1.2rem; font-weight: 500; } .memTitle {width:100%; text-align:center; font-size:2rem; font-weight:600; color:var(--TextColor10);} .memInput {} .memInput:hover {border:.3rem solid var(--PointColor02) !important;} .memCopyright {width:100%; text-align: center; font-size:1.0rem; font-weight:400; line-height: 160%; color:var(--TextColor03)} .memCopyright .copylogo {width:100%; padding:2rem;} .memCopyright .copylogo img {width:8rem; margin:0 auto;} .login_menu {text-align: center; margin:.5rem -2rem 0 -2rem; display:flex;} .login_menu a {flex:1; position: relative;font-size:1.2rem; line-height: 3rem; color:var(--TextColor10); display: inline-block; padding: 0 1rem 0 1rem; cursor: pointer;} .login_menu a:before {position: absolute; content: ''; top:1rem; left:0rem; display: block; width: .2rem; height: 1rem; border-radius: 8px; background: color:var(--TextColor10)} .inputTitle {width:100%; font-size: 1.2rem; font-weight: 500; color:var(--TextColor10); text-align: left; padding:.3rem 1rem;} .inputNotice {color:var(--SubColor02);} .inputWarning {color:var(--SubColor03); font-weight: 500;} .txtBold { color:var(--TextColor10); font-size:1.4rem; font-weight: 600;} /*join*/ .join_logoBox {width:100%; display: flex; justify-content:flex-start ; align-items: center;gab:2rem;} .joinLogo {width:15rem;height:4rem;-webkit-mask: url('../img/logo.svg') no-repeat 0rem center; mask: url('../img/logo.svg') no-repeat 0rem center; background-color: var(--box07); margin-top: 0.8rem;} /*메인페이지*/ /*메인페이지 영상섹션 정의*/ main_section{ width:100%; padding: 0 0; display: flex; flex-direction: row; justify-content: center;} .dash_video{ position: relative; width: 100%; height: 40rem; padding:0 0px; display: flex; justify-content: center; flex-direction: column; background: var(--PointColor02); background-color: var(--PointColor02); border-radius: var(--border-R6);} .dash_video:before{ z-index: 1; content: ''; position: absolute; background: var(--PointColor03); opacity: 0.5; width: 100%; height: 40rem; top: 0; left:0; border-radius: var(--border-R6);} /*홈 타이틀 텍스트 영역*/ .dash_video .content{ z-index: 2; color: var(--fixWhite); width: 100%; padding: 8rem 0 0 5rem; display: none;} .dash_video .content.active{ display: block;} .dash_video .content h1{ font-family: "Montserrat", sans-serif; font-size: 70px; font-weight: 900; font-style: italic; line-height: 100%; margin-bottom: 30px; text-shadow: 0px 0px 3px black; letter-spacing: -.025em; word-break: keep-all; word-wrap: break-word; opacity: 0; transform:translateX(-5rem); transition: 1s ease;} .dash_video .content h2{ font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 400; font-style: italic; line-height: 100%; margin-bottom: 5px; text-shadow: 0px 0px 3px black; letter-spacing: -.025em; word-break: keep-all; word-wrap: break-word; opacity: 0; transition: 1s ease-in-out 0.5s;} .dash_video .content p{ width:60%;line-height:160%; margin-bottom: 65px; font-size: 16px; text-shadow: 0px 0px 3px black; opacity: 0; transition: 1.5s ease-in-out 0.5s;} /*버튼*/ .dash_video .content a{ background: var(--fixWhite); padding: 10px 25px; margin-right:5px; color: var(--fixWhite); font-size: 14px; font-weight: 400; text-decoration: none; border-radius: 2px; opacity: 1; transition: 1.5s ease-in-out 0.5s;} .dash_video .content a:hover { background: var(--PointColor03); color: var(--fixWhite); transition: 0.5s;} .dash_video .content a.reverse { background: var(--SubColor02); color: var(--fixWhite); transition: 0.5s;} .dash_video .content a.reverse:hover { background: var(--PointColor03); color: var(--fixWhite); transition: 0.5s;} /*SNS아이콘*/ .dash_video .media-icons{ z-index: 8; position: absolute; right:30px; bottom: 12px; display: flex; flex-direction: column; text-align: center; transition: 0.5x ease;} .dash_video .media-icons a, .dash_video .media-icons a i{ color: var(--fixWhite); font-size: 2em; } .dash_video .media-icons a:not(:last-child){ margin-bottom: 20px;} .dash_video .media-icons a:hover{ transform: scale(1.3);} /*Video 백그라운드*/ .dash_video video{z-index: 0; position: absolute; top: 0; left: 0; width:100%; height:100%; object-fit: cover; border-radius: var(--border-R6);} /*슬라이더 인디케이터 정의*/ .dash_video .slider-navigation{ visibility: hidden; z-index: 2; position: absolute; width:100%; display: flex; justify-content: center; align-items: center; /*transform: translateY(80px);*/ bottom: 12px; margin:0 auto;} .dash_video .slider-navigation .nav-btn{ width: 12px; height:12px; background: var(--fixWhite); opacity: 0.5; border-radius: 50%; cursor: pointer; box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); transition: 0.3s ease;} .dash_video .slider-navigation .nav-btn.active{ background: var(--SubColor02); opacity: 1;} .dash_video .slider-navigation .nav-btn:not(:last-child){ margin-right: 20px; } .dash_video .slider-navigation .nav-btn:hover{ transform: scale(1.6);} /*슬라이더 단색배경 애니메이션 영역 정의*/ .dash_video .video-slide{ position: absolute; width: 100%; clip-path: circle(0% at 0 50%); } .dash_video .video-slide.active{ clip-path: circle(150% at 0 50%); transition: 1.5s; transition-property: clip-path; } @media only screen and (max-width: 1100px){ .dash_video{ padding:0;} .dash_video .content{ width: 100%; padding: 3rem;} .dash_video .content h1 { font-size: 54px; font-weight: 900; letter-spacing: -1px; margin-bottom: 20px; text-shadow: 0px 0px 3px black;} .dash_video .content h2 { font-size: 20px; font-weight: 400; letter-spacing: -1px; margin-bottom: 5px; text-shadow: 0px 0px 3px black;} .dash_video .content p { width:80%; font-size:16px; line-height:180%; margin-bottom:30px;} } @media only screen and (max-width: 900px){ .dash_video{padding:0;} .dash_video .content{ width: 100%; padding: 3rem;} .dash_video .content h1 { font-size: 50px; font-weight: 900; letter-spacing: -1px; margin-bottom: 20px; text-shadow: 0px 0px 3px black;} .dash_video .content h2 { font-size: 20px; font-weight: 400; letter-spacing: -1px; margin-bottom: 5px; text-shadow: 0px 0px 3px black;} .dash_video .content p { width:80%; font-size:16px; line-height:180%; margin-bottom:30px;} .dash_video .content a{ padding: 8px 10px; margin-right:5px;} .dash_video .slider-navigation{ /*transform: translateY(40px);*/ } .dash_video .media-icons{ display: none;} .dash_video .slider-navigation .nav-btn:not(:last-child){ margin-right: 10px; } } @media only screen and (max-width: 600px){ .dash_video{padding:0;} .dash_video .content {padding: 2rem;} .dash_video .content h1 { font-size: 46px;} .dash_video .content h2 { font-size: 18px;} .dash_video .content p { width:100%; font-size:15px;line-height:150%;} .dash_video .content a{ padding: 8px 10px; margin-right:5px;} } @media only screen and (max-width: 360px){ .dash_video{padding:0;} .dash_video .content {padding: 2rem;} .dash_video .content h1 { font-size: 35px;} .dash_video .content h2 { font-size: 16px;} .dash_video .content p { font-size:14px;} .dash_video .content a{ padding: 5px 5px;} } /*메인페이지 서비스 구성 이미지 삽입 영역*/ .mainFlowImg {width:100%; height:25rem; margin:4rem 0; background-color: var(--box02); display: flex; justify-content: center; align-items: center; background-position: center;background-size: contain; background-repeat: no-repeat;} /*메인페이지 영상섹션 정의*/ .mainSectionBox {width:90%; padding:2rem; display: flex; flex-direction: row; justify-content: end; align-items: center;} .mainSectionBox.BG01 {height:46rem; background-image: url('../img/main_tbg_01.png'); background-repeat:no-repeat; } .mainSectionBox.BG02 {height:40rem; background-image: url('../img/main_tbg_02.png'); background-repeat:no-repeat; } .mainSectionBox.BG03 {height:44rem; background-image: url('../img/main_tbg_03.png'); background-repeat:no-repeat; } .mainSectionBox.BGleft {background-position: center left; justify-content: end; text-align: right;} .mainSectionBox.BGleft .title-group { display: flex; flex-direction: column; align-items: end; } .mainSectionBox.BGright {background-position: center right; justify-content: start; text-align: left;} /*메인페이지 공통 타이틀영역*/ .mainSectionBox .title-group { width:60%;} .mainSectionBox .title-group .tit {font-family: "Montserrat", sans-serif; color:var(--TextColor07); font-size:4.5rem; font-weight:900; font-style:italic; line-height: 100%; text-transform:uppercase; letter-spacing: -.025em; word-break:keep-all; word-wrap: break-word; text-shadow: 0 0 .5rem var(--box00), 0 0 .5rem var(--box00);} .mainSectionBox .title-group .tits {font-family: "Montserrat", sans-serif; color:var(--TextColor06); font-size:2.2rem; font-weight:300; font-style:italic; line-height: 140%; letter-spacing: -.025em; word-break:keep-all; word-wrap: break-word; padding:1rem 0;text-shadow: 0 0 .3rem var(--box00), 0 0 .3rem var(--box00), 0 0 .3rem var(--box00);} .mainSectionBox .title-group .desc { width:60%; color:var(--TextColor06); font-size:1.6rem; font-weight:400; line-height:140%; margin: 2rem 0 2rem; word-break:keep-all; text-shadow: 0 0 .2rem var(--box00), 0 0 .2rem var(--box00), 0 0 .2rem var(--box00);} /*메인페이지 텍스트만 있을경우 정의*/ .mainSectionBox.BGnone {width:100%; padding:0rem; display: unset; flex-direction: unset; justify-content: unset; align-items: unset;} .mainSectionBox.BGnone .title-group { width:100%;} .mainSectionBox.BGnone .title-group .desc{ width:100%; margin: 0;} .wideimgBox {} .wideimgBox img {object-fit: cover; background-color: #f4f4f4; border-radius: var(--border-R6);} @media only screen and (max-width: 1400px) { .mainSectionBox {padding:2rem; background-size: 60%;} .mainSectionBox .title-group { width:80%;} .mainSectionBox.BGnone .title-group .desc{ width:100%;} } @media only screen and (max-width: 600px) { .mainSectionBox {width:100%; padding:2rem; align-items:start; background-size: 100%;} .mainSectionBox.BG01 {height:58rem;} .mainSectionBox.BG02 {height:48rem; margin-top:-4rem;} .mainSectionBox.BG03 {height:48rem;} .mainSectionBox.BGleft {background-position: bottom center; left; justify-content: end; text-align: left;} .mainSectionBox.BGright {background-position: bottom center; justify-content: start; text-align: left;} .mainSectionBox .title-group { width:100%;} .mainSectionBox .title-group .tit {font-size:3.5rem;} .mainSectionBox .title-group .tits {font-size:1.8rem;} .mainSectionBox .title-group .desc {width:100%; font-size:1.4rem;} .mainSectionBox.BGnone .title-group .desc{ width:100%;} } /* *******************************************/ /* 페이지 전체 구조 스타일 */ /* *******************************************/ .wrap {width:100%; height:100%; padding:0rem; background-color:var(--box00);} .wrap_section {width:100%; height:100%; display: flex; flex-direction: row; border-radius: var(--border-R6); background-color:var(--box00) !important; } /* *******************************************/ /* 좌측 메뉴영역전체 */ /* *******************************************/ .leftWrap { min-width:32rem; height:100%;} /* ***************** */ /* 상단 로고 섹션 */ /* ***************** */ .logoWarp {width:100%; height:9.2rem; padding:0 2.5rem; display: flex; flex-direction: row; justify-content:center; align-items: center;} .logoWarp .logo {width:14rem; height:4rem; -webkit-mask: url('../img/logo.svg') no-repeat; mask: url('../img/logo.svg') no-repeat; background-position: center center; background-size: 13rem; background-color: var(--box10);} .logoWarp .hammenu {display:none;} .logoWarp .hammenu:before {display:none;} .logoWarp .hammenu i {font-size: 3rem; margin-top:1rem;} .logoWarp .hammenu i:before {} /* ***************** */ /* 메인메뉴 섹션 */ /* ***************** */ .sideMenuWarp {width:100%; height:calc(100vh - 9.2rem); padding:0 2.5rem 2.5rem 2.5rem; border-top:0rem solid var(--PointColor01); overflow-y : auto;} /*스크롤바 디자인*/ .sideMenuWarp::-webkit-scrollbar {width: 1rem;} .sideMenuWarp::-webkit-scrollbar-thumb {background-color: var(--box01);border-radius: 1rem;background-clip: padding-box;} .sideMenuWarp::-webkit-scrollbar-track {background-color: transparent; border-radius: 1rem;} /* 메뉴 기본스타일 */ .sideMenuWarp .text, .sideMenuWarp .icon{ color: var(--TextColor07); transition: var(--tran-03);} .sideMenuWarp .icon{ color: var(--TextColor07); min-width: 4rem; border-radius: var(--border-R6); height: 100%; display: flex; align-items: center; justify-content: right; font-size: 2rem;} .sideMenuWarp .icon.arr{ justify-content: center;} .sideMenuWarp .text{ width: 100%; font-size: 1.5rem; letter-spacing : -0.01rem; font-weight: 800; overflow: hidden; white-space: nowrap; opacity: 1;} .sideMenuWarp .text .minitext{ font-size: 1.1rem; letter-spacing : 0.01rem; font-weight: 400;} .sideMenuWarp li {width:27rem; margin-bottom:.5rem; } .sideMenuWarp .adminonly {padding:2rem 1rem 1rem .5rem; font-size: 1.4rem; font-weight: 400; } .sideMenuWarp li a{ width: 100%; height:5.6rem; list-style: none; background-color: var(--box02); display: flex; align-items: center; border-radius: var(--border-R6); text-decoration: none; transition: var(--tran-03);} .sideMenuWarp li a:hover { background-color: var(--PointColor01); } .sideMenuWarp li a:hover .icon, .sideMenuWarp li a:hover .text{ color: var(--TextColor00);} .sideMenuWarp li a.mainMenu_ex {background-color: var(--SubColor01);} .sideMenuWarp li a.adminEdit {background-color: var(--box03);} .subMenu { width:100%; padding:.8rem .5rem .8rem 0rem; margin:0 auto; display: none;} .subMenu .subBBTT { width:100%; font-weight:700; padding:.5rem 0rem .5rem 2rem; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; } .subMenu .subBTT { width:100%; font-weight:500; padding:.5rem 0rem .5rem 4.5rem; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; cursor: pointer;} .subMenu .subTT {width:100%; font-weight:400; padding:.5rem 0rem .5rem 5.5rem; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; cursor: pointer;} .subMenu .subBBTT:hover, .subMenu .subBTT:hover, .subMenu .subTT:hover {color: var(--PointColor02); font-weight: 800;} .subMenu .subBTT.on, .subMenu .subTT.on {color: var(--PointColor02); font-weight: 600;} .subMenu.hover {position:absolute; left:10rem; margin-top:-1rem; width:27rem; overflow: hidden; display: block; background-color:var(--box00); border: 0.3rem solid var(--box04);border-radius: var(--border-R6); z-index: 100;} /* 메뉴 하버 스타일 정의 */ .mainMenu:hover{ background-color: var(--PointColor01) !important; } .mainMenu_ex:hover{ background-color: var(--SubColor02) !important; } .adminEdit:hover{ background-color: var(--box05) !important; } /* 선택된 메인메뉴 스타일 정의 */ .sideMenuWarp li.on .mainMenu { background-color: var(--PointColor02); box-shadow: 4px 3px 3px var(--box03);} .sideMenuWarp li.on .mainMenu_ex { background-color: var(--SubColor03); box-shadow: 4px 3px 3px var(--box03);} .sideMenuWarp li.on .adminEdit { background-color: var(--box07); box-shadow: 4px 3px 3px var(--box03);} .sideMenuWarp li.on .icon, .sideMenuWarp li.on .text { color: var(--TextColor00);} .sideMenuWarp li.on .subMenu {display: block;} /*다크모드 / 라이트모드*/ .btn_b.light { display: none;} .dark .btn_b.dark { display: none;} .dark .btn_b.light { display: block;} .btn_b.logout, .btn_b.light, .btn_b.dark {color:var(--TextColor07); font-size:1.2rem; font-weight:500;} .logout i, .light i, .dark i {color:var(--TextColor07); font-size:2rem; font-weight:500;} /* *******************************************/ /* 우측 내용영역전체 */ /* *******************************************/ .rightWrap {width:calc(100% - 27rem); height:100%; background-color: var(--box00); overflow-y: hidden;} /* ***************** */ /* 네임카드 섹션 */ /* ***************** */ .titleWarp {width:100%; height:9.2rem; padding:0 2.5rem; background-color: var(--box00); display:flex; flex-direction: row; justify-content:space-between; align-items: center;} /* 네임카드 스타일 */ .myNamecard {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display:flex; flex-direction: row; align-items: flex-end; cursor: pointer;} .myNamecard .level { width: 5rem; height:5rem; border-radius: 5rem; margin-right:1rem; background-size:contain; background-repeat: no-repeat;background-position: center;} .nametxt {display:flex; flex-direction: column; align-items: flex-start;} .txt_id {font-size: 1.8rem; font-weight: 800; margin-bottom: .5rem;} .txt_sub {font-size: 1.2rem; font-weight: 500; margin-bottom: .3rem; padding-right:1rem;} /* 상단 마이 스토리지 */ .myStorage {display:flex; flex-direction: row; align-items: flex-end;} .graph_myS_sm { width:40rem; height:2rem; border-radius:1rem; background-color: var(--box04);display:flex; flex-direction: row-reverse; overflow: hidden;} .graph_myS_sm .bar {height: 100%; font-size:1rem; color: var(--TextColor00); line-height: 2rem; text-align: center; border-radius:1rem; background-color: var(--PointColor02); animation: myassetanimate_mini 0.3s cubic-bezier(.19,.39,.63,1.6) forwards; box-shadow : -3px 0px 3px 1px var(--box04);} /* ***************** */ /* 페이지 내용 섹션 */ /* ***************** */ .pageWarp {width:100%; height:calc(100vh - 9.2rem); padding:0 2.5rem; border-top:0rem solid var(--PointColor01); overflow-y: auto;} /*스크롤바 디자인*/ .pageWarp::-webkit-scrollbar {width: 1rem;} .pageWarp::-webkit-scrollbar-thumb {background-color: var(--box01);border-radius: 1rem;background-clip: padding-box;} .pageWarp::-webkit-scrollbar-track {background-color: transparent; border-radius: 1rem;} /* 경로 스타일 */ .nowaddress { font-size:2.4rem; font-weight:800; padding:.5rem 0 0rem 0;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing : 0rem; line-height: 180%;} .nowaddress .logo {width:13rem; margin:0.5rem 1rem 0 0;} .nowaddress .small { font-size:1.2rem; font-weight:600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing : -0.01rem;} /* 기능탭 */ .memberTab {width:100%; height:5.6rem; margin-bottom:1.6rem; border-radius: var(--border-R6); background-color:var(--box00); display:flex; flex-direction: row; justify-content:space-between;} /* 기능탭 */ .funcTab {width:100%; height:5.6rem; border-radius: var(--border-R6); background-color:var(--box02); display:flex; flex-direction: row; justify-content:space-between;} .funcLeft, .funcRight {padding:.4rem 1rem;display: flex; flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: wrap;} .btbox { width: 6rem; padding:0 .5rem; font-size:1rem; color:var(--TextColor07_black); font-weight: 400; text-align:center; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; cursor: pointer; transition: var(--tran-03);} .btbox i {min-width: 3rem; font-size: 2.8rem;} .btbox:hover {background-color:var(--PointColor02); color:var(--TextColor00); border-radius: var(--border-R6); transition: var(--tran-03);} .btbox.wFree { width: auto; background-color:unset; color:unset; flex-direction: row;} .btbox.wFree .mini {width:15rem;} .btbox.wFree .mini.sdate {width:12rem;} .btbox.reverse {background-color:var(--box00); color:var(--PointColor02); } .btbox.reverse:hover {background-color:var(--PointColor02); color:var(--TextColor00); } .contentwarp {width:100%; padding:0rem;} .list_top {width:100%; padding:1rem 0; display:flex; flex-direction: row; justify-content: space-between; align-items :center ; flex-wrap: wrap;} .list_top .flex_left {} .safearea {display: flex; flex-direction: row; justify-content: flex-start ; align-items: center; gap:1rem;} .safearea .btn_m {width:15rem; height:4rem; background-color: var(--box02);} .safearea .btn_m:nth-child(1) {width:4rem; height:4rem; font-size: 2rem;} .safearea .btn_m.on {background-color: var(--PointColor02); color:var(--TextColor00);} .list_top .flex_right {display:flex; flex-direction: row; justify-content: space-between; align-items :center ; flex-wrap: wrap; gap:1rem;} .list_top .flex_right .total {padding-left:2rem; font-size: 1.3rem;} .list_top .flex_right .sort {width:20rem;} /* 리스트 - 모자익 기본 */ .list_mosaic {display: flex; flex-direction: row; justify-content:normal; flex-wrap: wrap; gap: 2.4rem 3.2%; padding:2rem; border-radius:var(--border-R6); background-color: var(--box02);} .nolist {width:100%; padding:15rem 0; /*border-top:.1rem solid var(--box04); border-bottom:.1rem solid var(--box04);*/ text-align: center; color:var(--TextColor03);} .nolist img {width:5rem; padding:1rem 0;} .moFileBox {width:14%;} .moFileBox:hover {scale: 1.02; transition: 0.2s ease-in-out;} .moFileBox .moThumbBox {position: relative; width:100%;} .moFileBox .moThumbBox:before {content: ""; display: block; padding-top: 100%;} /* 1:1 비율 */ .moFileBox .moThumbBox .moThumb { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius:var(--border-R6);background-color: var(--box04); display: flex; flex-direction: column; justify-content: flex-end; flex-wrap: wrap; align-items: flex-end; padding:.5rem;} .moFileBox .moThumbBox .moThumb.image {} .moFileBox .moThumbBox .moThumb.folder { background-size: 50%;background-image:url('../img/icon_folder.svg');} .moFileBox .moThumbBox .moThumb.file { background-size: 50%;background-image:url('../img/icon_file.svg');} .moFileBox .moThumbBox .moThumb.video { background-size: 50%;background-image:url('../img/icon_video.svg');} .moFileBox .moThumbBox .moThumb.my { border:.2rem solid var(--SpecialPoint); } .moFileBox .moThumbBox .moThumb .clickbox {width:100%; height:calc(100% - 2.7rem); display: flex; justify-content: flex-end; align-items: flex-start ; cursor:pointer; } .moFileBox .moThumbBox .moThumb .clickbox .valuelabel {display: flex; align-items: center; background-color: var(--SpecialPoint); color: var(--fixWhite); padding:0.3rem; border-radius: var(--border-R6);} .moFileBox .moThumbBox .moThumb .clickbox .valuelabel i{font-size: 1.4rem; color:var(--fixWhite);} .moFileBox .moThumbBox .moThumb .iconbox { width:100%; height:2.6rem; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; gap: 0.2rem 0.2rem; align-items: center;} .moFileBox .moThumbBox .moThumb .iconbox .icon {width:2.3rem; height: 2.3rem; border-radius: 2rem; background-color:var(--moTumbiconBG);opacity: 0.7; background-position: center; background-size:90%; background-repeat: no-repeat; transition: 0.2s ease-in-out;} .moFileBox .moThumbBox .moThumb .icon.on {background-color:var(--SpecialPoint); scale: 0.95;} .moFileBox .moThumbBox .moThumb .icon.value {background-image:url('../img/thumIcon_value_off.svg');} .moFileBox .moThumbBox .moThumb .icon.value.on, .moFileBox .moThumbBox .moThumb .icon.value.wait, .moFileBox .moThumbBox .moThumb .icon.value.reject {background-image:url('../img/thumIcon_value.svg');} .moFileBox .moThumbBox .moThumb .icon.share {background-image:url('../img/thumIcon_share_off.svg');} .moFileBox .moThumbBox .moThumb .icon.share.on {background-image:url('../img/thumIcon_share.svg');} .moFileBox .moThumbBox .moThumb .icon.lock {background-image:url('../img/thumIcon_lock_off.svg');} .moFileBox .moThumbBox .moThumb .icon.lock.on {background-image:url('../img/thumIcon_lock.svg');} .moFileBox .moThumbBox .moThumb .icon.my {background-image:url('../img/thumIcon_my_off.svg');} .moFileBox .moThumbBox .moThumb .icon.my.on {background-image:url('../img/thumIcon_my.svg');background-color:var(--SubColor02);} .moFileBox .moThumbBox .moThumb .icon.trash {background-image:url('../img/thumIcon_trash_off.svg');} .moFileBox .moThumbBox .moThumb .icon.trash.on {background-image:url('../img/thumIcon_trash.svg');} .moFileBox .moThumbBox .moThumb .icon.down {background-image:url('../img/thumIcon_down_off.svg');} .moFileBox .moThumbBox .moThumb .icon.down.on {background-image:url('../img/thumIcon_down.svg');} .moFileBox .moThumbBox .moThumb .icon.move {background-image:url('../img/thumIcon_move_off.svg');} .moFileBox .moThumbBox .moThumb .icon.move.on {background-image:url('../img/thumIcon_move.svg');} .moFileBox .moThumbBox .moThumb .icon.wait {background-color:var(--SpecialPoint); scale: 0.95; animation-name:valuestate_wait;animation-duration:1s;animation-iteration-count: infinite;animation-direction: alternate;} .moFileBox .moThumbBox .moThumb .icon.reject {background-color:var(--SpecialPoint); scale: 0.95; animation-name:valuestate_reject;animation-duration:0.2s;animation-iteration-count: infinite;animation-direction: alternate;} @keyframes valuestate_wait {from {background-color: var(--moTumbiconBG);}to{background-color:var(--SpecialPoint);}} @keyframes valuestate_reject {from {background-color: var(--moTumbiconBG);}to{background-color:var(--SpecialPoint);}} .moFileBox .moThumbBox .moThumb .icon:hover { scale: 1.3; opacity: 1; transition: 0.2s ease-in-out; cursor: pointer;} .moFileBox .moThumbBox .moThumb .icon.on:hover, .moFileBox .moThumbBox .moThumb .icon.wait:hover, .moFileBox .moThumbBox .moThumb .icon.reject:hover { scale: 1.1;} .moFileBox .moThumbBox .moThumb .icon.my:hover, .moFileBox .moThumbBox .moThumb .icon.my.on:hover { scale: 1; cursor:default;} .moFileBox .TTnic { font-size: 1.3rem; font-weight: 600; color:var(--TextColor07); padding: 0.8rem 0 0.5rem 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .moFileBox .TTfile { font-size: 1.1rem; font-weight: 400; color:var(--TextColor02); /*padding: 0.3rem 0 0.7rem 0; border-top:.1rem solid var(--box05);border-bottom:.1rem solid var(--box05);*/} .moFileBox .TTinfo { font-size: 1.1rem; font-weight: 400; color:var(--TextColor02); padding-top: 0.5rem; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;} .moFileBox .TTinfo .date { max-width:50%; font-size: 1.1rem; letter-spacing: -0.01rem;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: .2rem;} .moFileBox .TTinfo .edit { font-size: 1.1rem; width:1.8rem; height:1.8rem; cursor: pointer;} /*지갑 페이지*/ /*top marketplaces 리스트*/ .list_market {width:100%; min-height:4.2rem; padding:1rem 1rem; margin-bottom:.5rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content: space-around; space-between; gap:1rem 1rem; background-color:var(--box03); align-items: center;transition-duration: 0.3s; cursor: pointer;} .list_market:hover {background-color:var(--box03);} .list_market.title {background-color:var(--box02);} .list_market.title:hover {cursor: default;} .list_market div {font-size:1.3rem; overflow: hidden; white-space : nowrap; text-align: center; align-items: center;} .list_market div {width:10%;} /*.list_market div:nth-child(1) {width:20%;} .list_market div:nth-child(2) {width:15%;} .list_market div:nth-child(3) {width:15%;} .list_market div:nth-child(4) {width:20%; margin-left: auto;} .list_market div:nth-child(5) {width:20%; margin-left: auto;} */ .list_market img.eth {width:2rem;} /* 배지 페이지 */ /* 배지 메인 */ .list_mosaic.badge{} .list_mosaic.badge .moFileBox .moThumbBox .moThumb {border-radius: 50%; background-color: var(--box00);} .list_mosaic.badge .moFileBox .moThumbBox .moThumb.image {background-size: 60%;} .list_mosaic.badge .moFileBox .TTnic {text-align: left;} /* 배지 선택 */ .list_mosaic.badge.selecttype{gap: 2.4rem 4%; padding:1rem; } .list_mosaic.badge.selecttype .moFileBox {width:48%;} .list_mosaic.badge.selecttype .moFileBox .moThumbBox .moThumb.image {background-size: 60%;} .list_mosaic.badge.selecttype .moFileBox .TTnic {text-align: center;} @media (max-width: 1190px) { .list_mosaic.badge.selecttype{gap: 2.4rem 4%;} .list_mosaic.badge.selecttype .moFileBox {width:48%;} } } @media (max-width: 860px) { .list_mosaic.badge.selecttype{gap: 2.4rem 4%;} .list_mosaic.badge.selecttype .moFileBox {width:48%;} } @media (max-width: 400px) { .list_mosaic.badge.selecttype{gap: 2.4rem 4%;} .list_mosaic.badge.selecttype .moFileBox {width:48%;} } /* 멤버쉽 페이지 */ .dasmembership .moFileBox {width:22.6%; border-radius: var(--border-R6); border:.1rem solid var(--box04); background-color: var(--box00);/*box-shadow: 4px 3px 3px var(--box03);*/} .dasmembership .moFileBox:hover {scale: 1.02; border:.5rem solid var(--PointColor02); transition: 0.2s ease-in-out; box-shadow: 4px 3px 3px var(--box03);} .dasmembership .moFileBox.colspan3 {width:74.2%; padding: 2rem;} .billing .moFileBox:hover {scale:unset; border:.1rem solid var(--box04); box-shadow: unset;} .dasmembership .moFileBox .moThumbBox:before {padding-top: 80%;} .dasmembership .moFileBox .moThumb { background-size: 60%; border-radius:var(--border-R6); } .dasmembership .moFileBox .moContentBox { width:100%; padding:1.5rem;} .dasmembership .moFileBox .TTb { font-size: 2.4rem; font-weight: 800; text-align: center; color:var(--TextColor07);} .dasmembership .moFileBox .TTinfo {flex-wrap:nowrap; } .dasmembership .moFileBox .TTinfo div:nth-child(1) {overflow: hidden;} .dasmembership .moFileBox .TTs, .dasmembership .moFileBox .TTinfo div { font-size: 1.2rem; font-weight: 400; text-align: center; color:var(--TextColor03); letter-spacing:-0.02rem;} .dasmembership .moFileBox .line {width:100%; height:0rem; border-bottom:.1rem solid var(--box03); background-color:transparent; margin:1.5rem 0;} .dasmembership .moFileBox .TTinfo { font-size: 1.2rem; font-weight: 400; color:var(--TextColor02); padding: 1rem 0;} .dasmembership .moFileBox .NUMb { font-size: 1.8rem; font-weight: 400; color:var(--TextColor05); letter-spacing:-0.02rem;} .dasmembership .moFileBox .NUMbPoint { font-size: 2.4rem; font-weight: 800; color:var(--PointColor02); letter-spacing:-0.02rem;} .dasmembership .moFileBox .benefit { font-size: 1.2rem; font-weight: 400; color:var(--TextColor07); line-height:200%; letter-spacing:-0.02rem;} /* 마이 페이지 */ .myaccount {width:100%;} .membershipSum {width:100%; min-height: 15rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content: normal; align-items: center; gap:2rem; margin-bottom: 1rem; border: 0.1rem solid var(--box04); /*box-shadow: 4px 3px 3px var(--box03);*/} .membershipSum .levelImage {width:20rem; min-height: 15rem; background-color: red; background-position: center; background-size: 60%; background-repeat: no-repeat; border-radius:var(--border-R6); background-color: var(--box02);} .membershipSum .levelInfo {width: calc(100% - 20rem); margin:1rem 2rem;} .editarea {display: flex; flex-direction: row; justify-content: flex-start ; align-items: flex-start; gap: 1rem 1%; flex-wrap: wrap;} .editarea div {width:10%;} .editarea .btn_m {width:100%;} .storageGraph {width:100%; display:flex; flex-direction: row; flex-basis: auto; gap:1rem; align-items: center;} .storageGraph .graphtitle {width:15%;} .storageGraph .graphBox { width:85%; height:3rem; border-radius:3rem; background-color: var(--box04); display:flex; flex-direction: row-reverse; overflow: hidden;} .storageGraph .graphBox .bar { height: 100%; font-size:1.4rem; color: var(--TextColor00); line-height: 3rem; text-align: center; border-radius:3rem; background-color: var(--PointColor02); animation: myassetanimate 0.5s cubic-bezier(.19,.39,.63,1.6) forwards; box-shadow : -3px 0px 3px 1px var(--box04);} .storageGraph .graphBox .bar2 { height: 100%; font-size:1.4rem; color: var(--TextColor00); line-height: 3rem; text-align: center; border-radius:3rem; background-color: var(--PointColor02); animation: groupassetanimate 0.7s cubic-bezier(.19,.39,.63,1.6) forwards; box-shadow : -3px 0px 3px 1px var(--box04);} .list_line {width:100%; height:4.2rem; padding:1rem 2rem; margin-bottom:.5rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content: flex-start; gap:1rem; background-color:var(--box02);} .list_line div {font-size:1.3rem; overflow: visible; white-space : nowrap;} .list_line div:nth-child(1) {width:10%;} .list_line div:nth-child(2) {width:45%;} .list_line div:nth-child(3) {width:45%; margin-left: auto;} /**의료정보**/ .list_2info {width:100%; display: flex; flex-direction: row; justify-content: normal; flex-wrap: wrap; gap:2%; } .list_2info .item {width:49%; display: flex; flex-direction: row; justify-content: flex-start; align-items:center; padding:1rem; border-bottom: .1rem solid var(--box04);} .list_2info .item:nth-child(1), .list_2info .item:nth-child(2) {border-top: .1rem solid var(--box04);} .list_2info .item div:nth-child(1) {width:30%; font-size:1.2rem; font-weight: 400; color:var(--TextColor07); letter-spacing:-0.02rem;} .list_2info .item div:nth-child(2) {width:60%;} .list_2info .item div:nth-child(2) input[type=text] {font-size:2rem; font-weight: 800; line-height: 200%; color:var(--PointColor02); letter-spacing:-0.02rem;} .list_2info .item div:nth-child(3) {width:10%; font-size:1.2rem; font-weight: 400; color:var(--TextColor07); letter-spacing:-0.02rem; text-align: right;} .btnBox50 {width:100%; padding:0 20%;} /**비밀번호설정**/ .list_editpw {width:100%; display: flex; flex-direction: column; justify-content: normal; flex-wrap: wrap; } .list_editpw .item {width:100%; display: flex; flex-direction: row; justify-content: flex-start; align-items:center;border-top: .1rem solid var(--box04); gap: 5%;} .list_editpw .item div:nth-child(1) {width:60%; font-size:1.2rem; font-weight: 400; color:var(--TextColor07); padding:0 3rem; letter-spacing:-0.02rem;} .list_editpw .item div:nth-child(2) {width:20%; margin-left: auto;} /**그룹관리 구성원 리스트**/ .list_member {width:100%; height:4.2rem; padding:1rem 1rem; margin-bottom:.5rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content: flex-start; gap:2%; background-color:var(--box02);transition-duration: 0.3s;} .list_member div {font-size:1.3rem; overflow: hidden; white-space : nowrap;} .list_member div:nth-child(1) {width:2rem;} .list_member div:nth-child(2) {width:40%;} .list_member div:nth-child(3) {width:40%;} .list_member div:nth-child(4) {width:10%; margin-left: auto;} .list_member div:nth-child(4) img {height:70%; padding:0.5rem;} /**그룹관리 결제 리스트**/ .list_order {width:100%; height: auto; padding:1rem 1rem; margin-bottom:.5rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content:space-around; align-items: center; gap:2%; background-color:var(--box02);transition-duration: 0.3s;} .list_order div{width:25%;} /*.list_order div {font-size:1.3rem; overflow: hidden; white-space : nowrap;} .list_order div:nth-child(1) {width:5%;} .list_order div:nth-child(2) {width:40%;} .list_order div:nth-child(3) {width:40%;} .list_order div:nth-child(4) {width:10%; margin-left: auto;} .list_order div:nth-child(4) img {height:70%; padding:0.5rem;}*/ .autopay i {font-size:5rem;} .autopay i.on {font-size:5rem;} .autopay i.bx-toggle-left {color: var(--TextColor02);} .autopay i.bx-toggle-right {color: var(--PointColor02);} /**인증센터**/ .list_certifi {width:100%; display: flex; flex-direction: column; justify-content: normal; flex-wrap: wrap; border-radius: var(--border-R6);background-color:var(--box02); margin-bottom: 1rem; /*border-top: .1rem solid var(--box04); border-bottom: .1rem solid var(--box04);*/transition-duration: 0.3s;} .list_certifi .item {width:100%; min-height: 10rem; display: flex; flex-direction: row; justify-content: flex-start; align-items:center; gap: 5%;} .list_certifi .item div:nth-child(1) { font-size:1.4rem; font-weight: 600; color:var(--TextColor07); padding:0 3rem; letter-spacing:-0.02rem;} .list_certifi .item div:nth-child(2) { margin-top:0; margin-left: auto; padding-right:2rem;} .list_certifi .item .btn_area { width:20%;} .icon.folder{ vertical-align: middle; font-size: 2rem; color:var(--SubColor02) !important;} .icon.file{ vertical-align: middle; font-size: 2rem; color:var(--box06) !important;} .icon.middle{ font-size: 2.4rem;} .icon.big{ font-size: 3rem;} .icon.arrRight { color:var(--PointColor02) !important;} /**관리자 회원 리스트**/ .list_subscriber {width:100%; min-height:4.2rem; padding:1rem 1rem; margin-bottom:.5rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content: flex-start; gap:1rem 1rem; background-color:var(--box02); align-items: center;transition-duration: 0.3s;} .list_subscriber:hover {background-color:var(--box03);} .list_subscriber.title {background-color:var(--box02);} .list_subscriber.title div:nth-child(2):hover {cursor: default;} .list_subscriber.admin {background-color:var(--box04);} .list_subscriber.admin:hover {background-color:var(--box03);} .list_subscriber div {font-size:1.3rem; overflow: hidden; white-space : nowrap;} .list_subscriber div:nth-child(1) {width:2rem;} .list_subscriber div:nth-child(2) {width:30%; cursor: pointer;} .list_subscriber div:nth-child(3) {width:30%;} .list_subscriber div:nth-child(4) {width:15%; margin-left: auto;} .list_subscriber div:nth-child(5) {width:10%; margin-left: auto;} /*.list_subscriber div:nth-child(6) {width:5%; margin-left: auto;} .list_subscriber div:nth-child(6) img {height:1.4rem; padding:0.5rem;}*/ @media (max-width: 800px) { /**관리자 회원 리스트**/ .list_subscriber div:nth-child(2) {width:45%;} .list_subscriber div:nth-child(3) {width:45%;} .list_subscriber div:nth-child(4) {display: none;} .list_subscriber div:nth-child(5) {display: none;} } /**관리자 자산관리 리스트**/ .list_assets {width:100%; min-height:4.2rem; padding:1rem 1rem; margin-bottom:.5rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content: flex-start; gap:1rem 1rem; background-color:var(--box02); align-items: center;transition-duration: 0.3s; cursor: pointer;} .list_assets:hover {background-color:var(--box03);} .list_assets.title {background-color:var(--box02);} .list_assets.title:hover {cursor: default;} .list_assets.admin {background-color:var(--box04);} .list_assets.admin:hover {background-color:var(--box03);} .list_assets div {font-size:1.3rem; overflow: hidden; white-space : nowrap;} .list_assets div:nth-child(1) {width:20%;} .list_assets div:nth-child(2) {width:15%;} .list_assets div:nth-child(3) {width:15%;} .list_assets div:nth-child(4) {width:20%; margin-left: auto;} .list_assets div:nth-child(5) {width:20%; margin-left: auto;} @media (max-width: 800px) { /**관리자 자산관리 리스트**/ .list_assets div:nth-child(1) {width:30%;} .list_assets div:nth-child(2) {width:30%;} .list_assets div:nth-child(3) {width:30%;} .list_assets div:nth-child(4) {display: none;} .list_assets div:nth-child(5) {display: none;} } /**관리자 자산평가 2 리스트**/ .list_value {width:100%; min-height:4.2rem; padding:1rem 1rem; margin-bottom:1rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content:space-between; gap:1rem .3rem; background-color:var(--box02); align-items: center;transition-duration: 0.3s;} .list_value .moFileBox {width:100%;} .list_value .moFileBox div {text-align:left;} .list_value .cell {font-size:1.3rem; display: flex; flex-direction: column;} .list_value .cell:nth-child(1) {width:15%;} .list_value .cell:nth-child(2) {width:30%;} .list_value .cell:nth-child(3) {width:30%;} .list_value .cell:nth-child(4) {width:15%;} .list_value .btn_area {width:100% !important; margin-top:0;} @media (max-width: 800px) { .list_value { flex-direction: column; margin-top:2rem; gap: 2rem 2rem;} .list_value .moFileBox {display: flex; gap: 2rem 2rem;} .list_value .moThumbBox {width:40%;} .list_value .TTfile {width:50%;} .list_value .cell {width:100%; flex-direction: column;} .list_value .cell:nth-child(1) {width:100%;} .list_value .cell:nth-child(2) {width:100%;} .list_value .cell:nth-child(3) {width:100%;} .list_value .cell:nth-child(4) {width:100%;} } /* 페이지넘버 스타일 */ .list_pagination {padding: 5rem 0; width: 100%; } .list_pagination .list_pagination-pages { width: 100%; list-style: none; text-align: center;} .list_pagination .list_pagination-pages li { display: inline-block; *display: inline; zoom: 1; margin: 0; padding: 0 1px; background: none; border: 0; list-style: none; } .list_pagination .list_pagination-pages li a { display: block; margin: 0; padding: 0 1.1rem; height: 2.8rem; line-height: 2.8rem; font-size: 1.3rem; color: var(--TextColor07); text-decoration: none; border: 0; box-shadow: none; transition-duration: 0.3s; border-radius: var(--border-R6);} .list_pagination .list_pagination-pages li:hover a, .list_pagination .list_pagination-pages li.active a { border: 0; color:var(--TextColor00); ; background-color:var(--PointColor02); } .list_pagination .list_pagination-pages li:before { display: none; } .list_pagination .kboard-pagination-pages li:after { display: none; } /* 마이페이지 섹션 */ /* .memBG_mypage {width:100%; padding:1.6rem; border-radius: var(--border-R6); background-color:var(--PointColor02); } .memBox_mypage {width:34rem; margin:0 auto; padding:1rem; } .memBG_mypage input[type=radio], .memBG_mypage input[type=checkbox] {border: max(2px, 0.1em) solid var(--SubColor02); } .memBG_mypage input[type="radio"]:checked, .memBG_mypage input[type=checkbox]:checked {border: 0.4em solid var(--SubColor02); background-color: var(--SubColor03);} */ /* ***************** */ /* copyright 섹션 */ /* ***************** */ .copyrightWarp {width:100%; padding-top:3rem; margin-top:auto; bottom:0;} .copyright {width:100%; min-height:5.6rem; padding:2.5rem;border-radius: var(--border-R6); background-color:var(--box02); display: flex; flex-direction: row; justify-content: end; align-items: center; margin: 4rem 0 1rem 0;} .copyright .copytxt { font-size:1.2rem; color:var(--TextColor04); text-align: right; padding-right:2rem; } .copyright .copytxt p {margin-bottom: 1rem; font-weight: 600;} .copyright .copytxt p a:hover {color:var(--PointColor02);} .copyright .copylogo {width:10rem; padding-left:2rem; align-items: center;border-left: .1rem solid var(--TextColor04);} /**************************************************/ /**************************************************/ /* 반응형 모바일 조절 ******************************/ /**************************************************/ /**************************************************/ @media (max-width: 1190px) { html {} body {width:100%; min-width: 36rem;} .wrap_section {border-radius: 0; flex-direction:column;} .leftWrap { height:unset; background-color: var(--box00);} .logoWarp {height:4rem; padding:2.5rem; margin: 0; justify-content:space-between;} .logoWarp .logo {width:13rem; height:3rem; background-size: 10rem;} .logoWarp .hammenu {display:block;} .logoWarp .hammenu:before {display:block;} .logoWarp .hammenu i {display:block;} .logoWarp .hammenu i:before {display:block;} .sideMenuWarp {display: none; height:calc(100vh - 4rem); padding:0 1.2rem; overflow-x: hidden ; overflow-y: visible; } .sideMenuWarp li {width:100%;} .sideMenuWarp.on {display: block; } .rightWrap {width:100%; min-width: unset; display: block;} .rightWrap.off {display: none; } .pageWarp{width:100%; padding: 2.5rem; height:calc(100vh - 11.2rem); overflow-x: hidden ; overflow-y: visible;} .titleWarp {height:6.2rem;} } @media (max-width: 860px) { html {} body {width:100%; min-width: 32rem;} .radio2ea {width:100%; display: flex; flex-direction: column;} .radio2ea div {width:100%; padding:.7rem 0;} /*팝업dim*/ .transparentLayer {overflow-y: auto;} .layer_center .content { max-width: 90%; } /*로그인, 회원가입 외곽*/ .memBG {width:100%;height:100%;} .memBox {width:unset; max-width:90%;padding: 3rem 0} /*로그인 내용*/ .memBox.login {position: relative; left: unset;top: unset;transform: unset; } .memLogo.login {margin-top: 5rem;} /*메인창*/ .wrap {padding: 0rem;} .wrap_section {border-radius: 0;flex-direction:column;} .leftWrap { height:unset; background-color: var(--box00);} .logoWarp {height: 4rem; padding: 1.2rem; margin: 0; background-position: 1.2rem center; background-size: 10rem; font-size: 3rem; text-align: right; line-height: 30%} .logoWarp .logo {width:13rem; height:3rem; background-size: 10rem;} .logoWarp .hammenu i {display:block; } .logoWarp .hammenu i:before {display:block;} .sideMenuWarp {display: none; height:calc(100vh - 4rem); padding:1rem 1.2rem; overflow-x: hidden ; overflow-y: visible; } .sideMenuWarp li {width:100%;} .sideMenuWarp.on {display: block; } .sideMenuWarp::-webkit-scrollbar {width:0rem;} .rightWrap {width:100%; min-width: unset; display: block;} .rightWrap.off {display: none; } .pageWarp{padding: 1.2rem; height:calc(100vh - 4rem); overflow-x: hidden ; overflow-y: visible;} .pageWarp::-webkit-scrollbar {width:0rem;} .nowaddress {font-size: 2rem; font-weight: 800; } .nowaddress .logo {width:13rem; margin:-0.5rem 1rem 0 0;} .nowaddress .small { font-size:1.2rem; font-weight:600;} .titleWarp {display: none;} .funcTab {height: unset; padding:.5rem 0; flex-direction: column;} .funcLeft{padding: 0.4rem 0.2rem;} .btbox{width:4.8rem; padding: 0; } .btbox.wFree {display: block !important;} .btbox.wFree:nth-child(1), .btbox.wFree:nth-child(2) {width:calc(100% - 8rem);padding: .5rem 0} .btbox.wFree i {margin: .8rem 0 0 .2rem;} .funcLeft .btbox:nth-child(1) {display: none;} .funcRight{width:100%; padding: 0.4rem 0.0rem; justify-content: center;} .btbox.wFree .mini {width:90%;} .btbox.wFree .mini.sdate {width:45%;} .list_top {flex-direction: column;} .list_top .flex_left {width:100%;} .safearea .btn_m { width:calc((100% - 5rem)/2); } .list_top .flex_right {width:100%;flex-direction: column-reverse; -reverse; margin-top:1rem;} .list_top .flex_right .total {width:100%;} .list_top .flex_right .sort {width:100%;} .list_top.order {flex-direction: row;} .list_top.order .flex_left {display: none;} .list_top.order .flex_right {width:100%; flex-direction: row; margin-top:0rem; justify-content: flex-end; } /* 리스트 - 모자익 기본 */ .list_mosaic {gap: 2.4rem 5%; padding:0;background-color:unset;} .moFileBox {width:30%;} /* 멤버쉽 레벨 리스트 */ .dasmembership .moFileBox {width:100%;} .dasmembership .moFileBox .moThumbBox:before {padding-top: 30%;} .dasmembership .moFileBox .TTinfo div { font-size: 1.4rem; } .dasmembership .moFileBox .TTinfo.inputbox div:nth-child(1) {display: none;} .dasmembership .moFileBox .TTinfo.inputbox div:nth-child(2) {width:100%;} .dasmembership .moFileBox.colspan3 {width:100%; padding: 1rem;} .billing .moFileBox:nth-child(1){display: none;} /*마이페이지*/ .membershipSum {flex-direction: column; gap:0rem;} .membershipSum .levelImage {width:100%; min-height: 10rem; background-size: 60%;} .membershipSum .levelInfo {width:100%; padding: 0 1.2rem 1.2rem;} /*.membershipSum .levelInfo .editarea .btn_m {width:50%;}*/ .editarea div {width:24.1%;} .editarea .btn_m {} .storageGraph {flex-direction: column;} .storageGraph .graphtitle {width:100%;} .storageGraph .graphBox { width:100%;} /**의료정보**/ .list_2info {flex-direction: column; gap:0; } .list_2info .item {width:100%;} .list_2info .item:nth-child(2) {border-top: 0;} .btnBox50 {width:100%; padding:0 0;} /**비밀번호설정**/ .list_editpw .item {width:100%; flex-direction: column; } .list_editpw .item div {width:100%;} .list_editpw .item div:nth-child(1) {width:100%; padding-top:2rem; text-align: center;} .list_editpw .item div:nth-child(2) {width:100%;} /**그룹관리 구성원 리스트**/ .list_order {width:100%; height: auto; padding:1rem 1rem; margin-bottom:.5rem; border-radius:var(--border-R6); display: flex; flex-direction: row; justify-content:space-around; align-items: center; background-color:var(--box02);} /**결제 리스트**/ .autopay i {font-size:5rem;} .autopay i.on {font-size:5rem;} .autopay i.bx-toggle-left {color: var(--TextColor02);} .autopay i.bx-toggle-right {color: var(--PointColor02);} /**인증센터**/ .list_certifi {width:100%; display: flex; flex-direction: column; justify-content: normal; flex-wrap: wrap; border-radius: var(--border-R6);background-color:var(--box02); margin-bottom: 1rem;} .list_certifi .item {width:100%; min-height: 10rem; padding:3rem 0; display: flex; flex-direction: column; justify-content: flex-start; align-items:center; gap: 0;} .list_certifi .item div { with:100%; padding:1rem 0; margin-bottom: 1rem; display: flex; align-items:center;} .list_certifi .item div:nth-child(1) { font-size:1.4rem; font-weight: 600; color:var(--TextColor07); padding:0 3rem; letter-spacing:-0.02rem; } .list_certifi .item div:nth-child(2) { margin-top:0; margin-left: unset; padding-right:0rem;} .list_certifi .item .btn_area { width:100%;} /* .fileList{padding: .6rem;} .list_top .flex_left {width:unset;} .list_basic table thead {font-size: 1.1rem;} .list_basic table thead tr td:nth-child(1) {width:2rem;} .list_basic table thead tr td:nth-child(2) {} .list_basic table thead tr td:nth-child(3) {width:5rem;} .list_basic table thead tr td:nth-child(4) {display: none;} .list_basic table thead tr td:nth-child(5) {display: none;} .list_basic table thead tr td:nth-child(6) {display: none;} .list_basic table tbody tr td:nth-child(1) {padding: 0;} .list_basic table tbody tr td:nth-child(1) {} .list_basic table tbody tr td:nth-child(2) {} .list_basic table tbody tr td:nth-child(3) {} .list_basic table tbody tr td:nth-child(4) {display: none;} .list_basic table tbody tr td:nth-child(5) {display: none;} .list_basic table tbody tr td:nth-child(6) {display: none;} */ .list_pagination {font-size: 1rem !important;} .list_pagination .list_pagination-pages li a { padding: 0 .8rem; height: 2.8rem; line-height: 2.8rem; font-size: 1.1rem;} .memBG_mypage {padding: 1.6rem 0;} .copyrightWarp {width: 100%; padding-top: 0rem; margin-top: auto;} .copyright {padding: 2.5rem 1rem;} .copyright .copytxt { padding-right: 0rem; } .copyright .copylogo {display: none;} } @media (max-width: 400px) { /* 리스트 - 모자익 기본 */ .list_mosaic {gap: 2.4rem 4%;} .moFileBox {width:48%;} }