@charset "utf-8";
/**
* A-Marketing Cascading Style Sheets
* File Name : layout.css
* Description : layout 반응형 스타일시트
* Author : Web business Team / White
* Email : amt_web@gnmpm.com
* Date : 2019.03.29
* Update : 2021.11.22
* Copyright(c) DND. All Rights Reserved.
*/
/* latest version 210907 */

/* ************************************** *
 * keyframes
 * ************************************** */
@-webkit-keyframes scrollerAllow {
	0% { margin: 5px 0 7px;}
	75% { margin: 12px 0 0;}
	100% { margin: 5px 0 7px;}
}
@keyframes scrollerAllow {
	0% { margin: 5px 0 7px;}
	75% { margin: 12px 0 0;}
	100% { margin: 5px 0 7px;}
}
@-webkit-keyframes fade-down {
    0% { opacity: 0; margin-top: -40px;}
    100% { opacity: 1; margin-top: 0;}
}
@keyframes fade-down {
	0% { opacity: 0; margin-top: -40px;}
    100% { opacity: 1; margin-top: 0;}
}





/* ************************************** *
 * in-wrap 컨텐츠 가로사이즈 조정
 * ************************************** */
.in-wrap { width: 1400px; margin: 0 auto;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	.in-wrap { width: 90%;}
}
/* ////////////////////////////////////////////////// notebook */
@media all and (min-width:991px) and (max-width:1400px) {
	.in-wrap { width: 94%;}
}





/* ************************************** *
 * common style
 * ************************************** */
::selection { background: rgba(26,115,232,.1);}
/* mobile컨텐츠 숨김 */
.con-m { display: none;}
/* pc에서 br태그 효과 적용 */
.br-pc { display: block;}
.img-max { max-width: 100%;}
.img-ct-max { display: block; max-width: 100%; margin: 0 auto;}
/* 상하좌우 center위치잡기 */
.responsive { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
/* 상하 center위치잡기 */
.responsive-h { position: absolute; top: 50%; left: 0; width: 100%; transform: translate(0,-50%); -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); text-align: center;}
.bg-body { display: none; z-index: 500; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7);}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* pc컨텐츠 숨김 */
	.con-pc { display: none !important;}
	/* mobile컨텐츠 보임 */
	.con-m { display: block !important;}
	/* pc에서 br태그 효과 해제 */
	.br-pc { display: inline-block;}
	/* mobile에서 br태그 효과 적용 */
    .br-m { display: block;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* mobile에서 font size 자동 축소 */
	html { font-size: 57% !important;}
}





/* ************************************** *
 * header layout
 * ************************************** */
