@charset "utf-8";

main{}
/* 메인 비주얼 */
main .main-visual{padding-top: 14rem; padding-bottom: 8rem;}
main .main-visual .main-visual-area{height: 54rem;}
main .main-visual div.box{width: 47%; transition: all 0.2s;}
main .main-visual div.box a{display: block; width: 100%;}
main .main-visual div.box div.img-box{border-radius:3rem; background-color: #f5f5f5; border: 0.1rem solid #ddd;}
main .main-visual div.box.bg1 div.img-box{background-image: url("./img/img-main01.png"); background-position: center center; background-repeat: no-repeat;}
main .main-visual div.box.bg2 div.img-box{background-image: url("./img/img-main02.png"); background-position: center center; background-repeat: no-repeat;}
main .main-visual div.box div.img-box img{border: 0;}
main .main-visual div.box div.txt-box{padding: 2.5rem 3rem; box-sizing: border-box;}
main .main-visual div.box div.txt-box p span{display: block; font-size: 1.6rem; color: #999; font-weight: 800; margin-bottom: 1rem;}
main .main-visual div.box div.txt-box p:first-child{font-size: 2.6rem; font-weight:800 }
main .main-visual div.box div.txt-box p.txt{display: none; font-size: 1.8rem; padding: 2rem 0 3rem; line-height: 1.5;}
main .main-visual div.box div.txt-box .btn{display: none}

main .main-visual div.box.on{margin-top: -5rem;}
main .main-visual div.box.on div.txt-box p.txt{display: block}
main .main-visual div.box.on div.txt-box .btn{display: block}

main .main-visual div.box.bg1.on p:first-child{color: #d6197d;}
main .main-visual div.box.bg1.on div.img-box{background: url("./img/img-main01-c.png") center center no-repeat}
main .main-visual div.box.bg2.on p:first-child{color: #4f268c;}
main .main-visual div.box.bg2.on div.img-box{background: url("./img/img-main02-c.png") center center no-repeat}

main .main-visual div.box.bg2 .btn{color: #4f268c; border-color:#4f268c;}
main .main-visual div.box.bg2 .btn:hover{background-color:#4f268c; color: #fff;}

    /* 메인 셕센 공용 스타일 */
main .section{padding-top:13rem; padding-bottom:10rem; }
main .section p.sec-tit{font-size: 2.8rem; font-weight: 800; margin-bottom: 4rem;}
main .btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 26rem;
    height: 5rem;
    line-height: 5rem;
    padding: 0 2rem;
    border-radius: 0.9rem;
    background-color:#fff;
    color: #d6197d;
    border-color:#d6197d;
}
main .btn:hover{background-color:#d6197d; color: #fff;}

main .section .btn-area{margin-top: 2rem;}

/* 프로그램 리스트 영역 */
main .section.program{background: #f5f5f5;}
main .program-list{}

/* 공지사항 리스트 영역 */
main .section.notice div.gallery-list > div div.img-box{ aspect-ratio: 1 / 1.414;}

/* sub */
#information{position: relative;}
#information #sub-top{position: absolute; left: 50%; top: 28rem; transform: translateX(-50%); color: #fff; }
#information div.sub-img{width: 100%; height: 25rem; border-radius: 0.9rem; overflow: hidden; margin-bottom: 5rem;}
#information > div.txt-box{}
#information > div.txt-box p{text-align: center; font-size: 2.2rem; line-height: 1.6; margin-bottom: 2rem;}
#information > div.txt-box span{display: block; width: 12rem; height: 0.3rem; background: #222; margin: 5rem auto}

#location{}
#location div.box{width:100%; box-sizing:border-box; }
#location div.box div.txt-area{width:100%; padding-bottom:5%; margin-bottom:5%; border-bottom:0.1rem solid #ddd; box-sizing:border-box;}
#location div.box div.txt-area dl{display:flex; margin-bottom:2rem; font-size: 2rem;}
#location div.box div.txt-area dl:last-child{margin-bottom: 0}
#location div.box div.txt-area dl dt{width:10%;margin-right:2rem; color: #999}
#location div.box div.txt-area dl dd{}
#location div.box div.txt-area dl dd div.icon-box{width:5rem; height:5rem; margin-right:2rem; margin-top:1rem;}
#location div.box div.txt-area dl dd div.icon-box a{display:block; width:100%; height:5rem; border-radius:0.9rem; overflow:hidden; border:0.1rem solid #ddd; box-sizing:border-box;}
#location div.box div.txt-area dl dd div.icon-box a img{width:100%;}
#location div.box div.map-area{width:100%;}
#location div.flex.link-area{display:flex; flex-wrap:unset; border:0; padding:0; border-radius:0; box-shadow: unset;}

#guide{}
#guide div.icon-area div.flex div.box{width: 30%; margin-right: 5%; margin-bottom: 5%;}
#guide div.icon-area div.flex div.box:nth-child(3n){margin-right: 0;}
#guide div.icon-area div.flex div.box div.icon-box{width: 8rem; height: 8rem; margin: 0 auto 1rem; background: url("./img/icon-guide.png")  0 center no-repeat;}
#guide div.icon-area div.flex div.box:nth-child(2) div.icon-box{background-position: 20% center;}
#guide div.icon-area div.flex div.box:nth-child(3) div.icon-box{background-position: 40.5% center;}
#guide div.icon-area div.flex div.box:nth-child(4) div.icon-box{background-position: 59% center;}
#guide div.icon-area div.flex div.box:nth-child(5) div.icon-box{background-position: 79% center;}
#guide div.icon-area div.flex div.box:last-child div.icon-box{background-position: 100% center;}
#guide div.icon-area div.flex div.box p{text-align: center; font-size: 1.6rem;}
#guide div.icon-area div.flex div.box p span{display: block; font-weight: 800; color: #666; margin-bottom: 0.5rem; font-size: 1.6rem;}
#guide div.icon-area div.flex div.box p.tit{font-size: 2rem; margin-bottom: 1rem;}
#guide div.btn-area{margin-top: 6rem;}
#guide div.btn-area a{display: block; margin: 0 auto; width: min(100%, 50rem); padding: 15px 0}

@media screen and (max-width:1279px){
    /* 노트북 */

    .root_daum_roughmap_landing{width: 100% !important;}

}

@media screen and (max-width:1203px){
    /* wide tablet (breakpoint : 1023px) */

    main .main-visual{padding-top: 5rem;}
    main .main-visual div.box.on{margin-top: 0;}

    main .main-visual div.box div.txt-box{}
    main .main-visual div.box div.txt-box p br{display: none}
    main .main-visual div.box div.txt-box p.txt{display: block;}
    main .main-visual div.box div.txt-box .btn{display: block}

    main .main-visual div.box.bg1 p:first-child{color: #d6197d;}
    main .main-visual div.box.bg1 div.img-box{background: url("./img/img-main01-c.png") center center no-repeat}
    main .main-visual div.box.bg2 p:first-child{color: #4f268c;}
    main .main-visual div.box.bg2 div.img-box{background: url("./img/img-main02-c.png") center center no-repeat}

    #guide{}
    #guide div.icon-area div.flex div.box{width: 50%; margin-right: 0%; margin-bottom: 5%;}
    #guide div.icon-area div.flex div.box p.tit{font-size: 1.8rem; }
    #guide div.btn-area{margin-top: 6rem;}

}

@media screen and (max-width:839px){

    main .main-visual .main-visual-area{height: auto}
    main .main-visual div.box div.txt-box p.txt{font-size: 1.6rem;}

    main .main-visual div.box.bg1 div.img-box,
    main .main-visual div.box.bg1.on div.img-box,
    main .main-visual div.box.bg2 div.img-box{background-size: cover}

    .program .gallery-list.col5 > div{width: calc(92% /3); margin-right: 4%;}
    .program .gallery-list.col5 > div:nth-child(5n){margin-right: 4%;}
    .program .gallery-list.col5 > div:nth-child(3n){margin-right: 0}


    #location div.box div.txt-area dl dt{width: 100%; font-size: 1.6rem; margin-bottom: 0.5rem;}

    #guide div.icon-area div.flex div.box{padding: 0 1rem; box-sizing: border-box;}
    #guide div.icon-area div.flex div.box div.icon-box{width: 6rem; height: 6rem; background-size: cover}
    #guide div.icon-area div.flex div.box p br{display: none;}
    #guide div.icon-area div.flex div.box p,
    #guide div.icon-area div.flex div.box p span{font-size: 1.4rem;}
    #guide div.icon-area div.flex div.box p.tit{font-size: 1.6rem;}


}

@media screen and (max-width:599px){
    /* mobile (breakpoint : 599px) 599px ~ 280px */

    main .btn{width: 100%;}
    main .main-visual .main-visual-area{display: block}
    main .main-visual div.box{width: 100%;}
    main .main-visual div.box div.txt-box{padding: 1.5rem 0;}

    div.gallery-list > div div.txt-box p.tit{font-size: 1.6rem;}

    .program .gallery-list p.list-dot:before{display: none}
    .program .gallery-list p.list-dot{padding-left: 0;}

    .program .gallery-list.col5 > div,
    .program .gallery-list.col5 > div:nth-child(3n),
    .notice .gallery-list.col4 > div{width: calc(96% /2); margin-right: 4%;}
    .program .gallery-list.col5 > div:nth-child(2n),
    .notice .gallery-list.col4 > div:nth-child(2n){margin-right: 0;}


    /* 소개 */
    #information div.sub-img{height: 20rem; display: flex;justify-content: center;}
    #information div.sub-img img{height: 100%;}
    #information > div.txt-box p,
    #information > div.icon-area p.txt{font-size: 1.8rem; text-align: left}
    #information > div.txt-box p br{display: none}
    #information > div.icon-area div.flex{flex-wrap: wrap; justify-content: center}
    #information > div.icon-area div.flex div.box{width: calc(100% / 3); margin-top: 3rem;}
    #information > div.icon-area div.flex div.box div.icon-box{ width: 9rem;  height: 6rem;}

    /* 오시는길 */
    #location div.box div.txt-area dl{display: block}
    #location div.box div.txt-area dl dt{font-size: 1.4rem;}
    #location div.box div.txt-area dl dd{width: 100%; font-size: 1.6rem;}

}

@media screen and (max-width:300px) {
    /* mobile ~ 280px */

}