/********** 메인 공통 **********/
.main{ margin-top: 80px;}

.swiper-slide {  background-repeat: no-repeat; background-position: center; background-size: cover;}
.swiper-button { position: absolute; left: 50%; bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 1; width: 100%; transform: translateX(-50%); }
.swiper-button .swiper-pagination { position: relative; top: unset; left: unset; right: unset; bottom: unset; display: block; width: auto;}
.swiper-button .swiper-pagination .swiper-pagination-bullet {margin: 0 7px; opacity: 0.5; background-color: rgb(255, 255, 255); mix-blend-mode: difference; transition: all 0.3s;}
.swiper-button .swiper-pagination .swiper-pagination-bullet-active {position: relative; background-color: rgb(255, 255, 255); mix-blend-mode: difference; border-radius: 100%; opacity: 1;}
.swiper-button .swiper-pagination .swiper-pagination-bullet-active::after {content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 1px solid #fff; border-radius: 100%; transform: translate(-50%, -50%);}
.swiper-button .swiper-btn { display: flex; align-items: center; gap: 8px; }
.swiper-button .swiper-btn a { display: block; }
.swiper-button a img { vertical-align: middle; }
.swiper-button .swiper-btn a.play { display: none; }

@media only screen and (max-width: 767px) {
	.swiper-button .swiper-pagination {top: -3px;}
}

.rotate-txt {animation: rotate_image 6s linear infinite; transform-origin: 50% 50%;}

@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}

.more{display: flex; align-items: center; flex-shrink: 0; gap: 10px; font-weight: 700; font-size: 1.8rem; color: var(--gray-44);}
.more span{display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 100%; background-color: var(--point);}
.more span i{transition: all 0.3s;}
.more:hover span i{transform: rotateZ(90deg);}

.pin {position: absolute; right: 15px; top: 15px; z-index: 20; width: 20px; height: 20px; font-size: 0; background: url(../img/main/pin.png) no-repeat center / contain; transition: all .3s;}
.pin.on {background: url(../img/main/pin-active.png) no-repeat center / contain;}

