@charset "utf-8";/* common */
* { margin: 0; padding: 0; outline: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-appearance: none; letter-spacing: -.5px; } 
ul { list-style-type: none } 
hr { display: none } 
img { border: none } 
a { text-decoration: none; color: inherit } 
a:hover { text-decoration: none } 
body, html { margin: 0; padding: 0px; width: 100%; height: 100%; min-width: 320px; } 
html { font-size: 0.625rem; line-height: 1; font-family: 'Do Hyeon', 'Pretendard', sans-serif; background: rgba(0, 0, 0, .8); margin: auto; } 
body { background: #1C1816; animation: fadein 3s; -moz-animation: fadein 3s; -webkit-animation: fadein 3s; -o-animation: fadein 3s; } 
button { background: inherit; border: none; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; cursor: pointer; -webkit-appearance: none; } 
.contain { width: 100%; height: 100%; } 
.mgb80 { margin-bottom: 80px; } 
.mgb70 { margin-bottom: 70px; } 
.mgb60 { margin-bottom: 60px; } 
.mgb50 { margin-bottom: 50px; } 
.mgb40 { margin-bottom: 40px; } 
.mgb30 { margin-bottom: 30px; } 
.mgb20 { margin-bottom: 20px; } 
.mgb10 { margin-bottom: 10px; } 
.mlm15 { margin-left: -15px; } 
.clb { clear: both; } 
.scrollLock { overflow: hidden; } 
.wrap { width: 100%; } 
audio { width: 100%; transition: all .3s ease-in; } 
input, textarea { -webkit-appearance: none; -webkit-border-radius: 0; } 
.active { background: #777 !important; } 
::-webkit-scrollbar { width: 7px; height: 7px } 
::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0 } 
::-webkit-scrollbar-track { background-color: #707070; border-radius: 0; box-shadow: inset 0 0 5px rgba(0, 0, 0, .2) } 

/* 메인 페이지 */
.mainTit { width: 100%; height:calc(var(--vh, 1vh) * 100); background: #000; position: relative; color: #fff; transition: all .3s ease-in; } 
.mainImg { width: 100%; height:calc(var(--vh, 1vh) * 100); filter: brightness(20%); z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; } 
.logo { position: absolute; top: 45px; left: 45px; z-index: 50; transition: all .3s ease-in; } 
.logo img { max-width: 95px; transition: all .3s ease-in; } 
.txtBox { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 50; } 
.mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 11rem; transition: all .3s ease-in; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 3rem; margin-top: 20px; transition: all .3s ease-in; } 
.mainCon { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding: 0px 150px; transition: all .3s ease-in; } 
.mainConTxt { text-align: center; padding-top: 150px; margin-bottom: 155px; transition: all .3s ease-in; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 10rem; transition: all .3s ease-in; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 3rem; transition: all .3s ease-in; }
.main1Img { width: 80px; position: absolute; top: 20px; left: 20px; transition: all .3s ease-in; } 
.main2Img { width: 220px; position: absolute; top: 20px; right: 20px; transition: all .3s ease-in; } 
.main3Img { width: 88px; position: absolute; bottom: 20px; left: 20px; transition: all .3s ease-in; } 
.main4Img { width: 86px; position: absolute; bottom: 20px; right: 20px; transition: all .3s ease-in; } 
.main5Img { width: 400px; position: absolute; bottom: 20px; left: 50%; transform: translate(-45%, 0); transition: all .3s ease-in; } 
.familyTit { width: 100%; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 20px; transition: all .3s ease-in; } 
.familyTit span { color: #2E6EB8; transition: all .3s ease-in; } 
.moveBtn { background: #000; width: 80px; height: 60px; line-height: 60px; text-align: center; float: right; transition: all .3s ease-in; } 
.moveBtn img { max-width: 45px; transition: all .3s ease-in; } 
.familyBox { cursor: pointer; transition: all .3s ease-in; } 
.family1 { width: 100%; margin-bottom: 200px; } 
.family1 .familyBox>img { max-width: 960px; } 
.family1 .familyBox { float: left; } 
.family1 .familyTit { max-width: 960px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 20px; margin-top: 0px; }
.family2 { width: 100%; margin-bottom: 200px; } 
.family2 .familyBox>img { max-width: 635px; float: right; } 
.family2 .familyBox { float: right; } 
.family2 .familyTit { max-width: 635px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 20px; }
.family3 { width: 100%; margin-bottom: 200px; } 
.family3 .familyBox>img { max-width: 635px; float: right; } 
.family3 .familyBox { float: left; } 
.family3 .familyTit { max-width: 635px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 20px; }
.family4 { width: 100%; margin-bottom: 200px; } 
.family4 .familyBox>img { max-width: 635px; float: right; } 
.family4 .familyBox { float: right; } 
.family4 .familyTit { max-width: 635px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 20px; }
.family5 { width: 100%; margin-bottom: 200px; } 
.family5 .familyBox>img { max-width: 635px; float: right; } 
.family5 .familyBox { float: left; } 
.family5 .familyTit { max-width: 635px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 20px; }
.family6 { width: 100%; padding-bottom: 300px; } 
.family6 .familyBox>img { max-width: 960px; float: right; } 
.family6 .familyBox { float: right; } 
.family6 .familyTit { max-width: 960px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 0px; } 

/* 스크롤 다운 */
.scroll-downs { position: absolute; bottom: 15%; left: 50%; transform: translate(0, -50%); margin: auto; width :34px; height: 55px; } 
.mousey { width: 3px; padding: 10px 15px; height: 35px; border: 2px solid #fff; border-radius: 25px; opacity: 0.75; box-sizing: content-box; } 
.scroller { width: 3px; height: 10px; border-radius: 25%; background-color: #fff; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite; } 

/* 푸터 */
.footer { height: 400px; background: #000; font-family: 'Pretendard', sans-serif; position: relative; text-align: left; transition: all .3s ease-in; } 
.pressLogo { position: absolute; top: 80px; left: 120px; transition: all .3s ease-in; } 
.pressLogo img { max-width: 200px; transition: all .3s ease-in; } 
.pressTxt { color: #888; font-size: 1.8rem; position: absolute; top: 158px; left: 120px; max-width: 100%; line-height: 1.25; transition: all .3s ease-in; } 
.copy { color: #fff; font-size: 1.8rem; position: absolute; bottom: 80px; left: 120px; transition: all .3s ease-in; } 
.hanLogo { position: absolute; bottom: 60px; right: 120px; transition: all .3s ease-in; } 
.hanLogo img { max-width: 165px; transition: all .3s ease-in; } 
.sns { position: absolute; top: 80px; right: 120px; transition: all .3s ease-in; } 
.sns a:nth-child(1) img { max-width: 40px; margin-right: 15px; transition: all .3s ease-in; } 
.sns a:nth-child(2) img { max-width: 20px; transition: all .3s ease-in; } 

/* 메뉴 */
.menuBar { background: #000; width: 100%; height: 85px; line-height: 85px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px; transition: all .3s ease-in; } 
.menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: inline-block; transition: all .3s ease-in; } 
.mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: none; transition: all .3s ease-in; } 
.menu { float: right; } 
.menu li { float: left; color: #fff; font-size: 2.4rem; margin-right: 25px; transition: all .3s ease-in; } 
.menu:after { content: ''; display: block; clear: both; } 

/* 메뉴 */
.mainMenuBar { background: #000; width: 100%; height: 85px; line-height: 85px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px; display: none; } 
.mainMenuBar .menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: inline-block; transition: all .3s ease-in; } 
.mainMenuBar .mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: none; transition: all .3s ease-in; } 
.mainMenuBar .menu { float: right; } 
.mainMenuBar .menu li { float: left; color: #fff; font-size: 2.4rem; margin-right: 25px; transition: all .3s ease-in; } 
.mainMenuBar .menu:after { content: ''; display: block; clear: both; } 

/* guestbook */
#guestbook { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding-bottom: 150px; padding-top: 85px; } 
#columns { max-width: 100%; margin: auto; column-width: 320px; column-gap: 10px; margin-bottom: 105px; transition: all .3s ease-in; } 
#columns figure { display: inline-block; border: 1px solid rgba(0, 0, 0, .2); font-family: 'Pretendard', sans-serif; border-radius: 10px; margin-bottom: 15px; padding: 30px 20px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .5); cursor: pointer; width: 100%; background: #eee; transition: all .3s ease-in; } 
#columns figure:nth-child(1) { display: inline-block; border: 1px solid rgba(0, 0, 0, .2); border-radius: 10px; margin-bottom: 15px; padding: 30px 20px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .5); cursor: pointer; width: 100%; background: #eee; transition: all .3s ease-in; } 
#columns figure:nth-child(2n) { background: #eee; color: #1a1a1a; transition: all .3s ease-in; } 
#columns figure:nth-child(3n) { background: #1a1a1a; color: #eee; transition: all .3s ease-in; } 
#columns figure:nth-child(3n) h3 { color: #eee; transition: all .3s ease-in; } 
#columns figure:nth-child(5n) { background: #1a1a1a; color: #eee; transition: all .3s ease-in; } 
#columns figure:nth-child(5n) h3 { color: #eee; transition: all .3s ease-in; } 
#columns figure:nth-child(9n) { background: #1a1a1a; color: #eee; transition: all .3s ease-in; } 
#columns figure:nth-child(9n) h3 { color: #eee; transition: all .3s ease-in; } 
#columns figure h3 { font-size: 2.6rem; font-weight: 900; font-family: 'Pretendard', sans-serif; transition: all .3s ease-in; } 
#columns figure img { width: 100%; transition: all .3s ease-in; } 
#columns figure figcaption { border-top: 0 solid rgba(0, 0, 0, .2); padding: 0; margin-top: 11px; font-size: 1.6rem; font-family: 'Pretendard', sans-serif; text-align: justify; font-weight: 300; line-height: 1.35; display: -webkit-box; word-wrap: break-word; white-space: unset; white-space: unset; -webkit-box-orient: vertical; overflow: hidden } 
#columns figure:nth-child(1) figcaption { font-size: 3rem; font-weight: 900; font-family: 'Pretendard', sans-serif; text-align: center; transition: all .3s ease-in; } 
.more-content { background: #000; font-size: 2.6rem; font-weight: 600; font-family: 'Do Hyeon', sans-serif; color: #fff; margin: auto; display: block; width: 320px; height: 65px; line-height: 65px; border-radius: 50px; transition: all .3s ease-in; } 
.more-content img { width: 20px; vertical-align: middle; transition: all .3s ease-in; } 
.guestbook-inner { width: 70%; margin: 150px auto 0px auto; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; transition: all .3s ease-in; } 
.gbBox { width: 100%; height:calc(var(--vh, 1vh) * 60); background: #000; position: relative; color: #fff; } 
.gbTit { width: 100%; height:calc(var(--vh, 1vh) * 60); filter: brightness(20%); z-index: 1; background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; } 

/* popup */
.popup-wrap { background-color: rgba(0, 0, 0, .3); justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; padding: 15px; z-index: 500; transition: all .3s ease-in; } 
.popup { width: 100%; max-width: 735px; min-height: 480px; border-radius: 10px; position: relative; overflow: hidden; background-color: #1a1a1a; box-shadow: 5px 10px 10px 1px rgba(0, 0, 0, .3); transition: all .3s ease-in; } 
.popup-body { width: 100%; background-color: #fff; transition: all .3s ease-in; } 
.body-content { width: 100%; padding: 30px; background: #1a1a1a } 
.body-titlebox { width: 100%; height: 40px; margin-bottom: 30px; font-family: 'Do Hyeon', sans-serif; font-weight: 400; text-align: left; font-size: 3rem; line-height: 1.35; color: #fff; letter-spacing: -1.3px } 
.body-contentbox { word-break: break-word; overflow-y: inherit; min-height: 350px; max-height: 450px; -webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: 1.4rem; font-weight: 300; line-height: 1.35; color: #888; -ms-overflow-style: none } 
.body-contentbox::-webkit-scrollbar { display: none } 
.body-contentbox>p { font-size: 1.8rem; color: #fff; font-family: 'Pretendard', sans-serif; letter-spacing: -1px; line-height: 1.5 } 
.pop-btn { display: inline; width: auto; height: auto; position: absolute; top: 15px; right: 15px; justify-content: center; align-items: center; color: #fff; cursor: pointer; font-size: 1.6rem; font-weight: 500 } 
.pop-btn::after { content: ''; clear: both } 
.pop-btn.close { border-right: 0 solid #eee } 
.pop-btn.close img { max-width: 30px; } 
.scrollLock { overflow: hidden } 
.input-box { position: relative; margin: 10px 0; margin-bottom: 20px } 
.input-box>input { background: 0 0; border: none; border-bottom: solid 3px #ccc; padding: 20px 0 5px 0; font-size: 1.8rem; width: 100%; max-width: 90%; color: #fff } 
.textarea { position: relative; margin: 10px 0 } 
.textLengthWrap { position: absolute; right: 10%; font-size: 1.4rem } 
.textLengthWrap p { display: inline-block } 
.textarea>textarea { background: 0 0; border: none; border-bottom: solid 3px #ccc; padding: 20px 0 5px 0; font-size: 1.8rem; width: 100%; max-width: 90%; color: #fff; margin-bottom: 40px } 
.form-btn { height: 36px; font-size: 1.6rem; background-color: #000; cursor: pointer; color: #fff; border-radius: 50px; margin-right: 10px; margin-top: 10px; margin-bottom: 30px; padding: 0 20px; float: right } 
.modify { display: block; background: #fff; color: #000; font-family: 'Do Hyeon', sans-serif; font-weight: 700 } 
.submit { display: block; background: #fff; color: #000; font-family: 'Do Hyeon', sans-serif; font-weight: 700 } 
.reset { display: block; background: #000; color: #fff; font-family: 'Do Hyeon', sans-serif; font-weight: 700 } 
.password { display: block } 
.username { display: block } 
.textform { display: block } 
input::placeholder { color: transparent } 
input:placeholder-shown+label { color: #aaa; font-size: 14pt; top: 15px } 
input:focus+label, label { color: #8aa1a1; font-size: 10pt; pointer-events: none; position: absolute; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease } 
input:focus, input:not(:placeholder-shown) { border-bottom: solid 3px #8aa1a1; outline: 0 } 
textarea { resize: none; display: block; overflow: hidden } 
textarea::placeholder { color: transparent } 
textarea:placeholder-shown+label { color: #aaa; font-size: 14pt; top: 15px } 
label, textarea:focus+label { color: #8aa1a1; font-size: 10pt; pointer-events: none; position: absolute; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease } 
textarea:focus, textarea:not(:placeholder-shown) { border-bottom: solid 3px #8aa1a1; outline: 0 } 
textarea.autosize { min-height: 30px; font-weight: 400 } 

/* 타임라인 */
#timeline { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; transition: all .3s ease-in; padding-top: 85px; } 
.tlBox { width: 100%; height:calc(var(--vh, 1vh) * 60); background: #000; position: relative; color: #fff; transition: all .3s ease-in; } 
.tlTit { width: 100%; height:calc(var(--vh, 1vh) * 60); filter: brightness(20%); z-index: 1; background: url(https://static.hani.com/family/img/timelineBg.jpg); background-size: cover; background-repeat: no-repeat; transition: all .3s ease-in; } 
.timeline { border-left: 4px solid #555; border-bottom-right-radius: 4px; border-top-right-radius: 4px; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 0.9); font-family: 'Pretendard', sans-serif; margin: 50px auto; letter-spacing: 0.5px; position: relative; line-height: 1.4rem; font-size: 1.03rem; padding: 100px; list-style: none; text-align: left; font-weight: 100; max-width: 650px; transition: all .3s ease-in; } 
.timeline h1, .timeline h2, .timeline h3 { font-family: 'Do Hyeon', sans-serif; font-weight: 100; font-size: 3.6rem; margin-bottom: 30px; line-height: 1.25; transition: all .3s ease-in; } 
.timeline p { font-family: 'Pretendard', sans-serif; font-size: 2.2rem; line-height: 1.45; text-align: justify; transition: all .3s ease-in; } 
.timeline .event { border-bottom: 3px dashed rgba(255, 255, 255, 0.3); padding-bottom: 25px; margin-bottom: 50px; position: relative; } 
.timeline .event:last-of-type { padding-bottom: 0; margin-bottom: 0; border: none; } 
.timeline .event:before,
.timeline .event:after { position: absolute; display: block; top: 3px; } 
.timeline .event:before {line-height: 1.15; left: -280px; color: rgba(0, 0, 0, 1); content: attr(data-date); text-align: right; font-weight: 100; font-size: 2.4rem; width: 160px; min-width: 160px; font-family: 'Do Hyeon', sans-serif; } 
.mevent { line-height: 1.15; display: none; font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; color: #fff; } 
.timeline .event:after { box-shadow: 0 0 0 4px #888; left: -107.85px; background: #313534; border-radius: 0%; height: 11px; width: 11px; content: ""; top: 10px; } 

/* 콘텐츠 */
#content { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; text-align: center; transition: all .3s ease-in; padding-top: 85px; } 
.conScript { max-width: 760px; margin: auto; text-align: left; transition: all .3s ease-in; } 
.conBox { width: 100%; height:calc(var(--vh, 1vh) * 60); background: #000; position: relative; color: #fff; transition: all .3s ease-in; } 
.conTit { width: 100%; height:calc(var(--vh, 1vh) * 60); filter: brightness(20%); z-index: 999; background: url(https://static.hani.com/family/img/mainBg1.png); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-position: 50% 15%; transition: all .3s ease-in; } 
.conTit2 { width: 100%; height:calc(var(--vh, 1vh) * 60); filter: brightness(20%); z-index: 999; background: url(https://static.hani.com/family/img/mainBg2.png); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-position: 50% 10%; transition: all .3s ease-in; } 
.conTit3 { width: 100%; height:calc(var(--vh, 1vh) * 60); filter: brightness(20%); z-index: 999; background: url(https://static.hani.com/family/img/mainBg3.png); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-position: 50% 10%; transition: all .3s ease-in; } 
.conTit4 { width: 100%; height:calc(var(--vh, 1vh) * 60); filter: brightness(20%); z-index: 999; background: url(https://static.hani.com/family/img/mainBg4.png); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-position: 50% 15%; transition: all .3s ease-in; } 
.conTit5 { width: 100%; height:calc(var(--vh, 1vh) * 60); filter: brightness(20%); z-index: 999; background: url(https://static.hani.com/family/img/mainBg5.png); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-position: 50% 15%; transition: all .3s ease-in; } 
.conTit6 { width: 100%; height:calc(var(--vh, 1vh) * 60); filter: brightness(20%); z-index: 999; background: url(https://static.hani.com/family/img/mainBg6.png); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-position: 50% 10%; transition: all .3s ease-in; } 
.vCircle { width: 100px; height: 100px; background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 200; } 
.vArrow { width: 0; height: 0; border-bottom: 20px solid transparent; border-top: 20px solid transparent; border-left: 34px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 5px; z-index: 200; } 
.bright { filter:brightness(1); } 
.name { font-family: 'Do Hyeon', sans-serif; font-size: 6rem; margin-top: 100px; margin-bottom: 15px; transition: all .3s ease-in; } 
.name span { font-family: 'Noto Sans KR', sans-serif; font-size: 3rem; font-weight: 800; margin-right: 5px; transition: all .3s ease-in; } 
.date { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; margin-bottom: 50px; transition: all .3s ease-in; } 
.script { font-family: 'Pretendard', sans-serif; font-size: 2rem; line-height: 1.45; text-align: justify; margin-bottom: 65px; transition: all .3s ease-in; } 
.letter { width: 100%; margin-top: 35px; transition: all .3s ease-in; box-shadow: 15px 15px 20px rgba(30,30,30,.05); } 
.cherishBtn { font-family: 'Do Hyeon', sans-serif; font-size: 4rem; background: #000; border-radius: 50px; width: 400px; height: 75px; line-height: 75px; color: #fff; text-align: center; cursor: pointer; margin: 35px auto 180px auto; transition: all .3s ease-in; } 
.cherishBtn img { max-width: 30px; vertical-align: middle; margin-right: 20px; transition: all .3s ease-in; } 
.cherishData { font-family: 'Do Hyeon', sans-serif; font-size: 6rem; text-align: center; margin-top: 100px; transition: all .3s ease-in; } 
.cherishData span { color: #2E6EB8; transition: all .3s ease-in; } 
.cherishData img { max-width: 45px; vertical-align: middle; margin-right: 15px; transition: all .3s ease-in; } 
.familyList { max-width: 960px; margin: auto; margin-bottom: 150px; transition: all .3s ease-in; } 
.familyList div { max-width: 300px; display: inline-block; margin-bottom: 30px; cursor: pointer; transition: all .3s ease-in; } 
.familyList div img { width: 100%; margin-bottom: 15px; transition: all .3s ease-in; } 
.familyList div p { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; transition: all .3s ease-in; } 
.familyList div p span { color: #2E6EB8; } 

@media all and (max-width: 1440px) and (min-width: 10px){
 .mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 9rem; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 2.8rem; margin-top: 20px; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 8rem; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 2.4rem; } 
 }

@media all and (max-width: 1280px) and (min-width: 10px){
 .mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 7rem; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 2.4rem; margin-top: 20px; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 6rem; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 2rem; } 
 }

@media all and (max-width: 1140px) and (min-width: 10px){

.mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 6rem; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 2.2rem; margin-top: 20px; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 5rem; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; } 
.mainCon { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding: 0px 150px; } 
.family1 { width: 100%; margin-bottom: 200px; } 
.family1 .familyBox>img { max-width: 635px; } 
.family1 .familyBox { float: left; } 
.family1 .familyTit { max-width: 635px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 20px; margin-top: 0px; } 
.family2 { width: 100%; margin-bottom: 200px; } 
.family2 .familyBox>img { max-width: 445px; float: right; } 
.family2 .familyBox { float: right; } 
.family2 .familyTit { max-width: 445px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 20px; } 
.family3 { width: 100%; margin-bottom: 200px; } 
.family3 .familyBox>img { max-width: 445px; float: right; } 
.family3 .familyBox { float: left; } 
.family3 .familyTit { max-width: 445px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rembottom; padding: 0px 17px; margin-top: 20px; } 
.family4 { width: 100%; margin-bottom: 200px; } 
.family4 .familyBox>img { max-width: 445px; float: right; } 
.family4 .familyBox { float: right; } 
.family4 .familyTit { max-width: 445px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 20px; } 
.family5 { width: 100%; margin-bottom: 200px; } 
.family5 .familyBox>img { max-width: 445px; float: right; } 
.family5 .familyBox { float: left; } 
.family5 .familyTit { max-width: 445px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 20px; } 
.family6 { width: 100%; padding-bottom: 300px; } 
.family6 .familyBox>img { max-width: 635px; float: right; } 
.family6 .familyBox { float: right; } 
.family6 .familyTit { max-width: 635px; font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; padding: 0px 17px; margin-top: 0px; } 
.timeline { border-left: 4px solid #555; border-bottom-right-radius: 4px; border-top-right-radius: 4px; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 0.9); font-family: 'Pretendard', sans-serif; margin: 50px auto; letter-spacing: 0.5px; position: relative; line-height: 1.4rem; font-size: 1.03rem; padding: 50px; list-style: none; text-align: left; font-weight: 100; max-width: 500px; } 
.timeline h1, .timeline h2, .timeline h3 { font-family: 'Do Hyeon', sans-serif; line-height: 1.25; font-weight: 100; font-size: 3.6rem; margin-bottom: 15px; } 
.conScript { max-width: 650px; margin: auto; text-align: left; } 
.familyList { max-width: 750px; margin: auto; margin-bottom: 150px; } 
.familyList div { max-width: 230px; display: inline-block; margin-bottom: 30px; cursor: pointer; } 
.familyList div img { width: 100%; margin-bottom: 5px; } 
.familyList div p { font-family: 'Do Hyeon', sans-serif; font-size: 2.4rem; } 
.YouTubePopUp-Content { max-width:650px; display:block; margin:0 auto; height:100%; position:relative; } 
.YouTubePopUp-Content iframe { max-width:100% !important; width:100% !important; display:block !important; height:365px !important; border:none !important; position:absolute; top: 0; bottom: 0; margin: auto 0; } 
.YouTubePopUp-Close { position:absolute; top:200px; cursor:pointer; right:0px; margin:auto 0; width:35px; height:35px; background:url(https://static.hani.com/family/img/close.png) no-repeat; background-size:35px 35px; -webkit-background-size:35px 35px; -moz-background-size:35px 35px; -o-background-size:35px 35px; } 
.timeline .event:before {line-height: 1.15; left: -200px; color: rgba(0, 0, 0, 1); content: attr(data-date); text-align: right; font-weight: 100; font-size: 2.2rem; min-width: 120px; font-family: 'Do Hyeon', sans-serif; display: none; } 
.timeline .event:after { box-shadow: 0 0 0 4px #888; left: -57.85px; background: #313534; border-radius: 0%; height: 11px; width: 11px; content: ""; top: 8px; } 
.mevent { line-height: 1.15; display: block; font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; color: #fff; } 
.pressTxt { color: #888; font-size: 1.8rem; position: absolute; top: 180px; left: 120px; max-width: 525px; line-height: 1.25; } 
 }

@media all and (max-width: 912px) and (min-width: 10px) {.mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 6rem; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 2.2rem; margin-top: 20px; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 5rem; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; } 
.mainCon { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding: 0px 75px; } 
.main1Img { width: 80px; position: absolute; top: 20px; left: 20px; } 
.main2Img { width: 220px; position: absolute; top: 20px; right: 20px; } 
.main3Img { width: 88px; position: absolute; bottom: 20px; left: 20px; } 
.main4Img { width: 86px; position: absolute; bottom: 20px; right: 20px; } 
.main5Img { width: 400px; position: absolute; bottom: 20px; left: 50%; transform: translate(-45%, 0); } 
.family1 { width: 100%; margin-bottom: 200px; } 
.family1 .familyBox>img { max-width: 485px; } 
.family1 .familyBox { float: left; } 
.family1 .familyTit { max-width: 485px; font-family: 'Do Hyeon', sans-serif; font-size: 3rem; padding: 0px 10px; margin-top: 0px; } 
.family2 { width: 100%; margin-bottom: 200px; } 
.family2 .familyBox>img { max-width: 338px; float: right; } 
.family2 .familyBox { float: right; } 
.family2 .familyTit { max-width: 338px; font-family: 'Do Hyeon', sans-serif; font-size: 3rem; padding: 0px 15px; margin-top: 20px; } 
.family3 { width: 100%; margin-bottom: 200px; } 
.family3 .familyBox>img { max-width: 338px; float: right; } 
.family3 .familyBox { float: left; } 
.family3 .familyTit { max-width: 338px; font-family: 'Do Hyeon', sans-serif; font-size: 3rem; padding: 0px 15px; margin-top: 20px; } 
.family4 { width: 100%; margin-bottom: 200px; } 
.family4 .familyBox>img { max-width: 338px; float: right; } 
.family4 .familyBox { float: right; } 
.family4 .familyTit { max-width: 338px; font-family: 'Do Hyeon', sans-serif; font-size: 3rem; padding: 0px 15px; margin-top: 20px; } 
.family5 { width: 100%; margin-bottom: 200px; } 
.family5 .familyBox>img { max-width: 338px; float: right; } 
.family5 .familyBox { float: left; } 
.family5 .familyTit { max-width: 338px; font-family: 'Do Hyeon', sans-serif; font-size: 3rem; padding: 0px 15px; margin-top: 20px; } 
.family6 { width: 100%; padding-bottom: 300px; } 
.family6 .familyBox>img { max-width: 485px; float: right; } 
.family6 .familyBox { float: right; } 
.family6 .familyTit { max-width: 485px; font-family: 'Do Hyeon', sans-serif; font-size: 3rem; padding: 0px 15px; margin-top: 0px; } 
.moveBtn { background: #000; width: 55px; height: 40px; line-height: 40px; text-align: center; float: right; } 
.moveBtn img { max-width: 30px; } 
.timeline { border-left: 4px solid #555; border-bottom-right-radius: 4px; border-top-right-radius: 4px; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 0.9); font-family: 'Pretendard', sans-serif; margin: 50px auto; letter-spacing: 0.5px; position: relative; line-height: 1.4rem; font-size: 1.03rem; padding: 50px; list-style: none; text-align: left; font-weight: 100; max-width: 500px; } 
.timeline h1, .timeline h2, .timeline h3 { font-family: 'Do Hyeon', sans-serif; line-height: 1.25; font-weight: 100; font-size: 3.6rem; margin-bottom: 15px; } 
.conScript { max-width: 80%; margin: auto; text-align: left; } 
.familyList { max-width: 100%; margin: auto; margin-bottom: 150px; } 
.familyList div { max-width: 230px; display: inline-block; margin-bottom: 30px; cursor: pointer; } 
.familyList div img { width: 100%; margin-bottom: 5px; } 
.familyList div p { font-family: 'Do Hyeon', sans-serif; font-size: 2.4rem; } 
.YouTubePopUp-Content { max-width:650px; display:block; margin:0 auto; height:100%; position:relative; } 
.YouTubePopUp-Content iframe { max-width:100% !important; width:100% !important; display:block !important; height:365px !important; border:none !important; position:absolute; top: 0; bottom: 0; margin: auto 0; } 
.YouTubePopUp-Close { position:absolute; top:190px; cursor:pointer; right:0px; margin:auto 0; width:35px; height:35px; background:url(https://static.hani.com/family/img/close.png) no-repeat; background-size:35px 35px; -webkit-background-size:35px 35px; -moz-background-size:35px 35px; -o-background-size:35px 35px; } 
.timeline .event:before {line-height: 1.15; left: -200px; color: rgba(0, 0, 0, 1); content: attr(data-date); text-align: right; font-weight: 100; font-size: 2.2rem; min-width: 120px; font-family: 'Do Hyeon', sans-serif; display: none; } 
.mevent { line-height: 1.15; display: block; font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; color: #fff; } 
.cherishBtn { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; background: #000; border-radius: 50px; width: 365px; height: 75px; line-height: 75px; color: #fff; text-align: center; cursor: pointer; margin: 35px auto 180px auto; } 
.cherishBtn img { max-width: 25px; vertical-align: middle; margin-right: 20px; } 
.cherishData { font-family: 'Do Hyeon', sans-serif; font-size: 4rem; text-align: center; margin-top: 100px; } 
.cherishData span { color: #2E6EB8; } 
.cherishData img { max-width: 35px; vertical-align: middle; margin-right: 5px; } 
.guestbook-inner { width: 92%; margin: 150px auto 0px auto; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 
#columns { max-width: 100%; margin: auto; column-width: 240px; column-gap: 10px; margin-bottom: 105px; } 

/* 푸터 */
.footer { height: auto; background: #000; font-family: 'Pretendard', sans-serif; position: relative; padding: 65px; text-align: left; } 
.pressLogo { position: unset; top: 80px; left: 120px; margin-bottom: 30px; } 
.pressLogo img { max-width: 190px; } 
.pressTxt { color: #888; font-size: 1.8rem; position: unset; top: 180px; left: 120px; max-width: 100%; line-height: 1.25; margin-bottom: 50px; } 
.copy { color: #fff; font-size: 1.8rem; position: unset; bottom: 80px; left: 120px; } 
.hanLogo { position: unset; bottom: 60px; right: 120px; } 
.hanLogo img { max-width: 160px; margin-bottom: 20px; } 
.sns { position: unset; top: 80px; right: 120px; margin-bottom: 55px; } 
.sns a:nth-child(1) img { max-width: 40px; margin-right: 15px; } 
.sns a:nth-child(2) img { max-width: 20px; } 
 }

@media all and (max-width: 650px) and (min-width: 10px) {.mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 6rem; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 2.2rem; margin-top: 20px; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 5rem; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; } 
.mainCon { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding: 0px 10px; } 
.main1Img { width: 55px; position: absolute; top: 20px; left: 20px; } 
.main2Img { width: 145px; position: absolute; top: 20px; right: 20px; } 
.main3Img { width: 65px; position: absolute; bottom: 20px; left: 20px; } 
.main4Img { width: 65px; position: absolute; bottom: 20px; right: 20px; } 
.main5Img { width: 50%; position: absolute; bottom: 20px; left: 50%; transform: translate(-43%, 0); } 
.family1 { width: 100%; margin-bottom: 200px; } 
.family1 .familyBox>img { max-width: 435px; } 
.family1 .familyBox { float: left; } 
.family1 .familyTit { max-width: 435px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; padding: 0px 10px; margin-top: 0px; } 
.family2 { width: 100%; margin-bottom: 200px; } 
.family2 .familyBox>img { max-width: 305px; float: right; } 
.family2 .familyBox { float: right; } 
.family2 .familyTit { max-width: 305px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; padding: 0px 15px; margin-top: 20px; } 
.family3 { width: 100%; margin-bottom: 200px; } 
.family3 .familyBox>img { max-width: 305px; float: right; } 
.family3 .familyBox { float: left; } 
.family3 .familyTit { max-width: 305px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; padding: 0px 15px; margin-top: 20px; } 
.family4 { width: 100%; margin-bottom: 200px; } 
.family4 .familyBox>img { max-width: 305px; float: right; } 
.family4 .familyBox { float: right; } 
.family4 .familyTit { max-width: 305px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; padding: 0px 15px; margin-top: 20px; } 
.family5 { width: 100%; margin-bottom: 200px; } 
.family5 .familyBox>img { max-width: 305px; float: right; } 
.family5 .familyBox { float: left; } 
.family5 .familyTit { max-width: 305px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; padding: 0px 15px; margin-top: 20px; } 
.family6 { width: 100%; padding-bottom: 300px; } 
.family6 .familyBox>img { max-width: 435px; float: right; } 
.family6 .familyBox { float: right; } 
.family6 .familyTit { max-width: 435px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; padding: 0px 15px; margin-top: 0px; } 
.moveBtn { background: #000; width: 55px; height: 40px; line-height: 40px; text-align: center; float: right; } 
.moveBtn img { max-width: 30px; } 
.timeline { border-left: 4px solid #555; border-bottom-right-radius: 4px; border-top-right-radius: 4px; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 0.9); font-family: 'Pretendard', sans-serif; margin: 50px auto; letter-spacing: 0.5px; position: relative; line-height: 1.4rem; font-size: 1.03rem; padding: 50px; list-style: none; text-align: left; font-weight: 100; max-width: 94%; } 
.timeline h1, .timeline h2, .timeline h3 { font-family: 'Do Hyeon', sans-serif; line-height: 1.25; font-weight: 100; font-size: 3.6rem; margin-bottom: 15px; } 
.conScript { max-width: 89%; margin: auto; text-align: left; } 
.name { font-family: 'Do Hyeon', sans-serif; font-size: 4.6rem; margin-top: 100px; margin-bottom: 15px; } 
.name span { font-family: 'Noto Sans KR', sans-serif; font-size: 2.6rem; font-weight: 800; margin-right: 5px; } 
.date { font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; } 
.familyList { max-width: 100%; margin: auto; margin-bottom: 150px; } 
.familyList div { max-width: 90%; display: inline-block; margin-bottom: 30px; cursor: pointer; } 
.familyList div img { width: 100%; margin-bottom: 5px; } 
.familyList div p { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; } 
.vCircle { width: 65px; height: 65px; background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 200; } 
.vArrow { width: 0; height: 0; border-bottom: 15px solid transparent; border-top: 15px solid transparent; border-left: 25px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 5px; z-index: 200; } 
.timeline .event:before {line-height: 1.15; left: -200px; color: rgba(0, 0, 0, 1); content: attr(data-date); text-align: right; font-weight: 100; font-size: 2.2rem; min-width: 120px; font-family: 'Do Hyeon', sans-serif; display: none; } 
.mevent { line-height: 1.15; display: block; font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; color: #fff; } 
.cherishBtn { font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; background: #000; border-radius: 50px; width: 90%; height: 55px; line-height: 55px; color: #fff; text-align: center; cursor: pointer; margin: 35px auto 180px auto; } 
.cherishBtn img { max-width: 20px; vertical-align: middle; margin-right: 20px; } 
.cherishData { font-family: 'Do Hyeon', sans-serif; font-size: 3.8rem; text-align: center; margin-top: 100px; } 
.cherishData span { color: #2E6EB8; } 
.cherishData img { max-width: 30px; vertical-align: middle; margin-right: 5px; } 
.guestbook-inner { width: 92%; margin: 150px auto 0px auto; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 
#columns { max-width: 100%; margin: auto; column-width: 240px; column-gap: 10px; margin-bottom: 105px; } 

/* 푸터 */
.footer { height: auto; background: #000; font-family: 'Pretendard', sans-serif; position: relative; padding: 65px; text-align: left; } 
.pressLogo { position: unset; top: 80px; left: 120px; margin-bottom: 30px; } 
.pressLogo img { max-width: 190px; } 
.pressTxt { color: #888; font-size: 1.8rem; position: unset; top: 180px; left: 120px; max-width: 100%; line-height: 1.25; margin-bottom: 50px; } 
.copy { color: #fff; font-size: 1.8rem; position: unset; bottom: 80px; left: 120px; } 
.hanLogo { position: unset; bottom: 60px; right: 120px; } 
.hanLogo img { max-width: 160px; margin-bottom: 20px; } 
.sns { position: unset; top: 80px; right: 120px; margin-bottom: 55px; } 
.sns a:nth-child(1) img { max-width: 40px; margin-right: 15px; } 
.sns a:nth-child(2) img { max-width: 20px; } 

/* 메뉴 */
.menuBar { background: #000; width: 100%; height: 65px; line-height: 65px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px; } 
.menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: none; } 
.mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: inline-block; } 
.menu { float: right; } 
.menu li { float: left; color: #fff; font-size: 1.8rem; margin-right: 25px } 
.menu:after { content: ''; display: block; clear: both; } 

/* 메뉴 */
.mainMenuBar { background: #000; width: 100%; height: 65px; line-height: 65px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px;  display: none; } 
.mainMenuBar .menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: none; } 
.mainMenuBar .mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: inline-block; } 
.mainMenuBar .menu { float: right; } 
.mainMenuBar .menu li { float: left; color: #fff; font-size: 1.8rem; margin-right: 25px } 
.mainMenuBar .menu:after { content: ''; display: block; clear: both; } 

#content { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; text-align: center; transition: all .3s ease-in; padding-top: 65px; } 
#timeline { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; transition: all .3s ease-in; padding-top: 65px; } 
#guestbook { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding-bottom: 150px; padding-top: 65px; } 

/* popup */
.popup-wrap { background-color: rgba(0, 0, 0, .3); justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; padding: 15px; z-index: 900; } 
.popup { width: 100%; max-width: 100%; min-height: 365px; max-height: 365px; border-radius: 10px; position: relative; overflow: hidden; background-color: #1a1a1a; box-shadow: 5px 10px 10px 1px rgba(0, 0, 0, .3) } 
.popup-body { width: 100%; background-color: #fff } 
.body-content { width: 100%; padding: 15px; background: #1a1a1a; -webkit-overflow-scrolling: touch; } 
.body-titlebox { width: 100%; height: 25px; margin-bottom: 15px; font-family: 'Do Hyeon', sans-serif; font-weight: 400; text-align: left; font-size: 2rem; line-height: 1.35; color: #fff; letter-spacing: -1.3px } 
.body-contentbox { word-break: break-word; overflow-y: auto; overflow-x: hidden; min-height: 285px; max-height: 285px; -webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: 1.4rem; font-weight: 300; line-height: 1.35; color: #888; -ms-overflow-style: none } 
.body-contentbox::-webkit-scrollbar { display: block } 
.body-contentbox>p { font-size: 1.3rem; color: #fff; letter-spacing: -1px; line-height: 1.5; padding-right: 5px; } 
.pop-btn { display: inline; width: auto; height: auto; position: absolute; top: 15px; right: 15px; justify-content: center; align-items: center; color: #fff; cursor: pointer; font-size: 1.6rem; font-weight: 500 } 
.pop-btn::after { content: ''; clear: both } 
.pop-btn.close { border-right: 0 solid #eee } 
.scrollLock { overflow: hidden } 
.input-box { position: relative; margin: 10px 0; margin-bottom: 20px } 
.input-box>input { background: 0 0; border: none; border-bottom: solid 3px #ccc; padding: 20px 0 5px 0; font-size: 1.4rem; width: 100%; max-width: 90%; color: #fff } 
.textarea { position: relative; margin: 10px 0 } 
.textLengthWrap { position: absolute; right: 10%; font-size: 1.4rem } 
.textLengthWrap p { display: inline-block } 
.textarea>textarea { background: 0 0; border: none; border-bottom: solid 3px #ccc; padding: 20px 0 5px 0; font-size: 1.4rem; width: 100%; max-width: 90%; color: #fff; margin-bottom: 40px } 
.form-btn { height: 36px; font-size: 1.4rem; background-color: #000; cursor: pointer; color: #fff; border-radius: 50px; margin-right: 10px; margin-top: 10px; margin-bottom: 30px; padding: 0 20px; float: right } 
.modify { display: block; background: #fff; color: #000; font-weight: 700 } 
.submit { display: block; background: #fff; color: #000; font-weight: 700 } 
.reset { display: block; background: #000; color: #fff; font-weight: 700 } 
.password { display: block } 
.username { display: block } 
.textform { display: block } 
input::placeholder { color: transparent } 
input:placeholder-shown+label { color: #aaa; font-size: 1.4rem; top: 15px } 
input:focus+label, label { color: #8aa1a1; font-size: 1.2rem; pointer-events: none; position: absolute; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease } 
input:focus, input:not(:placeholder-shown) { border-bottom: solid 3px #8aa1a1; outline: 0 } 
textarea { resize: none; display: block; overflow: hidden } 
textarea::placeholder { color: transparent } 
textarea:placeholder-shown+label { color: #aaa; font-size: 1.4rem; top: 15px } 
label, textarea:focus+label { color: #8aa1a1; font-size: 1.2rem; pointer-events: none; position: absolute; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease } 
textarea:focus, textarea:not(:placeholder-shown) { border-bottom: solid 3px #8aa1a1; outline: 0 } 
textarea.autosize { min-height: 30px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400 } 
::-webkit-scrollbar { width: 5px; height: 5px } 
::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0 } 
::-webkit-scrollbar-track { background-color: #707070; border-radius: 0; box-shadow: inset 0 0 5px rgba(0, 0, 0, .2) } 
 }

@media all and (max-width: 480px) and (min-width: 10px) {.mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 4.6rem; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 2rem; margin-top: 20px; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 5rem; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; } 
.mainCon { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding: 0px 10px; } 
.main1Img { width: 55px; position: absolute; top: 20px; left: 20px; } 
.main2Img { width: 145px; position: absolute; top: 20px; right: 20px; } 
.main3Img { width: 65px; position: absolute; bottom: 20px; left: 20px; } 
.main4Img { width: 65px; position: absolute; bottom: 20px; right: 20px; } 
.main5Img { width: 50%; position: absolute; bottom: 20px; left: 50%; transform: translate(-45%, 0); } 
.family1 { width: 100%; margin-bottom: 200px; } 
.family1 .familyBox>img { max-width: 385px; } 
.family1 .familyBox { float: left; } 
.family1 .familyTit { max-width: 385px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem;; padding: 0px 10px; margin-top: 0px; } 
.family2 { width: 100%; margin-bottom: 200px; } 
.family2 .familyBox>img { max-width: 305px; float: right; } 
.family2 .familyBox { float: right; } 
.family2 .familyTit { max-width: 305px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem;; padding: 0px 15px; margin-top: 20px; } 
.family3 { width: 100%; margin-bottom: 200px; } 
.family3 .familyBox>img { max-width: 305px; float: right; } 
.family3 .familyBox { float: left; } 
.family3 .familyTit { max-width: 305px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; padding: 0px 15px; margin-top: 20px; } 
.family4 { width: 100%; margin-bottom: 200px; } 
.family4 .familyBox>img { max-width: 305px; float: right; } 
.family4 .familyBox { float: right; } 
.family4 .familyTit { max-width: 305px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem;; padding: 0px 15px; margin-top: 20px; } 
.family5 { width: 100%; margin-bottom: 200px; } 
.family5 .familyBox>img { max-width: 305px; float: right; } 
.family5 .familyBox { float: left; } 
.family5 .familyTit { max-width: 305px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem;; padding: 0px 15px; margin-top: 20px; } 
.family6 { width: 100%; padding-bottom: 300px; } 
.family6 .familyBox>img { max-width: 385px; float: right; } 
.family6 .familyBox { float: right; } 
.family6 .familyTit { max-width: 385px; font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem;; padding: 0px 15px; margin-top: 0px; } 
.moveBtn { background: #000; width: 55px; height: 40px; line-height: 40px; text-align: center; float: right; } 
.moveBtn img { max-width: 30px; } 
.timeline { border-left: 4px solid #555; border-bottom-right-radius: 4px; border-top-right-radius: 4px; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 0.9); font-family: 'Pretendard', sans-serif; margin: 50px auto; letter-spacing: 0.5px; position: relative; line-height: 1.4rem; font-size: 1.03rem; padding: 25px; list-style: none; text-align: left; font-weight: 100; max-width: 94%; } 
.timeline h1, .timeline h2, .timeline h3 { font-family: 'Do Hyeon', sans-serif; line-height: 1.25; font-weight: 100; font-size: 3.6rem; margin-bottom: 15px; } 
.timeline .event:after { box-shadow: 0 0 0 4px #888; left: -32.85px; background: #313534; border-radius: 0%; height: 11px; width: 11px; content: ""; top: 7px; } 
.conScript { max-width: 89%; margin: auto; text-align: left; } 
.name { font-family: 'Do Hyeon', sans-serif; font-size: 4.6rem; margin-top: 100px; margin-bottom: 15px; } 
.name span { font-family: 'Noto Sans KR', sans-serif; font-size: 2.6rem; font-weight: 800; margin-right: 5px; } 
.date { font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; } 
.script { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; line-height: 1.45; text-align: justify; margin-bottom: 65px; } 
.familyList { max-width: 100%; margin: auto; margin-bottom: 150px; } 
.familyList div { max-width: 90%; display: inline-block; margin-bottom: 30px; cursor: pointer; } 
.familyList div img { width: 100%; margin-bottom: 5px; } 
.familyList div p { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; } 
.vCircle { width: 60px; height: 60px; background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 200; } 
.vArrow { width: 0; height: 0; border-bottom: 15px solid transparent; border-top: 15px solid transparent; border-left: 25px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 5px; z-index: 200; } 
.timeline .event:before {line-height: 1.15; left: -200px; color: rgba(0, 0, 0, 1); content: attr(data-date); text-align: right; font-weight: 100; font-size: 2.2rem; min-width: 120px; font-family: 'Do Hyeon', sans-serif; display: none; } 
.mevent { line-height: 1.15; display: block; font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; color: #fff; } 
.timeline p { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; line-height: 1.45; text-align: justify; } 
.cherishBtn { font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; background: #000; border-radius: 50px; width: 70%; height: 55px; line-height: 55px; color: #fff; text-align: center; cursor: pointer; margin: 35px auto 180px auto; } 
.cherishBtn img { max-width: 20px; vertical-align: middle; margin-right: 20px; } 
.cherishData { font-family: 'Do Hyeon', sans-serif; font-size: 3.8rem; text-align: center; margin-top: 100px; } 
.cherishData span { color: #2E6EB8; } 
.cherishData img { max-width: 30px; vertical-align: middle; margin-right: 5px; } 
.guestbook-inner { width: 92%; margin: 150px auto 0px auto; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 
#columns { max-width: 100%; margin: auto; column-width: 240px; column-gap: 10px; margin-bottom: 105px; } 

/* 푸터 */
.footer { height: auto; background: #000; font-family: 'Pretendard', sans-serif; position: relative; padding: 65px; text-align: left; } 
.pressLogo { position: unset; top: 80px; left: 120px; margin-bottom: 30px; } 
.pressLogo img { max-width: 175px; } 
.pressTxt { color: #888; font-size: 1.6rem; position: unset; top: 180px; left: 120px; max-width: 100%; line-height: 1.25; margin-bottom: 50px; } 
.copy { color: #fff; font-size: 1.6rem; position: unset; bottom: 80px; left: 120px; } 
.hanLogo { position: unset; bottom: 60px; right: 120px; } 
.hanLogo img { max-width: 160px; margin-bottom: 20px; } 
.sns { position: unset; top: 80px; right: 120px; margin-bottom: 55px; } 
.sns a:nth-child(1) img { max-width: 40px; margin-right: 15px; } 
.sns a:nth-child(2) img { max-width: 20px; } 

/* 메뉴 */
.menuBar { background: #000; width: 100%; height: 65px; line-height: 65px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px; } 
.menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: none; } 
.mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: inline-block; } 
.menu { float: right; } 
.menu li { float: left; color: #fff; font-size: 1.8rem; margin-right: 25px } 
.menu:after { content: ''; display: block; clear: both; } 

/* 메뉴 */
.mainMenuBar { background: #000; width: 100%; height: 65px; line-height: 65px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px;  display: none; } 
.mainMenuBar .menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: none; } 
.mainMenuBar .mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: inline-block; } 
.mainMenuBar .menu { float: right; } 
.mainMenuBar .menu li { float: left; color: #fff; font-size: 1.8rem; margin-right: 25px } 
.mainMenuBar .menu:after { content: ''; display: block; clear: both; } 
#content { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; text-align: center; transition: all .3s ease-in; padding-top: 65px; } 
#timeline { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; transition: all .3s ease-in; padding-top: 65px; } 
#guestbook { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding-bottom: 150px; padding-top: 65px; } 
 }

@media all and (max-width: 420px) and (min-width: 10px) {.mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 4rem; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 2rem; margin-top: 20px; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 4.6rem; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; } 
.mainCon { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding: 0px 10px; } 
.mainConTxt { text-align: center; padding-top: 85px; margin-bottom: 75px; } 
.logo { position: absolute; top: 25px; left: 25px; z-index: 50; } 
.logo img { max-width: 65px; } 
.main1Img { width: 50px; position: absolute; top: 10px; left: 10px; } 
.main2Img { width: 125px; position: absolute; top: 10px; right: 10px; } 
.main3Img { width: 55px; position: absolute; bottom: 10px; left: 10px; } 
.main4Img { width: 55px; position: absolute; bottom: 10px; right: 10px; } 
.main5Img { width: 125px; position: absolute; bottom: 10px; left: 50%; transform: translate(-45%, 0); } 
.family1 { width: 100%; margin-bottom: 200px; } 
.family1 .familyBox>img { max-width: 320px; } 
.family1 .familyBox { float: left; } 
.family1 .familyTit { max-width: 320px; font-family: 'Do Hyeon', sans-serif; font-size: 2rem; padding: 0px 4px 0px 7px; margin-top: 0px; } 
.family2 { width: 100%; margin-bottom: 200px; } 
.family2 .familyBox>img { max-width: 225px; float: right; } 
.family2 .familyBox { float: right; } 
.family2 .familyTit { max-width: 225px; font-family: 'Do Hyeon', sans-serif; font-size: 2rem; padding: 0px 0px 0px 15px; margin-top: 0px; } 
.family3 { width: 100%; margin-bottom: 200px; } 
.family3 .familyBox>img { max-width: 225px; float: right; } 
.family3 .familyBox { float: left; } 
.family3 .familyTit { max-width: 225px; font-family: 'Do Hyeon', sans-serif; font-size: 2rem; padding: 0px 0px 0px 15px; margin-top: 0px; } 
.family4 { width: 100%; margin-bottom: 200px; } 
.family4 .familyBox>img { max-width: 225px; float: right; } 
.family4 .familyBox { float: right; } 
.family4 .familyTit { max-width: 225px; font-family: 'Do Hyeon', sans-serif; font-size: 2rem; padding: 0px 0px 0px 15px; margin-top: 0px; } 
.family5 { width: 100%; margin-bottom: 200px; } 
.family5 .familyBox>img { max-width: 225px; float: right; } 
.family5 .familyBox { float: left; } 
.family5 .familyTit { max-width: 225px; font-family: 'Do Hyeon', sans-serif; font-size: 2rem; padding: 0px 0px 0px 15px; margin-top: 0px; } 
.family6 { width: 100%; padding-bottom: 300px; } 
.family6 .familyBox>img { max-width: 320px; float: right; } 
.family6 .familyBox { float: right; } 
.family6 .familyTit { max-width: 320px; font-family: 'Do Hyeon', sans-serif; font-size: 2rem; padding: 0px 4px 0px 7px; margin-top: 0px; } 
.moveBtn { background: #000; width: 40px; height: 35px; line-height: 35px; text-align: center; float: right; } 
.moveBtn img { max-width: 20px; } 
.timeline { border-left: 4px solid #555; border-bottom-right-radius: 4px; border-top-right-radius: 4px; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 0.9); font-family: 'Pretendard', sans-serif; margin: 50px auto; letter-spacing: 0.5px; position: relative; line-height: 1.4rem; font-size: 1.03rem; padding: 25px; list-style: none; text-align: left; font-weight: 100; max-width: 94%; } 
.timeline h1, .timeline h2, .timeline h3 { font-family: 'Do Hyeon', sans-serif; line-height: 1.25; font-weight: 100; font-size: 3rem; margin-bottom: 15px; } 
.timeline .event:after { box-shadow: 0 0 0 4px #888; left: -32.85px; background: #313534; border-radius: 0%; height: 11px; width: 11px; content: ""; top: 7px; } 
.conScript { max-width: 89%; margin: auto; text-align: left; } 
.name { font-family: 'Do Hyeon', sans-serif; font-size: 4.6rem; margin-top: 100px; margin-bottom: 15px; } 
.name span { font-family: 'Noto Sans KR', sans-serif; font-size: 2.6rem; font-weight: 800; margin-right: 5px; } 
.date { font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; } 
.script { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; line-height: 1.45; text-align: justify; margin-bottom: 65px; } 
.familyList { max-width: 100%; margin: auto; margin-bottom: 150px; } 
.familyList div { max-width: 90%; display: inline-block; margin-bottom: 30px; cursor: pointer; } 
.familyList div img { width: 100%; margin-bottom: 5px; } 
.familyList div p { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; } 
.vCircle { width: 60px; height: 60px; background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 200; } 
.vArrow { width: 0; height: 0; border-bottom: 15px solid transparent; border-top: 15px solid transparent; border-left: 25px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 5px; z-index: 200; } 
.timeline .event:before {line-height: 1.15; left: -200px; color: rgba(0, 0, 0, 1); content: attr(data-date); text-align: right; font-weight: 100; font-size: 2.2rem; min-width: 120px; font-family: 'Do Hyeon', sans-serif; display: none; } 
.mevent { line-height: 1.15; display: block; font-family: 'Do Hyeon', sans-serif; font-size: 2rem; margin-bottom: 50px; color: #fff; } 
.timeline p { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; line-height: 1.45; text-align: justify; } 
.cherishBtn { font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; background: #000; border-radius: 50px; width: 90%; height: 55px; line-height: 55px; color: #fff; text-align: center; cursor: pointer; margin: 35px auto 105px auto; } 
.cherishBtn img { max-width: 20px; vertical-align: middle; margin-right: 20px; } 
.cherishData { font-family: 'Do Hyeon', sans-serif; font-size: 3.2rem; text-align: center; margin-top: 100px; } 
.cherishData span { color: #2E6EB8; } 
.cherishData img { max-width: 27px; vertical-align: middle; margin-right: 5px; } 
.guestbook-inner { width: 92%; margin: 65px auto 0px auto; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 
#columns { max-width: 100%; margin: auto; column-width: 240px; column-gap: 10px; margin-bottom: 105px; } 
.more-content { background: #000; font-size: 2.6rem; font-weight: 600; font-family: 'Do Hyeon', sans-serif; color: #fff; margin: auto; display: block; width: 280px; height: 65px; line-height: 65px; border-radius: 50px } 
.more-content img { width: 20px; vertical-align: middle } 

/* 푸터 */
.footer { height: auto; background: #000; font-family: 'Pretendard', sans-serif; position: relative; padding: 40px; text-align: left; } 
.pressLogo { position: unset; top: 80px; left: 120px; margin-bottom: 30px; } 
.pressLogo img { max-width: 165px; } 
.pressTxt { color: #888; font-size: 1.4rem; position: unset; top: 180px; left: 120px; max-width: 100%; line-height: 1.25; margin-bottom: 50px; } 
.copy { color: #fff; font-size: 1.4rem; position: unset; bottom: 80px; left: 120px; } 
.hanLogo { position: unset; bottom: 60px; right: 120px; } 
.hanLogo img { max-width: 150px; margin-bottom: 20px; } 
.sns { position: unset; top: 80px; right: 120px; margin-bottom: 55px; } 
.sns a:nth-child(1) img { max-width: 37px; margin-right: 15px; } 
.sns a:nth-child(2) img { max-width: 17px; } 

/* 메뉴 */
.menuBar { background: #000; width: 100%; height: 65px; line-height: 65px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px; } 
.menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: none; } 
.mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: inline-block; } 
.menu { float: right; } 
.menu li { float: left; color: #fff; font-size: 1.8rem; margin-right: 25px } 
.menu:after { content: ''; display: block; clear: both; } 

/* 메뉴 */
.mainMenuBar { background: #000; width: 100%; height: 65px; line-height: 65px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px;  display: none; } 
.mainMenuBar .menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: none; } 
.mainMenuBar .mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: inline-block; } 
.mainMenuBar .menu { float: right; } 
.mainMenuBar .menu li { float: left; color: #fff; font-size: 1.8rem; margin-right: 25px } 
.mainMenuBar .menu:after { content: ''; display: block; clear: both; } 
#content { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; text-align: center; transition: all .3s ease-in; padding-top: 65px; } 
#timeline { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; transition: all .3s ease-in; padding-top: 65px; } 
#guestbook { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding-bottom: 150px; padding-top: 65px; } 
.scroll-downs { position: absolute; bottom: 15%; left: 47%; transform: translate(0, -50%); margin: auto; width :34px; height: 55px; } 

/* popup */
.popup-wrap { background-color: rgba(0, 0, 0, .3); justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; padding: 15px; z-index: 900; } 
.popup { width: 100%; max-width: 100%; min-height: 365px; max-height: 365px; border-radius: 10px; position: relative; overflow: hidden; background-color: #1a1a1a; box-shadow: 5px 10px 10px 1px rgba(0, 0, 0, .3) } 
.popup-body { width: 100%; background-color: #fff } 
.body-content { width: 100%; padding: 15px; background: #1a1a1a; -webkit-overflow-scrolling: touch; } 
.body-titlebox { width: 100%; height: 25px; margin-bottom: 15px; font-family: 'Do Hyeon', sans-serif; font-weight: 400; text-align: left; font-size: 2rem; line-height: 1.35; color: #fff; letter-spacing: -1.3px } 
.body-contentbox { word-break: break-word; overflow-y: auto; overflow-x: hidden; min-height: 285px; max-height: 285px; -webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: 1.4rem; font-weight: 300; line-height: 1.35; color: #888; -ms-overflow-style: none } 
.body-contentbox::-webkit-scrollbar { display: block } 
.body-contentbox>p { font-size: 1.3rem; color: #fff; letter-spacing: -1px; line-height: 1.5; padding-right: 5px; } 
.pop-btn { display: inline; width: auto; height: auto; position: absolute; top: 15px; right: 15px; justify-content: center; align-items: center; color: #fff; cursor: pointer; font-size: 1.6rem; font-weight: 500 } 
.pop-btn::after { content: ''; clear: both } 
.pop-btn.close { border-right: 0 solid #eee } 
.scrollLock { overflow: hidden } 
.input-box { position: relative; margin: 10px 0; margin-bottom: 20px } 
.input-box>input { background: 0 0; border: none; border-bottom: solid 3px #ccc; padding: 20px 0 5px 0; font-size: 1.4rem; width: 100%; max-width: 90%; color: #fff } 
.textarea { position: relative; margin: 10px 0 } 
.textLengthWrap { position: absolute; right: 10%; font-size: 1.4rem } 
.textLengthWrap p { display: inline-block } 
.textarea>textarea { background: 0 0; border: none; border-bottom: solid 3px #ccc; padding: 20px 0 5px 0; font-size: 1.4rem; width: 100%; max-width: 90%; color: #fff; margin-bottom: 40px } 
.form-btn { height: 36px; font-size: 1.4rem; background-color: #000; cursor: pointer; color: #fff; border-radius: 50px; margin-right: 10px; margin-top: 10px; margin-bottom: 30px; padding: 0 20px; float: right } 
.modify { display: block; background: #fff; color: #000; font-weight: 700 } 
.submit { display: block; background: #fff; color: #000; font-weight: 700 } 
.reset { display: block; background: #000; color: #fff; font-weight: 700 } 
.password { display: block } 
.username { display: block } 
.textform { display: block } 
input::placeholder { color: transparent } 
input:placeholder-shown+label { color: #aaa; font-size: 1.4rem; top: 15px } 
input:focus+label, label { color: #8aa1a1; font-size: 1.2rem; pointer-events: none; position: absolute; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease } 
input:focus, input:not(:placeholder-shown) { border-bottom: solid 3px #8aa1a1; outline: 0 } 
textarea { resize: none; display: block; overflow: hidden } 
textarea::placeholder { color: transparent } 
textarea:placeholder-shown+label { color: #aaa; font-size: 1.4rem; top: 15px } 
label, textarea:focus+label { color: #8aa1a1; font-size: 1.2rem; pointer-events: none; position: absolute; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease } 
textarea:focus, textarea:not(:placeholder-shown) { border-bottom: solid 3px #8aa1a1; outline: 0 } 
textarea.autosize { min-height: 30px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400 } 
::-webkit-scrollbar { width: 5px; height: 5px } 
::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0 } 
::-webkit-scrollbar-track { background-color: #707070; border-radius: 0; box-shadow: inset 0 0 5px rgba(0, 0, 0, .2) } 
 }

@media all and (max-width: 340px) and (min-width: 10px) {.mainTxt { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; } 
.subTxt { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; margin-top: 10px; } 
.mainConTit { font-family: 'Do Hyeon', sans-serif; font-size: 4.2rem; } 
.mainConSub { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; } 
.mainCon { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding: 0px 10px; } 
.mainConTxt { text-align: center; padding-top: 85px; margin-bottom: 70px; } 
.logo { position: absolute; top: 25px; left: 25px; z-index: 50; } 
.logo img { max-width: 65px; } 
.main1Img { width: 40px; position: absolute; top: 10px; left: 10px; } 
.main2Img { width: 110px; position: absolute; top: 10px; right: 10px; } 
.main3Img { width: 45px; position: absolute; bottom: 10px; left: 10px; } 
.main4Img { width: 45px; position: absolute; bottom: 10px; right: 10px; } 
.main5Img { width: 40%; position: absolute; bottom: 10px; left: 50%; transform: translate(-45%, 0); } 
.family1 { width: 100%; margin-bottom: 200px; } 
.family1 .familyBox>img { max-width: 280px; } 
.family1 .familyBox { float: left; } 
.family1 .familyTit { max-width: 280px; font-family: 'Do Hyeon', sans-serif; font-size: 1.6rem; padding: 0px 4px 0px 7px; margin-top: 0px; } 
.family2 { width: 100%; margin-bottom: 200px; } 
.family2 .familyBox>img { max-width: 195px; float: right; } 
.family2 .familyBox { float: right; } 
.family2 .familyTit { max-width: 195px; font-family: 'Do Hyeon', sans-serif; font-size: 1.6rem; padding: 0px 0px 0px 15px; margin-top: 0px; } 
.family3 { width: 100%; margin-bottom: 200px; } 
.family3 .familyBox>img { max-width: 195px; float: right; } 
.family3 .familyBox { float: left; } 
.family3 .familyTit { max-width: 195px; font-family: 'Do Hyeon', sans-serif; font-size: 1.6rem; padding: 0px 0px 0px 15px; margin-top: 0px; } 
.family4 { width: 100%; margin-bottom: 200px; } 
.family4 .familyBox>img { max-width: 195px; float: right; } 
.family4 .familyBox { float: right; } 
.family4 .familyTit { max-width: 195px; font-family: 'Do Hyeon', sans-serif; font-size: 1.6rem; padding: 0px 0px 0px 15px; margin-top: 0px; } 
.family5 { width: 100%; margin-bottom: 200px; } 
.family5 .familyBox>img { max-width: 195px; float: right; } 
.family5 .familyBox { float: left; } 
.family5 .familyTit { max-width: 195px; font-family: 'Do Hyeon', sans-serif; font-size: 1.6rem; padding: 0px 0px 0px 15px; margin-top: 0px; } 
.family6 { width: 100%; padding-bottom: 300px; } 
.family6 .familyBox>img { max-width: 280px; float: right; } 
.family6 .familyBox { float: right; } 
.family6 .familyTit { max-width: 280px; font-family: 'Do Hyeon', sans-serif; font-size: 1.6rem; padding: 0px 4px 0px 7px; margin-top: 0px; } 
.moveBtn { background: #000; width: 40px; height: 30px; line-height: 30px; text-align: center; float: right; } 
.moveBtn img { max-width: 17px; } 
.timeline { border-left: 4px solid #555; border-bottom-right-radius: 4px; border-top-right-radius: 4px; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 0.9); font-family: 'Pretendard', sans-serif; margin: 50px auto; letter-spacing: 0.5px; position: relative; line-height: 1.4rem; font-size: 1.03rem; padding: 25px; list-style: none; text-align: left; font-weight: 100; max-width: 94%; } 
.timeline h1, .timeline h2, .timeline h3 { font-family: 'Do Hyeon', sans-serif; line-height: 1.25; font-weight: 100; font-size: 3rem; margin-bottom: 15px; } 
.timeline .event:after { box-shadow: 0 0 0 4px #888; left: -32.85px; background: #313534; border-radius: 0%; height: 11px; width: 11px; content: ""; top: 7px; } 
.conScript { max-width: 89%; margin: auto; text-align: left; } 
.name { font-family: 'Do Hyeon', sans-serif; font-size: 4.6rem; margin-top: 100px; margin-bottom: 15px; } 
.name span { font-family: 'Noto Sans KR', sans-serif; font-size: 2.6rem; font-weight: 800; margin-right: 5px; } 
.date { font-family: 'Do Hyeon', sans-serif; font-size: 2.2rem; margin-bottom: 50px; } 
.script { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; line-height: 1.45; text-align: justify; margin-bottom: 65px; } 
.familyList { max-width: 100%; margin: auto; margin-bottom: 150px; } 
.familyList div { max-width: 90%; display: inline-block; margin-bottom: 30px; cursor: pointer; } 
.familyList div img { width: 100%; margin-bottom: 5px; } 
.familyList div p { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; } 
.vCircle { width: 60px; height: 60px; background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 200; } 
.vArrow { width: 0; height: 0; border-bottom: 15px solid transparent; border-top: 15px solid transparent; border-left: 25px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 5px; z-index: 200; } 
.timeline .event:before {line-height: 1.15; left: -200px; color: rgba(0, 0, 0, 1); content: attr(data-date); text-align: right; font-weight: 100; font-size: 2.2rem; min-width: 120px; font-family: 'Do Hyeon', sans-serif; display: none; } 
.mevent { line-height: 1.15; display: block; font-family: 'Do Hyeon', sans-serif; font-size: 2rem; margin-bottom: 50px; color: #fff; } 
.timeline p { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; line-height: 1.45; text-align: justify; } 
.cherishBtn { font-family: 'Do Hyeon', sans-serif; font-size: 2.6rem; background: #000; border-radius: 50px; width: 90%; height: 55px; line-height: 55px; color: #fff; text-align: center; cursor: pointer; margin: 35px auto 105px auto; } 
.cherishBtn img { max-width: 20px; vertical-align: middle; margin-right: 20px; } 
.cherishData { font-family: 'Do Hyeon', sans-serif; font-size: 3rem; text-align: center; margin-top: 100px; } 
.cherishData span { color: #2E6EB8; } 
.cherishData img { max-width: 25px; vertical-align: middle; margin-right: 5px; } 
.guestbook-inner { width: 92%; margin: 65px auto 0px auto; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 
#columns { max-width: 100%; margin: auto; column-width: 240px; column-gap: 10px; margin-bottom: 105px; } 
.more-content { background: #000; font-size: 2.6rem; font-weight: 600; font-family: 'Do Hyeon', sans-serif; color: #fff; margin: auto; display: block; width: 280px; height: 65px; line-height: 65px; border-radius: 50px } 
.more-content img { width: 20px; vertical-align: middle } 

/* 푸터 */
.footer { height: auto; background: #000; font-family: 'Pretendard', sans-serif; position: relative; padding: 30px; text-align: left; } 
.pressLogo { position: unset; top: 80px; left: 120px; margin-bottom: 20px; } 
.pressLogo img { max-width: 165px; } 
.pressTxt { color: #888; font-size: 1.2rem; position: unset; top: 180px; left: 120px; max-width: 100%; line-height: 1.25; margin-bottom: 50px; } 
.copy { color: #fff; font-size: 1.2rem; position: unset; bottom: 80px; left: 120px; } 
.hanLogo { position: unset; bottom: 60px; right: 120px; } 
.hanLogo img { max-width: 140px; margin-bottom: 20px; } 
.sns { position: unset; top: 80px; right: 120px; margin-bottom: 55px; } 
.sns a:nth-child(1) img { max-width: 35px; margin-right: 15px; } 
.sns a:nth-child(2) img { max-width: 15px; } 

/* 메뉴 */
.menuBar { background: #000; width: 100%; height: 65px; line-height: 65px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px; } 
.menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: none; } 
.mLogo { vertical-align: middle; margin-left: 15px; max-width: 25px; display: inline-block; } 
.menu { float: right; } 
.menu li { float: left; color: #fff; font-size: 1.6rem; margin-right: 15px } 
.menu:after { content: ''; display: block; clear: both; } 

/* 메뉴 */
.mainMenuBar { background: #000; width: 100%; height: 65px; line-height: 65px; position: fixed; top: 0px; left: 0px; z-index: 300; min-width: 320px;  display: none; } 
.mainMenuBar .menuLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; display: none; } 
.mainMenuBar .mLogo { max-width: 115px; vertical-align: middle; margin-left: 20px; max-width: 30px; display: inline-block; } 
.mainMenuBar .menu { float: right; } 
.mainMenuBar .menu li { float: left; color: #fff; font-size: 1.8rem; margin-right: 25px } 
.mainMenuBar .menu:after { content: ''; display: block; clear: both; } 
#content { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; text-align: center; transition: all .3s ease-in; padding-top: 65px; } 
#timeline { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; transition: all .3s ease-in; padding-top: 65px; } 
#guestbook { width: 100%; background: #000; background: url(https://static.hani.com/family/img/bg.png) repeat center center; background-size: contain; padding-bottom: 150px; padding-top: 65px; } 
.scroll-downs { position: absolute; bottom: 15%; left: 46%; transform: translate(0, -50%); margin: auto; width :34px; height: 55px; } 

/* popup */
.popup-wrap { background-color: rgba(0, 0, 0, .3); justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; padding: 15px; z-index: 900; } 
.popup { width: 100%; max-width: 100%; min-height: 365px; max-height: 365px; border-radius: 10px; position: relative; overflow: hidden; background-color: #1a1a1a; box-shadow: 5px 10px 10px 1px rgba(0, 0, 0, .3) } 
.popup-body { width: 100%; background-color: #fff } 
.body-content { width: 100%; padding: 15px; background: #1a1a1a; -webkit-overflow-scrolling: touch; } 
.body-titlebox { width: 100%; height: 25px; margin-bottom: 15px; font-family: 'Do Hyeon', sans-serif; font-weight: 400; text-align: left; font-size: 2rem; line-height: 1.35; color: #fff; letter-spacing: -1.3px } 
.body-contentbox { word-break: break-word; overflow-y: auto; overflow-x: hidden; min-height: 285px; max-height: 285px; -webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: 1.4rem; font-weight: 300; line-height: 1.35; color: #888; -ms-overflow-style: none } 
.body-contentbox::-webkit-scrollbar { display: block } 
.body-contentbox>p { font-size: 1.3rem; color: #fff; letter-spacing: -1px; line-height: 1.5; padding-right: 5px; } 
.pop-btn { display: inline; width: auto; height: auto; position: absolute; top: 15px; right: 15px; justify-content: center; align-items: center; color: #fff; cursor: pointer; font-size: 1.6rem; font-weight: 500 } 
.pop-btn::after { content: ''; clear: both } 
.pop-btn.close { border-right: 0 solid #eee } 
.scrollLock { overflow: hidden } 
.input-box { position: relative; margin: 10px 0; margin-bottom: 20px } 
.input-box>input { background: 0 0; border: none; border-bottom: solid 3px #ccc; padding: 20px 0 5px 0; font-size: 1.4rem; width: 100%; max-width: 90%; color: #fff } 
.textarea { position: relative; margin: 10px 0 } 
.textLengthWrap { position: absolute; right: 10%; font-size: 1.4rem } 
.textLengthWrap p { display: inline-block } 
.textarea>textarea { background: 0 0; border: none; border-bottom: solid 3px #ccc; padding: 20px 0 5px 0; font-size: 1.4rem; width: 100%; max-width: 90%; color: #fff; margin-bottom: 40px } 
.form-btn { height: 36px; font-size: 1.4rem; background-color: #000; cursor: pointer; color: #fff; border-radius: 50px; margin-right: 10px; margin-top: 10px; margin-bottom: 30px; padding: 0 20px; float: right } 
.modify { display: block; background: #fff; color: #000; font-weight: 700 } 
.submit { display: block; background: #fff; color: #000; font-weight: 700 } 
.reset { display: block; background: #000; color: #fff; font-weight: 700 } 
.password { display: block } 
.username { display: block } 
.textform { display: block } 
input::placeholder { color: transparent } 
input:placeholder-shown+label { color: #aaa; font-size: 1.4rem; top: 15px } 
input:focus+label, label { color: #8aa1a1; font-size: 1.2rem; pointer-events: none; position: absolute; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease } 
input:focus, input:not(:placeholder-shown) { border-bottom: solid 3px #8aa1a1; outline: 0 } 
textarea { resize: none; display: block; overflow: hidden } 
textarea::placeholder { color: transparent } 
textarea:placeholder-shown+label { color: #aaa; font-size: 1.4rem; top: 15px } 
label, textarea:focus+label { color: #8aa1a1; font-size: 1.2rem; pointer-events: none; position: absolute; left: 0; top: 0; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease } 
textarea:focus, textarea:not(:placeholder-shown) { border-bottom: solid 3px #8aa1a1; outline: 0 } 
textarea.autosize { min-height: 30px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400 } 
::-webkit-scrollbar { width: 5px; height: 5px } 
::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0 } 
::-webkit-scrollbar-track { background-color: #707070; border-radius: 0; box-shadow: inset 0 0 5px rgba(0, 0, 0, .2) } 
 }

/* 유튜브 노출 섹션 */
.YouTubePopUp-Wrap { position:fixed; width:100%; height:100%; background-color:#000; background-color:rgba(0,0,0,0.8); top:0; left:0; z-index:9999999999999; } 
.YouTubePopUp-animation { opacity: 0; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: YouTubePopUp; animation-name: YouTubePopUp; } 
body.logged-in .YouTubePopUp-Wrap { top:32px; z-index:99998; } 
.YouTubePopUp-Content { max-width:680px; display:block; margin:0 auto; height:100%; position:relative; } 
.YouTubePopUp-Content iframe { max-width:100% !important; width:100% !important; display:block !important; height:480px !important; border:none !important; position:absolute; top: 0; bottom: 0; margin: auto 0; } 
.climate-video-item1 { max-width: 165px; } 
.climate-video-item1 img { width:100%; } 
.climate-video-item2 { max-width: 165px; } 
.climate-video-item2 img { width:100%; box-shadow: rgba(163, 177, 198, 0.5) 5px 5px 15px 0px, rgb(255, 255, 255) -5px -5px 15px 0px; -webkit-box-shadow: rgba(163, 177, 198, 0.5) 5px 5px 15px 0px, rgb(255, 255, 255) -5px -5px 15px 0px; } 
.YouTubePopUp-Hide { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: YouTubePopUpHide; animation-name: YouTubePopUpHide; } 
.YouTubePopUp-Close { position:absolute; top:0; cursor:pointer; bottom:528px; right:0px; margin:auto 0; width:24px; height:24px; background:url(../img/close.png) no-repeat; background-size:24px 24px; -webkit-background-size:24px 24px; -moz-background-size:24px 24px; -o-background-size:24px 24px; } 
.YouTubePopUp-Close:hover { opacity:0.5; } 

@media all and (max-width: 768px) and (min-width: 10px){
 .YouTubePopUp-Content { max-width:90%; } 
 }

@media all and (max-width: 600px) and (min-width: 10px){
 .YouTubePopUp-Content iframe { height:320px !important; } 

 .YouTubePopUp-Close { bottom:355px; } 
 }

@media all and (max-width: 480px) and (min-width: 10px){
 .YouTubePopUp-Content iframe { height:220px !important; } 

 .YouTubePopUp-Close { bottom:252px; } 
 }

 @-webkit-keyframes YouTubePopUp { 
 0% { opacity: 0; } 
 
 100% { opacity: 1; } 
 } 
 
 @-moz-keyframes YouTubePopUp { 
 0% { opacity: 0; } 
 
 100% { opacity: 1; } 
 }

 @-o-keyframes YouTubePopUp { 
 0% { opacity: 0; } 
 
 100% { opacity: 1; } 
 }

 @keyframes YouTubePopUp { 
 0% { opacity: 0; } 
 
 100% { opacity: 1; } 
 }
 
@-webkit-keyframes YouTubePopUpHide { 
 0% { opacity: 1; } 

 100% { opacity: 0; } 
 }

 @-moz-keyframes YouTubePopUpHide { 
 0% { opacity: 1; } 
 
 100% { opacity: 0; } 
 }

 @-o-keyframes YouTubePopUpHide { 
 0% { opacity: 1; } 
 
 100% { opacity: 0; } 
 }

@keyframes YouTubePopUpHide { 
 0% { opacity: 1; } 

 100% { opacity: 0; } 
 }

 @keyframes scroll { 
 0% { opacity: 0; } 
 10% { transform: translateY(0); opacity: 1; } 
 100% { transform: translateY(15px); opacity: 0; } 
 }

 @keyframes fadein { 
 from { opacity: 0; } 
 to { opacity: 1; } 
 }
@-moz-keyframes fadein { 
 from { opacity: 0; } 
 to { opacity: 1; } 
 }
@-webkit-keyframes fadein { 
 from { opacity: 0; } 
 to { opacity: 1; } 
 }
@-o-keyframes fadein { 
 from { opacity: 0; } 
 to { opacity: 1; } 
 }