@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_visual *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main_visual {position: relative; height: 100vh;}
.main_visual .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.main_visual .inner {align-items: center; height: 100%;}
/* slogan */
.main_visual .slogan {color: #fff; text-align: center; width: 100%; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
.main_visual .slogan p {font-weight: 700; font-size: var(--fz-24); letter-spacing: 1.4em; margin-bottom: 25px;}
.main_visual .slogan h2 {font-weight: 700; font-size: var(--fz-60); line-height: 1.2em; margin: auto;}
/* video play btn */
.main_visual .play_btn {cursor: pointer; width: 100px; height: 100px; position: absolute; bottom: 40px; left: 0; background: url(/img/pause_12x16.png) no-repeat center center;}
.main_visual .play_btn.on {background-image: url(/img/play_16x18.png);}
.main_visual .play_btn .circle {transform: rotate(-90deg); width: 100%; height: 100%;}
.main_visual .play_btn .circle .border {fill: none; stroke: white; stroke-width: 4px; opacity: 0.33;}
.main_visual .play_btn .circle .progress {fill:none; stroke: white; stroke-width: 4px; stroke-dasharray: 301.44;} 
/* scroll down */
.main_visual .scroll {position: absolute; bottom: 40px; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;}
.main_visual .scroll span {display: block; width: 25px; height: 35px; border-radius: 25px; border: 2px solid rgba(255, 255, 255, 0.6); position: relative;}
.main_visual .scroll span i {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 4px; height: 6px; border-radius: 2px; background-color: #fff; animation: scroll 1s infinite;}
.main_visual .scroll p {writing-mode: vertical-lr; font-weight: 500; font-size: var(--fz-16); letter-spacing: 0.1em; color: #fff;}

@keyframes scroll {
    0% {top:7px}
    50% {top: 13px}
    100% {top: 7px}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con01 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con01 ul li {display: flex; gap: 80px; align-items: center;}
.main .con01 ul li + li {margin-top: 120px;}
.main .con01 .left {width: calc(50% - 80px);}
.main .con01 .right {width: 50%;}
/* img_box */
.main .con01 .img_box {text-align: left;}
.main .con01 .img_box img {width: 100%; max-width: fit-content;}
/* txt_box */
.main .con01 .btn_wrap {margin-top: 50px;}
/* 짝수행 */
.main .con01 ul li:nth-child(even) .txt_box.line {order: 1;}
.main .con01 ul li:nth-child(even) .txt_box.line {padding-left: 0; padding-right: 80px;}
.main .con01 ul li:nth-child(even) .txt_box::before {left: unset; right: 0;}
.main .con01 ul li:nth-child(even) .img_box {text-align: right;}
.main .con01 ul li:nth-child(even) .btn_wrap {justify-content: flex-end;}

@media all and (min-width: 1025px) {
    /* 예외 */
    .main .con01 ul li:nth-child(2) .img_box {position: relative; aspect-ratio: 1/1;}
    .main .con01 ul li:nth-child(2) .img_box img {position: absolute; top: 50%; right: 0; width: 140%; transform: translateY(-50%);}
}

@media all and (max-width: 1024px) {
    .main .con01 ul li {flex-wrap: wrap;}
    .main .con01 .left,
    .main .con01 .right {width: 100%;}
    .main .con01 .img_box {text-align: center !important;}
    .main .con01 .txt_box {order: 0 !important;}
    .main .con01 .txt_box.line {padding-left: 40px;}
    /* 짝수행 */
    .main .con01 ul li:nth-child(even) .txt_box.line {padding-right: 40px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con02 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con02 ul li {cursor: pointer;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con03 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con03 .flex_wrap {gap: 80px;}
.main .con03 .left,
.main .con03 .right {width: calc(50% - 40px);}
/* notice */
.main .con03 .notice ul li {background-color: #f7f5f3; display: flex; align-items: center; justify-content: space-between; cursor: pointer; height: 70px; border-radius: 35px; padding: 0 30px; box-sizing: border-box; transition: 0.25s; gap: 20px;}
.main .con03 .notice ul li + li {margin-top: 10px;}
.main .con03 .notice ul li h6 {flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--fz-18); color: #444;}
.main .con03 .notice ul li span {font-size: var(--fz-16); color: #b3ada6; font-feature-settings: "tnum";}
/* notice:hover */
.main .con03 .notice ul li:hover {background-color: #fa744f; color: #fff; box-shadow: 0px 8px 50px 0px rgba(67, 36, 20, 0.16);}
.main .con03 .notice ul li:hover h6 {color: #fff;}
.main .con03 .notice ul li:hover span {color: #fff;}
/* news */
.main .con03 .news ul {display: flex; gap: 20px;}
.main .con03 .news ul li {width: calc(50% - 10px); cursor: pointer;}
.main .con03 .news ul li .img_box {aspect-ratio: 1/1; background-color: #eee; border-radius: 20px; box-sizing: border-box; overflow: hidden;}
.main .con03 .news ul li .img_box img {width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: 0.25s;}
.main .con03 .news ul li .txt_box {margin-top: 10px;}
.main .con03 .news ul li h6 {font-weight: 500; font-size: var(--fz-18); line-height: 1.55em; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main .con03 .news ul li span {font-size: var(--fz-16); color: #b3ada6; font-feature-settings: "tnum";}
/* news:hover */
.main .con03 .news ul li:hover .img_box img {transform: scale(1.2);}

@media all and (max-width: 1200px) {
    .main .con03 .inner {gap: 40px;}
    .main .con03 .left,
    .main .con03 .right {width: calc(50% - 20px);}
}

@media (min-width : 768px) and (max-width: 1024px) {
    .main .con03 .left {width: calc(70% - 20px);}
    .main .con03 .right {width: calc(30% - 20px);}
    .main .con03 .news ul {flex-wrap: wrap;}
    .main .con03 .news ul li {width: 100%;}
}

@media all and (max-width: 767px) {
    .main .con03 .inner {gap: 120px; flex-wrap: wrap;}
    .main .con03 .left,
    .main .con03 .right {width: 100%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con04 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con04 {background-color: #f7f5f3; padding: 100px 0; box-sizing: border-box;}
.main .con04 .slick_wrap {overflow: hidden;}
.main .con04 .logo_list {margin: 0 -10px;}
.main .con04 .logo_list li {display: flex; align-items: center; justify-content: center; background-color: #fff; margin: 0 10px; background-color: #fff; height: 100px; border-radius: 10px; cursor: pointer; padding: 0 20px; box-sizing: border-box;}
.main .con04 .logo_list li img {width: 100%; max-width: fit-content;}