@charset "utf-8";

/*****************************************************
	Common
*****************************************************/
@media (min-width:576px) {}
@media (min-width:768px) {}
@media (min-width:992px) {}
@media (min-width:1200px) {}
@media (min-width:1400px) {}

html,
body {
    letter-spacing:-0.05em;    
}
body {
    margin:0;
}
p {
	line-height:1.6; 
}
ul {
	margin:0; 
}
button {
    border:none;
    background-color:transparent;
}
@media (min-width:1200px) {
    body {
        background-size:1725px auto;
    }
}
@media (min-width:1700px) {
    body {
        background-size:auto;
    }
}

/* 레이아웃 */
.layout {
    display:flex;
    align-items:center;
  }
  .layout.between {
      justify-content:space-between;
  }
  .layout.half .ly-item {
    -ms-flex:0 0 50%;
    flex:0 0 50%;
    max-width:50%;
  }
@media (min-width:1300px) {
    .container {
        max-width:1230px;
    }
}

/* 섹션 */
.sec-box {
    max-width:2000px;
    margin-left:auto;
    margin-right:auto;
}
.sec-title-1 {
    margin:0;
    font-size:20px;
    font-weight:500;
    color:#222;
    text-align:center;
}
@media (min-width:768px) {
    .sec-header {
        margin-bottom:20px;
    }
    .sec-title-1 {
        font-size:23px;
    }
}
@media (min-width:992px) {
    .sec {
        margin-bottom:0;
        height:100%;
    }
    .sec-header,
    .sec-body {
        padding:0;
    }
    .sec-header {
        margin-bottom:30px;
    }
    .sec-title-1 {
        font-size:27px;
    }
}

/* 기타 */
.table .list-style01 {
    margin-bottom: 0;
}
.list-style01.txt > li {
    background: none;
    position: relative;
}
.list-style01.txt > li::before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #fff;
    left: 1px;
    top: 9px;
}

.multi-row-ellipsis {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

/*****************************************************
	Include
*****************************************************/

/***** Header *****/
#header {
    background-color:#0051bc;
}
.header-container {
    position:relative;
}
#header .header-container .top-menu {
    font-size:0;
    text-align:center;
}

#header .header-container .top-menu ul {
    display: flex;
    justify-content: space-around;
    max-width: 600px;
    margin: 0 auto;
}

#header .header-container .top-menu li {
    flex: 0 0 25%;
}
#header .header-container .top-menu li a {
    display:block;
    color:#fff;
    padding:5px;
    font-size:16px;
    letter-spacing:-.075rem;
    word-break:keep-all;
}
#header .header-container .top-menu li a:hover,
#header .header-container .top-menu li a:focus {
    background-color:#053d83;
}
@media (min-width:360px) {
    #header .header-container .top-menu li a {
        padding:7px 5px;
    }
}
@media (min-width:576px) {
    #header .header-container .top-menu li a {
        padding:10px 5px;
    }
    .header-container::before {
        left:-10px;
    }
    .header-container::after {
        right:-10px;
    }
}
@media (min-width:768px) {
}
@media (min-width:992px) {
    #header .header-container .top-menu li a {
        font-size:17px;
    }
    #header .header-container .top-menu li a {
        padding:15px 5px;
    }
}
@media (min-width:1200px) {
    #header .header-container .top-menu li a {
        font-size:18px;
    }
}
@media (min-width:1300px) {
    #header .header-container .top-menu li a {
        font-size:19px;
    }
}

/* top sub */
/*.top-sub {
    margin-bottom:30px;
}*/
.top-sub-logo {
    width:calc(209px * 0.5);
}
.top-sub-banner {
    display:flex;
    flex-direction:column;
    align-items:center;
}
.top-sub-banner-img {
    width:calc(116px * 0.8);
    margin-right:0;
}
.top-sub-banner-text {
    display:inline-block;
    width:100%;
    font-size:16px;
    color:#555;
}
@media (min-width:450px) {
    .top-sub-banner {
        flex-direction:row;
    }
    .top-sub-banner-img {
        margin-right:7px;
    }
    .top-sub-banner-text {
        width:auto;
        font-size:18px;
    }
}
@media (min-width:500px) {
    .top-sub-logo {
        width:calc(209px * 0.6);
    }
}
@media (min-width:576px) {
    .top-sub-logo {
        width:calc(209px * 0.7);
    }
}
@media (min-width:768px) {
    .top-sub-logo {
        width:calc(209px * 0.8);
    }
}
@media (min-width:992px) {
    .top-sub-logo {
        width:calc(209px * 0.9);
    }    
}
@media (min-width:1200px) {
    .top-sub-logo {
        width:calc(209px * 1);
    }
    .top-sub-banner-img {
        width:calc(116px * 1);
    }
    .top-sub-banner-text {
        font-size:20px;
    }
}

