/* common */
#sv{ position: relative; width: 100%; height: 400px; overflow: hidden;}

#sv.sv01{ background: url(/img/sub/subVisual01.png) no-repeat 50% 50% / cover ;}
#sv.sv02{ background: url(/img/sub/subVisual02.png) no-repeat 50% 50% / cover ;}
#sv.sv03{ background: url(/img/sub/subVisual03.png) no-repeat 50% 50% / cover ;}
#sv.sv04{ background: url(/img/sub/subVisual04.png) no-repeat 50% 50% / cover ;}
#sv.sv05{ background: url(/img/sub/subVisual05.png) no-repeat 50% 50% / cover ;}
#sv.sv06{ background: url(/img/sub/subVisual06.png) no-repeat 50% 50% / cover ;}

#sv > div{ opacity: 1; transform: none; display:flex; align-items:flex-end; height: 100%; }
#sv > div h1.title{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; color:#fff; font-weight: 500; text-align: center; opacity: 0; filter:blur(15px); -webkit-filter:blur(15px); letter-spacing: 30px; transition:all 1.2s; }
#sv > div .tab-box{ width: 100%; transition:all 1s 0.3s; }
#sv > div .tab-box .depth2{ width: 100%; display:flex; }
#sv > div .tab-box .depth2 li{ position: relative; width: 100%; height: 80px; text-align: center; }
#sv > div .tab-box .depth2 li a{ position: relative; height: 100%; display:flex; justify-content:center; align-items:center; color:#fff; letter-spacing: -0.6px; font-weight: 500; transition:all 0.5s; }
#sv > div .tab-box .depth2 li:not(:last-child) a:after{ content:''; display:block; position: absolute; transform:translateY(-50%); top: 50%; right: 0; width: 1px; height: 14px; 
background: rgba(255,255,255,0.3);}
#sv > div .tab-box .depth2 li:before{ content:''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #fff; transition:all 0.5s; }

#sv > div .tab-box .depth2 li.on a,
#sv > div .tab-box .depth2 li.over a{ color:#000; }
#sv > div .tab-box .depth2 li.on:before,
#sv > div .tab-box .depth2 li.over:before{ top: 0; }

#sv > div.aos-animate h1.title{ opacity: 1; filter:blur(0); -webkit-filter:blur(0); letter-spacing: -1.8px; }

#subContents{ padding: 150px 0 50px;}
#subContents.sc07{ padding-top: 200px; }

.mb100{ margin-bottom: 100px; }
.mb150{ margin-bottom: 150px; }

#search{ margin-bottom: 150px; }
#search form { display:flex; justify-content:center; align-items:center; }
#search form > *{ height: 70px; border-bottom:2px solid #000; padding: 0 30px;  }
#search select{ background:url(/img/common/selectArrow.png) no-repeat top 50% right 30px; width: 260px; font-weight: 500; color:#333; 
letter-spacing: -0.32px; margin-right: 30px;}
#search .input-box{ width: 600px; display:flex; justify-content:space-between; align-items:center; }
#search input{ height: 100%; color:#333; font-weight: 500; letter-spacing: -0.54px; }
#search input::placeholder{ color:#ccc; }

