@charset "utf-8";
/*
메인페이지
메인페이지가 들어가는 Main.cshtml에 링크 삽입
*/
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#wrapper::-webkit-scrollbar { display: none;}

#wrapper > footer {margin-top:0;}

#main-popup {position:fixed; inset:75px auto auto 50%; z-index:100; width:403px; height:481px; margin-left:-201.5px; background-color:#fff; box-shadow:2px 0 8px 4px rgba(0,0,0,0.16);}
#main-popup > .main-popup-close {position:absolute; inset: 18px 18px auto auto; width:18px; height:18px; background-image:url(/images/main/ic_close_black.svg); background-repeat:no-repeat; background-size:contain;}
#main-popup > img {width:100%;}
#main-popup > .main-popup-remove {position:absolute; right: 18px; bottom :20px; line-height: 20px; font-size: 16px;}

.swiper-main {width:100vw; height:122.727vw;}
.swiper-slide {background-repeat:no-repeat; background-position:center center; background-size:cover;}
.swiper-slide > progress {position:absolute; bottom:0; left:0; width:100%; height:5px; -webkit-appearance: none;}
.swiper-slide > progress::-webkit-progress-bar {background-color:transparent;}
.swiper-slide > progress::-webkit-progress-value {background-color:#a72429;}
.swiper-slide > video {width:100%;}
.main-slide-text {position:absolute; top:61.5vw; left:0; width:80%; margin-top:-100px; margin-left:10%; text-align:center;}
.main-slide-title {line-height:4rem; font-size:3.6rem; color:#fff;}
.main-slide-content {margin:30px 0 36px; line-height:2.7rem; font-size:1.6rem; font-weight:500; color:#fff; word-break:keep-all;}
.main-slide-link {display:block; width:138px; margin:0 auto; padding:10px 0; border:2px solid #fff; text-align:center; line-height:18px; font-size:16px; font-weight:500; color:#fff; cursor:pointer;}
.swiper-button {display:flex; justify-content:center; position:absolute; z-index:10; right:0; bottom:33px; left:0; height:24px;}
.swiper-pagination.swiper-pagination-main {display:flex; align-items:center; position:static; width:auto; margin-right:1px;}
.swiper-pagination-main > .swiper-pagination-bullet {width:7px; height:7px; background-color:transparent; border:1.5px solid #fff; opacity:1;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 11px 0 0;}
.swiper-pagination-main > .swiper-pagination-bullet-active {width:7px; background-color:#a72429; border:1.5px solid #a72429;}
.swiper-operater > button {width:39px; height:24px; background-repeat:no-repeat; background-position:center center; background-size:19px; border-radius:12px;}
.swiper-operater > .slide-icon-stop {background-color:#777;}
.swiper-operater > .slide-icon-start {background-color:#a72429;}

main > section#main-board {padding:8px 15px 26px;}
#main-board > article {display:flex; flex-wrap:wrap; justify-content:space-between; padding:29px 0; border-bottom:1px solid #ebebeb;}
#main-board > article:last-child {border-bottom:none;}
#main-board > article > h4 {width:20%; line-height:2.6rem; font-size:1.8rem; color:#000;}
.main-board-news {row-gap:16px;}
.main-board-news > .main-board-content {display:block; width:100%;}
.main-board-news > .main-board-content > div:first-child {margin-bottom:12px; line-height:2.6rem; font-size:1.6rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-board-news > .main-board-content > div:last-child {height:5.2rem; line-height:2.6rem; font-size:1.6rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-board-vision > .main-board-content {display:grid; grid-template-columns:1fr 28px; max-width:70%;}
.main-board-vision > .main-board-content > div:first-child {margin-bottom:6px; line-height:2.6rem; font-size:1.6rem; font-weight:500;}
.main-board-vision > .main-board-content > div:nth-child(2) {grid-row-start: span 2; background-image:url('/images/main/icon-go.svg'); background-repeat:no-repeat; background-position:right center; background-size:20px;}
.main-board-vision > .main-board-content > div:last-child {line-height:2.6rem; font-size:1.6rem;}
.main-board-schedule > h4,
.main-board-paper > h4 {min-width:40%;}
article > ul.main-board-content {width:100%; margin:16px 0 0;}
article > ul.main-board-content > li {display:flex; justify-content:space-between; align-items:center; margin-bottom:17px;}
article > ul.main-board-content > li:last-child {margin-bottom:0;}
article > ul.main-board-content > li > div {line-height:2.6rem; font-size:1.6rem;}
article > ul.main-board-content > li > div:first-child {width:70%; color:#000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
article > ul.main-board-content > li.main-baord-content-empty > div:first-child {width:100%;}
article > ul.main-board-content > li.main-baord-content-empty > div:last-child {width:0;}
article > ul.main-board-content > li > div:last-child {width:30%; text-align:right; word-break:break-all;}
.main-board-link {display:block; align-items:center; height:2rem; line-height:2.6rem; font-size:1.6rem;}
.main-board-link > span {font-weight:500; color:#000;}
.main-board-link > div {width:20px; height:20px;}

#main-business-mb {margin-bottom:70px;}
.swiper-business {width:100%; height:82vw; max-height:390px; min-height:290px;}
.swiper-business .swiper-slide {position:relative; width:90%; max-width:430px; min-width:320px; height:82vw; max-height:390px; min-height:290px; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.swiper-business .swiper-slide > div {position:absolute; z-index:1; bottom:50px; right:0; left:0; padding-left:15px; background-color:rgba(0,0,0,.4); line-height:4.6rem; font-size:1.8rem; font-weight:500; color:#fff;}
.swiper-pagination.swiper-pagination-business {bottom:0; padding-top:26px; background-color:#fff;}
.swiper-pagination-business > .swiper-pagination-bullet {width:10px; height:10px; background-color:#b7b7b7;}
.swiper-pagination-business > .swiper-pagination-bullet-active {background-color:#a72429;}

main > section#main-video {background-color:#f3f3f3;}
#main-video > .main-video-box {margin:0 auto; padding:40px 15px 60px;}
#main-video > .main-video-box > .main-video-header > .main-video-title {line-height:3.6rem; font-size:3rem; font-weight:500; color:#000;}
#main-video > .main-video-box > .main-video-header > .main-video-text {margin:7px 0 20px; line-height:2.2rem; font-size:1.6rem; color:#000; word-break:keep-all;}
#main-video > .main-video-box > .main-video-tube {position:relative; width:100%; padding-bottom:56.25%;}
#main-video > .main-video-box > .main-video-tube > div {position:absolute; top:0; right:0; bottom:0; left:0;}
.main-video-list {margin-top:13px; padding-bottom:2px;}
.main-video-list > .main-video-list-box::before {display:block; content:""; height:2px; background-color:#b7b7b7;}
.main-video-list > .main-video-list-box:first-child::before {background-color:#000;}
.main-video-list > .main-video-list-box > button {display:block; position:relative; width:100%; padding:20px; background-color:transparent; text-align:left; line-height:2.5rem; font-size:1.6rem; color:#4c4a4a; cursor:pointer;}
.main-video-list > .main-video-list-box.list-active > button {font-weight:500; color:#000; -ms-user-select: none;  -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;}
.main-video-list > .main-video-list-box.list-active > button::before {display:block; content:""; position:absolute; top:-2px; right:0; bottom:-2px; left:0; border:2px solid #a72429; font-weight:500;}

/* main > section#main-icon {padding:0 15px;}
#main-icon > figure {display:flex; justify-content:flex-start; align-items:center; padding:20px 0; border-bottom:1px solid #ebebeb;}
#main-icon > figure:first-of-type {padding-top:0;}
#main-icon > figure:last-child {border-bottom:none;}
#main-icon > figure > img {width:20%; max-width:90px; margin-right:20px;}
#main-icon > figure > figcaption > div:first-child {margin-bottom:8px; line-height:2rem; font-size:1.6rem; font-weight:bold; color:#a72429;}
#main-icon > figure > figcaption > div:last-child {line-height:2.4rem; font-size:1.6rem; color:#777;} */

/*************** PC 기준 (메인) ***************/
@media all and (min-width: 1310px){

    #main-popup > .main-popup-close {inset: 36px 36px auto auto; width:24px; height:24px;}
    #main-popup {inset:5% 5% auto auto; z-index:1000; width:35vw; height:39vw; max-width:806px; max-height:902px; margin-left:unset;}
    #main-popup > .main-popup-remove {position:absolute; right: 36px; bottom :20px; line-height: 20px; font-size: 16px;}

    main > section:not(#main-slide, #main-video) {width:1310px; margin:0 auto; padding:0;}
    #main-slide {margin-bottom:79px;}
    .swiper-main {height:48.75vw;}
    .main-slide-text {top:24vw; left:0; bottom:initial; width:60%; margin-top:-165px; margin-left:20%;}
    .main-slide-title {line-height:7.5rem; font-size:7.5rem;}
    .main-slide-content {width:40%; margin:60px auto; line-height:3rem; font-size:2rem;}
    .main-slide-link {width:178px; padding:20px 0; line-height:20px; font-size:20px;}
    .main-slide-link:hover {background-color:#a72429; border:2px solid #a72429; color:#fff;}
    .swiper-button {bottom:65px; height:34px;}
    .swiper-pagination.swiper-pagination-main {margin-right:0;}
    .swiper-pagination-main > .swiper-pagination-bullet {width:11px; height:11px; border:2px solid #fff;}
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 30px 0 0;}
    .swiper-pagination-main > .swiper-pagination-bullet-active {width:11px; border:2px solid #a72429;}
    .swiper-operater > button {width:55px; height:34px; background-size:24px; border-radius:17px;}

    
    main > section#main-board {display:flex; justify-content:space-between; align-items:center; margin-bottom:135px;}
    #main-board > article {display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; width:306px; height:19.5rem; padding:0; border-bottom:none;}
    #main-board > article:nth-child(n+4) {width:286px;}
    #main-board > article:last-child {margin-bottom:0;}
    #main-board > .main-board-bar {width:2px; height:19rem; background:#ebebeb;}
    #main-board > article > h4 {width:100%; height:25px; line-height:2.5rem; margin-bottom:27px;}
    #main-board > article.main-board-news > h4 {margin-bottom:16px;}
    .main-board-news {row-gap:unset;}
    .main-board-news > .main-board-content {width:100%;}
    .main-board-news > .main-board-content > div:first-child {margin-bottom:8px; line-height:2.9rem; font-size:1.6rem;}
    .main-board-news > .main-board-content > div:last-child {height:7.2rem; margin-bottom:21px; line-height:2.4rem; font-size:1.6rem; -webkit-line-clamp: 3;}
    #main-board > article.main-board-vision > h4 {margin-bottom:21px;}
    .main-board-vision > .main-board-content {display:block; max-width:100%; height:12.5rem;}
    .main-board-vision > .main-board-content > div:first-child {margin-bottom:15px; line-height:3.2rem; font-size:2.2rem; word-break:keep-all;}
    .main-board-vision > .main-board-content > div:last-child {margin-bottom:22px; line-height:2.4rem; font-size:1.6rem; font-weight:500;}
    article > ul.main-board-content {margin:0 0 29px;}
    article > ul.main-board-content > li {margin-bottom:18px;}
    article > ul.main-board-content > li > div {line-height:1.8rem; font-size:1.6rem;}
    article > ul.main-board-content > li > div:first-child {width:180px; font-weight:500;}
    article > ul.main-board-content > li > div:last-child {width:86px; line-height:1.8rem; font-size:1.6rem;}
    .main-board-link {display:inline-block; height:2.4rem; font-size:1.6rem;}
    .main-board-link > span {padding:0.3rem 10px 0.5rem 0;}
    .main-board-link > div {width:24px; height:24px; background-repeat:no-repeat; background-position:center center; background-size:cover;}
    .main-board-link:hover > div {background-image:url('/images/main/icon-goover.svg')!important;}
        
    main > section#main-business-pc {display:grid; grid-template-columns:repeat(3,430px); grid-template-rows:repeat(2,340px); column-gap:10px; row-gap:10px; margin-bottom:191px;}
    #main-business-pc > a {display:block; position:relative; background-repeat:no-repeat; background-position:center center; background-size:cover;}
    #main-business-pc > a > div {display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; opacity:0; background-color:rgba(0,0,0,.5); transition-property:opacity; transition-duration:.3s; transition-timing-function:'ease-in';}
    #main-business-pc > a > div > div {color:#fff;}
    #main-business-pc > a > div > div:first-of-type {line-height:2rem; font-size:1.6rem;}
    #main-business-pc > a > div > div:last-of-type {margin:14px 0 15px; text-align:center; line-height:4.4rem; font-size:3.5rem;}
    #main-business-pc > a > div > img {transition-property:transform; transition-duration:.5s; transition-timing-function:'ease-in';}
    #main-business-pc > a:hover > div {opacity:1;}
    #main-business-pc > a:hover > div > img {transform:rotateZ(180deg);}

    main > section#main-video {background-image:url('/images/default/HM.svg'); background-repeat:no-repeat; background-position:left bottom;}
    #main-video > .main-video-box {display:flex; justify-content:space-between; align-items:flex-end; width:1310px; margin:0 auto; padding:150px 0;}
    #main-video > .main-video-box > .main-video-tube {width:774px; height:435px; padding-bottom:0;}
    #main-video > .main-video-box > .mian-video-info {width:482px;}
    #main-video > .main-video-box > .mian-video-info > .main-video-title {padding:0 17px; line-height:5rem; font-size:4.5rem; font-weight:300; color:#000;}
    #main-video > .main-video-box > .mian-video-info > .main-video-title > span {display:inline-block; font-weight:500; color:#000;}
    #main-video > .main-video-box > .mian-video-info > .main-video-text {padding:0 17px; margin:5px 0 19px; line-height:3.2rem; font-size:1.8rem; color:#000; word-break:keep-all;}
    .main-video-list {height:270px; margin-top:0;}
    .main-video-list > .main-video-list-box > button {padding:20px 21px; line-height:2.5rem; font-size:1.6rem;}
    .main-video-list > .main-video-list-box.list-active > button {background-image:url('/images/main/icon-videoarrow.svg'); background-repeat:no-repeat; background-position: 437px center; -ms-user-select: none;  -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;}

/*     main > section#main-icon {display:flex; justify-content:space-between; width:852px;}
    #main-icon > figure {flex-direction:column; width:204px; text-align:center; border-bottom:none;}
    #main-icon > figure:first-of-type {padding-top:20px;}
    #main-icon > figure > img {width:100%; max-width:initial; margin-right:0;}
    #main-icon > figure > figcaption > div:first-child {margin:20px 0; line-height:2.4rem; font-size:1.8rem;}
    #main-icon > figure > figcaption > div:last-child {line-height:1.8rem; font-size:1.3rem;} */
    
}