/* top main */
.top-main {
    padding-bottom:10px;
}
.sec-title {
    text-align:center;
}
.top-main-logo {
    width:calc(538px * 0.45);
}
@media (min-width:576px) {
    .top-main-logo {
        width:calc(538px * 0.5);
    }
}
@media (min-width:768px) {
    .top-main {
        padding-bottom:20px;
        margin:-20px 0 0;
    }
    .top-main-logo {
        width:calc(538px * 0.6);
    }
}
@media (min-width:992px) {
    .top-main-logo {
        width:calc(538px * 0.8);
    }
}
@media (min-width:1024px) {
    .top-main {
        margin:-60px 0 0;
    }
}
@media (min-width:1200px) {
    .top-main-logo {
        width:calc(538px * 1);
    }
}


/***** Footer *****/

#footer {
    position:relative;
    margin:0 auto;
    padding:50px 10px 30px;
    background-color:#272b34;
}
.footer-address {
    color:#999;
    text-align:center;
}
.footer-address .footer-tel {
    color:#999;
}
.footer-copyright {
    color:rgba(153, 153, 153, 0.3);
    text-align:center;
}
#footer .sns-list {
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
}
#footer .sns-list > li {
    margin-right:10px;
}
#footer .sns-list a {    
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    border-radius:50%;
    background-color:pink;
}
#footer .sns-list .facebook a {
    background-color:#3045a0;
    transition:0.3s;
}
#footer .sns-list .facebook a:hover,
#footer .sns-list .facebook a:focus {
    background-color:	hsl(229, 54%, 31%);
}
#footer .sns-list .insta a {
    background:url(/site/resource/ansan/www/intro/images/insta-bg.png) no-repeat center;
}
#footer .sns-list .youtube a {
    background-color:#d2262b;
    transition:0.3s;
}
#footer .sns-list .youtube a:hover,
#footer .sns-list .youtube a:focus {
    background-color:hsl(358, 69%, 39%);
}
@media (min-width:992px) {
    .footer-address p {
        display:inline-block;
    }
    .footer-address .footer-tel-box {
        margin-left:10px;
    }
}

/*****************************************************
	Main
*****************************************************/

#main-visual {background:url(/site/resource/ansan/www/event/images/main-visual-bg.jpg) no-repeat bottom center;background-size:cover}
#main-visual .mv-box {text-align:center;padding:30px 0}
#main-visual .mv-box .main-logo {margin:0 0 10px; width: 50%;}
#main-visual .mv-box .tit {
    position:relative;
    color:#fff;
    padding:0 0 20px;
    font-size:35px;
    font-weight:bold;
    word-break: keep-all;
    letter-spacing:-.075rem;
    text-shadow: -2px -2px 0 #0072bc, 2px -2px 0 #0072bc, -2px 2px 0 #0072bc, 2px 2px 0 #0072bc, 4px 4px 0 #0072bc;
}
#main-visual .mv-box .tit span {display:block;font-size:25px;font-weight:500}
#main-visual .mv-box .mv-video {width:100%;max-width:854px;box-sizing:border-box;margin:0 auto}
#main-visual .mv-box .mv-video .mv-video-container {position:relative;width:100%;height:auto;padding-top:50%}
#main-visual .mv-box .mv-video .mv-video-container img {z-index:1;top:0;left:0;position:absolute;width:100%;height:100%}
#main-visual .mv-box .mv-video .mv-video-container iframe {z-index:1;top:0;left:0;position:absolute;width:100%;height:100%}
.sec-link {
    display: flex;
    max-width: 1200px;
    justify-content: space-around;
    margin: 0 auto;
    padding: 2rem 0;
    flex-wrap: wrap;
}
.sec-link a {
    text-align: center;
    margin-top: 10px;
    padding: 20px;
    width: 90%;
    border-radius: 50px;
    background-color: #333;
    color: #fff;
    font-size: 19px;
    transition: all .3s ease-out;
}
.sec-link a:hover, .sec-link a:focus {
    border-radius: 25px;
}
.sec-link a.facebook {
    margin-top: 0;
    background-color: #3045a0;
}
.sec-link a.facebook:hover, .sec-link a.facebook:focus {
    background-color: hsl(229, 54%, 31%);
}
.sec-link a.instagram {
    background: linear-gradient(45deg, #7951a0, #ee3061, #f09b32);
}
.sec-link a.youtube {
    background-color: #d2262b;
}
.sec-link a.youtube:hover, .sec-link a.youtube:focus {
    background-color: hsl(358, 69%, 39%);
}
.sec-link a span {
    position: relative;
    padding-left: 35px;
}
.sec-link a.facebook span {
    padding-left: 25px;
}
.sec-link a span::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-45%);
}
.sec-link a.facebook span::before {
    width: 14px;
    height: 23px;
    background: url(/site/resource/ansan/www/intro/images/facebook.png) no-repeat;
}
.sec-link a.instagram span::before {
    width: 23px;
    height: 23px;
    background: url(/site/resource/ansan/www/intro/images/insta.png) no-repeat;
}
.sec-link a.youtube span::before {
    width: 23px;
    height: 17px;
    background: url(/site/resource/ansan/www/intro/images/youtube.png) no-repeat;
}

