@charset "utf-8";

/*공통 스타일*/
html{scroll-behavior: smooth;height: 100%;}
html * {font-family: var(--NanumSquareNeo);color:var(--black1);}
*:focus{outline:none;-webkit-tap-highlight-color:transparent;}/*포커스 모두 삭제*/
body{width:100%;min-width: var(--min-width);}
main{overflow: hidden;}
.m-view{display: none;}
.container{width: 100%;margin: 0 auto;padding:0 var(--container-padding);}
.section-wrapper{max-width: calc(var(--content-width) + (var(--container-padding) * 2));width: 100%;padding:0 var(--container-padding);margin-left: auto;margin-right: auto;}

.number-list{counter-reset:list-number;display: flex;flex-direction: column;row-gap: 0.5em;}
.number-list li{counter-increment:list-number;position: relative;padding-left: 1em;}
.number-list li:before{content:counter(list-number)".";display:inline-block; text-align:center;position: absolute;left: 0;top:0;}

/*헤더 스타일*/
.site-header {width:100%;min-width: var(--min-width);background-color: var(--header-background);height: var(--header-height);position: fixed;top: 0;left: 0;z-index: 101;transition-duration: 0.3s;transition-property: height,padding,box-shadow;padding:var(--header-padding);}
/* .site-header {width:100%;min-width: var(--min-width);background-color: var(--header-background);height: var(--header-height);position: fixed;top: 0;left: 0;z-index: 101;transition-duration: 0.3s;transition-property: height,padding,box-shadow;padding:0px;} */


