/*********** 2020-02-28 ***********/

/* pageContents 자체는 common.css에 있음 */

.pageContents.mainpage {
    background: #f6f7fb;
}

.partnersBanner {
    background: #fff;
}

.mainContents {
    width: 1280px;
    margin: 0 auto;
    padding: 81px 0 51px 0;
}

/* 220217 탑베너 */
.topBanner{
    position: relative;
    width: 100%;
}

.topBannerInner{
    box-sizing: border-box;
}

.bannerImgBox{
    position: relative;
    width: 100%;
    height: calc(100vh - 122px);
    box-sizing: border-box;
}

.bannerImgslide{
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 87.5vh;
    overflow: hidden;
    z-index: 0;
    opacity: 0;
    transition-duration: 3s;
    animation-timing-function: linear;
}

.bannerImgslide.on{
    opacity: 1;
}

.bannerBox{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 122px) !important;
    z-index: 2;
}

.bannerBoxM{
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.bannerSlide{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}


.bgi{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-height: 700px;
    height: 120%;
    transition-duration: 6s;
}

.bannerImgslide.on .bgi{
    height: 100%;
}

.mainTabMenu{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1280px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
    z-index: 999;
}

.mainTabMenu li{
    position: relative;
    width: calc(100%/5);
    height: 100px;
    font-size: 18px;
    font-weight: 500;
    color: #FFF;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.mainTabMenu li.on::after{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 5px;
    border-top: 5px solid #FFF;
    margin-left: 0;
}

.pagenation{
    display: none;
}

.topBannerInnerM{
    display: none;
}

.bannerSlideM{
    position: relative;
}

.bannerSlideM:first-child{
    display: block;
}

.bannerSlideM img{
    width: 100%;
}

.mPagenation.swiper-pagination-bullets.swiper-pagination-clickable{
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7%!important;
    z-index: 999;
}

.mPagenation .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFF;
    opacity: 0.3;
    margin: 0;
    margin-left: 3px!important;
}

.mPagenation .swiper-pagination-bullet:first-child{
    margin-left: 0!important;
}

.mPagenation .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #FFF;
    opacity: 1;
}

/* 메인배너 슬라이드 시작 */
.bannerTextBox_sd1 {padding-top: 70px;}
.bannerTextBox_sd1 .bannerTextL {text-align: left;}
.bannerTextBox_sd1 .bannerTextS {text-align: left;}

.bannerTextBox{
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    max-width: 1280px;
    margin: 0 auto;
}

.bannerTextL{
    position: relative;
    font-size: 49px;
    font-weight: 700;
    text-align: center;
}

.bannerTextM{
    position: relative;
    font-size: 30px;
    font-weight: 500;
    color: #063a74;
    text-align: center;
}

.bannerTextS{
    position: relative;
    font-size: 20px;
    font-weight: 100;
    line-height: 1.5em;
    text-align: center;
}

.bannerBtn{
    position: relative;
    display: block;
    width: 200px;
    height: 60px;
    font-size: 18px;
    color: #FFF;
    line-height: 60px;
    box-sizing: border-box;
    margin: 0 auto;
    background-color: transparent;
}

.bannerBtn.coloredBtn{
    background-color: #082c60;
}

.bannerBtn.borderBtn{
    border: 2px solid #FFF;
}

.animate01{
    position: relative;
    margin-left: -300px;
    opacity: 0;
    display: none;
}

.animate02{
    position: relative;
    margin-left: 300px;
    opacity: 0;
    display: none;
}

.animate03{
    position: relative;
    opacity: 0;
    display: none;
}

    /* 슬라이드 1번 시작 */
.bannerSlide.firstSlide .bannerTextBox{
    padding-top: 176px;
}

.bannerSlide.firstSlide .bannerTextL{
    font-size: 52px;
    color: #063a74;
    margin-bottom: 40px;
}

.bannerSlide.firstSlide .bannerTextS{
    font-size: 22px;
    font-weight: 400;
    color: #063a74;
    margin-bottom: 56px;
    letter-spacing: -0.03em;
}

.bannerSlide.firstSlide .bannerBtn{
    color: #417ae0;
    background-color: #FFF;
}
    /* 슬라이드 1번 끝 */
    /* 슬라이드 2번 시작 */
.bannerSlide.secondSelide>a{
    width: 100%;
    height: 700px;
    display: block;
}

.bannerSlide.secondSelide .bannerTextBox{
    padding-top: 115px;
}

