@charset "UTF-8";
/*
 * 금융사 정보보호 책임자 초청 조찬 세미나 (eDM)
 * Figma : aton_조찬세미나_dm (node 1:18) / 360 x 3132.5 — 모바일 단일 시안.
 *
 * 데스크톱 시안은 없다. "이 화면을 반응형으로 만든다"는 요청에 따라
 *   ~ 359px : --u 비례 축소로 좁은 화면에서도 줄바꿈 없이 보이게 한다.
 *   360px ~ : 시안 그대로 1:1 (calc(N * var(--u)) 가 시안 px 값과 일치).
 *   600px ~ : 본문 폭을 600px 로 고정하고 가운데 정렬한다. 배경색이 있는
 *             영역(히어로/프로그램/CTA)은 화면 끝까지 채우고, 내용만 중앙에 모인다.
 */

:root {
	--u:min(1px, 100vw / 360);
	--content-max:600px;
	--c-hero:#152D7A;      /* 히어로 배경 */
	--c-navy:#162c6f;      /* 프로그램 / CTA 배경 */
	--c-mint:#67edcc;      /* 포인트(민트) */
	--c-blue:#0c5abf;      /* 강조 텍스트 / 주최·파트너사 헤딩 */
	--c-time:#cfcfcf;      /* 프로그램 시각 */
	--c-body:#353535;      /* 본문 회색 */
	/* 시안 제목은 Paperlogy 7 Bold. 사내 웹폰트 등록 시 자동 반영되고, 미등록 상태에서는 Pretendard 로 대체된다. */
	--f-title:'Paperlogy','Pretendard','Noto Sans KR',sans-serif;
	--f-base:'Pretendard','Noto Sans KR',sans-serif;
}

/*
 * reset.css 의 `html,body{height:100%}` + `html{overflow-y:auto}` 조합은
 * body 가 정확히 뷰포트 높이라고 보고해 실제 컨텐츠가 넘쳐도 페이지 자체가
 * 스크롤되지 않는 문제를 일으킨다. 이 페이지는 뷰포트보다 훨씬 길므로 되돌린다.
 */
