:root {
  --icon-size-s: 15px;
  --icon-size-m: 18px;
}

/* navi */
.menu{position:fixed; right:0; z-index:1; top:50%; margin-top:-70px; padding:35px 50px 35px 20px; text-align:right; box-sizing:border-box;}
.menu li{position:relative; padding:15px 0;  }
.menu li:before{display:block; content:""; position:absolute; right:3px; top:0; width:1px; height:100%; background-color:#bdc4ca;}
.menu li:first-child:before{top:50%; height:50%;}
.menu li:last-child:before{height:50%;}
.menu li a{position:relative; display:block; padding-right:20px; font-size:20px; font-weight:700; color:#737A89;}
.menu li a:after{display:block; content:""; position:absolute; right:0; top:50%; width:8px; height:8px; margin-top:-4px; background-color:#6d777f; border-radius:50%;}

.menu li.active a{color:#333;}
.menu li.active a:after{right:-4px; width:15px; height:15px; margin-top:-5px; background-color:#283f88;}

.menu li a:hover,
.menu li a:focus,
.menu li a:active{color:#333; text-underline-position:under;}

.menu li a:focus{text-decoration:underline;}

.fp-tableCell{display: block;overflow: hidden;}
#seoul-common-gnb{position: absolute;top: 0;left: 0;right: 0;z-index: 999;margin: 0;padding: 0;display: none;}
#seoul-gnb-plugin .seoul-gnb-holder{max-width: 1852px !important;}
.fp-viewing-1page #seoul-common-gnb{display:  block;}

/* sec1 */
.sec1 .con{
  position: absolute;
  z-index: 1;
  top: 48px;
  height: calc(100% - 48px);
}
.sec1 .bottom{
  position: absolute;
  width: 100%;
  height: 174px;
  display: flex;
  bottom: 0;
  z-index: 1;
}
.sec1 .bottom .item{
  padding: 2px;
  display: flex;
  flex: 1;
  background: #F7F6FB;
  border-left: solid 2px #E1E1E5;
  position: relative;
}
.sec1 .bottom .item:first-child{border-left: none;}
.sec1 .bottom .item .title{
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  letter-spacing: -0.55px;
  color: #373855;
  font-weight: 700;
  font-size: 22px;
  padding: 20px 0px;
}
.sec1 .bottom .item .submenu{
  background: #E1E0E9;
  position: absolute;
  top: 0;
  right: 0;
  width: 38.665%;
  height: 100%;
  display: none;
  padding: 25px 20px;
}
.sec1 .bottom .item.active .submenu{
  display: block;
}
.sec1 .bottom .item .submenu::before{
  content: "";
  background: url(/image/bottom-submenu-pin.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 21px;
}
.sec1 .bottom .item .submenu .txt{
  letter-spacing: -0.35px;
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  padding-right: 20px;
  word-break: keep-all;
}
.sec1 .bottom .item .submenu a:hover,
.sec1 .bottom .item .submenu a:hover *{color: #2718CD;}
.sec1 .bottom .item .submenu.link a{
  display: flex;
  flex-direction: column;
  padding-left: 14px;
}
.sec1 .bottom .item .submenu a{width: 100%;position: relative;}
.sec1 .bottom .item .submenu .icon-box{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--icon-size-m);
  height: var(--icon-size-m);
  padding: 3px;
  position: absolute;
  right: 0;
  top: 0;
}
.sec1 .bottom .item .submenu .icon-box .icon{background: url(/image/arrow-right-up-line-373.png) no-repeat center;}
.sec1 .bottom .item .submenu.link a span:not(.icon-box){position: relative;}
.sec1 .bottom .item .submenu.link a span:not(.icon-box)::before{
  content: "";
  background: url(/image/arrow-right-s-line.png) no-repeat center;
  background-size: contain;
  position: absolute;
  left: -10px;
  top: 6px;
  width: 7.5px;
  height: 7.5px;
}
.sec1 .bottom .item .title .icon-box{height: 77px;flex-shrink: 0;}
.sec1 .bottom .item .title .icon-box .icon{}

.sec1 .bottom .item:first-child .title .icon-box{padding: 2px;}
.sec1 .bottom .item:first-child .title .icon-box .icon{background: url(/image/icon-bottom000.png) no-repeat center; aspect-ratio: 73 / 75;}
.sec1 .bottom .item:nth-child(2) .title .icon-box{padding: 7.5px;}
.sec1 .bottom .item:nth-child(2) .title .icon-box .icon{background: url(/image/icon-bottom001.png) no-repeat center; aspect-ratio: 1 / 1;}
.sec1 .bottom .item:nth-child(3) .title .icon-box{padding: 11.5px;}
.sec1 .bottom .item:nth-child(3) .title .icon-box .icon{background: url(/image/icon-bottom002.png) no-repeat center; aspect-ratio: 54 / 53;}
.sec1 .bottom .item:last-child .title .icon-box{padding: 7.5px;}
.sec1 .bottom .item:last-child .title .icon-box .icon{background: url(/image/icon-bottom003.png) no-repeat center; aspect-ratio: 1 / 1;}


.sec1 .wrapper{
  width: 100%;
  max-width: unset;
  height: 100%;
  position: fixed;
}
.sec1 .bg{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}
.sec1 .bg .mainSwiper{
  width: 100%;
  margin-top: 48px;
  height: calc(100% - 48px - 174px);
}
.sec1 .bg .mainSwiper .swiper-wrapper{
  height: 100%;
}
.sec1 .bg .mainSwiper .mainBg-item{
  display: flex;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}



.sec1 .bg .main-controls{
  height: 35px;
  z-index: 1;
  position: absolute;
  bottom: calc(174px + 45px + 45px);
  left: calc(160px + 50px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: white;
}
.sec1 .bg .main-controls > span{width: 20px; font-size: 18px;font-weight: 600;letter-spacing: -0.45px;}
.sec1 .bg .main-controls .progress-box{
  width: 150px;
  height: 100%;
  position: relative;
}
.sec1 .bg .main-controls .progress-box .autoplay-progress{
  position: absolute;
  left: 0;
  top: 13px;
  z-index: 10;
  width: 150px;
  height: 3px;
  margin-top: 3px;
  background: rgba(255,255,255,0.35);
  overflow: hidden;
}
.sec1 .bg .main-controls .progress-box .autoplay-progress svg{
	--progress: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
	stroke-width: 14px;
	stroke: #000;
	fill: none;
	stroke-dashoffset: calc(100 * (1 - var(--progress)));
	stroke-dasharray: 100;
}


.sec1 .bg .main-controls .progress-box .progress-bar{
  width: 150px;
  height: 3px;
  background: rgba(255,255,255,0.35);
  position: relative;
}

.sec1 .bg .main-controls .progress-box .progress-fill{
  width: 0%;
  height: 100%;
  background: white;
  transition: none;
}

.sec1 .bg .main-controls .main-buttons{
  display: flex;
  align-items: center;
  gap: 15px;
}
.sec1 .bg .main-controls .main-buttons .main-button-prev{
  background: url(/image/icon-main-prev.svg) no-repeat center;
  width: 17px;
  height: 11px;
}
.sec1 .bg .main-controls .main-buttons .main-button-next{
  background: url(/image/icon-main-next.svg) no-repeat center;
  width: 17px;
  height: 11px;
}
.sec1 .bg .main-controls .main-buttons .play-button{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-left: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(/image/icon-swiper-stop-main.png);
  background-size: 10px 15px;
}
.sec1 .bg .main-controls .main-buttons .play-button.stop{
  background-image: url(/image/icon-swiper-play-main.png);
  background-size: 9px 15px;
}




.sec1 .bg .mainSwiper .mainBg-item .name{position: absolute;top: 106px;right: 78px;}
.sec1 .bg .mainSwiper .mainBg-item .name p{
  font-weight: 300;
  font-size: 46px;
  line-height: 1.35;
  letter-spacing: -1.15px;
  color: #FFFFFF;
  text-align: right;
  max-width: 658px;
  text-shadow: 0px 0px 10px #000000;
}
.sec1 .bg .mainSwiper .mainBg-item .name p span{font-weight: 700;display: inline-block;}
.sec1 .bg .mainSwiper .mainBg-item .name p span:first-of-type{width: 100%;text-align: left;}

.sec1 .bg .mainSwiper .mainBg-item .name p span:first-of-type::before {
  content: "❝ ";
}


.sec1 .bg .mainSwiper .mainBg-item .name p span:last-of-type::after {
  content: " ❞";
}
.sec1 .bg .mainSwiper .mainBg-item .name p span:first-of-type::before,
.sec1 .bg .mainSwiper .mainBg-item .name p span:last-of-type::after{
  font-weight: normal;
  font-size: 1.273em; /* 56 / 44 = 1.273 */
  line-height: 0;
  position: relative;
  top: -2px;
}

.sec1 .header{width: 160px;height: 86px; background: rgba(255, 255, 255, 0.9);padding: 2px;display: flex;align-items: center;justify-content: center;}
.sec1 .landscape-list{
  width: 160px;
  height: calc(100% - 86px - 174px);
  display: flex;
  flex-direction: column;
  position: relative;
}


.sec1 .landscape-list .top{
  height: 100%;
}
.sec1 .landscape-list .top .item{
  height: 50%;
  position: relative;
  align-content: center;
  padding: 2px;
  justify-items: center;
}
.sec1 .landscape-list .top .item .title{
  display: flex;
  gap: 6px;
  flex-direction: column;
  align-items: center;
  letter-spacing: -0.75px;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 30px;
}

.sec1 .landscape-list .top .item:first-child{background: rgba(39, 24, 205, 0.8);}
.sec1 .landscape-list .top .item:first-child .title .icon-box{width: 56px;height: 72px;padding: 2px;}
.sec1 .landscape-list .top .item:first-child .title .icon-box .icon{background: url(/image/icon-landscape-contest.png) no-repeat center;}
.sec1 .landscape-list .top .item:last-child{background: rgba(34, 198, 138, 0.8);}
.sec1 .landscape-list .top .item:last-child .title .icon-box{width: 64px;height: 60px;padding: 2px;}
.sec1 .landscape-list .top .item:last-child .title .icon-box .icon{background: url(/image/icon-landscape-photo.png) no-repeat center;}

.sec1 .landscape-list .top .item.active .submenu{display: flex;}
.sec1 .landscape-list .top .item .submenu{
  display: none;
  position: absolute;
  background: #fff;
  left: 100%;
  top:0;
  width: 100%;
  height: 100%;
  padding: 30px 18px;
  flex-direction: column;
  gap: 4px;
}
.sec1 .landscape-list .top .item .submenu::before{
  content: "";
  background: url(/image/top-submenu-pin.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 21px;
}
.sec1 .landscape-list .top .item .submenu a{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.35px;
  color: #000000;
  padding-right: 20px;
  position: relative;
}
.sec1 .landscape-list .top .item .submenu .subtext{
  display: block;
  letter-spacing: -0.33px;
  font-size: 13px;
  font-weight: 400;
}
.sec1 .landscape-list .top .item .submenu a:hover{color: #2718CD;}

.sec1 .landscape-list .top .item .submenu a .icon-box{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--icon-size-m);
  height: var(--icon-size-m);
  padding: 3px;
  position: absolute;
  right: 0;
  top: 0;
}
.sec1 .landscape-list .top .item .submenu a .icon-box .icon{
  background: url(/image/arrow-right-up-line-373.png) no-repeat center;
}




.sec1 .landscape-list .top .item:hover .submenu{display: flex;}
.sec1 .bottom .item:hover .submenu{display: block;}
/* sec2 */

.sec2{background: url(/image/bg001.png) center no-repeat;background-size: cover;}
/* .sec2 .fp-tableCell{vertical-align: top;} */
.sec2 .wrapper{max-width: 1740px;padding: clamp(76px, 5.625vw, 108px) 30px 76px;}

.sec2 .name{text-align: center;width: 376px;margin: 0px auto;margin-bottom: 50px;}
.sec2 .name h2{width: 100%;}
.sec2 .name h2 img{width: 100%; height: auto;}
.sec2 .visual-list{display: flex;justify-content: space-between;gap: 40px;}
.sec2 .visual-list > *{box-shadow: 0px 5px 15px #00000080;background: rgba(81, 81, 81, 0.5);max-width: 450px;width: 100%;padding: 27px 35px;border-radius: 15px;}
.sec2 .visual-list > * > .title{margin-bottom: 15px;letter-spacing: -0.95px;color: #fff;font-weight: 700;font-size: 38px;text-align: center;}
.sec2 .visual-list .left ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sec2 .visual-list .left ul li .link{
  width: 100%;
  background: #101010CC;
  border: 2px solid #545454;
  border-radius: 15px;
  padding: 22px 20px 22px 24px;
}
.sec2 .visual-list .left ul li .title{
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.12px;
  color: #FFFFFFE6;
  margin-bottom: 15px;
}
.sec2 .visual-list .left ul li .icon-box{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  width: var(--icon-size-m);height: var(--icon-size-m);padding: 2px;
}
.sec2 .visual-list .left ul li .icon{
  background: url(/image/arrow-right-up-line-e7f.png) no-repeat center;
}



.sec2 .visual-list .right ul{
  display: flex;flex-direction: column;gap: 5px;
  padding: 30px 0px 20px;
  border-top: solid 3px rgba(255, 255, 255, 0.22);
}
.sec2 .visual-list .right{position: relative;}
.sec2 .visual-list .right ul li{position: relative;padding-left: 21px;color: #FFFFFF;font-size: 22px;letter-spacing: -0.11px;}
.sec2 .visual-list .right ul li::before{
  content: "";
  background: url(/image/arrow-right-s-line.png) no-repeat center; position: absolute;left: 0;top: 50%;transform: translateY(-50%);
  width: 15px;
  height: 15px;
}

.sec2 .visual-list .right .link{
  margin-left: auto;
  max-width: 160px;
  background: #000;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 50px;
  color: #E7FF6B;
  letter-spacing: -0.5px;
  font-weight: 600;
  font-size: 20px;
}
.sec2 .visual-list .right .link .icon-box{width: var(--icon-size-m);height: var(--icon-size-m);padding: 2px;flex: 0 0 auto;}
.sec2 .visual-list .right .link .icon-box .icon{background: url(/image/arrow-right-up-line-e7f.png) no-repeat center;}





/* sec3 */
.sec3{background: url(/image/bg002.png) center no-repeat;background-size:cover;position: relative;}
.sec3 .wrapper{padding: 76px 30px 15px 30px;}
.sec3:before{}
.sec3 .name{max-width: 990px;margin: 0px auto;margin-bottom: clamp(30px, 7.6563vw, 146px);}
.sec3 .name .name-sub{font-weight: 300;font-size: 34px; color: #000;text-align: center;}
.sec3 .name h2{font-size: 38px;font-weight: 500; letter-spacing: -0.95px;color: #000;text-align: center;}
.sec3 .name h2 .quotes{font-size: 48px;letter-spacing: -1.2px;font-weight:300;}
.sec3 .circle-list{
  max-width: 1084px;;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin: 0px auto;
}
.sec3 .circle-list > div,
.sec3 .circle-list > .right{
  /* width: 31.39%; */
  width: 452px;
  background: #000000B3;
  border: 4px solid #FFFFFF80;border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* justify-content: flex-start;
  padding: 66px 0px; */
}
.sec3 .circle-list > div > .title,
.sec3 .circle-list > .right > .title{
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.75px;
    color: #6BFF9C;
    margin: 10px 0px 15px 0px;
}
.sec3 .circle-list .left .icon-box{width: 86px;height: 70px;padding: 2px;flex: 0 0 auto;}
.sec3 .circle-list .left .icon-box .icon{background: url(/image/icon-section03-00.png) no-repeat center;}
.sec3 .circle-list .left ul{display: flex;flex-direction: column;width: 250px;margin-bottom: 10px;}
.sec3 .circle-list .left ul li a{color: #fff;display: flex; justify-content: space-between;align-items: center; letter-spacing: -0.45px;font-size: 18px;font-weight: 700;border-bottom: solid 1px #ffffff4d;padding: 6px 20px;}
.sec3 .circle-list .left ul li:last-child a{border-bottom: 0px}
.sec3 .circle-list .left ul li a .icon-box{width: var(--icon-size-m);height: var(--icon-size-m);padding: 2px;flex: 0 0 auto;}
.sec3 .circle-list .left ul li a .icon-box .icon{background: url(/image/arrow-right-up-line-6bf.png) no-repeat center;}

.sec3 .circle-list .right{position: relative;}
.sec3 .circle-list .right ul{display: flex;flex-direction: column;gap: 2px;max-width: 214px;width: 100%;}
.sec3 .circle-list .right ul li{position: relative;padding-left: 21px;}
.sec3 .circle-list .right ul li::before{content: "";width: 15px;height: 15px;background: url(/image/arrow-right-s-line.png) no-repeat center; position: absolute;left: 0;top: 50%;transform: translateY(-50%);
}
.sec3 .circle-list .right ul li .title{color: #fff;letter-spacing: -0.45px;font-size: 18px;font-weight: 400;}

.sec3 .circle-list .right .icon-box{width: 80px;height: 72px;padding: 2px;flex: 0 0 auto;}
.sec3 .circle-list .right .icon-box .icon{background: url(/image/icon-section03-01.png) no-repeat center;}
.sec3 .circle-list .right .icon-box:has(.arrow){width: 52px;height: 52px;padding: 2px;flex: 0 0 auto;position: absolute;right: 40px;top:50%;transform: translateY(-50%);}
.sec3 .circle-list .right .icon-box .icon.arrow{background: url(/image/arrow-right-line.png) no-repeat center;}

.sec4 .wrapper{padding: 0px 110px; margin:0px auto;background:  #ffffff;}
.sec4 .wrapper > div:has(.brand){display: flex;padding: 20px 0px;}
.sec4 .brand{
  width: calc(100% - 380px);
  display: flex;
  column-gap: 7px;
  align-items: center;
}

.sec4 .brand .brandSwiper{  
  width: calc(100% - 165px);
  height: 60px;
  overflow: hidden; 
  padding: 2px;
}

.sec4 .brand .brandSwiper .swiper-wrapper{
  align-items: center;
}
.sec4 .brand .brandSwiper .swiper-wrapper a{
  /* margin: 2px; */
}
.sec4 .brand .brandSwiper .swiper-wrapper a .brand-logo{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}
.sec4 .brand .brandSwiper .swiper-wrapper .brand-logo img{
  max-width: 200px;
  width:  100%;
  height: 100%;
  object-fit: contain; /* 이미지가 비율을 유지하면서 잘리지 않게 */
}
.sec4 .brand .brand-button-prev{
  display: flex;
  color: #898989;
  width: 32px;
  height: 45px;
  background: #FFFFFF;
  text-align: center;
  border: 1px solid #C6C8D2;
  margin-top: 0;
  position: initial;
}
.sec4 .brand .brand-button-prev:after,
.sec4 .brand .brand-button-next:after{font-size: 14px;}
.sec4 .brand .brand-button-next{
  display: flex;
  color: #898989;
  width: 32px;
  height: 45px;
  margin-top: 0;
  position: initial;
  border: 1px solid #C6C8D2;
  background: #FFFFFF;
  text-align: center;
  line-height: inherit;
}
.sec4 .brand .button{
  height: 45px;
  background: #fff;
  color: #000;
  text-align: center;
  line-height: inherit;
  border: 1px solid #c6c8d2;
  width: 80px;
  font-size: 13px;
  position: initial;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.sec4 .brand .button.play-button:before{
  content: '';
  background-image: url("/image/icon-swiper-play.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 9px;
  height: 15px;
  margin-right: 6px;
}

.sec4 .brand .button.play-button:after{
  content: '재생';
  line-height: 15px;
}

.sec4 .brand .button.play-button.play:before{
  background-image: url("/image/icon-swiper-stop.png");
}
.sec4 .brand .button.play-button.play:after{
  content: '정지';
}

.sec4 .sns{
  width: 380px;
  display: flex;
  align-items: center;
  justify-content: center; 
  padding: 0px 40px;
}
.sec4 .sns li{
  flex-grow: 1;
  height: 100%;
}
.sec4 .sns li .link{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec4 .sns li .link .img-box{
  display: flex;
}
.sec4 .sns li .link .img-box img{
  max-width: fit-content;
  width: 100%;
}

.sec4 .wrapper > div:has(.notice){
  /* height: 72px; */
  position: relative;
  padding: 10px 150px 10px 130px;
  border: 1px solid #dddddd;
  background-color: #FFF;
}
.sec4 .notice{
  height: 50px;
}
.sec4 .notice .title{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
  font-size: 16px;
  font-weight: 600;
}
.sec4 .notice .notice-controls{position: absolute;top: 50%;right: 50px;display: flex;align-items: center;gap: 3px;transform: translateY(-50%);height: 30px;}
.sec4 .notice .notice-controls button,
.sec4 .notice .notice-controls a{display: block; width:29px; height:29px;} 
.sec4 .notice .notice-controls .notice-button-prev{background:url(/image/icon-bx-prev.png) no-repeat center; } 
.sec4 .notice .notice-controls .notice-button-next{background:url(/image/icon-bx-next.png) no-repeat center; }
.sec4 .notice .notice-controls .notice-button-more{background:url(/image/icon-bx-more.png) no-repeat center; }

.noticeSwiper{width: 100%;height: 100%;overflow: hidden;}
.noticeSwiper .swiper-slide{display: flex;}
.noticeSwiper .list{position: relative;display: flex;align-items: center;color: #454545;width: calc(50% - 40px);margin: 0px 20px;}
.noticeSwiper .list::before{content: "";display:block;width: 3px;height: 3px;background: #666666;position: absolute;top: 50%;transform: translateY(-50%);left: 10px;}
.noticeSwiper .list a{padding-left: 20px; width: calc(100% - 110px);display: block;}
.noticeSwiper .list p{flex-shrink: 0; width: 110px;text-align: end;}

.sec4 .wrapper:has(.info){
  max-width: 100%;
  border-top: 1px solid #ededed;
  margin-top: 40px;
  padding-top: 20px;
  padding-bottom: 30px;
}
.sec4 .info{
  max-width: 1080px;
  padding: 0px 20px;
  margin: 0px auto;
  display: flex;
}
.sec4 .info .logo{
  width: 110px;
  object-fit: contain;
  margin-right: 25px;
}
.sec4 .info p{color: #454545;font-size: 14px;}
.sec4 .info p span{padding: 0px 20px;}

.sec4 .info .wa_mark{margin-left: auto; width: 100px;flex-shrink: 0;}
.sec4 .info .wa_mark img{width: 100%;vertical-align: middle;}

.sec4 .info div:has(.relatedLink){margin-right: 20px; }
.sec4 .info .relatedLink{width:150px;height:30px;display: flex;}
.sec4 .info .relatedLink .box{width: calc(100% - 30px);}
.sec4 .info .relatedLink select{width: calc(100% - 2px); height: 100%; border: 1px solid #cccccc; color: #454545;font-size: 14px;border-radius: 0;background: #fff;}
.sec4 .info .relatedLink .go-btn{width: 30px; height: 30px;flex-shrink: 1;}

@media (max-width: 1900px) {
}
@media (max-width: 1439px) {
  .sec1 .bg{
    height: clamp(580px, calc(50vh + 35vw), 100vh);
  }
  

  .sec1 .bg .mainSwiper{
    height: calc(100% - 174px);
  }
  .sec1 .bg .mainSwiper .mainBg-item .name p{
    font-size: clamp(33px, 3.1967vw, 46px);
    max-width: clamp(469px, 45.7262vw, 658px);
  }
  .sec1 .bg .mainSwiper .mainBg-item .name p span:first-of-type::before,
  .sec1 .bg .mainSwiper .mainBg-item .name p span:last-of-type::after{
    /* font-size: clamp(43px, 3.8916vw, 56px); */
  }
  .sec1 .bg .main-controls{bottom: calc(130px + 45px + 45px);}
  .sec3 .wrapper{padding: 76px 30px 76px 30px;}

  .sec2 .name{width: 313px;}
  .sec2 .wrapper{padding-bottom: max(76px, 16.31vw);}

}
@media (max-width: 1280px) {
  /* .sec1 .fp-tableCell{height: 100vh !important;} */

  
  .sec1 .con {width: 120px;}
  .sec1 .bottom{height: 130px;}
  .sec1 .bottom .item .submenu .txt{font-size: 12px;}
  .sec1 .header{width: 100%;height: 68px;}
  .sec1 .header img{width: 56px;}
  .sec1 .landscape-list{width: 100%;height: calc(100% - 68px - 130px);}
  .sec1 .landscape-list .top .item .title{font-size: 22px;}
  .sec1 .landscape-list .top .item:first-child .title .icon-box{width: 43px;}
  .sec1 .landscape-list .top .item:last-child .title .icon-box{width: 50px;}
  .sec1 .landscape-list .top .item .submenu{padding: 25px 13px;}
  .sec1 .landscape-list .top .item .submenu a{font-size: 12px;}
  .sec1 .landscape-list .top .item .submenu .subtext{font-size: 11px;}

  .sec1 .bg .mainSwiper{
    height: calc(100% - 130px);
  }
  .sec1 .bg .mainSwiper .mainBg-item .name{top: 60px;right: 32px;}
  .sec1 .bg .main-controls{left: calc(100px + 50px);bottom: calc(130px + 45px);}

  
  .sec1 .bottom .item .submenu{
    padding: 20px 15px;
    width: 100%;
    bottom: 100%;
    top: unset;
    height: fit-content;
  }
  .sec1 .bottom .item .submenu::before{transform: translateX(-50%) rotate(270deg);
    width: 11px;
    height: 21px;
    bottom: -15.5px;
    top: unset;
    left: 50%;
  }
  .sec1 .bottom .item .title{
    font-size: 18px;
    gap: 4px;
    padding: 4px 0px;
    justify-content: center;
  }
  .sec1 .bottom .item .title .icon-box{height: 60px;}
  .sec2 .visual-list > *{padding: 20px 27px;}
  .sec2 .visual-list > * > .title{font-size: 35px;}
  .sec2 .visual-list .left ul li .title{font-size: 21px;}
  .sec2 .visual-list .left ul li .link{padding: 20px 21px;}
  .sec2 .visual-list .right ul li{font-size: 18px;}
  .sec2 .visual-list .right .link{font-size: 18px;}

  .sec4 .wrapper{padding: 0px 30px;}
  .sec4 .wrapper > div:has(.brand){flex-direction: column;gap: 20px;padding-bottom: 20px;}
  .sec4 .brand{width: 100%;}
  .sec4 .sns{width: 100%;height: 45px;gap: 20px;justify-content: space-around;}
  .sec4 .sns li{flex-grow: unset;}
  .sec4 .info{max-width: unset; padding: 0px;}
  .sec4 .info p{width: -webkit-fill-available;}
  .sec4 .info p span{display: block;}
  .sec4 .info .wa_mark{margin-left: unset;} 
}
@media (max-width: 1024px) {
  .sec1 .con{width: 96px;}
  .sec1 .landscape-list .top .item .title{font-size: 18px;}
  .sec1 .landscape-list .top .item:first-child .title .icon-box{width: 48px;height: unset;aspect-ratio: 56 / 52;}
  .sec1 .landscape-list .top .item:last-child .title .icon-box{width: 40px;height: unset;aspect-ratio: 64 / 60;}
  .sec1 .landscape-list .top .item .submenu{width: 120%;}
  .sec1 .bottom{height: 104px;}
  .sec1 .bottom .item .title{font-size: 14px;}
  .sec1 .bottom .item .title .icon-box{height: 48px;}

  .sec1 .landscape-list{height: calc(100% - 68px - 104px);}
  .sec1 .bg .main-controls{left: calc(96px + 50px);bottom: calc(104px + 45px);}


  .sec1 .bg .mainSwiper{
    height: calc(100% - 104px);
  }



  .sec3 .name h2{font-size: clamp(24px, 3.7109vw, 38px);}
  .sec3 .name h2 .quotes{font-size: clamp(24px, 4.6875vw, 48px);}
  .sec3 .name .name-sub{font-size: clamp(20px, 3.32vw, 34px);}

  .sec3 .circle-list{flex-direction: column;}

  .sec4 .wrapper > div:has(.notice){padding: 60px 10px 20px 10px;}
  .sec4 .notice{height: 60px;}
  .sec4 .notice .title{top: 20px;left: 20px; line-height: 30px;transform: unset;}
  .sec4 .notice .notice-controls{top: 20px; right: 20px;height: 30px; transform: unset;}
}

/* 아이패드 세로 및 가로 구간 */
@media (min-width: 768px) and (max-width: 1280px) {
  /* .sec1{height: 100% !important;}
  .sec1 .fp-tableCell {min-height: 840px !important;} */
}
/* 모바일 구간 */
@media (max-width: 768px) {
  .sec1 .fp-tableCell {
    /* max-height: unset !important;
    min-height: 630px !important; */
  }
}



@media (max-width: 768px) {
  .sec1 .bg .main-controls{
    gap: 14px;
    position: relative;
    width: calc(100% - 120px - 32px);
    bottom: 60px;
    margin: 0px 16px 0px 136px;
    left: unset;
    gap: 7px;
  }

  .sec1 .bg .mainSwiper .mainBg-item .name p span:first-of-type::before,
  .sec1 .bg .mainSwiper .mainBg-item .name p span:last-of-type::after{
    /* font-size: 26px;
    position: relative;
    top: -13px; */
  }

  .sec1 .landscape-list .top .item .submenu a{padding-right: 17px;}
  .sec1 .landscape-list .top .item .submenu a .icon-box{
    width: var(--icon-size-s);
    height: var(--icon-size-s);
  }

  .sec1 .bg .main-controls > span{font-size: 15px;}
  .sec1 .bg .main-controls .progress-box .autoplay-progress{width: 100%;}
  .sec1 .bg .main-controls .progress-box{width: -webkit-fill-available;}
  .sec1 .bg .main-controls .main-buttons .play-button{margin-left: 0px;}
  
  
  .sec1 .bottom .item .title .icon-box{}
  .sec1 .bottom .item .title{}

  .sec1 .bottom .item .submenu .icon-box{
    width: var(--icon-size-s);
    height: var(--icon-size-s);
  }
  .sec1 .bottom .item .submenu.link a{padding-left: 10px;}
  .sec1 .bottom .item.active .submenu,
  .sec1 .bottom .item:hover .submenu{padding: 14px 10px;}


  .sec2 .wrapper{padding: 85px 20px;}
  .sec3 .wrapper{padding: 37px 20px 37px 20px;}
  .sec4 .wrapper{padding: 0px 20px;}

  .sec2 .name{width: clamp(220px, 40.7552vw, 313px);}

  .sec2 .visual-list{flex-direction: column; align-items: center;}
  .sec2 .visual-list > *{max-width: 100%;padding: 18px 20px;}        
  .sec2 .visual-list > * > .title{font-size: 30px;}
  .sec2 .visual-list .left ul li .title{margin-bottom: 11px;font-size: 18px;line-height: 18px;}
  .sec2 .visual-list .left ul li .icon-box{width: var(--icon-size-s);height: var(--icon-size-s);}
  .sec2 .visual-list .right ul{padding: 25px 0px 15px;}
  .sec2 .visual-list .right ul li{font-size: 15px;}
  .sec2 .visual-list .right .link{max-width: 130px;font-size: 15px;}
  .sec2 .visual-list .right .link .icon-box{width: var(--icon-size-s);height: var(--icon-size-s);}


  .sec3 .name h2{font-size: 24px;display: flex;flex-wrap: wrap;justify-content: center;column-gap: 10px;}
  .sec3 .name h2 .quotes{font-size: 24px;}
  .sec3 .name .name-sub{font-size: 20px;}
  .sec3 .circle-list{gap: 30px;flex-direction: column;}

  .sec3 .circle-list > div,
  .sec3 .circle-list > .right{max-width: calc(452px * 0.8);width: 100%;}
  .sec3 .circle-list > div > .title,
  .sec3 .circle-list > .right > .title{font-size: 24px;}
  .sec3 .circle-list .left .icon-box{width: 72px;height: 58px;}
  .sec3 .circle-list .left ul{width: 170px;}
  .sec3 .circle-list .left ul li a{font-size: 16px;padding: 5px 10px;}
  .sec3 .circle-list .left ul li a .icon-box{width: var(--icon-size-s);height: var(--icon-size-s);}
  .sec3 .circle-list .right ul{max-width: 169px;}
  .sec3 .circle-list .right ul li .title{font-size: 15px;}
  .sec3 .circle-list .right .icon-box{width: 67px;height: 60px;}
  .sec3 .circle-list .right .icon-box:has(.arrow){width: 43px;height: 43px;right: 24px;}

  .sec4 .info{flex-wrap:wrap;gap: 20px;justify-content:center;}
  .sec4 .info .logo{margin-right: 0px;}
  .sec4 .info p{width: 100%; text-align: center;order:2;}
  .sec4 .info div:has(.relatedLink){margin-right: unset; order: 1;}
  .sec4 .info .wa_mark{order: 2;}

  .sec4 .wrapper > div:has(.notice){padding: 60px 20px 10px 10px;}
  .sec4 .sns{padding: 0px;}
  
  .noticeSwiper .swiper-slide{flex-direction: column;}
  .noticeSwiper .list{margin: 0px;width: 100%;height: 30px;font-size: 14px;}
  
}
@media (max-width: 680px) {
  .sec1 .bg .mainSwiper .mainBg-item .name{
    right: 20px;
    top: 10vw;

  }
  .sec1 .bg .mainSwiper .mainBg-item .name p{
    font-size: 26px;
    max-width: 353px;
    margin-left: auto;
  }
  .sec1 .bg .mainSwiper .mainBg-item .name p span:first-of-type::before,
  .sec1 .bg .mainSwiper .mainBg-item .name p span:last-of-type::after{
  }

}
@media (max-width: 480px) {
  .sec1 .header{height: 58px;}
  .sec1 .header img{width: 46px;}
  .sec1 .con{width: 80px;}
  .sec1 .landscape-list{height: calc(100% - 58px - 90px);}
  .sec1 .landscape-list .top .item .title{font-size: 15px;}
  .sec1 .landscape-list .top .item:first-child .title .icon-box{width: 38px;}
  .sec1 .landscape-list .top .item:last-child .title .icon-box{width: 34px;}
  .sec1 .landscape-list .top .item .submenu{padding: 20px 10px;}

  .sec1 .bottom{height: 90px;}
  .sec1 .bottom .item .title .icon-box{height: 40px;}
  .sec1 .landscape-list .top .item .submenu a,
  .sec1 .bottom .item .submenu .txt{font-size: 11px;}
  .sec1 .landscape-list .top .item .submenu .subtext{font-size: 9;}
  
  .sec1 .bg .mainSwiper{height: calc(100% - 90px);}
  .sec1 .bg .mainSwiper .mainBg-item{
    /* height: calc(100% - 90px - 48px); */
  }
  

  .sec1 .bg .main-controls{width:auto;margin: 0px 16px 0px 97px;}
  
  .sec1 .bg .mainSwiper .mainBg-item .name p{
    font-size: 20px;
    max-width: 232px;
  }
  .sec1 .bg .mainSwiper .mainBg-item .name p span:first-of-type::before,
  .sec1 .bg .mainSwiper .mainBg-item .name p span:last-of-type::after{
    /* font-size: 18px;
    top: -6px; */
  }
  .sec1 .bg .mainSwiper .mainBg-item .name p span:first-of-type::before{

  }
  .sec1 .bg .mainSwiper .mainBg-item .name p span:last-of-type::after{

  }

  .sec3 .name .name-sub{font-size: clamp(16px, 4.1667vw, 20px);}
  .sec3 .name h2{font-size: clamp(16px, 5vw, 24px);}
  .sec3 .name h2 .quotes{font-size: clamp(15px, 5vw, 24px);}

  .sec3 .circle-list .left ul{width: 160px;}
  .sec3 .circle-list .left ul li a{font-size: 14px;}
  .sec3 .circle-list .right ul{max-width: 160px;}
  .sec3 .circle-list .right ul li .title{font-size: 13px;}

}

@media (max-width: 1250px) {
  .delivery {
    display: none; /* 768px 이하에서 요소 숨김 */
  }
}