.bannerSlide.secondSelide .bannerTextL{
    margin-bottom: 34px;
    padding-left: 32px;
    text-align: left;
}

.bannerSlide.secondSelide .bannerTextS{
    margin-bottom: 67px;
    padding-left: 32px;
    text-align: left;
}

.imgLogoInBanner{
    position: relative;
    width: auto;
    margin-left: 408px;
}
    /* 슬라이드 2번 끝 */
    /* 슬라이드 3번 시작 */
.bannerSlide.thirdSlide .bannerTextBox{
    padding-top: 91px;
}

.bannerSlide.thirdSlide .bannerTextL{
    font-size: 46px;
    font-weight: 400;
    color: #333;
    margin-bottom: 27px;
    line-height: 1;
}

.bannerSlide.thirdSlide .bannerTextL .bold{
    font-weight: 700;
}

.bannerSlide.thirdSlide .bannerTextS{
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.025em;
}

.bannerSlide.thirdSlide .bannerBtn{
    margin-top: 320px;
}
    /* 슬라이드 3번 끝 */
    /* 슬라이드 4번 시작 */
.bannerSlide.fourthSlide .bannerTextBox{
    padding-top: 164px;
}

.bannerSlide.fourthSlide .bannerTextL{
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 70px;
    font-weight: 900;
    color: #063a74;
    margin-bottom: 63px;
    letter-spacing: -4px;
    text-align: left;
    padding-left: 165px;
}

.bannerSlide.fourthSlide .bannerTextL::before{
    content: 'e-News Letter';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 173px;
    font-family: 'Roboto', sans-serif;
    font-size: 68px;
    font-weight: 900;
    color: #FFF;
    margin-bottom: 35px;
    letter-spacing: -3px;
    z-index: -1;
    white-space: nowrap;
}

.bannerSlide.fourthSlide .bannerTextM{
    font-family: 'NanumSquare';
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 17px;
    line-height: 1;
    text-align: left;
    padding-left: 165px;
}

.bannerSlide.fourthSlide .bannerTextS{
    font-family: 'NanumSquare';
    font-size: 20px;
    font-weight: 600;
    color: #063a74;
    margin-bottom: 29px;
    text-align: left;
    padding-left: 165px;
}

.bannerSlide.fourthSlide .bannerBtn.coloredBtn{
    background-color: #063a74;
    margin: 0;
    margin-left: 165px;
}
    /* 슬라이드 4번 끝 */
    /* 슬라이드 5번 시작 */
.bannerSlide.fifthSlide .bannerTextBox{
    padding-top: 208px;
}

.bannerSlide.fifthSlide .bannerTextL{
    font-size: 50px;
    font-weight: 700;
    color: #FFF;
    line-height: 1em;
    margin-bottom: 38px;
    letter-spacing: -5px;
}

.bannerSlide.fifthSlide .bannerTextS{
    font-size: 20px;
    font-weight: 400;
    color: #FFF;
    line-height: 1em;
    margin-bottom: 16px;
}

.bannerSlide.fifthSlide .bannerTextM{
    font-size: 25px;
    font-weight: 400;
    color: #FFF;
    line-height: 1em;
    margin-bottom: 43px;
}
    /* 슬라이드 5번 끝 */
/* 메인배너 슬라이드 끝 */

/* 컨텐츠 */
.mainContsTitle{
    font-size: 36px;
    color: #1a1a1a;
    font-weight: 700;
    text-align: center;
    margin-bottom: 43px;
}

