@charset "euc-kr";

:root {
	--xxx-large-font-size:32px;
	--xx-large-font-size:28px;
	--x-large-font-size:24px;
	--large-font-size:20px;
	--font-size:18px;
	--sub-font-size: 16px;
	--small-font-size: 15px;
	--x-small-font-size: 14px;
}

.m_gnb .sub_menu {display:none !important;}
.web_dis {display:block;}
.mb_dis {display:none;}
.pc_view {display:block}
.mb_view {display:none}
.mont {font-family:'Montserrat', sans-serif; }



/*
#header.down, #header.over {background:#fff; box-shadow:0px 0px 9px rgba(0, 0, 0, 10%);}

.sub_wrap .menu_btn span, .sub_wrap .menu_btn span:before, .sub_wrap .menu_btn span:after{background:#000;}

:is(.down, .over) .w_gnb .gnb > li > a {color:#000;}
:is(.down, .over) .top_lang > a {color:#000;}
:is(.down, .over) .top_lang > a img  {webkit-filter:brightness(1) invert(0.9); filter:brightness(1) invert(1);}
:is(.down, .over) .menu_btn a img {-webkit-filter:brightness(1) invert(1); filter:brightness(1) invert(1);}
:is(.down, .over) .top_sns > li img {-webkit-filter:brightness(1) invert(1); filter:brightness(1) invert(1);}
:is(#header.down, #header.over) h1 img {-webkit-filter:brightness(1) invert(0); filter:brightness(1) invert(0);}

*/

/* header */
#header {width:100%; position: fixed; left:0px; top:0px; z-index:9999; transition:all 0.3s 0s ease-in-out; background: #fff; border-bottom: 1px solid #ddd;}
#header h1 {position:absolute; left:0px; top:50%; transform:translateY(-50%); -wbkit-transform:translateY(-50%); z-index:10; line-height:0px}

.header_bar {padding:0px 10px;}
/* .header_bar.fix {width:100%; position: fixed; left: 0px; top:0px;  box-shadow:0px 6px 5px rgba(0, 0, 0, 10%);} */
.in_header {max-width:var(--inner); width:100%; height:100px; margin:0 auto; position:relative; z-index:9;}

/* wrap */
#wrap {width:100%; margin: 0 auto; overflow-x: clip; word-break:keep-all; padding-top: 100px; transition:all 0.3s 0s ease-in-out;}
#inner_wrap {position:relative; padding:min(70px, 7vw) 10px 130px 10px;}
#inner_wrap:has(.company_section .bg) {padding-bottom: 0px;}
.inner {max-width:var(--inner); margin:0 auto;}