/* header */
#header { z-index: 30; position: fixed; top: 0; left: 0; width: 100%; height: 90px; background: #fff; box-shadow: 0 5px 10px rgba(0,0,0,.2); -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -ms-box-shadow: 0 5px 10px rgba(0,0,0,.2);}
#header .header-in { position: relative; width: 95%; margin: 0 auto;}
#header h1 { padding-top: 18px; display: inline-block;}
#header h1 img { width: 240px;}
/* gnb : 글로벌네비게이션 메뉴 */
#gnb .language { z-index: 999; position: absolute; top: 40px; left: 65px;}
#gnb .language li { float: left; padding-right: 15px;}
#gnb .language li a { display: block; font-size: 1.3rem; color: #fff; text-transform: uppercase; line-height: 28px; box-sizing: border-box;}
#gnb .language li.on a { color: #fff; font-weight: 700; border-bottom: solid 1px #fff;}
#gnb .toplink { z-index: 999; position: absolute; top: 40px; right: 65px;}
#gnb .toplink a { display: block; font-size: 1.5rem; color: #fff; line-height: 30px;}
#gnb .toplink a:hover { color: #65e5ff;}
/* lnb : 네비게이션 메뉴 */
#lnb { z-index: 31; position: absolute; top: 0; right: 0;}
.lnb-navi { margin-right: 200px;}
.lnb-navi > li { position: relative; float: left;}
.lnb-navi > li > button { display: block; margin: 0 25px; line-height: 86px; border-bottom: solid 4px transparent; font-size: 1.7rem; color: #222; letter-spacing: -.03em;}
.lnb-navi > li > button:hover,
.lnb-navi > li.focus > button,
.lnb-navi > li.on > button { border-bottom: solid 4px #00abcd; font-weight: bold; color: #00abcd;}

/* gnb : 글로벌네비게이션 메뉴 */
#gnb-menu { position: absolute; top: 29px; right: 0;}
#gnb-menu li { float: left;}
#gnb-menu li a { display: block; width: 67px; border: solid 2px #00abcd; font-size: 1.2rem; line-height: 28px; box-sizing: border-box; color: #00abcd; text-align: center; text-transform: uppercase; letter-spacing: -0.03em;}
#gnb-menu li:nth-of-type(1) a { border-radius: 3px 0 0 3px;}
#gnb-menu li:nth-of-type(2) a { border-radius: 0 3px 3px 0;}
#gnb-menu li.on a { background: #00abcd; color: #fff; font-weight: 700;}


/* 컨텐츠영역 */
#container { z-index: 1; width: 100%; overflow: hidden; box-sizing: border-box;}
#content { width: 1400px; margin: 0 auto; padding-top: 90px;}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1400px) {
	/* 컨텐츠영역 */
    #content { width: 95%;}
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* header */
	#header .header-in { text-align: left;}
	#header h1 { padding-top: 10px;}
	/* lnb : 네비게이션 메뉴 */
	#lnb { position: static;}
	.lnb-navi { display: table; margin: 0 auto;}
	.lnb-navi > li > button { margin: 0 15px; line-height: 46px;}
	/* gnb : 글로벌네비게이션 메뉴 */
	#gnb-menu { top: 15px;}
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (min-width:640px) and (max-width:990px) {
	/* header */
	#header { height: 110px;}
	#header h1 img { height: 50px;}
	/* gnb : 글로벌네비게이션 메뉴 */
	#gnb-menu { top: 20px;}
	/* 컨텐츠영역 */
    #content { padding-top: 110px;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* header — 로고가 absolute 언어 버튼(Korean/English) 영역을 침범하지 않도록 폭 확보 (2026-07-16 겹침 보정) */
	#header { height: 100px;}
	#header h1 { display: block; margin-right: 145px;}
	#header h1 img { height: auto; max-height: 40px; max-width: 100%;}
	/* gnb : 글로벌네비게이션 메뉴 */
	#gnb .language { top: 20px; left: 35px;}
	#gnb .language li { padding-right: 10px;}
	#gnb .toplink { top: 65px; right: 35px;}
	/* lnb : 네비게이션 메뉴 */
	#lnb { margin-top: 10px;}
	.lnb-navi > li > button { margin: 0 10px; line-height: 38px; border-bottom: solid 2px transparent; font-size: 1.4rem;}
	.lnb-navi > li > button:hover,
	.lnb-navi > li.focus > button,
	.lnb-navi > li.on > button { border-bottom: solid 2px #00abcd;}
}





/* ************************************** *
 * main layout
 * ************************************** */
/* intro */
.intro { z-index: 99; position: relative; width: 100%; height: 100vh !important; padding: 0 !important; background: url('image/visual.jpg') no-repeat center fixed; -webkit-background-size: cover; -ms-background-size: cover; background-size: cover;}
.intro .responsive-h { z-index: 999; left: 10%; width: 80%; text-align: center;}
.intro .txt { position: relative; display: inline-block; animation-name: fade-down; animation-duration: 2s; -webkit-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out;}
.intro .txt p { color: #fff; line-height: 1.3em;}
.intro .txt p:nth-of-type(1) { font-size: 3.5rem; font-weight: bold;}
.intro .txt p:nth-of-type(2) { font-size: 7.6rem; font-weight: bold;}
.intro .txt p:nth-of-type(3) { padding: 10px 0; font-size: 3rem; font-family: 'Poppins', sans-serif !important;}
.intro .txt p:nth-of-type(4) { padding-bottom: 40px; font-size: 1.8rem; line-height: 1.6em;}
/* .intro .txt p:nth-of-type(5) { position: absolute; top: 35px; left: 0; width: 100%; font-size: 5.7rem; font-family: 'Allison', cursive !important; color: #b0e1fa;} */
.intro .square { z-index: 1; position: absolute; width: 100%; height: 100%; box-sizing: border-box; border: solid 1px #fff; border-bottom: 0; opacity: .5;}
.intro .square1 { top: 30px; left: 45px; width: calc(100% - 90px); height: calc(100% - 30px);}
.intro .square2 { top: 80px; left: 60px; width: calc(100% - 90px); height: calc(100% - 80px);}
.intro .square3 { top: 95px; left: 30px; width: calc(100% - 90px); height: calc(100% - 95px);}
.intro .btn-scroll { z-index: 999; position: absolute; bottom: 50px; left: 50%; transform: translate(-50%,0); -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0);}
.intro .btn-scroll img { -webkit-animation: scrollerAllow ease-in-out 1.5s infinite; -ms-animation: scrollerAllow ease-in-out 1.5s infinite; animation: scrollerAllow ease-in-out 1.5s infinite;}
.intro .btn-scroll button { padding-bottom: 15px; background: url('image/bg-arr-scrolldown.png') no-repeat center bottom; width: 109px; font-size: 1.4rem; color: #fff; text-align: center;}
/* 수상작내용 */
.section { padding: 100px 0 50px;}
.tit { text-align: center;}
.tit h2 { margin-bottom: 20px; font-size: 4rem; font-weight: bold; color: #111; line-height: 1.25em; letter-spacing: -.05em;}
.tit p { display: inline-block; padding: 7px 20px; border: 1px solid #bababa; border-radius: 30px; font-size: 1.6rem;}
.tit p.cc-preview-note { display: table; margin: 12px auto 0; border-color: #e0a800; background: #fff8e1; color: #8a6100;}
.p-tit { display: inline-block; margin-bottom: 10px; font-size: 2.5rem; font-weight: bold; color: #111; text-align: center; border-bottom: solid 2px #111;}
.p-tit span { font-size: 1.8rem; font-weight: normal;}
.award-list { max-width: 1400px; width: 94%; margin: 0 auto; padding: 50px 0; border-top: dotted 2px #ddd;}
.award-list.grand { border-top: 0;}
.award-list.grand li { box-sizing: border-box; width: 30.33%; margin: 1.5%; border: solid 7px #0089bc;}
.award-list.grand ul,
.award-list.gold ul,
.award-list.silver ul,
.award-list.bronze ul { justify-content: center;}
.award-list li { position: relative; float: left; width: 22%; margin: 1.5%; background: #ebebf3;}
.award-list li a { display: block;}
.award-list li .mark { z-index: 20; position: absolute; left: 0; top: 0; min-width: 54px; padding: 10px; border-radius: 0 0 20px 0; font-size: 14px; color: #fff; line-height: 1.4em; text-align: center;}
.award-list li .mark.grand { background: #0089bc;}
.award-list li .mark.gold { background: #e1a722;}
.award-list li .mark.silver { background: #9b9b9b;}
.award-list li .mark.bronze { background: #c59a64;}
.award-list li .mark.fine { background: #ddd; color: #222;}
.award-list li .img-box { overflow: hidden;}
.award-list li .img-box i { display: block; width: 100%; height: 0; padding-bottom: 75%; transform: scale(1,1); transition: all 0.3s ease-out 0s;}
.award-list li a:hover .img-box i { transform: scale(1.1,1.1);}
.award-list li .txt-box { padding: 20px; text-align: center;}
.award-list li .txt-box p { line-height: 1.3em;}
.award-list li .txt-box p:nth-of-type(1) { font-weight: bold; font-size: 15px; color: #333;}
.award-list li .txt-box p:nth-of-type(2) { padding: 15px 0 5px; font-size: 14px; color: #777;}
.award-list li .txt-box p:nth-of-type(3) { font-size: 15px; color: #444;}
.bg-body .layer-in { text-align: center;}
.bg-body .layer-in img { max-width: 800px; max-height: 750px;}
.bg-body .layer-in a { z-index: 99;}
.bg-body .btn-close { z-index: 99; position: absolute; left: 50%; top: 10%; transform: translate(-50%,0);}
/* ////////////////////////////////////////////////// notebook */
@media all and (min-width:1400px) {
	.award-list.bronze li:nth-of-type(4) { margin-left: 1.6%;}
}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1400px) {
	/* 수상작내용 */
	.award-list.grand li { width: 46%;}
	.award-list li { width: 29.33%; margin: 2%;}
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* intro */
	.intro { background: url('image/visual-m.jpg') no-repeat center;}
	/* 수상작내용 */
	.award-list.grand li { width: 60%;}
	.award-list.fine ul { justify-content: center;}
	.award-list li { width: 45%; margin: 2.5%;}
	.bg-body .layer-in img { max-width: 550px; max-height: 600px;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* intro */
	.intro .txt p:nth-of-type(1) { font-size: 2.2rem;}
	.intro .txt p:nth-of-type(2) { font-size: 5rem;}
	.intro .txt p:nth-of-type(3) { font-size: 1.9rem;}
	.intro .txt p:nth-of-type(4) { padding-bottom: 25px; font-size: 1.4rem;}
	/* .intro .txt p:nth-of-type(5) { top: 21px; font-size: 3.7rem;} */
	.intro .square1 { top: 15px; left: 20px; width: calc(100% - 40px); height: calc(100% - 15px);}
	.intro .square2 { top: 60px; left: 30px; width: calc(100% - 40px); height: calc(100% - 60px);}
	.intro .square3 { top: 100px; left: 10px; width: calc(100% - 40px); height: calc(100% - 100px);}
	.intro .btn-scroll { bottom: 30px;}
	/* 수상작내용 */
	.section { padding: 60px 0 30px;}
	.tit h2 { font-size: 2.7rem;}
	.tit p { padding: 7px 20px; border: 1px solid #bababa; border-radius: 30px; font-size: 1.6rem;}
	.p-tit { font-size: 2.2rem;}
	.p-tit span { font-size: 1.4rem;}
	.award-list { padding: 35px 0;}
	.award-list.grand li { width: 67%; border: solid 4px #0089bc;}
	.award-list li { width: 47%; margin: 1.5%;}
	.award-list li .mark { min-width: 38px; padding: 7px; border-radius: 0 0 15px 0; font-size: 12px;}
	.award-list li .txt-box { padding: 13px;}
	.award-list li .txt-box p:nth-of-type(1) { font-size: 13px;}
	.award-list li .txt-box p:nth-of-type(2) { padding: 10px 0 3px; font-size: 12px;}
	.award-list li .txt-box p:nth-of-type(3) { font-size: 13px;}
	.bg-body .layer-in img { max-width: 300px; max-height: 350px;}
}





/* ************************************** *
 * footer layout
 * ************************************** */
/* footer */
#footer { z-index: 50; position: relative; width: 100%; background: #fafafa;}
#footer .footer-in { text-align: center; padding: 40px 0;}
#footer .foo-sns { display: table; margin: 0 auto; padding-bottom: 20px;}
#footer .foo-sns li { float: left; margin: 0 5px;}
#footer .foo-sns li a { display: block;}
#footer address { padding-bottom: 10px; font-size: 1.4rem; color: #555; line-height: 1.6em;}
#footer address span { margin-right: 20px;}
#footer .copyright small { font-size: 1.4rem; color: #555;}
#footer .btn-top { z-index: 50; position: fixed; bottom: 50px; right: 2.5%; display: none;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* footer */
	#footer .btn-top { bottom: 40px; right: 40px;}
	#footer .btn-top img { width: 60px;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* footer */
	#footer .footer-in { padding: 30px 0;}
	#footer .foo-sns { padding-bottom: 13px;}
	#footer .foo-sns li { margin: 0 3px;}
	#footer address { padding-bottom: 7px; font-size: 1.3rem;}
	#footer address span { margin-right: 13px;}
	#footer .copyright small { font-size: 1.3rem;}
	#footer .btn-top { bottom: 20px; right: 20px;}
	#footer .btn-top img { width: 40px;}
}





/* ************************************** *
 * 청소년무예만화 온라인전시회 (2026-10-12) — 2021photogallery 형식 위에 덧씌우는 규칙
 * ************************************** */
/* 로고: 기관 마크 이미지 + 전시회명 텍스트 (언어 선택 버튼 없음) */
#header h1 a { display: flex; align-items: center;}
#header h1 img { width: auto; height: 54px;}
#header h1 .logo-txt { margin-left: 12px; padding-left: 12px; border-left: 1px solid #ddd; font-size: 1.8rem; font-weight: 700; line-height: 1.3em; color: #222; letter-spacing: -.04em; white-space: nowrap;}
.lnb-navi { margin-right: 0;}
/* 카드 썸네일: 원본 상단 기준 4:3 (만화는 첫 칸이 위에 있다) */
.award-list li .img-box { position: relative; aspect-ratio: 4 / 3; background: #f4f4f8;}
.award-list li .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.3s ease-out 0s;}
.award-list li a:hover .img-box img { transform: scale(1.06);}
.award-list li .cc-pages-badge { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 12px; background: rgba(0,0,0,.6); font-size: 12px; color: #fff;}
.award-list li .cc-pending .img-box { display: flex; align-items: center; justify-content: center;}
.award-list li .cc-pending-txt { font-size: 14px; color: #999;}
.award-list li .mark.bronze { background: #c59a64;}
/* 크게보기 캡션 */
.cc-cap { padding: 4px 0; text-align: center;}
.cc-cap p { margin: 0; line-height: 1.5em;}
.cc-cap-grade { font-size: 14px; color: #555;}
.cc-cap-title { padding-top: 2px; font-size: 17px; font-weight: 700; color: #222;}
.cc-cap-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding-top: 10px;}
.cc-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1px solid #00abcd; border-radius: 30px; background: #fff; font-size: 13px; color: #00abcd; cursor: pointer;}
.cc-btn:hover { background: #00abcd; color: #fff;}
/* 여러 장 작품: 한 슬라이드 안에서 세로로 이어 보기 + 확대(그림 클릭 · 안내 줄 단추) */
.cc-pages { background: #fff;}
/* 슬라이드 안쪽 여백(GLightbox 20px)을 없앤다 — 위에 붙는 안내 줄 위로 그림이 비치지 않게, 그림은 슬라이드 폭 가득 */
.gslide-inline .ginlined-content:has(> .cc-pages) { padding: 0;}
.cc-pages-hint { position: sticky; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 6px 10px; background: rgba(0,171,205,.92); font-size: 13px; color: #fff; text-align: center;}
.cc-zoom { display: inline-flex; align-items: center; gap: 4px;}
.cc-zoom button { min-width: 30px; height: 26px; padding: 0 8px; border: 1px solid rgba(255,255,255,.8); border-radius: 13px; background: transparent; font-size: 13px; line-height: 1; color: #fff; cursor: pointer;}
.cc-zoom button:hover:not(:disabled) { background: rgba(255,255,255,.2);}
.cc-zoom button:disabled { opacity: .4; cursor: default;}
.cc-zoom-val { min-width: 42px; font-weight: 700;}
.cc-zoom-area { cursor: zoom-in;}
.cc-zoom-area.zoomed { cursor: grab;}
.cc-zoom-area.panning { cursor: grabbing;}
.cc-zoom-area img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none;}
/* 확대 중: 그림이 슬라이드보다 넓어진다 — 안내 줄·캡션은 보이는 폭(--cc-fit)으로 왼쪽에 붙여 둔다 */
.cc-pages.is-zoomed { width: max-content; min-width: 100%;}
.cc-pages.is-zoomed .cc-pages-hint,
.cc-pages.is-zoomed .cc-cap { position: sticky; left: 0; box-sizing: border-box; width: var(--cc-fit);}
.cc-pages .cc-cap { padding: 16px 10px 20px;}
/* 한 장짜리(PC): 100% 는 작품 전체가 보이는 폭 — 가운데 둔다 */
.cc-single .cc-zoom-area { margin: 0 auto;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (min-width:640px) and (max-width:990px) {
	#header h1 img { height: 46px;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	#header h1 { margin-right: 0;}
	#header h1 img { max-height: 36px;}
	#header h1 .logo-txt { margin-left: 8px; padding-left: 8px; font-size: 1.5rem;}
	.cc-cap-title { font-size: 15px;}
}
/* GLightbox 모바일: 캡션이 이미지 위 어두운 그라데이션에 겹친다 — 흰 글씨로 (기본 `.gslide-desc *{color:inherit}` 를 이긴다) */
.glightbox-mobile .glightbox-container .gslide-desc .cc-cap p { text-shadow: 0 1px 3px rgba(0,0,0,.9);}
.glightbox-mobile .glightbox-container .gslide-desc .cc-cap-grade { color: #ddd;}
.glightbox-mobile .glightbox-container .gslide-desc .cc-cap-title { color: #fff;}
.glightbox-mobile .glightbox-container .gslide-desc .cc-btn { border-color: #fff; background: rgba(0,0,0,.4); color: #fff;}