@charset "utf-8";
/* Pretendard */
@font-face { font-family: 'Pretendard';font-weight: 100;src: url('../fonts/Pretendard/Pretendard-Thin.eot');src: url('../fonts/Pretendard/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-Thin.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-Thin.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-Thin.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-Thin.svg#Pretendard-Thin') format('svg');}
@font-face { font-family: 'Pretendard';font-weight: 200;src: url('../fonts/Pretendard/Pretendard-ExtraLight.eot');src: url('../fonts/Pretendard/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-ExtraLight.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-ExtraLight.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-ExtraLight.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-ExtraLight.svg#Pretendard-ExtraLight') format('svg');}
@font-face { font-family: 'Pretendard';font-weight: 300;src: url('../fonts/Pretendard/Pretendard-Light.eot');src: url('../fonts/Pretendard/Pretendard-Light.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-Light.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-Light.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-Light.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-Light.svg#Pretendard-Light') format('svg');}
@font-face { font-family: 'Pretendard';font-weight: 400;src: url('../fonts/Pretendard/Pretendard-Regular.eot');src: url('../fonts/Pretendard/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-Regular.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-Regular.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-Regular.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-Regular.svg#Pretendard-Regular') format('svg');}
@font-face { font-family: 'Pretendard';font-weight: 500;src: url('../fonts/Pretendard/Pretendard-Medium.eot');src: url('../fonts/Pretendard/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-Medium.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-Medium.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-Medium.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-Medium.svg#Pretendard-Medium') format('svg');}
@font-face { font-family: 'Pretendard';font-weight: 600;src: url('../fonts/Pretendard/Pretendard-SemiBold.eot');src: url('../fonts/Pretendard/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-SemiBold.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-SemiBold.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-SemiBold.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-SemiBold.svg#Pretendard-SemiBold') format('svg');}
@font-face { font-family: 'Pretendard';font-weight: 700;src: url('../fonts/Pretendard/Pretendard-Bold.eot');src: url('../fonts/Pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-Bold.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-Bold.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-Bold.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-Bold.svg#Pretendard-Bold') format('svg');}
@font-face { font-family: 'Pretendard';font-weight: 800;src: url('../fonts/Pretendard/Pretendard-ExtraBold.eot');src: url('../fonts/Pretendard/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-ExtraBold.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-ExtraBold.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-ExtraBold.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-ExtraBold.svg#Pretendard-ExtraBold') format('svg');}
@font-face { font-family: 'Pretendard';font-weight: 900;src: url('../fonts/Pretendard/Pretendard-Black.eot');src: url('../fonts/Pretendard/Pretendard-Black.eot?#iefix') format('embedded-opentype'),    url('../fonts/Pretendard/Pretendard-Black.woff2') format('woff2'),    url('../fonts/Pretendard/Pretendard-Black.woff') format('woff'),    url('../fonts/Pretendard/Pretendard-Black.otf') format('opentype'),    url('../fonts/Pretendard/Pretendard-Black.svg#Pretendard-Black') format('svg');}