/* .site-header .container {padding:var(--header-padding);} */
.site-header .logo-box {height: 48px;width: auto;}
.site-header .logo-box > img{height: 100%;width: auto;}
.site-header .site-header-content{display: flex;align-items: center;justify-content: space-between;max-width: var(--container-width);margin:0 auto;}
.site-header .menu-box{}
.site-header .menu-box .menu-list{display: flex;column-gap: 80px;}
.site-header .menu-box .menu-list .menu-item{position: relative;    padding: 16px 0 11px;}
.site-header .menu-box .menu-list .menu-item::before{content:'';background-image: url(../images/icons/icon-notice.svg);background-size: 100% auto;width: 20px;height: 16px;display: block;position: absolute;left: 50%;top:0;transform: translate(-50%,0);transition-duration: 0.3s;transition-property: opacity,transform;opacity: 0;}
.site-header .menu-box .menu-list .menu-item > a{display: block;font-size: 18px;font-weight: 700;color:var(--black1);font-family: var(--NanumSquareNeo);letter-spacing: -0.03em;transition-duration: 0.3s;transition-property: color;}
.site-header .menu-box .menu-list .menu-item .submenu-list{position: absolute;pointer-events: none;opacity: 0;background-color: var(--orange1);padding:30px;left: 50%;transform: translate(-50%,0);border-radius: 30px;display: flex;flex-direction: column;row-gap: 10px;transition-duration: 0.3s;}
.site-header .menu-box .menu-list .menu-item .submenu-list a{font-family: var(--NanumSquareNeo);display: block;padding: 5px 0;white-space: nowrap;font-size: 18px;color:var(--orange2);text-align: center;font-weight: 700;letter-spacing: -0.03em;}
.site-header .header-button{display: flex;align-items: center;column-gap: 10px;justify-content: flex-end;}
.site-header .header-button .link-button {display: inline-block;font-family: var(--NanumSquareNeo);border:1px solid #D0D0D0;height: 36px;color:#5B5B5B;font-size: 14px;letter-spacing: -0.03em;padding:10px 20px;border-radius: 50px;}
.site-header .header-button .search-button {width: 40px;height: 40px;background-image: url("../images/icons/icon-search.svg");background-repeat: no-repeat;background-size: 23px auto;background-position: center;font-size: 0;text-indent: -99999px;}
.site-header .header-button .menu-button{display: block;width: 40px;height: 40px;background-image: url("../images/icons/icon-menu.svg");background-size: 40px auto;background-position: center;}

/*스크롤 헤더 모션*/
.site-header.fix{height: var(--header-fix-height);padding:var(--header-fix-padding);box-shadow: var(--shadow2);}

.content-wrapper{padding-top: var(--header-height);}

/* sso 아래 두줄 추가 */
/* .site-header.fix .gnb_header{height: 0; display:none; transition-duration: 0.3s;transition-property: height,padding,box-shadow;}
.site-header.fix .container{padding: 0px;} */


/*푸터 */
.site-footer{position: relative;z-index: 1;}
.site-footer .footer-container{max-width: calc(var(--content-width) + (var(--container-padding) * 2));width: 100%;padding:0 var(--container-padding)}
.site-footer .footer-deco{padding-top: 40px;}
.site-footer .footer-deco  img{display: block;}
.site-footer .footer-deco .footer-container{display: flex;justify-content: space-between;margin: 0 auto;align-items: flex-end;}
.site-footer .footer-content{font-family: var(--NanumSquareNeo);background-color: var(--green3);color:var(--green1);font-size: 16px;line-height: 1.5;font-weight: 400;letter-spacing: -0.03em;padding:var(--footer-padding)}
.site-footer .footer-content .footer-container{display: flex;flex-direction:column;margin: 0 auto;row-gap: 30px;}
.site-footer .footer-content .footer-top{display: flex;justify-content: space-between;flex-wrap: wrap;row-gap: 16px}
.site-footer .footer-content .footer-menu{display: flex;align-items: center;flex-wrap: wrap;row-gap: 10px;}
.site-footer .footer-content .footer-menu-list{display: flex;align-items: center;flex-wrap: wrap;row-gap: 10px;}
.site-footer .footer-content .footer-menu-list a{color:var(--green1);}
.site-footer .footer-content .footer-menu-list > li:after{content:'|';margin: 0 0.5em;}
.site-footer .footer-content .footer-menu-list:last-of-type > li:last-of-type:after{content:none;}
.site-footer .footer-content .relevant-button{display: flex;column-gap: 10px;}
.site-footer .footer-content .relevant-button :is(.official-button,.site-button){width: 170px;height: 50px;display: flex;justify-content: space-between;background-color: var(--white);align-items: center;padding:0 20px;border-radius: 25px;}
.site-footer .footer-content .relevant-button :is(.official-button,.site-button) span{color:var(--green1);transform: translateY(0.1em);}
.site-footer .footer-content .relevant-button :is(.official-button,.site-button)::after{content:'';display: block;background-image: url("../images/icons/icon-official.svg");background-repeat: no-repeat;background-size: 20px auto;width: 20px;height: 20px;background-position: center;}
.site-footer .footer-content .relevant-button .official-button::after{background-image: url("../images/icons/icon-official.svg");}
.site-footer .footer-content .relevant-button .site-button{position: relative;cursor: pointer;}
.site-footer .footer-content .relevant-button .site-button .site-list{position: absolute;border-radius: 20px;background-color: var(--white);padding:10px;box-shadow: var(--shadow2);top:-3px;left: 50%;transform: translate(-50%,-90%);opacity: 0;pointer-events: none;transition-duration: 0.3s;transition-property: opacity,transform;}
.site-footer .footer-content .relevant-button .site-button .site-list .site-item{}
.site-footer .footer-content .relevant-button .site-button .site-list .site-item a{display: block;border-radius: 10px;color:var(--green1);white-space: nowrap;padding:10px;}
.site-footer .footer-content .relevant-button .site-button::after{background-image: url("../images/icons/icon-site.svg");}

.site-footer .footer-content .relevant-button .site-button.open .site-list{transform: translate(-50%,-100%);opacity: 1;pointer-events: auto;}

.site-footer .footer-content .footer-bottom{display: flex;justify-content: space-between;flex-wrap: wrap;row-gap: 16px;}
.site-footer .footer-content .company-info{display: flex;flex-wrap: wrap;row-gap: 10px;}
.site-footer .footer-content .company-info li{}
.site-footer .footer-content .company-info > li:nth-of-type(n + 2):before{content:'|';margin: 0 0.5em;}
.site-footer .footer-content .copyright{margin-top: 10px;}
.site-footer .footer-content .sns-box{display: flex;}
.site-footer .footer-content .sns-box .sns-item > a{width: 40px;height: auto;aspect-ratio: 1 / 1;}
.site-footer .footer-content .sns-box .sns-item > a > img{display: block;width: 100%;height: 100%;}

/*전체 메뉴*/
.sitemap{position: fixed; top:0; width: 100%;min-width: var(--min-width);height: 100%;z-index: 102;background-color: rgba(72,141,100,0.9);display: flex;justify-content: center;align-items: center;pointer-events: none;opacity: 0;transition-duration: 0.3s;transition-property: opacity;}
.sitemap .sitemap-header{display: flex;justify-content: space-between;align-items: center;}
.sitemap .sitemap-header .deco{display: block;transform: translateY(1px)}
.sitemap .sitemap-header .deco > img{display: block;}
.sitemap .sitemap-wrapper{width: 100%;max-width: calc(var(--content-width) + (var(--container-padding) * 2));padding:0 var(--container-padding);}
.sitemap .sitemap-wrapper .menu-list{display: flex;flex-direction: column;row-gap: 10px}
.sitemap .sitemap-wrapper .menu-box{height: calc(100% - var(--header-height));overflow: auto;position: relative;}
.sitemap .sitemap-wrapper .menu-list .menu-item{display: flex;align-items:center;background-color: var(--white);border-radius: 30px;padding:24px 30px;column-gap: 30px;}
.sitemap .sitemap-wrapper .menu-list .menu-item > a{flex: none;width: 160px;color:var(--black1);}
.sitemap .sitemap-wrapper .menu-list .menu-item .submenu-list{display: flex;gap: 10px 30px;flex-wrap: wrap;}
.sitemap .sitemap-wrapper .menu-list .menu-item .submenu-list .submenu-item > a{color:var(--button_on);position: relative;padding:5px 0;}
.sitemap .sitemap-wrapper .menu-list .menu-item .submenu-list .submenu-item > a::before{content:'';display: block;width: 0;height: 2px;background-color: var(--orange1);bottom:0;position: absolute;left: 0;transition-duration: 0.3s;transition-property: width;}


body.sitemap-open{height: 100%;overflow: hidden;}
body.sitemap-open .sitemap{pointer-events: auto;opacity: 1;}

/*상세 검색*/
.detail-search-layer{position: fixed;width: 100%;min-width: var(--min-width);height: 100%;z-index: 102;background-color: rgba(243,134,1,0.9);display: flex;justify-content: center;align-items: center;pointer-events: none;opacity: 0;transition-duration: 0.3s;transition-property: opacity;}
.detail-search-layer .detail-search-header{display: flex;align-items: flex-end;height: var(--header-height);padding: 0 var(--container-padding);}
.detail-search-layer .detail-search-header .detail-search-header-wrapper{display: flex;width:100%;justify-content: space-between;align-items: center;}
.detail-search-layer .detail-search-header .title{display: flex;align-items: center;color:var(--white);font-size: 32px}
.detail-search-layer .detail-search-header .title > img{display: block;}
.detail-search-layer .detail-search-wrapper{width: 100%;max-width: calc(var(--content-width) + (var(--container-padding) * 2) + 8px);height: 100%;}
.detail-search-layer .detail-search-wrapper .menu-box{height: calc(100% - var(--header-height));overflow: auto;padding: 0 var(--container-padding) 25px;position: relative;}
.detail-search-layer .detail-search-wrapper .menu-box::-webkit-scrollbar {width: 8px;}
.detail-search-layer .detail-search-wrapper .menu-box::-webkit-scrollbar-thumb {background-color: var(--orange2);border-radius: 10px;background-clip: padding-box;border: 2px solid transparent;}
.detail-search-layer .detail-search-wrapper .menu-box::-webkit-scrollbar-track {background-color: var(--orange3);border-radius: 10px;box-shadow: inset 0 0 5px white;}
.detail-search-layer .detail-search-wrapper .menu-list{display: flex;flex-direction: column;row-gap: 10px}
.detail-search-layer .detail-search-wrapper .menu-list .menu-item{display: flex;align-items:center;background-color: var(--orange3);border-radius: 30px;padding:24px 30px;column-gap: 30px;row-gap: 8px;}
.detail-search-layer .detail-search-wrapper .menu-list .menu-item > a{width: 120px;color:var(--black1);    flex: none;}
.detail-search-layer .detail-search-wrapper .menu-list .menu-item .submenu-list{display: flex;gap: 10px;flex-wrap: wrap;}
.detail-search-layer .detail-search-wrapper .menu-list .menu-item .submenu-list .submenu-item{}
.detail-search-layer .detail-search-wrapper .menu-list .menu-item .submenu-list .submenu-item input[type='checkbox']{display: none;}
.detail-search-layer .detail-search-wrapper .menu-list .menu-item .submenu-list .submenu-item input[type='checkbox'] + label{color:var(--black2);background-color: var(--white);padding:10px;border-radius: 30px;display: inline-block;cursor: pointer;transition-duration: 0.2s;transition-property: background-color,color,box-shadow;line-height: 1;}
.detail-search-layer .detail-search-wrapper .menu-list .menu-item .submenu-list .submenu-item input[type='checkbox']:checked + label{background-color: var(--orange1);color:var(--white);box-shadow: var(--shadow4);}
.detail-search-layer .detail-search-wrapper .button-box{display: flex;justify-content: center;margin-top: 40px;column-gap: 10px;}
.detail-search-layer .detail-search-wrapper .button-box .reset-button{width: 160px;height: 50px;background-color: var(--white);color:var(--black1);border-radius: 50px;font-family: var(--NanumSquareNeo);font-size: 22px;font-weight: 700;letter-spacing: -0.03em;display: flex;justify-content: space-between;align-items: center;padding:0 30px}
.detail-search-layer .detail-search-wrapper .button-box .reset-button::after{content:'';background-image: url("../images/icons/icon-reset.svg");display: inline-block;background-size: 28px auto;width: 28px;height: 28px;}
.detail-search-layer .detail-search-wrapper .button-box .search-button{width: 160px;height: 50px;background-color: var(--black1);color:var(--white);border-radius: 50px;font-family: var(--NanumSquareNeo);font-size: 22px;font-weight: 700;letter-spacing: -0.03em;display: flex;justify-content: space-between;align-items: center;padding:0 30px}
.detail-search-layer .detail-search-wrapper .button-box .search-button::after{content:'';background-image: url("../images/icons/icon-search-white.svg");display: inline-block;background-size: 28px auto;width: 28px;height: 28px;}
.detail-search-layer .detail-search-wrapper .info{color:var(--black2);}
.detail-search-layer .detail-search-wrapper .price-input{display: flex;column-gap: 10px;align-items: center;}
.detail-search-layer .detail-search-wrapper .price-input input:is([type=text],[type=number]){border:0;width: 300px;height: 48px;border-radius: 30px;text-align: center;}

body.detail-search-open{height: 100%;overflow: hidden;}
body.detail-search-open .detail-search-layer{pointer-events: auto;opacity: 1;}

/*검색 창*/
.search-layer{width: 100%;min-width: var(--min-width);background-color: rgba(243,134,1,0.9);position: fixed;top: 0;left: 0;z-index: 102;height: var(--header-height);display: flex;align-items: flex-end;pointer-events: none;opacity: 0;transition-duration: 0.3s;transition-property: opacity;}

/** 최상단 검색박스에 sso 들어가면서 스크롤에 따라 height 조정하기 위함 (아래두줄) **/
/* .search-layer{transition-property: opacity, height;}
.search-layer.fix{height: var(--header-fix-height);} */

.search-layer .search-wrapper{display: flex;padding: 0 40px;align-items: center;column-gap: 40px;width: 100%;max-width: var(--content-width);margin: 0 auto;}
.search-layer .t-box{flex: none;font-size: 32px;font-weight: 800;color:var(--white);font-family:var(--GangwonEduPower);display: flex;align-items: center}
.search-layer .button-box{display: flex;column-gap: 10px;width: 100%;}
.search-layer .search-input{width: calc(100% - 170px);background-color: var(--white);border-radius: 60px;height: 60px;position: relative;display: flex;}
.search-layer .search-input > input{border:0;height: 100%;width: calc(100% - 60px);padding:0 40px;background-color: transparent;font-size: 22px;font-weight: 700;letter-spacing: -0.03em;font-family: var(--NanumSquareNeo);color:var(--black1)}
.search-layer .search-input > input:focus{outline:0;}
.search-layer .search-input > input::placeholder{color:var(--black1)}
.search-layer .search-input .search-button{width: 60px;height: 60px;background-image: url("../images/icons/icon-search-orange.svg");background-size: 29px auto;background-position: center;background-repeat: no-repeat;font-size: 0;text-indent: -9999px;}
.search-layer .detail-search-button{width: 160px;height: 60px;border:1px solid var(--white);border-radius: 50px;display: flex;justify-content: space-between;align-items: center;padding:0 20px;font-size: 22px;font-weight: 700;letter-spacing: -0.03em;color:var(--white);line-height: 1;}
.search-layer .detail-search-button::after{content:'';width: 28px;height: 28px;display: block;background-image: url("../images/icons/icon-detail.svg");background-size: cover;}

body.search-layer-open .search-layer{pointer-events: auto;opacity: 1;}


@media all and (max-width:1400px) {
    .site-header .menu-box .menu-list {column-gap: 40px;}
}

@media all and (max-width:1200px) {
    :root{
        --container-padding:32px;
    }
    .site-header .menu-box .menu-list {display: none;}
    .search-layer{height: auto;}
    .search-layer .search-input {width: calc(100% - 60px);}
    .search-layer .detail-search-button {font-size: 0;width: 60px;height: 60px;padding: 0;position: relative;}
    .search-layer .detail-search-button::after {position: absolute;top:0;left: 0;width: 100%;height: 100%;display: block;background-image: url(../images/icons/icon-detail.svg);background-size: 34px auto;background-position: center;background-repeat: no-repeat;}

    .detail-search-layer .detail-search-wrapper .menu-list .menu-item.flexWrap{flex-wrap: wrap;}
    .detail-search-layer .detail-search-wrapper .menu-list .menu-item.flexWrap .info{width: 100%;text-align: right;}
    .detail-search-layer .detail-search-wrapper .menu-list .menu-item.flexWrap .info br{display: none;}

}

@media all and (max-width:1000px) {
    .sitemap .sitemap-wrapper .menu-list .menu-item > a {width: 130px;}
    .search-layer{padding:var(--container-padding);}
    .search-layer .search-wrapper {align-items: flex-start;flex-direction: column;position: relative;}
    .search-layer .search-wrapper .close-button{position: absolute;top:0;right: 0;}

    .detail-search-layer .detail-search-header .title .m-view{display: block;}

    .site-footer .footer-deco  .deco002{display: none;}
}

@media all and (max-width:750px) {
    :root{
        --container-padding:16px;
        
		/* sso */
        --header-height:80px;
        /* --header-height:calc(80px + var(--sso-height)); */

        --header-padding:20px 0;
        --header-fix-height:80px;
        --header-fix-padding:20px 0;
        --footer-padding:40px 0;
    }

    .site-header .logo-box {height: 40px;width: auto;}
    .sitemap {align-items: flex-start;padding:0;}
    .sitemap .sitemap-header {justify-content: flex-end;height: var(--header-height);}
    .sitemap .sitemap-header .deco {display: none;}
    .sitemap .sitemap-wrapper {height: 100%;padding: 0 ;}
    .sitemap .sitemap-wrapper .menu-box {height: calc(100% - var(--header-height));padding: 0 var(--container-padding) var(--container-padding) ;}
    .sitemap .sitemap-wrapper .menu-list .menu-item {border-radius: 16px;padding: 16px;column-gap: 0;align-items: flex-start;}
    .sitemap .sitemap-wrapper .menu-list .menu-item > a {width: 120px;}
    .sitemap .sitemap-wrapper .menu-list .menu-item .submenu-list {display: flex;gap: 8px;flex-direction: column;}

    .search-layer .search-wrapper {padding: 0;}
    .search-layer .search-wrapper .t-box {padding: 0 16px;}
    .search-layer .search-wrapper .t-box img {background-position: bottom;background-repeat: no-repeat;background-size: 100% auto;display: block;width: 109px;height: 77px;transform: translateY(1px);}
    .search-layer .search-wrapper .search-input {width: calc(100% - 48px);border-radius: 40px;height: 48px;}
    .search-layer .search-wrapper .search-input > input {font-size: 16px;padding: 10px 16px;}
    .search-layer .search-wrapper .search-input .search-button {width: 48px;height: 48px;background-size: 24px auto;}
    .search-layer .search-wrapper .detail-search-button {width: 48px;height: 48px;}
    .search-layer .search-wrapper .detail-search-button::after {background-size: 24px auto;}

    .detail-search-layer .detail-search-wrapper {padding-top: var(--container-padding);}
    .detail-search-layer .detail-search-header {display: flex;align-items: flex-end;height: 50px;}
    .detail-search-layer .detail-search-header .detail-search-header-wrapper {height: 100%;}
    .detail-search-layer .detail-search-header .title{column-gap: 10px;}
    .detail-search-layer .detail-search-header .title > img{width: auto;height: 50px;display: block;}

    .detail-search-layer .detail-search-header .title h2{line-height: normal;}
    .detail-search-layer .detail-search-wrapper .menu-list .menu-item {border-radius: 16px;padding: 16px;column-gap: 30px;flex-direction: column;align-items: flex-start;}
    .detail-search-layer .detail-search-wrapper .menu-list .menu-item .submenu-list{gap: 8px 4px;}
    .detail-search-layer .detail-search-wrapper .menu-list .menu-item .submenu-list .submenu-item input[type='checkbox'] + label {padding: 10px 16px;outline:none;-webkit-tap-highlight-color:transparent;}
    .detail-search-layer .detail-search-wrapper .menu-list .menu-item.flexWrap .info{text-align: left;}
    .detail-search-layer .detail-search-wrapper .price-input input:is([type=text],[type=number]) {width: 50%;height: 40px;flex: 1 1 auto;}
    .detail-search-layer .detail-search-wrapper .button-box {margin-top: 24px;}
    .detail-search-layer .detail-search-wrapper .button-box .reset-button {height: 48px;font-size: 18px;padding: 0 24px;}
    .detail-search-layer .detail-search-wrapper .button-box .reset-button::after {background-size: 24px auto;width: 24px;height: 24px;}
    .detail-search-layer .detail-search-wrapper .button-box .search-button {height: 48px;font-size: 18px;padding: 0 24px;}
    .detail-search-layer .detail-search-wrapper .button-box .search-button::after {background-size: 24px auto;width: 24px;height: 24px;}


    .site-footer .footer-deco  .deco001{width: 100%;}
    .site-footer .footer-deco  .deco001 img{width: 100%;display: block}
    .site-footer .footer-content .footer-container {row-gap: 24px;}
    .site-footer .footer-content .footer-menu {flex-direction: column;align-items: flex-start;}
    .site-footer .footer-content .footer-menu .footer-menu-list:first-of-type li:last-of-type::after{content:none;}
    .site-footer .footer-content .relevant-button {width: 100%;}
    .site-footer .footer-content .relevant-button :is(.official-button,.site-button) {width: 170px;max-width: calc((100% - 10px) / 2);height: 40px;padding: 0 16px;}
    .site-footer .footer-content .relevant-button :is(.official-button,.site-button) span {transform: translateY(0);}
    .site-footer .footer-content .company-info{flex-direction: column;}
    .site-footer .footer-content .company-info > li:nth-of-type(n + 2):before{content:none}

}

@media all and (max-width:580px) {
    :root{
        /* sso */
    	/* --sso-height:44px; */
    	
    	/* sso */
        --header-height:60px;
        /* --header-height:calc(60px + var(--sso-height)); */
        
        --header-padding:10px 0;
        --header-fix-height:60px;
        --header-fix-padding:10px 0;
    }
    .site-header .logo-box {height: 30px;width: auto;}
    .site-header .header-button .link-button{display: none;}
}


/*호버 이벤트가 가능할때만 적용*/
@media (hover: hover) and (pointer: fine) and (min-width:750px){
    .site-header .menu-box .menu-list .menu-item:hover:before{opacity: 1;transform: translate(-50%,-15px);}
    .site-header .menu-box .menu-list .menu-item:hover .submenu-list{opacity: 1;pointer-events: auto;transform: translate(-50%,11px);}
    .site-header .menu-box .menu-list .menu-item:hover .submenu-list .submenu-item > a{transition-duration: 0.3s;transition-property: color;}
    .site-header .menu-box .menu-list .menu-item:hover .submenu-list .submenu-item > a:hover{color:var(--white);}

    .sitemap .sitemap-wrapper .menu-list .menu-item .submenu-list .submenu-item > a:hover::before{width: 100%;}

    .site-footer .footer-content .relevant-button .site-button .site-list .site-item:hover a{background-color: var(--green3);color:var(--black1);}
}