@charset "utf-8";

/* 공통*/
    /* 타이틀*/
    .titleGr {display: flex; align-items: baseline; gap: 12px; border-top: 1px solid #000; padding: 55px 0 40px; margin-top: 110px;}    
    .titleGr h3 {position: relative; display: inline-block; font-size: 46px; font-weight: 800; color: #131313;}    
    .titleGr p {font-size: 19px; letter-spacing: 0; font-weight: 400; color: #131313;}
    /* 더보기 버튼*/
    .moreBtn {text-align: right; padding-top: 90px;}
    .moreBtn a {position: relative; font-size: 17px; font-weight: 600; padding-right: 32px; color: #000;}
    .moreBtn a:after {content: ""; display: block; position: absolute; top: -1px; right: 0; width: 23px; height: 23px; background-image: url("../../images/common/arteweek/more_icon.png"); background-repeat: no-repeat;}
    .moreBtn a:hover:after {background-image: url("../../images/common/arteweek/more_hover_icon.png");}    
    .moreBtn a.hoverUnderline .hoverItem {background-image: linear-gradient(to right, #008FBE 50%, transparent 50%);}       
    .moreBtn a.hoverUnderline:hover {color: #008FBE;} 


/* 메인이미지*/
.mainVis {padding-top: 60px;}
.mainVis .mainVisWrap {position: relative;} 
.mainVis .swiper {position: unset; width: 100%; transition: opacity 0.1s ease;}
.mainVis .swiper-wrapper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: fill;}
.mainVis .slider-indicator {position: absolute; bottom: -55px; right: 0; display: flex; justify-content: flex-end; align-items: center; z-index: 10; gap: 10px;}
.mainVis .slider-indicator .swiper-pagination-bullets.swiper-pagination-horizontal {position: unset; width: auto;}
.mainVis .slider-indicator .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {width: 13px; height: 13px; background: #8e8e8e; opacity: 1; border-radius: 50px; margin: 0 6px;}
.mainVis .slider-indicator .swiper-pagination-bullet-active {width: 33px !important; background: #ff5959 !important;}
.mainVis .slider-indicator .swiper-controller {line-height: 1;}
.mainVis .slider-indicator .swiper-controller button {position: relative; width: 32px; height: 32px; background-color: #fff; border: 1px solid #d8d8d8; border-radius: 50%;text-indent: -999999px;}
.mainVis .slider-indicator .swiper-controller button:after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center;}
.mainVis .slider-indicator .swiper-controller button.pause:after {background-image: url("../../images/main/arteweek/stop_icon.png");}
.mainVis .slider-indicator .swiper-controller button.play:after {background-image: url("../../images/main/arteweek/play_icon.png");}


/* 프로그램,아카이브 공통*/
[class^=swiper] figure {margin: 0 0; padding: 0 0;}
[class^=swiper] figure img {display: block; width: 100%; max-width: 100%; max-height: 100%;} 

.commSwiper a {position: relative;}
.commSwiper figure {overflow: hidden; }
.commSwiper .swiper-button-prev, 
.commSwiper .swiper-button-next {height: 100%; top: 0; z-index: 10; background: none; cursor: pointer;}
.commSwiper .swiper-button-prev {transform: rotate(-180deg);}
.commSwiper .swiper-button-prev:after {left: -9px;}
.commSwiper .swiper-button-next:after {right: -9px;}
.commSwiper .swiper-button-prev:after, 
.commSwiper .swiper-button-next:after {content: ''; position: absolute; top: 50%; width: 45px; height: 45px; background: #000; border-radius: 50%; transform: translateY(-50%); transition: opacity 0.3s ease;}
.commSwiper .swiper-button-prev:before, 
.commSwiper .swiper-button-next:before {content: ''; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; border-width: 0; border-style: solid; border-color: #fff; border-top-width: 2px; border-right-width: 2px; transform: translate(-75%, -50%) rotate(45deg); z-index: 1;}
.commSwiper .swiper-button-disabled {pointer-events: auto !important;}
.commSwiper .swiper-button-disabled-style:after {opacity: 1;}

.info {padding-top: 35px;}
.info .tit {color: #131313; font-size: 22px; font-weight: 700;}
.info .date {padding-top: 20px; font-size: 16px; color: #343434; font-weight: 500;}
.info .txt {display: inline-block; color: #6b6b6b; font-size: 15px; font-weight: 400; padding-top: 10px;}
.year {position: absolute; top: 20px; right: 20px; padding: 5px 15px; border-radius: 50px; background-color: #f63e3e; color: #fff; font-size: 17px;}

/* 프로그램*/
.program .commSwiper a {width: 366px !important; max-width: 366px;}
.program .commSwiper a figure {max-height: 235px;}
.program .commSwiper a figure img {display: block; width: 100%; height: auto; transition: transform 1s ease;}
.program .commSwiper a:hover figure img  {transform: scale(1.1);}

/* 아카이브*/ 
.archive .commSwiper a {width: 370px !important; max-width: 370px;}  
.archive .commSwiper figure {max-height: 368px;}
.archive .commSwiper a figure img {display: block; width: 100%; height: auto; transition: transform 1s ease;}
.archive .commSwiper a:hover figure img  {transform: scale(1.1);}
.archive .info .tit {white-space: normal; line-height: 1.8rem; height: 3.6rem; text-align: left;  word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}





/* ---------- 반응형 ---------- */    
    /* 1024이하 PC*/
    @media only screen and (max-width: 1280px) { 
        /* 메인이미지*/
        .mainVis {padding-top: 35px;}        

    }   

    /* 768이하 PC*/
    @media only screen and (max-width: 768px) {
    /* 공통*/
        .titleGr {padding: 42px 0 25px; margin-top: 60px;}
        .titleGr h3 {font-size: 36px;}
        .titleGr p {font-size: 17px;}
                
    /* 메인이미지*/        
    .mainVis {padding-top: 20px;} 
    .mainVis .slider-indicator {bottom: -45px;}

    /* 프로그램,아카이브 공통*/
    .commSwiper .swiper-button-prev:after,
    .commSwiper .swiper-button-next:after {width: 35px; height: 35px;}
    .commSwiper .swiper-button-prev:after {left: 0;}    
    .commSwiper .swiper-button-prev:before,
    .commSwiper .swiper-button-next:before {width: .7rem; height: .7rem; transform: translate(-35%, -50%) rotate(45deg);}

    /* 프로그램*/
    .program .titleGr {margin-top: 90px;}
    .program .commSwiper a,
    .archive .commSwiper a {width: 100% !important; max-width: 100%;}
    .program .commSwiper a figure,
    .archive .commSwiper a figure {max-height: auto;}

    }

    /* 640이하 PC*/
	@media only screen and (max-width: 640px) {
    /* 공통*/
        /* 더보기 버튼*/
        .moreBtn {padding-top: 65px;}        
        .moreBtn a {font-size: 16px; padding-right: 30px;}
        .moreBtn a:after {background-size: 20px;}       

    /* 메인이미지*/    
    .mainVis .swiper {height: 240px;}

	}

    /* 510이하 PC*/
	@media only screen and (max-width: 510px) {
    /* 공통*/
        .titleGr {gap: 8px; margin-top: 50px; padding: 35px 0 25px;}
        .titleGr h3 {font-size: 30px;}
        .titleGr p {font-size: 15px;}

    /* 메인이미지*/    
    .mainVis .swiper {height: 178px;}

    /* 프로그램,아카이브 공통*/
    .info {padding-top: 25px;}

    }