.side_quick { position: fixed; right: 10px; top: 50%; z-index:99; transform: translateY(-50%);}
.side_quick > ul > li:not(:first-child) {border-top:1px solid #000;}
.side_quick a {background:#000; display:flex; width:100px; height:100px; border-radius:100%; font-size: 14px; font-weight:500; line-height:1.4em; justify-content: center; align-items: center; color:#fff; text-align: center; flex-direction: column;}
.side_quick a .ico {display:block; margin-bottom:5px;}

.m_gnb_on {display:none;  position:absolute; right:10px; top:50%; box-sizing:border-box; transform:translateY(-50%);}
.m_gnb_on .menu_btn {margin:0 auto;}
.menu_btn {position:absolute; right:0px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); box-sizing:border-box; display:block; }
.menu_btn a {display: block; line-height: 0px;}
.language_btn {display: flex; align-items: center; gap: 0.3em; position: absolute; font-weight:600; right:50px; top:50%; transform: translateY(-50%); font-size: var(--sub-font-size); line-height: 1.4em;}


/* GNB */
.w_gnb {padding:0px 120px 0px 290px;}
.w_gnb .gnb {max-width:630px; margin:0 auto; box-sizing:border-box; padding:0px;}
.w_gnb .gnb > ul {display:flex; flex-wrap:wrap; justify-content:space-around}
.w_gnb .gnb > ul > li {text-align:center; flex:auto; padding:0px 5px; vertical-align:top; }
.w_gnb .gnb > ul > li.on > a {color: var(--sub-key-color);}
.w_gnb .gnb > ul > li:hover > a {color: var(--sub-key-color);}
.w_gnb .gnb > ul > li > a {display:block; color:#333;}
.w_gnb .gnb > ul > li > a > span {display:flex; justify-content:center; align-items:center; font-size:20px; font-weight:700; height:100px; transition:all 0.2s 0s ease-in-out; position:relative;}



.w_gnb .sub_menu {position:absolute; left:0%; width:100%; box-sizing:border-box; overflow:hidden; top:100%; padding:25px 0px 25px 350px; box-sizing:border-box; overflow:hidden; text-align: left; flex-wrap: wrap; display:none; }

.w_gnb .sub_menu > li {width:25%; padding:9px;}
.w_gnb .sub_menu > li > a {display:flex; height:55px; line-height: 1.3em; padding-right: 50px; align-items:center; border:1px solid #CCCCCC; border-radius:4px; font-size:16px; color:#000000; font-weight:500; padding-left:20px; transition:all 0.2s 0s ease-in-out; position: relative; font-size: var(--sub-font-size);}
.w_gnb .sub_menu > li > a::after {content: ""; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background: url(../img/common/gnb_arrow.svg) no-repeat center center #EFF3F6; border-radius: 100%; position: absolute; right:20px; top: 50%; transform: translateY(-50%);}
.w_gnb .sub_menu > li:hover > a {background: var(--key-color); color:#fff;}
.w_gnb .depth3 {padding:10px 0px 0px 20px; display:none;}



/*
.w_gnb .sub_menu  {position:absolute; left:50%; width:140%; transform:translateX(-50%);padding-top:20px; box-sizing:border-box; overflow:hidden; top:100%; display:none; padding-bottom:20px;}
.w_gnb .sub_menu > li {padding:5px 0px 5px 0; letter-spacing:-0.5px;}
.w_gnb .sub_menu > li > a {display:block; font-size:15px; text-align:center; color:#cccccc; font-weight:400; padding:3px 0px;  line-height:18px;}
.w_gnb .sub_menu > li > a:hover {color:#fff; text-decoration:underline;}
*/


.gnb08 {display:none !important;}
.gnb09 {display:none !important;}
.w_gnb .m_gnb_on {position:absolute; right:0px; top:-1px; padding:21px; background:#2d3749}
#gnb_bar {border-top:1px solid #ccc;position:absolute; display:none; left:0%; top:100%; width:100%; background:#fff; box-shadow:0px 2px 5px rgba(0, 0, 0, 10%)}
.gnb_bar_in {max-width:var(--inner); margin:0 auto; box-sizing:border-box; padding-left:300px; position:relative;}
.gnb_bar_in > span {font-size:42px; color:#fff; line-height:140%; position:absolute; left:0px; top:0%; height:100%; display:flex; align-items:center; z-index:9; font-weight:700; cursor:default; width: 300px;}
.gnb_bar_in > span::before {content: ""; width: 100vw; height: 100%; background: var(--key-color); position: absolute; right: 0px; top: 0px; z-index: -1;}
.gnb_bar_in .txt_s {font-size:16px; color:#343434; line-height:140%; position:absolute; left:30px; top:105px; z-index:9; font-weight:300}
.gnb_bar_in .sub_menu {display:block !important; }


.depth3 {padding-top:10px}
.depth3 > li + li {margin-top:5px; text-align: left;}
.depth3 > li > a {position: relative; display: block; padding-left:0.8em; font-size: var(--sub-font-size); color: #000;}
.depth3 > li > a:before {content:""; width:3px; height:3px; border-radius:3px; background:var(--sub-key-color); position: absolute; left: 0px; top:0.7em}
.depth3 > li > a:hover {color: var(--sub-key-color);}





/* slide_menu */
.slide_menu_wrap {width:100vw; height:100%;  z-index:998; position:fixed; top:-100%; left:0px; overflow: hidden;}
.slide_menu_inner {height:100%; background:#fff; overflow-x:inherit; -webkit-overflow-scrolling:touch; z-index:2; position:relative;}
.slide_menu_inner .header {height:100px; max-width: 1820px; margin:0 auto; position:relative; background: url(../img/common/logo.svg) no-repeat 10px center;}
.slide_menu_inner .header::after {content:""; width:100vw; height:1px; background:#000; position:absolute; left:50%; top:100%; transform: translateX(-50%)}
.slide_menu_inner .bt_close {position:absolute; right:0px; top:50%; transform: translateY(-50%); display: flex; width:36px; height:36px; text-indent: -999999em;}
.slide_menu_inner .bt_close:after {display:block; content:""; width:20px; height:4px; background:#333; transform-origin:center; transform:translate(-50%, -50%) rotate(45deg); position:absolute; top:50%; left:50%}
.slide_menu_inner .bt_close:before {display:block; content:""; width:20px; height:4px; background:#333; transform-origin:center; transform:translate(-50%, -50%) rotate(135deg); position:absolute; top:50%; left:50%;}
.slide_menu_inner .gnb {max-width:1820px; margin:0 auto; position:relative; border-left:1px solid #000; border-right:1px solid #000; font-size:var(--sub-font-size); overflow-y: auto; height:calc(100% - 100px); overflow-x: hidden;}
.slide_menu_inner .gnb::-webkit-scrollbar { width: 6px; }
.slide_menu_inner .gnb::-webkit-scrollbar-thumb { background-color:#ccc; border-radius: 10px; }
.slide_menu_inner .gnb::-webkit-scrollbar-track { background-color: transparent;  }
.slide_menu_inner .gnb > ul > li:not(:first-child) {border-top:1px solid #000;}
.slide_menu_inner .gnb > ul > li {display:flex;}
.slide_menu_inner .gnb > ul > li > a {font-size:clamp(14px, 5vw, 2em); color:#000; font-weight:800 ; line-height:1.4em; padding:min(50px, 6vw) min(44px, 5vw); padding-right: 10px; min-width:9em; align-self: flex-start;}
.slide_menu_inner .gnb a {color:#000;}
.slide_menu_inner .gnb .sub_menu {display: flex !important; gap:0.8em min(6em, 5vw); flex:1; flex-wrap:wrap; padding:min(50px, 6vw) min(44px, 5vw); border-left:1px solid #000 ;}
.slide_menu_inner .gnb .sub_menu > li > a {font-size:1.5em; line-height:1.4em; font-weight:700;}



.section {padding: clamp(30px, 5vw, 50px) 10px; font-size: var(--font-size); line-height:1.5em}
.section .more {margin-left: auto;}
.section .more > a {display:flex; font-size: var(--x-small-font-size); font-weight:600; align-items:center;}
.section .more > a > span {display:flex; width:clamp(26px, 3vw, 36px); aspect-ratio: 1/1; border-radius:5px; justify-content:center; align-items:center; margin-left:10px; background:var(--key-color); border-radius:100%; color:#fff; position:relative;}
.section .more > a > span:after {display:block; content:""; width:10px; height:2px; background:#fff; position:absolute; left:50%; top:50%; margin-left:-5px; margin-top:-1px; transition:all 0.5s;}
.section .more > a > span:before {display:block; content:""; width:2px; height:10px; background:#fff; position:absolute; left:50%; top:50%; margin-top:-5px; margin-left:-1px; transition:all 0.5s;}
.section .more > a:hover > span:after {transform:rotate(90deg);}
.section .more > a:hover > span:before {transform:rotate(90deg);}
.sec_tit {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em; margin-bottom: clamp(10px, 3vw, 30px); align-items: baseline;}
.m_tit {color:#000000; font-size:clamp(22px, 3.3vw, 36px); line-height:120%; font-weight:700; }
.m_tit_txt {color:#666666; font-size: var(--sub-font-size); line-height: 1.4em; margin-top: 0.3em;}
.m_tit_txt + .m_tit {padding-top:0px;}

#container {font-size:15px; line-height: 1.4; color: #666;}
#snb .depth3 {padding-top:0px;}
#snb .depth3 > li + li {margin-top: 0px;}


#section1 {padding:0px; }
.main_visual {max-width: 100%;}
.main_visual .banner_slide {position: relative; overflow: hidden; }
.main_visual .swiper-slide { position: relative;}
.main_visual .swiper-slide .bg_img {position:absolute; transform: translateX(-50%) scale(1.1); left: 50%; top: 0px; width:100%; height:100%; object-fit: cover;transition:all 2s 0s ease-out;}
.main_visual .swiper-slide-active .bg_img { transform:translateX(-50%) scale(1);}
.main_visual .txt_frame {position:relative; height:620px; z-index:2; color:#fff; display: flex; justify-content: center; flex-direction: column; width:100%; max-width:var(--cont-inner); padding:0px 10px; margin:0 auto; text-shadow: 2px 2px 4px #333;}

.main_visual .slide_control { display: flex; justify-content: center; align-items: center; height: 34px; position: absolute; left: 0px; bottom: 5%; width: 100%; z-index: 5;}
.main_visual .slide_control .swiper-pagination {display: flex; align-items: center; gap:5px; font-size:11px; color:#000; font-weight:300;}
.main_visual .slide_control .swiper-pagination > span {font-size:14px; width: 15px; height: 15px; font-weight:600; background: #fff; border: none; opacity: 0.5;}
.main_visual .slide_control .swiper-pagination .swiper-pagination-bullet-active {opacity:1 ;}
.main_visual .slide_control .play_stop {font-size:0px; display: flex; width:14px; height:26px; justify-content: center; align-items: center; color:#000; display:none;}
.main_visual .slide_control .play_stop:focus {outline:1px solid #000}
.main_visual .slide_control .play:before {display: block; content: "¢º"; font-size:9px;}
.main_visual .slide_control .stop:before {display: block; content: ""; width: 2px; height: 9px; border-left:3px solid #000; border-right:3px solid #000;}
/* .main_visual .swiper-button-next {margin:0px 10px 0px 10px; }
.main_visual .swiper-button-prev:after {width: auto; height: auto; border: none; transform: none; border-radius: 0px; content: "¢¸"; color: #000; font-size:19px; font-weight:600;}
.main_visual .swiper-button-next:after {width: auto; height: auto; border: none; transform: none; border-radius: 0px; content: "¢º"; color: #000; font-size:19px; font-weight:600;} */
.main_visual .scroll_ico {position:absolute; left:50%; transform: translateX(-50%); text-align: center; bottom:5%; z-index:97}
.main_visual .scroll_ico > a {cursor:default; display:block; width:88px; height:70px; text-align:center; color:#fff; font-weight:600; background:url(../img/main/ico_scroll.svg) no-repeat center top; position:relative;}
.main_visual .scroll_ico .arrow {display:block; width:12px; height:12px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(136deg) translateX(-50%); opacity:0.8; position:absolute; left:50%; bottom:0px; -webkit-transform:rotate(136deg) translateX(-50%); transform-origin:0px}
.main_visual .scroll_ico .arrow2 {bottom:0px;}
.main_visual .scroll_ico .arrow1 {animation:mv1 0.7s ease-in-out 0.7s infinite;}
 @keyframes mv1 {
     0%{opacity:1; bottom:0px;}
    40%{opacity:1; bottom:-8px;}
     100%{opacity:1; bottom:0px;}
}
.main_visual .key_visual {max-width: var(--inner); width: 100%; position: absolute; left: 50%; top: 0px; transform: translateX(-50%); width: 100%; z-index:3; display: flex;  justify-content: center; flex-direction: column; height: 100%; padding:0px 10px; padding-top: 40px; color: #fff; color: #fff; line-height: 1.4em}
.main_visual .key_visual > div {width: 100%;}
.main_visual .key_visual .txt_a {font-size:min(6vw, 42px); font-weight:600; line-height:1.3em;}
.main_visual .key_visual .txt_b {font-size:clamp(13px, 2vw, 24px); max-width: 700px; margin-top:0.7em; line-height:1.4em;}
.main_visual .key_visual .btns {display: flex; max-width: 540px; justify-content: space-between; gap: 1em; margin-top: clamp(10px, 3vw, 45px);}
.main_visual .key_visual .btns > li {flex:1;}
.main_visual .key_visual .btns > li > a {display: flex; font-size: var(--sub-font-size); line-height: 1.4em; color: #fff; align-items: center; padding:0.4em 1em 0.4em 1.2em; justify-content: space-between; border-radius:8px; background:var(--sub-key-color); font-weight: 700; min-height:3.75em;}
.main_visual .key_visual .btns > li > a img {max-width: clamp(22px, 2vw, 27px);}

.main_visual .key_visual .swiper-pagination {margin-top:90px; gap:20px; padding: 0px 10px; justify-content:flex-start;}
.main_visual .key_visual .swiper-pagination-bullet {border: none; opacity: 1;}
.main_visual .key_visual .swiper-pagination-bullet-active {position: relative; background: #fff;}
.main_visual .key_visual .swiper-pagination-bullet-active::after {content: ""; width:calc(100% + 12px); height: calc(100% + 12px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius:100%; border:1px solid #fff;}


.slide_arrow {display: block; width: 40px; height: 40px; position: absolute; z-index: 4; cursor: pointer;}
.swiper-button-prev {background: url(../img/main/bt_prev.svg) no-repeat center center/cover;}
.swiper-button-next {background: url(../img/main/bt_next.svg) no-repeat center center/cover;}


.main_board_wrap {display: flex; gap:clamp(20px, 7vw, 70px); padding:clamp(20px, 4vw, 40px) clamp(10px, 2vw, 20px); justify-content: space-between; align-items: flex-start; border:1px solid #DDDDDD; border-radius: clamp(10px, 3vw, 30px);}
.main_board_wrap h4 {display: flex; align-items: center; gap: 0.5em; font-size:clamp(19px, 2vw, 24px); line-height: 1.4em; color: #000; margin-bottom: clamp(10px, 2.2vw, 27px);}
.main_board_wrap h4 img {max-width: clamp(30px, 3vw, 36px); flex-shrink: 0;}
.main_board {flex:1; width: 100%; overflow: hidden;}
.m_board * {transition: all 0.3s 0s ease-in-out;}
.m_board + h4 {margin-top:1em;}
.m_board .news_list {border-bottom: 1px solid #CCCCCC; min-height:6em; padding-bottom: 1em; margin-left:clamp(25px, 3vw, 30px); }
.m_board .news_list li + li {margin-top:0.5em;}
.m_board .news_list li a {display: flex; flex-direction: column; padding-left: 1em; padding-right: 20px; position: relative;}
.m_board .news_list li a::before {content: ""; width: 3px; height: 3px; background: #000; position: absolute; left: 0px; top: 0.7em;}
.m_board .news_list li a::after {content: ""; display: block; width: 6px; height: 6px; border-top: 2px solid #000000; border-right: 2px solid #000000; transform: rotate(45deg) translateY(-50%); position: absolute; right:8px; top:50%; transition: all 0.3s 0s ease-in-out;}
.m_board .news_list li a:hover {color: var(--sub-key-color);}
.m_board .news_list li a:hover .txt {color: var(--sub-key-color);}
.m_board .news_list li a:hover::after {border-color: var(--sub-key-color);}

.m_board .news_list li .tit {flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; font-weight: 700;}
.m_board .news_list li .txt {flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; font-size: var(--small-font-size); color: #666;}
.main_board .newsletter { margin-left:clamp(40px, 4vw, 48px);}
.main_board .newsletter h5 {font-weight: 600; color: var(--sub-key-color); font-size: var(--large-font-size);}
.main_board .newsletter .txt {color:#666666; font-size: var(--sub-font-size); padding-bottom: 1em;}
.main_board .newsletter fieldset {border: 1px solid #ccc; border-radius:8px; display: flex; align-items: center; align-items: center; padding:0px 0px 0px 1em; gap:10px; height: 60px;}
.main_board .newsletter fieldset .input {border: none; font-size: var(--x-small-font-size); padding: 0px; width: 100%; flex:1; height: 100%;}
.main_board .newsletter fieldset label {line-height: 0px;}
.main_board .newsletter fieldset .bt {border-radius: 8px; width:7em; color: #fff; background: var(--key-color); font-size: var(--sub-font-size); height: 100%; border: none; display: flex; justify-content: center; align-items: center; padding: 0px; height: 100%; font-weight:700;}
.main_board .newsletter .x-small-font {color: #666666; padding-top: 0.5em; letter-spacing:-0.05em;}



.m_board .photo {overflow: hidden; min-height:4em; border-radius:8px;}
.m_board .photo .box {display: flex; width: 100%; gap:clamp(10px, 5vw, 50px); align-items: center; overflow: hidden; background: #fff;}
.m_board .photo .box .img {aspect-ratio: 360/262; width: 55%; max-width:360px; border-radius:clamp(8px, 2vw, 16px); overflow: hidden;}
.m_board .photo .box .img img {width: 100%; height: 100%; object-fit:cover;}
.m_board .photo .box .info {flex:1; display: flex; flex-direction: column; overflow: hidden;}
.m_board .photo .box .info .tit {font-size: var(--x-large-font-size); margin-top: 0.5em; font-weight:600; height: 1.4em; line-height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; color: #000;}
.m_board .photo .box .info .txt {font-size: var(--sub-font-size); color: #666666; height:2.8em; line-height: 1.4em; margin:0.5em 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.m_board .photo .box .info .view_btn {display:flex; justify-content: center; align-items: center; margin-top:1em; max-width:11.5em; min-height:3.2em; padding: 0.4em 1.1em; border-radius:4px; background: #fff; color: var(--sub-key-color); font-size: clamp(13px, 1.4vw, 14px); font-weight: 700; gap: 0.8em; line-height: 1.3em; border: 1px solid var(--sub-key-color); transition:all 0.3s 0s ease-in-out;}
.m_board .photo .box .info .view_btn::after {content: ""; display: block; width: 6px; height: 6px; margin-left: 0.5em; border-top: 2px solid var(--sub-key-color); border-right: 2px solid var(--sub-key-color); transform: rotate(45deg); transition:all 0.3s 0s ease-in-out;}
.m_board .photo .box .info .view_btn:hover {background: var(--sub-key-color); border-color: var(--sub-key-color); color: #fff;}
.m_board .photo .box .info .view_btn:hover::after {border-color:#fff;}
.m_board .photo .swiper-pagination {justify-content: flex-start; margin-top: clamp(15px, 3vw, 30px);}
.m_board .photo .swiper-pagination-bullet {border-color: #DDDDDD; background: #DDDDDD; }
.m_board .photo .swiper-pagination-bullet-active {background:var(--sub-key-color); border-color: var(--sub-key-color);}

.main_board_wrap #main_board2 .tab .active {background: var(--sub-key-color); border-color: var(--sub-key-color);}
.section #main_board2 .more > a > span {background: var(--sub-key-color);}
.main_board .slide_control {width:140px; height: 45px; border-radius:60px; background: rgba(0, 0, 0, 80%); display: flex; justify-content: center; position: absolute; right:10px; bottom: 10px; gap:5px; align-items: center; z-index: 9;}
.main_board .slide_control .swiper-pagination {display: flex; width: auto; min-width:4em; justify-content:center; align-items: center; gap:5px; font-size:11px; color:#fff; font-weight:300; bottom: auto; left: auto;}
.main_board .slide_control .swiper-pagination > span {font-size:14px; font-weight:600}
.main_board .slide_control .play_stop {font-size:0px; display: flex; width:14px; height:26px; justify-content: center; align-items: center; color:#fff;}
.main_board .slide_control .play_stop:focus {outline:1px solid #fff}
.main_board .slide_control .play:before {display: block; content: "¢º"; font-size:9px;}
.main_board .slide_control .stop:before {display: block; content: ""; width: 2px; height: 9px; border-left:3px solid #fff; border-right:3px solid #fff; box-sizing: content-box;}
.main_board .slide_arrow {display: flex; align-items: center; justify-content: center; background: none; width: 20px; height: 26px; position: relative; left: auto !important; right: auto !important; top: auto !important; margin:0px !important;}
.main_board .slide_arrow:after {display: block; content: ""; width:8px; height:8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.main_board .swiper-button-prev:after { transform: rotate(-135deg);}


@media (hover: hover) and (pointer: fine) {
	.m_board .first_new:hover .tit {color: var(--key-color);}
	.m_board .news_list li:hover {background:#fff; border-color: var(--key-color);}
	.m_board .news_list li:hover a {color: var(--key-color);}
	.m_board .news_list li:hover .date {color: var(--key-color);}
	.m_board .news_list li:hover .ico {background:var(--key-color); color: #fff;}
	.m_board .news_list li:hover .ico img {-webkit-filter:brightness(0) invert(1); filter:brightness(0) invert(1);}
 }


.event_slide {position: relative;}
.event_slide .swiper {overflow: hidden;}
.event_slide .box * {transition: all 0.3s 0s ease-in-out;}
.event_slide .box {display:block; position:relative; overflow: hidden; border-radius:clamp(10px, 3vw, 30px); border-bottom-right-radius:0px}
.event_slide .box .info:after {display:block; content:""; width:clamp(50px, 8vw, 86px); aspect-ratio: 86/87; background:url(../img/main/ban_arrow.png) no-repeat left top/cover; position:absolute; right:0px; bottom:0px; z-index:2}
.event_slide .info {padding: clamp(10px, 3vw, 20px) clamp(15px, 3.5vw, 30px); min-height:10em;  background: #EEF3FF;}
.event_slide .box dt {font-size: var(--x-large-font-size); margin-top: 0.5em; font-weight: 700; height: 1.4em; line-height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis;}
.event_slide .box dd {font-size: var(--sub-font-size); color: #666666; height:2.8em; line-height: 1.4em; margin-top: 0.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-right:clamp(30px, 5vw, 56px);}
.event_slide .box .num {color: var(--key-color); display: inline-flex; border: 1px solid var(--key-color); background: #fff; border-radius:50px; justify-content: center; align-items: center; font-size:clamp(12px, 1.2vw, 13px); padding: 0px 1em; min-height:2em; line-height: 1.3em; font-weight: 600; text-align: center;}
.event_slide .box .img {position: relative; overflow: hidden; aspect-ratio:340/248;}
.event_slide .box .img > img {width:100%; height: 100%; object-fit: contain;}
.event_slide .swiper-button-prev {width:70px; height: 70px; position: absolute; top:50%; transform: translateY(-50%); left: -100px; cursor: pointer;}
.event_slide .swiper-button-next {width:70px; height: 70px; position: absolute; top:50%; transform: translateY(-50%);	right: -100px; cursor: pointer;}
.event_slide .list {display: flex; flex-wrap: wrap; gap:clamp(5px, 3vw, 28px)}
.event_slide .list > li {width:calc((100% - (clamp(5px, 3vw, 28px) * 3 )) / 4);}


@media (hover: hover) and (pointer: fine) {
	.event_slide .box:hover .info {color:#fff; background: var(--sub-key-color);}
	.event_slide .box:hover dt {color:#fff;}
	.event_slide .box:hover dd {color:#fff;}

 }

 .contact_cards {display: flex; gap: clamp(15px, 5vw, 60px);}
 .contact_card {flex: 1; display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); min-height: 180px; padding: clamp(20px, 3vw, 36px) clamp(20px, 3.5vw, 48px); border-radius:8px; color: #fff; position: relative; justify-content: center; overflow: hidden;}
 .contact_card.ty01 {background: var(--key-color);}
 .contact_card.ty02 {background: var(--sub-key-color);}
 .contact_card.ty01::after {content: ""; position: absolute; right:-17%; top: 20% ; width: clamp(160px, 30vw, 382px); aspect-ratio:382/389; pointer-events: none; z-index: 0; background: url(../img/main/bg_global.png) no-repeat center center / cover; opacity: 0.5;}
 .contact_card.ty02::after {content: ""; position: absolute; right:-10%; top: 20% ; width: clamp(150px, 28vw, 314px); aspect-ratio:314/310; pointer-events: none; z-index: 0; background: url(../img/main/bg_korean.png) no-repeat center center / cover;}
 .contact_card .ico {position: relative; z-index: 1; line-height: 0; min-width: max-content;}
 .contact_card .ico img {width: clamp(60px, 8vw, 89px); height: auto;}
 .contact_card .info {position: relative; z-index: 1;}
 .contact_card .tit {font-size: var(--x-large-font-size); font-weight: 700; line-height: 1.4em; color: #fff;}
 .contact_card .bt {display: inline-flex; justify-content: center; align-items: center; margin-top: 0.6em; min-width:11.5em; min-height:3.2em; padding: 0.4em 1.1em; border-radius:4px; background: #fff; color: var(--sub-key-color); font-size: clamp(13px, 1.4vw, 14px); font-weight: 700; gap: 0.8em; line-height: 1.3em; border: 1px solid #fff; transition:all 0.3s 0s ease-in-out;}

 .contact_card .bt::after {content: ""; display: block; width: 6px; height: 6px; margin-left: 0.5em; border-top: 2px solid var(--sub-key-color); border-right: 2px solid var(--sub-key-color); transform: rotate(45deg); transition:all 0.3s 0s ease-in-out;}
 
 @media (hover: hover) and (pointer: fine) {
	 .contact_card .bt:hover {background: none; color: #fff; border-color: #fff;}
	 .contact_card .bt:hover::after {border-color: #fff;}
 }
 
 

 
 
.with_kara .swiper-slide {width:clamp(120px, 26vw, 280px);}
.with_kara .box {width:100%; aspect-ratio: 277/100; border: 1px solid #ccc; border-radius:8px; display: flex; justify-content: center; align-items: center; padding: 10px;}
.with_kara .box img {object-fit: cover; max-height: 100%;}

#section7 {margin-bottom: clamp(20px, 5vw, 50px);}


/* footer */
#footer {max-width:var(--inner); color: #fff; padding:0px 10px; position:relative; margin:0 auto; }
#footer::before {content: ""; width:2000vw; height: 100%; position: absolute; left: 50%; top: 0px; transform: translateX(-50%); background: #2D313D; z-index: -1;}
#footer a {color: #fff;;}
#footer .f_logo {margin-right:clamp(20px, 4vw, 90px); margin-top: 0.5em;}
#footer .go_top {position:absolute; right:0px; top:50%; transform: translateY(-50%); z-index:99}
#footer .go_top > a {display:flex; width:74px; aspect-ratio:1/1; line-height:1.6em; background:#fff; justify-content:center; text-align: center; align-items:center; flex-direction:column; color:#000; font-size:12px; font-weight:400; border-radius:100%;}
.footer_navi {display: flex; justify-content: space-between; align-items: center; min-height:80px; padding: 10px 0px; position: relative;}
.footer_navi::before {content: ""; width: 2000vw; height: 100%; position: absolute; left: 50%; top: 0px; transform: translateX(-50%); background: #313747; z-index: -1;}
.footer_navi .navi {display: flex; flex-wrap: wrap; overflow: hidden; gap:2em; font-size: var(--sub-font-size);}
.footer_navi .navi > li {position: relative;}
.footer_navi .navi > li::before {content:""; width:1px; height:50%; background:#fff; position: absolute; left:-1em; top: 50%; transform: translateY(-50%);}
.sel_box_wrap {display: flex; gap: 1em; align-items: center; width: 50%; max-width:353px}
.sns_box {display: flex; gap:5px; align-items: center; position: absolute; right: 0px; top:40%; transform: translateY(-50%);}
.sns_box img {max-width: clamp(40px, 5vw, 51px);}
.sel_box_wrap .sel_box {flex:1}
.sel_box_wrap .sel_box .select {width: 100%; line-height: 1.4em; font-weight:300; font-size: var(--x-small-font-size); background: url(../img/common/select_arrow4.svg) no-repeat calc(100% - 5px) center !important; background-size: 17px auto !important;}
.sel_box_wrap .sel_box .select option {background: #313747;}

.addressW {position:relative; font-size: var(--small-font-size); padding: clamp(20px, 5vw, 50px) 0px; display: flex; gap: clamp(10px, 3vw, 30px); position: relative;}
.addressW .f_logo {min-width:max-content;}

.addressW address {display: flex; flex-wrap: wrap; gap:0.2em 3em; padding-right: 100px; overflow: hidden;}
.addressW address > span {position:relative; font-weight:300; display: flex; align-items: center; gap: 0.4em;}
.addressW address > span+span:before {content:""; width:1px; height:clamp(10px, 1.7vw, 14px); background: #FFFFFF; opacity: 0.5; position: absolute; left:-1.5em; top: 50%; transform: translateY(-50%); display: block;}
.addressW .copy {width:100%; font-weight: 300; font-size: 0.95em; padding-top: 0.8em;}

.right_quick_area {position: relative;}
.right_quick {position: absolute; left: 50%; width: 100px; margin-left:840px;  height: fit-content; z-index: 999;}
.right_quick .tit {text-align: center; font-size:14px; font-weight: 700; line-height: 1.4em; margin-bottom: 0.5em;}
.right_quick > ul > li + li {margin-top:5px;}
.right_quick > ul > li > a {display: flex; border: 1px solid #CCCCCC; border-radius:4px; justify-content: center; align-items: center; flex-direction: column; height:100px; background: #fff;}
.right_quick > ul > li > a .txt {font-size:12px; line-height: 1.4em; padding-top: 1em; text-align: center;}

.subVisual {margin-top: 0px;}

.vision_list {display: flex; flex-direction: column; margin-top: clamp(10px, 6vw, 70px);}
.vision_list > li {width: 100%;}
.vision_list > li:after {display: flex; content: ""; width:51px; height:70px; background: url(../img/soga/arrow.svg) no-repeat center center/cover; margin:5px auto;}
.vision_list > li > dl {display: flex; text-align:center; font-size:clamp(15px, 3vw, 22px); gap: clamp(8px, 3vw, 14px); color: #fff; font-weight:500;}

.vision_list > li:nth-child(1) > dl dt, .vision_list > li:nth-child(1) > dl dd {background: #336baa;}
.vision_list > li:nth-child(2) > dl dt, .vision_list > li:nth-child(2) > dl dd {background: #336baa;}
.vision_list > li:nth-child(3) > dl dt, .vision_list > li:nth-child(3) > dl dd {background: #6690bf;}

.vision_list dt {display: flex; align-items: center; justify-content: center; border-radius:90px; min-width:10em; }
.vision_list dd {flex:1; min-height:5em; display: flex; align-items: center; justify-content: center; padding: 1em; border-radius:90px;}


.core_values {display: flex; gap: 10px; color: var(--key-color); font-weight:500;}
.core_values .box {display: flex; align-items: center; justify-content: center; padding: 1em; border:1px dashed #156EE8; border-radius:30px ; font-size:clamp(15px, 3vw, 22px); text-align: center;}
.core_values .box:nth-child(1) {width: 30%; max-width: 220px;}
.core_values .box:nth-child(2) {flex:1;}
.core_values .box > ul {display: flex; flex-wrap: wrap; gap: 10px;}
.core_values .box > ul > li {flex:30%; display: flex; flex-direction: column; justify-content: center; padding:1.2em; border-radius:24px; background: #e6edf4; gap: 10px;}
.core_values .box > ul > li > p {min-height: 2.8em; font-size: var(--large-font-size); line-height: 1.4em;}

.hdSch2 {display: flex; align-items: center;}
.hdSch2 .keyword {flex:1; border-radius: 4px; border: 1px solid #dcdcdc;}

/*atab*/

.atab {display:flex; flex-wrap: wrap; gap:clamp(4px, 2vw, 10px); position:relative;}
.atab li a {display:flex; min-width:6.666em; height:2.222em; justify-content:center; align-items:center; background:#fff; text-align:center; font-weight:500; line-height:1.2em; padding:0px 1.4em; border-radius:60px; border:1px solid #ccc;}
.atab li.on {position:relative; z-index:2;}
.atab li.on a {background:#000; border-color: #000; font-weight:700; color:#fff;}

.btab {display:flex;flex-wrap: wrap; margin-bottom:min(50px, 5vw); justify-content:center; position:relative;}
.btab li a {display:flex; height:2.88em; justify-content:center; align-items:center; word-break: break-all; background:#fff; border:1px solid #cccccc; border-radius:4px; text-align:center; font-weight:500; line-height:1.2em; box-sizing:border-box; color:#000; padding:0px 0.5em; min-width:6.6em;}
.btab li.on {position:relative; z-index:2;}
.btab li.on a {background:#d6c0fb;}

.ctab {display:flex; overflow-x:auto; margin-bottom:50px; padding-bottom:10px; position:relative; margin:0px -5px;}
.ctab::-webkit-scrollbar {width:5px; height:8px; background-color:#eee;}
.ctab::-webkit-scrollbar-thumb {background:#666;}
.ctab li {flex:1; padding:0px 5px; min-width:fit-content;}
.ctab li a {display:flex; height:60px; justify-content:center; align-items:center; background:#fff; box-sizing:border-box; text-align:center; font-weight:700; font-size:18px; line-height:1.2em; box-sizing:border-box; color:#999999; padding:0px 1em; border:1px solid #cccccc;}
.ctab li.on {position:relative; z-index:2;}
.ctab li.on a { color:#009477; border-color:#009477}




.of_hi .fl50 {float:left; width:49%;}
.of_hi .fr50 {float:right; width:49%;}
.graybox { background:#cccccc; padding:10px;}
.no_flash { display:none;}

/* ·¹À̾îÆ˾÷ */
.layerPop {-webkit-overflow-scrolling:touch; display: flex; align-items: center; justify-content:center; width:100%; position:fixed; left:0; right:0; top:0; bottom:0; padding:10px; z-index:99999;  background:rgba(0, 0, 0, 50%); font-size:var(--font-size); line-height:1.5em; padding:10px;}
.pop_wrap {width:100%; max-height:100%; position:relative;  background:#fff; }
.pop_wrap .pop_body {padding:clamp(15px, 3vw, 30px); padding-top: 0px; word-break:keep-all; overflow-y:auto; max-height:90dvh;}
.pop_wrap .pop_body::-webkit-scrollbar { width: 6px; }
.pop_wrap .pop_body::-webkit-scrollbar-thumb { background-color:#ccc; border-radius: 10px;}
.pop_wrap .pop_body::-webkit-scrollbar-track { background-color: transparent; }
.pop_wrap .x_btn {position:absolute; right:clamp(10px, 2vw, 30px); top:clamp(25px, 4vw, 30px); display:block; cursor:pointer; background:none; width:30px; height:30px;  font-size:1px !important; text-indent:-999999px;}
.pop_wrap .x_btn:after {display:block; content:""; width:20px; height:2px; background:#000; transform-origin:center; transform:translate(-50%, -50%) rotate(45deg); position:absolute; top:50%; left:50%;}
.pop_wrap .x_btn:before {display:block; content:""; width:20px; height:2px; background:#000; transform-origin:center; transform:translate(-50%, -50%) rotate(135deg); position:absolute; top:50%; left:50%;}
.pop_wrap .pop_head {display: flex; align-items: center; min-height:3em; padding:clamp(15px, 3vw, 30px); position: relative;}
.pop_wrap .pop_head .x_btn {right:20px; top: 50%; transform: translateY(-50%);}
.pop_wrap .pop_head .title {flex: 1; min-width: 0; padding-right: 40px; font-size:clamp(17px, 2.2vw, 26px); line-height: 1.4em; word-wrap: anywhere;}

.pop_wrap .pop_head .s_txt {font-size:14px; line-height:14px;  color:#646464; text-align:center; padding:0px 0px 30px 0px;}




/* Æ˾÷ */
.main_layer_pop {position:absolute; left:5%;  top:100px; z-index:9999}
.main_pop_bottom {background:#fff; font-weight:300; color:#000; padding:10px; position:relative; font-size:14px; box-sizing:border-box; border:1px solid #ccc;}
.main_pop_bottom .close {position:absolute; right:10px; top:10px; padding-right:30px; background:url(../img/common/bt_x.svg) no-repeat right center; background-size:20px auto;}
.main_layer_pop_inner {width:100%; height:100%; display:table; position:relative; margin:0 auto; box-sizing:border-box;}
.main_layer_pop_inner .cell {display:table-cell; vertical-align:middle; position:relative;}
.main_layer_pop .bx-wrapper .bx-controls-direction a {margin-top:-22px; width:44px; height:44px;}
.main_layer_pop .bx-wrapper .bx-prev {left:0px; background:url(../img/main/pop_l.png) no-repeat 0 0;}
.main_layer_pop .bx-wrapper .bx-next {right:0px; background:url(../img/main/pop_r.png) no-repeat 0 0;}
.main_layer_pop .pop_wrap_in {margin:0 auto;}
.main_layer_pop .pop_wrap_in{overflow-y:auto;}


.layers_wrap {background:#FFF; position:relative; min-width:300px;  font-weight:300;}
.layers_wrap .layers_tit {width:100%; padding:15px 0px; line-height:150%; background:#333;  text-align:center; font-size:1.8em; color:#fff; position:relative;}
.layers_wrap .layers_tit .logo {padding-left:25px; padding-top:20px;}
.layers_wrap  .close_pop { position:absolute; right:25px; top:17px;}
.layers_wrap .layers {padding:20px; font-size:14px; position:relative; /*min-height:100px; max-height:760px; overflow-x:hidden; overflow-y:auto; -webkit-print-color-adjust:exact;*/}

.layers_wrap .close {height:30px; border-top:none; text-align:right; background:#e2e2e2; line-height:30px;}
.layers_wrap .close a { display:inline-block; zoom:1; font-family:Pretendard; color:#2d2d2d; padding-right:20px; background:url(http://pic.neungyule.com/newnetimes/img/btn/pop_close_s.gif) no-repeat right center; margin-right:10px;}
.layers_wrap .pop_tit {padding-left:5px; border-bottom:1px solid #afafaf; min-height:41px; padding-bottom:3px; font-family:Pretendard; color:#444444; font-size:22px; line-height:41px;}
.layers_wrap .pop_tit.ico_check2 { font-size:13px; min-height:20px; padding:10px 10px 10px 50px; background:url(../img/common/ico_check2.gif) no-repeat 10px 10px #f9f9f9; line-height:150%; border-bottom:none;}
.layers_wrap .pop_tit_no {min-height:38px; font-family:Pretendard; color:#444444; font-size:22px; line-height:38px;}


.print_wrap #header {display:none !important}
.print_wrap .sub_visual {display:none !important}
.print_wrap .lnb_position {display:none !important}
.print_wrap #lnb_wrap {display:none !important}
.print_wrap .title_bar {display:none !important}
.print_wrap .page_tab {display:none !important}
.print_wrap #footerW {display:none !important}
.print_wrap .print_bt {display:none !important}
.print_wrap .p_none {display:none !important}
.print_wrap .print_hide {display:none !important}
#wrap.print_wrap, .print_wrap #inner_wrap {padding:0px !important}


.date_picker_two {overflow:hidden; position:relative}
.date_picker_two .date_picker {float:left; width:47%;}
.date_picker {display:flex; align-items:center;}
.date_picker .input {width:100%; flex:1;}
.date_picker img {min-width:fit-content; margin:0px 10px;}
.date_picker.two_col .input {width:100%;}
.date_picker_two .col-sm-2  {float:left; width:47%;}
.date_picker_two .pa {left:50%; top:0%; line-height:30px; text-align:center; width:10px; margin:0px 0px 0px -5px;}


.h5-tit {color: #2D53A7; display: flex; align-items: center; gap: 0.3em; margin:1em 0px 0.5em 0px;}
.h5-tit::before {color: #2D53A7; content: "¢º"; font-size:9px; transform: scaleX(0.6); transform-origin: left center; line-height: 1em;}

.ul-list01 > li .ul-list02 {margin-top:0.5em;}
.img_box {display: flex; justify-content: space-between; gap: 1em;}
.img_box > p {flex:1;}
.img_box .txt {display: block; margin-top:7px;}



.btView {display: inline-flex; height:2.5em; color: #fff; border-radius:4px; background: #7B8595; align-items: center; justify-content: center; gap: 1em; padding: 0px 1.3em;  text-indent: 0px;}

.btDownBx {display: flex; flex-direction: column; gap: 1em;}
.btDownBx .btDown {position: relative; right:auto; top: auto; left: auto; bottom: auto;}




.sub_con { max-width:var(--inner); margin:0 auto; font-size:var(--font-size); word-break:keep-all;}
.sub_con > .s_tit:first-child {margin-top:0px;}
.s_tit {font-size:clamp(20px, 3.2vw, 32px); color:#000000; line-height:130%; position:relative; margin:2.5em 0px 0.5em 0px;  display:flex; align-items:center;}
.s_tit.no-flex {display:block; line-height:1.3em;}

.sub_visual {height:clamp(250px, 43vw, 430px); padding: 10px; color: #fff; display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center;}
.sub_visual .bg_img {position: absolute; left: 50%; top: 0px; transform: translateX(-50%); width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.sub_visual h2 {font-size: clamp(22px, 5vw, 42px); line-height: 1.4em; font-weight:600; text-align: center;}
.sub_visual .txt_a {font-size:clamp(17px, 2vw, 24px); text-align: center; font-weight: 300; margin-top: 0.5em;}
.sub_visual .txt_b {font-size: var(--font-size); text-align: center; margin-top: 0.6em; font-weight: 300;}
.sub_visual .about_contact {max-width:585px; margin-top:1em; justify-content: space-between; border-radius:4px; padding:clamp(5px, 1vw, 10px) ;}
.sub_visual .about_contact .mail {flex:1; width: 100%; justify-content: center;}

.about_intro {color: #fff; border-radius: clamp(8px, 2vw, 16px); overflow: hidden; background:url(../img/about/bg01.jpg) no-repeat center center / cover; padding: clamp(28px, 4vw, 56px) clamp(24px, 6vw, 75px);}
.about_intro_in {display: flex; align-items: stretch; justify-content: space-between; gap: clamp(24px, 3vw, 75px); position: relative;}
.about_intro .col {flex: 1; width: 100%; max-width: 560px; text-align: center; display: flex; flex-direction: column;}
.about_intro .line {width: 1px; background: #fff; opacity: 0.4}

.about_intro h3 {font-size: clamp(20px, 3.2vw, 32px); font-weight: 700; line-height: 1.3em; color: #fff;}
.about_intro .txt_a {font-size: var(--sub-font-size); line-height: 1.6em; max-width:400px; margin: 0 auto; margin-top:1.2em;  font-weight: 400; color: #fff;}
.about_intro .txt_b {margin-top:1.2em; font-size: var(--x-small-font-size); line-height: 1.6em; font-weight: 300; color: rgba(255, 255, 255, 0.88);}
.about_intro .img {margin-top: clamp(20px, 3vw, 36px); border-radius: 16px; overflow: hidden; aspect-ratio: 480/210;}
.about_intro .img img {width: 100%; height: 100%; object-fit: cover; object-position: 20% center;}

.sector_bubbles {position: relative; width: 100%; flex-wrap: wrap; max-width: 575px; margin-top:auto; display: flex; justify-content: center; gap:0px 10px;}
.sector_bubbles > li {display: flex; align-items: center; justify-content: center; border-radius:100%; background: rgba(255, 255, 255, 30%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: center; font-size: clamp(11px, 1.05vw, 14px); font-weight: 500; line-height: 1.3em; padding: 0.7em; color: #fff; aspect-ratio: 1/1; width: clamp(90px, 13vw, 130px);}


.kara_glance_wrap {margin-top: clamp(40px, 6vw, 80px); display: flex; flex-wrap: wrap; gap:0px clamp(10px, 5vw,50px);}
.kara_glance_wrap .s_tit {margin-top: 0px; flex-shrink: 0; align-self: flex-start;}
.kara_glance {display: flex; gap: clamp(10px, 2vw, 20px); flex: 1;}
.kara_glance > li {flex: 1; position: relative; background: #EEF3FF; border-radius:8px; padding: clamp(22px, 4vw, 42px) clamp(22px, 5vw, 58px);}
.kara_glance .ico {position: absolute; right: clamp(14px, 2vw, 24px); top: clamp(14px, 2vw, 22px); line-height: 0;}
.kara_glance .ico img {width: clamp(36px, 4vw, 50px); height: auto;}
.kara_glance .num {font-size: clamp(36px, 6vw, 62px); font-weight: 700; line-height: 1.1em; color: var(--key-color); padding-right: 2em;}
.kara_glance .txt {margin-top: 0.6em; font-size: var(--sub-font-size); line-height: 1.5em; font-weight: 400;}

.kara_action_wrap {position: relative; padding:clamp(20px, 8vw, 80px) 0px; margin:clamp(20px, 8vw, 80px) 0px;}
.kara_action_wrap::before {content:""; width: 100vw; height: 100%; background: #ECECEC; position: absolute; left: 50%; top: 0px; transform: translateX(-50%); z-index: -1;}
.kara_action {display: flex; justify-content: space-between; gap: clamp(12px, 2vw, 24px); text-align: center;}
.kara_action > li {flex: 1; max-width:200px }
.kara_action .ico {line-height: 0;}
.kara_action .ico img {width: 100%; max-width:clamp(90px, 20vw, 200px);}
.kara_action .txt {margin:1em 0px; font-size: var(--sub-font-size); font-weight: 600; line-height: 1.4em; }

.about_contact {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.8em 1em; border: 1px solid #DDDDDD; border-radius: 16px; padding: clamp(16px, 3vw, 35px); background: #fff;}
.about_contact .mail {display: inline-flex; align-items: center; gap: 0.5em; color: var(--key-color); font-size: var(--x-large-font-size); font-weight: 600; line-height: 1.3em;}
.about_contact .mail img {width: clamp(22px, 2.4vw, 34px);}
.about_contact .copy_bt {display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 3em; min-width:8em; border-radius: 8px; background: var(--key-color); color: #fff; font-size: var(--sub-font-size); font-weight: 700; line-height: 1.3em;}
.about_contact .copy_bt img {width:clamp(20px, 2vw, 24px);}

@media (hover: hover) and (pointer: fine) {
	.about_contact .copy_bt:hover {background: var(--sub-key-color);}
}


.contact_guide {display: flex; justify-content: space-between; gap: 20px;}
.contact_guide .box {flex: 1; min-width: 0; background: #EEF3FF; border-radius:8px; padding: clamp(20px, 3.3vw, 33px) clamp(20px, 4vw, 40px);}
.contact_guide .head {display: flex; align-items: flex-start; gap: clamp(12px, 2vw, 20px);}
.contact_guide .ico {flex-shrink: 0; line-height: 0;}
.contact_guide .ico img {width: clamp(56px, 8vw, 89px);}
.contact_guide .tit {font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.3em;}
.contact_guide .mail {display: block; margin-top: 0.25em; color: var(--sub-key-color); font-size: var(--font-size); font-weight: 600; line-height: 1.4em;}
.contact_guide .txt {margin-top: 0.4em; font-size: var(--sub-font-size); min-height:3.5em; line-height: 1.5em;}
.contact_guide .need {display: flex; gap: 10px; margin-top: clamp(16px, 2vw, 24px);}
.contact_guide .need > li {flex: 1; min-width: 0; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; padding: 0.6em; background: #fff; border-radius:4px; text-align: center; font-size: var(--x-small-font-size); line-height: 1.3em;  font-weight:600;}
.contact_guide .need img {width: clamp(24px, 3.2vw, 45px);}

.list_top {min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 1em; text-align: center; background: url(../img/companies/top_img.jpg) no-repeat center top/cover;}
.list_top h2 {font-size: clamp(22px, 5vw, 42px); line-height: 1.3em; font-weight:700; text-align: center;}
.list_top .txt_a {font-size: var(--font-size); margin-top:0.5em; line-height: 1.4em;}


.company_filter {margin-bottom: clamp(30px, 4vw, 50px);}
.company_filter > h3 {font-size: var(--sub-font-size); margin-bottom: 0.5em;}
.company_filter .cate_list {display: flex; flex-wrap: wrap; gap: clamp(8px, 1.2vw, 12px);}
.company_filter .cate_list > li {flex:auto}
.company_filter input[type="checkbox"] + label {display: flex; align-items: center; gap: 0.5em; min-height:clamp(3em, 5vw, 3.6em); padding: 0.45em 1em; border: 1px solid #E5E5E5; border-radius:4px; color: #666; font-size: var(--x-small-font-size); font-weight:600; line-height: 1.3em; cursor: pointer; background: #fff;}
.company_filter input[type="checkbox"] + label:before {width:clamp(20px, 2vw, 24px); min-width:auto; aspect-ratio: 1/1; margin-right: 0; align-self: center; border: none; border-radius: 100%; background: url(../img/common/check.svg) no-repeat center center #D5D5D5; background-size: 55% auto;}
.company_filter input[type="checkbox"]:checked + label {border-color:#156EE8; color: #000;}
.company_filter input[type="checkbox"]:checked + label:before {background-color: var(--key-color); border-color: var(--key-color);}
.company_filter .search_bar {display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: clamp(12px, 2vw, 20px); padding: clamp(12px, 2vw, 18px); background: #ECECEC; font-size: var(--x-small-font-size);}
.company_filter .search_bar .select {width: 30%; max-width: 140px; height:clamp(40px, 5vw, 50px); border: 1px solid #DDDDDD; border-radius:4px; background-color: #fff;}
.company_filter .search_input {display: flex; align-items: center; flex: 1; width: 100%; max-width: 700px; height:clamp(40px, 5vw, 50px); border: 1px solid #DDDDDD; border-radius:4px; background: #fff;}
.company_filter .search_input .input {height: 100%; width: 100%; border: none; background: none; padding: 0 1em;}
.company_filter .search_input .bt {width: 50px; height: 100%; background: url(../img/common/search.svg) no-repeat center center; background-size: 20px auto; text-indent: -9999em;}

.company_view {background: #EEF3FF; padding:clamp(15px, 5vw, 50px) 10px}
.company_view .head {display: flex; gap: clamp(20px, 3.4vw, 34px);}
.company_view .head .logo {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: clamp(300px, 45vw, 450px); aspect-ratio:450/200; padding: 6px; border: 1px solid #fff; border-radius: 16px; background: #fff;}
.company_view .head .logo img {max-width:90%; max-height: 80%; object-fit: contain;}
.company_view .head .meta {flex: 1; width: 100%; max-width: 540px; display: flex; flex-direction: column;}
.company_view .head .booth {display:flex; max-width: max-content; align-items: center; justify-content: center; min-height: 2em; padding: 0 clamp(3px, 1.5vw, 1em); border-radius:220px; background: #fff; color:var(--key-color); font-size: clamp(12px, 1.5vw, 13px); font-weight:500; line-height: 1.2; border:1px solid var(--key-color);}
.company_view .head .name {display: block; margin-top: 0.35em; font-size: clamp(20px, 3vw, 32px); font-weight: 700; line-height: 1.4;}
.company_view .head .desc {font-size: var(--sub-font-size); line-height: 1.4em; margin: 1em 0px;}
.company_view .head .tag {display: flex; margin-top: auto; flex-wrap: wrap; gap: 0.5em;}
.company_view .head .tag .item {display:flex; align-items: center; justify-content: center; min-height: 2em; padding: 0 clamp(3px, 1.5vw, 1em); border-radius:220px; background: #fff; color:#666666; font-size: clamp(12px, 1.5vw, 13px); font-weight:400; line-height: 1.2; border:1px solid #DDDDDD;}
.company_view .head .btns {flex-shrink: 0; max-width: 297px; display: flex; flex-direction: column; gap:5px; margin-left: auto;}
.company_view .head .btns > a {display: flex; align-items: center; padding:0.3em 1em; border-radius:6px; color: #fff; font-size:var(--sub-font-size); line-height: 1.3em; font-weight:500; gap: 1em; min-height:3.75em; background: var(--sub-key-color); transition:all 0.2s 0s ease-in-out;}
.company_view .head .btns > a:hover {box-shadow:1px 3px 5px rgba(0, 0, 0, 20%);}
.company_view .head .btns > a .ico {max-width: clamp(18px, 2.5vw, 24px);}
.company_view .head .btns > a .arr {margin-left: auto;}
.company_view .head .btns > a .arr img {width: clamp(20px, 3vw, 27px);}
.company_view .head .btns > a.on {background: var(--key-color);}

.company_section {display: flex; gap: 20px;}
.company_section .left {flex:1; min-width: 0;}
.company_section .left > section + section {margin-top: clamp(30px, 6vw, 70px);}
.company_section .right {width: 297px; flex-shrink: 0; position: sticky; top: 120px; align-self: flex-start; z-index: 2;}
.company_section .s_tit {margin-top: 0px; gap: 0.5em;}
.company_section .s_tit img {max-width: clamp(30px, 3vw, 36px);}

.section_head {display: flex; align-items: center; justify-content: space-between; gap: 1em 2em; flex-wrap: wrap; margin-bottom:1em;}
.section_head .s_tit {margin: 0;}
.section_head .newsletter {display: flex; align-items: center; gap: 0.8em; flex: 1; min-width: 260px; max-width: 720px; margin-left: auto;}
.section_head .newsletter .lab {flex-shrink: 0; font-weight:600; line-height: 1.3em;}
.section_head .newsletter form {flex: 1; min-width: 0;}
.section_head .newsletter fieldset {border: 1px solid #ccc; border-radius: 8px; display: flex; align-items: center; padding: 0 0 0 1em; gap: 10px; height: 60px;}
.section_head .newsletter fieldset .input {border: none; font-size: var(--x-small-font-size); padding: 0; width: 100%; flex: 1; height: 100%;}
.section_head .newsletter fieldset label {line-height: 0;}
.section_head .newsletter fieldset .bt {border-radius: 8px; width: 7em; color: #fff; background: var(--key-color); font-size: var(--sub-font-size); height: 100%; display: flex; justify-content: center; align-items: center; padding: 0; font-weight: 700;}
.company_section .bg {position:relative; padding: clamp(20px, 5vw, 50px) 0px;}
.company_section .bg::before {content: ""; width: 100vw; height: 100%; background: #ECECEC; position: absolute; left: 50%; top: 0px; transform: translateX(-50%); z-index: -1;}


.products {display: flex; flex-direction: column; gap: 10px;}
.products .product {border: 1px solid #DDD; border-radius: 8px; overflow: hidden; background: #FFF; padding: clamp(10px, 2vw, 20px);}
.products .product .top {display: flex; align-items: flex-start; gap: clamp(10px, 4vw, 40px);}
.products .product .img {width:40%; max-width: 400px; flex-shrink: 0; aspect-ratio: 400 / 248; overflow: hidden; border-radius: 8px; position: relative;}
.products .product .img img {width: 100%; height: 100%; object-fit: contain; position: absolute; left: 0; top: 0;}
.products .product .info {flex: 1; min-width: 0;}
.products .product .head {display: flex; justify-content: space-between; gap: 1em;}
.products .product .name {font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.3em;}
.products .product .cate {margin-top: 0.25em; }
.products .product .brochure {display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.6em; align-self: center; min-width:11em; padding: 0.25em 0.55em 0.25em 0.8em; border: 1px solid var(--sub-key-color); border-radius: 8px; color: var(--sub-key-color); font-size: var(--sub-font-size); font-weight:600; white-space: nowrap; flex-shrink: 0; transition: all 0.2s ease-in-out;}
.products .product .brochure .ico {width: 22px;}
.products .product .brochure .arr {margin-left: auto;}
.products .product .brochure .arr img {width:clamp(20px, 3vw, 27px)}
.products .product .tag {display: flex; margin-top: 0.75em; flex-wrap: wrap; gap: 0.5em;}
.products .product .tag .item {display:flex; align-items: center; justify-content: center; min-height: 2em; padding: 0 clamp(3px, 1.5vw, 1em); border-radius:220px; background: #fff; color:#666666; font-size: clamp(12px, 1.5vw, 13px); font-weight:400; line-height: 1.2; border:1px solid #DDDDDD;}
.products .product .spec {width: 100%; margin-top:clamp(10px, 3vw, 30px); font-size: var(--sub-font-size); line-height: 1.4em;}
.products .product .spec th {border-top:1px solid #999999; font-weight:700; text-align: left; vertical-align: top; padding: 16px 12px 12px; /* top right bottom(=left »ý·«½Ã leftµµ 12px) */font-size: 15px;}
.products .product .spec td {padding: 0.7em 1em; height: 3em; border-top: 1px solid #EBEBEB; text-align: left; vertical-align: top;font-size: 13px; padding: 16px 12px 12px;}
/*.products .product .desc {margin-top: clamp(10px, 2vw, 20px); padding:1em 1em; background: #ECECEC; font-size: var(--sub-font-size); line-height: 1.5em; color: #555; }*/
.products .product .desc {
    margin-top: clamp(10px, 2vw, 20px);
    padding: 1em 1em;
    background: #ECECEC;
    font-size: calc(var(--sub-font-size) - 2px);
    line-height: 1.5em;
    color: #555;
}

@media (hover: hover) and (pointer: fine) {
	.products .product .brochure:hover {background: #EEF3FF;}
}


.demo_video {display: flex; flex-direction: column; gap: 10px;}
.demo_video .item {display: flex; align-items: center; gap: clamp(10px, 4vw, 40px); padding: clamp(10px, 2vw, 14px); border: 1px solid #DDD; border-radius: 8px; background: #FFF; color: inherit; cursor: pointer;}
.demo_video .img {width: 40%; max-width: 346px; flex-shrink: 0; aspect-ratio: 346 / 195; overflow: hidden; border-radius: 8px; position: relative;}
.demo_video .img img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.demo_video .info {flex: 1; display: flex; flex-direction: column;}
.demo_video .name {font-size: var(--font-size); font-weight: 700; line-height: 1.4em;}
.demo_video .txt {margin-top: 0.4em; font-size: var(--sub-font-size); line-height: 1.5em; color: #555;}
.demo_video .watch {display: inline-flex; align-items: center; gap: 0.35em; padding-top:clamp(5px, 2vw, 25px); color: var(--sub-key-color); font-size:var(--x-small-font-size); font-weight: 600; line-height: 1.3em;}
.demo_video .watch img {width: 16px;}
#popMoview .pop_wrap {max-width: 900px;}

@media (hover: hover) and (pointer: fine) {
	.demo_video .item:hover .watch {text-decoration: underline;}
}


.certifications {display: flex; flex-direction: column; gap:5px;}
.certifications > li {display: flex; gap: 0.4em; border: 1px solid #DDD; border-radius: 8px; background: #FFF; padding: clamp(10px, 2vw, 20px); line-height: 1.5em;}
.certifications > li:before {content: "¡¤"; flex-shrink: 0;}


.newsletters {display: flex; flex-wrap: wrap; gap: 10px;}
.newsletters > li {flex: 1; width: calc((100% - 30px) / 4);}
.newsletters .item {display: flex; flex-direction: column; height: 100%; border: 1px solid #DDD; border-radius: 8px; background: #FFF; padding: clamp(10px, 2vw, 26px) clamp(10px, 2vw, 22px);}
.newsletters .badge {display: inline-flex; align-items: center; align-self: flex-start; min-height: 1.8em; padding: 0.7em; border-radius: 4px; background: var(--sub-key-color); color: #fff; font-size: var(--x-small-font-size); line-height: 1.2em;}
.newsletters .name {margin-top: 0.7em; font-size: var(--font-size); font-weight: 700; height: 2.8em; line-height: 1.4em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.newsletters .date {margin-top:1.5em; font-size: var(--sub-font-size); line-height: 1.4em; min-height: 2.8em;}
.newsletters .more {display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35em; width: 100%; margin-top: auto; padding-top: 1em; border-top: 1px solid #EBEBEB; color: var(--sub-key-color); font-size: 14px; font-weight: 600; line-height: 1.3em;}
.newsletters .more img {width: 16px;}


.newsletter_view {padding: clamp(15px, 5vw, 40px) 10px; background:#EEF3FF; text-align: center;}
.newsletter_view .badge {display: inline-flex; align-items: center; justify-content: center; min-height: 1.8em; padding: 0.5em 1em; border-radius: 4px; background: var(--sub-key-color); color: #fff; font-size: var(--x-small-font-size); font-weight: 600; line-height: 1.4em;}
.newsletter_view .name {margin-top: 0.6em; font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.4em;}
.newsletter_view .date {margin-top: 0.7em; font-size: var(--sub-font-size); line-height: 1.4em;}


.video_cards {display: flex; flex-wrap: wrap; gap:20px 13px;}
.video_cards > li {width: calc((100% - 39px) / 4);}
.video_cards .item {display: flex; flex-direction: column; height: 100%; border: 1px solid #DDD; border-radius: 8px; background: #FFF; padding: clamp(10px, 2vw, 14px) }
.video_cards .img {aspect-ratio:324 / 183; overflow: hidden; border-radius:4px; position: relative;}
.video_cards .img img {width: 100%; height: 100%; object-fit: cover;}
.video_cards .name {margin-top: 0.7em; font-size: var(--font-size); font-weight: 700; line-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.video_cards .company {margin-top: 0.35em; font-size: var(--sub-font-size); line-height: 1.4em; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.video_cards .date {margin-top: auto; padding-top: 0.8em; font-size: var(--x-small-font-size); line-height: 1.4em; color: #888; text-align: right;}
.video_cards .more {display: inline-flex; align-items: center; justify-content:flex-end; gap: 0.35em; width: 100%; margin-top: 0.8em; padding-top: 1em; border-top: 1px solid #EBEBEB; color: var(--sub-key-color); font-size: 14px; font-weight: 600; line-height: 1.3em;}
.video_cards .more img {width: 16px;}



.related_products .list > li {width: calc((100% - (clamp(5px, 3vw, 28px) * 2)) / 3);}

.company_info {position: static;}
.company_info .tit {font-size: var(--font-size); font-weight: 700; letter-spacing: 0.02em; margin-bottom: 0.8em; margin-top:1.1em; line-height: 1.3em;}
.company_info .box {background: var(--sub-key-color); border-radius:8px; padding:10px 30px 20px 30px; color: #fff;}
.company_info .info_list > li {padding: 0.85em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.28); font-size: var(--x-small-font-size); line-height: 1.4em;}
.company_info .info_list > li:last-child {border-bottom: none;}
.company_info .info_list > li,
.company_info .info_list a {display: flex; align-items: center; gap: 0.7em; color: #fff;}
.company_info .info_list img {width: 24px; height: 24px; flex-shrink: 0;}
.company_info .inquiry {background: var(--key-color); border-radius:8px; padding:20px; margin-top: 10px;}
.company_info .inquiry .q {font-weight:600; font-size: var(--x-small-font-size); line-height: 1.4em;}
.company_info .inquiry .txt {margin-top: 0.45em; font-size:clamp(11px, 1vw, 12px); line-height: 1.5em; font-weight: 300;}
.company_info .inquiry .bt {display: flex; align-items: center; gap: 0.5em; margin-top: 1em; min-height: 3.4em; padding: 0.35em 0.7em 0.35em 0.9em; border-radius: 8px; background: #fff; color: var(--key-color); font-size: var(--x-small-font-size); font-weight: 700;}
.company_info .inquiry .bt .ico {width:clamp(18px, 2vw, 24px);}
.company_info .inquiry .bt .arr {margin-left: auto; line-height: 0;}
.company_info .inquiry .bt .arr img {width:clamp(20px, 3vw, 27px);}

.lnb_wrap {border-bottom:1px solid #DDDDDD; padding: 0px 10px;}
.lnb_wrap .lnb {display: flex; gap: clamp(1em, 3vw, 60px); max-width:var(--inner); margin: 0 auto; overflow-x: auto;}
.lnb_wrap .lnb > li {min-width: max-content;}
.lnb_wrap .lnb > li > a {display: flex; align-items: center; height: 5em; color: #000; font-size:var(--sub-font-size); font-weight: 600; font-family:'Montserrat', sans-serif; position: relative; gap: 0.3em;}
.lnb_wrap .lnb > li > a.on:after {content: ""; width: 100%; height:clamp(3px, 1vw, 5px); background: var(--key-color); position: absolute; left: 0px; bottom: 0px;}
.lnb_wrap .num {background: #DDDDDD; border-radius:20px; padding:0.3em 0.8em; font-weight:600; font-size:var(--x-small-font-size); line-height: 1.2em; color: #666666;}
.lnb_wrap .on .num {background: var(--key-color); color: #fff;}

.pdf_viewer {width: 100%; aspect-ratio: 1/1.9; max-width:900px; margin: 0 auto;}
.pdf_viewer iframe {width: 100%; height: 100%;}



/* 1280px ÀÌ»ó */

@media screen and (min-width:1199px) {
	.m_gnb {display:none !important;}

}




/* 1440px ÀÌÇÏ */

@media screen and (max-width:1439px) {
	.gnb_bar_in {background-position:-10% center ;}

	.main_visual .txt_frame {height:auto; aspect-ratio: 1440/760; min-height:450px;}


	#footer .go_top {opacity: 0.5; bottom: 40px;}
	.sns_box {transform: none; top: clamp(10px, 3vw, 30px);}
	#footer {flex-direction: column;}
	#footer .f_logo {margin:0px; text-align: center;}
	#footer .f_logo img {max-width:clamp(220px, 42vw, 320px);}
	.addressW {text-align: center; flex-direction: column;}
	.addressW address {padding-right: 0px;}
	.addressW address > span {justify-content: center;}
	.addressW address > span img {max-width: clamp(15px, 2vw, 23px); max-height: clamp(15px, 2vw, 22px); align-self: flex-start; position: relative; top: 0.3em; display: none;}
	
	.addressW address {justify-content: center;}

}

/* 1200px ÀÌÇÏ */

@media screen and (max-width:1200px) {
	
	

	.all_menu {display:block;}
	.w_gnb {display: none;}

	.top_search {right: auto; left: 0px;}

	.main_visual {flex-wrap: wrap;}
	.main_visual .banner_slide {width:100%; max-width: none;}

	.main_board_wrap {flex-direction: column; gap:clamp(30px, 5vw, 50px);}
	.main_board_wrap > div {width:100% !important; max-width: 100% !important;}


	.company_view .head {flex-wrap: wrap;}
	.company_view .head .btns {width: 100%; max-width:none; flex-direction: row;}
	.company_view .head .btns > a {flex:1}

	.company_section {flex-direction: column;}
	.company_section .right {width: 100%; position: static;}
	.company_info {position: static;}
	
	


}

/* 1024 ÀÌÇÏ */

@media screen and (max-width:1024px) {
	:root {
		--xxx-large-font-size:28px;
		--xx-large-font-size:24px;
		--x-large-font-size:20px;
		--large-font-size:19px;
		--font-size:17px;
		--sub-font-size:15px;
		--small-font-size: 14px;
	}

	.main_visual .scroll_ico {display:none;}

	.newsletters > li {width: calc((100% - 20px) / 3); flex: none;}
	.video_cards > li {width: calc((100% - 26px) / 3);}


	.main_tit h3 {font-size: 2.2em;}

	
	.slide_menu_inner .gnb {height: calc(100% - 80px);	}




	.event_slide .list > li {width:calc((100% - clamp(5px, 3vw, 28px) * 2) / 3)}

	.introduce .box {flex-direction: column;}
	.introduce .box .txt {max-width: none;}
	.introduce .box .img {width: 100%; }

	.mission_vision .box_wrap { border-radius:10px; padding:clamp(15px, 4vw, 30px)}
	.mission_vision .box_wrap > ul {flex-direction: column; gap:5px;}
	.mission_vision .box_wrap > ul > li {aspect-ratio:auto; border-radius: 10px; margin: 0px;}
	.mission_vision .box_wrap > ul > li .ico img {max-width:9vw; max-height:9vw;}
	.mission_vision .box_wrap > ul dl {max-width: none;}

	.history_wrap {flex-direction: column;}
	.history_wrap .img {width: 100%;  margin: 0 auto;}
	.history_wrap .history {width: 100%; max-width: none;}

	.floor_guide {flex-direction: column;}
	.floor_guide > div {width: 100%;}
	.floor_guide .vr_view {margin: 0 auto;}
	.guide_list {flex-wrap: wrap; gap: 10px;}
	.guide_list > li {flex:calc(50% - 5px);  border-radius: clamp(10px, 2vw, 16px) !important;}
	.guide_list > li:nth-child(2) {margin: 0px;}

	.map_wrap {flex-direction: column;}
	.map_wrap > div {width: 100%; max-width: none;}
	.parking {flex-direction: column;}

	.program_list > li {flex-direction: column;}
	.program_list .img {width: 100%; }
	.program_list .info {max-width: 100%; width: 100%;}
	.program_list .data {flex-direction: column;}
	.program_list > li:nth-child(even) .img {order:0;}

	.rule_btn {flex-wrap: wrap;}
	.rule_btn > li {flex:48.5%; max-width: none;}

	.rule_box_wrap {flex-direction: column;}
	.rule_box_wrap .box {width: 100%;}
	.apply_form {flex-direction: column;}
	.apply_form .box {width: 100%; max-width: none;}
	.apply_form .box:not(:first-child) {border-top:1px solid #000; padding-top: 2em;}
	.apply_form::before {display: none;}

	.about_intro_in {flex-direction: column; gap: 36px;}
	.about_intro .line {width: 100%; height: 1px;}
	.about_intro .col {max-width: 100%; align-items: center;}
	.about_intro .img {max-width: max-content;}

	.sector_bubbles {margin: 1em auto;}

	.kara_action {flex-wrap: wrap; justify-content: center;}
	.kara_action > li {flex: 0 0 calc(33.333% - 16px);}

	.contact_guide {flex-direction: column;}

}

/* 768px ÀÌÇÏ */

@media screen and (max-width:767px) {
	:root {
		--xxx-large-font-size:26px;
		--xx-large-font-size:22px;
		--x-large-font-size:19px;
		--large-font-size:16px;
		--font-size:15px;
		--sub-font-size:14px;
		--small-font-size:13px;
		--x-small-font-size:12px;
	}

	.pc_view {display:none}
	.mb_view {display:block}
	#wrap {padding-top: 80px;}

	.section_head .newsletter {max-width: none; width: 100%; margin-left: 0; flex:none}
	#header h1 img {width:clamp(170px, 50vw, 250px);}
	.slide_menu_inner .header {height:80px; background-size: clamp(170px, 50vw, 250px) auto;}
	.slide_menu_inner .gnb > ul > li {flex-direction: column; padding:6vw}
	.slide_menu_inner .gnb > ul > li > a {min-width: auto; padding:0px;}
	.slide_menu_inner .gnb .sub_menu {border:none; padding:0px; gap:4vw}
	.slide_menu_inner .gnb .sub_menu > li > a {font-size:1.4em;}
	.slide_menu_inner .top_menu {right:50px}



	.main_layer_pop {-webkit-overflow-scrolling:touch; position:fixed; overflow-y:auto; width:100% !important; max-width:100% !important; transform:none !important; -webkit-transform:none !important; left:0 !important; right:0 !important; top:0 !important; bottom:0; z-index:99999; background:rgba(0, 0, 0, 50%); margin:0px !important}
    .main_pop_bottom {padding:10px; font-size:14px;}
    .main_pop_bottom .close {right:10px; top:10px;}
	.main_layer_pop .pop_wrap_in {float:none !important;}

	.in_header {height:80px;}


	.m_tit {font-size:min(2.5em, 8vw);}

	.event_slide .swiper {width:100%; flex: none;}
	.event_slide .swiper-slide {width:65%;}
	.event_slide .slide_control {display:none; justify-content:center; position:relative; left:auto; top:auto; width:100%	}


	.m_board .first_new {margin-top:min(60px, 8vw);}

	.over_layerW {position:relative;}
	.over_layerW .table_style1 {width:100%; margin:0px;}
	.over_layerW .table_style1 tbody tr th.tl {word-break: keep-all}
	.over_layerW table td, .over_layerW table th {word-break: keep-all}
    .over_layer {overflow:auto;}
	.over_layer > div {overflow:inherit; min-width:680px;}
	.over_layer::-webkit-scrollbar {width:5px; height:8px; background-color:#eee;}
	.over_layer::-webkit-scrollbar-thumb {background:#666;}
    .over_layerW:after {display:block; content:""; width:10px; height:100%; position:absolute; right:0px; top:0px; background:url(../img/common/bg_shadow.png) repeat-y left top}
    .over_layer > table {min-width:900px;}


	.quick_sns {margin:2.6vw 0px 3.9vw 0px}

	.table_wrap {position:relative; overflow: auto;}
	.table_wrap > table {min-width: max-content; max-width:768px;}


	.table_wrap::-webkit-scrollbar {height:3px }
	.table_wrap::-webkit-scrollbar-thumb { background-color:#ccc; border-radius: 10px;}
	.table_wrap::-webkit-scrollbar-track { background-color: transparent; }

	.sub_wrap {padding-top:80px;}

	.products .product .head {flex-wrap: wrap;}

	
	.table_wrap {position:relative; overflow: auto;}
	.table_wrap > table {min-width: max-content; max-width:768px;}

	.table_wrap::-webkit-scrollbar {height:3px }
	.table_wrap::-webkit-scrollbar-thumb { background-color:#ccc; border-radius: 10px;}
	.table_wrap::-webkit-scrollbar-track { background-color: transparent; }

	.event_slide .list > li {width:calc((100% - clamp(5px, 3vw, 28px) * 1) / 2);}
	.acd_bt_wrap {text-align:center;}

	.contact_cards {flex-direction: column;}
	.contact_card {min-height: 140px; flex-direction: column; text-align: center;}
	

	.kara_glance_wrap {flex-direction: column;}
	.kara_glance {flex-direction: column; width: 100%;}

	.kara_action > li {flex: 0 0 calc(50% - 12px);}


	

	.floor_wrap {flex-direction: column; gap:1em;}
	.floor_wrap .floor_list {flex-direction: row;}
	.floor_wrap .floor_list > li {flex:1;}
	.floor_wrap .floor_item {width:100%; height:auto; aspect-ratio: 1/1;}
	.floor_wrap .room_item {font-size: 1em;}
	.floor_wrap .room_item .num {width:1.8em; height: 1.8em; min-width: 1.8em;}

	.reservation {flex-direction: column;}
	.reservation .box {width: 100%; max-width: none;}

	.company_view .head {flex-direction: column;}
	.company_view .head .logo {width:60%; margin: 0 auto;}
	.company_view .head .meta {max-width: none; align-items: center;}
	.company_view .head .btns {flex-direction: column;}

	.products .product .top {flex-direction: column;}
	.products .product .img {width: 100%; max-width: none;}






}




/* 480px ÀÌÇÏ */

@media screen and (max-width:479px) {
	:root {
		--xxx-large-font-size:22px;
		--xx-large-font-size:20px;
		--x-large-font-size:18px;
		--large-font-size:15px;
		--font-size:14px;
		--sub-font-size:13px;
		--small-font-size:12px;
		--x-small-font-size:11px;
	}
	#wrap {padding-top: 60px;}

    .in_header, .slide_menu_inner .header {height:60px;}
	.slide_menu_inner .header {height:60px;}
	.slide_menu_inner .gnb > li > a {font-size:1.5em; margin-bottom:0.5em}
	.slide_menu_inner .gnb .sub_menu > li > a {font-size:1.15em;}

	.language_btn {right:40px ;}



	.menu_btn a > span {width:28px; height:28px}
	.menu_btn a > span > span:after {top:-8px;}
	.menu_btn a > span > span:before {bottom:-8px;}

	.search_area_wrap {margin-top:0px; border-width:4px}
	.search_area .btn {background-size:20px auto ;}
	.searchPop .inner {height:130px;}
	.search_area {height: 55px;}

	.main_visual .key_visual {padding-top:20px;}
	.pop_zone > h3 {width: 160px; height: 37px;  font-size: 13px; }

	.main_tit h3 {font-size: 1.8em;}
	.main_tit .ico {min-width: max-content;}
	.main_tit .ico img {width: 40px;}
	.main_tit .dec {font-size: 0.9em;}

	.event_slide .box .txt_a {font-size: 1.5em;}



	.main_board_wrap .tab {gap:1em;}
	.main_board_wrap .tab > li::before {left: -0.5em;}

	.m_board .first_new .day {width:80px; min-width:80px;}
	.m_board .first_new a .tit {font-size:1.4em;}

	.main_photo .photo_slide .txt_a {font-size:1.4em;}
	.m_board .photo .box {flex-direction: column;}
	.m_board .photo .box .img {width: 100%;}
	.m_board .photo .box .info {width: 100%;}

	.main_board .newsletter {margin-left: 0px;}
	.main_board .newsletter fieldset {height: 50px;}
	.section_head .newsletter fieldset {height: 50px;}

	#footer .go_top > a {width:50px; height:50px; font-size:12px;}
	.addressW address {gap:0.2em 2em;}
	.addressW address > span+span:before {left:-1em;}

    .pop_wrap .pop_head .title {text-align:left !important;}
    .pop_wrap .pop_head .title br {display:none;}
	.pop_wrap .pop_body {padding:10px}

	#inner_wrap {padding-bottom:50px;}
	.sub_wrap {padding-top:60px;}

	.newsletters > li {width: calc((100% - 10px) / 2);}

	.video_cards > li {width: calc((100% - 13px) / 2);}
	
	

}