.sec {padding:15px 0}
.sec-title {position:relative;padding:30px 0 0;font-size:27px;font-weight:bold;letter-spacing:-.075rem;margin:0 0 15px}
.sec-title:after {content:"";display:block;position:absolute;top:0;left:0;right:0;width:51px;height:26px;margin:0 auto;background:url(/site/resource/ansan/www/event/images/title-deco.png) no-repeat}
.sec-title span {border-bottom:1px solid #222;line-height:1.5;word-break:keep-all}
.sec-title.white {color:#fff}
.sec-title.white span {border-bottom:1px solid #fff}

.sec01-box-wr {position:relative;background-color:#00b1c3;padding:15px;overflow:hidden}
.sec01-box-wr:before {content:"";position:absolute;bottom:-100px;left:0;display:block;width:100%;height:300px;-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:skew(0, -5deg);-moz-transform:skew(0, -5deg);-ms-transform:skew(0, -5deg);
-o-transform:skew(0, 5deg);transform:skew(0, 5deg);background-color:#eee}
.sec01-box-wr .sec01-box {position:relative; padding:20px;background:#fff url(/site/resource/ansan/www/event/images/sec01-sbg.png) no-repeat center center/60%;z-index:1}
.sec01-box-wr .sec01-box ul {overflow:hidden}
.sec01-box-wr .sec01-box ul li {position:relative;font-size:14px;width:100%;margin-bottom:5px;letter-spacing:-.05rem}
.sec01-box-wr .sec01-box ul.list-style02 li {font-size: 17px;}
.sec01-box-wr .sec01-box ul li .w100 {width:100% !important}
.sec01-box-wr .sec01-box ul li .title .num {color:#0051bc;font-style:normal;margin-right:20px}
.sec01-box-wr .sec01-box ul li .line {height:11px;display:inline-block;border-bottom:dotted 1px #ccc;}
.sec01-box-wr .sec01-box ul li .txt {text-align:right;color:#666}
.sec01-box-wr .sec01-box ul li .point {color:#0051bc;font-weight:bold;text-align:center;display:block;font-size:13px;font-style:normal;}
.sec01-box-wr .sec01-box .info-txt {font-size:14px}
.sec01-box-wr .sec01-box .btxt {color:#222;font-weight:600;font-size: 20px}

.sec02 {background:#eff2f8 url(/site/resource/ansan/www/event/images/sec02-bg.png) no-repeat bottom center;background-size:cover;padding:10px 0 20px}
.sec02 .con-box {margin-top:15px;overflow:hidden; overflow-y:scroll;padding:30px;border:1px solid #ccc;background:#fff;max-height:280px}
.sec02 .nav-tabs {border:none;font-size:0}
.sec02 .nav-tabs .nav-item {position:relative;width:49%;text-align:center;font-size:17px;letter-spacing:-.05rem}
.sec02 .nav-tabs .nav-item:before {content:"";display:block;position:absolute;right:-3px;top:50%;width:5px;height:5px;border-radius:50%;background-color:#ccc}
.sec02 .nav-tabs .nav-item:nth-child(2):before,
.sec02 .nav-tabs .nav-item:nth-child(4):before,
.sec02 .nav-tabs .nav-item:last-child:before {display:none}
.sec02 .nav-tabs .nav-link {position:relative;border:none; background-color:transparent;color:#222;margin:0;padding:10px 0 5px}
.sec02 .nav-tabs .nav-link.active, 
.sec02 .nav-tabs .nav-item.show .nav-link {background-color:transparent;border:none;color:#0051bc}
.sec02 .nav-tabs .nav-link:hover, 
.sec02 .nav-tabs .nav-link:focus {text-decoration:none}
.sec02 .nav-tabs .nav-link.active::before, 
.sec02 .nav-tabs .nav-item.show .nav-link::before {content:"";display:block;position:absolute;top:0;left:0;right:0;width:27px;height:13px;margin:0 auto;background:url(/site/resource/ansan/www/event/images/sec02-tab-nav.png) no-repeat}
.sec02 .con-box .sign-wr span {display:block}
.sec02 .con-box .sign-wr .date {font-size:14px;color:#555}
.sec02 .con-box .sign-wr .sign {font-size:15px;color:#222}
.sec02 .con-box .sign-wr .sign em {font-style: normal;font-size:18px;font-weight: bold}

.sec03 {background-color:#2394e2}
.sec03 .tit-h3 {color:#fff;font-size:20px}
.sec03 p {text-align: center;}
.sec03 .btxt {font-size:23px;font-weight: 600;line-height:1.3;color:#fff}
.sec03 .stxt {font-size:15px;color:rgba(255,255,255,0.7);margin:0 0 10px;letter-spacing:-.05rem;line-height:1.5}
.sec03 table tbody tr td {background-color:#fff}
.sec03 .txt {color:#fff;font-size:14px}

.sec03 .sec-title:after {
    background: url(/site/resource/ansan/www/event/images/title-deco-w.png) no-repeat;
}
.sec03 .tit-h3 {
    background: url(/site/resource/ansan/common/images/bullet06.png) no-repeat left top;
}

.sec04 {margin:0 0 20px}
.sec04 a {display:block}
.sec04 a .box {position:relative;padding:20px 110px 20px 20px;color:#fff;min-height:120px}
.sec04 a .info-box {background-color:#00b1c3;transition:all .3s ease}
.sec04 a:hover .info-box,
.sec04 a:focus .info-box  {background-color:hsl(186, 100%, 33%)}
.sec04 a .enter-box {background-color:#fb8007;transition:all .3s ease}
.sec04 a:hover .enter-box,
.sec04 a:focus .enter-box {background-color:hsl(30, 97%, 46%)}
.sec04 a .box .txt-box {margin:10px 0 0}
.sec04 a .box .txt-box .tit {font-size:18px}
.sec04 a .box .txt-box .txt {font-size:15px;color:rgba(255,255,255,0.7)}
.sec04 a .box .icon {position:absolute;width:84px;height:84px;right:20px;top:20px}
.sec04 a .box .icon img {max-width:100%}

@media (min-width:399px) {
    .sec01-box-wr .sec01-box ul li .point {position:absolute;height:18px;left:0;right:0;top:0;bottom:0;margin:auto;}
}
@media (min-width:450px) {

}
@media (min-width:576px) {
    .sec {padding:30px 0}
    .sec01-box-wr {padding:20px}
    .sec01-box-wr .sec01-box ul  li {font-size:15px}
    .sec01-box-wr .sec01-box ul  li .point{font-size: 14px}
    .sec01-box-wr .sec01-box .btxt {font-size: 25px}
}
@media (min-width:768px) {
    #main-visual .mv-box .tit::before {
        content: '';
        display: block;
        position: absolute;
        width: 72px;
        height: 145px;
        top: -130%;
        left: 6%;
        background:url(/site/resource/ansan/www/event/images/main-tit-left.png) no-repeat;
        background-size: 80%;
    }
    #main-visual .mv-box .tit::after {
        content: '';
        display: block;
        position: absolute;
        width: 72px;
        height: 145px;
        top: -130%;
        right: 4%;
        background:url(/site/resource/ansan/www/event/images/main-tit-right.png) no-repeat;
        background-size: 80%;
    }
    #main-visual .mv-box .main-logo {
        width: 35%;
    }
    #main-visual .mv-box {padding:50px 0}

    .sec-link {
        flex-wrap: nowrap;
    }
    .sec-link a {
        width: 30%;
        margin-top: 0;
    }
    .sec-title {font-size:35px}
    .sec01-box-wr .sec01-box {background-size:40% auto}
    .sec01-box-wr .sec01-box ul  li .line,
    .sec01-box-wr .sec01-box ul  li .point {height:18px}
    .sec01-box-wr .sec01-box .info-txt {font-size:15px}
    .sec02 .con-box .sign-wr .date {font-size:15px}
    .sec02 .con-box .sign-wr .sign {font-size:16px}
    .sec02 .con-box .sign-wr .sign em {font-size:20px}

    .sec02 .nav-tabs .nav-item {width:24.5%}
    /* .sec02 .nav-tabs .nav-item:nth-child(2):before,
    .sec02 .nav-tabs .nav-item:nth-child(4):before {display:block} */
    .sec02 .nav-tabs .nav-item:nth-child(2):before {display: block;}
    .sec02 .nav-tabs .nav-item:nth-child(4):before {display: none}

    .sec03 .tit-h3 {font-size:23px}
    .sec03 .btxt {font-size:25px}
    .sec03 .stxt {font-size:17px;margin:0 0 20px}
    .sec03 .txt {font-size:15px}

    .sec04 a .box .txt-box .tit {font-size:20px}
    .sec04 a .box .txt-box .txt {font-size:17px}
}
@media (min-width:992px) {
    #main-visual .mv-box .tit::before {
        top: -100%;
        left: 2%;
        background-size: 100%;
    }
    #main-visual .mv-box .tit::after {
        top: -100%;
        right: 2%;
        background-size: 100%;
    }
    #main-visual .mv-box .main-logo {
        width: auto;
    }
    #main-visual .mv-box {padding:80px 0}
    #main-visual .mv-box .tit {font-size:55px}
    #main-visual .mv-box .tit span {font-size:35px}

    .sec {padding:50px 0}

    .sec-title {padding:30px 0 0;font-size:40px;margin:0 0 30px}
    .sec01-box-wr {
        padding:30px;
        background:#fff url(/site/resource/ansan/www/event/images/sec01-bg.png) no-repeat center/100% 100%;
    }
    .sec01-box-wr::before {
        display: none;
    }
    .sec01-box-wr .sec01-box {
        padding:30px;
        background: transparent url(/site/resource/ansan/www/event/images/sec01-sbg.png) no-repeat center 140px;
    }
    .sec01-box-wr .sec01-box ul li {font-size:17px}
    .sec01-box-wr .sec01-box ul li .point{font-size: 15px}
    .sec01-box-wr .sec01-box .info-txt {font-size:16px}
    .sec01-box-wr .sec01-box .btxt {font-size: 25px}

    .sec02 {padding:20px 0 50px}
    .sec02 .con-box {margin-top:20px;max-height:580px}
    .sec02 .con-box .sign-wr .date {font-size:16px}
    .sec02 .con-box .sign-wr .sign {font-size:17px}
    .sec02 .con-box .sign-wr .sign em {font-size:23px}

    .sec03 .tit-h3 {font-size:25px}
    .sec03 .btxt {font-size:27px}
    .sec03 .stxt {font-size:18px}
    .sec03 .txt {font-size:16px}

    .sec04 a .box {padding:30px 200px 30px 50px;min-height:180px}
    .sec04 a .box .txt-box {position:absolute;width:100%;top:50%;transform:translateY(-50%);-ms-transform: translateY(-50%);}
    .sec04 a .box .txt-box .tit {font-size:25px;display:inline-block;float:left;margin: 0 15px 0 0}
    .sec04 a .box .txt-box .txt {font-size:20px}
    .sec04 a .box .icon {width:120px;height:120px;right:50px;top:30px}
}
@media (min-width:1200px) {
    #main-visual .mv-box .tit::before {
        left: 10%;
    }
    #main-visual .mv-box .tit::after {
        right: 10%;
    }
    .sec01-box-wr .sec01-box {padding:30px 70px}
    .sec01-box-wr .sec01-box ul  li {font-size:21px}

    .sec02 .nav-tabs .nav-item {font-size:23px}
}

@media (min-width:1300px) {
    #main-visual .mv-box .tit::before {
        left: 12%;
    }
    #main-visual .mv-box .tit::after {
        right: 12%;
    }
}