@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,500;0,600;0,700;0,800;0,900;1,300;1,400&family=Noto+Sans+JP&display=swap');
@import url('https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css');

.inner { width: 100%; max-width: 1196px; margin: 0 auto; }
.flex {display: flex;align-items: center;justify-content: space-between;/* flex-direction: column; */}
.tit { margin-top: 3rem; margin-bottom: 0.6em; border-bottom: 5px solid #000; line-height: 1.7; font-family: 'Gmarket Sans','Noto sans KR'; font-size: 3.8rem; }
.tit a {font-family:'Gmarket Sans';}
.m_img { display: none; }
.btn-left {display: block;}
#smart_editor2 img {width: 100% !important;}
body.se2_inputarea img {max-width: 100%;}
.font-c {font-family: 'Noto Sans JP', sans-serif;}

header.header { margin-top: 51px; }
header.header .logo-wr .link-wr li { width: 90px; height: 90px; margin-left: 1.5em; border: 1px solid #df7762; border-radius: 100%; transition: .3s; }
header.header .logo-wr .link-wr li:nth-child(2) { border: 1px solid #f9ce3e; }
header.header .logo-wr .link-wr li:nth-child(3) { border: 1px solid #7cbd6d; }
header.header .logo-wr .link-wr li a { justify-content: center; align-items: center; width: 100%; height: 100%; color: #df7762; font-size: 1.7rem; font-weight: 700; text-align: center; line-height: 1.3; transition: .3s; }
header.header .logo-wr .link-wr li:nth-child(2) a { color: #f9ce3e; }
header.header .logo-wr .link-wr li:nth-child(3) a { color: #7cbd6d; }
header.header .logo-wr .link-wr li:nth-child(1):hover { background: #df7762; }
header.header .logo-wr .link-wr li:nth-child(2):hover { background: #f9ce3e; }
header.header .logo-wr .link-wr li:nth-child(3):hover { background: #7cbd6d; }
header.header .logo-wr .link-wr li:nth-child(1):hover a,
header.header .logo-wr .link-wr li:nth-child(2):hover a,
header.header .logo-wr .link-wr li:nth-child(3):hover a { color: #fff; }
header.header .logo-wr .logo img { width: 185px; }
header.header .gnb-wr {align-items: center;padding: 20px 0;}
header.header .gnb.flex {width:auto; gap:clamp(10px,2vw,20px);}
header.header .gnb-wr .gnb li {}
header.header .gnb-wr .gnb li a {position: relative;font-family: 'Noto Sans KR';font-size: 1.8rem;font-weight: 600;}
header.header .gnb-wr .gnb li a:hover { text-decoration: underline; text-underline-position : under; text-underline-offset : 1px; }
header.header .gnb-wr .sch-wr {height:36px;}
header.header .gr-bar { background: linear-gradient(45deg, #de0150, #1f2084); }
header.header .gr-bar .inner { height: 60px; color: #fff; }
header.header .gr-bar h3 {align-items: center;font-size: 24px;font-weight: normal;font-family: 'Noto Sans KR';color: #fff;}
header.header .gr-bar h3 span { font-size: 15px; font-weight: normal; margin-left: 1em; font-family: 'Noto Sans KR'; }
header.header .gr-bar .gr-bar-logo { width: 185px; }
header.header .ham_menu_btn { display: none; }
.ham_menu_btn { display: none; align-content: space-between; }
.ham_menu_btn span { color:#242b44; font-size: 4rem; font-weight: 500; }
.ham_menu_btn.close_ham { display: block; text-align: right; width: 100%; height: 50px; background: linear-gradient(45deg, #de0150, #1f2084); border-radius: 0; }
.ham_menu_btn.close_ham span { padding-right: 0.3em; color: #ffffff; border-radius: 1em 0 0 0; font-size: 4rem; font-weight: 300; line-height: 50px; }
.ham_menu { position: fixed; right: 0; top: 0; z-index: 9999; width: 75%; height: 100vh; background: #fff; border-radius:1em 0 0 0; transform: translateX(100%); transition: .3s; overflow: hidden; }
.ham_menu a { color: var(--light-color); }
.ham_menu > ul { padding: 1.5em; }
.ham_menu > ul > li { width: 100%; line-height: 2; position: relative; }
.ham_menu > ul > li > .gnb-depth { height: 0; overflow: hidden; padding:0 15px; border: 0 solid #dee2e6; background: #f9fafb; transition-duration: 0.4s }
.ham_menu > ul > li > a { font-size: 2.3rem; font-weight: 700; }
.ham_menu > ul > li > .gnb-depth a { display: block; line-height: 36px }
.ham_menu > ul > li > .gnb-depth { position: relative; }
.ham_menu > ul > li.active:after { transform:rotate(180deg); transition-duration: 0.4s }
.ham_menu > ul > li.active:before { transform:rotate(360deg); transition-duration: 0.4s }
.ham_menu > ul > li.active .gnb-depth { padding: 15px; border-radius: 0.5em; height: auto; }
.ham_menu > ul > li.active > .gnb-depth { border: 1px solid #dee2e6; }
.ham_menu.active { transform: translateX(0); }
/* .ham_menu.active { width: 75%; visibility: visible; border-radius: 1em 0 0 0; } */
.ham_bg.active { position: fixed; width: 100%; background:rgb(7 5 45 / 35%); backdrop-filter: blur(3px); left: 0; top: 0; height: 100%; z-index: 999; }

/* 메인 */

.sec03,
.sec02,
.sec01 { margin-bottom: 5em; }


.box-wr ul p { position: relative; }
/* .box-wr ul p:after { position: absolute; bottom: 0.1em; left: 0; width:0; height: 2px; transition: .3s; content: ''; }
.box-wr ul:hover p:after { width: 100%; background: #000; } */
.box-wr ul:hover .img-box img { transform: scale(1.05); }

.box-wr .img-box { position: relative; overflow: hidden; }
.box-wr .img-box img { object-fit: cover; width: 100%; height: 100%; transition: .3s; }
.box-wr .tit-box { margin-top: 1.5em; }
.box-wr .tit-box p { display: inline-block; width: 100%; margin-bottom: 0.5em; font-size: 2.7rem; font-weight: 900; letter-spacing: -0.03em; transition: .3s; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.box-wr .tit-box span { color: #808080; font-size: 2rem; letter-spacing: -0.03em; }

.sec01 .box-wr ul { width: calc(50% - 2rem); }
.sec01 .box-wr ul .img-box { height: 400px; }
.sec01 .box-wr ul:hover p { text-decoration: underline; text-underline-position : under; text-underline-offset : 1px; }

.sec02 .box-wr ul { width: calc(22.49163879599% + 1.67224080268); }
.sec02 .box-wr ul:last-of-type { width: calc(22.49163879599% - 1.67224080268); }
.sec02 .box-wr ul:not(:last-of-type) { padding-right: 1.67224080268%; margin-right: 1.67224080268%; border-right:1px solid #ddd; }
.sec02 .box-wr .tit-box p { margin-bottom: 0.5em; max-width: 269px; height: 62px; font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; transition: .3s; word-break: keep-all; overflow: hidden; white-space: break-spaces; }
.sec02 .box-wr .tit-box span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.6rem; }
.sec02 .box-wr ul:hover p { text-decoration: underline; text-underline-position : under; text-underline-offset : 1px; }


.sec03 .tit a { color: #808080; font-size: 1.8rem; font-weight: 400; }
.sec03 .box-wr ul { width: 100%; }
.sec03 .box-wr ul li { position: relative; line-height: 2.3; }
.sec03 .box-wr ul li p { position: relative; font-family: 'Noto Sans KR'; font-size: 2rem; letter-spacing: -0.03em; }
.sec03 .box-wr ul li span { margin-left: auto; color: #808080; font-size: 2rem; }
.sec03 .box-wr ul li:hover p { text-decoration: underline; text-underline-position : under; text-underline-offset : 1px; }



/*검색*/
#web_bo_sch #bo_sch {border: 0;border-radius: 4em;background-color: #efefef;float: right;}
#web_bo_sch #bo_sch select { display: none; }
#web_bo_sch #bo_sch .sch_input { width: 274px; padding-left: 1em; }


/* 화면낭독기 사용자용 */
#hd_login_msg { position:absolute; top:0; left:0; font-size:0; line-height:0; overflow:hidden }
.msg_sound_only, .sound_only { display:inline-block !important; position:absolute; top:0; left:0; margin:0 !important; padding:0 !important; font-size:0; line-height:0; border:0 !important; overflow:hidden !important }

/* 뉴스레터 - 링크 */
.notice-wr { margin: 2em auto; }
.notice-wr .notice { display: flex; justify-content: flex-start; align-items: center;     background: #eee;}
.notice-wr .notice a { width: 50%; text-align: left; }
/* .notice-wr .notice span.bar { display: inline-block; width: 1px; background: #ddd; margin-right: 28px; } */
/* .notice-wr .notice a:nth-child(2) { border-left: 1px solid #ddd; padding-left: 20px; } */
.neWbt-wr.wr-01 { margin: 2em auto; }
.neWbt-wr.wr-02 { margin: 0 auto; }
.neWbt-wr.wr-02 a { display:inline-block; }
.neWbt-wr.wr-02 a:not(:last-of-type) { margin-bottom: 10px }
.neWbt-wr.wr-03 { position: relative; margin: 2em auto 0; }
.neWbt-wr.wr-03 .neW_btn_wr { position: absolute; top: 33px; right: 53px; }


@media all and (max-width:800px) {
 .notice-wr,
 .neWbt-wr.wr-01,
 .neWbt-wr.wr-02,
 .neWbt-wr.wr-03 { width: 100% !important; }
 .neWbt-wr.wr-03 .neW_btn_wr { right: 3em; }
 /* .notice_btn img { width: 89%; } */
 }

 @media all and (max-width:600px) {
 .notice-wr { margin: 1em auto; }
 .neWbt-wr.wr-01 { margin: 1em auto; }
 .neWbt-wr.wr-01 a { width: 22%; display: inline-block; }
 /* .neWbt-wr.wr-01 img { width: 17%; } */
 .neWbt-wr.wr-03 { margin: 1em auto 0; }
 .neWbt-wr.wr-03 .neW_btn_wr { right: 0; top: 6px; }
 .neWbt-wr.wr-03 .neW_btn_wr img { width: 17%; }

 }



/* 반응형 */
/* 메인 */
@media all and (max-width:1195px) {
 .inner { max-width: 1024px; }

 }

 @media all and (max-width:1023px) {
 .inner { max-width: 768px; }
 header.header { margin-top: 26px; }
 header.header .gnb-wr .gnb li {/* margin-right: 3em; */}
 header.header .gnb-wr .gnb li a { font-size: 2rem; }
 header.header .logo-wr .link-wr li { width: 80px; height: 80px; }

 .sec01 .box-wr ul .img-box { height: 260px; }
 .sec02 .box-wr .tit-box p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 47px; font-size: 2rem; }


 }

 @media all and (max-width:1022px) {
 #web_bo_sch #bo_sch .sch_input { width: 230px; }
 }

 @media all and (max-width:768px) {

 header.header .logo-wr .link-wr li { width: 60px; height: 60px; margin-left: 1em; }
 header.header .logo-wr .link-wr li a { font-size: 1.6rem; }
 .inner { max-width: 100%; padding: 0 1.5em; }
 .tit { font-size: 3.2rem; }

 .box-wr .tit-box { margin-top: 0.5em; }
 .box-wr .tit-box p { margin-bottom: 0; font-size: 2.2rem; }

 .sec03, .sec02, .sec01 { margin-bottom: 4em; }
 .sec01 { margin-top: 4em; }
 .sec01 .box-wr ul { width: calc(50% - 1rem); }

 .sec02 .box-wr { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; }
 .sec02 .box-wr ul:not(:last-of-type) { padding-right: 0; margin-right: 0; border-right: 0; }

 .sec03 .box-wr ul li {width: 100%;flex-direction: column;}
 .sec03 .box-wr ul li a { width: 75%; }
 .sec03 .box-wr ul li a span { width: 25%; }
 .sec03 .box-wr ul li p { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

 .sns { right: 1.5em; }

 #web_bo_sch #bo_sch .sch_input { width: 149px; }

 }

 @media all and (max-width:630px) {
 #web_bo_sch { display: none; }
 header.header { position: fixed; top: 0; width: 100%; margin: 0; padding-top: 1em; background: #fff; z-index: 999; }
 header.header .gr-bar { margin-top: 1em; }
 header.header .gr-bar .inner { height: 30px; }
 header.header .gr-bar .gr-bar-logo { width: 100px; }
 header.header .gr-bar h3 { font-size:1.6rem; }
 header.header .gr-bar h3 span { font-size: 1.3rem; }
 header.header .logo-wr { width: 142px; }
 header.header .link-wr { display: none; flex-direction: column; position: absolute; right: 1.5rem; }
 header.header .gnb-wr { display: none; }
 header.header .ham_menu_btn { position: absolute; right: 1.3em; display: block; }
 .ham_menu #web_bo_sch { display: block; }
 .ham_menu #web_bo_sch #bo_sch { float: inherit; width: calc(100% - 3em); margin: 0 auto; }
 .ham_menu #web_bo_sch #bo_sch .sch_input { width: calc(100% - 5rem); }
 .ham_menu > ul { padding: 3em 1.5em; }
 .ham_menu .link-wr { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.5em; }
 .ham_menu .link-wr li { width: 100%; padding-top: 50%; border-radius: 100%; transition: .3s; }
 .ham_menu .link-wr li a { justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 1.7rem; font-weight: 700; text-align: center; line-height: 1.3; transform: translateY(-50%); }
 .ham_menu .link-wr li:nth-child(1) { background: #df7762; }
 .ham_menu .link-wr li:nth-child(2) { background: #f9ce3e; }
 .ham_menu .link-wr li:nth-child(3) { background: #7cbd6d; }

 #content { margin-top: 145px; }

 .box-wr ul p { font-size: 1.8rem; }
 .box-wr .tit-box p { font-size: 2rem; }
 .box-wr .tit-box span { font-size: 1.6rem; }

 .sec01 .box-wr { flex-wrap: wrap; }
 .sec01 .box-wr ul { width: 100%; margin-bottom: 2em; }
 .sec02 .box-wr { grid-template-columns: repeat(1, 1fr); grid-gap: 2em; }
 .sec02 .box-wr .tit-box p { max-width: 100%; height: auto; }
 .sec03 .box-wr ul li p { font-size: 1.8rem; }
 .sec03 .box-wr ul li span { font-size: 1.8rem; }



 .pc_img { display: none; }
 .m_img { display: block; }
 }