@charset "UTF-8";

.area_cont {text-align:center; padding:70px 0;}
.area_cont:first-child {padding:70px 0 10px;}
.area_cont .inner {max-width:1000px; position:relative;}
.area_cont .inner .img .dada {position:absolute; z-index:1; top:1568px; right:-60px;}
.area_cont .inner .img .spiky {position:absolute; z-index:1; top:40px; left:80px;}
.area_cont .inner .img .piu {position:absolute; z-index:1; top:270px; right:40px;}
.area_cont .inner .img .deco1 {position:absolute; top:210px; left:30px;}
.area_cont .inner .img .deco2 {position:absolute; z-index:1; top:0; right:80px;}

.area_cont .tit {padding-top:40px; width:100%; text-align:center;}
.area_cont .tit h1 {color:#000; font-size:48px; margin-top:40px;}
.area_cont .tit .desc {margin-top:25px; text-align:center; font-size:18px; color:#888;}
.area_cont .box_cont {background-color:#fff; border-color:#E9E9E9; border-radius:16px; box-shadow: 0px 4px 8px rgb(0 0 0 / 10%); box-sizing:border-box; padding:60px 80px 60px; margin-bottom:80px;}
.area_cont .box_cont h3 {font-size:22px; text-align:left;}
.area_cont .box_cont .intro_area {padding:35px 45px 30px 40px; margin:20px 0 35px; background-color:#F5F7F9; border-radius:10px; display:flex; align-items:center; justify-content:space-between;}
.area_cont .box_cont .intro_area .logo {width:84px; height:84px; display:inline-block; border:1px solid #E9EEF2; border-radius:4px;}
.area_cont .box_cont .intro_area .left {text-align:left;}
.area_cont .box_cont .intro_area .txt {display:inline-block; position:relative; top:-11px; margin-left:30px;}
.area_cont .box_cont .intro_area .title {font-size:17px; font-weight:600; margin-bottom:8px;}
.area_cont .box_cont .intro_area .desc {font-size:15px; color:#777;}
.area_cont .box_cont .intro_area .bt_arrow {margin-left:6px;}
.area_cont .box_cont .qna_area {text-align:left;}
.area_cont .box_cont .qna_area li {margin-bottom:22px;}
.area_cont .box_cont .qna_area .title em {color:#477BFF;}
.area_cont .box_cont .qna_area .desc {font-size:16px; color:#777; margin:8px 0 0 4px; line-height:180%;}
.area_cont .box_cont .qna_area .desc em {text-decoration:underline;}
.area_cont .box_cont .list_item {display:flex; justify-content:space-between; margin:0 40px 60px;}
.area_cont .box_cont .list_item:last-child {margin-bottom:80px;}
.area_cont .box_cont .list_item li {text-align:left; width:27%}
.area_cont .box_cont .list_item li .ic_timekeeper {width:40px; height:40px; display:inline-block; background:url(images/ic_timekeeper.svg);}
.area_cont .box_cont .list_item li .ic_timekeeper.ic01 {background-position:2px 4px;}
.area_cont .box_cont .list_item li .ic_timekeeper.ic02 {background-position:-32px 3px;}
.area_cont .box_cont .list_item li .ic_timekeeper.ic03 {background-position:-269px 4px;}
.area_cont .box_cont .list_item li .ic_timekeeper.ic04 {background-position:3px -31px;}
.area_cont .box_cont .list_item li .ic_timekeeper.ic05 {background-position:-32px -30px;}
.area_cont .box_cont .list_item li .ic_timekeeper.ic06 {background-position:-269px -30px;}
.area_cont .box_cont .list_item h3 {font-size:18px; text-align:left; line-height:160%; margin:12px 0 14px 0;}
.area_cont .box_cont .list_item .desc {font-size:15px; color:#999;}

.area_cont .title {font-weight:600; font-size:18px;}
.area_cont .box_area .item {position:relative; padding:22px 0 30px; box-sizing:border-box; border:1px solid #305DFF; border-radius:15px;}
.area_cont .box_area .item h2 {position:absolute; top:-22px; left:50%; margin-left:-120px; background-color:#305DFF; font-size:18px; color:#fff; padding:8px 22px; border-radius:50px;}
.area_cont .box_area .item h2 .mint {color:#7AE7FF;}
.area_cont .box_area .item_cont {margin-top:22px;}
.area_cont .box_area .item .badge {padding:2px 9px; background-color:#eee; color:#aaa; font-size:15px; font-weight:600; display:inline-block; border-radius:4px;}
.area_cont .box_area .item .desc {margin:14px 0; font-size:28px; font-weight:600;}
.area_cont .box_area .item .desc p {margin-bottom:10px;}
.area_cont .box_area .item .desc em {font-size:15px; font-weight:400; color:#999;}
.area_cont .box_area .item .txt {color:#999; font-size:14px;}
.area_event {padding:80px 0;}
.area_event .inner {max-width:1000px;}
.area_event .sub {font-size:20px; color:#bbb; font-weight:600;}
.area_event .tit {text-align:center;}
.area_event .tit h2 {font-size:38px; color:#fff; margin-top:10px;}
.area_event .list_item {display:flex; margin-top:60px; gap:3vh; justify-content:center;}

/* 특별한 혜택 하나일 때 */
.list_item li:last-child .tb_type tbody tr th {width:74%; font-weight:600; color:#333;}
.area_event .list_item li {width:70%; display:flex; flex-direction:column; align-items:center; background-color:#fff; border-radius:16px; padding:45px;}
.area_event .list_item li .wrap_txt {text-align:center;}
.area_event .list_item li h3 {font-size:24px; color:#333;}
.area_event .list_item li em {margin:14px; font-weight:400; color:#999; text-align: center;}
.area_event .list_item .wrap_tb_bg {margin:20px 0; background-color:#F5F7F9; color:#333; border-radius:10px; padding:30px 0; width:95%;}
.area_event .list_item .wrap_tb_bg .title {color:#00B3CE; font-size:30px; letter-spacing:-2px; text-align:center; font-weight:600; margin-bottom:10px;}
.area_event .list_item .wrap_tb_bg .title .bb {margin:0; color:#333; font-weight:400; letter-spacing:-2px;}
.area_event .list_item .wrap_tb_bg .title .subtext {color:#333; font-weight:400; font-size:18px; letter-spacing:-2px;}
.area_event .list_item .wrap_tb_bg div {display:flex; gap:4vh;}
.area_event .list_item .wrap_tb_bg div span {font-size:16px; line-height:180%;}
.area_event .list_item .wrap_tb_bg .desc {font-size:15px; color:#888; margin-top:20px;}
.area_howto .tit h2 {color:#333;}
.area_howto .inner_flex .item {position:relative; margin-right:20px; padding:40px 28px 30px; background:#fff; border:1px solid #E9E9E9; border-radius:15px; box-sizing: border-box; box-shadow:0px 4px 16px rgba(0, 0, 0, 0.06);}
.area_howto .inner_flex .item:last-child {margin-right:0;}
.area_howto .wrap_card {margin-top:80px;}
.area_howto .wrap_card .txt_box {height:80px; margin-bottom:10px;}
.area_howto .wrap_card .item h3 {font-size:20px; line-height:160%;}
.area_howto .wrap_card .item p {margin-top:5px; font-size:15px; color:#888; text-align:center;}
.area_howto .wrap_card .item .event_img {display:inline-block;}
.benefit_cello .wrap_tb .tb_type1 {margin:15px 0 8px;}
.benefit_cellomark .wrap_tb .tb_type1 {margin:8px 0 8px;}
.wrap_tb thead th {color:#333; font-weight:500; background:#E7ECF0;}
.wrap_tb tbody {border:1px solid #E9EEF2;}
.wrap_tb tbody tr {line-height:150%; color:#666;}
.wrap_tb tbody tr th {color:#666; padding:8px 0 8px 25px;}
.wrap_tb tbody tr td {color:#666; padding:8px 0 8px 0;}
.wrap_tb tbody tr:first-child td {padding:8px 0 8px 0;}
.wrap_tb tbody tr:last-child th {padding:8px 0 8px 25px;}
.wrap_tb tbody tr:last-child td {padding:8px 0 8px 0;}
.wrap_tb tbody tr td.through {text-decoration:line-through;}
.list_item .wrap_tb_bg tbody tr {text-align:left; height:40px; line-height:200%;}
.list_item .wrap_tb_bg tbody tr th {font-weight:600; color:#333;}
.list_item .wrap_tb_bg tbody tr td {font-weight:400; color:#888;}
.qna_area .txt {font-size:15px; color:#999;}

.highlighter {position:relative; z-index:0;}
.highlighter:after {content:''; position:absolute; left:1px; bottom:4px; z-index:-1; width:102%; height:10px; background:#60f7ff; border-radius:3px;}
.num_s1 {position:absolute; top:-12px; left:50%; margin-left:-15px; display:inline-block; width:26px; height:26px; border-radius:50%; background:#333; font-size:16px; line-height:24px; color:#fff; text-align:center;}
.link_detail {background-color:#F6F6F6; padding:12px 22px; border-radius:40px; font-size:16px; color:#666; letter-spacing:-1.4px; font-weight:500; display:inline-block; transition:all 0.5s;}
.link_detail.bl {background-color:#333; color:#fff;}
.link_detail.bl .bt_arrow {width:17px; height:16px; display:inline-block; position:relative; top:1px; background:url(./images/ic_arrow.svg) 0 0;}
.link_detail.bl:hover {background-color:#666;}


@media (max-width: 959px) {
.piu, .spiky, .deco1, .deco2, .dada {display:none;}
.area_cont .tit {padding-top:0;}
.inner_flex {padding:0 5%;}
.benefit_cellomark .area_cont .tit {text-align:center;}
.area_cont .box_cont {padding:50px 40px; margin-bottom:60px;}
.area_cont .box_cont .list_item {flex-direction:column; margin-bottom:0;}
.area_cont .box_cont .list_item:last-child {margin-bottom:35px;}
.area_cont .box_cont .list_item li {width:100%; margin-bottom:40px; text-align:center;}
.list_item li:first-child .wrap_tb {padding:25px 30px 0 30px; margin-top:25px;}
.list_item li:last-child .wrap_tb {padding:25px 30px;}
.list_item li:last-child .tb_type tbody tr th {width:40%;}
.list_item li .tb_type tbody tr {height:60px;}
.list_item li .tb_type tbody tr th {line-height:130%;}
.area_cont .box_area .item h2 {font-size:16px; margin-left:-70px;}
.area_cont .tit h1 {font-size:32px; margin-top:20px;}
.area_cont .box_area .item .desc p {font-size:20px;}
.benefit_cellomark .area_cont .box_area .item .desc p:last-child::before {display:none;}
.area_cont .box_area .item_cont {margin-top:40px;}
.area_cont .box_area .item .desc {margin:16px 0 16px;}
.area_cont:first-child {padding:70px 0 10px;}
.area_cont .box_cont .intro_area {flex-direction:column; align-items:flex-start; padding:30px 30px 40px; margin:30px 0 45px;}
.area_cont .box_cont .intro_area .left {text-align:center;}
.area_cont .box_cont .intro_area .title {margin-bottom:10px;}
.area_cont .box_cont .intro_area .txt {margin-left:0;}
.area_cont .box_cont .intro_area .logo {margin-bottom:30px;}
.area_cont .box_cont .link_detail.bl {margin:20px auto 0;}
.area_cont .box_cont .list_item h3 {text-align:center;}
.area_cont .box_cont .qna_area li {margin-bottom:35px;}
.area_cont .box_cont .qna_area .desc {margin:15px 0 0; font-size:15px; line-height:160%;}
.area_cont .box_cont .qna_area li:last-child {margin-bottom:0;}
.area_cont .box_cont h3 {text-align:center;}
.area_event .tit h2 {font-size:28px;}
.area_event .list_item {flex-direction:column;}
.area_howto .inner_flex .item {margin-right:0; margin-bottom:60px;}
.area_howto .inner_flex .item:last-child {margin-bottom:0;}
.area_last {padding:30px 0 70px;}
.list_item .wrap_tb tbody th {padding:20px 0 0 10px;}
.list_item .wrap_tb tbody td {padding:20px 0 0 0;}
.list_item .wrap_tb tbody tr {line-height:160%;}
.list_item .wrap_tb tbody tr th {line-height:140%; font-size:14px; padding:8px 0 8px 10px;}
.list_item .wrap_tb tbody tr td {font-size:14px;}
.list_item .wrap_tb tbody tr:first-child th {padding:10px 0 0 10px;}
.list_item .wrap_tb tbody tr:first-child td {padding-top:10px;}
.list_item .wrap_tb tbody tr:last-child th {padding:20px 0 20px 10px;}
.list_item li:last-child .wrap_tb {padding:0;}

/* 특별한 혜택 하나일 때 */
.wrap_txt {text-align:center;}
.area_event .list_item li {width:auto; flex-direction:column; display:flex; justify-content:space-between; background-color:#fff; border-radius:16px; padding:40px 35px 30px;}
.area_event .list_item li h3 {font-size:25px; margin-top:0; text-align:center;}
.area_event .list_item .wrap_tb_bg .subtitle {font-size:20px;}
.area_event .list_item .wrap_tb_bg .title {font-size:20px;}
.list_item .wrap_tb_bg {width:auto; background-color:#F5F7F9; border-radius:10px; padding:25px 30px; margin-top:30px;}
.area_event .list_item .wrap_tb_bg .title .subtext {font-size:15px;}
}


/* timekeeper_daou.jsp */
.area_cont.edm:first-child {padding:0;}
.area_cont.edm {padding:0;}
.bg_navy {background-color:#282673;}
.bg_skyblue {background-color:#F5F7F9;}