#main{word-break:keep-all; overflow: hidden;}

#main .inner{max-width: var(--width-inner); padding: 0 50px; margin: 0 auto; box-sizing: content-box;}

.main-top {position:relative;}

/* quick-menu */
.inner.quick-pos{position: absolute; top: 0; left: 0; right: 0;}
.quick-bar { position: absolute; top: 200px; right: 50px; z-index: 99; }
.quick-menu .btn { display: block; width: 70px; height: 70px; border-radius: 10px; background: no-repeat 50% 50%; cursor: pointer; position: relative; }
.quick-menu .btn + .btn { margin-top: 12px; }
.quick-menu .btn-guide { background-color: rgba(246, 144, 0, 0.8);; background-image: url('../img/main/ic-quick1.png'); }
.quick-menu .btn-faq { background-color: rgba(67, 188, 194, 0.8);; background-image: url('../img/main/ic-quick2.png'); }
.quick-menu .btn-loc { background-color: #55575F; background-image: url('../img/main/ic-quick3.png'); }
.quick-menu .quick-text { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 4px 12px; border-radius: 5px; white-space: nowrap; transition: right 0.3s ease, opacity 0.3s ease; opacity: 0; right: -20px; z-index: -1; }
.quick-menu .btn:hover .quick-text,
.quick-menu .btn:focus .quick-text  { opacity: 1; right: 80px; z-index: 100; }

/* mainVisual */
#mainVisual{position: relative; overflow: hidden; min-height: 500px; height:100vh; }
#mainVisual .item{display: flex; flex-direction: column; justify-content: flex-end; min-height: 500px; height:100vh; padding:150px 0 200px; background: url('') center center no-repeat; background-size:cover;}
#mainVisual .txt{max-width:var(--width-inner);padding: 0 50px; margin:0 auto; font-family: var(--font-aggro); color: #fff; text-align:center;}
#mainVisual .big{font-size: 2.5rem; font-weight: 500; line-height: 1.15;}
#mainVisual p{margin-top: 20px; font-size:1.375rem; font-weight:300;}

#mainVisual .controls_w{position:absolute; bottom:110px; left:50%; display: flex; align-items: center; transform: translateX(-50%);}
#mainVisual .control-btn{background: url('') center center no-repeat; display: block; white-space: nowrap; overflow: hidden; text-indent: -999px}
#mainVisual .prev,
#mainVisual .next{width: 78px; height: 20px;}
#mainVisual .prev{margin-right:30px; background-image: url('../img/main/vis-prev.png')}
#mainVisual .next{margin-left:30px; background-image: url('../img/main/vis-next.png')}
#mainVisual .pagination{display: flex; align-items: center; min-width:64px; margin-right:15px; font-size: 1.125rem; color: #fff; font-weight: 400;}
#mainVisual .status{font-weight: 700;}
#mainVisual .total:before{content: '/'; margin: 0 5px;}

#mainVisual .progress{position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;}
#mainVisual .progress .progress-bg { stroke: rgba(255, 255, 255, 0.3); stroke-width: 5px; fill: none; }
#mainVisual .progress .progress-bar { --progress: 0; stroke: #fff; stroke-width: 5px; fill: none; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--progress))); transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.2s linear; }
#mainVisual .autoplay-toggle{position: absolute; width: 18px; height: 18px; border: none; background: no-repeat 50% 50%; background-image: url('../img/main/vis-stop.png');}
#mainVisual .autoplay-toggle.play{background-image: url('../img/main/vis-play.png')}

/* sections */
.main-sect {padding:100px 0;}

.tit-main{font-family: var(--font-aggro); text-align:center; margin-bottom:54px;}
/* .tit-main .small{font-weight: 600;} */
/* .tit-main > *{display: block;} */
.tit-main .big{font-size: 3.125rem; font-weight: 700; color: #51341B; line-height: 1; }
.tit-main .big.type-bg{display:inline-block; padding:15px 50px 10px; border-radius: 10px;background: rgba(255, 255, 255, 0.80);}
.tit-main .big .tit-point{color: var(--color-main); }
.tit-main .add{margin-top: 24px; font-size:1.25rem; font-weight:300; color:#7E4912;}

.tit-main.light .big,
.tit-main.light .add{color:#fff;}
.tit-main.light .big .tit-point{color: #FF9000; }

.more-st1{display: flex; align-items:center; justify-content:center; width:252px; padding:12px 20px; margin: 48px auto 0; border-radius:50px; border:1px solid #51341B; font-size: 1rem; font-weight: 400; color: #51341B; background-color:#fff;}
.more-st1::after{content:""; display:block; width:20px; height: 20px; margin-left:5px;  background-color: currentColor; -webkit-mask: no-repeat 50% 100%; -webkit-mask-size: 100% auto; mask: no-repeat 50% 100%; mask-size: 100% auto; -webkit-mask-image: url('../img/main/ico-link.svg'); mask-image: url('../img/main/ico-link.svg'); }
.more-st1:hover,
.more-st1:focus{background-color: #51341B; color: #fff;}

/* main-st1 */
.main-st1 {background-color: #FFFBF7;}

.main-intro{display: flex; justify-content:space-between; flex-wrap:wrap; gap: 3%;}
.main-intro > li{flex:none; width: calc(25% - 9% / 4); font-family: var(--font-aggro); text-align: center;}
.main-intro .img{height:166px; margin-bottom:27px; border-radius:15px; background: url('') center center no-repeat; background-size:cover;}
.main-intro .m-i1 .img{background-image: url('../img/main/m-i1.jpg')}
.main-intro .m-i2 .img{background-image: url('../img/main/m-i2.jpg')}
.main-intro .m-i3 .img{background-image: url('../img/main/m-i3.jpg')}
.main-intro .m-i4 .img{background-image: url('../img/main/m-i4.jpg')}
.main-intro .tit{font-size: 1rem; font-weight: 300; color:#7E4912;}
.main-intro strong{font-size: 1.5em; font-weight: 500; display:block; color:#51341B;}
.main-intro .txt{font-size: 1.063rem; font-weight: 300; color:#7E4912; margin-top:15px;}

/* main-st2 */
.main-st2{position:relative; padding-top: 94px; overflow:hidden; }
.main-st2::before{content:""; position:absolute; top: 0; left:0; z-index:-1; display:block; width:100%; height: 62%; max-height: 450px; background-color: #51341B; transform: skewY(-3deg); transform-origin: bottom left;}
.main-steps{display: flex; flex-wrap:wrap; justify-content: center; margin-top:58px; text-align: center; word-break:keep-all}
.main-steps > li{width: calc(20% - 400px / 5); position: relative;}
.main-steps > li:nth-child(odd){padding-top:40px;}
.main-steps > li:not(:first-child){margin-left: 100px;}
.main-steps > li:not(:first-child):after{position: absolute; left: -100px; top: 150px; width: 100px;height: 24px; background: url('../img/main/steps-arrow.png') center center no-repeat; content: '';}
.main-steps .ico img{display: block; margin: 0 auto;}
.main-steps .step{font-size: 1rem; color: #005BAB; font-weight: 300; margin-top:22px;}
.main-steps .c{font-size: 1.125rem; color: #51341B; font-weight: 500; margin-top:5px;}
.main-steps .light{display: block;margin-top: 10px; font-size: 1rem; font-weight: 300; color: #7E4912; }

/* main-st3 */
.pic-slide .item {margin:0 7px; border-radius:20px; overflow:hidden; background: no-repeat 50% 50%; background-size: cover;}
.pic-slide .item a{position:relative; display: block; padding-top:68%; background-color:#f5f5f5;}
.pic-slide .item img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; object-position: center; display: block;}
.pic-slide2 {direction: rtl; margin-top:16px;}

/* main-st4 */
.main-st4{background:no-repeat 50% 50%; background-size:cover; background-image: url('../img/main/bg-project.jpg');}
.main-project{display:flex; flex-wrap:wrap; gap:36px; font-size: 1.125rem; color:#fff; }
.main-project > li{position: relative; width: calc((100% - 108px)/4); flex:none;}
.main-project > li .card-asym {height:100%; padding:30px;}
.main-project .t{font-size: 1.25rem; color: #fff; margin-top:20px;}
.main-project .label{font-size: 14px; color: #fff; padding:7px 18px; border-radius: 5px 10px; background-color: #FA9819;}
.main-project .c,
.main-project .add{font-size:1.063rem; margin-top: 10px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.main-project .add{font-weight:300;}

/* main-st5 */
#mainStory .tit-main{width: 310px; padding-right:25px;}
#mainStory .tit-main .tit-point{display:block;}

.main-story_btns{display: flex; flex-wrap:wrap; gap:10px; margin-top: 50px; font-weight: 500; color :#fff; font-size: 1rem; line-height: 1;}
.main-story_btns button{padding: 10px 15px; border-radius: 10px 20px; color: #51341B; background: #F8F2EF;}
.main-story_btns button.active{background:#FA9819; color: #fff;}

/* .main-infoPhoto{column-width: 300px; column-gap: 10px; flex:1; min-width:0; margin-left: 74px;}
.main-infoPhoto .card-asym{width:100%; padding:20px 30px; margin:0 0 10px; break-inside: avoid;} */
.main-infoPhoto{display:flex; flex-wrap:wrap; gap:20px; flex:1; min-width:0; margin-left: 74px;}
.main-infoPhoto .card-asym{flex:none; width: calc((100% - 40px)/3); padding:20px 30px; }
.main-infoPhoto .category{position: absolute; top:10px; left: 10px; padding:7px 18px; border-radius: 5px 10px; color: #fff; line-height: 1; background-color: rgba(12, 23, 40, 0.80);}
.main-infoPhoto .cont {margin-top:20px; color:#7E4912;}
.main-infoPhoto .subject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; height: auto; font-size: 1.125rem; font-weight:500; color: #51341B; word-break: break-all; }
.main-infoPhoto .text {margin-top:5px; font-size:1.063rem; font-weight: 300; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.main-infoPhoto .date {margin-top:5px; font-weight: 300;}
.main-infoPhoto .img{position:relative; height:150px; border-radius: 10px; overflow:hidden; background: #F1F2F4 url('../img/main/no-img.jpg') no-repeat 50% 50%; background-size: auto 100%;}
.main-infoPhoto .img img{display: block; width: 100%; min-height: 100%; object-fit: cover; transition:all ease-in-out .3s; }
.main-infoPhoto a:hover .img img,
.main-infoPhoto a:focus .img img{transform:scale(1.05,1.05)}

/* main-st6 */
/* .main-st6 {background:no-repeat 50% 50%; background-size:cover; background-image: url('../img/main/bg-sns.jpg');} */
.main-st6 .tit-main{width: 310px; padding-right:25px;}
.main-st6 .tit-main .tit-point{display:block;}

.sns-btns{display: flex; flex-wrap:wrap; gap:10px; margin-top: 50px; font-weight: 500; color :#fff; font-size: 1rem; line-height: 1;}
.sns-btns button{padding: 10px 15px; border-radius: 10px 20px; color: #51341B; background: #F8F2EF;}
.sns-btns button.active{background:#FA9819; color: #fff;}

#mainSns{display:flex; flex-wrap:wrap; gap:48px 30px; flex:1; min-width:0; margin-left: 74px; font-size: 1.125rem; font-weight: 500; color: #333;}
#mainSns .item{position:relative; flex:none; width:calc((100% - 90px)/4);}
#mainSns .item:before{position:absolute; top:15px; right:10px; width: 3.25rem; height: 3.25rem; background: no-repeat 50% 50%; background-size: auto 100%; display: block; content: ''; z-index:10;}
#mainSns .Facebook:before{background-image: url('../img/main/sns-f.png')}
#mainSns .Youtube:before{background-image: url('../img/main/sns-y.png')}
#mainSns .Blog:before{top:10px; right:auto; left: 14px; width:4.375rem; height:1.5rem; background-image: url('../img/main/sns-nb.png')}
#mainSns .item a{position:relative; display:block; height:200px; padding:3.125rem; border-radius:10px; border:1px solid #eee; background-color:#fff; overflow:hidden;transition: .3s ease;}
#mainSns .item a:hover{border-color: #FA9819; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.15);}
#mainSns .img{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; background: #F1F2F4 url('../img/main/no-img.jpg') no-repeat 50% 50%; background-size: auto 100%;}
#mainSns .img img{width: 100%; height:100%;object-fit:cover;}
/* #mainSns .item.Blog .img{display:none;} */
#mainSns .cont {margin-top:20px; font-family: var(--font-aggro); text-align:center;}
#mainSns .title {font-size: 1.125rem; font-weight:500; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#mainSns .txt{font-size:14px; font-weight: 400; color:#51341B; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; height: auto; word-break: break-all; }
#mainSns .sns-bottom{position:absolute; bottom:0; left:0; width:100%; padding:8px 14px; background: rgba(250, 152, 25, 0.8); backdrop-filter: blur(2px);}

/* main-st7 */
.main-st7 {background:no-repeat 50% 50%; background-size:cover; background-image: url('../img/main/bg-stats.jpg');}
.main-stats .stats-list {display: flex; align-items: center; justify-content: center; flex-wrap:wrap; gap: 80px 0; }
.main-stats .stats-item {flex:none; width:33%; min-width:280px; padding:0 20px; font-family: var(--font-aggro); text-align:center; }
.main-stats .stats-label {color: #fff; font-size: 1.5rem; font-weight: 300; }
.main-stats .stats-label strong {display:block; font-size: 2.125rem; font-weight: 500; }
.main-stats .stats-value {display: flex; align-items: center; justify-content: center; margin-top: 4px; font-size: 5rem; font-weight: 600; line-height: 1.5; color: #FF9000;}
.main-stats .stats-value .txt {margin: 0 10px; font-size: 1.75rem; font-weight: 300; line-height: 1.5; color: #fff;}
.main-stats .stats-info {font-family:var(--font-base); font-size: 1.75rem; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin-top:-14px;}

/* main-bottom */
.main-bottom{padding:75px 0; background:no-repeat 50% 50%; background-size:cover; background-image: url('../img/main/bg-ebook.jpg');}
.quick-bottom,
.quick-bottom .item,
.quick-bottom .quick-link{ display: flex; align-items: center; gap:0 40px;}
.quick-bottom .item{flex:1; min-width:0; font-family: var(--font-aggro); color:#fff;}
.quick-bottom .quick-link{ flex-direction: column; justify-content: center; width: 180px; height: 190px; padding:15px; border: 2px solid #fff; line-height: 1.2; text-align: center; background: rgba(0, 0, 0, 0.4); }
.quick-bottom .quick-link::after{ display: block; width:32px; height:32px; margin-top:10px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.5); content:""; background:no-repeat 50% 50%; background-size:100% auto; background-image: url('../img/main/link-arrow.png');}
.quick-bottom .link-t{font-size:1.188rem; color:#FFD69C;}
.quick-bottom .link-c{margin-top:5px; font-size:1rem; font-weight:300;}
.quick-bottom .label {color:#fff;}
.quick-bottom .label .big{font-size:1.875rem; line-height: 1; font-weight: 700;}
.quick-bottom .label .point{color:#FA9819;}
.quick-bottom .label .add{margin-top:20px; font-size:1.25rem; font-weight:300;}

/* guidelines */
#guidelines{ background-color: rgba(38, 18, 0, 0.9);}
#guidelines .scroll-custom{width:100%; height:100%; overflow:auto;}
#guidelines .popup_inner{display: flex; flex-direction: column;justify-content: center;min-height: 100%;}
#guidelines .modal-head{display:flex; justify-content: space-between; padding:30px 0;}
#guidelines .modal-head .tit-st1{margin:0; text-align:left;}
#guidelines .btn-close{width:30px; height:30px; background:no-repeat 50% 50%; background-size:100% auto; background-image: url('../img/common/header-close_w.png');}
#guidelines .tit-st1{color:#fff;}
#guidelines .btn_w-st1{padding:30px 0;}
#guidelines .more-st1{margin:0;}

.main-guide {display:flex; flex-wrap: wrap; gap:24px;}
.main-guide .item{flex:1; min-width:400px;}
.main-guide .card-asym {font-weight:300; color:#fff; margin-bottom:32px; background: transparent; border:1px solid rgba(255, 255, 255, 0.8);}
.main-guide .card-asym strong{display:block; font-size:1.25rem; }

.main-guide .guide-list strong{display: inline-block; min-width:100px; padding:0 15px; margin-right: 10px; text-align: center; border-radius: 3px; background: var(--color-main); }
.main-guide .guide-list li + li{margin-top:15px;}
.main-guide .guide-list a,
.main-guide .guide-list .in{display: block; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; font-weight: 300; font-size: 1.125rem; color: #fff; line-height: 30px;}
.main-guide .guide-list > li:first-child > a,.main-guide .guide-list > li:first-child .in{padding-top: 0;}
.main-guide .guide-list > li:before{top:50%; width: 4px; height: 4px; margin-top: -2px;}
.main-guide .guide-list > li:first-child:before{margin-top: calc(-1.111em/2 - 2px)}
.main-guide .guide-list > li:not(:last-child){background: url('../img/common/border-dotted.png') left bottom repeat-x}



#main-bbs{width: calc(40% - 15px)}
#main-bbs{display: flex;    flex-flow: column;  justify-content: space-between; gap: 30px}
.main-ag{background: var(--blue); padding: 50px}
.main-ag .tit{color: #fff; display: flex; justify-content:space-between; align-items:center; line-height: 1.15; font-weight: 700; margin-bottom: 0.882em; font-size: 2.125rem;}
.main-ag .tit .t{flex:1}


.tab-c .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 7px;background-color: #878787;opacity: 1;}
.tab-c .mCSB_scrollTools .mCSB_draggerRail {width: 5px;background-color: #ddd;}

.tabs-main{position: relative; padding: 60px 0 35px; border-radius:10px; background: #fff}
.tabs-main:before{position: absolute; left: 0; top:0; width: 100%; height: 60px; background: var(--navy); content: ''; border-radius:10px}
.tabs-main .tab-t{position: absolute; top:0; width: 33.333%; text-align: center; display: flex; align-items:center; justify-content:center; height: 60px ;background: var(--navy); color: #bfcde2; font-size: 1.25rem; font-weight: 400; z-index: 1;border-radius:10px 10px 0 0; line-height: 1.15;}
.tabs-main .tab-t:before{position: absolute; left: 0; top:50%; width: 1px; height: 1em; margin-top: -.5em; background: #3c5d86; content: '';}
.tabs-main > *:first-child .tab-t:before,.tabs-main .active .tab-t:before{display: none;}
.tabs-main > *:first-child .tab-t{left: 0}
.tabs-main > *:nth-child(2) .tab-t{left: 33.333%}
.tabs-main > *:nth-child(3) .tab-t{left: 66.666%}

.tabs-main .active .tab-t{background: #fff; color: var(--blue); box-shadow: 0 -3px 5px rgba(0,0,0,.15); font-weight: 600;}
.tabs-main .tab-c{margin: 45px 30px 0; display: none; overflow-y: auto; height: 355px}
.tabs-main .active .tab-c{display: block;}

.tabs-main .bul-dot{font-weight: 500; font-size: 1.125rem; color: #666; line-height: 1.15;}
.tabs-main .bul-dot strong{color: var(--black); margin-right: 1em;}
.tabs-main .bul-dot a,.tabs-main .bul-dot .in{white-space: nowrap; overflow: hidden; text-overflow:ellipsis; display: block; padding: 1.111em 0}
.tabs-main .bul-dot > li:first-child > a,.tabs-main .bul-dot > li:first-child .in{padding-top: 0;}
.tabs-main .bul-dot > li:before{top:50%; width: 4px; height: 4px; margin-top: -2px;}
.tabs-main .bul-dot > li:first-child:before{margin-top: calc(-1.111em/2 - 2px)}
.tabs-main .bul-dot > li:not(:last-child){background: url('../img/common/border-dotted.png') left bottom repeat-x}

.main-link{display: flex; justify-content: space-between; flex:1; line-height: 1.15;}
.main-link > *{width: calc(50% - 15px); box-shadow:3px 3px 8px rgba(0,0,0,.15); background: #fff; padding: 0 40px; position: relative;     display: flex; justify-content: center;     flex-flow: column;}
.main-link .ico{position: absolute; right: 40px; top:50%; transform:translateY(-50%)}
.main-link span{display: block; color: #999; font-weight: 500;}
.main-link strong{display: block; color: #333; font-weight: 600; font-size: 1.25rem; margin-top: 10px;}
.main-link > *:first-child{background-color: #333;}
.main-link > *:first-child strong{color: #fff}



.main-book{background: linear-gradient(135deg, rgba(51,51,51,1) 0%,rgba(144,144,144,1) 100%); flex:1; line-height: 1.15;}
.main-book a{display: block; padding: 70px 15px 30px 50px; position: relative; color: #fff; height: 100%; }
.main-book img{position: absolute; right: 50px; bottom: 0; max-height: 80%; max-width:40%;}
.main-book .big{font-size: 58px; font-weight: 700; color:#fff; letter-spacing: 0;}
.main-book .big .line{display: block; text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff; color:#444; line-height: 1;}
.main-book .add{font-size: 1.25rem; margin-top: 20px; padding-right: calc(40% + 75px)}
.main-book .more{display: inline-block; line-height: 1; padding: 15px 25px; border:1px solid #fff; border-radius:100px; margin-top: 20px;}
.main-ag,.main-link > *,.main-project_w,.main-book{border-radius:10px}

.tabs-main .bul-dot a:hover{text-decoration: underline;}


.select-main{display: none; margin-top: 30px;background: #333 url('../img/main/sel.png') calc(100% - 18px) center no-repeat; color: #fff; font-weight: 500; height: 60px; border-radius:8px; width: 100%; text-align: center;}


@media screen and (min-width:1025px){

}
@media screen and (max-width:1800px) {
	.main-book a{padding-left: 30px;}
	.main-book .add{padding-right: calc(40% + 45px);}
	.main-book img{right: 30px}

	.sns-btns button{padding: 8px 15px}
	#mainStory .tit-main{width: 350px}
}
@media screen and (max-width:1700px) {
	#m4{flex-flow:column}
	#m4 .l,#m4 .r{width: 100%}
	#m4 .r{    flex-flow: row;}
	/* #m4 .r > *{width: calc(50% - 15px)} */
	.main-book .big{font-size: 50px;}
}
@media screen and (max-width:1500px) {
	.main-ag{padding: 30px}
	.main-link > *{padding: 0 30px}

	#main-bbs{width: calc(40% - 15px)}

	.main-link .ico{right: 25px; width:50px}
	#main-bbs{gap:20px}

	.main-intro > li{width: calc(50% - 3% / 2);padding: 1.5rem; padding-bottom: 0;}
	.main-project > li{width: calc((100% - 36px)/2);}

	.main-intro .active a{padding-bottom: 1.5rem;}

	.main-steps { justify-content: center; }
	.main-steps > li { width: calc(33.333% - 70px); }

	.main-bbs2 > *{width: calc(50% - 10px)}

	#mainStory .inner,
	.main-st6 .inner{display: block;}
	#mainStory .tit-main,
	.main-st6 .tit-main{width: 100%}
	.main-infoPhoto,
	#mainSns{margin-left: 0;}
	.main-story_btns,
	.sns-btns{margin-top: 30px;}

	.main-stats .stats-item {width:50%; }

}
@media screen and (max-width:1024px){
	#main .inner {padding:0 20px;}

	.quick-bar{right:20px;}
	.quick-menu .btn{width:50px; height:50px;}

	#mainVisual {height: 500px;}
	#mainVisual .item{height: 500px; padding-bottom:80px;}
	#mainVisual .controls_w{bottom:20px;}
	#mainVisual .s{position: absolute; left: 0;top:0; width: 100%; height: 100%}
	#mainVisual .s > *,#mainVisual .s > * > *{height: 100%}

	.main-link > *{padding: 30px 1.5rem}
	#main-bbs{gap:0; margin-top: 30px;}
	.main-link{margin-top: 30px;}
	.tabs-main .tab-c{height: 280px}

	.main-st1{display: block;}
	.main-st1 .tit-main{width: 100%; text-align: center;}
	.tit-main .big{font-size: 47px;}
	.tit-main .big br{display: none;}
	.tit-main .add br{display: none;}
	.tit-main .more-st1{margin: 30px auto 0; justify-content:center}

	.main-st2 { padding: 4rem 0; }
	.main-st2::before { height: 42%; }
	.main-steps > li:not(:first-child) { margin-left: 70px; }
	.main-steps > li:not(:first-child):after { width: 70px; left: -70px; }


	#m4 .r,.main-bbs2{flex-flow:column; gap:20px}
	#m4 .r > *,.main-bbs2 > *{width: 100%}
	.main-book img{right: 15px}
	.main-book a{padding-top: 30px;}

	#mainStory .tit-main{text-align: center;}
	.main-story_btns{align-items: center; justify-content: center;}

	#mainStory .main-infoPhoto{margin-top: 50px;}

	.main-story_btns{display: none;}
	.select-main{display: block;}

	#mainStory{background-image: none}
	#mainSns .item,
	.main-infoPhoto .card-asym{width:calc((100% - 30px)/2)}

	.quick-bottom{display:block;}
	.quick-bottom .item + .item{margin-top:40px;}
}
@media screen and (max-width:720px){
	#mainVisual .txt{padding:0 20px;}
	#mainVisual .big br, #mainVisual p br{display: none;}
	#mainVisual .big { font-size: 24px; }
	#mainVisual p { font-size: 16px; }
	#mainVisual .controls_w{margin-top: 30px;}
	.tabs-main .tab-c{margin: 30px 20px 0; height: 18.5em}
	.tabs-main{padding-bottom: 20px;}
	.main-ag{padding: 1.5rem}
	.main-link .ico{right: 1.5rem}
	.main-intro{flex-flow:column;}

	.main-intro > li{width: 100%}

	.main-st2::before { height: 30%; }
	.main-steps { justify-content: flex-start; margin-top: 50px; }
	.main-steps > li { width: calc(50% - 40px / 2); margin-bottom: 40px; }
	.main-steps > li:not(:first-child) { margin-left: 40px; }
	.main-steps > li:nth-child(odd) { margin-left: 0; padding-top: 0; }
	.main-steps > li:not(:first-child):after { top: 45%; left: -40px; width: 40px; background-size: 25px; }
	.main-steps > li:nth-child(3):after,
	.main-steps > li:nth-child(5):after { left: 100%; top: -25px; transform: rotate(135deg); }

	.main-project > li{width:100%;}

	.main-infoPhoto__item:not(:first-child){margin-top: 30px;}
	.main-infoPhoto__item{margin-left: -15px;margin-bottom: -30px;}
	.main-infoPhoto__item a{width: calc(50% - 15px); margin-left: 15px; margin-bottom: 30px;}

	#mainSns .item,
	.main-infoPhoto .card-asym{width:100%; }

	.main-guide {flex-direction: column; }
	.main-guide .item{min-width:auto; width:100%;}

	.main-stats .stats-item {width:100%; padding:0;}
}
@media screen and (max-width:480px){
	/* .main-link .ico{width: 40px}
	.main-link > *{padding-right: 70px;} */
	.main-link{flex-flow:column}
	.main-link > *{width: 100%}
	.main-link > *:not(:first-child){margin-top: 10px;}
	.tabs-main .tab-c{height: 15em}
	.tabs-main .bul-dot a,.tabs-main .bul-dot .in{padding: 1em 0}
	.main-book .big{font-size: 40px;}
}
@media screen and (max-width:420px){
	.main-steps .ico{width: 70px;height: 70px; margin-bottom: 15px;}
	.main-steps > li:not(:first-child):before{top:35px}

	.main-book .big .line{display: inline;}
	.main-book img{max-height: 60%}
	.main-book .big{font-size: 35px;}
	.sns-btns button{    padding: 5px 10px;}

	.t-sns{flex-flow:column; align-items: flex-start;}
	.sns-btns{    margin-top: 15px;    text-align: right; width: 100%;}
}