@charset "utf-8"; /*skipLink*/ #skipLink{ overflow:hidden; position:fixed; top: 5px; z-index:999; } #skipLink a{ width:1px; height:1px; text-align:center; line-height:0; overflow:hidden; font-size:0px; display:block; } #skipLink a:focus, #skipLink a:hover, #skipLink a:active{ background:#b10e29; margin:0px; padding:8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700; text-decoration: underline; } :root { --inner: 1280px; --color-primary: #39a1ff; --color-secondary: #37373f; } .t_point { color: #0291c5; } /* 비활성화된 링크 스타일 */ .disabled-link { pointer-events: none; /* 마우스 클릭을 무시 */ /* opacity: 0.6; */ /* 링크를 반투명하게 만들어 비활성화된 느낌 */ text-decoration: none; /* 링크 스타일을 제거 */ } /* 비활성화된 상태에서 hover 시 효과 없애기 */ .disabled-link:hover { cursor: not-allowed; /* 마우스 오버 시 커서를 '금지' 모양으로 변경 */ } /*main*/ main { position:relative; z-index:1; overflow: hidden; } main section { position:relative; /*height: 100vh; */} /*usual*/ .inner { width: var(--inner); margin: 0 auto; position: relative; height : 100%; } .main .inner { width: 1440px; } .click_box { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .flex_box { display: flex; flex-wrap: wrap; justify-content: space-between; } .img_box { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } .img_box > img { width: 100%; height: 100%; object-fit: cover; } .cc { display: flex !important; flex-direction: column; justify-content: center; align-items: center; } .ac { align-items: center } .as { align-items: flex-start; } .ae { align-items: flex-end; } .jcs { justify-content: flex-start; } .jcc { justify-content: center; } .jce { justify-content: flex-end; } .jcsb { justify-content: space-between; } .round { padding: 1rem; border-radius: 500px; } .round20 { padding: 1.25rem 2rem; border-radius: 1.25rem; } .round15 { padding: 1.25rem 2rem; border-radius: .94rem; } .round10 { padding: 1.25rem 2rem; border-radius: .625rem; } .round5 { padding: .8rem; border-radius: .3125rem; } .round0 { border-radius: 0 !important; } .gray_bg1 { background: #f5f5f5; } .gray_bg2 { background: #f7f7f7; } .gray_bg3 { background: #f9f9f9; } .gray_bg4 { background: #666; color: #fff; } .gray_bg5 { background: #f3f4f7; } .gray_bd1 { border: 1px solid #ddd; } .gray_box { padding: 1.5rem; background: #f9f9f9; border: 1px solid #e8e8e8; border-radius: 10px; } .gray_box2 { padding: 2.3rem 3.125rem; background: #f7f7f7; line-height: 1.7; } .gray_box3 { padding: 1.2rem 2rem; background: #f9f9f9; border-radius: 10px; } .gray_box4 { padding: 1.5rem 2rem; background: #f7f7f7; border-radius: 10px; } .gray_box5 { padding: 1rem; background: #f4f4f4; } .mob_only, .lower640, .lower480 { display: none !important; } .hidden { display: none !important; } .block { display: block; } .hidden_word { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; color: transparent; } .flex_box > .half { width: 48.5%; } .flex_box > .third { width: 31.25%; } .flex_box > .quarter { width: 23.15%; } .long { width: 100%; } .no_click { pointer-events: none; -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .nowrap { white-space: nowrap; } .ovf_hdn { overflow: hidden; } .zi99 { z-index: 99; } .no_bg { background:none !important; } .no_bl { border-left:none !important; } .no_bb { border-bottom:none !important; } .no_bt { border-top:none !important; } .no_br { border-right:none !important; } .no_bd { border:none !important; } .arrow_thick { width: .94rem; height: 1.5rem; background: url('/asset/images/arrow_thick.png') no-repeat 50% 50%; } .td_flex { display: flex; justify-content: center; align-items: center; gap: 5px; } /*font*/ .fs80 { font-size: 5rem; } .fs60 { font-size: 3.75rem; } .fs50 { font-size: 3.125rem; } .fs42 { font-size : 2.625rem;} .fs40 { font-size : 2.5rem;} .fs36 { font-size: 2.25rem; } .fs32 { font-size: 2rem; } .fs30 { font-size: 1.875rem; } .fs28 { font-size: 1.75rem; } .fs27 { font-size: 1.6875rem; } .fs26 { font-size: 1.625rem; } .fs25 { font-size: 1.5625rem; } .fs24 { font-size: 1.5rem; } .fs23 { font-size: 1.4375rem; } .fs22 { font-size: 1.375rem; } .fs21 { font-size: 1.3125rem; } .fs20 { font-size: 1.25rem; } .fs19 { font-size: 1.1875rem; } .fs18 { font-size: 1.125rem; } .fs16 { font-size: 1rem; } .fs17 { font-size: 1.0625rem; } .fs15 { font-size: .94rem; } .fs14 { font-size: .875rem; } .fs13 { font-size: .81rem; } .fs12 { font-size: .75rem; } .nts { font-family: 'NotoSans'; } .scd { font-family: 'SCoreDream', 'NotoSans'; } .ptd { font-family: 'Pretendard', 'NotoSans'; } .gmarket { font-family: 'GmarketSans', 'NotoSans'; } .fw900 { font-weight: 900; } .fw800 { font-weight: 800; } .fw700 { font-weight: 700; } .fw600 { font-weight: 600; } .fw500 { font-weight: 500; } .fw400 { font-weight: 400; } .fw300 { font-weight: 300; } .fw200 { font-weight: 200; } .fw100 { font-weight: 100; } .accent { font-weight: 500; color: #000; } .refer { font-weight: 300; color: #999; } .white { color: #fff !important; } .red { color: #da1f1f !important; } .red2 { color: #ed272d !important; } .green { color: #82bc43 !important; } .green2 { color: #1d8f25 !important; } .green3 { color: #01a699 !important; } .blue { color: #48C5FF !important; } .blue2 { color: #008CD7 !important; } .skyblue { color: #55a5da !important; } .yellow { color: #ffdc00 !important; } .brown { color: #897c71; } .brown2 { color: #927e5e; } .brown3 { color: #5b5d64; } .orange { color: #f18800; } .pink { color: #0894b5 !important; } .b_gray { color: #333 !important; } .b_gray2 { color: #2d2d2d !important; } .gray { color: #666 !important; } .gray2 { color: #8d8d8d !important; } .gray3 { color: #999 !important; } .gray4 { color: #797979 !important; } .l_gray { color: #bbb !important; } .l_gray2 { color: #ccc !important; } .l_gray3 { color: #a3a3a3 !important; } .black2 { color: #121212 !important; } .c { text-align: center !important; } .r { text-align: right; } .underline { text-decoration: underline; text-underline-offset : 3px; } .lh1 { line-height: 1; } .lh14 { line-height: 1.4; } .lh16 { line-height: 1.6; } .lh17 { line-height: 1.7; } .ti8 { text-indent: -.5rem; } .ti16 { text-indent: -1rem; } .indent14 { text-indent: .875rem } .indent18 { text-indent: 1.125rem } .pl8 { padding-left: .5rem; } .pl16 { padding-left: 1rem; } .ellip1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ellip2 { clear: both; word-break:break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ellip3 { clear: both; word-break:break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ellip4 { clear: both; word-break:break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } /* 카테고리 */ .cate { max-width: 3.75rem; width: 100%; background: rgba(0, 0, 0, 0.08); color: #666; text-align: center; padding: 4px; border-radius: 50px; font-weight: 600; line-height: 1.1; margin-top: 6px;} .cate.cate1 {background: rgba(64, 146, 243, 0.2) !important; color: #4092F3 !important;} .cate.cate2 {background: rgba(32, 214, 228, 0.24) !important; color: #00BECD !important;} .cate.cate3 {background: rgba(89, 94, 255, 0.2) !important; color: #595EFF !important;} /*bg*/ .bg_red { background-color: #ea5413 !important; } .bg_grn { background-color: #428e4d !important; } .bg_blue { background-color: #196acf !important; } .bg_skyblue { background-color: #2ea9ea !important; } .bg_brown { background-color: #af622f !important; } .bg_orange { background-color: #fa8027 !important; } .bg_white { background-color: #fff !important; } .bg_yel { background-color: #f39210 !important; } .sch_wrap { display: flex; justify-content: space-between; } .sch_form { display: flex; align-items: center; gap: 4px; } .sch_wrap .sch_form select, .sch_wrap .sch_form input { height: 2.5rem; } /*회전*/ .rotate {transform: rotate(-90deg); display: block;} /* 버튼*/ .btn_style1, .btn_style2, .btn_style3, .btn_style4, .btn_style5, .btn_style6 { position: relative; line-height: 1; } .btn_style1:hover, .btn_style2:hover, .btn_style3:hover, .btn_style4:hover { opacity: .8; } .btn_style1 span, .btn_style2 span, .btn_style3 span, .btn_style4 span, .btn_style5 span, .btn_style6 span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .btn_wrap { display: flex; flex-wrap: wrap; gap: 0.625rem; } .btn_wrap2 { max-width: 700px; margin: 0 auto; display: flex; justify-content: center; gap: 1.25rem; } .btn_wrap2 > a { width: calc(50% - 5px); } .btn_wrap3 { max-width: 360px; margin: 60px auto 0 auto; display: flex; justify-content: center; gap: 1.25rem; } .btn_wrap4 { display: flex; flex-wrap: wrap; gap: .625rem; } .btn_wrap > a {border-radius : 10px;} .btn_style1 { display: inline-block; min-width: 4.75rem; min-height: 1.75rem; padding: .5rem 1.5rem; border-width: 1px; border-style: solid; border-color: #333; color: #333; text-align: center !important; background: #fff; border-radius: 5px;} .btn_style1 span { font-weight: 500; font-size: 0.8125rem; } .btn_style2 { display: inline-block; width: 8.5rem; height: 3.125rem; border-radius: 10px; text-align: center !important; background: #fff; } .btn_style2 span { font-size: 1.125rem; font-weight: 500; } .btn_style3 { display: inline-block; padding: .7rem 1.5rem .7rem; border-width: 1px; border-style: solid; border-radius: 500px; font-size: .94rem; font-weight: 600; text-align: center; background: #fff; } .btn_style4 { display: inline-block; min-width: 7.5rem; min-height: 2.1875rem; padding: .5rem 1rem; border-width: 1px; border-style: solid; font-size: .94rem; text-align: center !important; background: #fff; } .btn_style5 { display: inline-block; min-width: 8.75rem; min-height: 2.875rem; padding: .625rem 1.25rem; border-width: 1px; border-style: solid; border-radius: 500px; font-weight: 500; text-align: center; letter-spacing: 0; background: #fff; } .btn_style6 { display: inline-block; min-width: 13.75rem; min-height: 2.8125rem; padding: .5rem 1rem; border-width: 1px; border-style: solid; border-radius: 1.875rem; font-size: 1.125rem; font-weight: 500; text-align: center !important; background: #fff; } .btn_style7 { display: inline-block; padding: 0.1rem 0.8rem; border-radius: 5px; font-size: 0.875rem; font-weight: 500; text-align: center; letter-spacing: 0; background: #fff; } .btn_style7 span { } .btn_style8{ display: inline-block; width: 7.5rem; height: 2.5rem; line-height: 2.4rem; border-radius: 2px; border: 1px solid #bbb; text-align: center; color: #333; transition: all .3s; font-size: 0.9375rem; } .btn_style8:hover{ background: #0068c1; color: #fff; border: 1px solid #0068c1; } .btn_style8.blue_fill:hover{ background: #fff !important; color: #333; border: 1px solid #bbb; } .red_fill { background: #e6002d; border-color: #e6002d; color: #fff; } .red_line { border-color: #e6002d; color: #e6002d; } .red_fill2 { background: #ef6250;color: #fff; } .red_line2 { border: 1px solid #ef6250; } .orange_fill { background: #fa8027 !important; border-color: #fa8027 !important; color: #fff !important; } .orange_line { border-color: #fa8027; color: #fa8027; } .yelllow_fill { background: #ffdc00; border-color: #ffdc00 ; color: #000; } .yellow_fill2 { background: #ffdc00; color:#fff; } .yellow_line2 { border: 1px solid #ffdc00; } .brown_fill { background: #927e5e; border-color: #927e5e; color: #fff; } .brown_line { border-color: #927e5e; color: #927e5e; } .gray_fill { background: #6b6b6b; border-color: #6b6b6b; color: #fff; } .gray_fill2 { background: #f2f2f2; border-color: #f2f2f2; color: #000; } .gray_fill3 { background: #eee; border-color: #eee; color: #000; } .gray_fill4 { background: #bcbcbc; color: #fff; border-color: #bcbcbc; } .gray_fill5 { background: #5b5d64; color: #fff; } .gray_fill6 { background: #505259 !important; color: #fff !important; } .gray_fill7 { background: #bcbcbc !important; color: #fff !important; } .gray_line { border-color: #ababab; color: #929191; } .gray_line2 { background: #f2f2f2; border-color: #e8e8e8; color: #000; } .gray_line3 { background: #fff; border-color: #a2a2a2; color: #000; } .gray_line4 { background: #fff; border-color: #bcbcbc; color: #9d9d9d; } .gray_line5 { background: #5b5d64 ; border-color: #5b5d64 ; color: #5b5d64; } .green_fill { background: #00aea0 !important; border-color: #00aea0 !important; color: #fff !important; } .blue_fill { background: #45C1FB !important; border-color: #45C1FB !important; color: #fff !important; } .blue_fill2 { background: #6388d0 !important; border-color: #6388d0; color: #fff; } .blue_fill3 {background : #10133b !important; border-color: #10133b; color: #fff; } .blue_line { border-color: #0068c0; color: #0068c0; } .black_line { border-color: #000; color: #000; } .black_fill { background: #000; border-color: #000; color: #fff; } .black_fill2 { background: #2d2d2d !important; /* border-color: #2f2f2f; */ color: #fff !important; } .black_fill3 { background: #414141; border-color: #414141; color: #fff; } .white_fill { background: #fff; border-color: #fff; } .white_line { background: none; color: #fff; border-color: #fff; } .ghost { border: 0; background: rgba(0, 0, 0, .3); color: #fff; } .orange_fill:focus, .orange_line:focus { outline-color: #333 !important; } .btn_right { display: flex; justify-content: flex-end; gap: .625rem; } .btn_right img { vertical-align: middle; margin-right: 4px; } .btn_arrow { position: relative; display: inline-block; padding-left: 1rem; text-align: left !important; } .btn_arrow span { padding-left: 1rem; justify-content: flex-start !important; } .btn_arrow::before { content: ""; position: absolute; top: 50%; right: 1rem; width: 7px; height: 7px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: translateY(-52%) rotate(45deg); } .btn_arrow.black_fill::before { border-color: #fff; } .btn_arrow.white_fill::before { border-color: #000; } /*title*/ h3.h3_tit { font-size: 2.625rem; font-weight: 700; color: #000; line-height: 1; letter-spacing: -2px; position: relative; } h3.deco::after { content: ""; position: absolute; width: 1.5625rem; height: 1.25rem; top: 0; left: -1.8rem; background: url('/asset/images/h3_deco.png') no-repeat 50% 50%; background-size: 100%; } h4.h4_tit { font-size: 1.625rem; font-weight: 700; line-height: 1; position: relative; } h4.deco { padding-left: 1.5rem; } h4.deco::after { content: ""; position: absolute; top: 1rem; transform: translateY(-50%); left: 0; width: .94rem; height: .94rem; border: 4px solid #0291c5; } h5.h5_tit { font-size: 1.25rem; font-weight: 500; position: relative; } h5.deco{padding-left:1rem;} h5.deco::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 4px; height: 1.2rem; background-color:#b10e29;} ul.dot-list > li{ position: relative; padding-left: 1rem;} ul.dot-list > li + li{ margin-top: .6.25rem;} ul.dot-list > li::before{ content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #ccc; position: absolute; top: .625rem; left:0;} /* ------------------------------------------- */ /* layout */ /* ------------------------------------------- */ #header { position: fixed; width:100%; height: 5.625rem; z-index:2; -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; background-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } #header > .header_inner { position: relative; max-width: 1820px; padding:0 3.125rem; height: inherit; display: flex; justify-content: space-between; align-items: center; z-index: 6; margin: 0 auto;} #header h1.logo { position: relative; width: 15rem; aspect-ratio: 1/0.25; filter: invert(1) brightness(10);} #header h1.logo a { background-repeat: no-repeat; background-position: 50% 50%; background-image: url('/asset/images/kashi_logo.svg'); background-size: 100%; } #header .header_right {gap: 1.875rem; flex-wrap : nowrap; } #header .header_right div, #header .header_right div a{ width: 1.5rem; height: 1.5rem;} #header .header_right div.login_wrap{position: relative;} #header .header_right div.login_wrap span{ position: absolute; bottom: -1.25rem; left: 50%; width: max-content; transform: translate(-50%, 0px); font-size: .75rem; font-weight: 300;color: #fff;} .pc .gnb { z-index: 6; } .pc .gnb > ul { display: flex; position: relative; transition: all 0.3s;} .pc .gnb > ul > li { position: relative; white-space: nowrap; transition: all 0.2s ease-in-out; /* left: 50px; */} .pc .gnb > ul > li::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; background-color: #008CD7; width: 50%; opacity: 0; height: 3px; transition: all 0.1s ease-in-out; border-radius: 5px;} .pc .gnb > ul > li:hover::after { background-color: #fff; opacity: 1; } .pc .gnb > ul > li.on::after { opacity: 1; } .pc .gnb > ul > li > a{ position: relative; display: block; width: 11.25rem; height: 5.625rem; line-height: 5.625rem; font-size: 1.125rem; font-weight: 600; color: #fff; /* padding: 0 2.5rem; */ text-align: center; } .pc .gnb > ul > li.gnb2 > a{width:12.5rem;} .pc .gnb > ul > li:hover, .pc .gnb > ul > li:hover .depth2{ background-color: #48C5FF; } .pc .gnb > ul > li:hover > a { color: #fff !important; } .pc .gnb > ul > li:hover .depth2 > li > a { color: #fff !important; font-weight: 500;} .pc .gnb > ul > li .depth2 {position: absolute;top: 100%;left: 0;pointer-events: none;opacity: 0; transition: .15s;width: 100%; height: calc(20rem + 1.25rem - 1px); transition: all 0.2s ease-in-out;} .pc .gnb > ul > li .depth2.on { opacity: 1; pointer-events: auto; z-index: 99; } .pc .gnb > ul > li .depth2 > li {position: relative;width: 100%;height: 2.5rem;display: flex;align-items: center;justify-content: center;} .pc .gnb > ul > li .depth2 > li > a { width: 100%;height: 100%; z-index: 9;transition: .3s; color: #000;display: flex;align-items: center;justify-content: center;} .pc .gnb > ul > li .depth2 > li:hover > a {background-color: rgb(0 140 215 / 40%);} .depth2 > li > a[target="_blank"]::after, .depth3 > li > a[target="_blank"]::after { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-left: 5px; background: url('/asset/images/linkout_icon.png') no-repeat 50% 50%; background-size: 100%; } #header .slide_bg { display: none; position: absolute; top: calc(5.625rem - 1px); left: 0; width: 100%; height:calc(20rem + 1.25rem); background: #fff; z-index: 5; /* border-top: 1px solid #ddd; */ box-shadow: 0 6px 10px rgba(102, 102, 102, .05); } #header .hd-schbx {background-color: #607088;overflow: hidden;position: absolute;left: 0;width: 100%;top: 100%;padding: 3.75rem 0; border: 0; display: none;} #header .hd-schbx * {line-height: 1;} #header .hd-schbx .search_box {position: relative;width: 37rem;border-bottom: 1px #ffffff solid;} #header .hd-schbx .search_box .search_input { width:calc(100% - 3.125rem - 1.25rem); height: 3.75rem; border: 0; outline: 0; background: none; text-indent: .625rem; font-size:1.25rem; color: #fff;} #header .hd-schbx .search_box .search_btn {display: flex; justify-content: center; align-items: center; width: 3.125rem; height: 3.75rem; padding-right: 1.25rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} #header .hd-schbx .search_box .search_input::placeholder{color: rgba(255,255,255,0.7)} #sidebar { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; min-height: 800px; background: url('/asset/images/sidemenu_bg.jpg'); z-index: 9999; display: none; } #sidebar .login_wrap { position: absolute; left: 30px; top: 20px; display: flex; gap: 20px; } #sidebar .login_wrap p { color: #fff; } #sidebar .sub_header_right {left: -15px;} #sidebar .sub_header_right li a { width: auto; height: 30px; line-height: 30px; display: block; text-align: center; padding: 0 10px;} #sidebar .sub_header_right li span { font-size: 12px;} #sidebar .sub_header_right li span::before {display:none;} #sidebar * { transition: .5s; } #sidebar .bt-close { width: 5rem; height: 5rem; background: #fff; position: absolute; right: 0; top: 0; z-index: 5; } #sidebar .gnb > ul { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } #sidebar .gnb > ul > li { position: relative; flex: 1; height: 100vh; background: rgb(96 112 136 / 95%); } #sidebar .gnb > ul > li + li { border-left: 1px solid rgba(255, 255, 255, .2); } #sidebar .gnb > ul > li > a { display: block; width: 100%; text-align: center; font-size: 2.25rem; padding: .8rem 0; color: #fff; position: absolute; z-index: 2; left: 50%; top: 28vh; transform: translateX(-50%); font-weight: 500; } #sidebar .gnb > ul > li > a::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 110%; width: 3.75rem; height: 2px; background: #fff; } #sidebar .gnb > ul > li.active > a { color: #30a3cd; } #sidebar .gnb > ul > li.active > a::after{ transform: rotate(-45deg); } #sidebar .gnb > ul > li > ul.depth2 { width: 100%; position: absolute; z-index: 2; left: 50%; top: 40vh; transform: translateX(-50%); padding: 1rem 0 2rem; text-align: center; } #sidebar .gnb > ul > li > ul.depth2 > li > a { position: relative; display: block; width: 100%; margin-top: 1.5rem; font-size: 1.375rem; font-weight: 300; color: #fff; opacity:.6; transition: .3s; } #sidebar .gnb > ul > li > ul.depth2 > li:hover > a { font-weight:600; opacity:1; } #sidebar .gnb > ul > li.on { background: rgb(0 140 215 / 95%);} /* fixed */ .fixed #header, .fixed#header, .fixed2#header, .h_sub#header{ background: #fff !important; border-bottom : 1px solid #f0f0f0; } .fixed #header #gnb > ul > li > a, .fixed#header #gnb > ul > li > a, .fixed2#header #gnb > ul > li > a, .h_sub#header #gnb > ul > li > a{ color: #000; } .fixed #header h1.logo, .fixed#header h1.logo, .fixed2#header h1.logo, .h_sub#header h1.logo{ filter: invert(0) brightness(1); } .fixed #header .header_right a img, .fixed#header .header_right a img, .fixed2#header .header_right a img, .h_sub#header .header_right a img{ -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0); } .fixed #header .header_right div.login_wrap span, .fixed#header .header_right div.login_wrap span, .fixed2 #header .header_right div.login_wrap span, .h_sub#header .header_right div.login_wrap span{color:#000;} #footer { padding: 3.125rem 0; background-color: #5C7189; font-size: .875rem; font-weight: 300; color: rgb(255 255 255 / 80%); } #footer .inner { position: relative; width:calc(100% - 12.5rem); height: auto;} #footer .inner .logo { width: 15rem; } #footer .inner nav, #footer .inner .btm { width: 100%; } #footer .inner nav{padding-bottom:1.875rem; border-bottom:1px rgb(255 255 255 / 20%) solid;} #footer .inner address p{gap:1.875rem;} #footer .inner address span{position:relative;} #footer .inner address span + span::after { display: block; content: ""; width: 1px; height: .625rem; background: rgb(255 255 255 / 80%); position: absolute; top: calc((100% - .625rem) / 2); left: calc(1.875rem/-2); } #footer .footer_nav{gap:1.875rem;} #footer .footer_nav li {position: relative; } #footer .footer_nav li + li::after { display: block; content: ""; width: 1px; height: .625rem; background: rgb(255 255 255 / 80%); position: absolute; top: calc((100% - .625rem) / 2); left: calc(1.875rem/-2); } #footer .footer_nav li a { font-weight: 400; color: #fff; } /*quick_menu*/ .m_quick {opacity:0; position: fixed; bottom: 7.5rem; right: 2.5rem; z-index: 0; gap:1.875rem; transition: all 0.2s ease-in-out;} .quick_menu{width: 8.75rem; border-radius: .625rem; box-shadow: 0 0 10px rgb(0 0 0 / 10%); background: #fff; overflow: hidden;} .quick_menu > p{width:100%; background: linear-gradient( 44deg, #201d85, #008CD7); padding:.625rem 0; color:#fff;} .quick_menu ul{ padding:0 .875rem; background:#fff; } .quick_menu ul li{position: relative;} .quick_menu ul li + li:after { content: ""; display: block; width: 100%; height: 1px; background: #ddd; position: absolute; right: 0; top: -.3125rem; } .quick_menu ul li a{display:block; padding:1.25rem 0;} .m_quick .top { width: 3.75rem; height: 3.75rem; background: #000; border-radius: 50%; padding-top: 1.25rem; cursor: pointer; position: relative;} .m_quick .top:after { content: ""; display: block; position: absolute; top: 2rem; left: 50%; width: 1rem; height: 1rem; border-top: 3px #fff solid; border-right: 3px #fff solid; transform: rotate(315deg) translate(0px, -70%); } .fixed .m_quick{opacity:1; z-index: 4; } /* 2_3 장비안내*/ .equi_wrap { border-top: 2px solid #000; border-bottom: 2px solid #000; } .equi_box { display: flex; border-top: 1px solid #e0e0e0; } .equi_tit { background: #a1a3a7; max-width: 220px; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 10px; gap: 20px; } .equi_tit p { color: #fff; font-size: 1.25rem; } .equi_con { width: calc(100% - 220px); min-width: 700px; padding: 30px 0 30px 50px; display: flex; flex-wrap: wrap; gap: 15px 50px; } .equi_con li { width: calc(50% - 25px); } .equi_con li a { position: relative; display: flex; } .equi_con li:hover a { background: #f5f5f5; border-radius: 10px; transition: all 0s; } .equi_con li a::before { content: ""; display: block; width: 50px; height: 50px; background: url("../images/equi_arrow.png") no-repeat 50% 50%; position: absolute; right: 15px; bottom: 10px; z-index: 1;} .equi_con li a:hover::before { background: url("../images/equi_arrow_hover.png") no-repeat 50% 50%; } .equi_con li a:hover::after { content: ""; display: block; width: 50px; height: 50px; background: #2d2d2d; border-radius: 10px; position: absolute; right: 15px; bottom: 10px; } .equi_con li a .img { width: 6.25rem; height: 6.25rem; background: #f5f5f5; border-radius: 10px; display: flex; justify-content: center; align-items: center; } /* .equi_con li a .img img { width: 3.3125rem; height: 4.4375rem; object-fit: cover; } */ .equi_con li a .txt { padding: 20px; } .equi_con li a .txt span { color: #9c9c9c; font-size: 1rem; } .equi_con li a .txt p { margin-top: 5px; font-size: 1.375rem; font-weight: 600; } @media screen and (max-width:980px){ .equi_box { display: block; border-top: 0; } .equi_tit { max-width: none; padding: 15px; gap: 5px; } .equi_tit img { width: 20px;} .equi_con { width: 100%; min-width: auto; padding: 20px; gap: 10px; } .equi_con li { width: calc(100% / 2 - 5px); } .equi_con li a .txt { padding: 15px; } .equi_con li a::before, .equi_con li a:hover::before, .equi_con li a:hover::after { width: 35px; height: 35px; background-size: 50%; } .equi_con li a .img img { width: 2.3125rem; height: 3.4375rem; } } @media screen and (max-width:800px){ } @media screen and (max-width:640px){ .equi_con li { width: 100%; } } @media screen and (max-width:400px){ .equi_tit { padding: 10px; } .equi_tit img { width: 15px; } .equi_tit p { font-size: 1.15rem; } .equi_con li a .img { width: 5.25rem; height: 5.25rem; } .equi_con li a .txt { padding: 10px; } .equi_con li a .txt p { font-size: 1.1rem; } } /* 마이페이지 */ /* lecture ongoing */ .myclassroom .sec-con { position: relative; } .myclassroom .ongoing .sec-con > ul > li{ height: 18.5rem; display:flex;border:1px solid #dfdfdf; border-radius:.625rem;} .myclassroom .ongoing .sec-con > ul > li + li{margin-top:1.875rem;} .myclassroom .ongoing .sec-con > ul > li > div.left_box { padding: 1.875rem; } .myclassroom .ongoing .sec-con > ul > li > div.right_box { padding: 1.25rem 1.875rem; } .myclassroom .ongoing .sec-con > ul > li .left_box{flex:none; width:31.25rem; background-color:#f6f6f6; border-radius:.625rem 0 0 .625rem; position:relative; display:flex; flex-flow:column; justify-content:space-between;} .myclassroom .ongoing .sec-con > ul > li .left_box .tit_box .tag{margin-bottom:.625rem;} .myclassroom .ongoing .sec-con > ul > li .left_box .tit_box .tag ul{display:flex; flex-wrap:wrap; row-gap:.3125rem; column-gap:.625rem;} .myclassroom .ongoing .sec-con > ul > li .left_box .tit_box .tag ul li{font-size: 0.875rem; font-weight:500; color:#444; border:1px solid #ccc; height: 1.75rem; padding: 0 0.625rem; display:flex; justify-content:center; align-items:center; border-radius:.3125rem; background-color:#fff;} .myclassroom .ongoing .sec-con > ul > li .left_box .tit_box h4{font-size:1.5rem; font-weight:500;} .myclassroom .ongoing .sec-con > ul > li .left_box .tit_box .period{ margin-top:1.25rem;} .myclassroom .ongoing .sec-con > ul > li .left_box .tit_box .period i{ width:5rem; display:inline-block; font-weight:500; } .myclassroom .ongoing .sec-con > ul > li .left_box .bottom_box .go_lecture{flex:none; display:flex; justify-content: flex-end; /*margin-top: 20px;*/} .myclassroom .ongoing .sec-con > ul > li .left_box .bottom_box .go_lecture a{ display:flex; font-size:0.875rem; font-weight:400; color:#444; align-items:center;} .myclassroom .ongoing .sec-con > ul > li .left_box .bottom_box .go_lecture a .ico{width:7px; height:7px; border-top:1px solid #444; border-right:1px solid #444; transform:rotate(45deg); margin-left:.625rem;} .myclassroom .ongoing .sec-con > ul > li .left_box .h_view{width:100%; height:100%; position:absolute; top:0; left:0; background-color:rgba(0, 0, 0, 0.5); border-radius:.625rem 0 0 .625rem; display:none;} .myclassroom .ongoing .sec-con > ul > li .left_box .h_view ul{display:flex; flex-flow:column; justify-content:center; align-items:center; height:100%; gap:.625rem;} .myclassroom .ongoing .sec-con > ul > li .left_box .h_view ul li{ width:11.25rem; height:3.125rem;} .myclassroom .ongoing .sec-con > ul > li .left_box .h_view ul li a{display:flex; justify-content:center; align-items:center; width:100%; height:100%; border-radius:1.5rem; background-color:#fff; font-size:1.25rem; font-weight:500;} .myclassroom .ongoing .sec-con > ul > li .left_box .h_view ul li a .ico{display:flex; justify-content:center; align-items:center; margin-left:0.9375;} .myclassroom .ongoing .sec-con > ul > li .right_box{flex:1; display:flex; flex-flow:column; /*justify-content:space-between;*/} .myclassroom .ongoing .sec-con > ul > li .right_box .top_box{display:flex; flex-flow:column; gap: 0.9375rem; padding: 0 1.25rem;} .myclassroom .ongoing .sec-con > ul > li .right_box ul { display:flex; justify-content: space-between;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li{ /*flex:1;*/ display:flex; align-items:center; justify-content:flex-start; position:relative; font-size:1rem; font-weight:500 !important; width : 46%; } .myclassroom .ongoing .sec-con > ul > li .right_box ul li i{width:5rem; flex:none; } /* .myclassroom .ongoing .sec-con > ul > li .right_box .top_box > ul > li:first-child{justify-content:flex-start; flex:none; padding-right:50px; } */ .myclassroom .ongoing .sec-con > ul > li .right_box .top_box .top { justify-content: space-between; } .myclassroom .ongoing .sec-con > ul > li .right_box .top_box .top li { flex: none; } .myclassroom .ongoing .sec-con > ul > li .right_box .top_box .bottom { justify-content: flex-start; /* gap:3.125rem */ gap: 1rem; flex-wrap: wrap;} /*.myclassroom .ongoing .sec-con > ul > li .right_box .top_box .bottom li { margin-right: 25px; }*/ .myclassroom .ongoing .sec-con > ul > li .right_box ul li.period span{font-weight:400;} /* .myclassroom .ongoing .sec-con > ul > li .right_box ul li.progress span{ font-size:20px; } */ .myclassroom .ongoing .sec-con > ul > li .right_box ul li span{margin-left:1.25rem; height:1.875rem; display: flex; align-items: center;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li a{ margin-left: .3125rem; color: #666; } .myclassroom .ongoing .sec-con > ul > li .right_box ul li a.completion { /* border: 1px solid #ffdc00; */border-radius: 10px; font-size: 0.875rem; padding: 3px 0.9375rem; background: linear-gradient(80deg, #595EFF, #1FD6E3); color: #fff !important; } .myclassroom .ongoing .sec-con > ul > li .right_box ul li a.download { border: 1px solid #888; border-radius: .3125rem; font-size: 0.75rem; padding: 3px .625rem; background: #888; color: #888 !important; display: flex; align-items: center; gap: .3125rem; } a.google-form { border: 1px solid #4285F4; border-radius: .3125rem; font-size: 0.875rem; padding: 0 .625rem; color: #4285F4 !important; height: 1.875rem; line-height:1.875rem;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li.off span{font-weight:400; color:#797979;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li.app span{ color:#177dbf; } .myclassroom .ongoing .sec-con > ul > li .right_box ul li .cancel { border-radius: .3125rem; background: #5b5d64; padding: 3px .625rem; font-size: 0.75rem; color: #fff; } .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul li:nth-child(2) span.fs13 { margin-left: .3125rem; } .myclassroom .ongoing .sec-con > ul > li .right_box ul li.on a{width:5rem; height:1.875rem; border-radius:3px; border:1px solid #ccc; display:flex; align-items:center; justify-content:center; font-size:0.875rem; font-weight:400; background-color:#fff;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li.cmpl span{ font-weight:500; color: #797979;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box{ background-color:#f4fbff; border-radius:.625rem; margin-top: 1.25rem; display:flex; align-items:center; justify-content:center; padding: 0 1.9rem;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box .counsel_btn{flex:none; width:5rem; height:100%;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box .counsel_btn a{display:flex; align-items:center; justify-content:center; background-color:#59a1d0; color:#fff; width:100%; height:100%; border-radius:.625rem 0 0 .625rem; font-size:0.875rem; font-weight:500;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul{padding:0.9375rem 0; flex:1; flex-wrap: wrap;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul li { width: calc(100% / 2); justify-content: flex-start;} /*.myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul li:last-child { justify-content: end; }*/ .myclassroom .ongoing .sec-con > ul > li .right_box .btn_ul{display:flex; } .myclassroom .ongoing .sec-con > ul > li .right_box .btn_ul .btn_li + .btn_li{margin-left:.625rem;} .myclassroom .ongoing .sec-con > ul > li .right_box .btn_ul .btn_li a{height:1.875rem; padding:0 1.25rem; border-radius:1.25rem; display:flex; align-items:center; justify-content:center; font-size:0.875rem; font-weight:400; margin:0;} /* 출석현황 */ .myclassroom .ongoing .sec-con > ul > li .right_box ul li > p {width: 70px;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li.attendance span.no_attend {color: #999;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li.attendance span.attend {color: #0c81e8;} .myclassroom .ongoing .sec-con > ul > li .right_box .btn_ul .btn_li.btnGreen a{background-color:#28af6c; color:#fff;} .myclassroom .ongoing .sec-con > ul > li .right_box .btn_ul .btn_li.btnGray a{background-color:#464646; color:#fff;} .myclassroom .ongoing .sec-con > ul > li .right_box .progress .Issuance_btn a{height:1.875rem; padding: 0 1.25rem; border-radius:1.25rem; background-color:#fff; color:#000; display:flex; align-items:center; justify-content:center; font-size:0.875rem; font-weight:400; border:1px solid #000} .myclassroom .ongoing .sec-con > ul > li .right_box .progress .Issuance_btn a:hover{background-color:#ff5e3d; color:#fff; border:1px solid #ff5e3d;} .myclassroom .ongoing .sec-con > ul > li .right_box .progress .Issuance_btn a .ico{width:16px; height:16px; background-image:url(/images/lifeline/user/SBprocess_ico01_b.png); background-size:100%; background-repeat:no-repeat; background-position:center; margin-right:.625rem; transition:all .2s;} .myclassroom .ongoing .sec-con > ul > li .right_box .progress .Issuance_btn a:hover .ico{background-image:url(/images/lifeline/user/SBprocess_ico01_w.png);} .myclassroom .ongoing .sec-con > ul > li .right_box .btn_box{justify-content:end;} @media screen and (max-width: 1720px){ .pc .gnb > ul {left : 0;} } @media screen and (max-width: 1600px){ #header > .header_inner > .flex_box {flex-wrap : nowrap;} /* .pc .gnb > ul {left: -20px;} */ } @media screen and (max-width: 1400px){ /* gnb */ .pc .gnb > ul {left: -10px;} .myclassroom .ongoing .sec-con > ul > li .left_box{width: 26.25rem;} } @media screen and (max-width: 1280px){ .myclassroom .ongoing .sec-con > ul > li .left_box .tit_box .period{margin-top: .625rem;} .myclassroom .ongoing .sec-con > ul > li .left_box .tit_box .period i{width:3.75rem;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li a, .myclassroom .ongoing .sec-con > ul > li .right_box ul li span{margin-left:1rem;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box {margin-top: 1rem;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul{width: 100%;} } @media screen and (max-width: 1024px){ /* .myclassroom .ongoing .sec-con > ul > li{flex-flow: column;}*/ /* .myclassroom .ongoing .sec-con > ul > li .left_box{width: 100%; border-radius:10px 10px 0 0;}*/ /* .myclassroom .ongoing .sec-con > ul > li .left_box .bottom_box{margin-top: 30px;}*/ /* .myclassroom .ongoing .sec-con > ul > li .left_box .h_view{border-radius: 10px 10px 0 0;}*/ } @media screen and (max-width: 980px){ .myclassroom .ongoing .sec-con > ul > li .right_box .top_box .bottom {gap: 1.875rem;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul{flex-direction: column;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul li {width: 100%;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li p{width:5rem;} } @media screen and (max-width: 767px) { .m_quick{display:none !important;} .myclassroom .ongoing .sec-con > ul > li { height: auto; flex-direction: column;} .myclassroom .ongoing .sec-con > ul > li .left_box {width: 100%; border-radius: .625rem .625rem 0 0;} .myclassroom .ongoing .sec-con > ul > li .left_box .bottom_box .go_lecture { position: absolute; right: 1.875rem; bottom: 1.875rem;} .myclassroom .ongoing .sec-con > ul > li .left_box .bottom_box .go_lecture a{ font-size: 1rem;} .myclassroom .ongoing .sec-con > ul > li .right_box .top_box {gap: .625rem;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul {flex-direction: row;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li span{margin:0;} } @media screen and (max-width:640px){ /* .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul li{justify-content:space-between; width: 100%;} .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul li.cmpl span, .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul li.off span{width: 70px; text-align: center;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li + li{margin-top:5px;} .myclassroom .ongoing .sec-con > ul > li .right_box .top_box > ul > li:first-child{padding-right: 15px;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li i{width: 60px;} */ .myclassroom .ongoing .sec-con > ul > li .right_box .bottom_box ul {flex-direction: column; } } @media screen and (max-width:500px){ /* .myclassroom .ongoing .sec-con > ul > li .right_box .top_box ul:nth-child(2){flex-flow: column;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li{justify-content: space-between;} .myclassroom .ongoing .sec-con > ul > li .right_box .top_box ul:first-child{flex-flow: column;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li.progress{order:2; margin-top:5px;}*/ .myclassroom .ongoing .sec-con > ul > li > div.left_box{padding: 1.25rem 1.875rem;} .myclassroom .ongoing .sec-con > ul > li > div.right_box {padding: 1.25rem .625rem;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li.btn_ul{order:1;} .myclassroom .ongoing .sec-con > ul > li .right_box .progress .Issuance_btn a, .myclassroom .ongoing .sec-con > ul > li .right_box .btn_ul .btn_li a{height:1.875rem; padding:0 0.875rem;} .myclassroom .ongoing .sec-con > ul > li .right_box .top_box{gap: 0;} .myclassroom .ongoing .sec-con > ul > li .right_box .top_box ul + ul{margin-top:5px;} .myclassroom .ongoing .sec-con > ul > li .right_box .top_box .bottom{flex-direction: column; gap: 5px;} .myclassroom .ongoing .sec-con > ul > li .right_box ul li {justify-content: flex-start;} } /*탭*/ .tab_box_wrap > .tab { display: none; position: relative; } .tab_box_wrap > .tab.active { display: block; } /* 팝업 */ .popup_scroll {max-height:700px; overflow-x:hidden; overflow-y:auto;} .pop_main .gray_border { padding: 1rem; } .pop_header { width: 100%; padding: 10px 30px; display: flex; justify-content: space-between; background: #897c71; color: #fff; } .pop_header h1 { font-size: 1.3rem; font-weight: 500; } .pop_header .close { font-size: 1.5rem; color: #fff; } .pop_main { padding: 20px; } .pop_main .title_wrap { padding: 25px 0; } .pop_main .table_data th { padding: 10px 0; } .pop_main .table_data td { padding: 8px 0; } table.table_popup { table-layout: fixed; width: 100%; } table.table_popup tr { border-bottom: 1px solid #dbdbdb; } table.table_popup th { background: #f5f5f5; text-align: left; padding: 10px 15px; border-right: 1px solid #dbdbdb; } table.table_popup td { padding: 10px; border-right: 1px solid #dbdbdb; text-align: left; } table.table_popup td:last-child { border: 0; } table.table_popup td .small_text { padding-left: 10px; } /*테이블*/ .table_box { border-top: #000 2px solid; max-height: 800px; overflow: auto; position: relative; } .table_box thead th { position: sticky; top: 0; } .table_box tfoot td { position: sticky; bottom: 0; } .table_line { width: 100%; border-top: #000 2px solid; position: relative; overflow-x: auto; } .table_line.bw1 { border-width: 1px; } .table_line_red { border-top: #0c81e8 2px solid; overflow-X: auto; /* margin-top: 20px; */ position:relative;} .table_line.black { border-bottom: 1px solid #000; } .table_box::-webkit-scrollbar { width: 10px; } .table_box::-webkit-scrollbar-thumb { height: 30%; background: #0894b5; border-radius: 5px; } .table_box::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 5px; } table.data2{ table-layout: fixed; width: 100%; } table.data2 thead { position: sticky; top: 0; } table.data2 thead th{ text-align: center; padding: 1rem 0; color: #333; font-size: 1rem; font-weight: 600; color: #000; background-color: #f7f7f7; border-bottom: #ccc 1px solid; border-left: 1px solid #ccc; } table.data2 tbody th{ text-align: center; padding: .875rem 0; color: #333; font-size: 1rem; font-weight: 500; color: #000; background-color: #eee; border-bottom: #ccc 1px solid; } table.data2 tbody td{ text-align: center; padding: .625rem 1.25rem; border-bottom: #ccc 1px solid; border-left: 1px solid #ccc; } table.data2 thead th:first-child, table.data2 tbody td:first-child { border-left: 0; } /* 입력폼 */ table.table_write { table-layout: fixed; width: 100%; } table.table_write tr { border-bottom: 1px solid #dbdbdb; } table.table_write th { background: #f5f5f5; text-align: left; padding: 10px 20px; border-right: 1px solid #dbdbdb; } table.table_write td { padding: 10px; border-right: 1px solid #dbdbdb; text-align: left; } table.table_write td:last-child { border: 0; } table.table_write td .small_text { padding-left: 10px; } table.table_write td input[type="password"], table.table_write td input[type="email"], table.table_write td input[type="text"] { width: 100%; max-width: 310px; } table.table_write td input[type="text"].long_input { max-width: 100%; } table.table_write td textarea { width: 100%; height: 150px; } /* table.table-wrote td .file_input {display : flex; align-items: center; gap : 0.5rem;} table.table-wrote td .file_input > input[type="text"] {width : calc((100% - 6.25rem); height : 40px;} */ /* 입력폼(회원가입) */ .board-write {width:100%; border-bottom:1px solid #d9d9d9; font-size: 0.95em;} .board-write tr:first-child th { border-top:none;} .board-write tr:first-child td { border-top:none;} .board-write th { background:#f5f5f5; border-top:1px solid #d9d9d9; padding:10px 5px 10px 20px; text-align:left; color:#2d2d2d; font-weight: normal} .board-write th span {color:#82308e; padding-right:2px;} .board-write.th_tc th {padding:13px 0 12px 0px; text-align:center;} .board-write.th_tc th span {margin-left:-15px;} .board-write td {border-top:1px solid #d9d9d9; height:36px; word-break: break-all; font-weight: 300; line-height:20px; padding:15px;} .board-write td.tc {text-align:center; padding:12px 0 11px 0px;} .board-write td.file a { color:#737070; display:inline-block; padding-left:22px; background:url(img/ico/add_file.gif) no-repeat left center;} .board-write td .file-name {margin: 0 10px 10px 0px; display: inline-block;} a#addFile {display: block; padding: 4px; background: #da1f1f; width: 3rem;} a#addFile > span.red {color : #fff !important;} .board-write .file_input {display: flex; align-items: center; gap: 0.5rem;} .board-write .file_input > input {width: calc(100% - 6rem) !important; height: 35px !important;} .board-write .file_input > label {background: #333; width: calc((100% - 6rem) / 8); height: 100%; height: 35px; line-height: 35px; color: #fff;} .board-write .file_input + .pt5 {text-align: left;} .board-write ul.radio_group {display: flex; align-items: center; gap: 0.875rem;} .board-write .input{min-height: 35px; line-height: 35px; width: 100%;} .imp { color:#82308e; font-size:14px; width:10px; display:inline-block; zoom:1; *display:inline;} .board-write th .totalW {padding:0px 20px 0px 0px;} .board-write th .totalW li {color:#2d2d2d; height:25px; font-size:13px; line-height:25px; position:relative; padding-right:120px;} .board-write th .totalW li span { display:block; position:absolute; right:0px; top:0px; color:#2d2d2d;} .board-write th .totalW li.total { height:30px; color:#81308d; font-size:18px; line-height:30px; margin-top:16px; padding-top:10px; border-top:1px solid #d1d1d1;} .board-write th .totalW li.total span {top:10px; color:#81308d;} .pick_day { background: #fff url('/asset/images/cal_icon.png') no-repeat right 15px top 50%; } /*전화번호*/ .phone_input { width: 100%; max-width: 310px; display: flex; justify-content: space-between; gap: 2%; } .phone_input > input[type="text"] { flex: 1; } .phone_input > span { color: #999; line-height: 35px; } /*사업자번호*/ .business_input { width: 100%; display: inline-block; max-width: 310px; } .business_input .flex_box { gap: 2%; } .business_input input[type="text"]:nth-child(1) { width: 25%; } .business_input input[type="text"]:nth-child(3) { width: 22%; } .business_input input[type="text"]:nth-child(5) { width: 40%; } .business_input span { color: #999; line-height: 35px; } /*사진첨부*/ .pic_upload { display: flex; flex-wrap: wrap; align-items: center; } .pic_upload .gray_border { width: 150px; height: 180px; padding: 10px; border-radius: 3px; } .pic_upload .pic_default { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .pic_upload label { margin-left: 10px; } /*파일첨부*/ .file_attach .file_list { height: 160px; overflow: auto; margin-top: 7px; border: 1px solid #ddd; border-radius: 3px; padding: 10px; } .file_attach .file_list .filebox p { width: calc(100% - 20px); font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file_attach .file_list .filebox p + p { margin-top: 7px; } .file_attach .file_list .filebox .delete { color: #ff5353; margin-left: 5px; } .file_attach label { padding: 7px 15px 6px; } /*컨텐츠페이지 테이블*/ table.table_list { table-layout: fixed; } table.table_list tr { border-bottom: 1px solid #ddd; } table.table_list th { text-align: left; padding: 1.5rem 1.25rem; vertical-align: top; } table.table_list td { text-align: left; padding: 1.5rem 1.25rem; } table.table_basic { table-layout: fixed; } table.table_basic tr { border-bottom: 1px solid #ddd; } table.table_basic th { padding: 1rem; text-align: center; font-size: 1.125rem; border-right: 1px solid #ddd; } table.table_basic th:last-child { border-right: 0; } table.table_basic td { padding: .6rem 1.25rem; text-align: left; border-right: 1px solid #ddd; } table.table_basic td:last-child { border-right: 0; } /*고객서비스 데이터 검색 컨트롤러*/ .data_search_wrap { margin-top: 40px; padding: 30px; background: #f6f6f6; border-radius: .94rem; } table.data_search { table-layout: fixed; } table.data_search th { } table.data_search td { padding: 10px; text-align: left; } table.data_search td select { width: 100%; max-width: 165px; } .search_day { width: 100%; max-width: 300px; display: flex; justify-content: space-between; align-items: center; } .search_day > input { width: 45%; } .search_day > input { background: #fff url('/asset/images/cal_icon2.png') no-repeat right .94rem top 50%; } .day_btns { padding: 0 30px; } .day_btns > button { margin: 0 3px; padding: 6px 20px 5px; border-radius: 500px; font-size: .94rem; font-weight: 500; text-align: center; background: #dedede; color: #8d8d8d; } .day_btns > button.active { background: #464646; color: #fff; } .data_input { display: flex; gap: 1%; } .data_input .flex_box { gap: 1%; } .data_input .flex_box input:nth-child(1) { width: 66%; max-width: 165px; } .data_input .flex_box input:nth-child(2) { width: 34%; } .data_input2 { display: flex; gap: 1%; } .data_input2 .flex_box { gap: 1%; } .data_input2 .flex_box input:nth-child(1) { width: 48%; max-width: 165px; } .data_input2 .flex_box input:nth-child(2) { width: 25%; } .data_input2 .flex_box input:nth-child(3) { width: 25%; } /*표*/ table.table_data { } table.table_data tr { border-bottom: 1px solid #ddd; } table.table_data th { padding: 1rem; background: #f7f7f7; border-right: 1px solid #ddd; font-weight: 500; text-align: center; vertical-align: middle; } table.table_data th:last-child { border-right: 0; } table.table_data td { padding: .81rem; text-align: center; border-right: 1px solid #ddd; } table.table_data td:last-child { border-right: 0; } table.table_data .slide_table a { position: relative; font-weight: 700; } table.table_data .slide_table a::after { content: ""; position: absolute; top: 50%; right: -20px; width: 8px; height: 8px; border-bottom: 2px solid #000; border-right: 2px solid #000; transform: translate(0, -50%) rotate(45deg); transition: .3s; } table.table_data .slide_table a.active::after { transform: translate(0, -30%) rotate(-135deg); } table.table_data .total td { padding: .94rem 20px; background: #e6f6fe; } table.table_data2 { font-size: .875rem; border-top: 1px solid #000; } table.table_data2 tr { border-bottom: 1px solid #ddd; } table.table_data2 th { padding: .5rem; background: #f7f7f7; border-right: 1px solid #ddd; font-weight: 500; text-align: center; vertical-align: middle; } table.table_data2 th:last-child { border-right: 0; } table.table_data2 td { padding: .5rem; text-align: center; border-right: 1px solid #ddd; } table.table_data2 td:last-child { border-right: 0; } table.table_data2 .slide_table a { position: relative; font-weight: 700; } table.table_data2 .slide_table a::after { content: ""; position: absolute; top: 50%; right: -20px; width: 8px; height: 8px; border-bottom: 2px solid #000; border-right: 2px solid #000; transform: translate(0, -50%) rotate(45deg); transition: .3s; } table.table_data2 .slide_table a.active::after { transform: translate(0, -30%) rotate(-135deg); } table.table_data2 .total td { padding: .94rem 20px; background: #e6f6fe; } .sort_up { display: block; padding: 0 10px; text-align: right; position: relative; } .sort_up::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 10px; border: 8px solid red; border-top: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; } .sort_down { display: block; padding: 0 10px; text-align: right; position: relative; } .sort_down::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 10px; border: 8px solid blue; border-bottom: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; } /*리스트 게시판 검색창*/ .search_general { padding: 1.25rem; display: flex; justify-content: center; gap: .8rem; background: #f7f7f7; border-radius: 10px; margin-bottom: 30px;} .search_general select { min-width: 140px; height: 45px; border-radius: 10px; } .search_general input[type="text"] { width: 46%; max-width: calc(100% - 305px); height: 45px; border-radius: 10px; } .search_general .search_btn { width: 100px; height: 45px; padding: 0 1.2rem; border-radius: 10px; background: #333 url('/asset/images/search_icon.png') no-repeat right 1.2rem top 50%; background-size: 15px; font-size: 1rem; color: #fff; text-align: left; } .page_go { font-size: .875rem; margin: 2.2rem 0 .5rem; } .search_wrap { gap:0.625rem; } .search_wrap select { min-width: 140px; height: 45px; border-radius: 5px; border: 1px solid #e8e8e8; } .search_wrap input[type="text"] { width: 306px; height: 45px; border-radius: 5px; border: 1px solid #e8e8e8; } .search_wrap .search_btn { width: 80px; height: 45px; padding: 0 1.2rem; border-radius: 5px; font-size: 1rem; color: #fff; background: #404040; border: 1px solid #e8e8e8; } /*리스트 게시판*/ .n_mark { background: #3d89d4; color: #fff; font-size: 0.875rem; font-weight: 500; border-radius: 5px; /* padding: 3px 10px; */ width: 100%; display: inline-block; text-align: center; } table.board_list { table-layout: fixed; position: relative; color: #333; } table.board_list::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #000; } table.board_list tbody tr { border-bottom: 1px solid #ddd; } table.board_list th { padding: .875rem 0; background: #f9f9f9; position: relative; text-align: center; } table.board_list td { padding: .875rem; text-align: center; font-weight: 300; white-space: nowrap; } table.board_list td:last-child { border: 0; } table.board_list td.title { display: flex; align-items: center; gap: 5px; padding-right: .94rem; text-align: left; } table.board_list td.notice_type span { display: inline-block; width: 4rem; border: 1px solid #ccc; border-radius: 3px; font-size: .875rem; font-weight: 500; text-align: center; } table.board_list td .notice_i { display: inline-block; width: 2.875rem; border-radius: 14px; font-size: 0.9375rem; font-weight: 500; text-align: center; background: #47a957; color: #fff; padding: 0.2rem 0; } table.board_list td.title a { max-width: 93%; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* table.board_list td.title img { width: 17px; } */ /* table.board_list td.title b { color: #eb5d45; } */ table.board_list td.date { color: #666; } table.board_list td .notice { padding: 4px 1.2rem; border-radius: 10px; background: #eb5d45; font-size: .94rem; font-weight: 500; color: #fff; } .sort_i { display: inline-block; width: 5rem; border: 1px solid #0068c0; border-radius: 3px; font-size: 0.8125rem; font-weight: 500; color: #0068c0; text-align: center; } table.board_list2 { table-layout: fixed; position: relative; color: #333; } table.board_list2 tr { border-bottom: 1px solid #ddd; } table.board_list2 th { padding: .875rem 0; background: #fff; border-right: 1px solid #ddd; position: relative; text-align: center; } table.board_list2 th:last-child { border: 0; } table.board_list2 td { padding: .6rem; border-right: 1px solid #ddd; text-align: center; font-weight: 300; white-space: nowrap; } table.board_list2 td:last-child { border: 0; } table.board_list2 td.title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.board_list2 td .btn_style4 { display: inline-block; margin: 0 auto; padding: .45rem; width: 5rem; font-size: .875rem; } /*게시판 뷰페이지*/ .board_view .view_title { padding: 2.2rem 2rem; border-top: 2px solid #000; /* border-bottom: 1px solid #ccc; */ text-align: center; } .board_view .view_title h4 { font-size: 1.75rem; font-weight: 500; text-align: left;} .board_view .view_title ul { margin-top: 0.8rem; display: flex; flex-wrap: wrap; justify-content: flex-end; } .board_view .view_title li { margin: 3px 0; padding: 0 1rem; position: relative; font-size: .94rem; color: #666; line-height: 1; } .board_view .view_title li + li { border-left: 1px solid #ddd; } .board_view iframe { aspect-ratio: 1/0.56; /* width: 100%; */ height: auto; } .board_view .attached_file { padding: 19px 40px 17px; display: flex; border-bottom: 1px dashed #ddd; } .board_view .attached_file b { margin-right: .94rem; padding-right: .94rem; position: relative; font-weight: 700; } .board_view .attached_file b::after { content: ""; position: absolute; top: 5px; right: 0; width: 1px; height: 14px; background: #ccc; } .board_view .attached_file ul { width: calc(100% - 85px); } .board_view .attached_file ul li + li { margin-top: 5px; } .board_view .attached_file ul li a { width: fit-content; max-width: 100%; display: flex; align-items: center; } .board_view .attached_file ul li a span { display: block; max-width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board_view .attached_file ul li a img { margin-right: 2px; } .board_view .view_contents { padding: 2.5rem; /* border-bottom: 1px solid #ddd; */ } .board_view .view_contents.answer { border-top: 1px solid #ddd; } .board_view .btn_wrap { padding: .94rem 0; justify-content: flex-end; } .board_view .article { border-top: 1px solid #dedede; } /* .board_view .article li { padding: .94rem 40px; display: flex; align-items: center; border-bottom: 1px solid #dedede; } */ .board_view .article li > b { width: 100px; position: relative; } .board_view .article li > b::after { content: ""; position: absolute; top: 50%; right: 30px; width: 7px; height: 7px; border-top: 2px solid #000; border-right: 2px solid #000; transform: translate(0, -30%) rotate(-45deg); } .board_view .article li:last-child b::after { transform: translate(0, -80%) rotate(135deg); } .board_view .article li span { width: calc(100% - 190px); } .board_view .article li em { width: 100px; font-size: .94rem; font-weight: 300; color: #666; text-align: right; } .board_view .view_file { background: #f7f7f7; border-radius: 10px; padding: .875rem 1.875rem; border: 1px solid #ddd;} .board_view .view_file .tit { position: relative; } .board_view .view_file .tit:first-child::after { position: absolute; content:""; display: block; width: 1px; height: 1rem; background: #ccc; left: -1.25rem;} .board_view .answer .view_file { padding: 0.8rem 1.875rem; background: #fff; } .board_view .article li a { display: block; width: 100%; border-bottom: 1px solid #d9d9d9; padding: 0.891rem 3.375rem; transition:.3s; } .board_view .article li a:hover { background:#ebebeb; } .board_view .article li b { font-size: 1.0625rem; font-weight:500; position: relative; padding-right: 2.625rem; } .board_view .article li b::after { content: ""; position: absolute; top: 50%; right: 0; width: 7px; height: 7px; border-top: 2px solid #999; border-right: 2px solid #999; transform: translate(0, -30%) rotate(-45deg); } .board_view .article li:last-child b::after { transform: translate(0, -80%) rotate(135deg); } .board_view .article li span { width: calc(100% - 190px); margin-left: 2rem; } /*갤러리형 게시판*/ .photo_list { width:100%; } .photo_list ul { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1.8rem; position: relative; } .photo_list ul li { border-bottom: 1px solid #ddd; transition: .3s; position: relative; } .photo_list ul li:hover { transform: translateY(-3px); border-bottom: 1px solid #000;} .photo_list ul li .img_box { height: 12.8125rem; border:1px #f0f0f0 solid; overflow: hidden; border-radius: 10px; } .photo_list ul li .img_box img { width: 100%; height: 100%; object-fit: cover;} .photo_list ul li .descript { height: 6rem; padding: 0.5rem 0; /* background: #fff; */position: relative; } .photo_list ul li .descript .title { font-weight: 500; color: #000; word-break:break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .photo_list ul li .descript .date { position: absolute; right: 0; bottom: 0.5rem; font-size: .94rem; color: #888; text-align: right; } /*그리드형 게시판*/ .box_list { width:100%; } .box_list ul {width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .box_list ul > li { border: 2px solid #ebebeb; border-radius: 5px; padding: 40px 25px 50px 25px; transition: .3s; position: relative; } .box_list ul > li:hover { border-color: #0894b5; box-shadow: 0 15px 23px 0 rgb(0 0 0 / 5%); transform: translateY(-2px); } .box_list ul > li .photo { display: block; height: 240px; background-color: #eee; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .box_list ul > li .title { width: 100%; margin: 20px 0; font-size: 1.1rem; font-weight: 800; color: #1a1a1a; clear:both; word-break:break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .box_list ul > li .article { font-size: .9rem; word-break:break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .box_list ul > li .date { font-weight: 800; letter-spacing: -.5px; color: #0894b5; } .box_list ul > li .notice_ico { position: absolute; top: 40px; right: 25px; } /*갤러리 리스트 게시판*/ .photo_listW { border-top: 2px #000 solid; } .photo_listW li{border-bottom:1px #ccc solid; padding:1.25rem .625rem;} .photo_listW li .photo{width:15rem; height:10rem; border:1px #f0f0f0 solid;} .photo_listW li .txt{width:calc(100% - 15rem - 3.75rem); gap:.625rem;} .photo_listW li .txt > *{width:100%;} /* Q&A게시판 */ .qa .an_b { display: inline-block; width: fit-content; padding: 0.25rem 0.5rem; color: #fff; font-size: 0.75rem; line-height: 1; background: #5b5d64; border-radius: 50px; } .qa .an_b.y { background: #008CD7; } .qa_write .file_input { display: flex; gap: 0.3125rem; align-items: center; } .qa_write .file_input .btn_style1 { height: 2rem; border: 1px solid #5b5d64; } .qa_write .file_input .btn_style1.gray_fill5 { padding: 0.5rem 2rem; } /*페이징 버튼*/ .paging { display: flex; gap: .625rem; justify-content: center; text-align: center; margin-top: 3.2rem; } .paging a { width: 2.5rem; height: 2.5rem; border-radius: 5px; color: #666; display: flex; align-items: center; justify-content: center; } .paging a.on { background: #008CD7; font-weight: 500; color: #fff; } .paging a.first , .paging a.prev , .paging .next , .paging .last { border: 1px solid #ddd; border-radius: 5px; } .paging a img { opacity: 0.25; } /* .paging .next, .paging .last { transform: rotate(180deg); } */ .pagenate, .pagenate > span { display: flex; align-items: center; gap: .625rem; justify-content: center; text-align: center; margin-top: 1.5rem; } .pagenate li { display: inline-block; width: 2.5rem; height: 2.5rem; line-height: 2.25rem; border-radius: 5px; font-weight: 500; color: #666; overflow: hidden; } /* .pagenate li a { width: 100%; height: 100%; } */ .pagenate li:not(:has(a)) { display: inline-block;width: 2.5rem; height: 2.5rem; line-height: 2.25rem; background: #0c81e8; border-color: #0c81e8; font-weight: 700; color: #fff; } .pagenate a { width: 2.5rem; height: 2.5rem; display: inline-block; } /*모달*/ .blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:99998;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center} .blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em} .blocker.behind{background-color:transparent} .modal{display:none;vertical-align:middle;position:relative;z-index:99999;max-width:480px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left} .modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')} .modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px} .modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out} .modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s} .modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s} .modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s} @-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}} @keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}} /*슬라이드*/ .faq-wr { border-top: 2px solid #000; } .slide_list > dt { position: relative; width: 100%; border-bottom: 1px solid #ccc; } .slide_list > dt::after { content: ""; position: absolute; top: 50%; right: 1.25rem; width: .75rem; height: .75rem; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: translate(0 , -50%) rotate(45deg); transition: .3s; } .slide_list > dt.on::after { transform: translate(0 , -50%) rotate(-135deg); } .slide_list > dt a { display: flex; padding: 1rem; align-items: center; font-size: 1.125rem; } .slide_list > dt a span { padding: .6rem 1rem; } .slide_list > dd { padding: 2.5rem; background: #f7f7f7; border-bottom: 1px solid #ccc; } .slide_list dt i{ color: #fbb100; font-weight: 600; font-size: 2rem; margin-right: 1rem; } .slide_list dd i { color: #cc0000; font-weight: 600; font-size: 1.25rem; } .slide_list dt.question { position: relative; width: 100%; border-bottom: 1px solid #ccc; } .slide_list dt.question::after { content: ""; position: absolute; top: 50%; right: 1.25rem; width: .75rem; height: .75rem; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: translate(0 , -50%) rotate(45deg); transition: .3s; } .slide_list dt.question.on::after { transform: translate(0 , -50%) rotate(-135deg); } .slide_list dt.question a { display: flex; gap: 1.25rem; padding: 1.25rem; font-size: 1.125rem; font-weight: 500; align-items: center; } .slide_list dt.question a span { width: 3.625rem; height: 3.625rem; border-radius: 50%; background: #f5f5f5; } .slide_list dt.question.on a span { background: #0068c0; color: #fff; } .slide_list dd.answer { padding: 2.5rem; background: #f7f7f7; border-bottom: 1px solid #ccc; } /* .quick_right { padding: 8px 13px; position: fixed; top: 55%; transform: translateY(-50%); right: 50px; z-index: 99; border-radius: 500px; background: rgba(201, 201, 201, .2); overflow: hidden; } .quick_right li { position: relative; width: 5.9375rem; height: 5.9375rem; border-radius: 50%; transition: .3s; } .quick_right::after { opacity: 0; content: ""; width: 5.9375rem; height: 5.9375rem; position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); background: #da513a; border-radius: 50%; transition: .3s; } .quick_right.move1::after { opacity: 1; left: 50%; top: calc(12.5% + 8px); } .quick_right.move2::after { opacity: 1; left: 50%; top: 38%; } .quick_right.move3::after { opacity: 1; left: 50%; top: 62%; } .quick_right.move4::after { opacity: 1; left: 50%; top: 86%; } .quick_right li a { transition: .05s; font-size: .94rem; } .quick_right li a img { margin-bottom: 5px; } .quick_right li:hover a { color: #fff; } .quick_right li:hover a img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .quick_right.on li a { color: #fff; } .quick_right.on li a img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } */ /* 리스트 테이블 */ /* .table_styleW { clear:both; width:100%;}*/ /* .table_line { border-top: 2px solid #2c303c; }*/ /* table.board-list { width:100%; border-bottom:1px solid #ddd;}*/ /* table.board-list th { background: #eee; border: 1px solid #ddd; border-top: 0; padding: 8px 0 8px; color:#333; font-size: 13px; font-weight: 500;}*/ /* table.board-list tr.on td {background:#f4f4f4;}*/ /* table.board-list td { border:1px solid #ddd; padding: 8px 5px; text-align:center; font-size: 13px;}*/ /* table.board-list td a { color:#656565; }*/ /* table.board-list td.subject {text-align:left; padding-left:10px;}*/ /**/ /* table.board-list td img { vertical-align:middle;}*/ /* table.board-list td div.faq { background: url(http://pic.neungyule.com/newnetimes/img/common/icon_re.gif) no-repeat scroll left 1px; padding-left:45px; margin-left:12px; text-align:left;}*/ /* table.board-list td.subject .icon_file { background:url(http://pic.neungyule.com/newnetimes/img/common/icon_note.gif) no-repeat left center; padding-left:15px; line-height:14px;}*/ /* table.board-list td.bg {background-color:#f7f7f7;}*/ /* table.board-list td.purple {background-color:#84308e; border-top:1px solid #fff; font-family:nGothicB; color:#fff; font-size:14px;}*/ /* table.board-list.br_table th {border-right:1px solid #ddd; border-top:1px solid #ddd; font-size: 14px; padding: 12px 0 11px;}*/ /* table.board-list.br_table td {border-right:1px solid #ddd; border-top:1px solid #ddd; padding:9px 0 8px;}*/ /* table.board-list.br_table th:first-child {border-left:1px solid #ddd;}*/ /* table.board-list.br_table td:first-child {border-left:1px solid #ddd;}*/ /* table.board-list.br_table {border-collapse:separate; border-top:2px solid #505050; border-bottom:1px solid #a1a1a1;}*/ /**/ /* .cancel_btn { border: 1px solid #888; border-radius: 5px; padding: 5px 15px; background: #5b5d64; color: #fff !important; font-size: 12px; }*/ /* table_dim */ .responsive-dim {display: none; position: absolute; top: 0; left: 0; width: 100%; bottom: 0;} .responsive-dim::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3) url(/asset/images/tx_scroll.png) 50% 50% no-repeat;} @media screen and (max-width:554px){ .responsive-dim {display:block;} } @media screen and (max-width: 1720px){ /* .pc .gnb > ul {left: -50px;} */ } @media screen and (max-width: 1660px) { } @media screen and (max-width: 1500px) { .header_inner > .flex_box {flex-wrap: nowrap;} .pc .gnb > ul > li > a { font-size: 1rem; /* padding: 0 2rem; */ width: 10rem; } .pc .gnb > ul > li .depth2 > li > a { font-size: 14px; } } @media screen and (max-width: 1560px){ .main_section .inner { width: 90%; } } @media screen and (max-width: 1400px){ :root { --inner: 90%; } } @media screen and (max-width: 1280px){ } @media screen and (max-width: 1200px) and (min-width: 1024px) { .photo_list ul li .img_box { height: 160px; } } @media screen and (max-width: 1200px) { .header_right .menu_btn { /* display: block; */ } .pc .gnb { display: none; } .search_wrap select { min-width: auto; height: 35px; } .search_wrap input[type="text"] { width: 210px; height: 35px; } .search_wrap .search_btn { width: 60px; height: 35px; } } @media screen and (max-width: 1080px) { #footer { padding: 45px 0; } #footer .inner .right { width: calc(100% - 190px); } #footer .family_site > button { width: 160px; height:35px; text-indent: 10px; } #footer .family_site > ul li { padding: 10px; } } @media screen and (max-width: 1024px) { #sidebar { /* background-color: rgba(48, 163, 205, .85); */ } #sidebar .gnb > ul { background: #607088; justify-content: center; align-content: center; height: 100vh; } #sidebar .gnb > ul > li { flex: none; width: 100%; height: auto; background: none; } #sidebar .gnb > ul > li.on { background: none; } #sidebar .gnb > ul > li > a { width: fit-content; margin: 0 auto; position: static; transform: none; font-size: 1.875rem; font-weight: 500; } #sidebar .gnb > ul > li > a::after { display: none; } #sidebar .gnb > ul > li > ul.depth2 { display: none; position: static; transform: none; } #sidebar .gnb > ul > li.active > a, #sidebar .gnb > ul > li > ul.depth2 > li:hover > a { color: #45C1FB ; } .photo_list ul { grid-template-columns: repeat(3, 1fr); gap: 1.5rem;} #footer { padding: 30px 0; } #footer .inner {width: calc(100% - 6.25rem);} #footer .inner .logo {} #footer .inner .right { width: 100%; margin-top: 1.5rem; text-align: left; } /* #footer .inner .logo, #footer .inner .right { width: 100%; text-align: center; } #footer .inner .logo img { width: 120px; } #footer .inner .right nav { margin-top: 20px; flex-direction: column-reverse; align-items: center; gap: 15px; } #footer address { width: 100%; } #footer .family_site { right: 50%; transform: translateX(50%); } */ } @media screen and (max-width: 980px) { } @media screen and (max-width: 880px) { /*.photo_list ul li .img_box { height: 10rem; }*/ #footer .inner address p { gap: 0rem 1.25rem; } #footer .inner address span + span::after{display:none;} } @media screen and (max-width: 800px) { .photo_list ul { grid-template-columns: repeat(2, 1fr); gap: 1rem;} .main_pop { width: 95% !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%)!important;} } @media screen and (max-width: 767px) { .mob_only { display: block !important; } .pc_only { display: none !important; } .flex_box .half { width: 100%; } .flex_box .half + .half { margin-top: 1rem; } .flex_box .half .round5 { margin-top: 40px; } .search_general { gap: 5px; } .search_general select, .search_general input[type="text"], .search_general .search_btn { height: 35px; border-radius: 5px; } .search_general select { min-width: 100px; } .search_general input[type="text"] { max-width: calc(100% - 200px); } .search_general .search_btn { width: 80px; } .table_line { overflow-x: auto; } table.table_list > colgroup { display: none; } table.table_list > tbody > tr { display: flex; flex-wrap: wrap; } table.table_list > tbody > tr > td, table.table_list > tbody > tr > th { width: 100%; } table.table_list > tbody > tr > th br { display: none; } table.table_data { min-width: 500px; } } @media screen and (max-width:640px){ .lower640 { display: block !important; } .higher640 { display: none !important; } #header > .header_inner { padding: 0 1.5rem; } #header h1.logo { width: 140px; } /* .header_right .lang > button { font-size: .9rem; padding: 5px 11px } */ #header .hd-schbx { padding: 2rem 1rem; } #header .hd-schbx > .flex_box { gap: 1rem; } #header .hd-schbx h3.title { font-size: 1.5rem; } #header .hd-schbx .search_box { width: 20rem; } #header .hd-schbx .search_box .search_input { height: 3rem; } #header .header_right div.login_wrap span {display:none;} .flex_box > .quarter { width: 48.5%; } .flex_box > .quarter:nth-child(n+3) { margin-top: 30px; } h3.h3_tit { font-size: 2rem; text-align: center; } h3.h3_tit + p { text-align: center; } h4.h4_tit { font-size: 1.5rem !important; } .search_general select { min-width: 80px; } .search_general input[type="text"] { max-width: 100%; width: calc(100% - 150px); } .search_general .search_btn { width: 60px; color: transparent; background-position: 50% 50%; } .search_wrap { gap: 0.5rem 0; justify-content: space-between; } .search_wrap select { width: 32.5%; } .search_wrap input[type="text"] { width: calc( 100% - 21.25% ); } .search_wrap .search_btn { width: 20%; padding: 0; } .photo_list ul li .img_box { height: 160px; } .flex_box > .third { width: 100%; } .flex_box > .third + .third { margin-top: 10px; } .flex_box > .third .round5 { margin-top: 40px; } table.board_list colgroup, .board_list thead { display: none; } table.board_list tbody tr { padding: 5px 10px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } table.board_list tbody tr td { height: 30px; line-height: 30px; padding: 0; border: 0; } table.board_list tbody tr td.num { width: 35px; text-align: left; } table.board_list tbody tr td.notice_type span { padding: 0; border: 0; text-align: right; color: #0c81e8; } table.board_list tbody tr td.title { width: calc(100% - 120px); padding-right: 0; gap: 0; } table.board_list tbody tr td.img {width: 78px; } table.board_list tbody tr td.date { width: 50%; height: 30px; font-size: .94rem; color: #999; line-height: 25px; text-align: left; } table.board_list tbody tr td.hit { width: 50%; height: 30px; font-size: .94rem; color: #999; line-height: 25px; text-align: right; } table.board_list tbody tr td.hit::before { content: "조회수 : "; } table.board_list td .notice { padding: 1px .7rem; font-size: .8rem; } table.board_list tbody tr td.state { font-size: .9rem; } .search_result table.board_list tbody tr td.title { width: 100%; } .qalist table.board_list tbody tr td.title { width: calc(100% - 108px); padding-right: 0; gap: 0; } .nsl table.board_list tbody tr td.num { width: 20px; } .nsl table.board_list tbody tr td.gg { width: 60px; height: 22px; line-height: 20px; } .nsl table.board_list tbody tr td.title { width: calc(100% - 175px); } table.board_list2 colgroup, .board_list2 thead { display: none; } table.board_list2 tbody tr { padding: 5px 10px 0; display: flex; flex-wrap: wrap; } table.board_list2 tbody tr td { width: 100%; text-align: left; padding: 0; border: 0; } table.board_list2 tbody tr td.num, table.board_list2 tbody tr td.locate { width: fit-content; margin-right: 5px; } table.board_list2 tbody tr td.locate::before { content: "지역 : "; } table.board_list2 tbody tr td.title::before { content: "자조모임명 : "; } table.board_list2 td:last-child { margin: 10px 0; text-align: right; } table.table_write colgroup { display: none; } table.table_write tr { display: flex; flex-wrap: wrap; } table.table_write th, table.table_write td { width: 100%; border: 0; } .photo_listW li .photo { width: 12rem; height: 8rem;} .photo_listW li .txt { width: calc(100% - 12rem - 3.75rem);} .board_view .view_title { padding: 1.5rem .625rem;} .board_view .view_title h4 { font-size: 1.5rem;} .board_view .view_file { flex-direction: column; } .board_view .view_file .tit{margin-left: 0rem !important;} .board_view .view_file .tit:first-child::after{display:none;} .board_view .view_contents { padding: 1.25rem; } .board_view .view_contents img{height:auto !important;} .board_view .article li a { padding: 1rem 10px; } .board_view .article li b { width: 25px; /* font-size: 0px; */ } .board_view .article li b::after { right: 10px; } .board_view .article li span { margin-left: 1rem; width: calc(100% - 130px); } .slide_list > dt a span.round { width: 100px; text-align: center; } .slide_list > dt a span.medium { width: calc(100% - 110px); } .slide_list > dd { overflow-x: scroll; } h4.deco::after {top:1.1rem;} /* #footer .footer_nav li { width: 50%; } #footer .footer_nav li:nth-child(3)::after { display: none; } #footer .footer_nav li:nth-child(n+3) { margin-top: 5px; } */ /* #footer .inner { padding-bottom: 60px; } */ #footer .inner .logo{display:none;} #footer .inner .flex_box{justify-content: center;} #footer .inner nav{ padding-bottom: 1.125rem;} #footer .inner .btm{padding-top: 1.125rem !important; gap: .625rem;} #footer address { width: 100%; } /* #footer .family_site { right: 50%; transform: translateX(50%); } */ } @media screen and (max-width: 480px) { .lower480 { display: block !important; } .higher480 { display: none !important; } #header, #sidebar .bt-close { height: 4.75rem; } #header h1.logo { /* width: 10rem; */ } #sidebar .inner { width: 100%; } #sidebar .login_wrap { display: flex !important; } #header .header_right { gap: 1.125rem; flex-wrap: nowrap; } #header .header_right div, #header .header_right div a{ width: 1.5rem; height: 1.5rem; } #sidebar .gnb > ul > li > a{font-size: 1.5rem;} #sidebar .gnb > ul > li > ul.depth2{padding: 0rem 0 2rem;} #sidebar .gnb > ul > li > ul.depth2 > li > a {margin-top: 1rem; font-size: 1.25rem;} /* .header_top nav { width: 100%; } .header_top nav ul { justify-content: center; } */ .search_general { flex-wrap: wrap; justify-content: flex-start; } .search_general input[type="text"] { width: calc(100% - 65px); } .photo_list ul li .img_box { height: 140px; } .photo_list ul li .descript { padding: .75rem 1rem; } .photo_list ul li .descript .date { right: 1rem; bottom: .75rem; } .photo_listW li a { flex-direction: column; gap: 1.25rem;} .photo_listW li .txt { width: 100% ; } .flex_box > .half { width: 100%; } .pick_day { flex-wrap: wrap; justify-content: center; } .pick_day input { width: 100% !important; } .faq_list dt { padding: 15px 50px; } .faq_list dt i { left: 20px; font-size: 20px; } .faq_list dd { padding: 15px 15px 15px 50px; } .faq_list dd i { left: 20px; top: 15px; font-size: 20px; } .faq_list dt::after { width: 10px; height: 10px; right: 20px; } .data_input .flex_box { justify-content: flex-start; } .data_input .flex_box input { flex: 1; } .board_view .attached_file { padding: 15px 20px; } .board_view .btn_style { font-size: .8rem; padding: 5px 10px; } table.table_basic td { padding: 6px 5px; } .fs15 { font-size: 13px; } .fs14 { font-size: 12px; } .btn_style5 { min-width: 7rem; min-height: 2.3rem; } .btn_style6 { min-width: 10rem; min-height: 2.3rem; } /* #footer .footer_nav li { width: 100%; padding: 0; } #footer .footer_nav li::after { display: none; } #footer .footer_nav li:nth-child(n+2) { margin-top: 5px; } */ } @media screen and (max-width: 360px) { .flex_box > .quarter { width: 100%; } .flex_box > .quarter:nth-child(n+1) { margin-top: 30px; } .table_line { overflow: auto; } .search_general select, .search_general input[type="text"], .search_general .search_btn { height: 30px; } .search_general select { min-width: 70px; } .search_general input[type="text"] { width: calc(100% - 45px); } .search_general .search_btn { width: 40px; } .photo_list ul li .img_box { height: 100px; } .photo_list ul li .descript { padding: .5rem .75rem; height: 5.5rem; } .photo_list ul li .descript .title { font-size: .85rem; } .photo_list ul li .descript .date { font-size: .78rem; } .board_view .article li span { width: calc(100% - 30px); } .board_view .article li em { display: none; } } .myclassroom2 table.list thead th { border-right: #ccc 1px solid; } .myclassroom2 table.list thead th:last-child { border-right: 0 } .myclassroom2 table.list tbody td {border-right: 1px solid #ccc; } .myclassroom2 table.list tbody td:last-child {border-right: 0; }