.btn-box a span{ position: relative; }
.btn-box a span:after{ content:''; display:block; width: 0; height: 2px; position: absolute; top: 100%; left:0; transition:all 0.3s; background: #fff; }
.btn-box a:hover span:after{ width: 100%; }
.btn-box a.black span:after{ background: #000; }

/* sub */
.complex .content{ display:flex; flex-wrap:wrap; gap:100px 15px; }
.complex .content > .title{ width: 100%; text-align: center; }
.complex .content .item-box{ width: calc((100% - 45px) / 4);}
.complex .content .item-box .fit-box{ position: relative; aspect-ratio:590 / 700; height:auto; margin-bottom: 20px; overflow:hidden; }
.complex .content .item-box .fit-box > img{ transition:all 1s; }
.complex .content .item-box .fit-box .stxt{ position: absolute; top: 0; right: 0; height: 30px; padding: 0 15px; display:flex; justify-content:center; align-items:center; background: #000; color:#fff; font-weight: 500; letter-spacing: -0.45px; }
.complex .content .item-box .fit-box .stxt.off{ background: #999; }
.complex .content .item-box .fit-box button{ position: relative; position: absolute; bottom: 20px; right: 20px; cursor:pointer;  width: 30px; height: 30px;}
.complex .content .item-box .fit-box button img.on{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; opacity: 0; transition:all 0.2s; }
.complex .content .item-box .fit-box button.on img.on{ opacity: 1; }
.complex .content .item-box .txt-box .title{ color:#222; font-weight: 500; letter-spacing: -0.66px; margin-bottom: 10px; }
.complex .content .item-box .txt-box ul{ display:flex; flex-wrap:wrap; gap:10px 0}
.complex .content .item-box .txt-box ul li{ display:flex; align-items:center; color:#666; letter-spacing: -0.45px; font-weight: 300; }
.complex .content .item-box .txt-box ul li:not(:last-child){ margin-right: 10px; }
.complex .content .item-box .txt-box ul li img{ margin-right: 5px; flex-shrink:0; }
.complex .content .item-box:hover .fit-box > img{ transform:translate(-50%,-50%) scale(1.1); }

.view .content{ display:flex; gap:100px; }
.view .content .slide-box{ position: relative; width:42%; overflow: hidden;}
.view .content .slide-box .slide-nav{ position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; font-family: var(--syn); text-transform: uppercase; padding: 30px; display:flex;  width: 100%; display:flex; justify-content:space-between; }
.view .content .slide-box .slide-nav button{ position: relative;color:#fff; font-weight: 600; font-family: var(--syn);}
.view .content .slide-box .slide-nav button:after{ content:''; display:block; position: absolute; top: 100%; left: 0; width: 0; height: 2px; background: #fff; opacity: 0; transition:all 0.5s; }
.view .content .slide-box .slide-nav button:hover:after{ width: 100%; opacity: 1; }
.view .content .slide-box .slide-nav .slide-num{ font-variant-numeric: lining-nums proportional-nums; font-weight: 600; color:#fff; opacity: 0.3;}
.view .content .slide-box .swiper-wrapper { height:auto; }
.view .content .slide-box .swiper-slide { position: relative; aspect-ratio:850 / 800 !important; height:100%; overflow:hidden; }
.view .content .info-box { width:calc(100% - 42%); margin-top: 0; }
.view .content .info-box .title-box .stxt{ height: 30px; padding: 0 15px; display:inline-flex; justify-content:center; align-items:center; background: #000; color:#fff; font-weight: 500; letter-spacing: -0.45px; margin-bottom: 25px;}
.view .content .info-box .title-box .title{ font-weight: 500; letter-spacing: -1.38px; color:#111; }
.view .content .info-box .txt-box{ border-top: 3px solid #000; margin: 30px 0; }
.view .content .info-box .txt-box dl{ display:flex; height: 60px; border-bottom: 1px solid #EEE; }
.view .content .info-box .txt-box dl > *{ height: 100%; display:flex; align-items:center; letter-spacing: -0.6px; }
.view .content .info-box .txt-box dl dt{ min-width:200px; padding: 0 20px; color:#333; font-weight: 500; flex-shrink:0; }
.view .content .info-box .txt-box dl dd{ color:#666; font-weight: 300; }
.view .content .info-box .btn-box{ display:flex; gap:20px; }
.view .content .info-box .btn-box a{ height: 80px; display:flex; justify-content:space-between; align-items:center; padding: 0 30px; background: #000; color:#fff; width: calc((100% - 20px) / 2);}
.view .content .info-box .btn-box #viewbtn{ height: 80px; border:none; background: var(--mainC); }
.view .content .info-box .btn-box a figure{ position: relative; cursor:pointer;  width: 20px; height: 20px;}
.view .content .info-box .btn-box a figure img.on{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; opacity: 0; transition:all 0.5s; }
.view .content .info-box .btn-box a.on figure img.on{ opacity: 1; }
.view .txt-box-b{ border: 1px solid #DDD; padding: 80px 100px; }
.view .txt-box-b dl:not(:last-child){ margin-bottom: 30px; }
.view .txt-box-b dt{ color:#222; font-weight: 500; letter-spacing: -0.72px; margin-bottom: 20px; }
.view .txt-box-b dd{ color:#666; font-weight: 300; line-height: 1.7; letter-spacing: -0.6px; }
.view > div > .btn-box{ display:flex; justify-content:center; }
.view > div > .btn-box #viewbtn{ color:#333; width: 300px; height: 80px; border:2px solid #000; font-weight: 500; }
.view > div > .btn-box #viewbtn:after{ display:none; }

.view .order-box.off{ display:none; }
.view .order-box .tab-slide-box{ display:flex; align-items: center; margin-bottom: 60px;}
.view .order-box .tab-btn{ width: 70px; height: 70px; border: 2px solid #000; flex-shrink:0; display:flex; justify-content:center; align-items:center; }
.view .order-box .tabWrap{ width: 100%;  width:calc(100% - 140px) }
.view .order-box .tabSwiper{ margin: 0 20px; }
.view .order-box .tabSwiper .slide{ width: 308px;}
.view .order-box .tabSwiper .slick-track{ margin-left: 0; }
.view .order-box .tabSwiper .slide button{ position: relative; width: 100%; height: 70px; color: #CCC; font-variant-numeric: lining-nums proportional-nums; font-family: var(--syn); 
font-weight: 500; }
.view .order-box .tabSwiper .slide button:after{ content:''; display:block; position: absolute; transform:translateX(-50%); top: calc(100% - 2px); left: 50%; width: 0; height: 2px; background: #000; transition:all 0.3s; }
.view .order-box .tabSwiper .slick-current button{ color:#111; }
.view .order-box .tabSwiper .slick-current button:after{ width: 100%; }
.view .order-box .ctnSwiper .circle-box{ display:flex; gap:20px; flex-wrap:wrap; }
.view .order-box .ctnSwiper .circle-box .item-box{ width: calc((100% - 120px) / 7); height: 240px; border-radius:50%; border: 1px dashed #CCC; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.view .order-box .ctnSwiper .circle-box .item-box .step{ color:#aaa; font-variant-numeric: lining-nums proportional-nums; font-family: var(--syn); font-weight: 500; text-transform: uppercase; 
margin-bottom: 10px; }
.view .order-box .ctnSwiper .circle-box .item-box .title{ color:#000; font-weight: 500; letter-spacing: -0.72px; }
.view .order-box .ctnSwiper .circle-box .item-box.on{ background: var(--mainC); border:1px solid var(--mainC); }
.view .order-box .ctnSwiper .circle-box .item-box.on p{ color:#fff; }
.view .order-box .ctnSwiper .bar-box{ position: relative; margin: 40px 0 100px; }
.view .order-box .ctnSwiper .bar-box .line-box{ position: relative; position: relative; display:flex; border-radius: 100px; background: #DDD; width: 100%; height: 40px; display:flex; align-items:center; padding: 0 10px;}
.view .order-box .ctnSwiper .bar-box .line-box:after{ content:""; display:block; width: 20px; height: 20px; border-radius:50%; background: #fff;  position: absolute; transform:translateY(-50%); top: 50%; left: 10px; }
.view .order-box .ctnSwiper .bar-box .line-box .percent{ position: absolute; top:0; left: 0; width: 0; height: 100%; border-radius:100px; background: linear-gradient(90deg, #F8B500 0%, #6FBA2C 26%, #579ED7 51.5%, #007260 76.5%, #004898 100%); min-width: 40px; max-width: -webkit-fill-available; transition:all 1s; }
.view .order-box .ctnSwiper .bar-box .line-box .percent span{ font-family: var(--syn); font-variant-numeric: lining-nums proportional-nums; color:var(--mainC); font-weight: 600; 
position: absolute; top: -30px; }
.view .order-box .ctnSwiper .bar-box .line-box .percent span.type2{ display:none; }
.view .order-box .ctnSwiper .bar-box .line-box .percent.full span { top: -30px;  }
.view .order-box .ctnSwiper .bar-box .line-box .item-box{ position: relative; width: 100%; height: 2px; background: url(/img/sub/orderLine.png); }
.view .order-box .ctnSwiper .bar-box .line-box .item-box:before{ content:''; display:block; width: 20px; height: 20px; border-radius:50%; background: #fff; position:absolute; transform:translateY(-50%); top: 50%; right: 0; }
.view .order-box .ctnSwiper .bar-box .txt-box{ display:flex; justify-content:space-between; margin-top: 10px; color:#222; font-weight: 500; letter-spacing: -0.54px;}
.view .order-box .ctnSwiper .bar-box .txt-box .txt{ color:#666; display:inline-flex; letter-spacing: -0.54px; font-weight: 400; }
.view .order-box .ctnSwiper .bar-box .txt-box .txt span{ font-family: var(--syn); font-variant-numeric: lining-nums proportional-nums; margin-left: 10px;}
.view .order-box .ctnSwiper .inner-slide{ display:flex; height: 700px; max-width:1400px; margin-inline:auto; }
.view .order-box .ctnSwiper .inner-slide .img-box{ position: relative; width: calc(100% - 200px); height: 100%; }
.view .order-box .ctnSwiper .inner-slide .img-box figure{ height: 100%; }
.view .order-box .ctnSwiper .inner-slide .img-box figure:first-child{ opacity: 1 !important; }
.view .order-box .ctnSwiper .inner-slide .img-box .slick-list,
.view .order-box .ctnSwiper .inner-slide .img-box .slick-track{ height: 100%; }
.view .order-box .ctnSwiper .inner-slide .wrap-box{ width: 180px; height: 100%; margin-left: 20px; flex-shrink:0; }
.view .order-box .ctnSwiper .inner-slide .imgSwiper{ height: calc(100% - 50px); overflow: hidden;}
.view .order-box .ctnSwiper .inner-slide .imgSwiper .slick-list{ margin-bottom: -20px;}
.view .order-box .ctnSwiper .inner-slide .imgSwiper .slide{ position: relative; width: 100%; height: 114px; margin-bottom: 20px; cursor:pointer; }
.view .order-box .ctnSwiper .inner-slide .imgSwiper .slide:after{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); 
opacity: 0;}
.view .order-box .ctnSwiper .inner-slide .imgSwiper .slide img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover;
height: 100%; }
.view .order-box .ctnSwiper .inner-slide .imgSwiper .slide[data-slick-index="0"]:after,
.view .order-box .ctnSwiper .inner-slide .imgSwiper .slide.slick-current:after{ opacity: 1;}
.view .order-box .ctnSwiper .inner-slide .arrow-box{ padding-top: 30px; display:flex; justify-content:center; }
.view .order-box .ctnSwiper .inner-slide .arrow-box button{ display:flex; align-items:center; }
.view .order-box .ctnSwiper .inner-slide .arrow-box button:first-child:after{ content:''; display:block; width: 1px; height: 10px; background: #ddd; margin: 0 30px; }

.calender .select-box{ display:flex; justify-content:center; }
.calender .select-box select{ margin: 0 auto; border: 3px solid #000; width: 450px; height: 70px; background: url(/img/sub/selectArrow.png) no-repeat top 50% right 30px; padding: 0 30px;
color:#111; font-weight: 500; letter-spacing: -0.6px;}
.calender .content .tab-box{ display:flex; justify-content:space-between; align-items:center; margin: 30px 0; }
.calender .content .tab-box li button{ color: #EEE; font-variant-numeric: lining-nums proportional-nums; font-family: var(--syn); font-weight: 600; font-size:100px; }
.calender .content .tab-box li:nth-child(2) button{ color:#000; font-weight: 600; font-size:150px; }
.calender .content .status{ display:flex; justify-content:flex-end; margin-bottom: 30px; }
.calender .content .status li:not(:last-child){ margin-right: 10px; }
.calender .content .status li button{ padding: 0 15px; height: 40px; border:1px solid #ddd; color:#999; letter-spacing: -0.54px; display:flex; align-items:center; transition:all 0.3s; }
.calender .content .status li button svg{ margin-right:10px; }
.calender .content .status li.on button{ border:1px solid #000; color:#333; }
.calender .content .status li.on button svg path{ stroke:#000; }
.calender .content .year-box .month-box{ border:1px solid #ddd; border-right:none; border-bottom:none; display:flex; flex-wrap:wrap; }
.calender .content .year-box .month-box .item-box{ border-right:1px solid #ddd; border-bottom:1px solid #ddd; width: 25%; min-height: 420px; padding: 40px; }
.calender .content .year-box .month-box .item-box .month{ font-family: var(--syn); color:#000; font-weight: 600; font-variant-numeric: lining-nums proportional-nums;}
.calender .content .year-box .month-box .item-box .month em{ display:block; color:#aaa; margin-bottom: 5px; }
.calender .content .year-box .month-box .item-box .txt-box{ margin-top: 30px; }
.calender .content .year-box .month-box .item-box .txt-box a{ display:block; }
.calender .content .year-box .month-box .item-box .txt-box a:not(:last-child){ padding-bottom: 30px; }
.calender .content .year-box .month-box .item-box .txt-box .info-box p{ position: relative; color: #222; font-weight: 500; letter-spacing: -0.6px; }
.calender .content .year-box .month-box .item-box .txt-box .info-box p em{ display:block; padding: 0 15px; height: 30px; line-height: 30px; background: #999; color:#fff; font-weight: 500; letter-spacing: -0.45px; margin-bottom: 10px;  width: fit-content;}
.calender .content .year-box .month-box .item-box .txt-box .info-box p span{ display: inline; background-image: linear-gradient(#333, #333); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.3s;}
.calender .content .year-box .month-box .item-box .txt-box .info-box p.on em{ background: #000; }
.calender .content .year-box .month-box .item-box .txt-box a:hover .info-box p span{ background-size: 100% 1px; }
.calender .content .year-box .month-box .item-box .txt-box .info-box ul,
.calender .content .year-box .month-box .item-box .link-box{ display:none; }
.calender .content .year-box .month-box .item-box .txt-box .img-pop{ position: relative; position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; max-width:1600px; width: 100%; background: #fff; overflow: hidden; padding: 100px; cursor:auto; z-index: 10000; transition:all 0.5s; opacity: 0; pointer-events:none; }
.calender .content .year-box .month-box .item-box .txt-box .img-pop.on{ opacity: 1; pointer-events:auto; }
.calender .content .year-box .month-box .item-box .txt-box .img-pop .close{ position: absolute; top: 35px; right: 40px; cursor:pointer; }
.calender .content .year-box .month-box .item-box .txt-box .inner{ position: relative; overflow: hidden;}
.calender .content .year-box .month-box .item-box .txt-box .main-slide .slide{ position: relative; display:flex; height: 600px;}
.calender .content .year-box .month-box .item-box .txt-box .main-slide .slide.on{ opacity: 1 !important;}
.calender .content .year-box .month-box .item-box .txt-box .main-slide .slide figure{ width: 640px; height: 100%; flex-shrink:0; margin-right: 60px; }
.calender .content .year-box .month-box .item-box .txt-box .main-slide .slide .title{ margin-top: 100px; color:#000; font-weight: 500; letter-spacing: -0.92px; }
.calender .content .year-box.list .month-box{ border:none; }
.calender .content .year-box .month-box .item-box .txt-box .sub-wrap{ position: absolute; bottom: 0; right: 0; width: calc(100% - 700px); overflow: hidden; z-index: 5;}
.calender .content .year-box .month-box .item-box .txt-box .sub-slide .slide{ position: relative; width: 132px; height: 125px; cursor:pointer; margin-right: 10px; }
.calender .content .year-box .month-box .item-box .txt-box .sub-slide .slide img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
.calender .content .year-box .month-box .item-box .txt-box .sub-slide .slick-current:after{ content:''; display:block; width: 100%; height: 125px; position: absolute; top: 0; left: 0; 
background: rgba(0,0,0,0.6);}
.calender .content .year-box .month-box .item-box .txt-box .sub-wrap .arrow-box{ display:flex; margin-bottom: 185px; }
.calender .content .year-box .month-box .item-box .txt-box .sub-wrap .arrow-box button{ width: 70px; height: 70px; border: 2px solid #000; display:flex; justify-content:center; align-items:center; }
.calender .content .year-box .month-box .item-box .txt-box .sub-wrap .arrow-box button.prev{ margin-right: 10px;}

.calender .content .year-box.list .month-box .item-box{ width: 100%; min-height: auto; display:flex; align-items:center; padding: 60px 80px; border:1px solid #ddd;}
.calender .content .year-box.list .month-box .item-box:not(:last-of-type){ margin-bottom: 20px; }
.calender .content .year-box.list .month-box .item-box .month{ min-width:300px; flex-shrink:0; }
.calender .content .year-box.list .month-box .item-box .txt-box{ width: 100%; margin-top: 0; display:flex; align-items:center; justify-content:space-between; }
.calender .content .year-box.list .month-box .item-box .txt-box a{ display:flex; justify-content:space-between; align-items:center; width: 100%; }
.calender .content .year-box.list .month-box .item-box .txt-box a:not(:last-of-type){ border-bottom:1px dashed #ccc; margin-bottom: 30px; }
.calender .content .year-box.list .month-box .item-box .txt-box .info-box p span{ font-size:30px; }
.calender .content .year-box.list .month-box .item-box .txt-box .info-box ul{ margin-top: 20px; }
.calender .content .year-box.list .month-box .item-box .txt-box .info-box ul li{ color:#666; font-weight: 300; letter-spacing: -0.45px; }
.calender .content .year-box.list .month-box .item-box .txt-box .info-box ul li img{ margin-right: 5px;}
.calender .content .year-box.list .month-box .item-box .txt-box .info-box ul li:not(:last-child){ margin-bottom: 10px;}
.calender .content .year-box.list .month-box .item-box .txt-box .info-box ul,
.calender .content .year-box.list .month-box .item-box .link-box{ display:block; }
.calender .content .year-box.list .month-box .item-box .txt-box a:hover .info-box p span{ background-size: 0 1px; }
.calender .content .year-box.list .month-box .item-box .txt-box a:hover #viewbtn span:after{ width: 100%; }
.calender .content .year-box.list .month-box .item-box .txt-box a:hover #viewbtn figure .on{ transform: translate(20px, -20px); opacity: 0; }
.calender .content .year-box.list .month-box .item-box .txt-box a:hover #viewbtn figure .off{ transform: translate(0, 0); opacity: 1; }

.guide .content .flex-box{ gap:100px; }
.guide .content .flex-box:not(:last-child){ margin-bottom: 60px; }
.guide .content .flex-box .item-box{ position: relative; width: calc((100% - 300px) / 4); height: 375px; border-radius:50%; background: #F5F5F5; text-align: center; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.guide .content .flex-box .item-box:after{ content:''; display:block; width: 100px; height: 2px; background: url(/img/sub/guideLine.png) 50% 50%; position: absolute; transform:translateY(-50%); top: 50%; left: 100%; }
.guide .content .flex-box .item-box:not(:first-child):before{ content:''; display:block; width: 10px; height: 10px; border-radius:50%; background: #000; position: absolute; transform:translateY(-50%); top: 50%; left: -5px; z-index: 2;}
.guide .content .flex-box .item-box:last-child:after{ transform:translateX(-50%) rotate(90deg); top: auto; bottom: -30px; left: 50%; width: 60px;}
.guide .content .flex-box .item-box .step{ color:#aaa; font-family: var(--syn); font-weight: 600; font-variant-numeric: lining-nums proportional-nums; text-transform: uppercase; }
.guide .content .flex-box .item-box > figure{ margin: 45px 0 30px;}
.guide .content .flex-box .item-box .title{ color:#111; font-weight: 500; letter-spacing: -0.7px; }
.guide .content .flex-box .item-box #viewbtn.btn{ background: none; height: auto; width: auto; text-align: left; color:#333; padding: 0; display:inline-flex; justify-content: center; margin-top: 10px; }
.guide .content .flex-box .item-box #viewbtn.btn:after{ background: #333; height: 1px;}
.guide .content .flex-box .item-box #viewbtn.btn figure{ margin-left: 10px;}
.guide .content .flex-box .item-box.last{ background: #fff; }
.guide .content .flex-box .item-box.last figure:after{ content:''; width: calc(100% - 20px); height: calc(100%  - 20px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 10px; border-radius: 50%; background: linear-gradient(150deg, rgba(0, 72, 152, 1) 15%, rgba(0, 114, 96, 1) 30%, rgba(87, 158, 215, 1) 65%, rgba(248, 181, 0, 1) 83%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 1;  }
.guide .content .flex-box .item-box.last .step{ color:#333; }
.guide .content .flex-box.reverse{ position: relative; z-index: -1;flex-direction: row-reverse; }
.guide .content .flex-box.reverse .item-box:after{ left: auto; right: 100%; transform:translateY(-50%) rotate(180deg);}
.guide .content .flex-box.reverse .item-box:before{ top: 50%; left: auto; right: -5px; transform:translateY(-50%); z-index: 5;}
.guide .content .flex-box.reverse .item-box:first-child:before{ content:''; display:block; width: 10px; height: 10px; border-radius:50%; background: #000; position: absolute; transform:translateX(-50%); top: -5px; left: 50%;}
.guide .content .flex-box.reverse .item-box.last:after{ display:none; }
.guide .btn-box{ border: 1px solid #DDD; padding: 80px; display:flex; justify-content:space-between; align-items:center; }
.guide .btn-box p{ color:#333; font-weight: 300; letter-spacing: -0.6px; }
.guide .btn-box p img{ margin-right: 10px;}
.guide .btn-box div{ display:flex; align-items:center; }
.guide .btn-box div .btn:not(:last-child){ margin-right:20px ; }

#guide-m .content .flex-box{ margin-bottom: 200px; }
#guide-m .content .flex-box .item-box:not(:first-child):before{ z-index: 5;}
#guide-m .content .flex-box .item-box:last-child:after{ display:none; }
#guide-m .sec-box dl{ display:flex; padding: 60px 0 150px; border-top:3px solid #000; }
#guide-m .sec-box dl dt{ min-width:400px; color:#111; font-weight: 500; letter-spacing: -1.2px; flex-shrink:0; }
#guide-m .sec-box dl dd .item-box:not(:last-child){ margin-bottom: 60px; }
#guide-m .sec-box dl dd .item-box .title{ display:flex; align-items: center; margin-bottom: 30px; color:#111; font-weight: 500; letter-spacing: -0.66px; }
#guide-m .sec-box dl dd .item-box .title img{ margin-right: 10px; flex-shrink:0; }
#guide-m .sec-box dl dd .item-box .txt{ color:#666; font-weight: 300; letter-spacing: -0.6px; line-height: 1.6; }
#guide-m .sec-box dl dd .item-box .txt:not(:last-child){ margin-bottom: 15px; }
#guide-m .sec-box dl dd .item-box #viewbtn{ margin-top: 60px; }
#guide-m .sec-box dl dd .item-box ul li:not(:last-child){ margin-bottom: 30px; }
#guide-m .sec-box dl dd .item-box ul li span{ display:flex; align-items:center; color:#333; font-weight: 500; letter-spacing: -0.6px; margin-bottom: 15px; }
#guide-m .sec-box dl dd .item-box ul li span:before{ content:''; display:block; width: 6px; height: 6px; background:#000; margin-right: 10px; flex-shrink:0;  }
#guide-m .sec-box dl dd .item-box ul li p{ color:#666; font-weight: 300; letter-spacing: -0.6px; }
#guide-m .sec-box dl dd .item-box ul li p:not(:last-child){ margin-bottom: 10px;}
#guide-m .sec-box dl dd .item-box .stit{ color:#333; font-weight: 500; letter-spacing: -0.6px; margin-bottom: 15px;}
#guide-m .sec-box dl dd .item-box .table-box table{ border-top: 2px solid #000; }
#guide-m .sec-box dl dd .item-box .table-box table tr{ height: 60px; }
#guide-m .sec-box dl dd .item-box .table-box table tr *{ border-bottom:1px solid #eee; text-align: center; letter-spacing: -0.54px; }
#guide-m .sec-box dl dd .item-box .table-box table tr th{ color:#333; font-weight: 500; }
#guide-m .sec-box dl dd .item-box .table-box table tr td{ color:#666; font-weight: 300; }
#guide-m .sec-box dl dd .item-box .btxt{ color:#666; font-weight: 300; letter-spacing: -0.54px; margin-top: 30px; }
#guide-m .sec-box dl dd .order-box{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
#guide-m .sec-box dl dd .order-box div{ position: relative; width: 200px; height: 200px; text-align: center; border-radius:50%; background: #F5F5F5;	padding-top: 40px; }
#guide-m .sec-box dl dd .order-box div .step{ color:#aaa; font-variant-numeric: lining-nums proportional-nums; font-family: var(--syn); font-weight: 600; text-transform: uppercase; margin-bottom: 15px;}
#guide-m .sec-box dl dd .order-box div .title{ color:#111; font-weight: 500; letter-spacing: -0.6px; }
#guide-m .sec-box dl dd .order-box div .title em{ font-weight: 300; letter-spacing: -0.54px; }
#guide-m .sec-box dl dd .order-box div.last{ background: #fff; }
#guide-m .sec-box dl dd .order-box div.last:after{ content:''; width: calc(100% - 10px); height: calc(100%  - 10px) ; aspect-ratio: 1; content: ""; position: absolute; top: 0; left: 0; padding: 5px; border-radius: 50%; background: linear-gradient(150deg, rgba(0, 72, 152, 1) 15%, rgba(0, 114, 96, 1) 30%, rgba(87, 158, 215, 1) 65%, rgba(248, 181, 0, 1) 83%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 1;  }
#guide-m .sec-box dl dd .order-box div:not(:last-child):after{ content:''; display:block; width: 40px; height: 2px; background: url(/img/sub/orderLine2.png) 50% 50%; position: absolute; transform:translateY(-50%); top: 50%; left: 100%;  } 
#guide-m .sec-box dl dd .order-box div:not(:first-child):before{ content:''; display:block; width: 10px; height: 10px; border-radius:50%; background: #000; position: absolute; transform:translateY(-50%); 
top: 50%; left: -3px; z-index: 5;}
#guide-m .sec-box .last-box{ border: 1px solid #000; padding: 70px; }
#guide-m .sec-box .last-box li{ display:flex; align-items:center; color:#333; font-weight: 300; letter-spacing: -0.6px; }
#guide-m .sec-box .last-box li:before{ content:''; display:block; width: 6px; height: 6px; background:#000; margin-right: 10px; flex-shrink:0; }
#guide-m .sec-box .last-box li:not(:last-child){ margin-bottom: 15px; }

#interest .tab-box{ display:flex; align-items:center; justify-content:center; }
#interest .tab-box li{ display:flex; align-items:center; }
#interest .tab-box li:not(:last-child):after{ content:''; display:block; width: 1px; height: 10px; background: #ddd; margin: 0 60px; }
#interest .tab-box li a{  letter-spacing: -0.9px; font-weight: 500; color:#aaa; }
#interest .tab-box li.on a{ color:#000; }
 
#as .w1800 > .title{ color:#333; letter-spacing: -0.72px; margin-bottom: 60px; text-align: center; }
#as .ctn-box{ display:flex; gap:20px; }
#as .ctn-box .item-box{ width: calc((100% - 60px) / 4); height: 435px; padding: 60px; border: 1px solid #DDD; display:flex; flex-direction:column; justify-content:space-between; }
#as .ctn-box .item-box .txt{ position: relative; display:inline-block; color:#333; letter-spacing: -0.6px; margin-bottom: 30px; border-bottom:1px solid #000; }
#as .ctn-box .item-box .num{ color:#111; font-variant-numeric: lining-nums proportional-nums; font-family: var(--syn); font-weight: 500; }
#as #img-flex .content .item-box .txt-box .link-box{ justify-content:flex-end; }
#as #img-flex .content .item-box .txt-box .link-box a{ width: 160px; }
#as #img-flex .content .item-box .txt-box .stxt{ font-weight: 500; }
#as #img-flex .content .item-box.item01 .txt-box{ background: #603930;}
#as #img-flex .content .item-box.item02 .txt-box{ background: #18273A;}
#as #img-flex .content .item-box.item03 .txt-box{ background: #AFA297;}

#inquiry .flex-box{ margin-bottom: 100px;}
#inquiry .content .flex-box .item-box:last-child:after{ display:none; }
#inquiry .btn-box{ border:none; padding: 0; justify-content:center; }
#inquiry .btn-box a:not(:last-child){ margin-right: 20px;}
#inquiry .btn-box a#viewbtn{ width: 300px; height: 80px; }


:root {
	--inputH : 60px; 
}
.form .content{ border: 1px dashed #DDD;  padding: 150px;}
.form .content > dl:not(:last-child){ margin-bottom: 100px; }
.form .content > dl dt{ display:flex; justify-content:space-between; align-items:flex-end; color:#111; font-weight: 500; letter-spacing: -1.2px; margin-bottom: 30px; }
.form .content > dl dt span{ color:#666; letter-spacing: -0.54px; font-weight: 400; }
.form .content > dl dt span em{ font-weight: 500; color:var(--mainC); }
.form .content > dl dt.fs{ justify-content:flex-start; align-items:center;  }
.form .content > dl dt.fs span{ margin-left: 30px; }
.form .content > dl dd{ border-top: 3px solid #000; font-size:18px; width: 100%; }
.form .content > dl dd *:not(.title){ font-size:18px; color:#333; letter-spacing: -0.54px;  }
.form .content > dl dd .item-box{ display:flex; align-items:center; padding: 20px; border-bottom: 1px solid #EEE; width: 100%; }
.form .content > dl dd .item-box > .title{ min-width:300px; flex-shrink:0; padding: 0 30px; height: var(--inputH); line-height: var(--inputH); color:#333; font-weight: 500; letter-spacing: -0.6px;}
.form .content > dl dd .item-box > .title em{ color:var(--mainC); }
.form .content > dl dd .item-box > div{ width: 100%; }
.form .content > dl dd .item-box input,
.form .content > dl dd .item-box select,
.form .content > dl dd .item-box .input-box.file label .txt{ width: 500px; height: var(--inputH); background: #f5f5f5; padding: 0 20px; }
.form .content > dl dd .item-box input::placeholder{ color:#999; }
.form .content > dl dd .item-box select{ background: url(/img/sub/selectArrow.png) no-repeat top 50% right 20px #f5f5f5;}
.form .content > dl dd .item-box textarea{ width: 100%; background: #f5f5f5; padding: 20px; resize:none; height: 240px; }
.form .content > dl dd .item-box .btn{ display:inline-flex; justify-content:center; align-items:center;  box-shadow: 0 0 0 2px #000 inset; width: 180px; height: var(--inputH); text-align: center; padding: 0 10px; letter-spacing: -0.54px; color:#333; font-weight: 500; margin-left: 10px; }
.form .content > dl dd .item-box *.w690{ width: 690px; }
.form .content > dl dd .item-box *.w150{ width: 150px; }
.form .content > dl dd .item-box *.w100{ width: 100%; }
.form .content > dl dd .item-box .btxt{ color:#999; font-weight: 300; letter-spacing: -0.54px; margin-top: 10px; }
.form .content > dl dd .item-box .select-box.flex-box{ align-items:center; }
.form .content > dl dd .item-box .select-box select{ margin-right: 30px; }
.form .content > dl dd .item-box .select-box span{ margin: 0 20px 0 10px;}
.form .content > dl dd .item-box .select-box div{ display:flex; align-items:center; }
.form .content > dl dd .item-box input[type="file"]{ display:none; }
.form .content > dl dd .item-box .flex-box{ align-items:center; }
.form .content > dl dd .item-box .input-box.file label{ display:flex; align-items:center; cursor:pointer; }
.form .content > dl dd .item-box .input-box.file label .txt{ width: 500px; height: var(--inputH); line-height: var(--inputH); background: #f5f5f5; text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.form .content > dl dd .item-box .pw-box .flex-box{ align-items:center; }
.form .content > dl dd .item-box .pw-box .flex-box:not(:last-child){ margin-bottom: 10px; }
.form .content > dl dd .item-box .pw-box .flex-box input{ margin-right: 30px; }
.form .content > dl dd .item-box .pw-box .flex-box div{ display:flex; align-items:center; }
.form .content > dl dd .item-box .pw-box .flex-box .txt{ color:#666; letter-spacing: -0.54px; display:flex; align-items:center; }
.form .content > dl dd .item-box .pw-box .flex-box .txt:not(:last-child){ margin-right: 20px; }
.form .content > dl dd .item-box .pw-box .flex-box .txt span{ width: 25px; height: 25px; display:flex; justify-content:center; align-items:center; margin-right: 5px; border-radius:50%; border:2px solid #aaa; flex-shrink:0; }
.form .content > dl dd .item-box .stxt { margin-top:10px; }
.form .content > dl dd .item-box .pw-box .flex-box .txt.on{ color:var(--mainC); }
.form .content > dl dd .item-box .pw-box .flex-box .txt.on span{ border:2px solid var(--mainC); }
.form .content > dl dd .item-box .pw-box .flex-box .txt.on span path{ stroke: var(--mainC); }
.form .content > dl dd .item-box .pw-box .flex-box .error{ color:#EE1A1A; letter-spacing: -0.54px; display:flex; align-items:center; transition:opacity 0.2s; }
.form .content > dl dd .item-box .pw-box .flex-box .error.off{ opacity: 0; pointer-events:none; }
.form .content > dl dd .item-box .pw-box .flex-box .error img{ margin-right: 5px; }
.form .content > dl dd .item-box .post-box > *:not(:last-child){ margin-bottom: 10px; } 
.form .content > dl dd .item-box .post-box div{ align-items:center; }
.form .content > dl dd .item-box .post-box a{ }
.form .content > dl dd .item-box .radio-box{ display:flex; }
.form .content > dl dd .item-box .radio-box div{ margin-right: 60px; }
.form .content > dl dd .item-box .radio-box div input{ display:none; }
.form .content > dl dd .item-box .radio-box div label{ display:flex; align-items:center; cursor:pointer; }
.form .content > dl dd .item-box .radio-box div label span{ position: relative; width: 25px; height: 25px; border-radius:50%; border:2px solid #aaa; margin-right: 10px; transition:all 0.2s; display:flex; justify-content:center; align-items:center; }
.form .content > dl dd .item-box .radio-box div label span:after{ content:''; display:block; width: 15px; height: 15px; border-radius:50%; background: #aaa; transition:all 0.2s; }
.form .content > dl dd .item-box .radio-box div input[type="radio"]:checked + label span{ border:2px solid var(--mainC); } 
.form .content > dl dd .item-box .radio-box div input[type="radio"]:checked + label span:after{ background: var(--mainC); } 
.form .content > dl dd .item-box .birth-box p{ display:inline-block; }
.form .content > dl dd .item-box .birth-box p:not(:last-child){ margin-right: 20px; }
.form .content > dl dd .item-box .birth-box span{ margin-left: 10px; }
.form .content > dl dd .item-box .birth-box span:last-child{ margin-right: 0; }
.form .content > dl dd .item-box .email-box > div:not(:last-child){ margin-bottom: 10px; } 

.form .content .policy-box .title{  color:#111; font-weight: 500; letter-spacing: -1.2px; margin-bottom: 30px; } 
.form .content .policy-box .policy-wrap{ height: 360px; border:1px solid #ddd; padding: 30px; padding-left: 60px; }
.form .content .policy-box .policy-wrap .title{ display:none; }
.form .content .policy-box .policy-wrap .scroll-box{ height: 100%; overflow-y: scroll; color: #666; font-weight: 300; letter-spacing: -0.54px; line-height: 1.66; padding-right: 30px;}
.form .content .policy-box .policy-wrap .scroll-box::-webkit-scrollbar { width: 2px; background: transparent;}
.form .content .policy-box .policy-wrap .scroll-box::-webkit-scrollbar-thumb { background: #aaa; }
.form .content .policy-box .policy-wrap .scroll-box .title-box,
.form .content .policy-box .policy-wrap .scroll-box dl:not(:last-child){ margin-bottom: 20px;}
.form .content .policy-box .policy-wrap .scroll-box dl dt{ font-weight: 500;}
.form .content .policy-box .agree-box label p { display: flex; align-items: center; color: #333; letter-spacing: -0.6px; cursor: pointer; }
.form .content .policy-box .agree-box label p span { width: 25px; height: 25px; border-radius: 50%; background: #ccc; margin-right: 10px; transition: all 0.2s; display: flex; justify-content: center; align-items: center; }
.form .content .policy-box .agree-box input[type="checkbox"]:checked + label span { background: var(--mainC); }
.form .btm-box .txt{ text-align: center; color:#666; font-weight: 300; letter-spacing: -0.6px; }
.form .btm-box .txt em{ color:#333; font-weight: 500; }
.form .btm-box div{ justify-content:center; margin-top: 60px;}
.form .btm-box div #viewbtn{ width: 300px; height: 80px;}
.form .btm-box div #viewbtn.b{ margin-right: 20px;}
.form .content > dl dd .item-box input:disabled{ border: 1px solid #EEE; background: #FFF;}
.form .content > dl dd .item-box input:disabled::placeholder{ color:#aaa; font-weight: 300;}
.form .content .btn-txt{ border: 1px solid #000; padding: 70px; }
.form .content .btn-txt li{ display:flex; color:#333; font-weight: 300; letter-spacing: -0.6px; }
.form .content .btn-txt li:not(:last-child){ margin-bottom: 15px; }
.form .content .btn-txt li:before{ content:''; display:block; width: 6px; height: 6px; background: #000; margin-top: 10px; margin-right: 10px; flex-shrink:0; }
 
#faq .content .tab-box{ display:flex; align-items:center; margin-bottom: 40px; }
#faq .content .tab-box li{ display:flex ; align-items:center; }
#faq .content .tab-box li:not(:last-child):after{ content:''; display:block; width: 1px; height: 10px; background: #ddd; margin: 0 30px; }
#faq .content .tab-box li button{ color:#666; font-weight: 500; letter-spacing: -0.6px; }
#faq .content .tab-box li.on button{ color:#000; font-weight: 600; }
#faq .content .ctn-box{ }
#faq .content .item-box{ border: 1px solid #DDD; padding: 0 100px; cursor:pointer; }
#faq .content .item-box:not(:last-child){ margin-bottom: 20px; }
#faq .content .item-box dl{ display:flex; padding: 50px 0; }
#faq .content .item-box dl dt{ min-width:30px; margin-right: 30px; font-family: var(--syn); font-weight: 600; color:#ccc; flex-shrink:0; transition:all 0.3s; }
#faq .content .item-box .q-box dd{ display:flex; align-items:center; justify-content:space-between; width: 100%; }
#faq .content .item-box .q-box dd p{ display:flex; align-items:center; color:#111; font-weight: 500; letter-spacing: -0.72px; }
#faq .content .item-box .q-box dd p span{ height: 30px; padding: 0 15px; display:flex; justify-content:center; align-items:center; background: #000; color:#fff; font-weight: 500;
letter-spacing: -0.45px; margin-right: 30px; }
#faq .content .item-box .q-box dd figure{ display:flex; align-items:center; }
#faq .content .item-box .q-box dd figure img{ transition:all 0.5s; opacity: 0.3; }
#faq .content .item-box .a-box{ display:none; border-top:1px solid #DDD; }
#faq .content .item-box .a-box dt{ display:inline-block; color:var(--mainC); } 
#faq .content .item-box .a-box dd{ color:#666; font-weight: 300; line-height: 1.7; letter-spacing: -0.6px; }
#faq .content .item-box .a-box dd p.title{ color:#333; font-weight: 500; letter-spacing: -0.72px; margin-bottom: 30px; }
#faq .content .item-box .a-box dd p:not(:last-child){ margin-bottom: 20px;}
#faq .content .item-box.on .q-box dt{ color:#000; }
#faq .content .item-box.on .q-box dd figure img{ transform:rotate(-180deg); opacity: 1; }

#introduce section:not(:last-child){ margin-bottom: 200px; }
#introduce .intro .title-box{ text-align: center; color:#333; font-weight: 300; letter-spacing: -0.66px; line-height: 1.63;  }
#introduce .intro .title-box figure{ margin-bottom: 90px; }
#introduce .intro .ctn-box{ display:flex; justify-content:center; align-items:center; }
#introduce .intro .ctn-box .item-box{ width: 400px; height: 400px; border-radius:50%; text-align: center; padding: 0 20px; background: var(--mainC); font-weight: 600; font-family: var(--gan);
display:flex; justify-content:center; align-items:center; color:#fff; }
#introduce .intro .ctn-box .item02{ background: #007260; }
#introduce .intro .ctn-box .item03{ background: #F8B500; }
#introduce .intro .ctn-box figure{ display:flex; justify-content:center; align-items:center;  margin: 0 40px; flex-shrink:0; }
#introduce .ci .title{ color:#111; letter-spacing: -1.5px; font-weight: 500; margin-bottom: 30px; }
#introduce .ci .title em{ font-family: var(--gan); letter-spacing: 1;}
#introduce .ci .ctn-box{ display:flex; flex-wrap:wrap; gap:20px; }
#introduce .ci .ctn-box .item-box{ position: relative; width: calc((100% - 20px) / 2); height: 300px; display:flex; justify-content:center; align-items:center; background: url(/img/sub/introduceBg.png) 50% 50%; border:1px solid #eee; }
#introduce .ci .ctn-box .item-box span{ position: absolute; top: 0; left: 0; min-width:125px; height: 30px; line-height: 30px; color:#fff; padding: 0 15px; font-weight: 500; letter-spacing: -0.45px;
z-index: 2; background: #000;}
#introduce .ci .btn-box{ display:flex; justify-content:center; }
#introduce .ci .btn-box a{ width: 300px; height: 80px; }
#introduce .ci .btn-box a em{ font-family: var(--gan); }
#introduce .info .ctn-box .item-box{ display:flex; height: 640px; opacity: 1; }
#introduce .info .ctn-box .item-box > *{ width: 50%; height: 100%; }
#introduce .info .ctn-box .item-box .txt-box{ padding: 60px; background: #92745D; display:flex; flex-direction:column; justify-content:space-between; }
#introduce .info .ctn-box .item-box .txt-box *{ filter:blur(10px); -webkit-filter:blur(10px); transition:all 0.7s 0.1s; }
#introduce .info .ctn-box .item-box .txt-box .title{ color: #EADAB9; font-family: var(--gan); font-weight: 600; }
#introduce .info .ctn-box .item-box .txt-box .txt{ color:#fff; font-weight: 300; line-height: 1.7; letter-spacing: -0.6px; }
#introduce .info .ctn-box .item-box .img-box{ position: relative; display:flex; justify-content:center; align-items:center; }
#introduce .info .ctn-box .item-box .img-box .fit-box{ position: relative; position:absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: -1;}
#introduce .info .ctn-box .item-box .img-box .fit-box img{ min-width:101%; }
#introduce .info .ctn-box .item-box .img-box .fit-box:after{ content:''; display:block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.2); transition:all 0.5s; }
#introduce .info .ctn-box .item-box.item02 .txt-box{ background: #4F6A7B; }
#introduce .info .ctn-box .item-box:hover .img-box .fit-box:after{ opacity: 0; }
#introduce .info .ctn-box .item-box.aos-animate .txt-box *{ filter:blur(0); -webkit-filter:blur(0); }
#introduce .character > div{ display:flex; overflow: hidden;}
#introduce .character > div > .title{ flex-shrink:0; margin-left: 60px; margin-right: 185px; color:#111; font-family: var(--gan); font-weight: 500; line-height: 1.4; }
#introduce .character .slide-box{ width: 100%; overflow: hidden;}
#introduce .character .slide-box .swiper-slide{ width: 400px; margin-right: 20px; background: var(--mainC); }
#introduce .character .slide-box .swiper-slide figure{ height: 280px; background: #044185; display:flex; justify-content:center; align-items:center; }
#introduce .character .slide-box .swiper-slide .txt-box{ height: 290px; padding: 30px; display:flex; flex-direction:column; justify-content:space-between; }
#introduce .character .slide-box .swiper-slide .txt-box .title{ color:#fff; font-weight: 500; letter-spacing: -0.84px; }
#introduce .character .slide-box .swiper-slide .txt-box .title span{ display:block; margin-bottom: 20px; font-family: var(--syn); letter-spacing: 0;}
#introduce .character .slide-box .swiper-slide .txt-box .txt{ color:#fff; font-weight: 300; line-height: 1.66; letter-spacing: -0.54px; }
#introduce .character .slide-box .swiper-slide.slide02{ background: #F8B500; }
#introduce .character .slide-box .swiper-slide.slide02 figure{ background: #E2A605;}
#introduce .character .slide-box .swiper-slide.slide03{ background: #851119; }
#introduce .character .slide-box .swiper-slide.slide03 figure{ background: #68070D;}
#introduce .character .slide-box .swiper-slide.slide04{ background: #007260; }
#introduce .character .slide-box .swiper-slide.slide04 figure{ background: #005B4D;}
#introduce .character .slide-box .swiper-slide.slide05{ background: #579ED7; }
#introduce .character .slide-box .swiper-slide.slide05 figure{ background: #4E93CA;}

#news .content{ display:flex; gap:80px 20px; flex-wrap:wrap; }
#news .content .item-box{ width: calc((100% - 60px) / 4); }
#news .content .item-box figure{ position: relative; border:1px solid #ddd; width: 100%; aspect-ratio: 435 / 300; height: auto;}
#news .content .item-box figure img{ transition:all 0.7s; }
#news .content .item-box .title{ margin: 20px 0 10px; text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
color:#222; font-weight: 500; letter-spacing: -0.66px; }
#news .content .item-box ul,
#news .content .item-box ul li{ display:flex; align-items:center; color:#666; font-weight: 300; letter-spacing: -0.45px; }
#news .content .item-box ul li:not(:last-child){ margin-right:10px; }
#news .content .item-box ul li img{ margin-right: 5px; }
#news .content .item-box:hover figure img{ transform:translate(-50%, -50%) scale(1.1); }

#news_view .title-box{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 60px; }
#news_view .title-box .title{ color:#111; font-weight: 500; letter-spacing: -1.38px; }
#news_view .title-box ul{ display:flex; align-items:center; color:#666; font-weight: 300; letter-spacing: -0.45px; }
#news_view .title-box ul li{ display:flex; align-items:center; }
#news_view .title-box ul li:not(:last-child){ margin-right:10px ; }
#news_view .title-box ul li img{ margin-right: 5px; }
#news_view .content{ border-top:3px solid #000; padding: 50px 0 0;}
#news_view .content .inner{ max-width:1500px; width: 100%; margin: 0 auto; }
#news_view .content .inner .ctn-box> figure{ margin-bottom: 60px; text-align: center; }
#news_view .content p{ font-size:18px; line-height: 1.7; color:#666; letter-spacing: -0.6px; }
#news_view .content .file-box{ background: #f5f5f5; padding: 50px 100px; }
#news_view .content .file-box a{ display:flex; justify-content:space-between; }
#news_view .content .file-box a:not(:last-child){ margin-bottom: 20px; }
#news_view .content .file-box .txt{ display:flex; align-items:center; color:#666; font-weight: 300; letter-spacing: -0.6px; }
#news_view .content .file-box .txt span{ min-width:100px; color:#333; font-weight: 500; margin-right: 60px; }
#news_view .content .file-box .txt span em{ font-family: var(--syn); letter-spacing: 0; font-variant-numeric: lining-nums proportional-nums;}
#news_view .content .file-box #viewbtn.btn{ background: transparent; width: auto; height: auto; color:#333; padding: 0; margin-left: 10px;}
#news_view .content .file-box #viewbtn.btn:after{ display:none; }
#news_view .content .file-box #viewbtn.btn figure{ margin-left: 10px; }
#news_view .content .file-box #viewbtn.btn span:after{ background: #000; }
#news_view .content .file-box a:hover #viewbtn.btn span:after{ width: 100%; }
#news_view .content .file-box a:hover #viewbtn figure .on{ transform: translate(20px, -20px); opacity: 0; }
#news_view .content .file-box a:hover #viewbtn figure .off{ transform: translate(0, 0); opacity: 1; }
#news_view .page-box{ display:flex; align-items:center; }
#news_view .page-box > div{ width: 100%; height: 80px; border:2px solid #eee; transition:all 0.5s; padding: 0 40px; }
#news_view .page-box > div a{ display:flex; align-items:center; gap:20px; height: 100%; }
#news_view .page-box > div .txt{ text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color:#999; font-weight: 500; letter-spacing: -0.6px; transition:all 0.5s;  }
#news_view .page-box > div figure{ opacity: 0.2; transition:all 0.5s; flex-shrink:0; }
#news_view .page-box > div.next a{ justify-content:flex-end; }
#news_view .page-box > div.next figure img{ transform:rotate(180deg); }
#news_view .page-box > div:hover{ border:2px solid #000; }
#news_view .page-box > div:hover .txt{ color:#333; }
#news_view .page-box > div:hover figure{ opacity: 1; }
#news_view .page-box .btn{ width: 300px; height: 80px; background: #fff; border:2px solid #000; color:#333; flex-shrink:0; margin: 0 20px; }
#news_view .page-box .btn:after{ display:none; }
#news_view .page-box .btn span:after{ background: #000; }

#materials .main-wrap{ background: url(/img/sub/materialsBg.png) no-repeat 50% 50% / cover; width: calc(100% - 240px); display:flex; justify-content:center; align-items:center; 
padding: 120px 20px; }
#materials .main-wrap .main-slide{ max-width:1000px; width: 100%; height: 560px; }
#materials .main-wrap .main-slide .slick-list,
#materials .main-wrap .main-slide .slick-track{ height: 100%; }
#materials .main-wrap .main-slide .slick-slide{ position: relative; height: 100%; }
#materials .main-wrap .main-slide .slick-slide *{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; width: 100%; }
#materials .sub-wrap{ width: 180px; margin-left: 60px; display: flex; justify-content: flex-end; flex-direction: column;}
#materials .sub-wrap .sub-slide .slick-slide{ width: 100%; height: 114px; margin-bottom: 15px; cursor:pointer; }
#materials .sub-wrap .sub-slide .slick-slide.slick-current{ position: relative; }
#materials .sub-wrap .sub-slide .slick-slide.slick-current:after{ content:''; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }
#materials .sub-wrap .arrow-box{ padding-top: 15px; display:flex; justify-content:center; height: 25px; }
#materials .sub-wrap .arrow-box button{ display:flex; align-items:center; }
#materials .sub-wrap .arrow-box button:first-child:after{ content:''; display:block; width: 1px; height: 10px; background: #ddd; margin: 0 30px; }

#appstatus .content{ border-top:3px solid #000; }
#appstatus .content .item-box{ display:flex; align-items:center; min-height:120px; border-bottom: 1px solid #EEE; }
#appstatus .content .item-box p{ display:flex; justify-content:center; align-items:center; width: 14%; }
#appstatus .content .item-box p.num{ width: 11%; }
#appstatus .content .item-box p.num,
#appstatus .content .item-box p.date{ color:#ccc; font-family: var(--gan); text-transform: capitalize; }
#appstatus .content .item-box p.title{ width: 69%; justify-content:flex-start; }
#appstatus .content .item-box p.title a{ color:#222; font-weight: 500; letter-spacing: -0.66px; text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
#appstatus .content .item-box.type2 p.title{ width: 100%; justify-content: center; }

.app .status span{ display:inline-block; height: 30px; line-height: 30px; color:#fff; letter-spacing: -0.45px; font-weight: 500; padding: 0 15px; }
.app .status.on span{ background: var(--mainC); }
.app .status.ing span{ background: #000; }
.app .status.off span{ background: #fff; border:1px solid #000; color:#333; }

#app_view .content{ border: 1px dashed #DDD; padding: 150px 40px; }
#app_view .content .item-box{ max-width:1500px; width: 100%; margin: 0 auto; display:flex; align-items:center; border-bottom: 1px solid #EEE; }
#app_view .content .item-box:first-child{ border-top:3px solid #000; }
#app_view .content .item-box > *{ padding: 35px 30px; display:flex; align-items:center; }
#app_view .content .item-box dt{ color:#333; font-weight: 500; letter-spacing: -0.6px; min-width:300px; }
#app_view .content .item-box dd{ color:#666; font-weight: 300; letter-spacing: -0.54px; line-height: 1.66; }
#app_view .content .item-box.title dd{ color:#333; font-weight: 400; }
#app_view .btn-box{ display:flex; justify-content:center; }
#app_view .btn-box .btn{ width: 300px; height: 80px; background: #fff; border:2px solid #000; color:#333; font-weight: 500; }
#app_view .btn-box .btn:after{ display:none; }
#app_view .btn-box .btn span:after{ background: #000; }

.account .w550{ max-width:550px; width: 100%; margin: 0 auto;}
.account .title-box{ text-align: center; }
.account .title-box .title{ color:#000; font-weight: 500; letter-spacing: -1.8px; }
.account .title-box .txt{ color:#333; line-height: 1.7; letter-spacing: -0.6px; margin-top: 30px; }
.account .input-box{ margin: 30px 0 50px;}
.account .input-box input{ width: 100%; height: 70px; padding: 0 30px; border-bottom: 2px solid #000; font-weight: 500; letter-spacing: -0.54px; color:#333; }
.account .input-box input:not(:last-child){ margin-bottom: 10px;}
.account .input-box input::placeholder{ color:#aaa; }
.account .btn-box a{ display:flex; justify-content:center; align-items:center; width: 100%; height: 80px; color:#fff; font-weight: 500; letter-spacing: -0.66px; background: var(--mainC); }
.account .btn-box button{ display:flex; justify-content:center; align-items:center; width: 100%; height: 80px; color:#fff; font-weight: 500; letter-spacing: -0.66px; background: var(--mainC); font-size: 22px;}
.account .btn-box a.sign{ background: #000; margin-top: 10px; }
.account .find-box{ display:flex; justify-content:flex-end; margin-top: 20px; }
.account .find-box a{ color:#666; font-weight: 500; letter-spacing: -0.54px; display:flex; align-items:center; }
.account .find-box a:not(:last-child):after{ content:''; display:block; width: 1px; height:10px; background: #ddd; margin: 0 20px; }

#signup h3.title{ color:#000; font-weight: 500; letter-spacing: -1.8px; margin-bottom: 80px; text-align: center; }
#signup .content{ border:none; padding: 0; }