.mainContsList{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.mainContsList>li{
    width: 408px;
    height: 300px;
    box-sizing: border-box;
}

.mainContsList>li:first-child{
    margin-left: 0;
}

.mainContsList>li>a>img{
    width: 100%;
}

.mainContsList>li.calendar{
    border: 1px solid #062c5e;
    box-sizing: border-box;
    background-color: #FFF;
}

.mainContsList>li.calendar .calendarFest{    
    box-sizing: border-box;
}

.middleMainContsList{
    display: none;
}

/* 달력 세팅 */

.mainCont07 .ui-datepicker {
    width: 100%;
    padding: 0;
}

.mainCont07 .ui-widget {
    font: 'Roboto', sans-serif;;
}

.mainCont07 .ui-widget-content {
    border: 0;
    background: #fff;
    box-sizing: border-box;
}

.mainCont07 .ui-corner-all {
    border-radius: 0;
    border: 0;
}

.mainCont07 .ui-widget-header {
    background: none;
}

.mainCont07 .ui-datepicker .ui-datepicker-title {
    font-size: 18px;
    font-weight: 500;    
    line-height: 1;
    padding: 15px 0;
}

.mainCont07 .ui-datepicker .ui-datepicker-header {
    padding: 0;
    background: #062c5e;
}

.mainCont07 .ui-datepicker-calendar {
    background: #fff;
    margin-top: 22px;
    margin-bottom: 8px;
    box-sizing: border-box;
    height: 212px;
}

.mainCont07 .ui-datepicker .ui-datepicker-prev, 
.mainCont07 .ui-datepicker .ui-datepicker-next {
    width: 6px;
    height: 9px;
    font-size: 0;
    display: block;   
}

.mainCont07 .ui-datepicker .ui-datepicker-prev {
    left: 10px;
    top: 50%;
    margin-top: -4.5px;
    background: url('../images/main/icon_dateprev.png') no-repeat;
    cursor: pointer;
    width: 12px;
    height: 18px;
}

.mainCont07 .ui-datepicker .ui-datepicker-next {
    right: 8px;
    top: 50%;
    margin-top: -4.5px;
    background: url('../images/main/icon_datenext.png') no-repeat;
    cursor: pointer;
    width: 12px;
    height: 18px;
}

.mainCont07 .ui-datepicker td {
    vertical-align: middle;
    padding: 0;
}

.mainCont07 .ui-datepicker th {
    padding: 6px 0 8px;
}

.mainCont07 .ui-state-default, 
.mainCont07 .ui-widget-content .ui-state-default, 
.mainCont07 .ui-widget-header .ui-state-default {
/*    padding: 4px 0;*/
    background: none;
    text-align: center;
    color: #262626;
    font-size: 14px;
    display: block;
    border-radius: 50%;
    width: 20px;
    line-height: 20px;
    margin: 0 auto;
    border: 0;
    font-weight: 500;
}

.mainCont07 .ui-datepicker th:first-child,
.mainCont07 td:first-child .ui-state-default, 
.mainCont07 td:first-child .ui-widget-content .ui-state-default, 
.mainCont07 td:first-child .ui-widget-header .ui-state-default {
    color: #d23b28;
}

.mainCont07 .ui-datepicker th:last-child,
.mainCont07 td:last-child .ui-state-default, 
.mainCont07 td:last-child .ui-widget-content .ui-state-default, 
.mainCont07 td:last-child .ui-widget-header .ui-state-default {
    color: #3c60ca;
}

.mainCont07 .ui-datepicker-today .ui-state-default {
    border: 1px solid #e8edf3;
    display: block;
    border-radius: 50%;
    width: 26px;
    line-height: 26px;
    margin: 0 auto;
    background-color:#e8edf3 ;
}

.mainCont07 .ui-exist-plan .ui-state-default {
    border: 1px solid #568aed;
    background: #568aed;
    color: #fff;
}

.ui-widget-shadow {
    background: none !important;
    background-color: #fff !important;
    font-size: 10pt !important;
    opacity: 1 !important;
}

.mainCont07 .ui-widget-header .ui-icon {
    background-image: none;
}

@media all and (max-width: 1280px) {
    .mainTabMenu{
        width: 100%;
        height: 70px;
    }

    .mainTabMenu li{
        height: 70px;
        line-height: 70px;
    }

    .mainContents{
        width: 100%;
    }

    .mainContsList {
        display: none;
    }

    .middleMainContsList{
        display: block;
        padding: 0 2%;
        box-sizing: border-box;
    }

    .middleMainContsList::after{
        content: '';
        display: block;
        clear: both;
    }

    .middleMainContsList>li{
        float: left;
        width: 49%;
    }

    .middleMainContsList>li:first-child{
        margin-right: 2%;
    }

    .middleMainContsList>li>a>img{
        width: 100%;
    }

    .middleMainContsList>li.calendar{
        width: 100%;
        margin-top: 2%;
    }
}
@media all and (max-width: 768px) {
    .topBannerInner {
        display: none;
    }

    .topBannerInnerM {
        display: block;
    }

    /* 모바일 컨텐츠 */
    .mainContsList {
        display: block;
        padding-left: 2%;
        padding-right: 2%;
    }

    .middleMainContsList {
        display: none;
    }

    .mainContsList>li {
        width: 100%;
        height: 100%;
        margin-bottom: 2%;
    }

    .mainContsList>li:last-child {
        margin-bottom: 0;
    }
}

@media all and (max-width: 480px) {
    .mainContents{
        padding: 40px 0 9px;
    }
    .mainContsTitle{
        font-size: 23px;
        margin-bottom: 25px;
    }

    .mainContsList {
        display: block;
        padding-left: 9px;
        padding-right: 9px;
    }

    .mainContsList>li{
        width: 100%;
        height: 100%;
        margin-bottom: 9px;
    }

    .mPagenation .swiper-pagination-bullet{
        width: 12px;
        height: 12px;
    }
}

@media all and (max-width: 400px) {
    .mainContBottom .mainCont06 .genHead {
        font-size: 16px;
    }
}

@media all and (max-width: 375px) {
    .mainCont06 .genBody {
        padding: 0;
    }
}

@media all and (max-width: 364px) {
    .mainEvent .eventCont .eventDesc .eventDescSub span.place {
        display: block;
        margin-left: 0;
        margin-top: 5px;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mainContBottom .mainCont06 .genHead {
        padding: 22px 0;
        text-align: center;
        line-height: 1.2;
    }
    
    .mainCont06 .genBody button {
        margin: 10px 7px;
    }
}


/* 공지 및 안내 */
.mainNews {
    background: #fff;
}

.mainNews .inner {
    width: 1280px;
    margin: 0 auto;
    padding: 81px 0 26px 0;
}

.mainNoticeWrap{
    position: relative;
    width: 100%;;
}

    /* 탭메뉴 */
.mainNotTap .tapSlide{
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ededed;
}

.mainNotTap .tapSlide .slideBar{
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100%/4);
    height: 3px;
    background-color: #568aed;
    transition-duration: 0.3s;
}

.mainNotTap>ul{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.mainNotTap>ul .tab{
    float: left;
    width: calc(100%/4);
}

.mainNotTap>ul .tab h3{
    display: block;
    width: 100%;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    padding: 22px 0;
    color: #666;
    text-align: center;
}

.mainNotTap>ul .tab.on h3{
    font-weight: 700;
    color: #568aed;
}
    /* 텝메뉴 컨텐츠 */
.mainNotTapConts{
   padding-top: 27px;
}

.mainNotTapConts>ul{
    position: relative;
    width: 100%;
}

.mainNotTapConts>ul .tapCont{
    width: 100%;
    display: none;
}

.mainNotTapConts>ul .tapCont.on{
    display: block;
}

.tapContsList{
    overflow: hidden;
}

.tapContsList>li{
    float: left;
    width: calc(100%/3 - 1%); 
    max-height: 195px;
    height:195px;
    margin-left: 1.5%;
    margin-bottom: 1.5%;
    border: 1px solid #dedede; 
    padding: 37px 33px;
    box-sizing: border-box;  
}

.tapContsList>li:nth-child(3n+1){
    margin-left: 0;
}

.tapContsList>li:hover{
    border: 1px solid #568aed;   
}

.tapContsList>li .noticeDate{
    font-size: 16px;
    font-weight: 400;
    color: #568aed;
    margin-bottom: 23px;
    text-align: left;
}

.tapContsList>li .noticeTitle{
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -1.42px;
    color: #222;
    margin-bottom: 18px;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.tapContsList>li .noticeText{
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 22px;
}

/* 한국화학공학회 간행물 */
.mainJurnal{
    background-color: #f6f7fb;
    padding: 81px 0 90px 0;
}

.mainJurnalList.swiper-wrapper{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.JurnalList.swiper-slide{
    position: relative;
    width: calc(100%/4 - 18px);
    height: 320px;
    margin-left: 24px;
    padding: 50px 38px;
    box-sizing: border-box;
}

.JurnalList.jurnal01{
    background-color: #568aed;
    border: 2px solid #568aed;
    margin-left: 0;
}

.JurnalList.jurnal02{
    background-color: #5671e5;
    border: 2px solid #5671e5;
}

.JurnalList.jurnal03{
    background-color: #062c5e;
    border: 2px solid #062c5e;
}

.JurnalList.jurnal04{
    background-color: #04a3a9;
    border: 2px solid #04a3a9;
}
  /* 마우스 오버 */
.JurnalList:hover{
    background-color: #FFF;
}

.JurnalList:hover img{
    display: none;
}

.JurnalTitle{
    font-size: 23px;
    font-weight: 700;
    color: #FFF;
    text-align: left;
    margin-bottom: 18px;
}

.JurnalTitle span {
    font-size: 17.5px;
}

.JurnalList:hover .JurnalTitle span {
    display: none;
}

.JurnalList:hover .JurnalTitle{
    margin-bottom: 29px;
}

.JurnalList.jurnal01:hover .JurnalTitle{
    color: #568aed;
}

.JurnalList.jurnal02:hover .JurnalTitle{
    color: #5671e5;
}

.JurnalList.jurnal03:hover .JurnalTitle{
    color: #062c5e;
}

.JurnalList.jurnal04:hover .JurnalTitle{
    color: #04a3a9;
}

.JurnalText{
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: #FFF;
    text-align: left;
    margin-bottom: 55px;    
}

.JurnalList:hover .JurnalText{
    display: none;
}

.JurnalIcon{
    position: absolute;
    right: 39px;
    bottom: 43px;
}

.JurnalList.jurnal04 .JurnalIcon{
    bottom: 38px;
}

.JurnalList .jurnalMenu{
    display: none;    
}

.JurnalList .jurnalMenu>li::before{
    content: '-';
    color: #333;
    margin-right: 2px;
}

.JurnalList .jurnalMenu>li{
    margin-bottom: 13px;
}

.JurnalList .jurnalMenu>li:last-child{
    margin-bottom: 0;
}

.JurnalList .jurnalMenu>li>a{
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

.JurnalList .jurnalMenu>li>a:hover{
    text-decoration: underline;
}

.JurnalList:hover .jurnalMenu{
    display: block;
}

.JurnalList:hover .jurnalMenu.unlogin{
    display: none;
}

.JurnalList .loginInquire{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;    
    display: none;
    background-color: transparent;
    z-index: 1
}

.JurnalList:hover .loginInquire{
    display: block;    
}

.JurnalList .loginInquire .inquireText{
    font-size: 15px;
    font-weight: 500;
    color: #222;
    text-align: center;
    padding-top: 130px;
    padding-bottom: 23px;
}

.JurnalList .loginInquire .loginButton{    
    font-size: 16px;
    font-weight: 500;
    line-height: 48px;
    padding: 0 48px;
    border: 1px solid #c1c1c1;
    background-color: #FFF;
    margin: 0 auto;
    display: block;    
}

/* fun & fun festival */
.mainFestival{
    background-color: #FFF;
    padding: 81px 0 75px 0;
}

.mainFestival .inner{
    width: 1280px;
    margin: 0 auto;
}

.festDetailWrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.festVideo{
    width: 50%;
    height: 380px;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    margin-right: 22px;
}

.festVideoInfo{
    width: 50%;
    padding: 29px 31px;
    box-sizing: border-box;
}

.festVideoTitle{
    border-bottom: 1px solid #dedede;
    padding-bottom: 32px;
}

.festVideoTitle h3{
    font-size: 24px;
    font-weight: 500;
    color: #222;
    line-height: 36px;
    letter-spacing: -1.42px;
}

.videoInfoDetail{
    padding: 37px 0;
    padding-bottom: 27px;
}

.videoInfoDetail .price{
    font-size: 22px;
    font-weight: 500;
    color: #558beb;
    margin-bottom: 25px;
}

.videoInfoDetail p{
    font-size: 17px;
    font-weight: 400;
    color: #222;
    margin-bottom: 16px;
}

.videoInfoDetail p:last-child{
    margin-bottom: 0;
}

.festList{
    position: relative;
}

.festListRoll{
    position: relative;
    overflow: hidden;
}

.festListRoll .swiper-wrapper{
    width: 100%;
}

.festList .swiper-prevF, 
.festList .swiper-nextF{
    position: absolute;
    display: block;
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.festVideo iframe {
    width: 100%;
    height: 100%;
}

.festList .swiper-slide {
    height: calc(100% * 0.5820);
}

.festListRoll .swiper-slide img{
    width: 100%;
}

.festList .swiper-prevF{
    background: url(../images/main/icon_prev_circle.png) no-repeat;
    left: -24px;
}

.festList .swiper-nextF{
    background: url(../images/main/icon_next_circle.png) no-repeat;
    right: -24px;
}


/* 배너 롤링 */

.partnersBanner {
    background: #fff;
    border-top: 1px solid #c9c9c9;
}

.partnersBanner .inner {
    width: 1280px;
    margin: 0 auto;
    padding: 45px 0;
    position: relative;
}

.partnersBanner .bannerRoll {
    width: calc(100% - 60px);
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 0 1px;
}

.partnersBanner .bannerRoll .swiper-prev {
    background: url('../images/main/icon_banprev.png');
    width: 15px;
    height: 32px;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    left: 0;
    cursor: pointer;
}

.partnersBanner .bannerRoll .swiper-next {
    background: url('../images/main/icon_bannext.png');
    width: 15px;
    height: 32px;
    position: absolute;
    top: 50%;
    margin-top: -13.5px;
    right: 0;
    cursor: pointer;
}

div.festList div.swiper-slide img {
    object-fit: cover;
    border: 1px solid #ddd;
}

@media all and (max-width: 1209px) {
    .mainNews .inner {
        width: 100%;
        padding: 81px 2% 26px;
        box-sizing: border-box;
    }
    
    .tapContsList>li{
        height: 205px;
        padding: 28px 28px;
    }
    
    .tapContsList>li .noticeDate{
        font-size: 14px;
        font-weight: 400;
        color: #568aed;
        margin-bottom: 18px;
        text-align: left;
    }

    .tapContsList>li .noticeTitle{
        font-size: 18px;
        margin-bottom: 13px;
    }

    .tapContsList>li .noticeText{
        font-size: 14px;
        line-height: 24px;
    }
    
    /* 한국화학공학회 간행물 */
    .JurnalList{
        position: relative;
        width: calc(100%/4);
        height: 26.5vw;
        margin-left: 2%;
        padding: 2.7vw 1.6vw;
        box-sizing: border-box;
    }

    .JurnalTitle{
        font-size: 1.8vw;        
        margin-bottom: 1.5vw;
    }
    
    .JurnalText{
        font-size: 1.2vw;        
        margin-bottom: 4.5vw;
    }

    .JurnalIcon{
        width: 6.5vw;
    }
    
    .JurnalList .jurnalMenu>li>a, .jurnalMenu>li>a span{
        font-size: 1.2vw !important;
    }

    html .JurnalList .jurnalMenu>li{
        margin-bottom:1vw
    }

    .JurnalList:hover .JurnalTitle{
        margin-bottom:2.4vw
    }

    /*  fun & fun festival  */
    .mainFestival .inner{
        width: 100%;
        padding: 0 2%;
        box-sizing: border-box;
    }

    .festVideo{
        margin-right: 11px;
    }

    .festVideoTitle{
        border-bottom: 1px solid #dedede;
        padding-bottom: 26px;
    }

    .festVideoTitle h3{
        font-size: 18px;        
        line-height: 26px;
    }

    .videoInfoDetail{
        padding: 27px 0;
        padding-bottom: 17px;        
    }

    .videoInfoDetail .price{
        font-size: 18px;        
        margin-bottom: 25px;        
    }

    .videoInfoDetail p{
        font-size: 14px;        
        margin-bottom: 16px;        
    }    

    .partnersBanner .inner {
        width: 95%;
    }
}

@media all and (max-width: 1024px) {
    .tapContsList>li{
        float: none;
        width: 100%; 
        height: 100%;
        max-height: 100%;
        margin-left: 0;
        margin-bottom: 1%;
        border: 1px solid #dedede; 
        padding: 37px 33px;
    }

    .tapContsList>li:nth-child(n+4){
        display: none;
    }

    .tapContsList>li .noticeDate{
        font-size: 26px;
        margin-bottom: 23px;
        
    }
    
    .tapContsList>li .noticeTitle{
        font-size: 32px;       
        margin-bottom: 18px;
    }
    
    .tapContsList>li .noticeText{
        font-size: 28px;
        line-height: 42px;
    }    

    /* 한국화학공학회 간행물 */
    .mainJurnalList{
        flex-direction: row;
        flex-wrap:wrap;
    }

    .JurnalList.swiper-slide{
        position: relative;
        width: calc(100%/2 - 2.4vw);
        height:31.25vw;
        margin-left: 1.2vw;
        margin-right: 1.2vw;
        padding: 5.2vw 3.8vw;
        box-sizing: border-box;
        margin-bottom: 1.2vw;
    }

    .JurnalTitle{
        font-size: 2.3vw;        
        margin-bottom: 1.77vw;
    }
    
    .JurnalText{
        font-size: 1.8vw;        
        margin-bottom: 5.3vw;
        line-height: 1.6;
    }

    .JurnalIcon{
        width: 7.7vw;
    }
    
    .JurnalList .jurnalMenu>li>a, .jurnalMenu>li>a span{
        font-size: 1.6vw !important;
    }

    .JurnalList:hover .JurnalTitle{
        margin-bottom: 2.8vw
    }


    /* fun & fun festival */
    .mainFestival{
        padding-bottom: 120px;
    }

    .festDetailWrap{
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 22px;
    }

    .festVideo{
        width: 100%;
        margin-right: 0;
    }

    .festVideoInfo{
        width: 100%;
        height: 100%;
        padding: 0;
        margin-bottom: 33px;
    }

    .festVideo iframe {
        width:96vw;
        height:54vw;
    }

    .festVideoTitle h3{
        font-size: 24px;        
        line-height: 36px;
    }    
    
    .videoInfoDetail .price{
        font-size: 22px;
        margin-bottom: 25px;
    }
    
    .videoInfoDetail p{
        font-size: 17px;
        margin-bottom: 16px;
    }

    .festList .swiper-prevF, 
    .festList .swiper-nextF{
        position: absolute;
        display: block;
        width: 48px;
        height: 48px;
        top: unset;
        bottom: -88px;
        z-index: 1;
    }

    .festList .swiper-prevF{        
        left: 40%;
    }
    
    .festList .swiper-nextF{       
        right: 40%;
    }

}

@media all and (max-width: 740px) {

}


@media all and (max-width: 767px) {
    html .partnersBanner .swiper-slide img {
        width: 100%;
    }

    
    /* 한국화학공학회 간행물 */
    html .mainJurnal{
        padding: 40px 11px 9px;
        box-sizing: border-box;
        
    }
    html .junalWrap{
        overflow: hidden;
    }

    html .mainJurnalList{
        flex-wrap: nowrap; 
    }

    html .JurnalList.swiper-slide{
        position: relative;
        width: 235px!important;
        height: 285px!important;
        padding: 40px 22.5px;
        margin-left: 0;
    }

    html .JurnalList.jurnal04{
        margin-right: 0;
    }

    html .JurnalTitle{
        font-size: 20px;        
        margin-bottom: 20.5px;
    }
    
    html .JurnalText{
        font-size: 13.5px;        
        margin-bottom: 55px; 
        line-height: 1.46em;
    }

    html .JurnalIcon{
        position: absolute;
        right: 32px;
        bottom: 33px;
        width: 54.5px;
        
    }
    html .JurnalList.jurnal03 .JurnalIcon{
        bottom: 33px;        
    }

    html .JurnalList.jurnal04 .JurnalIcon{
        width: 66.9px;
        bottom: 33px;        
    }

    html .JurnalList .jurnalMenu>li{
        margin-bottom: 6.5px;
    }
    
    html .JurnalList .jurnalMenu>li>a, html .JurnalList .jurnalMenu>li>a>span{
        font-size: 14px !important;   
        line-height: 1.4;
    }

    html .JurnalList .loginInquire .inquireText{        
        padding-top: 100px;
        padding-bottom: 23px;
    }
}

@media all and (max-width: 480px) {   
    .mainNews .inner {
        padding: 40px 9px 9px;
        box-sizing: border-box;
    }

    .mainNotTap>ul .tab h3{
        font-size: 14px;
        padding: 12px 0;
    }

    .tapContsList>li{
        padding: 25px 21px;
        margin-bottom: 9px;
    }

    .tapContsList>li .noticeDate{
        font-size: 13px;        
        margin-bottom: 17px;
    }
    
    .tapContsList>li .noticeTitle{
        font-size: 16px;        
        margin-bottom: 15px;
    }
    
    .tapContsList>li .noticeText{
        font-size: 14px;
        line-height: 21px;
    }
    

    /* fun & fun festival */
    .mainFestival{
        padding: 40px 9px 90px;
        box-sizing: border-box;
    }

    .festVideo{
        width: 91vw;
    }

    .festVideo iframe {
        width:91vw;
        height:51vw;
    }

    .festVideoInfo{
        margin-bottom: 16px;
    }

    .videoInfoDetail{
        padding: 18px 0;
        padding-bottom: 13px;
    }

    .festVideoTitle{
        padding-bottom: 16px;
    }

    .festVideoTitle h3{
        font-size: 15px;        
        line-height: 22px;
        letter-spacing: -1px;
    }

    .videoInfoDetail .price{
        font-size: 14px;       
        margin-bottom: 12px;
    }

    .videoInfoDetail p{
        font-size: 12px;        
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

    .festList .swiper-prevF, 
    .festList .swiper-nextF{       
        bottom: -88px;
        z-index: 1;
    }

    .festList .swiper-prevF{        
        left: 35%;
    }
    
    .festList .swiper-nextF{       
        right: 35%;
    } 
}

@media all and (max-width: 375px) {
    .partnersBanner .swiper-slide {
        text-align: center;
    }
    
    .partnersBanner .swiper-slide img {
        width: auto;
    }
}


/* 팝업 */

.popup {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 9000;
/*    display: none;*/
}

.popup .popupCloseM {
    color: #fff;
    right: 0;
    top: 0;
    position: absolute;
    display: none;
}

.popup .popupWrap {
    width: 620px;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.popupWrap .popupClose {
    position: absolute;
    right: 35px;
    top: 0;
}

.popupWrap .popupClose button {
    font-size: 0;
    background: url('../images/main/popup_close.png') no-repeat;
    width: 18px;
    height: 16px;
    cursor: pointer;
}

.popupWrap .popupControl {
    position: relative;
    font-size: 0;
    padding: 0 35px;
}

.popupWrap .popupControl .chkSet {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 14px;
}

.popupWrap .popupControl input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.popupWrap .popupControl input[type="checkbox"] + label.customChk {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
    vertical-align: middle;
}

.popupWrap .popupControl input[type="checkbox"]:checked + label.customChk {
    background: url('../images/main/c_checked.png') no-repeat 50%;
}

.popupWrap .popupControl label.realChk {
    display: inline-block;
    font-size: 15px;
    color: #bbbbbb;
    vertical-align: middle;
    margin-left: 8px;
    transform: skew(-0.3deg);
}

.popupWrap .popupControl .chkSet:last-child {
    margin-right: 0;
}

.popupWrap .popupContent {
    width: calc(100% - 70px);
    margin: 0 auto;
    overflow: hidden;
}

.popupWrap .popupContent .swiper-arrow {
    background: url('../images/main/popup_arrow.png');
    width: 25px;
    height: 52px;
    top: 50%;
    margin-top: 0px;
    position: absolute;
    cursor: pointer;
}

.popupWrap .popupContent .swiper-prev {
    left: 0;
}

.popupWrap .popupContent .swiper-next {
    right: 0;
    background-position: 100%;
}

.popupWrap .popupContent .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: none;
    border: 2px solid #aeaeae;
    box-sizing: border-box;
    opacity: 1;
}

.popupWrap .popupContent .swiper-pagination-bullet-active {
    background: #aeaeae;
}

@media all and (max-width: 1209px) {
    
    .popupWrap .popupClose {
        display: none;
    }

    .JurnalList .jurnalMenu>li {
        margin-bottom: 10pt;
    }
    
    .popup .popupCloseM {
        display: block;
        font-size: 0;
        background: url('../images/main/m_popupclose.png') no-repeat;
        width: 40px;
        height: 40px;
        background-size: 100%;
    }

    #popupNotice .popupWrap .popupClose {
        display: block !important;
    }
}

@media all and (max-width: 768px) {
    .popup .popupCloseM {
        width: 50px;
        height: 50px;
    }
    
    .popupWrap .popupControl input[type="checkbox"] + label.customChk {
        width: 12px;
        height: 12px;
        background-size: cover;
    }
    
    .popupWrap .popupControl label.realChk {
        font-size: 12px;
    }

    #popupNotice {
        width: 550px !important;
        left: calc(50% - 275px) !important;
    }

    #popupNotice img {
        width: 480px !important;
        height: auto !important;
    }

    #popupNotice .popupWrap .popupClose {
        display: block !important;
    }
}

@media all and (max-width: 620px) {
    .popup .popupWrap {
        width: 90%;
        height: auto;
    }
    
    .popupWrap .swiper-slide img {
        width: 100%;
    }
    
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 5px !important;
    }

    #popupNotice {
        width: 480px !important;
        left: calc(50% - 240px) !important;
    }

    #popupNotice img {
        width: 410px !important;
        height: auto !important;
    }

    #popupNotice .popupWrap .popupClose {
        display: block !important;
    }
}

@media all and (max-width: 420px) {
    #popupNotice {
        width: 360px !important;
        left: calc(50% - 180px) !important;
        top: 50px !important;
    }

    #popupNotice img {
        width: 290px !important;
        height: auto !important;
    }

    #popupNotice .popupWrap .popupClose {
        display: block !important;
    }
}


.main_mv {position:relative; overflow:hidden; width: 100%; height: 100%;}
#myVideo {position: absolute; top: 56%; left: 50%; min-width: 100%; min-height: 100%; height: auto; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

@media all and (max-width: 768px) {

.main_mv {padding-bottom:56.25%; height: auto;}
#myVideo {top:0; left:0; right:0; bottom:0; transform:none; min-width:auto; min-height:auto; width: 100%; height:100%;}

}