@charset "UTF-8";
#main-visual {height:630px; position:relative}
#main-visual .swiper-slide {background-size:cover; background-repeat:no-repeat; background-position:center; position:relative}
/*#main-visual .swiper-slide::after {position:absolute; left:0;bottom:0;width:100%;height:100%;background: linear-gradient(to top,rgba(27,41,69,0.6), rgba(0,0,0,0)); content:''; z-index:-1}*/
#main-visual .swiper-slide .text-box {margin-top:7rem; position:relative; z-index:9;}
#main-visual .swiper-slide .text-box .title {font-size:40px; color:#fff; font-weight:600; text-shadow:2px 2px 5px black; line-height:1.2}
#main-visual .swiper-slide .text-box .btn {margin-top:3rem;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.main-visual-dots {bottom:2rem !important; position:absolute; z-index:99; transform:translateX(-50%); left:50% !important; display:flex; gap:0px; width:1200px !important}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {flex:1; border-radius:0; height:4px; cursor:pointer}
.swiper-pagination-bullet-active {background:#fff !important;}

/* 퀵메뉴 */
.quick-menu {background:#A52576}
.quick-menu ul {display:flex; justify-content:space-between; align-items:center}
.quick-menu ul li {}
.quick-menu ul li a {text-align:center; transition:0.15s ease; top:0;position:relative; padding:20px}
.quick-menu ul li a:hover { top:-6px}
.quick-menu ul li a p {margin-top:10px; color:#fff}

/* cont01 */
.main-cont01 {background-image:url(/asea_int/design/image/main-cont01.png); background-size:cover;background-repeat:no-repeat; padding:5rem 0;position:relative}
.main-cont01:after {position:absolute; left:0;bottom:0;width:100%;height:100%;background: rgba(27, 41, 69, 0.8); content:'';}
.main-cont01 .inner {position:relative; z-index:9}
.main-cont01 .cont:first-child {margin-bottom:2rem}
.main-cont01 .cont+.cont {padding-top:2rem; border-top:1px solid rgba(255,255,255,0.5)}
.main-cont01 .cont .title {font-size:2em; font-weight:bold; color:#fff}
.main-cont01 .cont .desc {color:rgba(255,255,255,0.7); margin-top:1rem; font-size:1.4em}

/* cont02 */
.main-cont02 {margin:7rem 0}
.main-cont02 .inner {display:flex; gap:3em}
.main-cont02 .inner >div {width:calc(50% - 1.5em)}
.main-cont02 .inner >div .title-wrap {border-bottom:1px solid #ddd; padding-bottom:1rem; position:relative; display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem}
.main-cont02 .inner >div .title-wrap .title {font-size:1.25em; font-weight:bold; padding-left:1rem; display:inline; text-decoration:underline;text-underline-offset:1.55rem}
.main-cont02 .inner >div .title-wrap a {position:relative; width:26px; height:26px;border-radius:100%; border: 1px solid transparent; transition:0.15s ease}
.main-cont02 .inner >div .title-wrap a:after {position:absolute; width:100%; height:2px; left:50%; top:50%;transform:translate(-50%,-50%); background:#666; content:''; transition:0.15s ease}
.main-cont02 .inner >div .title-wrap a:before {position:absolute; width:2px; height:100%; left:50%; top:50%;transform:translate(-50%,-50%); background:#666; content:''; transition:0.15s ease}
.main-cont02 .inner >div .title-wrap a:hover:after {width:50%; transition:0.15s ease}
.main-cont02 .inner >div .title-wrap a:hover:before {height:50%; transition:0.15s ease}
.main-cont02 .inner >div .title-wrap a:hover {border-color:#ddd; transition:0.15s ease}
.main-cont02 .notice-wrap ul li a {padding:10px 0; display:flex; justify-content:space-between; align-items:center}
.main-cont02 .notice-wrap ul li a .date {font-size:14px; color:#767676; width:100px; text-align:right;}
.main-cont02 .notice-wrap ul li a:hover {background:#f7f7f7}
.main-cont02 .notice-wrap ul li a p { text-overflow: ellipsis;white-space: nowrap;overflow: hidden; width:calc(100% - 100px)}
.main-cont02 .video-wrap {border:1px solid #ddd; position:relative}
.main-cont02 .video-wrap .swiper-slide a{display:flex; background:#fff;}
.main-cont02 .video-wrap .swiper-slide .video-box {width:400px; position:relative;aspect-ratio: 16 / 9; overflow:hidden}
.main-cont02 .video-wrap .swiper-slide .video-box iframe, .main-cont02 .video-wrap .swiper-slide .video-box img {position:absolute; left:0; top:0; object-fit:cover; width:100%;height:100%;}
.main-cont02 .video-wrap .swiper-slide .text-box {width:calc(100% - 400px); padding:2rem 1rem;}
.main-cont02 .video-wrap .swiper-slide .text-box .title {position:relative; font-size:1.125em; font-weight:bold; display:inline; /*box-shadow:inset 0 -12px 0 #ffe4d1*/}
.main-cont02 .video-wrap .swiper-slide .text-box .desc {margin-top:16px; color:#767676;}
.main-cont02 .video-wrap .swiper-slide .text-box .title, .main-cont02 .video-wrap .swiper-slide .text-box .desc {display: -webkit-box;-webkit-line-clamp: 2; /* 최대 줄 수 */-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.main-cont02 .video-wrap .swiper-dots {display:flex;position:absolute; right:1rem !important; bottom:1rem !important; left:auto !important; width:auto !important; z-index:99;}
.main-cont02 .video-wrap .swiper-dots .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.main-cont02 .video-wrap .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {border-radius:100%; width:10px; height:10px; background:#ddd; opacity:1}
.main-cont02 .video-wrap .swiper-dots .swiper-pagination-bullet-active {background:#A52576 !important;}


/* 상단 팝업존 */
.wrapper {width: 94%;max-width: 1200px;margin-right: auto;margin-left: auto;}
#hdPopup {overflow: hidden;background: #3e3e3e url('/grad/design/images/mainpage/bg_pattern1.png');text-align:center;}
#hdPopup.animate {transition: height 0.5s linear}
#hdPopup.none {height: 0 !important;}
.hd_popup {overflow: hidden;}
.hd_popup li {width: 50%;float: left;text-align:center;color:white;/*height:100px;border:1px solid white;*/}
.hd_popup li img {/* width: 575px;  */max-width:575px;}
#hdPopup .wrapper {padding:15px 0;}
#hdPopup .col-3 {text-align: center; margin-top: 3%;}
#hdPopup .pop_tit {font-size: 18px;}
#hdPopup .pop_tit small {font-size: 14px;display: block;}
#hdPopup .pop01 .pop_tit, #hdPopup .pop01 .date {color: #fbe4c1;}
#hdPopup .pop02 .pop_tit, #hdPopup .pop02 .date {color: #87d5dc;}
#hdPopup .pop_con {font-size: 14px; color: #fff;}
#hdPopup .date {font-size: 14px;}
#hdPopup .closebox {color: #fff; font-size: 14px; font-weight: 300;position: relative; left: 0; top: 7px;text-align: right;}
#hdPopup .closebox .btn_close {vertical-align: middle;cursor: pointer;}
#hdPopup .closebox form label:after {content: ''; width: 10px; height: 10px; border: 1px solid #959595; vertical-align: middle; display: inline-block; margin: 0 5px;}
#hdPopup .closebox form label.on:after {background: url('/grad/design/images/mainpage/i_next.png') no-repeat center; transform: rotate(90deg); background-size: contain;}
#hdPopup .closebox input[type="checkbox"] {display: none;vertical-align: middle; background: #282828; border: 1px solid #d7d7d7;}
#hdPopup .bx-pager > div, #hdPopup .bx-controls-auto > div {float: left;}
#hdPopup .bx-controls {display: inline-block; position: absolute; left: 0; bottom:-27px; z-index: 900;}
#hdPopup .bx-controls-auto {position: absolute; left: 0; bottom: 0; }
#hdPopup .bx-controls-auto .bx-start {display: none !important; background: url('/grad/design/images/mainpage/i_play.png') no-repeat center; width: 11px; height: 14px; text-indent: -9999px; display: inline-block; margin: 0 2px;}
#hdPopup .bx-controls-auto .bx-stop {background: url('/grad/design/images/mainpage/i_pause.png') no-repeat center; width: 12px; height: 14px; text-indent: -9999px; display: block; margin: 0 2px; vertical-align: middle; background-size: 85%; } 
#hdPopup .bx-pager {min-width:50px; width:200px; position: absolute; left: 20px; bottom: 0;}
#hdPopup .bx-pager a {width: 12px; height: 12px; margin: 1px 3px 0;background: #9e9891; border-radius: 50%; text-indent: -9999px; }
#hdPopup .bx-pager a.active {background: #fff;}
#hdPopup .bx-prev {margin-left: 10px;transform:rotate(-45deg);}
#hdPopup .bx-next {transform:rotate(135deg);}
#hdPopup .bx-pager .bx-pager-item {padding: 0 1px;}
.sub #hdPopup .row {margin-top: 0 !important; margin-bottom: 0 !important;}
.sub #hdPopup .txt-center {text-align: left !important;}