html {height:auto; overflow-y:visible; background-color:#fff;}
body {height:auto; overflow-x:hidden; background-color:#fff; color:#000; font-family:var(--f-base); word-break:keep-all;}
img {max-width:100%;}
em {font-style:normal;}


/* ===================================================================
 * 히어로
 * =================================================================== */
.hero {position:relative; overflow:hidden; background-color:var(--c-hero);}
.hero__visual {position:absolute; inset:0; z-index:0; pointer-events:none; background:url('/img/seminar2026/img_hero-e683c6e1e1a0fd9d0ce5b356ab3daf03.png') no-repeat center center / cover;}
/* .hero__photo {display:block; position:absolute; top:0; left:0; right:0; inset:0; height:100%; opacity:0.42; margin:0 auto;} */
@media screen and (min-width:720px) {
	.hero__visual {position:absolute; inset:0; z-index:0; pointer-events:none; background:url('/img/seminar2026/img_hero-1232f38cdff0a44c69f00277d53b9a9d.jpg') no-repeat center top / cover; opacity:0.5;}
}
/*
 * 시안은 사진 위·아래에 배경색과 같은 그라데이션을 겹쳐 가운데 띠만 보이게 한다.
 * 컨테이너 높이가 화면마다 달라지므로 %% 기준 그라데이션으로 같은 비례를 유지한다.
 */
.hero__fade {display:block; position:absolute; inset:0; background-image:linear-gradient(180deg, var(--c-hero) 0%, rgba(21,45,122,0) 32%, rgba(21,45,122,0) 64%, var(--c-hero) 92%);}

.hero__in {position:relative; z-index:1; display:flex; flex-direction:column; gap:calc(46 * var(--u)) 0; width:100%; max-width:var(--content-max); margin:0 auto; padding:max(28px, calc(40 * var(--u))) max(16px, calc(16 * var(--u)));}
.hero__logo {width:max(52px, calc(60 * var(--u))); line-height:0;}
.hero__logo img {display:block; width:100%; height:auto;}

.title {display:flex; flex-direction:column; gap:max(16px, calc(24 * var(--u))) 0;}
.title__eyebrow {display:inline-block; padding-bottom:max(1px, calc(2 * var(--u))); border-bottom:0.5px solid #fff; color:#fff; font-size:max(15px, calc(18 * var(--u))); line-height:1.4444; font-weight:600;}
.title__main {display:flex; flex-direction:column; gap:max(6px, calc(8 * var(--u))) 0;}
.title__lead {color:var(--c-mint); font-family:var(--f-title); font-size:max(19px, calc(26 * var(--u))); line-height:1.2; font-weight:800; letter-spacing:-0.01em;}
.title__head {color:#fff; font-family:var(--f-title); font-size:max(30px, calc(42 * var(--u))); line-height:1.1429; font-weight:800;}

.hero__quote {padding-left:max(8px, calc(10 * var(--u))); border-left:3px solid rgba(255,255,255,0.2); color:#fff; font-size:max(15px, calc(18 * var(--u))); line-height:1.4444; font-weight:600;}

.info {display:flex; flex-direction:column; gap:max(3px, calc(4 * var(--u))) 0;}
.info__row {display:flex; align-items:flex-start; gap:0 max(5px, calc(7 * var(--u)));}
.info__label {flex:none; width:max(16px, calc(19 * var(--u))); height:max(16px, calc(19 * var(--u))); margin-top:max(3px, calc(3.5 * var(--u))); background-repeat:no-repeat; background-position:center; background-size:contain;}
.info__label--date {background-image:url('/img/seminar2026/ico_calendar-0c7accabcba697a8b77c9e3ec68403e2.svg');}
.info__label--place {height:max(19px, calc(22 * var(--u))); margin-top:0; background-image:url('/img/seminar2026/ico_location-138b8cdee59cdf16ee952aebdc0a56f1.svg');}
.info__label--target {background-image:url('/img/seminar2026/ico_person-e0f9355d1595d5669ae60fcd26f32a21.svg');}
.info__value {flex:1 1 0; min-width:0; color:#fff; font-size:max(14px, calc(17 * var(--u))); line-height:1.5294; font-weight:600;}
.info__value--place {line-height:1.1176;}
.info__value--place span {font-size:0.8235em; line-height:1.357;}

.btn {display:flex; align-items:center; justify-content:center; width:100%; padding:max(10px, calc(14 * var(--u))) max(9px, calc(12 * var(--u))); border-radius:max(9px, calc(12 * var(--u))); background-color:var(--c-mint); color:#000; font-size:max(15px, calc(18 * var(--u))); line-height:1.4444; font-weight:700; text-align:center; text-decoration:none; transition:background-color 0.2s ease-in-out;}
.btn:hover,
.btn:focus-visible {background-color:#4bd6b3;}
/* // 히어로 */


/* ===================================================================
 * 소개 (망분리 / 아톤)
 * =================================================================== */
.intro {display:flex; flex-direction:column; gap:max(40px, calc(56 * var(--u))) 0; width:100%; max-width:var(--content-max); margin:0 auto; padding:max(32px, calc(50 * var(--u))) max(16px, calc(16 * var(--u)));}
.intro__block {display:flex; flex-direction:column; gap:max(16px, calc(24 * var(--u))) 0;}
/* 배경 레이어는 앞에 쓴 것이 위로 그려지므로, 아이콘(svg)을 그라데이션보다 먼저 적는다. */
.intro__icon {display:block; flex:none; width:max(38px, calc(50 * var(--u))); height:max(38px, calc(50 * var(--u))); border:1px solid #d0ebff; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:max(23px, calc(30 * var(--u))), 100% 100%;}
.intro__icon--vpn {background-image:url(/img/seminar2026/ico_vpnlock-d359c595b8c6430cfe62a286bbd57e0b.svg), linear-gradient(180deg, #d0ebff 0%, #e7f5ff 100%);}
.intro__icon--shield {background-image:url(/img/seminar2026/ico_shield-0752d3a2b0b9b24dc2d9652a912d488c.svg), linear-gradient(180deg, #d0ebff 0%, #e7f5ff 100%);}
.intro__head {color:#000; font-size:max(18px, calc(24 * var(--u))); line-height:1.3333; font-weight:600;}
.intro__head em {color:var(--c-blue);}
.intro__body {display:flex; flex-direction:column; gap:max(12px, calc(16 * var(--u))) 0;}
.intro__body p {color:var(--c-body); font-size:max(15px, calc(17 * var(--u))); line-height:1.4706; font-weight:400;}
/* // 소개 */


/* ===================================================================
 * 주최 / 파트너사
 * =================================================================== */
.orgs {display:flex; flex-direction:column; align-items:center; gap:max(40px, calc(60 * var(--u))) 0; width:100%; max-width:var(--content-max); margin:0 auto; padding:max(14px, calc(20 * var(--u))) max(16px, calc(16 * var(--u))) max(60px, calc(90 * var(--u)));}
.orgs__col {display:flex; flex-direction:column; align-items:center; gap:max(16px, calc(24 * var(--u))) 0; width:100%; max-width:calc(328 * var(--u)) /* 시안 내용 폭. 600px 구간에서는 아래 미디어쿼리로 확장 */;}
.orgs__tit {width:100%; padding:max(7px, calc(10 * var(--u))) 0; border-bottom:1px solid var(--c-blue); color:var(--c-blue); font-size:max(15px, calc(18 * var(--u))); line-height:1.4444; font-weight:700; text-align:center;}
.orgs__logos {display:flex; align-items:flex-start; justify-content:center; height:max(13px, calc(16 * var(--u))); line-height:0;}
.orgs__logos img {display:block; width:auto; max-width:none;}
.logo_aton {width:max(53px, calc(63 * var(--u))); height:max(13px, calc(16 * var(--u)));}
.partners {height:max(20px, calc(24 * var(--u))); gap:0 max(11px, calc(14 * var(--u)));}
.partners .logo_okta {width:max(62px, calc(74 * var(--u))); height:max(20px, calc(24 * var(--u))); margin-top:max(4px, calc(5 * var(--u)));}
.partners .logo_cloudflare {width:max(79px, calc(94 * var(--u))); height:max(27px, calc(32 * var(--u))); margin-top:calc(-1 * max(4px, calc(5 * var(--u))));}
.partners .logo_theori {width:max(65px, calc(78 * var(--u))); height:max(15px, calc(18 * var(--u))); margin-top:max(6px, calc(7 * var(--u)));}
.partners__dot {flex:none; width:4px; height:4px; margin-top:max(12px, calc(14 * var(--u))); border-radius:50%; background-color:#c9c9c9;}
/* // 주최 / 파트너사 */


/* ===================================================================
 * 프로그램
 * =================================================================== */
.program {background-color:var(--c-navy);}
.program__in {width:100%; max-width:var(--content-max); margin:0 auto; padding:max(50px, calc(70 * var(--u))) max(16px, calc(16 * var(--u))) max(28px, calc(40 * var(--u)));}
.program__tit {margin-bottom:max(14px, calc(20 * var(--u))); color:var(--c-mint); font-size:max(20px, calc(26 * var(--u))); line-height:1; font-weight:700;}

.timetable {border-top:1.5px solid var(--c-mint);}
.timetable__row {display:flex; flex-direction:column; gap:max(7px, calc(10 * var(--u))) 0; padding:max(9px, calc(12 * var(--u))) 0; border-bottom:0.5px solid rgba(255,255,255,0.3);}
.timetable__row:has(.timetable__speaker) {padding:max(10px, calc(14 * var(--u))) 0;}
.timetable__head {display:flex; align-items:center; justify-content:space-between; gap:0 8px;}
.badge {flex:none; padding:max(2px, calc(3 * var(--u))) max(4px, calc(5 * var(--u))); border:0.5px solid rgba(255,255,255,0.3); border-radius:max(5px, calc(6 * var(--u))); background-color:rgba(255,255,255,0.2); color:#fff; font-size:max(12px, calc(14 * var(--u))); line-height:normal; font-weight:600; white-space:nowrap;}
.timetable__time {flex:none; color:var(--c-time); font-size:max(12px, calc(14 * var(--u))); line-height:normal; font-weight:500; text-align:right; white-space:nowrap;}
/* subject/speaker 사이 간격(6px)은 이 안에서만 적용하고, row 의 gap(10px)은 head↔content 사이에만 걸리게 한다. */
.timetable__content {display:flex; flex-direction:column; gap:max(4px, calc(6 * var(--u))) 0;}
.timetable__subject {color:#fff; font-size:max(17px, calc(20 * var(--u))); line-height:1.4; font-weight:600;}
.timetable__speaker {color:var(--c-mint); font-size:max(14px, calc(16 * var(--u))); line-height:normal; font-weight:500;}
/* // 프로그램 */


/* ===================================================================
 * 참석 등록
 * =================================================================== */
.cta {background-color:var(--c-navy);}
.cta__in {display:flex; flex-direction:column; align-items:center; width:100%; max-width:var(--content-max); margin:0 auto; padding:max(14px, calc(20 * var(--u))) max(16px, calc(16 * var(--u))) max(42px, calc(60 * var(--u)));}
.cta__contact {display:flex; flex-direction:column; align-items:center; gap:max(4px, calc(6 * var(--u))) 0; text-align:center;}
.cta__contact strong {color:var(--c-mint); font-size:max(14px, calc(16 * var(--u))); line-height:1.4444; font-weight:700;}
.cta__contact span {color:#fff; font-size:max(14px, calc(16 * var(--u))); line-height:1.375;}
.cta__contact a {color:#fff; text-decoration:underline; text-underline-position:from-font; word-break:break-all;}
/* // 참석 등록 */


/* ===================================================================
 * 참석 등록 버튼 (화면 하단 고정)
 * 시안엔 히어로/하단 2곳에 버튼이 있으나 1개만 남기고, 스크롤과 무관하게
 * 항상 접근 가능하도록 position:fixed 로 화면 하단에 고정한다.
 * body 의 padding-bottom 이 이 바의 높이만큼 여백을 확보해 마지막 컨텐츠를 가리지 않는다.
 * =================================================================== */
.fixed-cta {position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; justify-content:center; padding:max(10px, calc(14 * var(--u))) max(16px, calc(16 * var(--u))) calc(max(10px, calc(14 * var(--u))) + env(safe-area-inset-bottom)); background-color:rgba(255,255,255,0.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid rgba(0,0,0,0.06); box-shadow:0 -4px 16px rgba(0,0,0,0.08);}
.fixed-cta .btn--cta {width:100%; max-width:var(--content-max); height:max(40px, calc(54 * var(--u)));}
/* // 참석 등록 버튼 */


@media screen and (max-width:359px) {
	/* 파트너사 로고 3종(310px)이 들어가지 않는 초소형 화면 */
	.partners {height:19px; gap:0 9px;}
	.partners .logo_okta {width:59px; height:19px; margin-top:4px;}
	.partners .logo_cloudflare {width:75px; height:26px; margin-top:-4px;}
	.partners .logo_theori {width:62px; height:14px; margin-top:5px;}
	.partners__dot {margin-top:11px;}
}


@media screen and (min-width:600px) {
	/* 600px 이상에서는 본문 폭을 시안 328px 보다 넓혀 여백을 준다 */
	.orgs__col {max-width:460px;}
}
.btn_link_wrap {position:fixed; bottom:40px; left:16px; right:16px; max-width:600px; margin:0 auto; height:54px; z-index:1;}
.btn_link {display:flex; justify-content:center; align-items: center; z-index: 10; width:100%; max-width:100%; height:54px; border-radius:15px; background-color:#67EDCC; color:#000; font-size:18px; font-weight:bold;}

.cta {padding-bottom:80px;}