html, body, div, span, applet, object, iframe, h1, h2, h2, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
a:link, a:visited, a:active, a:hover { text-decoration: none; color:#4a4a4a; }
body { line-height: 1.4em; margin:0; padding:0; font-family: 'Pretendard', sans-serif; font-size:13px;}
div, p, span, td, th, li, dd, dt, a { color:inherit; }
form { margin:0; padding:0; }
ul { list-style-type:none; margin:0; padding:0; }
li, dl, dt, dd { margin:0; padding:0; line-height:1.4em; }
hr { display:none; }
table caption {position:relative; visibility:hidden; width:0; height:0; overflow:hidden; font-size:0;} 
table { border-collapse:collapse; border-spacing:0; width:100%; }
th, td { padding:0; margin:0; }
img, type-image, fieldset { border: 0 none; margin:0; padding:0; }
legend { display:none; }
a:link, a:visited, a:active, a:hover { text-decoration: none; color:#4a4a4a; }
select { padding:0; margin:0; border:1px solid #dadada; }
input.type-text, textarea { border: 1px solid #ddd; background: #fff; padding: 1px; }
input.type-text:hover, input.type-text:focus, textarea:hover, textarea:focus, select:hover, select:active { background-color: #fff; }
input, select, textarea { vertical-align: middle; color: #333; margin:0; padding:0; font-family: 'Pretendard', sans-serif; }
h1, h2, h2, h4, h5, h6 { margin: 0; padding: 0; }
p { margin: 0; padding: 0; }
img { border: medium none; vertical-align: middle; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
body{ width: 100%; height: 100%; font-size:14px; color:#333;background-color: #f0f2f4;}
.ir{left: 9999px; top:auto; width: 1px; height: 1px; overflow:hidden; position: absolute;}
.blind {width: 0px; height: 0px; overflow:hidden; position:absolute; left:-9999px; top:-9999px}
#skipnavi a { display: block; left: 0; overflow: hidden; position: absolute; top: -10000px; }
#skipnavi a:hover, #skipnavi a:focus, #skipnavi a:active { padding: 15px 0; background-color: #3760c9; color: #fff; font-size: 120%; width: 100%; text-align: center; top: 0px; z-index: 500; }


body {background-color: #F2F4F8;}
body * {box-sizing: border-box;}

button {border: 0; display: block; background: none; padding: 0; margin: 0; cursor: pointer;}

/* 유튜브 */
.youtube .box-cont {padding: 20px;}
.youtube #videos ul {margin: 0;padding: 0;list-style: none;}
.youtube #videos li {margin: 0;padding: 0;}
/* 대표 영상 */
.youtube-main {padding-bottom: 15px !important;border-bottom: 1px solid #e5e8ed;}
.youtube-main > a {display: block;color: #222;text-decoration: none;}
.youtube-thumb {display: block;position: relative;width: 100%;aspect-ratio: 16 / 9;overflow: hidden;border-radius: 10px;background: #222;}
.youtube-thumb img {display: block;width: 100%;height: 100%;object-fit: cover;}
.youtube-play {position: absolute;top: 50%;left: 50%;width: 48px;height: 38px;margin: -19px 0 0 -24px; display: flex;align-items: center;justify-content: center; border-radius: 9px;background: #ff0033;color: #fff; font-size: 18px;line-height: 1;}
.youtube-duration {position: absolute;right: 8px;bottom: 8px; padding: 2px 5px; border-radius: 4px;background: rgba(0, 0, 0, .8);color: #fff; font-size: 12px;}
.youtube-title {display: block;margin-top: 10px; font-size: 16px;line-height: 1.4;font-weight: 700; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.youtube-info {display: block;margin-top: 4px; color: #7b8493;font-size: 12px;}
/* 하단 영상 목록 */
.youtube-list {padding: 12px 0;border-bottom: 1px solid #eee;}
.youtube-list > a {display: flex;align-items: center;gap: 12px; color: #333;text-decoration: none;}
.youtube-list .list-thumb {flex: 0 0 95px;width: 95px;height: 58px; overflow: hidden;border-radius: 7px;background: #e8edf4;}
.youtube-list .list-thumb img {width: 100%;height: 100%;object-fit: cover;}
.youtube-list .list-text {display: block;flex: 1;min-width: 0;}
.youtube-list .list-text strong {display: block; font-size: 13px;line-height: 1.4;font-weight: 600; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.youtube-list .list-date {display: block;margin-top: 4px; color: #89929f;font-size: 11px;}

#instas > ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: 6px;margin: 0;padding: 10px;list-style: none;}
#instas > ul > li {min-width: 0;aspect-ratio: 1 / 1;overflow: hidden;border-radius: 8px;}
#instas > ul > li > a {display: block;width: 100%;height: 100%;}
#instas > ul > li img {display: block;width: 100%;height: 100%;object-fit: cover;}

.x-com .box-cont {padding: 0; height: 440px; overflow: hidden; }


[class*="ic-"] {display: block; background-repeat: no-repeat; background-position: center; background-size: 100%;}
[class*="ic-"].circle {width: 30px; height: 30px; border-radius: 50%;}
.ic-main.circle {background-image: url('../images/com/ic_sns_main_circle.svg?v=1');}
.ic-youtube.circle {background-image: url('../images/com/ic_sns_youtube_circle.png?v=2');}
.ic-x-com.circle {background-image: url('../images/com/ic_sns_x_com_circle.png?v=2');}
.ic-facebook.circle {background-image: url('../images/com/ic_sns_facebook_circle.png?v=2');}
.ic-instagram.circle {background-image: url('../images/com/ic_sns_instagram_circle.png?v=2');}
.ic-blog.circle {background-image: url('../images/com/ic_sns_blog_circle.png?v=1');}

[class*="ic-"].white {width: 26px; height: 26px;}
.ic-youtube.white {background-image: url('../images/com/ic_sns_youtube_w.svg');}
.ic-x-com.white {background-image: url('../images/com/ic_sns_x_com_w.svg');}
.ic-facebook.white {background-image: url('../images/com/ic_sns_facebook_w.svg');}
.ic-instagram.white {background-image: url('../images/com/ic_sns_instagram_w.svg');}
.ic-blog.white {background-image: url('../images/com/ic_sns_blog_w.svg');}

#content {max-width: 1060px; margin: 0 auto; padding-left: 20px; padding-right: 20px; padding-top: 55px; padding-bottom: 20px;}

.headline {padding-top: 26.471%; background: #BED1FB url('../images/com/ic_banner.png') no-repeat center; background-size: cover; border-radius: 20px;}

.sns {margin-top: 20px;}
.sns ul {display: flex; gap: 10px 10px; flex-wrap: wrap;}
.sns ul li {flex: 1 0 auto; min-width: 0;}
.sns ul li a {display: flex; align-items: center; justify-content: flex-start; gap: 0 10px; width: 100%; padding: 10px 10px; border: 1px solid #DBDBDB; background-color: #FFFFFF; border-radius: 10px; transition: all 0.2s; padding-left: 17px;}
.sns ul li a p {font-size: 16px; font-weight: 600; color: #000000;}

.preview {margin-top: 20px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px 20px;}
.preview .box-area {display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; width: calc((100% - 20px)/2); flex: none; border: 1px solid #E3E9F1;}
.preview .box-area .box-head {display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 15px;}
.preview .box-area .box-head .tit-area {display: flex; gap: 0 10px; align-items: center; justify-content: flex-start;}
.preview .box-area .box-head .tit-area p {font-size: 18px; font-weight: 700; color: #FFFFFF;}
.preview .box-area .box-head .etc-area .btn-more {font-size: 16px; font-weight: 700; color: #FFFFFF;}
.preview .box-area .box-cont {flex: none; /*height: 440px;*/ height: 500px; overflow: auto; background-color: #FFFFFF; padding: 20px 20px;}

.preview .box-area.youtube .box-head {background-color: #FF0033;}

.preview .box-area.x-com .box-head {background-color: #000000;}

.preview .box-area.facebook .box-head {background-color: #1877F2;}

.preview .box-area.instagram .box-head {background-color: #FF0033;}

/* .preview .box-area.blog {width: 100%;} */
.preview .box-area.x-com {width: 100%;}
.preview .box-cont.x-com {height: 60px;}
.preview .box-area.blog .box-head {background-color: #03C75A;}
.preview .box-area.blog .box-cont {overflow: hidden;}
.preview .box-area.blog .box-cont iframe {display: block; width: 100%; height: 100%; border: 0;}

#footer {max-width: 1060px; margin: 0 auto; padding-left: 20px; padding-right: 20px; padding-bottom: 55px;}
#footer .inner {border-top: 1px solid #D8DEE8; padding-top: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap:30px;}
#footer .inner .btn-link {color: #0B4DA2; font-weight: 700; font-size: 13px; line-height: 1.153;}
#footer .inner .btn-link {
    display: inline-block;
    color: #0B4DA2;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.153;
    padding: 10px 17px;
    border: 1px solid #DBDBDB;
    background-color: #FFFFFF;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
    min-width: 140px;
}
/* #footer .inner b {margin-top: 10px;} */

@media all and (min-width: 1060px) {
	.sns ul li a:hover {box-shadow: 0 0 10px 0 #B1C5FA;}}
	#footer .inner .btn-link:hover {
        box-shadow: 0 0 10px 0 #B1C5FA;
    }

@media all and (max-width: 960px) {
	.sns ul li {flex: none; width: calc((100% - 20px)/3)}

	.preview .box-area {width: 100%;}}

@media all and (max-width: 640px) {
	[class*="ic-"].white {width: 22px; height: 22px;}

	#content {padding-top: 20px;}
	
	.headline {padding-top: 25%;}
	
	.sns ul {border: 1px solid #DBDBDB; border-radius: 10px; padding: 10px 25px; background-color: #FFFFFF; justify-content: space-between; gap: 0;}
	.sns ul li {width: 30px;}
	.sns ul li a {padding: 0; border: 0;}
	.sns ul li p {display: none;}

	.preview .box-area .box-head .tit-area p {font-size: 14px;}
	.preview .box-area .box-head .etc-area .btn-more {font-size: 13px;}
	.preview .box-area .box-cont {height: 360px;}
	.preview .box-cont.x-com {height: 60px;}
	#footer { padding-bottom: 20px;}
	#footer .inner {padding-top: 15px; gap:30px;}
	#footer .inner .btn-link {font-size: 12px; line-height: 1.167;}}

@media all and (max-width: 480px) {
	.sns ul {padding: 10px 15px;}
	.preview .box-area .box-cont.x-com {height: 80px;}
	.preview .box-area .box-cont {height: 320px;}}