@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

@font-face {
    font-family: 'cafe';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* CSS 초기화 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button {
	background:transparent;
	border:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	font-weight:normal;
	font-family:"Noto Sans KR", HelveticaNeue, DroidSans, Sans-serif, Helvetica;
	letter-spacing:-.5px;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

html {
	font-size:16px;
}

body {
	color:#505050;
	line-height:1.2;
	min-width:320px;
	overflow-x:hidden;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}

nav ul, li {
	list-style:none;
}

a {
	background:transparent;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	margin:0;
	padding:0;
	text-decoration:none;
	vertical-align:baseline;
}

img {
	max-width:100%;
	vertical-align:top;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

input {
	border-radius:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	font-family:"Noto Sans KR", HelveticaNeue, DroidSans, Sans-serif, Helvetica;
	font-weight:normal;
	margin:0;
	letter-spacing:-.5px;
	padding:0;
	vertical-align:top;
}

select, textarea {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	font-family:"Noto Sans KR", HelveticaNeue, DroidSans, Sans-serif, Helvetica;
	letter-spacing:-.5px;
}

.hide { font-size:0; height:0; left:-20000px; overflow:hidden; position:absolute; text-indent:-20000px; width:0; }

header,
nav,
section,
article,
aside,
footer { display:block; }

/* 공통 */
h3 { display: inline-block; font-family: "cafe"; font-size: 46px; font-weight: bold; color: #71685c;}


/* 헤더 */
header { padding: 0 40px; position: fixed; width: 100%; height: 100px; background: #fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; z-index: 9999;}
header .header_inner h1 a { display: block;}
header .header_inner h1 a img { width:auto; height: 100%;}
header .header_inner { display: flex; justify-content: space-between; align-items: center; height: 100%;}
header .header_inner nav ul { display: flex; gap: 42px;}
header .header_inner nav ul li button { position: relative; font-size: 18px; color: #555; cursor: pointer;}
header .header_inner nav ul li button.on { color: #000; font-weight: bold;}
header .header_inner nav ul li button.on::after { content: ""; display: block; width: 100%; height: 3px; background: #000; position: absolute; bottom: -8px;}

/* scrollTop btn */
#toTop{ position:fixed; right: 50px; bottom: 50px; opacity:0; cursor:pointer; width:96px; height:96px;color:#fff;text-align:center;line-height:88px;background:#8c8780 url(/images/character/scrollTop.png) no-repeat center; transition:all .3s; border-radius: 10px; z-index: 9999;} 
#toTop:hover{background-color:#e60012;}

/* 소개 */
#introduce .int_bg { margin-bottom: 130px; height:0; padding-top: 43.59%; background: url(/images/character/top_main_v2.jpg) no-repeat center/cover;}
#introduce .int_content.top_c { padding-bottom: 104px; border-bottom: 1px solid #e3e1de;}
#introduce .int_content dl { margin: 0 auto; padding: 0 76px; max-width: 1200px; display: flex; justify-content: space-between; align-items: center;}
#introduce .int_content dl dt { text-align: center;}
#introduce .int_content dl dt p { margin-top: 18px; font-weight: 900;}
#introduce .int_content dl dd h2 { margin-bottom: 28px; font-family: "cafe"; font-size: 28px; font-weight: bold; color: #333; }
#introduce .int_content dl dd h2 strong { position: relative; color: #e60012; font-family: "cafe"; font-size: 40px; font-weight: bold;}
#introduce .int_content dl dd h2 strong::before { content: ""; display: block; width: 8px; height: 8px; background: #424242; border-radius: 50%; position: absolute; top: -20px; left: 16px;}
#introduce .int_content dl dd h2 strong::after { content: ""; display: block; width: 8px; height: 8px; background: #424242; border-radius: 50%; position: absolute; top: -20px; right: 16px;}
#introduce .int_content dl dd span { font-size: 18px; line-height: 1.5; font-weight: 500; color: #333;}
#introduce .int_content dl dd em { display: block; font-size: 20px; font-weight: bold; font-style: normal; color: #e60012;}
#introduce .int_content dl dd small { margin-top: 40px; display: block; font-size: 18px; color: #71685c;}
#introduce .int_content.bottom_c { margin: 158px 0;}
#introduce .int_content.bottom_c dl dt { order: 2;}

.flex {display: flex;}
.flex.row { flex-flow: row wrap; }
.flex.around { justify-content: space-around; }

/* 영상 */
#video { padding: 60px 0; position: relative; background: #f1f0ee;}
h3.video { margin-bottom: 20px; padding-left: 74px; background: url(/images/character/video_play_icon.png) no-repeat left center;}
#video .video_inner { max-width: 1200px; margin: 0 auto; text-align: center;}
#video .video_inner .swiper-slide { background: #000; height: 600px; }
#video .video_inner .youtube_video { height:100%; aspect-ratio: 16 / 8; }
#video .video_inner .youtube_video.shorts { aspect-ratio: 9 / 16; }
#video .video_btn_box { position: absolute; width: 1370px; left: 50%; transform: translateX(-50%); bottom: 46%;}
.swiper { border-radius: 10px; overflow: hidden;}

.swiper-button-prev,
.swiper-button-next { color: #a49e96 !important;}
.swiper-button-prev:after,
.swiper-button-next:after { font-size: 60px !important; font-weight: bold !important;}

/* 함께하기 */
#together { padding: 120px 0 0;}
#together .together_inner { max-width: 1200px; margin: 0 auto; text-align: center;}
#together .together_inner:first-child { max-width:100%; border-bottom: 1px solid #e3e1de;  margin-bottom: 80px; }
h3.together { margin-bottom: 44px; padding-left: 74px; line-height: 61px; background: url(/images/character/together_icon.png) no-repeat left top;}
h3 span { font-size: 26px; color: inherit; font-weight: 600; letter-spacing: -1.5px;}
h3 span strong { color: #ff5757; font-weight: 600;}
.together_inner .top_p { padding: 65px 0; margin: 10px 0 60px; position: relative; font-size: 32px; color: #000;}
.together_inner .top_p::before,
.together_inner .top_p::after { content: ""; display: block; width: 35px; height: 30px; position: absolute; left: 50%; transform: translateX(-50%); background-size:contain; background-repeat:no-repeat;}
.together_inner .top_p::before { background-image: url(/images/character/together_daom1.png); top: 0;}
.together_inner .top_p::after { background-image: url(/images/character/together_daom2.png); bottom: 0;}
.together_inner .top_p strong { font-weight: bold;}

#together h4 { font-size: 40px; font-family: "cafe"; color: #71685c;}
#together h4 em { position: relative; font-style: normal; font-family: "cafe"; font-weight: bold; font-size: 62px; color: #ff5757;}
#together h4 em::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: #ff5757; position: absolute; top: -22px; left: 50%; transform: translateX(-50%);}
#together .together_inner dl { margin-bottom: 100px;}
#together .together_inner dl dt { margin-bottom: 20px;}
#together .together_inner dl dd p { font-size: 30px; color: #71685c; font-weight: 600;}
#together .together_inner dl dd p span { color: #948e86; font-weight: inherit;}
#together .together_inner dl dd p strong { color: #ff5757; font-weight: inherit;}
#together .message { background: #948e86; text-align: center; padding: 50px 0; margin-top: 92px;}
#together .message p { font-size: 30px; color: #fff; margin-bottom: 24px; font-weight: 500;}
#together .message strong { font-size: 50px; color: #fff; font-weight: bold; font-family: "cafe";}
#together .message strong em { font-style: normal; font-size: 62px; font-weight: bold; font-family: "cafe";}

/* 활용방법 */
#htu { padding: 100px 0 120px;}
#htu .htu_inner { max-width: 1200px; margin: 0 auto; text-align: center;}
h3.htu { margin-bottom: 86px; padding-left: 74px; line-height: 61px; background: url(/images/character/check_icon.png) no-repeat left center;}
#htu dt { margin-bottom: 60px; position: relative; padding-left: 60px; font-family: "NanumSquare"; text-align: start; font-size: 32px; color: #d71618; font-weight: bold;}
#htu dt::before { content: ""; display: block; width: 40px; height: 4px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: #e3e1de;}
#htu .htu_inner .img_box dl:nth-of-type(2) { margin-top: 100px;}
#htu .htu_inner .img_box dl:nth-of-type(2) dd:nth-of-type(1) { padding-bottom: 66px;}
#htu .htu_inner .img_box dl:nth-of-type(2) dd:nth-of-type(2) { padding-top: 66px; border-top: 1px solid #e3e1de;}
#htu .d3_box { margin-top: 120px; background: #747474;}
#htu .d3_box dl { padding: 44px 0 100px 0; max-width: 1200px; margin: 0 auto; text-align: center;}
#htu a { margin: 50px auto 0; display: block; width: 280px; line-height: 64px; text-align: center; background: #ed251b; border-radius: 10px; color: #fff; font-size: 20px; cursor: pointer;}  
#htu a strong { font-weight: 700;}

/* 갤러리 */
#gallery { padding: 100px 0 134px; background: #f1f0ee; }
#gallery .gallery_inner { position: relative; max-width: 1200px; margin: 0 auto; text-align: center;}
h3.gallery { margin-bottom: 48px; padding-left: 74px; line-height: 46px; background: url(/images/character/gallery_icon.png) no-repeat left center;}
.gallery_inner .swiper_slide_inner { width: 1000px; margin: 0 auto;}
.gallery_inner .swiper_slide_inner .swiper.mySwiper2.big_img { height: 640px; margin-bottom: 34px; border: 4px solid #71685c; border-radius: 10px; background: #fff; }
.gallery_inner .swiper_slide_inner .swiper.mySwiper3.small_img { height: 134px;}
.gallery_inner .swiper_slide_inner .swiper.mySwiper3.small_img .swiper-slide img { border-radius: 10px;}
.mySwiper3 .swiper-slide { opacity: 0.4; cursor: pointer;}
.mySwiper3 .swiper-slide img { width: 100%; height: 100%; object-fit: cover;}
.mySwiper3 .swiper-slide-thumb-active { opacity: 1;}

/* 굿즈 */
#goods { padding: 100px 0; }
#goods .goods_inner { position: relative; max-width: 1200px; margin: 0 auto; text-align: center;}
h3.goods { margin-bottom: 48px; padding-left: 74px; line-height: 61px; background: url(/images/character/goods_icon.png) no-repeat left center;}
.goods_inner .swiper_slide_inner { width: 1000px; margin: 0 auto;}
.goods_inner .swiper_slide_inner .swiper.mySwiper4.big_img { height: 640px; margin-bottom: 34px; border: 4px solid #71685c; border-radius: 10px;}
.goods_inner .swiper_slide_inner .swiper.mySwiper5.small_img { height: 134px;}
.goods_inner .swiper_slide_inner .swiper.mySwiper5.small_img .swiper-slide img { border-radius: 10px;}
.mySwiper5 .swiper-slide { opacity: 0.4; cursor: pointer;}
.mySwiper5 .swiper-slide img { width: 100%; height: 100%; object-fit: cover;}
.mySwiper5 .swiper-slide-thumb-active { opacity: 1;}

/* 썸네일 슬라이더
.swiper.small_img { border-radius: unset; }
.small_img .swiper-slide { border-radius: 6px; overflow: hidden; } */

.swiper_slide_inner { position: relative; }
.swiper_slide_inner .pagination { position: absolute; top: 0; right:0; left: auto; width: max-content; height: max-content; padding:6px 10px; transform: translateY(-100%); }
.swiper_slide_inner .swiper-slide img { width: 100%; height: 100%; }
#gallery .swiper_slide_inner .swiper-slide img { object-fit: cover; }
#goods .swiper_slide_inner .swiper-slide img { object-fit: contain; }
.swiper_slide_inner .swiper-button-prev { left: 0!important; transform: translateX(-320%); }
.swiper_slide_inner .swiper-button-next { right:0!important; transform: translateX(320%); }

/* footer */
.footer_section a { color: #666;}

/* 반응형 */
@media screen and (max-width: 1370px) {
    /* 영상 */
    #video .video_btn_box { width: 95%; z-index: 99;}
}
@media screen and (max-width: 960px) {
    .pc { display: none !important;}
    header { padding: 0 30px;}

    #toTop { right: 30px; bottom: 132px; width: 50px; height: 50px; background-size: 22px;}
    #mob_top { height: 100px;}

    /* 메뉴 바 */
    .mob_menu { padding: 13px 30px; position: fixed; bottom: 0; width: 100%; background: #fff; border-top: 2px solid #dcdbd9; z-index: 9999;}
    .mob_menu nav { height: 100%;}
    .mob_menu nav ul { padding: 0 18px; display: flex; height: 100%; justify-content: space-between; align-items: center;}
    .mob_menu nav ul li button { padding-top: 44px; width: 44px; white-space: nowrap; text-align: center; cursor: pointer; color: #8c8780; font-size: 14px; background-size: 34px !important;}
    .mob_menu nav ul li:nth-child(1) button { background: url(/images/character/itd_menu_icon.png) no-repeat top center;}
    .mob_menu nav ul li:nth-child(2) button { background: url(/images/character/video_menu_icon.png) no-repeat top center;}
    .mob_menu nav ul li:nth-child(3) button { background: url(/images/character/tgh_menu_icon.png) no-repeat top center;}
    .mob_menu nav ul li:nth-child(4) button { width: auto; background: url(/images/character/htu_menu_icon.png) no-repeat top center;}
    .mob_menu nav ul li:nth-child(5) button { width: auto; background: url(/images/character/gal_menu_icon.png) no-repeat top center;}
    .mob_menu nav ul li:nth-child(6) button { background: url(/images/character/footer_menu_icon.png) no-repeat top center;}

    .mob_menu nav ul li:nth-child(1) button.on { background: url(/images/character/itd_menu_icon_on.png) no-repeat top center; color: #71685c;}
    .mob_menu nav ul li:nth-child(2) button.on { background: url(/images/character/video_menu_icon_on.png) no-repeat top center; color: #71685c;}
    .mob_menu nav ul li:nth-child(3) button.on { background: url(/images/character/tgh_menu_icon_on.png) no-repeat top center; color: #71685c;}
    .mob_menu nav ul li:nth-child(4) button.on { background: url(/images/character/htu_menu_icon_on.png) no-repeat top center; color: #71685c;}
    .mob_menu nav ul li:nth-child(5) button.on { background: url(/images/character/gal_menu_icon_on.png) no-repeat top center; color: #71685c;}
    .mob_menu nav ul li:nth-child(6) button.on { background: url(/images/character/footer_menu_icon_on.png) no-repeat top center; color: #71685c;}

    /* 소개 */
    #introduce .int_content dl { flex-direction: column; row-gap: 50px;}
    #introduce .int_content dl dd { text-align: center; order: 1;}
    #introduce .int_content dl dt { width: 50%;}
    #introduce .int_content dl dt img { width: 100%; height: 100%; object-fit: cover;}
    #introduce .int_content.bottom_c dl dt { order: 1;}
    #introduce .int_content dl dd h2 strong::before,
    #introduce .int_content dl dd h2 strong::after { width: 6px; height: 6px; top: -14px;}

    /* 영상 */
    
}
@media screen and (min-width: 960px) {
    .mob { display: none !important;}
}
@media screen and (max-width: 876px) {
    #video { padding: 40px 0; }
    #video .video_inner .swiper-slide { height: 50vw; }
    #gallery .gallery_inner,
    #goods .goods_inner { max-width: 100%; }
    .gallery_inner .swiper_slide_inner,
    .goods_inner .swiper_slide_inner { max-width:100%; }
}

@media screen and (max-width: 640px) {
    /* 공통 */
    h3 { padding-left: 40px !important; font-size: 23px; background-size: 15% !important;}

    /* 헤더 */
    header .header_inner h1 a { height: 28px;}
    header { height: 80px;}
    #mob_top { height: 80px;}
    .mob_menu nav ul { padding: unset; justify-content: space-around;}

    #introduce .int_bg { padding-top: 88%; background-image: url(/images/character/top_main_v2_m.jpg);}
    #introduce .int_content.top_c { padding-bottom: 50px;}
    #introduce .int_content.bottom_c { margin: 50px 0;}
    #introduce .int_content dl dd h2 { font-size: 20px;}
    #introduce .int_content dl dd h2 strong { font-size: 29px;}
    #introduce .int_content dl dd span { font-size: 16px; word-break: keep-all;}
    #introduce .int_content dl dd em { font-size: 16px;}

    #together .together_inner { padding: 0 6%; margin: 70px 0;}
    #together .together_inner:first-child { margin-top:0; }
    #together { padding: 50px 0 0;}
    h3.together { position:relative; line-height: 30px; background-position-y: top; padding-left: 40px !important; margin-bottom: 70px;}
    #together h3 span { position: absolute; left:50%; bottom:-110%; width:100vw; transform:translateX(-50%);  font-size: 18px;}
    .together_inner .top_p { font-size: 24px; padding: 60px 0;}
    #together h4 { font-size: 22px;}
    #together h4 em { font-size: 42px;}
    #together .together_inner dl {margin-bottom: 60px;}
    #together .together_inner dl dd p { font-size: 19px; line-height: 1.4;}
    #together .message p { font-size: 18px;}
    
    #together .together_inner dl dd p span:before { content: "\A"; white-space:pre; }
    #together .message strong { font-size: 30px;}
    #together .message strong em { font-size: 48px;}
    #together .line { margin: 30px 0;}

    #htu { padding: 30px 0 60px;}
    h3.htu { margin-bottom: 40px;}
    #htu .htu_inner { padding: 0 3%;}
    #htu .d3_box dl { padding: 44px 3% 100px;}
    #htu dt { padding-left: 35px; font-size: 18px;}
    #htu dt::before { width: 23px; }

    #gallery, #goods { padding: 30px 0;}
    h3.gallery, h3.goods { margin-bottom: 40px;}
    #gallery .gallery_inner, #goods .goods_inner { padding: 0 3%;}
    #gallery .gallery_inner .swiper_slide_inner, #goods .goods_inner .swiper_slide_inner { width: 100%;}
    #gallery .gallery_inner .swiper_slide_inner .swiper.mySwiper2.big_img,
    #goods .goods_inner .swiper_slide_inner .swiper.mySwiper4.big_img { height: 386px;}
    /*#gallery .gallery_inner .swiper_slide_inner .swiper.mySwiper2.big_img .swiper-slide img,
    #goods .goods_inner .swiper_slide_inner .swiper.mySwiper4.big_img .swiper-slide img { width: 100%; height: 100%; object-fit: cover;}*/
    .swiper_slide_inner .pagination { font-size:14px; }
}
@media screen and (max-width: 640px) {
    .mob_menu { padding: 13px 5px;}
}