@charset "euc-kr"; 

:root {
    --box-shadow: 0px 0px 7px #01090e; 
    --point1: #77f9aa; 
    --point2: #00cdeb;
} 

/* ¹è³ÊÃß°¡ */
#eventWrap .fix_float.hide{display: none;}
#eventWrap .fix_float{position: absolute;z-index: 1;}
#eventWrap .fix_float a{display: block;}
#eventWrap .fix_float button{font-size: 17px;position: absolute;top: -5px;right: 5px;z-index: 2;}
.evCon4 .fix_float{right: -10%;top: -18%;}
.evCon6 .fix_float{right: -8%;top: 18%;}
.evCon6 .fix_float button{color:#000}
.evCon4 .fix_float button{color: #ffffffa3;}
.evCon6 .fix_float img{filter:  drop-shadow( 0px 0px 7px rgb(202, 202, 202))}

/* common */
.point1 {color:var(--point1)} 
.point2 {color:var(--point2)} 
.evCon2 .box .txt_law .point1,.evCon5 .point1 {color: #00aa74;} 
.evCon2 .box .txt_law .point2,.evCon5 .point2{color: #00a5f4;} 
.gradi {background: linear-gradient(to right, var(--point1) 0%, var(--point2) 100%); -webkit-background-clip: text; color: transparent;} 
.eventWrap .evSection {background-size: auto 100%;} 
.eventWrap .evSection .lecture {max-width:1000px; margin:0 auto} 
.eventWrap .evSection.fff {color: #fff;} 
.evSection:not(.evtoggleWarning,.evCon1,.evCon4 ) {padding: 140px 0;} 

/* common - button box */
.btn_box {display:flex; justify-content: center; gap: clamp(10px, 2vmin, 20px); margin: 0 auto;} 
.btn_box a {position: relative; display: flex; align-items: center; justify-content: center; min-height: 45px; overflow: hidden;} 
.btn_box a img {height: 100%; max-width: 130%;} 
.btn_box a:first-of-type:last-of-type {margin-left: 25%; margin-right: 25%;} /* ´ÜÀϹöÆ°ÀÏ °æ¿ì */

/* common - text style */ 
.evSection .chk {position: relative; padding-left: 27px; text-align: left;} 
.evSection .chk::before {content: ''; display: block; position: absolute; left: 0; top: 3px; background: url('https://image.megagong.net/m/2024/0423_megalaw/chk.png') no-repeat center; background-size: contain; width: 20px; height: 15px;} 

.con_tit {margin-bottom: 55px;} 
.con_tit h4 {font-weight: 900; font-size: 42px;} 
.con_tit .sub_txt {margin-top: 20px; opacity: .6; font-size: 20px;} /*ŸÀÌƲ ÇÏ´Ü ÅؽºÆ®*/
.bottom_txt {font-size: 28px; font-weight: 700; margin-top: 50px;} /*ÄÁÅÙÃ÷ ÇÏ´Ü ÅؽºÆ®*/

.circle_txt {position: relative; margin-bottom: 50px;} 
.circle_txt::before {content: ''; display: block; width: 100%; height: 1%; background: #000; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} 
.circle_txt span {position: relative; padding: 0 40px; background: #fff; font-size: 24px; font-weight: 700;} 

/* common - tab */
.evCon3, .evCon6 {padding-bottom: 0 !important;} 
.tab_base {display: flex;} 
.tab_base li {flex: 1;} 
.tab_base li a {background: #032326; color: #2f4040; display: block; line-height: 80px; font-size: 24px; font-weight: 900; border-top-right-radius: 8px; border-top-left-radius: 8px;} 
.tab_base li.on a {background: #fcfcfc; color: #000;} 
.panel_base {background: #fff; padding: 80px 0 160px; color:#000; position: relative; z-index: 2;} 
.panel_base:before {content:''; display:block; width: 3000px; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; background: #fff; z-index: -1;} 

/* common - swiper */
.swiper_common_wrap {position: relative;} 
.swiper_common_wrap .swiper_common.swiper-initialized {position: relative; overflow: hidden;} 
.swiper_common_wrap .swiper-pagination {position: relative; display: flex; justify-content: center; top: auto; bottom: auto; margin-top: 15px; z-index: 2;} 
.swiper_common_wrap .swiper-pagination-bullet {background: #666; opacity: 1; width: 12px; height: 12px; transition: all .5s ease} 
.swiper_common_wrap .swiper-pagination-bullet-active {border-radius: 30px; width: 30px; background: linear-gradient(to right, var(--point1) 0%, var(--point2) 100%);} 

/* contents */
.evCon1 {position: relative; background-color: #01090e; padding-top: 80px; background-image: url('https://image.megagong.net/m/2024/0423_megalaw/con1_bg.jpg'); animation: expandBg .8s linear;} 
.evCon1::before {content: ''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; animation: brighten 3s linear;} 
.evCon1 .title {align-items: center; justify-content: space-between; height: 867px;} 
.evCon1 .title li strong {font-weight: 900; font-size: 102px; line-height: 1.2;} 
.evCon1 .title li:first-child {text-align: left; padding-bottom: 200px;} 
.evCon1 .title li:first-child p {font-size: 20px; margin-bottom: 10px;width: fit-content;} 
.evCon1 .title li.img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; margin-left: 45px;} 
.evCon1 .title li:last-child {text-align: right; z-index: 3; padding-top: 175px;} 
.evCon1 .title li:last-child a {display: block; margin: 20px 0 0 185px;} 
@keyframes expandBg {
    0% {background-size: auto 0%;} 
    100% {background-size: auto 100%;} 
}
@keyframes brighten {
    0% {background: #000; opacity: 1;} 
    100% {background: transparent; opacity: 0;} 
}

.fix_menu {background: #003f49; z-index: 11; position: relative; width: 100%; top: 0;} 
.fix_menu.on {position: fixed;} 
.fix_menu.on + .evCon2 {padding-top: 260px;} 
.fix_menu ul {width: 1080px; margin: 0 auto; display:flex; justify-content:space-between; align-items: center; color: #fff; position: relative; cursor: pointer; z-index: 5;} 
.fix_menu ul li {flex: 1;} 
.fix_menu ul li a {position: relative; height: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 16px;} 
.fix_menu ul li a b {font-size: 20px;} 
.fix_menu ul li:not(:last-child) a::before {content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50%; background: #fff; opacity: 0.3;} 

.evCon2 {color: #fff; background-color: #00151c;} 
.evCon2 .box_wrap {background: #fff; color: #000; padding: 55px 70px; border-radius: 10px;} 
.evCon2 .box:last-child {margin-top: 35px;} 
.evCon2 .box .tit_law {margin-bottom: 60px; display: block; font-size: 27px; font-weight: 900;} 
.evCon2 .box .txt_law {font-weight: 700; margin-bottom: 20px; font-size: 16px;} 
.evCon2 .bottom_txt span {border-bottom: 1px solid;} 

.evCon3 {background-color: #032a32; padding-top: 160px;} 
.evCon3 .txt_define {background: #f3f3f3; margin-bottom: 35px; border-radius: 30px; font-size: 16px; padding: 17px 0;} 
.evCon3 .trend {align-items: center; justify-content: space-between; margin-bottom: 55px;} 
.evCon3 .trend li:first-child {width: 578px; position: relative;} 
.evCon3 .trend li:first-child:before {content: ''; display: block; position: absolute; top: 50%; transform: translate(0, calc(-50%)); right: 0; margin-right: -40px; z-index: 2; background: url('https://image.megagong.net/m/2024/0423_megalaw/con3_arrow.png') no-repeat center; width: 69px; height: 69px; background-size: contain; background-repeat: no-repeat;} 
.evCon3 .trend .txt_trend {margin-bottom: 20px; font-size: 18px; font-weight: 700;} 
.evCon3 .trend .swiper-wrapper {flex-direction: column; gap: 15px;} 
.evCon3 .point {border: 1px solid #dedede; border-radius: 10px; padding: 45px;} 
.evCon3 .point li {flex: 1; font-size: 18px; position: relative;} 
.evCon3 .point li span {display: block; border-radius: 30px; color: #fff; background: #196e55; font-size: 14px; line-height: 28px; width: 90px; margin: 0 auto 20px;} 
.evCon3 .point li:not(:last-child)::before {content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 80%; background: #dedede;} 

.evCon4 {background-color: #031f21; padding-top: 140px;} 
.evCon4 .con_tit h4 span:not(.gradi) {font-size: 20px;} 
.evCon4 .teacher_wrap {position: relative;} 
.evCon4 .teacher {margin-left: 100px;} 
.evCon4 .career {flex-wrap: wrap; justify-content: space-between; gap: 70px 410px; width: 1000px; position: absolute; left: 50%; top: 55px; transform: translateX(-50%); z-index: 2;} 
.evCon4 .bottom_txt {position: absolute; position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 2;} 
.evCon4 .tiny_noti {position: absolute; bottom: 30px; opacity: .5;} 

.evCon5 {background-color: #f3f3f5;} 
.evCon5 .prepend {width: 1000px; margin: 0 auto; justify-content: space-between;} 
.evCon5 .prepend > li {background: #fff; width: 490px; border-radius: 10px; overflow: hidden;} 
.evCon5 .prepend > li p {font-size: 20px; background: #333; color: #fff; line-height: 60px; font-weight: 900;} 
.evCon5 .prepend > li > b {font-size: 18px; padding: 50px 0 30px; display: block;} 
.evCon5 .prepend > li img {margin-bottom: 30px;} 
.evCon5 .prepend > li ul {font-size: 14px; padding: 30px 40px 50px; border-top: 1px solid #f2f2f2; display: flex; flex-direction: column; gap: 10px;} 
.evCon5 .prepend .chk::before {top: 0;} 

.evCon6 {background-color: #032a32;} 
.evCon6 .panel_base > li > p {background: #f3f3f3; margin-bottom: 35px; border-radius: 30px; font-size: 16px; text-align: center; height: 55px; display: flex; align-items: center; justify-content: center;} 
.evCon6 .video {align-items: center; gap: 45px; margin-bottom: 50px;} 
.evCon6 .video > li:first-child {width: 575px;} 
.evCon6 .video > li:last-child {width: 450px; margin-top: -30px;} 
.evCon6 .video li:last-child b {font-size: 18px; margin-bottom: 20px; display: block;} 
.evCon6 .video li:last-child ul li {border: 1px solid #dddddd; border-radius: 10px; padding: 17px 0; margin-bottom: 15px; font-size: 16px;} 
.evCon6 .table {border: 1px solid #dedede; position: relative;} 
.evCon6 .table::before {content: ''; display: block; position: absolute; left: 0; top: 0; background: linear-gradient(to right, #adfbcb 0%, #67e1f3 100%); width: 100%; height: 51px;} 
.evCon6 .table li {flex: 1; position: relative; border-right: 1px solid #dedede; font-size: 16px;} 
.evCon6 .table li:last-child {border: 0;} 
.evCon6 .table li > i {position: absolute; left: 10px; top: -10px;} 
.evCon6 .table li b {display: block; line-height: 50px; border-bottom: 1px solid #dedede; position: relative;font-weight: 900;} 
.evCon6 .table li p {display: flex;align-items: center;justify-content: center;flex-direction: column;height: 140px;} 
.evCon6 .table li p i {margin-right: 5px;} 
.evCon6 .table.tab2 > li {flex: none; width: 180px;} 
.evCon6 .table.tab2 > li:first-child {width: 360px;} 

.evCon7 {background: #f6fbf4;} 
.evCon8 {background: #191919;} 
.evCon8 .circle_txt:before {background:#fff} 
.evCon8 .circle_txt span {background:#191919} 
.evCon8 .review_box:last-child {margin-top: 60px;} 

.event1 {background-color: #54f4c0;} 
.event1 .con_tit .end::after {background-color: #007754;} 
.event1 .info_wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 75px;} 
.event1 .info_wrap .info_list {font-size: 21px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; color: #222; font-weight: 700;} 
.event1 .info_list li .tiny {opacity: .5; font-size: 13px;} 
.event1 .info_list li b {position: relative; padding: 0 15px; margin-right: 10px;} 
.event1 .info_list li b:before {content: '.'; display: block; position: absolute; left: 0%; top: 10px; transform: translateY(-50%);} 
.event1 .info_list li b:after {font-size: 12px; content: '|'; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 900;} 
.event1 .evtBoard_common {background-color: #a9fae0;} 
.event1 .eventBoard .evtBoard_common .board_write {border:1px solid #000;} 
.event1 .evtBoard_common .board_notice li {color:#000} 

.evtoggleWarning .warningList li ul li a {color: #00a5f4; padding: 0 0 2px; border-bottom: 1px solid #00a5f4;} 

@media screen and (max-width: 1200px){
    .evCon4 .fix_float{right: 0;top: -5%;max-width: 20%;}
    .evCon6 .fix_float{right: 0;top: 1%;max-width: 20%;}

    .eventWrap {font-size: clamp(13px,1.6vmin,16px);} 
    .eventWrap .tiny_noti {font-size: clamp(10px,1.3vmin,13px);} 

    .tab_base li a {font-size: clamp(15px, 2.5vmin, 24px); line-height: clamp(50px, 8vmin, 80px);} 
    .panel_base {padding: min(10%,80px) 0 min(15%,160px);} 

    .fix_menu ul {width: 99%;} 
    .fix_menu ul li a {font-size: clamp(13px,1.6vmin,16px); height: min(25vw,80px);} 
    .fix_menu ul li a b {font-size: clamp(14px,2vmin,20px)} 
    .fix_menu.on + .evCon2 {padding-top: 26%;} 

    .con_tit {margin-bottom: 6%;} 
    .con_tit h4 {font-size: clamp(25px,4.2vmin,42px);} 
    .con_tit .sub_txt {margin-top: 2%; font-size: clamp(15px,3vmin,20px);} 
    .bottom_txt {margin-top: 10%; font-size: clamp(18px,4vmin,28px);} 

    .evSection .chk {padding-left: 4.5%;} 
    .evSection .chk::before {max-width: 4%;} 

    .circle_txt {margin-bottom: 4%;} 
    .circle_txt span {padding: 0 3%; font-size: clamp(17px,2.5vmin,24px); display: block; width: fit-content; margin: 0 auto;} 

    /* contents */
    .evSection:not(.evtoggleWarning,.evCon1,.evCon4) {padding: 15% 0;} 
    .evCon1 {padding-top: 10%;} 
    .evCon1 .title {height: min(85vmin,867px);} 
    .evCon1 .title li strong {font-size: clamp(60px,10vmin,102px); line-height: 1.2; text-shadow: var(--box-shadow);} 
    .evCon1 .title li:first-child p {font-size: clamp(15px,2vmin,20px); margin-bottom: clamp(10px,2vmin,20px);} 
    .evCon1 .title li.img {width: 80%; margin-left: 35px;} 
    .evCon1 .title li:last-child a {margin: 2% 0 0 40%;} 

    .evCon2 .box_wrap {padding: min(10%,50px) 3%;} 
    .evCon2 .box:last-child {margin-top: 7%;} 
    .evCon2 .box .tit_law {margin-bottom: 7%; font-size: clamp(18px,3.5vmin,27px);} 
    .evCon2 .box .txt_law {margin-bottom: 2%; font-size: clamp(13px,3vmin,16px);} 

    .evCon3 .txt_define {border-radius: clamp(5px,2vmin,30px); font-size: clamp(13px,2vmin,16px); text-align: left; padding: 20px; text-indent: -20px; padding-left: 40px; max-width: 1000px; margin: 0 auto 4%;} 
    .evCon3 .txt_define .chk {padding-left: 20px;} 
    .evCon3 .txt_define .chk:before {max-width: 13%;} 
    .evCon3 .trend {margin-bottom: 6%; gap: 10px;} 
    .evCon3 .trend li:first-child {width: 60vw;} 
    .evCon3 .trend li:first-child:before {margin-right: 0; width: 6vw;} 
    .evCon3 .trend .txt_trend {font-size: clamp(17px,3vmin,18px);} 
    .evCon3 .point {padding: 5%0;} 
    .evCon3 .point li {font-size: clamp(13px,2vmin,18px);} 
    .evCon3 .point li span {font-size: clamp(12px,1.4vmin,14px); width: min(17vmin,90px); line-height: min(5vmin,28px); margin-bottom: 4%;} 

    .evCon4 {padding-top: 15%;} 
    .evCon4 .con_tit h4 span:not(.gradi) {font-size: clamp(15px,2vmin,20px);} 
    .evCon4 .teacher {margin-left: 15%;} 
    .evCon4 .career {width: 100%; gap: 10vmin 32vmin; top: 10vmin;} 
    .evCon4 .career li {width: 33%;} 
    .evCon4 .bottom_txt {width: min(90%, 515px); bottom: 13%;} 
    .evCon4 .tiny_noti {bottom: clamp(10px,3vmin,30px);} 

    .evCon5 .prepend {width: 100%;} 
    .evCon5 .prepend > li {width: 49%;} 
    .evCon5 .prepend > li p {font-size: clamp(15px,2vmin,20px);} 
    .evCon5 .prepend > li > b {font-size: clamp(13px,2vmin,18px); padding: 5% 3%; height: 80px; display: flex; align-items: center; justify-content: center;} 
    .evCon5 .prepend > li img {margin-bottom: 3%;} 
    .evCon5 .prepend > li ul {font-size: clamp(12px,3vmin,14px); padding: 3% 5% 5%; gap: clamp(5px,1vmin,10px);} 
    .evCon5 .prepend .chk::before {max-width: 3%; top: 3px;} 

    .evCon6 .panel_base > li > p {margin-bottom: 4%; font-size: clamp(14px,2vmin,16px); height: auto; padding: 20px 15px; border-radius: clamp(5px,1vmin,10px);} 
    .evCon6 .panel_base > li > p .chk::before {max-width: 3%;} 
    .evCon6 .video {gap: 10px; margin-bottom: 5%;} 
    .evCon6 .video li:last-child ul li {font-size: clamp(13px,1.6vmin,16px);} 
    .evCon6 .table li {font-size: clamp(13px,1.5vmin,16px);} 
    .evCon6 .table li:last-child {border: 0;} 
    .evCon6 .table li p {padding: 0 3px;height: min(25vmin, 100px);} 
    .evCon6 .table.tab2 > li {width: 17%;} 
    .evCon6 .table.tab2 > li:first-child {width: 32%;} 

    .event1 .con_tit h4 {margin: 0 -20%;} 
    .event1 .info_wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 75px;} 
    .event1 .info_wrap .info_list {font-size: clamp(15px,2vmin,21px);} 
    .event1 .info_wrap > li:last-child {width: min(38%,372px);} 
    .event1 .info_list li .tiny {opacity: .5; font-size: clamp(10px,1.3vmin,13px);} 
    .event1 .info_list li b {position: relative; padding: 0 15px; margin-right: 10px;} 
}
@media screen and (max-width: 768px) {
    #eventWrap .fix_float button{top: -10px;right: 0;font-size: clamp(13px,3vmin,17px);}


    .swiper_common_wrap .swiper-pagination {margin-top: 1.5vmin;} 

    .evCon1 {padding-top: 0;} 
    .evCon1 .title {display: block; padding-top: 40vmin; height: 90vmin;} 
    .evCon1 .title li strong br {display: none;} 
    .evCon1 .title li strong {font-size: clamp(30px,10vmin,102px);} 
    .evCon1 .title li:first-child {padding-bottom: 0; z-index: 3; position: relative;} 
    .evCon1 .title li:first-child p {font-size: max(3vmin,13px);} 
    .evCon1 .title li.img {margin-left: 4vmin;} 
    .evCon1 .title li:last-child {position: relative; padding-top: 0;} 
    .evCon1 .title li:last-child a {width: fit-content; margin: 2% auto 0; max-width: 50%;} 

    .evCon2 .swiper-slide img {width: min(65vmin,300px);} 

    .evCon3 .trend {flex-direction: column; gap: 30px;} 
    .evCon3 .trend li:first-child {width: 100%} 
    .evCon3 .trend li:first-child:before {right: auto; left: 50%; transform: rotate(270deg) translateY(-50%); top: auto; bottom: -1vmin; padding-left: 10%;} 
    .evCon3 .trend .swiper-wrapper {flex-direction: row; gap:0} 
    .evCon3 .swiper-slide img {width: min(90vw,456px);} 
    .evCon3 .point {flex-direction: column; max-width: 500px; margin: 0 auto; gap: 10px 0;} 
    .evCon3 .point li {display: flex; align-items: center; gap: 10px; margin-left: 5%;} 
    .evCon3 .point li span {margin: 0;} 
    .evCon3 .point li:not(:last-child)::before {display: none;} 

    .evCon5 .prepend {flex-direction: column;gap: 30px;max-width: 500px;} 
    .evCon5 .prepend > li {width: 100%;} 
    .evCon5 .prepend > li p {line-height: 40px;} 
    .evCon5 .prepend > li > b {height: auto; padding: 4%;} 
    .evCon5 .prepend .chk::before {top: 0;} 

    .evCon6 .video {flex-direction: column; margin-bottom: 10%; gap: 0;} 
    .evCon6 .video > li:first-child {width: 100%;} 
    .evCon6 .video > li:last-child {width: 100%; max-width: 500px; margin-top: 0;} 
    .evCon6 .video li:last-child b {font-size: clamp(15px,3.5vmin,18px);} 
    .evCon6 .video li:last-child ul li {padding: 3% 0; margin-bottom: 3%; font-size: clamp(13px,3vmin,16px);} 
    .evCon6 .table {flex-wrap: wrap;} 
    .evCon6 .table::before {height: 40px;} 
    .evCon6 .table > li:last-child b::before {content: ''; display: block; position: absolute; right: 0; top: 0; background: linear-gradient(to right, #adfbcb 0%, #67e1f3 100%); width: 300%; height: 100%; border-top: 1px solid #dedede; z-index: -1;} 
    .evCon6 .table li,.evCon6 .table.tab2 > li {flex: none; width: 33.3333%;} 
    .evCon6 .table:not(.tab2) li:nth-child(3) {border-right: 0;} 
    .evCon6 .table.tab2 li:nth-child(2) {border-right: 0;} 
    .evCon6 .table.tab2 > li:first-child .flex li {flex: 1;} 
    .evCon6 .table li:last-child {border: 0;} 
    .evCon6 .table li > i {max-width: 30%; left: 0; top: -15px;} 
    .evCon6 .table li b {line-height: 40px;} 
    .evCon6 .table li p i {display: inline-block; max-width: 29%; margin-right: 1px;} 
    .evCon6 .table.tab2 > li {width: 33.3333%;} 
    .evCon6 .table.tab2 > li:first-child {width: 66%;} 

    .event1 .info_wrap {flex-direction: column-reverse;} 
    .event1 .info_wrap > li:last-child {width: min(70%,372px); margin: 0 -35px 30px 0;} 
    .event1 .info_list li {text-align: left; display: flex;} 
    .event1 .info_list li b {width: 95px; padding: 0 10px;} 
    .event1 .info_list li b:before {top: 5px;} 
    .event1 .info_list li b:after {height: 100%; opacity: .6;} 
    .event1 .info_list li span {width: calc(100% - 95px);} 
}