@charset "utf-8";

@import url('common.css');
@import url('slick.css');
@import url('font.css');
@import url('board_common.css');
@import url('jquery.toast.min.css');

.visual {position:relative; display:flex; align-items:stretch; justify-content:space-between; gap:17px; margin-top:56px; padding-bottom:150px;}
.visual h2 {position:absolute; z-index:5; top:-1px; right:70px; font-size:68px; font-weight:600; padding:10px 0 26px 115px; letter-spacing:-3.7px; border-radius:0 0 0 22px;}
.visual h2 br {display:none;}
.visual h2 b {font-weight:900; color:#e99e00;}
.visual h2:before {content:''; position:absolute; z-index:5; top:-1px; left:-21px; width:22px; height:22px; background:url(../images/ico/ico_border_radius_w01.svg) no-repeat center; background-size:cover; transform:rotate(-180deg);}
.visual .video_wrap {position:relative; flex-shrink:0; width:1360px; border-radius:22px; overflow:hidden;}
.visual .video_wrap:before {display:none; content:''; position:absolute; z-index:5; top:50%; right:-1px; margin-top:-254px; width:22px; height:22px; background:url(../images/ico/ico_border_radius_w01.svg) no-repeat center; background-size:cover; transform:rotate(-180deg);}


.visual .iframe_wrap {position:relative; width:100%; height:100%; overflow:hidden;}
.visual .iframe_wrap > iframe {position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:105%; height:105%;}

.visual .right_link {width:calc(100% - 1377px);flex-grow:1; padding-top:123px;}
.visual .right_link > div {position:relative; display:flex; align-items:stretch; flex-direction:column; justify-content:space-between; gap:13px; height:100%;}
.visual .right_link > div:before {content:''; position:absolute; z-index:5; top:0; margin-right:16px; right:100%; width:22px; height:22px; background:url(../images/ico/ico_border_radius_w01.svg) no-repeat center; background-size:cover; transform:rotate(-180deg);}
.visual .right_link a {display:flex; justify-content:space-between; flex-direction:column; border-radius:22px; overflow:hidden;}
.visual .right_link a img {width:100%;}
/*
.visual .right_link a > div {background:url(../images/ico/ico_visual_link_arrow.png) no-repeat top right;}
.visual .right_link a > div > span {display:inline-block; max-width:calc(100% - 54px); font-size:18px; padding:7px 16px; border-radius:10px; background:#fff; font-weight:700; letter-spacing:-1px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.visual .right_link a > div > p {margin-top:16px; line-height:1.15; font-size:36px; font-weight:600; padding-left:8px; letter-spacing:-2.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height:78px;}
.visual .right_link a > div > p strong {font-weight:900; word-break:keep-all;}
.visual .right_link a > em {margin-bottom:-3px; font-size:18px; font-weight:600; opacity:0.8; margin-left:9px; line-height:1; letter-spacing:-2px;}
.visual .right_link a.accelerat {flex-grow:1; background:#ffd33a url(../images/pic/pic_visual_link_accelerat.jpg) no-repeat center bottom; background-size:100%;}
.visual .right_link a.expressway {height:328px; background:#ffeb94 url(../images/pic/pic_visual_link_expressway.jpg) no-repeat center bottom; background-size:100%;;}
*/
.main_titwrap {display:flex; margin-bottom:67px; align-items:flex-end; justify-content:space-between;}
.main_tit {line-height:1; font-size:68px; font-weight:600; letter-spacing:-4px; padding-left:64px; background-repeat:no-repeat; background-position:left center;}
.main_tit.deco01 {background-image:url(../images/ico/ico_title_deco01.png);}
.main_tit.deco02 {background-image:url(../images/ico/ico_title_deco02.png);}


.folder_list {position:relative; margin-right:-20px; padding-bottom:250px;}
.folder_list:after {content:''; position:absolute; z-index:1; top:0; right:-20px; width:20px; height:100%; background:#fff;}
.folder_list li {margin-right:20px;}
.folder_list li {width:427px; background:url(../images/pic/pic_folder_list01_v2.png) no-repeat top left; background-size:100%;}
.folder_list li a {display:block;}
.folder_list li a em {display:inline-block; font-size:20px; line-height:1; font-weight:600; padding:20px 0 0 30px; letter-spacing:-1.9px;}
.folder_list li a div {padding:35px 35px 40px; background:#f4f4f4; border-radius:0 25px 25px 25px;}
.folder_list li a div .thumb {margin-bottom:22px; height:214px; border-radius:20px; background:#c5d9de; overflow:hidden;}
.folder_list li a div .thumb img {position:relative; left:50%; transform:translateX(-50%); min-height:100%; min-width:100%; max-width:inherit; max-height:100%;}
.folder_list li a div > span {display:inline-block; font-size:24px; font-weight:600; border-radius:10px; padding:5px 15px; letter-spacing:-1.5px; background:#fff; max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.folder_list li a div > strong {display:block; margin-top:12px; font-size:33px; font-weight:700; line-height:1.24; padding-left:12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;/* <--몇줄인지 */ overflow: hidden; height:78px;}
.folder_list li.nosubtit a div > strong {-webkit-line-clamp: 3; height:136px; padding-top: 10px;}
.folder_list .slick-arrow {position:absolute; z-index:1; bottom:150px; left:50%; right:auto; width:44px; height:44px; border-radius:44px; background:#dfdfdf; background-repeat:no-repeat; background-position:center; text-indent:-9999px; transition:all .3s ease;}
.folder_list .slick-arrow:hover {background-color:#000;}
.folder_list .slick-arrow.slick-prev {margin-left:-53px; background-image:url(../images/ico/ico_folder_arrow01_b.png);}
.folder_list .slick-arrow.slick-prev:hover {background-image:url(../images/ico/ico_folder_arrow01_w.png);}
.folder_list .slick-arrow.slick-next {margin-left:17px; background-image:url(../images/ico/ico_folder_arrow02_b.png);}
.folder_list .slick-arrow.slick-next:hover {background-image:url(../images/ico/ico_folder_arrow02_w.png);}

.folder_list.no_lisde {display:flex; gap:20px; margin:0; flex-wrap:wrap;}
.folder_list.no_lisde:after {display:none;}
.folder_list.no_lisde li {width:calc(25% - 16px); margin:0 0 46px;}
.folder_list.no_lisde li a em {padding:20px 0 0 25px;}

.story.main_story {background:#f4f4f4}
.story.main_story .folder_list:after {background:#f4f4f4;}
.story.main_story .folder_list li {background-image:url(../images/pic/pic_folder_list01_v2_w.png);}
.story.main_story .folder_list li a div {background:#fff;}

.link_list {display:flex; align-items:flex-start; justify-content:space-between; gap:85px;}
.link_list ul {width:50%;}
.link_list ul li {border-radius:23px; background:#f2f2f2;}
.link_list ul li + li {margin-top:15px;;}
.link_list ul li a {display:block; font-size:40px; font-weight:600; padding:60px; word-break:keep-all;}
.link_list ul li a span {display:block; line-height:48px; padding-right:64px; background:url(../images/ico/ico_link_list_arrow01.png) no-repeat right center; letter-spacing:-2.8px;}
.link_list ul li.call a span {padding-left:64px; padding-right:0; background:url(../images/ico/ico_link_list_call01.png) no-repeat left center;}
.link_list ul li.txt {font-size:32px; padding-top:17px; padding-left:4px; background:none;  letter-spacing:-1.8px}
.link_list + p {display:none; font-size:32px; padding-top:8px; background:none;}

.notice_wrap h4 {display:block; margin-bottom:20px; font-size:30px; line-height:1.06; font-weight:600;}
.notice_wrap p {font-size:24px; line-height:1.45; color:#4f4f4f; letter-spacing:-1.8px;}

/*sub*/
.sub_visual {text-align:center; border-bottom:1px solid #c4c4c4; padding:132px 0 120px;}
.sub_visual.no_bdb {border-bottom:0;}
.sub_visual > p {font-size:30px; font-weight:600; letter-spacing:-1.5px;}
.sub_visual h1 {display:block; margin:2px 0 14px; font-size:60px; font-weight:900; word-break:keep-all; letter-spacing:-4px;}
.sub_visual ul {display:flex; align-items:center; justify-content:center; gap:40px;}
.sub_visual ul li {position:relative; font-size:20px; letter-spacing:-1.2px;}
.sub_visual ul li:before {content:''; position:absolute; z-index:1; top:50%; transform:translateY(-50%); right:-20px; width:1px; height:15px; background:#848484;}
.sub_visual ul li:last-child:before {display:none;}

/* 추천콘텐츠 */
.rcm_story_list {padding:87px 0 100px; background:#efefef;}
.rcm_story_list .wrapper_wide {padding-left:140px; padding-right:140px;}
.rcm_story_list h2 {display:block; margin-bottom:85px; font-size:48px; font-weight:600;}
.rcm_story_list ul {position:relative; margin:0 -17px; padding-bottom:76px;}
.rcm_story_list ul li {margin:0 17px;}
.rcm_story_list ul li .thumb {width:100%; height:291px; border-radius:23px; overflow:hidden;}
.rcm_story_list ul li .thumb img {position:relative; left:50%; transform:translateX(-50%); min-width:100%; min-height:100%; max-width:inherit; max-height:100%;}
.rcm_story_list ul li p {margin:24px 0 16px; letter-spacing:-1px; font-size:21px; color:#525252;}
.rcm_story_list ul li strong {display:block;margin-bottom:12px; font-size:34px; font-weight:600; line-height:1.5; color:#000; word-break:keep-all; padding-right:100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;/* <--몇줄인지 */ overflow: hidden; height:102px;}
.rcm_story_list ul li span {font-size:21px; color:#525252; letter-spacing:-2px;}
.rcm_story_list ul .slick-arrow {position:absolute; z-index:1; top:0; width:140px; height:100%; background-repeat:no-repeat; text-indent:-9999px;}
.rcm_story_list ul .slick-arrow.slick-prev {left:-123px; background-image:url(../images/ico/ico_rcm_slide_arrow01.png); background-position:right 35px top 120px;}
.rcm_story_list ul .slick-arrow.slick-next {right:-123px; background-image:url(../images/ico/ico_rcm_slide_arrow02.png); background-position:left 35px top 120px;}
.rcm_story_list ul .slick-dots {position:absolute; z-index:1; bottom:0; left:0; width:100%; display:flex; align-items:center; justify-content:center; padding:0; gap:12px;}
.rcm_story_list ul .slick-dots li {width:13px; height:13px; margin:0; border-radius:13px; background:#bcbcbc;}
.rcm_story_list ul .slick-dots li.slick-active {background:#8a8a8a;}
.rcm_story_list ul .slick-dots li button {display:block; text-indent:-9999px;}

.board_page + footer {margin-top:0;}

/* 리스트 */
.rcm_story_list.no_slick {background:none; padding-top:45px;}
.rcm_story_list.no_slick ul {display:flex; align-items:center; gap:20px; margin:0; flex-wrap:wrap;}
.rcm_story_list.no_slick ul li {width:calc(25% - 15px); margin:0;}
.rcm_story_list.no_slick ul li a {display:block; padding-bottom:100px;}

.basic_view .view_wrap .view_txt .article_util {margin-top:100px;}
.article_util .share_link {display:flex; align-items:center; justify-content:center; gap:16px;}
.article_util .share_link button {width:71px; height:71px; background-repeat:no-repeat; background-position:center; background-size:cover; text-indent:-9999px;}
.article_util .share_link button.link_kakaotalk {background-image:url(../images/ico/ico_kboard_share_kakao.png)}
.article_util .share_link button.link_facebook {background-image:url(../images/ico/ico_kboard_share_facebook.png)}
.article_util .share_link button.link_twitter {background-image:url(../images/ico/ico_kboard_share_x.png)}
.article_util .share_link button.link_btn {background-image:url(../images/ico/ico_kboard_share_url.png)}

.board_page .story {margin-top:117px; padding-bottom:200px;}


/*****************************************************************************************************************************************************************************************/

@media all and (max-width:1921px) {
	.visual .video_wrap {width:75%;}
	.visual .video_wrap:before {top:15.7%; margin-top:0;}
	
	.rcm_story_list ul .slick-arrow.slick-prev {background-position:right 20px top 120px;}
	.rcm_story_list ul .slick-arrow.slick-next {background-position:left 20px top 120px;}
}

@media all and (max-width:1801px) {
	.visual .video_wrap {width:68%;}
	.visual .video_wrap:before {top:14.8%;}
	
	.visual .iframe_wrap {padding-top:66.45%;}
	.visual .iframe_wrap iframe {top:50%; left:50%; transform:translate(-50%,-50%); width:120%; height:120%;}
	
	.rcm_story_list .wrapper_wide {padding-left:50px; padding-right:50px;}
}

@media all and (max-width:1601px) {
	.visual h2 {font-size:58px;}
	.visual .video_wrap:before {top:108px;}
	
	.visual .iframe_wrap {padding-top:73.45%;}
	.visual .iframe_wrap iframe {width:132%; height:132%;}
	/*
	.visual .right_link a.expressway {height:288px;}*/
	.visual .right_link {padding-top:109px;}
	
	.link_list {gap:45px;}
	
	.folder_list.no_lisde li {width:calc(33.33% - 15px);}
}

@media all and (max-width:1401px) {
	.visual h2 {font-size:48px;}
	.visual .video_wrap {width:64%;}
	.visual .video_wrap:before {top:95px;}
	
	.visual .iframe_wrap {padding-top:86.45%;}
	.visual .iframe_wrap iframe {width:155%; height:155%;}
	
	.visual .right_link {padding-top:97px;}
	.visual .right_link a > div > span {font-size:16px;}
	.visual .right_link a > div > p {font-size:30px;}
	/*
	.visual .right_link a.expressway {height:288px;}*/
	
	.folder_list li a div > span {font-size:21px;}
	
	.link_list ul li a {font-size:30px; padding:50px;}
}

@media all and (max-width:1201px) {
	.visual {flex-direction:column; margin-top:0; margin-top:45px; padding-top:62px; gap:80px; padding-bottom:75px;}
	.visual h2 {text-align:right; right:50px; font-size:48px; background-size:60px !important; padding-left:20px;}
	.visual h2:before {top:61px; transform:rotate(-184deg);}
	.visual h2 br {display:block;}
	.visual .video_wrap {width:100%;}
	.visual .video_wrap:before {display:block; top:97px;}
	
	.visual .iframe_wrap {padding-top:56.25%;}
	.visual .iframe_wrap iframe {width:100%; height:100%;}
	
	.visual .right_link {padding-top:0; width:100%;}
	.visual .right_link > div {flex-direction:row;}
	.visual .right_link > div:before {display:none;}
	.visual .right_link a {width:50%; flex-grow:0; padding:0 !important;}
	.visual .right_link a > div > span {font-size:16px;}
	.visual .right_link a > div > p {font-size:30px; height:70px;}
	/*.visual .right_link a.expressway {height:288px;}*/
	
	.main_tit {font-size:50px;}
	
	.folder_list {padding-bottom:148px;;}
	.folder_list .slick-arrow {bottom:73px;}
	
	.link_list ul li a {font-size:25px; padding:35px;}
	.link_list ul li a span {line-height:2;}
	.link_list ul li.txt {display:none; font-size:24px;}
	.link_list + p {display:block; margin-top:17px; font-size:24px;}
	
	.sub_visual h1 {font-size:50px;}
	
	.folder_list.no_lisde li {width:calc(50% - 15px);}
}

@media all and (max-width:951px) {
	.visual {padding-top:49px;}
	.visual h2 {font-size:32px; background-position:left 20px top 17px !important; background-size:43px !important; padding-left:20px;}
	.visual h2:before {top:49px; left:-20px; transform:rotate(-180deg);}
	
	.visual .video_wrap:before {top:67px;}
	
	.visual .right_link {margin-right:-50px; overflow-x:scroll;}
	.visual .right_link > div {min-width:817px;}
	.visual .right_link a.accelerat {min-width:390px;}
	.visual .right_link a.expressway {min-width:410px;}
	
	.main_tit {font-size:39px; line-height:1.13;}
	.main_tit.deco01 {background-position:left top 3px;}
	.main_tit.deco02 {background-position:left top;}
	
	.folder_list li a em {padding-left:20px;}
	.folder_list li a div {padding:30px 30px 35px;}
	.folder_list li a div > span {font-size:18px;}
	.folder_list li a div > strong {font-size:30px;}
	.folder_list .slick-arrow {bottom:70px;}
	
	.link_list {gap:20px; text-align:center;}
	.link_list ul li a span {padding:0; background:none;}
	
	.rcm_story_list ul li strong {padding-right:0; font-size:30px;}
}

@media all and (max-width:721px) {
	.visual {padding-top:30px; margin-top:23px; gap:40px;}
	.visual h2 {text-align:right; right:12px; font-size:24px; padding:0 0 10px 12px; background-position:left 10px top 6px !important; border-radius:0 0 0 14px; background-size:28px !important; letter-spacing:-2px;}
	.visual h2:before {top:31px; left:-10px; width:10px;  height:10px; transform:rotate(-180deg);}
	.visual .video_wrap {border-radius:12px;}
	.visual .video_wrap:before {top:41px; width:13px;  height:13px;}
	
	.visual .right_link {margin-right:-12px; overflow-x:scroll;}
	.visual .right_link > div {min-width:423px; padding-right:10px; gap:8px; height:160px;}
	.visual .right_link a {padding:13px 0 12px 7px; border-radius:12px;}
	.visual .right_link a > div {background:none;}
	.visual .right_link a > div > span {font-size:10px; border-radius:5px; padding:5px; letter-spacing:-0.5px; max-width:calc(100% - 8px);}
	.visual .right_link a > div > p {margin-top:10px; font-size:15px; padding-left:5px; letter-spacing:-1.5px; height:33px;}
	.visual .right_link a > em {font-size:10px; padding-left:5px;}
	.visual .right_link a.accelerat {min-width:195px; background-position:right -40px bottom;}
	.visual .right_link a.expressway {height:100%; min-width:205px; background-position:right -40px bottom;}
	
	
	.main_titwrap {margin-bottom:24px;}
	.main_tit {font-size:24px; background-size:16px; padding-left:20px; background-position:left top 3px; letter-spacing:-1px;}
	.main_tit.deco02 {background-position:left top 3px;}
	
	.folder_list {padding-bottom:70px;}
	.folder_list li {transform:translateX(-54%);}
	.folder_list.no_lisde li {transform:translateX(0);}
	.folder_list li a em {font-size:13px; padding:10px 0 0 13px;letter-spacing:-1px;}
	.folder_list li a div {padding:17px 15px 19px;}
	.folder_list li a div span {font-size:14px; letter-spacing:-0.8px; border-radius:5px;}
	/*.folder_list li a div .thumb {height:125px;}*/
	.folder_list li a div .thumb {height:auto;}
	.folder_list li a div .thumb img {width: 100%; height: auto;	}
	.folder_list li a div strong {font-size:18px; height:41px;}
	
	.link_list {gap:8px;}
	.link_list ul li + li {margin-top:8px;}
	.link_list ul li {border-radius:20px;}
	.link_list ul li a {padding:36px 0; font-size:18px;}
	.link_list ul li a span {display:inline-block; padding:0; background:none; letter-spacing:-1px;}
	.link_list ul li.call a span {padding-left:37px; background-size:27px;  letter-spacing:-1px;}
	.link_list + p {font-size:22px;}
	
	.notice_wrap h4 {margin-bottom:13px; font-size:15px;}
	.notice_wrap p {font-size:11px; letter-spacing:-0.8px;}
	
	.sub_visual {padding:50px 0 45px;}
	.sub_visual > p {font-size:15px; letter-spacing:-1px;}
	.sub_visual h1 {font-size:30px; padding:0 100px; letter-spacing:-1px;}
	.sub_visual ul {gap:16px;}
	.sub_visual ul li {font-size:10px; letter-spacing:-0.8px;}
	.sub_visual ul li:before {right:-8px; height:7px;}
	
	.basic_view .view_wrap .view_txt .article_util {display:none;margin-top:50px;}
	.basic_view .view_wrap .view_txt .article_util .share_link {gap:8px;}
	.basic_view .view_wrap .view_txt .article_util .share_link button {width:40px; height:40px;}
	
	.rcm_story_list {padding-top:40px; padding-bottom:43px;}
	.rcm_story_list h2.main_tit.deco01 {margin-bottom:27px; font-size:24px; padding-left:26px; background-size:20px;}
	
	.rcm_story_list ul {padding-bottom:0;}
	.rcm_story_list ul li {margin:0 7px;}
	.rcm_story_list ul li.slick-slide {transform:translateX(-59%);}
	.rcm_story_list ul li .thumb {height:172px; border-radius:23px;}
	.rcm_story_list ul li p {margin:16px 0 9px;font-size:10px;}
	.rcm_story_list ul li strong {margin-bottom:12px; font-size:14px; height:38px;}
	.rcm_story_list ul li span {font-size:10px;}
	
	.board_page .story {margin-top:50px; padding-bottom:80px;}
	
	.rcm_story_list .wrapper_wide {padding-left:12px; padding-right:12px;}
}


@media all and (max-width:641px) {
	.folder_list li {transform:translateX(-97%);}
	.folder_list li a em {font-size:12px;}
	.folder_list li a div {border-radius:10px;}
	.folder_list li a div span {font-size:11px;}
	.folder_list li a div .thumb {margin-bottom:12px; /*height:97px;*/ border-radius:10px;}
	.folder_list li a div strong {margin-top:12px; font-size:15px; padding-left:7px;}
	
	.link_list ul li a {font-size:15px;}
	.link_list + p {font-size:18px;}
	
	.sub_visual h1 {padding:0;}
}

@media all and (max-width:481px) {
	.visual {padding-bottom:50px;}
	
	.folder_list li {margin-right:10px; transform:translateX(-52%);}
	.folder_list li a em {font-size:10px;}
	.folder_list li a div span {font-size:11px; padding:1px 7px;}
	.folder_list li a div .thumb {margin-bottom:10px;}
	.folder_list li a div strong {margin-top:7px; font-size:15px; padding-right:30px;}
	
	.link_list ul li {border-radius:10px;}
	.link_list ul li a {padding:18px 0; font-size:12px;}
	.link_list ul li.call a span {padding-left:25px; background-size:15px;}
	.link_list + p {margin-top:5px; font-size:11px;}
	
	
	.rcm_story_list ul li .thumb {height:86px; border-radius:12px;}
	
	.folder_list {padding-bottom:50px;}
	.folder_list.no_lisde {padding:0 13px;}
	.folder_list.no_lisde li {width:100%; margin:0;}
	.folder_list.no_lisde li a em {font-size:13px; padding:16px 0 0 25px;}
	.folder_list.no_lisde li a div span {font-size:12px;}	
	/*.folder_list.no_lisde li a div .thumb {height:137px;}*/
	.folder_list li a div strong {height:35px;}
	
}

@media all and (max-width:375px) {
	.main_tit {font-size:20px;}
	.link_list ul li a {font-size:10px;}
	.link_list ul li.call a span {padding-left:15px; background-size:12px;}
}