@charset "UTF-8";
/* 초기화 및 초기 세팅 */
:root {
/* 버튼 및 인풋 폼 높이 세팅 */
--hd_height: 9rem;
--ic_date: url('data:image/svg+xml,');
}
/* .sample ul{
margin-bottom: 5rem;
}
.sample ul li{
display: inline-block; overflow: hidden; width:20%; max-height: calc(20% * 1.7); margin-right: 3rem;
background-color: #444; vertical-align: top;
}
.sample ul li img{
transition: all 0.2s ease-in-out;
}
.sample ul li:hover img{
transform: scale(1.2) translate(-50%,-50%);
}
.sample ul li.rect img{
object-fit: cover;
} */
/* ------------------------ custom ------------------------ */
html { font-size:10px; }
body { margin:0; padding:0; background-color: #1D1D25;}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-track {
background: var(--darkgray); border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px; background:#515872;
}
::-webkit-scrollbar-thumb:hover {
background: #5F6F81;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
ul, dl,dt,dd { margin:0; padding:0; list-style:none }
legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden }
label, input, button, select, img { vertical-align:middle; }
input, button { margin:0; padding:0;}
input[type="submit"] { cursor:pointer }
button { cursor:pointer }
select { margin:0 }
p { margin:0; padding:0; word-break:keep-all; }
hr { border-top:1px solid var(--border); margin: 3rem 0;}
a { text-decoration:none; color:inherit;}
a:hover { text-decoration: none; }
.un_reboot_a { color: var(--main); text-decoration: underline; }
*, :after, :before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
word-break: keep-all;
}
img { max-width:100%; display:inline-block; height: auto; }
/*메인*/
.idx_pg { min-height:800px; padding-top: var(--hd_height);}
/*서브*/
.sub_tit { position: relative; }
.sub_pg { min-height:800px; padding-top: var(--hd_height); }
.line_h1 { line-height:1.0em; }
.line_h1_1 { line-height:1.1em; }
.line_h1_2 { line-height:1.2em; }
.line_h1_3 { line-height:1.3em; }
.line_h1_4 { line-height:1.4em; }
.line_h1_5 { line-height:1.5em; }
.line_h1_6 { line-height:1.6em; }
.line_h1_7 { line-height:1.7em; }
.line_h1_8 { line-height:1.8em; }
.line_h1_9 { line-height:1.9em; }
.line_h2 { line-height:2.0em; }
.mt_75{margin-top: 7.5rem;}
.my_75{margin-top: 7.5rem; margin-bottom: 7.5rem;}
.mr_35{margin-right: 3.5rem;}
.ml_20{margin-left: 2rem;}
.mb_40{margin-bottom: 4rem;}
/*폰트커스텀 기본사이즈 10px*/
h1, .h1{font-size: 3.6rem; font-weight: 700;}
.tit_h1 { font-size: 2.8rem; font-weight: 800; }
.tit_h2 { font-size: 2rem; font-weight: 400; }
.tit_h3 { font-size: 1.8rem; font-weight: 700; }
.ff_mont{font-family: 'Montserrat', sans-serif;}
.ff_preten{font-family: "Pretendard Variable", Pretendard, sans-serif;}
.fs_8 { font-size: 0.8rem; }
.fs_9 { font-size: 0.9rem; }
.fs_10 { font-size: 1.0rem; }
.fs_11 { font-size: 1.1rem; }
.fs_12 { font-size: 1.2rem; }
.fs_13 { font-size: 1.3rem; }
.fs_14 { font-size: 1.4rem; }
.fs_15 { font-size: 1.5rem; }
.fs_16 { font-size: 1.6rem; }
.fs_17 { font-size: 1.7rem; }
.fs_18 { font-size: 1.8rem; }
.fs_19 { font-size: 1.9rem; }
.fs_20 { font-size: 2.0rem; }
.fs_21 { font-size: 2.1rem; }
.fs_22 { font-size: 2.2rem; }
.fs_23 { font-size: 2.3rem; }
.fs_24 { font-size: 2.4rem; }
.fs_25 { font-size: 2.5rem; }
.fs_26 { font-size: 2.6rem; }
.fs_27 { font-size: 2.7rem; }
.fs_28 { font-size: 2.8rem; }
.fs_29 { font-size: 2.9rem; }
.fs_30 { font-size: 3.0rem; }
.fs_31 { font-size: 3.1rem; }
.fs_32 { font-size: 3.2rem; }
.fs_33 { font-size: 3.3rem; }
.fs_34 { font-size: 3.4rem; }
.fs_35 { font-size: 3.5rem; }
.fs_36 { font-size: 3.6rem; }
.fs_37 { font-size: 3.7rem; }
.fs_38 { font-size: 3.8rem; }
.fs_39 { font-size: 3.9rem; }
.fs_40 { font-size: 4.0rem; }
.fs_41 { font-size: 4.1rem; }
.fs_42 { font-size: 4.2rem; }
.fs_43 { font-size: 4.3rem; }
.fs_44 { font-size: 4.4rem; }
.fs_45 { font-size: 4.5rem; }
.fs_46 { font-size: 4.6rem; }
.fs_47 { font-size: 4.7rem; }
.fs_48 { font-size: 4.8rem; }
.fs_49 { font-size: 4.9rem; }
.fs_50 { font-size: 5.0rem; }
.fs_51 { font-size: 5.1rem; }
.fs_52 { font-size: 5.2rem; }
.fw_100 { font-weight: 100; }
.fw_200 { font-weight: 200; }
.fw_300 { font-weight: 300; }
.fw_400 { font-weight: 400; }
.fw_500 { font-weight: 500; }
.fw_600 { font-weight: 600; }
.fw_700 { font-weight: 700; }
.fw_800 { font-weight: 800; }
.fw_900 { font-weight: 900; }
.wh_pre { white-space: pre-line; }
.wh_nowrap { white-space: nowrap; }
/*글자 줄임말*/
.line_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.line1_text {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.line2_text {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.line3_text {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* 리스트 스타일 */
.list_style_1 li{
display: flex; position: relative;
}
.list_style_1 li::before{
content: '-'; margin-right: 2.6rem;
}
/* 폼 사각형 */
.sq_guide { display:flex; flex-wrap: wrap; }
.sq_guide li {
width: 12rem;
height: 12rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin: 0.5rem;
}
/* 스크롤바 none */
.none_scroll_bar { -ms-overflow-style: none; }
.none_scroll_bar::-webkit-scrollbar { display: none; }
/* 인풋 자동완성 초기화 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--text);
-webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
box-shadow: 0 0 0px 1000px var(--bg) inset;
transition: background-color 5000s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
-webkit-text-fill-color: var(--text);
-webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
box-shadow: 0 0 0px 1000px var(--bg) inset;
transition: background-color 5000s ease-in-out 0s;
}
/* 입력 인풋 */
.form-control { height: var(--height); background-color:#3B4053; border:1px solid #3B4053;}
.form-control-sm { height: var(--height_sm); }
.form-control-md { height: var(--height_md); }
.form-control-lg { height: var(--height_lg); }
.form-control:focus{
background-color: #323646; border:1px solid #00C5E440;
box-shadow: 0 0 0.3rem #00C5E470;
}
.form-control:disabled, .form-control[readonly]{
background-color: #363B4B;
color:#656C88;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none; margin: 0;
}
.ip_wr{position: relative;}
.ip_wr .ip_tit { margin-bottom:0.8rem; line-height: 1; font-size: 1.4rem;}
.ip_wr .ip_tit h5 { font-size:1.8rem; font-weight:700; display:inline-block; }
.ip_wr .btn-sm.ip_btn{top:2.2rem;}
.btn i{font-weight: 400;}
.btn i{vertical-align: 0; margin-right: 0.1em;}
.btn.btn-sm i{vertical-align: -0.15em; margin-right: 0.3em;}
/* form-text */
.form-text{font-size: 1.4rem; display: none; align-items: center;}
.form-text i{font-size: 1em; margin-right: 0.25rem;}
.ip_valid .ip_valid{display: flex; color: var(--success);}
.ip_invalid .ip_invalid{display: flex; color: var(--danger);}
/* textarea 높이 */
textarea.form-control {}
/* 셀렉트 박스 */
.custom-select{
padding-right: 4.5rem; padding-top: 1.3rem;
/* color: var(--input_placeholder); */
background-size: 2.4rem; cursor: pointer;
}
/* 날짜 선택 */
input.form-control[type="date"]{position: relative;}
input.form-control[type="date"]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
background: none;
width: 100%; height: 100%; cursor: pointer;
position: absolute; left: 0; top: 0;
}
input.form-control[type="date"]::before{content: ''; display: block; width: 2rem; height: 2rem; position: absolute; top: 50%; transform: translateY(-50%); right: 1.6rem; background: white; cursor: pointer; -webkit-mask: var(--ic_date); mask: var(--ic_date); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;}
input.form-control[type="date"]{color-scheme: dark;}
input.form-control[type="time"]{color-scheme: dark;}
input.form-control[type="time"]::-webkit-calendar-picker-indicator {
width:2rem; height: 2rem;
}
/* 체크박스 및 라디오 */
.checks_wr{display: flex; flex-wrap: wrap; margin-bottom: -1rem; }
.checks_wr .checks{margin-right: 3rem; margin-bottom: 1rem;}
.checks label{display: flex; align-items: center; cursor: pointer;}
.checks label.chk_right{flex-flow: row-reverse; justify-content: flex-end;}
.checks input{display: none;}
.ic_box{display: inline-block; width: 2.4rem; height: 2.4rem; font-size: 2rem; text-align: center; border: 1px solid var(--border); color: var(--border); display: flex; align-items: center; justify-content: center; margin-right: 0.5rem;}
input:checked + .ic_box{border-color: var(--primary); color: var(--primary);}
.chk_right .ic_box{margin-right: 0; margin-left: 0.5rem;}
input:checked ~ .chk_p{ color: var(--primary); }
/* 페이지네이션 */
.pagination { margin-top: 5rem; display: flex; justify-content: center; align-items: center; }
.pagination li { height: 100%; }
.pagination a { font-size: 1.7rem; padding: 0.9rem 1.5rem; font-weight: 600; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 0.8rem; }
.pagination a.disabled { color: #AAA; }
.pagination a.on { color: #fff; text-decoration: underline; }
.page-link{background-color:transparent; border:none; color:#fff;}
.page-item.active .page-link{
background: linear-gradient(-45deg, #00C5E4 , #00E4D5);
}
.page-link:hover{
background-color: #31353F;
color:#fff;
}
.page-item:first-child .page-link, .page-item:last-child .page-link{
padding-left: 1rem; padding-right: 1.2rem;
color:#C1C6D9;
}
/* 페이저 */
.pager {
border-radius: 15rem;
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 65px;
margin: 3.5rem auto 0;
background-color: transparent;
}
/* 테이블 */
.table_01 {width:100%; border-collapse: collapse; border-bottom:1px solid #e3e3e3; text-align:center; border-top: 2px var(--primary) solid;}
.table_01 th {background: #F6F6F6; text-align:center; border:1px solid #e3e3e3; }
.table_01 td { border:1px solid #e3e3e3; }
.table_01 th, .table_01 td{ padding:1rem 0.8rem;}
/* 테이블 슬래쉬 */
.table_01 th.slash {
background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat;
}
.table_01 th.backslash {
background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat;
}
.table_01 th.slash, .table_01 th.backslash { text-align: left; }
.slash div, .backslash div { text-align: right; }
/*테이블 반응형때*/
.table-responsive::-webkit-scrollbar {
cursor: move;
}
.table_style_1{
text-align: center;
}
.table_style_1 th{
padding:2.4rem 3.6rem;
background-color: #2B2F3B; border-width: 1px!important; white-space: nowrap;
line-height: 1.2;
}
.table_style_1 th, .table_style_1 td{
vertical-align: middle!important; white-space: nowrap;
}
.table_style_1 th small{
color:#C1C6D9;
}
.table_style_1 td{
padding:2rem 4rem;
border-top:none; border-bottom: 1px solid var(--border);
}
.table_style_1 tr:hover td{
background-color: #23252d;
cursor: pointer;
}
/* 이미지 크롭 */
.rect {
width: 100%;
position: relative;
overflow: hidden;
}
.rect::after {
content: "";
display: block;
padding-bottom: 100%;
}
.rect img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* 아이콘 텍스트 정렬 */
[class^="ri-"], [class*=" ri-"]{
vertical-align: -0.18em;
}
/* buttons */
/* 버튼 */
.btn { height: var(--height); padding:1.7rem 3rem; font-weight: 600; line-height: 1;}
.btn-sm { height: var(--height_sm); }
.btn-md { height: var(--height_md); }
.btn-lg { height: var(--height_lg); }
.btn-outline-primary:hover{
background-color: #00C5E430;
color: var(--primary);
}
.btn-outline-secondary{
background-color: rgba(255,255,255,0.05); border-color: #C1C6D9;
color:var(--lightgray);
}
.btn-outline-secondary:hover{
background-color: #656C8830; border-color: #C1C6D9;
color: var(--white);
}
.btn-outline-danger{
background-color: #2D2732;
}
.btn-outline-danger:hover{
background-color: #470916;
color:var(--danger);
}
/* Modal */
.modal-content{
background-color: var(--darkgray);
}
.modal-footer{
flex-wrap: nowrap; justify-content: center;
border-top: none;
}
.modal-footer .btn{
margin:0;
}
.modal .close{
color:white; font-weight: 400;
text-shadow: 0 1px 0 #000; opacity: 1; font-size: 3rem;
}
.modal .close:active{
background-color: var(--gray); border-radius: 2rem;
}
.modal-dialog-sm{
max-width: 36rem;
}
.modal-dialog-sm .modal-body{
padding:7rem 3rem 4rem;
text-align: center;
}
.modal-dialog-sm .modal-footer{
padding:1.3rem 3rem 2.6rem;
}
.modal-dialog-md{
max-width:59rem; border-radius: 3.2rem;
}
.modal-dialog-md .modal-content{
border-radius: 3.2rem;
}
.modal-dialog-md .modal-header{
padding:6rem 6rem 2rem 6rem;
border-bottom: none;
}
.modal-dialog-md .modal-title{
font-size: 2.8rem; font-weight: 800;
}
.modal-dialog-md .modal-body{
padding:2rem 6rem 2.5rem;
}
.modal-dialog-md .modal-footer{
padding:2.5rem 6rem 6rem;
}
.modal-dialog-lg{
max-width:102.4rem
}
.modal-dialog-lg .modal-header{
padding:6rem 6rem 2rem 6rem;
border-bottom: none;
}
.modal-dialog-lg .modal-header .modal-title{
font-size: 2.8rem; font-weight: 800;
}
.modal-dialog-lg .modal-body{
padding:2rem 6rem 6rem 6rem;
}
.modal-dialog-lg .modal-footer{
width:50%; margin:0 auto; padding:0 6rem 4rem;
}
.m_only{
display: none;
}
/* ------------------------ Common ------------------------ */
.side_menu_wrap{
width:12.2rem; height: 100vh; flex-shrink: 0;
}
.side_menu{
position: fixed; width:12.2rem; height: 100vh;
background-color: #2B2F3B;
}
.side_header{
display: flex; justify-content: center; position: relative; padding:3.8rem 1rem 2.7rem;
}
.side_header .btn_logout{
font-size: 1.4rem; font-weight: 600; color: #C1C6D9;
}
.side_header .btn_logout:hover{
color:#a9aebe;
}
.side_header .btn_logout:active{
color:#9ba0af;
}
.side_header .welcome{
margin-top: 0.7rem;
}
.side_header .logo{
width:7.4rem;
}
.side_body{
height: 100%; padding-top: 1.8rem;
}
.side_menu .lnb li a{
display: flex; flex-direction: column; align-items: center; position: relative; padding: 2rem 4rem;
font-weight: 600; text-align: center;
}
.side_menu .lnb li a i{
font-size: 2.4rem; font-weight: 300;
}
.side_menu .lnb li.on a{
color:var(--primary);
}
.side_menu .lnb li:not(.on) a:hover{
background-color: rgba(255,255,255,0.05);
color:white;
}
.side_menu .lnb li.on a::before{
content: ''; position: absolute; left:-1.5rem; top:3rem; width:2.4rem; height: 2.4rem;
background: linear-gradient(-45deg, #00C5E4 , #00E4D5); border-radius: 50%;
}
.side_menu .btn_ham, .side_menu .btn_close{
display: none;
}
.footer{
display: flex; justify-content: space-between; margin-top: 15rem; margin-left: 11.2rem; padding:5rem 6%;
background-color: #2B2F3B; border-top: 1px solid #656C88;
}
.footer_left{
max-width: 60%;
}
.company_info{
display: flex; color: #C1C6D9; justify-content: flex-start; flex-wrap: wrap; margin-top: 1.4rem;
}
.company_info li{
margin-bottom: 0.4rem; margin-right: 2.4rem;
font-size: 1.4rem;
}
.footer_right{
width: 20rem;
}
.side_body .dimmed{
display: none;
}
.side_menu .lnb{
transition: all 0.5s ease-in-out;
}
/* ------------------------ Design ------------------------ */
.wrap{
display: flex;
}
.container-lg, .container-md, .container-sm, .container{
width:100%; max-width: 100%;
}
.container_right{
width:100%; margin:0 auto; padding:12rem;
}
.tit_between{
display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem;
}
.tit_between .left{
flex-shrink: 0;
}
.ip_search{
width:31.2rem;
}
.ip_search .form-control{
padding-right: 8rem;
}
.btn_clear{
display: none; position: absolute; right:4.4rem; top:0; padding:1.3rem 0.6rem;
color: #8F97B4; font-size: 2.2rem;
}
.btn_search{
position: absolute; right:1rem; top:0; padding:1.3rem 0.6rem;
color:#fff; font-size: 2.2rem;
}
.main_visual{
/* position: relative; */
}
.main_visual .bg_main{
position: absolute; top:0; left:0; width:100%;
z-index: -9999;
}
.modal .group_info_list{
background-color: #363B4B;
}
.media .rect{
width:30%; margin-right: 7rem;
border-radius: 1rem;
}
.modal .media{
position: relative;
}
.modal .media .rect{
width:40%; margin-right: 4rem;
}
.modal .media .rect{
position: sticky; top:0rem;
}
.media-body p{
color: #C1C6D9;
}
.main_text{
margin-top: 20.5rem;
}
.main_text small{
font-size: 2.2rem;
}
.main_text strong{
display: block;
font-size: 6.9rem; font-weight: 600;
letter-spacing: -0.03em;
}
.main_text p{
margin-top: 2rem;
font-size: 1.8rem; line-height: 1.6; color:#C1C6D9;
}
.idx_tit{
font-size: 3.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.6;
}
.idx_desc{
margin-top: 2rem;
font-size: 1.8rem; line-height: 1.7; color:#C1C6D9;
}
.ellipse_wrap{
position: relative; padding:7.7rem 30rem;
background-color: #22272D; box-shadow: inset 0 0 0.5rem rgba(255,255,255,0.2), 0 0 5.4rem rgba(0,197,228,0.11); border-radius: 20em;
text-align: center;
}
.main_visual .ellipse_wrap{
margin-top: 30rem;
}
.sec1{
display: flex; align-items: center; margin-top: 18rem;
}
.sec1 .left{
display: flex; justify-content: center; width:88.5rem; height: 55.7rem; flex-shrink: 0; margin-right: 8.6rem;
background:url(../img/main_sec1.png) no-repeat; background-size: contain;
}
.sec1 .sec1_keyword{
display: flex; flex-shrink: 0; justify-content: flex-end; flex-direction: column; width:34rem; height: 39.8rem; margin:0 -7.5rem; padding-bottom: 5em;
background: url(../img/bg_gradient_1.png) no-repeat; background-size:100% 100%;
text-align: center;
}
.sec1 .sec1_keyword_2{
margin-top: 6rem;
background-image: url(../img/bg_gradient_2.png);
}
.sec1 .sec1_keyword_3{
background-image: url(../img/bg_gradient_3.png);
}
.sec1 .sec1_keyword_4{
margin-top: 6rem;
background-image: url(../img/bg_gradient_4.png);
}
.sec1 .sec1_keyword strong{
font-size: 2rem;
}
.sec1 .sec1_keyword p{
margin-top: 0.8rem;
font-size: 1.5rem; font-weight: 300;
}
.sec2{
display: flex; justify-content: center; align-items: flex-end; margin-top: 16.2rem;
}
.sec2 .left{
width: 84.2rem; flex-shrink: 0;
}
.sec2 .right{
width: 50rem; margin-left: -20%; padding-bottom: 10rem;
text-align: center;
}
.sec3{
margin-top: 15.8rem;
}
.sec3 .ellipse_wrap{
padding-left: 42rem; padding-right: 42rem;
background-color: #363B4B;
}
.ellipse_bg{
position:absolute; top:1.1rem; left:1.1rem; width:calc(100% - 2.2rem); height:calc(100% - 2.2rem);
border-radius: 100em; z-index: -99;
background: url(../img/bg_main_sec2.png) no-repeat center; background-size: 120% auto;
}
.btn_back{
color:#C1C6D9; height: auto; padding:1.6rem 2rem; margin:-1.6rem 0 0 -2.4rem;
}
.group_list_wrap{
padding:3.2rem 0 0;
}
.group_list{
display: flex; flex-wrap: wrap; margin: 0 -0.6rem;
}
.group_list li{
width:12.5%; padding:0.8rem 0.6rem;
}
.group_list li .btn{
border:1px solid #C1C6D9; background-color: rgba(255,255,255,0.05); border-radius: 5em;
color: var(--lightgray);
transition: all 0.2s ease-in-out;
}
.group_list li .btn:disabled{
cursor: default;
}
.group_list li .btn:hover:not(:disabled){
background-color: #656C8830; border-color: #C1C6D9;
color: var(--white);
}
.group_list li .btn:active:not(:disabled), .group_list li .btn:active:not(:read-only){
background-color: #656C88; border-color: #656C88;
color: #fff;
}
.group_list li .btn.on:not(:disabled){
background: linear-gradient(-45deg, #00C5E4, #00E4D5); border-color: transparent;
}
.group_list li .btn.on:hover:not(:disabled){
background: linear-gradient(-45deg, #00b7d3, #00d6c8);
}
.group_list li .btn.on:active:not(:disabled){
background: linear-gradient(-45deg, #00abc5, #01c9bb);
}
.proposal_list{
display: none;
}
.proposal_list:first-child{
display: block;
}
.proposal_list li{
padding:5rem; margin-bottom: 4.4rem;
background-color: #363B4B; border-radius: 2rem;
}
.proposal_list li:last-child{
margin-bottom: 0;
}
.proposal_list .media-body{
padding-top: 1rem;
}
.proposal_info{
display: block; margin:1.6rem 0 2.4rem;
}
.proposal_list .rect{
position:sticky; top:5rem;
}
.date{
color:#C1C6D9;
}
.board_detail{
padding: 3.6rem 0 3rem;
}
.board_detail_header{
display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 3rem;
border-bottom: 1px solid var(--border);
}
.board_detail_header .board_detail_tit{
font-size: 2rem; font-weight: 500; line-height: 1.4;
}
.board_detail_body{
padding:4rem;
border-bottom: 1px solid var(--border);
font-size: 1.5rem; line-height: 1.7; color: #C1C6D9;
}
.board_detail_body img{
margin:3rem 0;
}
/* ------------------------ Responsive ------------------------ */
@media (min-width : 1921px) {
/* ------------------------ custom ------------------------ */
/* .container-lg, .container-md, .container-sm, .container{
max-width:80%; padding-left: 9rem; padding-right: 9rem;
} */
/* ------------------------ Common ------------------------ */
/* ------------------------ Design ------------------------ */
}
/*반응형 max 1200 xl*/
@media (max-width: 1880px) {
/* ------------------------ custom ------------------------ */
/* .container-lg, .container-md, .container-sm, .container{
max-width:70%;
} */
.table_style_1 th, .table_style_1 td{
font-size: 1.5rem; padding: 2rem 3rem;
}
/* ------------------------ Common ------------------------ */
/* ------------------------ Design ------------------------ */
.container_right{
width:80%; margin:0 auto; padding:10rem 2rem;
}
.sec3 .ellipse_wrap{
padding-left: 30rem; padding-right: 30rem;
}
}
/*반응형 max 1600 xl*/
@media (max-width: 1600px) {
/* ------------------------ custom ------------------------ */
.tit_h1{
font-size: 2.6rem;
}
/* ------------------------ Common ------------------------ */
/* ------------------------ Design ------------------------ */
.main_text strong{
font-size: 6.2rem;
}
.main_text small{
font-size: 2rem;
}
.ellipse_wrap{
padding: 7.7rem 20rem;
}
.sec1 .left{
width:60rem; height: 40rem; margin-right: 4rem;
}
.sec1 .sec1_keyword{
width:40%; height: 70%; margin-left: -10%; margin-right: -10%;
}
.sec1 .sec1_keyword strong{
font-size: 1.8rem;
}
.sec1 .sec1_keyword p{
margin-top: 0.5rem;
}
.idx_tit{
font-size: 3rem;
}
.sec2 .left{
width:70rem;
}
.sec3 .ellipse_wrap{
padding-left: 20rem; padding-right: 20rem;
}
.group_list li{
width:16.666667%;
}
}
/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) {
/* ------------------------ custom ------------------------ */
/* ------------------------ Common ------------------------ */
/* ------------------------ Design ------------------------ */
.main_text strong{
font-size: 5.4rem;;
}
.main_text p{
font-size: 1.7rem;
}
.main_visual .ellipse_wrap{
margin-top: 20rem;
}
.idx_tit{
font-size: 2.8rem;
}
.idx_desc{
font-size: 1.7rem;
}
.sec1{
flex-wrap: wrap; margin-top: 15rem;
}
.sec1 .left{
width:90%; margin: 0 auto; height:0; padding-bottom: 57%;
}
.sec1 .right{
text-align: center;
}
.sec1 .sec1_keyword{
height: 0; padding-top: 40%;
}
.container_right{
width:80%;
}
.sec1 .right .idx_tit{
margin-top: 5rem;
}
.tit_between.m_flex_wrap{
flex-wrap: wrap;
}
.tit_between.m_flex_wrap .right{
margin-top: 2rem;
}
.sec2 .left{
width:70%;
}
.sec2 .right{
margin-left: -25%; padding-bottom: 5rem;
}
.sec3 .ellipse_wrap{
padding-left: 10rem; padding-right: 10rem;
}
.group_list li{
width:20%;
}
.proposal_list li{
margin-bottom: 3rem; padding: 4rem;
}
.proposal_list .rect{
top:3rem;
}
.media .rect{
margin-right: 5rem;
}
.proposal_info{
margin:1.4rem 0 2rem;
}
.media .rect{
width:44%;
}
}
/*반응형 max 992px lg*/
@media (max-width: 991.98px) {
/* ------------------------ custom ------------------------ */
.table_style_1 th, .table_style_1 td{
padding: 2rem;
}
.tit_h1{
font-size: 2.4rem;
}
/* ------------------------ common ------------------------ */
.side_menu_wrap{
width: 8rem;
}
.side_menu{
width:8rem;
}
.lnb li a{
padding: 1.4rem 0rem;
}
.lnb li a i{
font-size: 2rem;
}
.footer{
margin-left: 8rem;
}
/* ------------------------ design ------------------------ */
.container_right{
padding:6rem 2rem;
}
.ellipse_wrap{
padding:10rem;
}
.main_text strong{
font-size: 5rem;
}
.idx_tit{
font-size: 2.7rem;
}
.idx_desc{
font-size: 1.6rem;
}
.group_list li{
width:25%;
}
.media .rect{
margin-right: 3rem;
}
.proposal_list li{
padding:3rem;
}
}
/*반응형 max 767px md*/
@media (max-width: 767.98px) {
/* ------------------------ custom ------------------------ */
body { font-size: 1.4rem; }
.tit_h1 { font-size: 2.2rem; }
.tit_h2 { font-size: 1.8rem; }
.tit_h3 { font-size: 1.6rem; }
.wrap{
flex-direction: column;
}
.pc_only{
display: none;
}
.m_only{
display: block;
}
.container_right{
position: relative; width:100%; padding:6rem 4rem;
}
.table_style_1 th, .table_style_1 td{
padding:1.6rem;
}
/* ------------------------ Common ------------------------ */
.side_menu_wrap{
height: 5rem;
}
.side_menu{
display: flex; justify-content: space-between; align-items: center; width:100%; height: 5rem;
z-index: 1030;
}
.side_header{
padding:0;
}
.side_header .logo{
height: 100%; padding-left: 2rem; padding-right: 2rem;
}
.side_header .logo img{
width:3.6rem;
}
.side_body{
display: block; padding-top: 0;
}
.side_body .dimmed{
display: none; position: fixed; right:0; top:0; z-index: 1000; width:100vw; height: 100vh;
background-color: rgba(0,0,0,0.7);
}
.side_menu .lnb{
overflow: hidden; position:fixed; top:0; right:-100vw; width:67%; height: 100vh; padding-top: 7rem;
background-color: #3B4053;
z-index: 1030;
}
.side_menu .lnb.on{
display: block; right:0;
}
.side_menu .lnb li{
margin-bottom: 1rem;
}
.side_menu .lnb li a{
flex-direction: row; align-items: center; padding:2rem 3.5rem;
font-size: 1.9rem;
}
.side_menu .lnb li.on a::before{
width:1.6rem; height: 1.6rem; left:-1rem;
}
.side_menu .lnb li a i{
margin-right: 1.4rem;
font-size: 2.6rem;
}
.side_menu .btn_ham{
display: block; padding:1rem 2rem;
}
.side_menu .btn_ham:active{
background-color: #4E546A;
}
.side_menu .btn_ham i{
vertical-align: 0; font-size: 2.4rem; font-weight: 300;
}
.side_menu .btn_ham img{
width:2rem;
vertical-align: 0;
}
.side_menu .lnb .btn_close{
display: block; position:absolute; top:0; right:0; height: auto; padding:1.6rem 2rem;
font-size: 3rem; font-weight:400; border-radius: 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
transition: 0s;
}
.side_menu .lnb .btn_close:active{
transition: all 0.2s ease-in-out;background-color: #4E546A;
}
.side_menu .lnb .btn_close i{
vertical-align: 0;
}
.footer{
margin-top: 10rem; margin-left: 0;
}
/* ------------------------ Design ------------------------ */
.idx_desc{
margin-top: 1.2rem;
}
.main_visual .ellipse_wrap{
margin-top: 15rem;
}
.main_text{
margin-top: 15rem;
}
.main_visual .bg_main{
object-fit: cover; object-position: right; height: 21%;
}
.sec1{
margin-top: 10rem;
}
.sec2{
flex-wrap: wrap; margin-top: 10rem;
}
.sec2 .left{
overflow: hidden; padding-bottom: 50%; width:calc(100% + 4rem); margin-left: -2rem;
}
.sec2 .left > img{
transform: scale(1.5); transform-origin: center top;
}
.sec2 .right{
width:100%; margin-top: 3rem; margin-left: 0;
}
.sec3{
margin-top: 12rem;
}
.ellipse_wrap{
padding:8rem 10rem;
}
.main_text strong{
font-size: 4rem;
}
.main_text small{
font-size: 1.8rem;
}
.main_text p{
margin-top: 1.6rem;
}
.ellipse_wrap{
padding:8rem;
}
.tit_between{
margin-bottom: 3rem;
}
.group_list li{
width:33.333333%;
}
.proposal_list .media{
flex-direction:column;
}
.proposal_list .rect{
position:relative; top:0; width:100%;
}
.proposal_list .media-body{
margin-top: 2.4rem;
}
.board_detail_body{
padding:2rem 1rem;
}
}
/*반응형 max 576px sm*/
@media (max-width: 575.98px) {
/* ------------------------ Custom ------------------------ */
html{
font-size: 9.5px;
}
.fs_20{
font-size: 1.8rem;
}
.modal-dialog{
margin:0 auto;
}
.container_right{
padding:3.6rem 2rem;
}
.tit_h1 { font-size: 2rem; }
.tit_h2 { font-size: 1.7rem; }
.tit_h3 { font-size: 1.5rem; }
hr{
margin: 2rem 0;;
}
/* ------------------------ Common ------------------------ */
.ellipse_bg{
background-size: 150% auto;
}
.side_menu .lnb{
width:80%;
}
.footer{
flex-wrap: wrap;
}
.footer_left{
max-width:100%;
}
.footer_right{
margin-top: 2rem;
}
/* ------------------------ Design ------------------------ */
.idx_tit{
font-size: 2.4rem;
}
.main_visual .bg_main{
height: 16%;
}
.sec1 .left{
flex-direction: column; justify-content: flex-start; width:75%; padding-bottom: 122%;
background-image: url(../img/main_sec1_m.png);
}
.sec1 .sec1_keyword{
width:70%; padding-top: 60%; margin: -21% 0;
}
.sec1 .sec1_keyword:nth-child(2n-1){
margin-left: auto;
}
.ellipse_wrap{
padding:10rem 3rem!important;
}
.ellipse_bg{
background-image: url(../img/bg_main_sec2_m.png);
}
.sec3{
margin-top: 10rem;
}
.group_list_wrap{
position: sticky; z-index: 1030; top:4.9rem; overflow-x: scroll;-ms-overflow-style: none; padding:0.4rem 0;
background-color: #1D1D25;
}
.group_list_wrap::-webkit-scrollbar{
display:none;
}
.group_list_wrap + hr{
margin-top: 0.8rem!important;
}
.group_list{
flex-wrap: nowrap; width:auto; margin:0 -0.4rem;
}
.group_list li{
width:auto; padding:0.8rem 0.4rem;
}
.proposal_list li{
padding:2rem;
}
.proposal_info{
margin:1rem 0 1.2rem;
}
.group_list li .btn{
padding: 0.7rem 2rem; height: 3.8rem;
white-space: nowrap; font-size: 1.5rem;
}
.board_detail{
padding:2.4rem 0 2rem;
}
.board_detail_header{
flex-wrap: wrap; padding-bottom: 2rem;;
}
.board_detail_header .date{
width:100%; margin-top: 1rem;
}
.main_text strong {
font-size: 3.2rem;
}
}
/*반응형 max 460px*/
@media (max-width: 460px) {
.sec1 .left{
width:90%; padding-bottom: 146%;
}
.idx_tit{
font-size: 2.2rem;
}
}
/*반응형 max 460px*/
@media (max-width: 380px) {
.sec1 .sec1_keyword{
width:80%; margin:-23% 0;
}
}