@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

.bg-ribon{text-align: center;}
header .header-wrap{display: flex; justify-content: space-between; align-items: center; width: 892px; height: 80px; margin: auto;}
header .header-wrap .menu-toggle, header .header-wrap .nav-close, header .header-wrap .calander-btn{display: none;}
header .header-wrap .logo a img{width: 125px; max-height:none!important;}
header .dropdown2{border-top: #f2f2f2 1px solid;}
header .logo{font-family: var(--font1);}
header nav{display: flex; align-items: center; gap: 50px; width: calc(100% - 205px); justify-content: space-between;}
header nav .dropdown .dropbtn{font-size: 14px; font-weight: 500; margin: 0;}
header nav .dropdown .dropbtn.active, header nav .dropdown .dropbtn:hover{color: crimson !important;}
header nav .fa-search:before{color: #1f1f1f;}
.floating-bn{position: fixed; right: 40px; bottom: 30px; width: 200px; z-index: 10;}
.floating-bn img{width: 100%;}
.floating-bn-mo{display: none;}

#mainBody{margin-top: 0 !important;}
.main-contents{max-width: 892px; margin: auto; padding: 160px 0;}
.main-contents p{font-family: 'GMarketSans'; font-weight: 500; color: #4d4d4f; letter-spacing: 1px; line-height: 1.4;}
.main-contents a{text-decoration: none; color: #1f1f1f;}
.main-contents img{max-width: 100%; vertical-align: middle;}
.main-contents .main-tt{margin-bottom: 60px; font-size: 36px;text-align: center;}
.main-sec1{display: grid; grid-template-columns: repeat(2,1fr); gap: 100px; max-width: 840px; margin: auto; text-align: center;}
.main-sec1 .item p{margin-top: 30px; font-size: 24px;}
.main-sec2, .main-sec3, .main-sec4, .main-sec5{margin-top: 160px;}
.main-sec3 .item-wrap{display: grid; grid-template-columns: repeat(2,1fr); column-gap: 100px; row-gap: 60px; max-width: 840px; margin: auto;}
.main-sec3 .item-wrap .item{text-align: center;}
.main-sec3 .item-wrap .item p{margin-top: 30px; font-size: 24px;}
.main-sec4 .item-wrap{display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; max-width: 840px; margin: auto;}
.main-sec4 .item-wrap .item a{display: block; width: 100%; text-align: center;}
.main-sec4 .item-wrap .item a p{display: inline-block; padding-right: 18px; margin-top: 30px; background: url(../images/main/btn_arrow.png) no-repeat; background-position: right 6px; background-size: 11px auto; font-size: 24px;}

@media screen and (max-width:1023px) {
header{padding: 0 !important; justify-content: space-between;}
header .navbar_{width: 92%; margin: auto;}
header .header-wrap{width: auto;}
header nav{gap: 30px;}
.footer_pc{width: auto !important;}
.footer_pc .binfo{width: auto !important;}
.main-sec1{width: 92%;}
.main-sec3, .main-sec4{width: 92%; margin: 160px auto 0;}
}

@media screen and (max-width:767px) {
header .header-wrap{height: 70px;}
.bg-ribon a img{max-width: 100%;}
header .hd_login_m{display: none;}
header .header-wrap .menu-toggle, header .header-wrap .nav-close, header .header-wrap .calander-btn{display: block;}
header::after{content: ''; position: fixed; top: 0; left: 0; width: 0; height: 100vh; background-color: #000; opacity: 0.8; z-index: -9999; opacity: 0; transition: all 0.6s ease-in-out;}
header nav{position: fixed; top: 0; left: -100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; background-color: #FFF; width: 70%; height: 100vh; padding: 20px 0; z-index: 10; opacity: 0; transition: all 0.6s ease-in-out;}
header.on nav{left: 0; opacity: 1;}
header.on::after{opacity: 0.7; width: 100%; z-index: 9;}
header .header-wrap .menu-toggle{width: 32px; height: 31px; background: none; border: none;}
header .header-wrap .menu-toggle img{width: 100%;}
header .header-wrap .calander-btn{width: 32px; height: 31px;}
header .header-wrap .calander-btn img{width: 100%;}
header .header-wrap .nav-close{position: absolute; right: -50px; width: 26px; height: 24px;}
header .header-wrap .nav-close img{width: 100%;}
header nav .dropdown{width: 100%; height:auto;}
header nav .dropdown .dropbtn{font-size: 16px; width: 100%; height:auto; line-height: 50px; text-align: left; padding-left: 20px; box-sizing: border-box; border-bottom: 1px solid #ddd; background:url(../images/nav_arrow_down.png) no-repeat center right; background-size: 35px auto;}
header nav .dropdown .dropbtn.on{background:url(../images/nav_arrow_up.png) no-repeat center right; background-size: 35px auto; color: crimson;}
header nav .dropdown .open{display: block !important;}
header nav .hd_sch{display: none;}
header nav .dropdown .mnuCont2{padding:0;}
header nav .dropdown > .mnuCont2{border-bottom: 1px solid #ddd;}
header nav .dropdown > .mnuCont2 > div > a{padding: 6px 30px; width: 100%; box-sizing: border-box;}
header nav .dropdown > .mnuCont2 > div > a.on{background-color: #dfdfdf; color:crimson;}
header nav .dropdown .mnuCont2 div{flex-direction: column; align-items: flex-start; height: auto;}
header nav .dropdown .mnuCont2 div a{font-size: 16px; font-weight: 400;}
header nav .dropdown .mnuCont2 .hidden{display: none;}
header nav .dropdown .mnuCont2 .open_depth3{display: block !important;}
header nav .dropdown .mnuCont2 .mnuCont2 > div{gap: 10px; padding: 10px 40px; background-color: #f5f5f5;}
header .dropdown2{display: none; border-top: none;}
.floating-bn-mo{display: block; position: fixed; right: 4%; bottom: 30px; width: 160px; z-index: 10;}
.floating-bn-mo img{width: 100%;}
.floating-bn{display: none;}
.main-contents{padding: 100px 0;}
.main-contents .main-tt{margin-bottom: 30px; font-size: 22px;}
.main-sec1{gap: 20px;}
.main-sec1 .item p{margin-top: 20px; font-size: 14px;}
.main-sec2, .main-sec3, .main-sec4, .main-sec5{margin-top: 100px;}
.main-sec3 .item-wrap{gap: 20px;}
.main-sec3 .item-wrap .item p{margin-top: 20px; font-size: 14px;}
.main-sec4 .item-wrap{gap: 10px;}
.main-sec4 .item-wrap .item a{}
.main-sec4 .item-wrap .item a p{font-size: 14px; padding-right: 10px; margin-top: 20px; background-size: 6px auto; background-position: right 3px;}

}