@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic');

/*[s] Bace Css */
	:root,
	html{font-size: 10px}
	:root {
		/* color */
		--point5 : #120EEC;
		--point4 : #3935FF;
		--point3 : #7370FD;
		--point2 : #8A87FF;
		--point1 : #A5A3FF;

        --bc2 : #E5EBEF;
        --bc1 : #F3F6F8;

        --bdc2 : #DDDDDD;
        --bdc1 : #F3F3F3;

        --stroke2 : #D9D9D9;
        --stroke1 : #f3f3f3;

        --color9 : #1D2022;
        --color7 : #474C4F;
        --color4 : #888C91;
        --color1 : #D2D2D2;

        --statusR100 : #FF5858;
        --statusR80 : #FF5858 ;
        --statusR60 : #FF9292;

        --statusG100 : #1BD0B9;
        --statusG80 : #1BD0B9;
        --statusG60 : #5FE4D3;

        --mon : 'Montserrat', sans-serif !important;
        --poppins : 'Poppins', sans-serif !important;
	}
    html.hide{overflow: hidden;}

    .cPoint5{color: var(--point5);}
    .cPoint4{color: var(--point4);}
    .cPoint3{color: var(--point3);}
    .cPoint2{color: var(--point2);}
    .cPoint1{color: var(--point1);}

    .color9 {color: #1D2022;;}
    .color7 {color: #474C4F;;}
    .color4 {color: #888C91;;}
    .color1 {color: #D2D2D2;;}
    .colorfff{color: #fff;}

    .statusR100{background-color: #FF5858;}
    .statusR80{background-color: #FF5858 ;}
    .statusR60{background-color: #FF9292;}

    .statusG100{background-color: #1BD0B9;}
    .statusG80{background-color: #1BD0B9;}
    .statusG60{background-color: #5FE4D3;;}

    /* -Hero영역에 사용되는 Style */
    /* -Heading1은 메인 홈에서만 사용 */
    .heading1{font-size: 120px; line-height: 130px; font-weight: 900;  letter-spacing: -2px;}
    /* -영문인경우 Heding2 */
    .heading2{font-size: 100px; line-height: 120px; font-weight: 900;  letter-spacing: -1.8px;}
    /* 한글이 들어가는 경우 Heading3 사용 */
    .heading3{font-size: 86px; line-height: 120px; font-weight: 900;  letter-spacing: -1.8px;}

    /* 사용처: 콘텐츠영역 Title, 한글 영문 */
    .title1{font-size: 50px; line-height: 68px; font-weight: bold; letter-spacing: -1px;}
    /* 사용처: project 상세페이지 한글 긴 타이틀 */
    .title2{font-size: 42px; line-height: 64px; font-weight: bold; letter-spacing: -1px;}
    /* 사용처: 탭, 상세페이지 영어 작은 타이틀, 따옴표문구 */
    .title3{font-size: 32px; line-height: 44px; font-weight: bold; letter-spacing: -0.7px;}
    /* 사용처: 탭, 상세페이지 영어 작은 타이틀, 따옴표문구 */
    .title4{font-size: 26px; line-height: 36px; font-weight: bold; letter-spacing: -0.7px;}
    /* 사용처: Project Detail 화면 About 내용 */
    .title5{font-size: 36px; line-height: 54px; letter-spacing: -0.7px;}

    /* 사용처: 좌측 레이블(타이틀) */
    .sub_title1{font-size: 28px; line-height: 40px; font-weight: 600; letter-spacing: -0.4px;}
    /* 사용처: Hero 캡션,리스트 타이틀, here 날짜 text */
    .sub_title2{font-size: 24px; line-height: 36px; font-weight: 600; letter-spacing: -0.4px;}
    /* 사용처: 사용처 버튼 text, 모달 내 타이틀 */
    .sub_title3{font-size: 20px; line-height: 34px; font-weight: 600; letter-spacing: -0.3px;}
    /* 사용처: winner, 페이지네이션, approach, stage, 인풋텍스트 */
    .sub_title4{font-size: 20px; line-height: 34px; font-weight: 500; letter-spacing: -0.3px;}
    /* 사용처: 네비게이션 */
    .sub_title5{font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px;}

    /* 사용처: Our service 이미지와 함께 들어간 text */
    .body1{font-size: 24px; line-height: 36px; letter-spacing: -0.3px;}
    /* 사용처: 리스트안의 날짜, 연혁설명, 한글본문  */
    .body2{font-size: 18px; line-height: 30px; letter-spacing: -0.2px;}
    /* 사용처: 한글, 영문 본문 */
    .body3{font-size: 16px; line-height: 26px; letter-spacing: -0.1px;}

    /* 사용처: 타이틀 위 캡션 */
    .caption1{font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: -0.3px;}
    /* 사용처: Project_approch 작은 본문, 모달 내 캡션 */
    .caption2{font-size: 14px; line-height: 22px; letter-spacing: -0.1px;}

    /* button */
    .button{font-size: 20px; line-height: 34px; font-weight: 600; color: var(--color9); letter-spacing: -0.3px; text-align: center;
        background-color: #fff; border: 2px solid var(--color9); border-radius: 16px; padding: 18px 24px; transition: all ease 0.1s; box-sizing: border-box;}
    .button p{color: inherit !important;}
    .button:is(:active,:hover){color: var(--point4); border-color: var(--point4);}

    .button.icon{display: inline-flex; align-items: center; justify-content: center; gap: 10px;}
    .button.icon img{font-size: 0; line-height: 0; transition: all ease 0.1s;}
    .button.icon:is(:active,:hover) img{filter: invert(24%) sepia(98%) saturate(5697%) hue-rotate(243deg) brightness(101%) contrast(110%);}

    .button.solid{color: #fff; background-color: var(--point4); border-color: var(--point4);}
    .button.solid:is(:active,:hover){background-color: var(--point3); border-color: var(--point3);}
    .button.solid.icon:is(:active,:hover) img{filter: brightness(0) invert(1);}

    .button.secondary{min-width: 150px; color: #fff; background-color: var(--color9); border: 2px solid var(--color9); border-radius: 16px; padding: 12px 24px; cursor: pointer;}
    .button.secondary + .button{margin-left: 20px;}
    .button.secondary.white{color: var(--color9); background-color: #fff;}
    .button.secondary.icon:is(:active,:hover) img{filter: initial;}

    .button.secondary:disabled{background-color: var(--color1); border-color: var(--color1);}

    .thumb{font-size: 0; line-height: 0;}


    .ldot{position: relative;}
    .ldot::after{position: relative; content: '.'; display: inline-block; color: var(--point4);}

    .quote{position: relative;}
    .quote::before{position: absolute; content: ''; top: calc(-10px - 34px); left: calc(50% - 17px); width: 34px; aspect-ratio: 1/1; background-image: url('/images/icon/icon_quote.svg'); background-size: cover;}

    .tabNav{display: inline-flex; gap: 20px 60px; padding: 20px 0 80px;  /* overflow-y: hidden; overflow-x: auto; */}
    .tab{position: relative; display: inline-block; font-size: 32px; line-height: 44px; font-weight: bold; letter-spacing: -0.7px; color: var(--color1); border-bottom: 2px solid transparent; padding-bottom: 6px; cursor: pointer; transition: all ease 0.5s;}
    .tab.selected{color: var(--color9); border-bottom-color: var(--point4);}
    .tab.selected.count{margin-right: 6px;}
    .tab.selected.count::after{position: absolute; content: attr(data-count); width: 38px; height: 38px; top: -16px; right: -6px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 0; color: #fff; font-weight: 600; text-align: center; white-space: nowrap; background-color: var(--point4); border-radius: 50%; transform: translateX(100%);}

    .pagination{width: max-content; display: flex; gap: 20px; align-items: center; justify-content: center; font-size: 0; line-height: 0; margin: 0 auto;}
    .pagination * {transition: all ease 0.5s;}
    .pagination .btns{display: inline-flex; gap: 10px;}
    .pagination .btns a{width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid var(--stroke1); border-radius: 8px;}
    .pagination .btns a.disabled{cursor: not-allowed;}
    .pagination .btns a.disabled img{filter: invert(97%) sepia(0%) saturate(1%) hue-rotate(238deg) brightness(88%) contrast(92%);}
    .pagination .nums{display: flex; gap: 20px;}
    .pagination .nums a{min-width: 26px; font-size: 20px; line-height: 1; color: var(--color7); font-weight: 500; letter-spacing: -0.3px; text-align: center;}
    .pagination .nums a:is(.active, :hover){color: var(--point4);}


    img.icon{font-size: 0; line-height: 0;}
    .iconArea{font-size: 0; line-height: 0;}
    .iconWhite{filter: brightness(0) invert(1);}
    /* icon direction1 */
    .direction1{width: 24px; height: 24px;}

    .afterDot{position: relative; display: inline-block; }
    .afterDot::after{position: absolute; content: ''; width: 8px; aspect-ratio: 1/1; top: 0; left: 100%; background-color: var(--point4); border-radius: 50%;}

	html *{word-break:keep-all; word-wrap:break-word; box-sizing: border-box;}
	html.hide{height:100vh; overflow:hidden;}
	#wrap{width:100%; margin:0 auto; background-color:#fff; position:relative; overflow:hidden;}

    .inner{max-width: 1480px; width: 100%; padding: 0 20px; margin: 0 auto;}

    .tal{text-align: left !important;}
	.tac{text-align: center !important;}
	.tar{text-align: right !important;}

    .maxline1{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .maxline2{display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
    .maxline3{display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
    /* 최대 n줄까지 보이게 */

    .mmVar{display: block;}
    .mmView{display: none;}

    .fullBox{ position: relative; width: 100vw; margin-left: -50vw; font-size: 0; line-height: 0; position: relative; left: 50%; }
/*[e] Bace Css */

/*[s] HEADER */
	#progressBar{width:0%; height:3px; background-color:var(--point5); font-size:0; line-height:0; position:fixed;left:0; top:0; z-index:11;}

	#header{width:100%; font-size:0; line-height:0; position: absolute; z-index:7; background-color: transparent;}
    #header .inner{max-width: 1860px; width: 100%; height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; margin: 0 auto;}

    #header .inner .logo{width: 130px;}
    #header .inner .header_sns{display: flex; gap: 15px; align-items: center;}
    #header .inner .header_sns li a img{width: 34px; height: 34px;}
/*[e] HEADER */

/*[s] SUB */
	html .root_daum_roughmap{width: 100%; height: 100%;}
	html .root_daum_roughmap .wrap_map{width: 100%; height: 100%;}
	html .wrap_controllers{display: none;}

	#container{position: relative; width:100%; max-width: 1480px; width: 100%; padding: 0 20px 260px; margin: 0 auto; z-index: 2;}
	#container.full{max-width:none; min-height:auto; padding:0;}

/*[e] SUB */
    #footer{position: relative; border-top: 1px solid var(--bdc2); padding: 80px 0 40px;}
    #footer .inner{display: flex; justify-content: space-between; gap: 20px;}

    #footer .menuList{position: relative; display: inline-flex; gap: 4px; align-items: center; background-color: var(--point3); border-radius: 100px; padding: 10px;}
    #footer .menuList.open{border-radius: 0 0 25px 25px;}
    #footer .menuList > a{color: #fff; background-color: transparent; border-radius: 500px; padding: 8px 16px; transition: all ease 0.5s;}
    #footer .menuList > a:is(.active){background-color: var(--point2); pointer-events: none;}
    #footer .menuList > a:is(:hover){background-color: var(--point1);}
    #footer .menuList > a:last-child {background-color: var(--point4);}
    #footer .menuList > a:last-child:hover {background-color: var(--point5);}

    #footer .menuList > a.active.opacity{opacity: 0;}

    #footer .moMenuList{display: none; position: absolute; bottom: 100%; left: 0; width: 100%; background-color: var(--point3); border-radius: 25px 25px 0 0; border-bottom: 1px solid #9c9afe; padding: 10px; z-index: 7;}
    #footer .moMenuList a{display: block; color: #fff; text-align: left; background-color: transparent; border-radius: 500px; padding: 10px 16px; transition: all ease 0.5s;}
    #footer .moMenuList a + a{margin-top: 6px;}
    #footer .moMenuList a:is(.active){background-color: var(--point2);}
    #footer .moMenuList a:is(:hover){background-color: var(--point1);}
    #footer .moMenuList a:last-child {display: none;}
    #footer .moMenuList a:last-child:hover {background-color: var(--point5);}

    #footer .fMenuArea{position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 999;}

    #footer .fMenuArea .mMenuArea{display: none; width: 24px; aspect-ratio: 1/1; align-items: center; justify-content: center;}
    #footer .fMenuArea .mMenu{position: relative; width: 21px; height: 21px; font-size:0; line-height:0; background-color:transparent; background-image: url('/images/icon/icon_hamburger.svg'); background-size: 21px 18px; background-repeat: no-repeat; background-position: center; border:none; z-index:4; cursor: pointer; overflow:hidden;}
    /* #footer .fMenuArea .mMenu{position: relative; width: 14px; height: 14px; display:flex; align-items: center; justify-content: center; font-size:0; line-height:0; background-color:transparent; border:none; z-index:4; cursor: pointer; overflow:hidden;} */
	/* #footer .fMenuArea .mMenu>span{width: 100%; height: 2px; background-color: #fff;} */
	/* #footer .fMenuArea .mMenu:before, */
	/* #footer .fMenuArea .mMenu:after{position:absolute; content: ""; top: 0; left: 0; width: 100%; height: 2px; display: inline-block; background-color: #fff;background-color:#1b1b1b;} */

	/* #footer .fMenuArea .mMenu>span{top: calc(50% - 1px); left: 0; } */
	/* #footer .fMenuArea .mMenu:before{top: 0;} */
	/* #footer .fMenuArea .mMenu:after{top: auto; bottom: 0; left: 0;} */

	/* #footer .fMenuArea .mMenu.open>span{opacity:0;} */
    /* #footer .fMenuArea .mMenu.open:before{width: 200%;left: -9px;top: 3.5px;transform:rotate(45deg);} */
	/* #footer .fMenuArea .mMenu.open:after{width: 200%;left: -9px;bottom: 3.5px;transform:rotate(-45deg);} */

    #footer .fMenuArea .mMenu.open{background-image: url('/images/icon/icon_close.svg'); background-size: 36px 36px; filter: brightness(0) invert(1);}

    #footer .footer_info{max-width: 700px; width: 40vw ;}
    #footer .footer_info .title{margin-bottom: 8px;}

    #footer .footer_desc{max-width: 350px; width: 20vw ; min-height: 72px; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; text-align: right;}
    #footer .footer_desc .footer_sns{display: flex; gap: 12px; justify-content: flex-end; margin-bottom: 8px;}
    #footer .footer_desc .footer_sns li{position: relative;}
    #footer .footer_desc .footer_sns li + li::after{position: absolute; content: ''; width: 2px; height: 12px; top: calc(50% - 6px); left: calc(-6px - 1px); background-color: var(--color9);}

    /* 게시판 footer */
    #footer.board .fMenuArea{width: auto; display: inline-flex; gap: 4px; align-items: center; background-color: var(--point3); border-radius: 100px; padding: 8px;}
    #footer.board .fMenuArea > .btns{display: inline-flex; gap: 5.5px; align-items: center; padding: 8px 10px;}
    #footer.board .fMenuArea > .btns .iconArea{width: 30px; height: 30px;}
    #footer.board .fMenuArea > .btns p{font-size: 16px; line-height: 1; color: #fff; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap;}
/*[s] FOOTER */

@media only screen and (max-width: 1536px) {
    #container{position: relative; width:100%; max-width: 1520px; width: 100%; padding: 0 40px 260px; margin: 0 auto; z-index: 2;}
}
@media only screen and (max-width: 1360px) {
    #footer .inner{align-items: flex-start;}
}
@media only screen and (max-width: 1280px) {
    .heading1 { font-size: 90px; line-height: 100px; letter-spacing: -1.5px; }
    .heading2 { font-size: 75px; line-height: 90px; letter-spacing: -1.3px; }
    .heading3 { font-size: 65px; line-height: 90px; letter-spacing: -1.3px; }

    .title1 { font-size: 40px; line-height: 54px; letter-spacing: -0.8px; }
    .title2 { font-size: 34px; line-height: 52px; letter-spacing: -0.8px; }
    .title3 { font-size: 26px; line-height: 36px; letter-spacing: -0.5px; }
    .title4 { font-size: 22px; line-height: 30px; letter-spacing: -0.5px; }
    .title5 { font-size: 30px; line-height: 44px; letter-spacing: -0.5px; }

    .sub_title1 { font-size: 24px; line-height: 34px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title2 { font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title3 { font-size: 18px; line-height: 30px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title4 { font-size: 18px; line-height: 30px; font-weight: 500; letter-spacing: -0.3px; }
    .sub_title5 { font-size: 14px; line-height: 22px; font-weight: 600; letter-spacing: -0.2px; }

    .body1 { font-size: 20px; line-height: 30px; letter-spacing: -0.2px; }
    .body2 { font-size: 16px; line-height: 26px; letter-spacing: -0.2px; }
    .body3 { font-size: 14px; line-height: 24px; letter-spacing: -0.1px; }

    .caption1 { font-size: 16px; line-height: 26px; letter-spacing: -0.2px; }
    .caption2 { font-size: 12px; line-height: 20px; letter-spacing: -0.1px; }

    .tab { font-size: 26px;  line-height: 36px;  letter-spacing: -0.5px; }
    .tab.selected.count::after { width: 30px;  height: 30px;  top: -12px;  font-size: 16px; }
}

@media only screen and (max-width: 1024px) {
    .heading1 { font-size: 72px; line-height: 84px; letter-spacing: -1.5px; }
    .heading2 { font-size: 60px; line-height: 72px; letter-spacing: -1.3px; }
    .heading3 { font-size: 52px; line-height: 72px; letter-spacing: -1.3px; }

    .title1 { font-size: 36px; line-height: 48px; letter-spacing: -0.8px; }
    .title2 { font-size: 30px; line-height: 44px; letter-spacing: -0.8px; }
    .title3 { font-size: 24px; line-height: 32px; letter-spacing: -0.5px; }
    .title4 { font-size: 20px; line-height: 28px; letter-spacing: -0.5px; }
    .title5 { font-size: 28px; line-height: 40px; letter-spacing: -0.5px; }

    .sub_title1 { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title2 { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title3 { font-size: 16px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title4 { font-size: 16px; line-height: 28px; font-weight: 500; letter-spacing: -0.3px; }
    .sub_title5 { font-size: 14px; line-height: 22px; font-weight: 600; letter-spacing: -0.2px; }

    .body1 { font-size: 18px; line-height: 28px; letter-spacing: -0.2px; }
    .body2 { font-size: 16px; line-height: 26px; letter-spacing: -0.2px; }
    .body3 { font-size: 14px; line-height: 24px; letter-spacing: -0.1px; }

    .caption1 { font-size: 16px; line-height: 24px; letter-spacing: -0.2px; }
    .caption2 { font-size: 12px; line-height: 18px; letter-spacing: -0.1px; }

    .button{font-size: 17.5px; line-height: 29px; font-weight: 600;border-radius: 14px; padding: 14px 20px;}

    .tabNav{gap: 20px 40px;}
    .tab { font-size: 24px;  line-height: 34px;  letter-spacing: -0.4px; }
    .tab.selected.count::after { width: 28px;  height: 28px;  top: -10px;  font-size: 14px; }

    #footer{padding: 20px 0 106px;}
    #footer .inner{flex-direction: column;}
    #footer .footer_info{max-width: 350px; width: 100%;}
    #footer .footer_desc{width: 100%; min-height: initial; align-items: flex-start; justify-content: flex-start; text-align: left;}
    #footer .fMenuArea{bottom: 20px;}

    #footer.board{padding: 20px 0 90px;}
    #footer.board .fMenuArea{width: auto; padding: 6px; margin: 0 auto;}
    #footer.board .fMenuArea > .btns{display: inline-flex; gap: 4px; align-items: center; padding: 8px 16px;}
    #footer.board .fMenuArea > .btns .iconArea{width: 22px; height: 22px;}
    #footer.board .fMenuArea > .btns p{font-size: 13px;}
    #footer.board .fMenuArea > .btns p .board_name{display: none;}



}

@media only screen and (max-width: 840px) {
    .heading1 { font-size: 64px; line-height: 74px; letter-spacing: -1.3px; }
    .heading2 { font-size: 52px; line-height: 66px; letter-spacing: -1.1px; }
    .heading3 { font-size: 44px; line-height: 66px; letter-spacing: -1.1px; }

    .title1 { font-size: 32px; line-height: 44px; letter-spacing: -0.7px; }
    .title2 { font-size: 28px; line-height: 40px; letter-spacing: -0.7px; }
    .title3 { font-size: 22px; line-height: 30px; letter-spacing: -0.5px; }
    .title4 { font-size: 18px; line-height: 26px; letter-spacing: -0.5px; }
    .title5 { font-size: 26px; line-height: 36px; letter-spacing: -0.5px; }

    .sub_title1 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title2 { font-size: 16px; line-height: 26px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title3 { font-size: 14px; line-height: 24px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title4 { font-size: 14px; line-height: 24px; font-weight: 500; letter-spacing: -0.3px; }
    .sub_title5 { font-size: 12px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; }

    .body1 { font-size: 16px; line-height: 26px; letter-spacing: -0.2px; }
    .body2 { font-size: 14px; line-height: 24px; letter-spacing: -0.2px; }
    .body3 { font-size: 12px; line-height: 22px; letter-spacing: -0.1px; }

    .caption1 { font-size: 14px; line-height: 20px; letter-spacing: -0.2px; }
    .caption2 { font-size: 11px; line-height: 18px; letter-spacing: -0.1px; }

    .tab { font-size: 22px;  line-height: 30px;  letter-spacing: -0.4px;}
    .tab.selected.count::after { width: 26px;  height: 26px;  top: -10px;  font-size: 14px;}
}

@media only screen and (max-width: 640px) {
    .heading1 { font-size: 52px; line-height: 62px; letter-spacing: -1px; }
    .heading2 { font-size: 44px; line-height: 56px; letter-spacing: -0.9px; }
    .heading3 { font-size: 38px; line-height: 56px; letter-spacing: -0.8px; }

    .title1 { font-size: 30px; line-height: 42px; letter-spacing: -0.5px; }
    .title2 { font-size: 26px; line-height: 38px; letter-spacing: -0.5px; }
    .title3 { font-size: 20px; line-height: 28px; letter-spacing: -0.3px; }
    .title4 { font-size: 16px; line-height: 24px; letter-spacing: -0.3px; }
    .title5 { font-size: 24px; line-height: 34px; letter-spacing: -0.3px; }

    .sub_title1 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title2 { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title3 { font-size: 14px; line-height: 24px; font-weight: 600; letter-spacing: -0.3px; }
    .sub_title4 { font-size: 14px; line-height: 24px; font-weight: 500; letter-spacing: -0.3px; }
    .sub_title5 { font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: -0.2px; }

    .body1 { font-size: 16px; line-height: 26px; letter-spacing: -0.2px; }
    .body2 { font-size: 14px; line-height: 24px; letter-spacing: -0.2px; }
    .body3 { font-size: 12px; line-height: 22px; letter-spacing: -0.1px; }

    .caption1 { font-size: 14px; line-height: 20px; letter-spacing: -0.2px; }
    .caption2 { font-size: 11px; line-height: 18px; letter-spacing: -0.1px; }

    .button{max-width: 312px; width: 100%; font-size: 15px; line-height: 24px; letter-spacing: -0.2px; border-radius: 12px; padding: 14px 2px; transition: all  ease 0.1s;}

    .button.secondary{min-width: initial; max-width: 118px; padding: 8px 24px; border-radius: 12px;}
    .button.secondary + .button{margin-left: 8px;}


    .quote::before{top: calc(-4px - 20px); width: 20px;}

    .tabNav{gap: 20px 30px; padding: 24px 0}
    .tab { font-size: 20px;  line-height: 28px;  letter-spacing: -0.3px;}
    .tab.selected.count::after { width: 24px;  height: 24px;  top: -9px;  font-size: 12px;}

    .pagination{gap: 10px;}
    .pagination .nums{gap: 11px;}
    .pagination .nums a{min-width: 18px; font-size: 14px;}

    .mmVar{display: none;}
    .mmView{display: block;}
    img.mmView{display: inline-block;}

    #header .inner .logo{width: 84px;}
    #header .inner .header_sns li a img{width: 24px; height: 24px;}

    #container{padding: 0 20px 90px;}

    #footer .footer_info .title{margin-bottom: 6px;}
    #footer .footer_desc .footer_sns{margin-bottom: 6px;}

    #footer{padding: 20px 0 98px;}
    #footer .fMenuArea .mMenuArea{display: flex; margin: 0 0 0 6px;}
    #footer .fMenuArea .menuList > a{padding: 8px 20px;}
    #footer .fMenuArea .menuList > a:not(.active){display: none;}
    #footer .fMenuArea .menuList > a:last-child{display: inline-block;}

    #footer .menuList > a:is(.active){background-color: initial; pointer-events: none;}

    /* #footer .fMenuArea.board{position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 999;} */
}

@media only screen and (max-width : 480px){
    .heading1{font-size: 44px; line-height: 54px; letter-spacing: -1px;}
    .heading2{font-size: 36px; line-height: 46px; letter-spacing: -1px;}
    .heading3{font-size: 32px; line-height: 44px; letter-spacing: -0.5px;}

    .title1{font-size: 26px; line-height: 38px; letter-spacing: -0.4px;}
    .title2{font-size: 22px; line-height: 32px; letter-spacing: -0.4px;}
    .title3{font-size: 18px; line-height: 24px; letter-spacing: -0.2px;}
    .title4{font-size: 14px; line-height: 18px; letter-spacing: -0.2px;}

    .sub_title1{font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px;}
    .sub_title2{font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px;}
    .sub_title3{font-size: 15px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px;}
    .sub_title4{font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.2px;}
    .sub_title5{font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: -0.2px;}

    .body1{font-size: 14px; line-height: 22px; letter-spacing: -0.2px;}
    .body2{font-size: 14px; line-height: 22px; letter-spacing: -0.2px;}
    .body3{font-size: 13px; line-height: 22px; letter-spacing: -0.1px;}

    .caption1{font-size: 12px; line-height: 18px; letter-spacing: -0.1px;}
    .caption2{font-size: 11px; line-height: 16px; letter-spacing: -0.1px;}

    .tab{font-size: 18px; line-height: 24px; letter-spacing: -0.2px;}
    .tab.selected.count::after{width: 20px; height: 20px; top: -8px; font-size: 12px; }

}

/*[s] Reset Css */
html,body{width:100%; min-height:100%; background-color: #fff; -webkit-text-size-adjust:none}
input,button,textarea{background-color: transparent; border:none; -webkit-border-radius:0; -webkit-appearance:none}
input[type=submit],input[type=image],input[type=button],button,a{cursor: pointer; text-decoration: none;}
img,video,audio,object,embed,iframe{max-width:100%; max-height: 100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,legend{margin:0;padding:0}
fieldset,img,abbr,acronym{border:none}
fieldset{display:block}
ol,ul{list-style:none outside}
h1,h2,h3,h4,h5,h6,address,caption,cite,code,dfn,em,th,var{font-size:100%; font-weight:normal}
div, ul{box-sizing: border-box;}
a{display: inline-block; color: inherit;}

hr,legend,caption,hr{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-1000em}

img{
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
}
*{font-family:'pretendard', sans-serif; }
/* body,th,td,input,select,textarea,h2,h3,h4,h5,address,code,button{font-family:'pretendard', sans-serif; font-style:normal; font-weight:normal;} */
body{font-size:16px; line-height:26px; color:#1d2022;}
/*[e] Reset Css */

#snb{width:1px; height: 0; font-size:0; line-height:0; position: fixed; left:-1px; top:-1px; z-index:-999; overflow:hidden; opacity: 0;}#snb{width:100%; font-size:0; line-height:0; position: relative; z-index:2;}