/* con-box 공통 */
.con-box { padding: 60px 0; overflow: hidden; }
.con-box + .con-box {margin-top: 60px;}
.con-box .top {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px;}
.con-box .tag{position: absolute; left: 0; top: 162px; z-index: 10; padding: 10px 15px; font-family: 'SUITE'; font-weight: 200; border-radius: 0 10px 10px; color: #fff; background-color: var(--point);}
.con-box .tag em{margin-left: 5px; font-weight: 500;}
.con-box .tit {display: flex; gap: 20px; align-items: flex-end;}
.con-box .tit strong{font-weight: 700; font-size: 3.8rem; color: #222;}
.con-box .tit p{font-weight: 400; font-size: 2rem; line-height: 1.3; color: #666; }
.con-box .txt{display: flex; flex-flow: column wrap; justify-content: space-between; width: 100%; height: 170px; padding: 35px 20px 20px;}
.con-box .txt strong {font-weight: 600; font-size: 2rem; line-height: 1.4; color: #222;}
.con-box .txt span {position: relative; padding-left: 23px; color: #666;}
.con-box .txt span::before {content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; background: url(../img/main/i-building.svg) no-repeat center / contain; transform: translateY(-50%);}

.con-box .swiper {overflow: visible;}
.con-box .swiper-slide {position: relative; width: 285px; height: 350px; border: 1px solid var(--gray-ea); border-radius: 15px; transition: all .3s;}
.con-box .swiper-slide:hover {border: 1px solid var(--point); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);}
.con-box .swiper-slide .img-wrap {position: relative; width: 100%; height: 180px; background-color: #fff; border-radius: 15px; overflow: hidden;}
.con-box .swiper-slide .img-wrap::after{content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; opacity: 0.3; background: linear-gradient(180deg, rgba(0, 0, 0, 0.7)0%, rgba(0, 0, 0, 0.20)60%);}
.con-box .img-wrap.no-img:before {content: ""; position: absolute; left: 50%; top: 50%; width: 130px; height: 30px; opacity: 0.3; background: url(../img/layout/hd_logo.png) no-repeat center / 130px 30px; transform: translate(-50%, -50%);}
.con-box .swiper-slide .img-wrap img {position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;}
.con-box2 .swiper-slide .img-wrap img { object-fit: cover;}
.con-box .swiper-button {bottom: -50px;}
.con-box .swiper-button .swiper-pagination .swiper-pagination-bullet {background-color: #222;}
.con-box .swiper-button .swiper-pagination .swiper-pagination-bullet-active {background-color: #222;}
.con-box .swiper-button .swiper-pagination .swiper-pagination-bullet-active::after{border: 1px solid #222;}
.con-box .swiper-button .swiper-btn { gap: 10px; }
.con-box .swiper-button .swiper-btn a img { filter: brightness(0.2);}


/********************* main-visual ************************/
.main-visual-wrap {padding-top: 30px;}
.main-visual {position: relative;}
.visual {position: relative;}
.visual .swiper-slide{position: relative; display: flex; align-items: center; height: 470px; border-radius: 15px; overflow: hidden; color: #fff;}
/* .visual .swiper-slide::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 15px; background-color: rgba(0, 0, 0, 0.5);} */
.visual .swiper-slide::before{content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; opacity: 0.2; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.20) 60%);}

.visual .swiper-slide img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

.visual .visual-txt{display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: flex-start; gap: 20px; height: 230px; padding: 0 60px; color: #fff;}
.visual .visual-txt > span{display: flex; justify-content: center; align-items: center; padding: 5px 20px; border: 1px solid #fff; border-radius: 20px; font-size: 1.8rem; background-color: rgba(255, 255, 255, 0.2);}
.visual .visual-txt strong pre{ width: 100%; max-width: 600px; height: 180px; line-height: 1.2; font-size: 5rem; font-family: inherit; margin: 0; white-space: pre-wrap; word-wrap: break-word;}
.visual .visual-fix{position: absolute; left: 0; bottom: 0; z-index: 2; padding: 20px 30px; font-weight: 400; font-family: 'SUITE'; font-size: 1.8rem; border-radius: 0 15px 0 0; background-color: var(--point);}

.visual .mo-vi {display: none;}

/* fix-qr */
.fix-qr {position: absolute; right: 60px; top: 270px; z-index: 10; border-radius: 100%; background-color: #111;}
.fix-qr img {position: absolute; left: 6px; top: 6px; width: 170px; height: 170px; animation: rotate_image 8s linear infinite;}
@keyframes rotate_image{
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.fix-qr .small-box {display: flex; flex-flow: column wrap; justify-content: center; align-items: center; gap: 10px; width: 180px; height: 180px; font-weight: 500; font-size: 1.6rem; color: #fff;}


/* main-content */
.main-content > .inner {display: flex; justify-content: space-between; width: 100%;}
.main-content .lf-content {width: 1200px;}
.main-content .rg-content {width: calc(100% - 1240px); padding-top: 60px;}


/* con-box2 */
.con-box2 { border-top: 1px solid #ccc;}
.con-box2 .swiper-slide{height: auto;}
.con-box2 .academy .txt{height: auto; padding: 35px 20px;}


/* con-box3 */
.con-box3 {margin: 30px 0 100px;}
.con-box3 .more {word-break: break-all;}
.con-box3 .inner{display: flex; justify-content: space-between; padding: 0; border: 1px solid #cacaca; border-radius: 15px; word-break: keep-all; overflow: hidden;}
.con-box3 .lf{ display: flex; justify-content: space-between; align-items: flex-start; width: calc(100% - 600px); padding: 40px;}
.con-box3 .lf .lf-txt{display: flex; flex-flow: column wrap; justify-content: center; gap: 15px;}
.con-box3 .lf strong{font-weight: 700; font-size: 2.6rem; color: #222;}
.con-box3 .lf p{font-weight: 500; font-size: 1.8rem; line-height: 1.3; color: #666;}
.con-box3 ul{display: flex; width: 600px;}
.con-box3 ul li{flex: 1 1 50%; font-weight: 500; font-size: 2rem; color: #222;}
.con-box3 ul li a{display: flex; flex-flow: column wrap; justify-content: center; align-items: center; gap: 15px; height: 100%;}
.con-box3 ul li a span {white-space: nowrap;}
.con-box3 ul li:first-child a{ border: 2px solid #e1e1e1; background-color: #e1e1e1;}
.con-box3 ul li:nth-child(2) a{ border: 2px solid #d1d1d1; background-color: #d1d1d1;}
.con-box3 ul li:nth-child(3) a{ border: 2px solid #c1c1c1; background-color: #c1c1c1;}
.con-box3 ul li:last-child a{border: 2px solid #a1a1a1; background-color: #a1a1a1; }
.con-box3 ul li a i{width: 30px; height: 30px; transition: all .3s;}
.con-box3 ul li a i.group {width: 35px;}
.con-box3 ul li a:after {position: absolute; content: ""; width: 100%; height: 0; top: 0; left: 0; z-index: -1; background: #fff; transition: all 0.3s ease;}
.con-box3 ul li:last-child a::after{border-radius: 0 13px 13px 0;}
.con-box3 ul li a:hover:after {top: auto; bottom: 0; height: 100%;}
.con-box3 ul li a:active {top: 2px;}


/* rg-content */
.rg-content .side-wrap {position: sticky; left: 0; top: 110px;}
.side-wrap > div + div  {margin-top: 40px;}
.side-wrap > div{ padding: 30px; border: 1px solid var(--gray-ea); border-radius: 12px;}
.rg-content .side-cont > a{display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: 700; font-size: 2.3rem;}
.rg-content .side-cont .arr-rg{ filter: brightness(0.5);}
.rg-content ul li{position: relative; padding-left: 20px; font-weight: 500; font-size: 1.7rem; color: #444;}
.rg-content ul li:hover,
.rg-content ul li:focus,
.rg-content ul li:active{ text-decoration: underline; font-weight: 700;}

.cont-wrap > div + div {margin-top: 40px;}
.cont-wrap ul li::before{content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 4px; background-color: #666; border-radius: 100%; transform: translateY(-50%);}
.cont-wrap ul li + li {margin-top: 15px;}

.side-fav strong{display: inline-block; margin-bottom: 20px; font-weight: 700; font-size: 2.3rem;}
.side-fav ul li{position: relative; padding: 25px 0px; border-bottom: 1px solid var(--gray-ea);}
.side-fav ul li:last-child{border-bottom: none;}
.side-fav ul li a{display: block; position: relative; padding-left: 35px;}
.side-fav ul li a::before{content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background-position: center; background-repeat: no-repeat; background-size: contain;}
.side-fav ul li:first-child a::before{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.17 47.13'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23999; stroke: %23999; stroke-width: 3.2px; %7D .cls-1, .cls-2 %7B stroke-linejoin: round; %7D .cls-2 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-width: 4px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-2' x='2' y='2' width='52.17' height='35.86'/%3E%3Crect class='cls-1' x='9.77' y='9.98' width='36.64' height='19.9'/%3E%3Crect class='cls-2' x='21.92' y='37.86' width='12.33' height='7.27'/%3E%3Cline class='cls-2' x1='12.55' y1='45.13' x2='43.63' y2='45.13'/%3E%3C/svg%3E");}
.side-fav ul li:nth-child(2) a::before{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40.89 50.69'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke: %23999; stroke-width: 4.26px; %7D .cls-1, .cls-2 %7B fill: none; stroke-linejoin: round; %7D .cls-2 %7B stroke: %23000; stroke-linecap: round; stroke-width: 4px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-2' x='2' y='2' width='36.89' height='46.69'/%3E%3Cline class='cls-1' x1='8.7' y1='12.15' x2='32.2' y2='12.15'/%3E%3Cline class='cls-1' x1='8.7' y1='20.95' x2='32.2' y2='20.95'/%3E%3Cline class='cls-1' x1='8.7' y1='29.74' x2='32.2' y2='29.74'/%3E%3Cline class='cls-1' x1='8.7' y1='38.53' x2='32.2' y2='38.53'/%3E%3C/svg%3E");}
.side-fav ul li:nth-child(3) a::before{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 48.47'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke: %23999; %7D .cls-1, .cls-2 %7B fill: none; stroke-linejoin: round; stroke-width: 4px; %7D .cls-2 %7B stroke: %23000; stroke-linecap: round; %7D .cls-3 %7B fill: %23999; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-2' x='2' y='12.08' width='50' height='34.39'/%3E%3Cpath class='cls-2' d='M35.7,31.05c6.49,0,12.25-4.12,14.35-10.26l1.95-8.7H2l1.95,8.7c2.1,6.14,7.86,10.26,14.35,10.26'/%3E%3Crect class='cls-3' x='23.65' y='26.11' width='6.7' height='9.87'/%3E%3Cpolyline class='cls-1' points='17.68 7.86 17.68 2 36.32 2 36.32 7.86'/%3E%3C/svg%3E");}
.side-fav ul li:last-child a::before{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.9 50.38'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; %7D .cls-2 %7B fill: %23999; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M26.45,2C12.95,2,2,10.88,2,21.84c0,5.17,2.43,9.87,6.42,13.4v13.13l8.32-8.32c2.98,1.05,6.26,1.63,9.71,1.63,13.5,0,24.45-8.88,24.45-19.84S39.95,2,26.45,2Z'/%3E%3Ccircle class='cls-2' cx='39.08' cy='21.25' r='3.47'/%3E%3Ccircle class='cls-2' cx='26.45' cy='21.25' r='3.47'/%3E%3Ccircle class='cls-2' cx='13.82' cy='21.25' r='3.47'/%3E%3C/svg%3E");}

@media only screen and (max-width: 1660px) {
    .fix-qr{right: 90px;}
    .con-box.con-box3{padding: 0 30px; margin-top: 40px;}
}
@media only screen and (max-width: 1600px) {
    /* main-cont */
    .main-content .inner{flex-flow: row wrap;}
    .main-content .lf-content{width: 100%;}
    .main-content .lf-content .con-box3 {margin-bottom: 0;}
    .main-content .rg-content{width: 100%;}

    .rg-content .side-wrap{ width: 100%; gap: 20px;}
    
    .side-wrap .cont-wrap {display: flex;}
    .side-wrap .cont-wrap > div {flex: 1;}
    .side-wrap .cont-wrap > div + div {padding-left: 40px; margin-top: 0; margin-left: 40px; border-left: 1px solid var(--gray-ea);}
    .side-fav {display: flex; align-items: center; gap: 30px;}
    .side-fav strong {white-space: nowrap; margin-bottom: 0;}
    .side-fav ul{ display: flex; width: 100%;}
    .side-fav ul li {flex: 1; padding: 5px 0; border-bottom: 0; text-align: center;}
    .side-fav ul li + li {border-left: 1px solid var(--gray-ea); padding-left: 30px;}
}

@media only screen and (max-width: 1100px) {
    /* cont */
    .con-box3 {flex-flow: column wrap;}
    .con-box3 .lf {width: 100%;}
    .con-box3 ul {width: 100%;}
    .con-box3 ul li a{padding: 20px;}
    
    /* cont-box3 */
    .con-box3 ul li:first-child a::after{border-radius: 0 0 0 13px;}
    .con-box3 ul li:last-child a::after{border-radius: 0 0 13px 0;}
    .con-box3 ul li a:hover:after {top: auto; bottom: 0; height: 100%;}
}
@media only screen and (max-width: 1023px) {
    /********************* main-visual ************************/
    .main-visual-wrap {padding-top: 0px;}
    .visual .swiper-slide {height: 400px;}
    .visual .visual-txt {gap: 10px; padding: 0 40px;}
    .visual .visual-txt strong {font-size: 4rem;}
	.visual .visual-txt strong pre { max-width: 500px; height: 160px;}
    .visual .visual-fix{ padding: 15px 25px;}

    .con-box{padding: 40px 0 50px;}
    .con-box + .con-box {margin-top: 40px;}
    .con-box .swiper-button{bottom: -40px;}

    .con-box .tit strong{font-size: 3.5rem;}
    .con-box .tit p {font-size: 1.7rem;}

    .rg-content .side-wrap{flex-flow: column wrap;}
    .side-fav {display: block;}
    .side-fav strong {margin-bottom: 20px;}
    .side-fav ul{flex-wrap: wrap; gap: 10px;}
    .side-wrap .side-fav ul li {flex: auto; width: calc(50% - 20px); padding: 20px; border-left: 0px; border-radius: 8px; background-color: #f5f5f5;}
}
@media only screen and (max-width: 767px) {
	/* 공통 */
    .swiper-button .swiper-pagination {margin-bottom: -6px;}
    
    /********************* main-visual ************************/
    .visual .swiper-slide{align-items: flex-start; padding-top: 68%; height: 0; word-break: keep-all;}
    /* .visual .swiper-slide{align-items: flex-start; height: 450px; padding-top: 60px; word-break: keep-all;} */
    
    .visual .visual-txt{position: absolute; top: 160px; left: 0; padding: 0 20px;}
    .visual .visual-txt strong pre {max-width: 360px; height: 92px; font-size: 3rem;}
    .visual .visual-txt > span {font-size: 15px;}
    .visual .visual-fix{left: unset; bottom: unset; right: 0; top: 0; padding: 15px 25px; border-radius: 0 0 0 15px;}
    
    .visual .mo-vi {display: block;}
    
    .fix-qr {right: 40px; top: 200px;}
    .fix-qr img {left: 5px; top: 5px; width: 150px; height: 150px;}
    .fix-qr .small-box {width: 160px; height: 160px;}
    
    /* cont */
    .main-content .rg-content{flex-flow: column wrap;}
    .con-box .swiper-slide {height: auto;}
    .con-box .top {align-items: flex-start; word-break: keep-all;}
    .con-box .tit {flex-flow: column wrap; align-items: flex-start;}
    
    .con-box .tit {gap: 10px;}
    .con-box .tit strong{font-size: 3rem;}
    .con-box .tit p {font-size: 1.6rem;}
    .con-box .txt{height: 130px;}
    .con-box2 .academy .txt {padding: 30px 20px 20px;}
    /* 위아래 글 패딩도 줄이셈 */

    .side-wrap > div{padding: 20px;}
    .side-wrap .cont-wrap {display: block;}
    .side-wrap .cont-wrap > div {flex: 1;}
    .side-wrap .cont-wrap > div + div {padding-left: 0; margin-top: 40px; margin-left: 0; border-left: 0;}
    
    .side-fav ul li a {padding-left: 0; padding-left: 30px;}

    .con-box.con-box3{padding: 0 20px;}
    .con-box3 .lf{padding: 20px;}
}
@media only screen and (max-width: 600px) {
	.visual .visual-txt strong pre {max-width: 220px;}
}
@media only screen and (max-width: 500px) {
	.visual .visual-txt{top: 100px;}
	
	.con-box + .con-box {margin-top: 0;}
	.con-box .swiper-button {bottom: 50%;width: calc(100% - 20px);}
	.con-box .swiper-button .swiper-btn {width: 100%; justify-content: space-between;}
	.con-box .swiper-button .swiper-pagination {display: none;}
	.con-box .swiper-button .swiper-btn a {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border: 1px solid var(--gray-e9); border-radius: 100%; background-color: #fff;}
	
	.main-content .rg-content {padding-top: 0;}
}
@media only screen and (max-width: 430px) {
    .fix-qr {display: none;}

	.visual .visual-txt strong pre {max-width: unset;}

    .side-wrap .side-fav ul li {width: 100%; text-align: left;}

    .con-box3 .lf {flex-flow: column wrap; gap: 30px;}
    .con-box3 .more {align-self: flex-end;}
    .con-box3 ul{flex-wrap: wrap; width: 100%; height: 240px;}
    .con-box3 ul li:first-child a::after{border-radius: 0;}
    .con-box3 ul li:nth-child(3) a::after {border-radius: 0 0 0 13px;}
    .con-box3 ul li:last-child a::after {border-radius: 0 0 13px 0;}
}
@media only screen and (max-width: 360px) {
	.visual .visual-txt{top: 40px;}
}