@charset "utf-8";
/*===============================================*/
/* FONT TYPE 	 		 						 */
/*===============================================*/
@font-face {
	font-family: 'AritaBuri';
	src: url('../../font/AritaBuri/AritaBuri-Medium.woff2') format('woff2'),
		 url('../../font/AritaBuri/AritaBuri-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'AritaBuri';
	src: url('../../font/AritaBuri/AritaBuri-SemiBold.woff2') format('woff2'),
		 url('../../font/AritaBuri/AritaBuri-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Nanum Myeongjo';
	src: url('../../font/NanumMyeongjo/NanumMyeongjo.woff2') format('woff2'),
		 url('../../font/NanumMyeongjo/NanumMyeongjo.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Nanum Myeongjo';
	src: url('../../font/NanumMyeongjo/NanumMyeongjoBold.woff2') format('woff2'),
		 url('../../font/NanumMyeongjo/NanumMyeongjoBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Gowun Batang';
	src: url('../../font/GowunBatang/GowunBatangRegular.woff2') format('woff2'),
		 url('../../font/GowunBatang/GowunBatangRegular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Gowun Batang';
	src: url('../../font/GowunBatang/GowunBatangBold.woff2') format('woff2'),
		 url('../../font/GowunBatang/GowunBatangBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Nanum Gothic';
	src: url('../../font/NanumGothic/NanumGothic-Regular.woff2') format('woff2'),
		 url('../../font/NanumGothic/NanumGothic-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Nanum Gothic';
	src: url('../../font/NanumGothic/NanumGothic-Bold.woff2') format('woff2'),
		 url('../../font/NanumGothic/NanumGothic-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../../font/Pretendard/Pretendard-Light.woff2') format('woff2'),
		 url('../../font/Pretendard/Pretendard-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../../font/Pretendard/Pretendard-Regular.woff2') format('woff2'),
		 url('../../font/Pretendard/Pretendard-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Prentendard';
	src: url('../../font/Pretendard/Pretendard-SemiBold.woff2') format('woff2'),
		 url('../../font/Pretendard/Pretendard-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'SCoreDream';
	src: url('../../font/SCoreDream/SCoreDreamRegular.woff2') format('woff2'),
		 url('../../font/SCoreDream/SCoreDreamRegular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'SCoreDream';
	src: url('../../font/SCoreDream/SCoreDreamBold.woff2') format('woff2'),
		 url('../../font/SCoreDream/SCoreDreamBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'GangwonEdu';
	src: url('../../font/GangwonEdu/GangwonEduAllLight.woff2') format('woff2'),
		 url('../../font/GangwonEdu/GangwonEduAllLight.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'GangwonEdu';
	src: url('../../font/GangwonEdu/GangwonEduAllBold.woff2') format('woff2'),
		 url('../../font/GangwonEdu/GangwonEduAllBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Gyeonggi Batang';
	src: url('../../font/GyeonggiBatang/GyeonggiBatangRegular.woff2') format('woff2'),
		 url('../../font/GyeonggiBatang/GyeonggiBatangRegular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Gyeonggi Batang';
	src: url('../../font/GyeonggiBatang/GyeonggiBatangBold.woff2') format('woff2'),
		 url('../../font/GyeonggiBatang/GyeonggiBatangBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'IM Hyemin';
	src: url('../../font/IMHyemin/IMHyeminRegular.woff2') format('woff2'),
		 url('../../font/IMHyemin/IMHyeminRegular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'IM Hyemin';
	src: url('../../font/IMHyemin/IMHyeminBold.woff2') format('woff2'),
		 url('../../font/IMHyemin/IMHyeminBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

body {
    min-height: -webkit-fill-available;
}

:root, :root.aritaburi {
	--body-font-family: 'AritaBuri', serif;
	--font-weight-normal: 500;
	--font-weight-bold: 600;
}

:root.myeongjo {
	--body-font-family: 'Nanum Myeongjo', serif;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
}

:root.batang {
	--body-font-family: 'Gowun Batang', serif;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
}

:root.pretendard {
	--body-font-family: 'Pretendard', sans-serif;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
}

:root.gothic {
	--body-font-family: 'Nanum Gothic', sans-serif;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
}

:root.scoredream {
	--body-font-family: 'S-CoreDream', sans-serif;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
}

:root.gangwonedu {
	--body-font-family: 'GangwonEdu', cursive;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
}

:root.gyeonggibatang {
	--body-font-family: 'Gyeonggi Batang', cursive;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
}

:root.imhyemin {
	--body-font-family: 'IM Hyemin', cursive;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
}

/* English Version Fonts */
/*=======================*/

:root.notosans { 
	--body-font-family: 'Noto Sans', sans-serif;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
}

:root.oswald { 
	--body-font-family: 'Oswald', sans-serif;
	--font-weight-normal: 300;
	--font-weight-bold: 500;
}

:root.roboto { 
	--body-font-family: 'Roboto', sans-serif;
	--font-weight-normal: 400;
	--font-weight-bold: 500;
}

:root.notoserif { 
	--body-font-family: 'Noto Serif', serif;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
}

:root.playfairdisplay { 
	--body-font-family: 'Playfair Display', serif;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
}

:root.cormorantupright { 
	--body-font-family: 'Cormorant Upright', serif;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
}

:root.charm {
	--body-font-family: 'Charm', cursive;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
}

:root.dancingscript {
	--body-font-family: 'Dancing Script', cursive;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
}

:root.edutasbeginner {
	--body-font-family: 'Edu TAS Beginner', cursive;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
}

/*===============================================*/
/* FONT SIZE 	 		 						 */
/*===============================================*/
:root, :root.medium {
	--font-size-var-one: 0px;
	--font-size-var-two: 0px;
	--font-size-var-half: 0px;
}

:root.large {
	--font-size-var-one: 1px;
	--font-size-var-two: 2px;
	--font-size-var-half: 0.5px;
}

:root.xlarge {
	--font-size-var-one: 2px;
	--font-size-var-two: 4px;
	--font-size-var-half: 1px;
}

:root.xxlarge {
	--font-size-var-one: 3px;
	--font-size-var-two: 6px;
	--font-size-var-half: 1.5px;
}

:root.small {
	--font-size-var-one: -1px;
	--font-size-var-two: -1px;
	--font-size-var-half: -0.5px;
}

:root.xsmall {
	--font-size-var-one: -2px;
	--font-size-var-two: -2px;
	--font-size-var-half: -1px;
}

/*===============================================*/
/* THEME 	 		 						     */
/*===============================================*/
:root {
	--color-default: #2C2C2E;
	--color-default-rgb: 28,28,30;
	--color-title: #363639;
	--color-paragraph: #2C2C2E;
	--color-secondary: #363639;
	--color-tertiary: #55555a;
	--color-quaternary: #86868c;
	--color-background: #ffffff;
	--color-background-rgb: 255, 255, 255;
	--color-background-inverse: #363639;
	--color-inverse: #ffffff;
	--color-inverse-rgb: 255, 255, 255;

	/* default buttons */
	--color-button-text: #2C2C2E;
	--color-button-text-hover: #2C2C2E;
	--color-button-border: #b8b8b8;
	--color-button-border-hover: #878787;

	--info-font-family: 'Noto Sans', sans-serif;
	--btn-font-family-primary: 'Noto Sans', sans-serif;
	--font-en-serif-garamond: 'EB Garamond', serif;
	--font-en-cursive-script: 'Dancing Script', cursive;
	--font-en-cursive-vibes: 'Great Vibes', cursive;
}

/* BEIGE THEME		 						     */
/*-----------------------------------------------*/
:root, :root.beige {
	/* main color */
	--theme-primary: #ccba98; /* subtitle-en */
	--theme-primary-rgb: 204,186,152;
	--theme-secondary: #7a6451; /* banner-text.dark*/
	--theme-secondary-rgb: 122,100,81;
	--theme-tertiary: #4c3e32; /* banner-venue, banner-address, revp-info */
	--theme-tertiary-rgb: 76,62,50;
	--theme-quaternary: #bba999; /* end-of-story */
	--theme-quaternary-rgb: 187,169,153;
	--theme-background-primary: #F8F7F5;
	--theme-background-secondary: #F7F5F2;
	--theme-background-tertiary: #F5F1EC;
	--theme-background-preloader: #f5f1ec;
	--theme-background-sendloading-rgb: 245, 242, 236;
	--theme-background-preloader: #f5f1ec;
	--theme-background-bottomnav: #FCF7F2;
	--theme-background-bottomnav-hover: #f5ede5;
	--color-background: #ffffff;
	--color-background-lightest:#ffffff;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-beige-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-beige-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_beige.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_beige.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_beige.gif");
	--theme-show-more-image: url("../../images/icons/arrow-beige.png");
	--theme-nav: #a58752; /* nav menu */
	--theme-nav-hover: #6c5835;
	--theme-nav-border: #e0d2c6;
	--theme-nav-border-rgb: 224,198,199;
	--theme-heart: #F5AB7F; /* main heart */
	--theme-empty-heart: #edc085; /* couple button icon */
	--theme-button-primary: #42372c; /* rsvp and map zoom */
	--theme-button-primary-hover: #241d18; 
	--theme-button-secondary: #241d18;
	--theme-button-couple: #254252; /* couple button */
	--theme-button-audio: #728c59; /* audio button */
	--theme-button-zoom: #ffd390; /* gallery zoom button */
	--theme-line: #b99f71; /* line general and carousel inactive */
	--theme-line-rgb: 185,159,113;
	--theme-line-active: #917861; /* carousel active */
	--theme-line-active-rgb: 145,120,97;
	--theme-calendar-selected: #e95a42;

	/* groom color */
	--theme-groom-primary: #6f8570; 
	--theme-groom-primary-rgb: 111,133,112;
	--theme-groom-secondary: #707664; 
	--theme-groom-secondary-rgb: 112,118,100;
	--theme-groom-tertiary: #5d966d;
	--theme-groom-tertiary-rgb: 93,150,109;
	--theme-groom-line: #e9eae7;
	--theme-groom-background-primary: #edeeeb;
	--theme-groom-background-secondary: #f9faf9;
	--theme-groom-border: #d0d3cb;
	--theme-message-line-groom: url("/static/images/icons/letter-line-green.png");

	/* bride color */
	--theme-bride-primary: #ba7d60;
	--theme-bride-primary-rgb: 186,125,96;
	--theme-bride-secondary: #8b6254;
	--theme-bride-secondary-rgb: 139,98,84;
	--theme-bride-tertiary: #c47b58;
	--theme-bride-tertiary-rgb: 196, 123, 88;
	--theme-bride-line: #eee5e2;
	--theme-bride-background-primary: #f3edeb;
	--theme-bride-background-secondary: #fdfbfb;
	--theme-bride-border: #e4d7d2;
	--theme-message-line-bride: url("/static/images/icons/letter-line-orange.png");
}

/* GREEN THEME		 						     */
/*-----------------------------------------------*/
:root.green {
	/* main color */
	--theme-primary: #b5cda4; /* subtitle-en */
	--theme-primary-rgb: 181,205,164;
	--theme-secondary: #305e30; /* banner-text.dark*/
	--theme-secondary-rgb: 48,94,48;
	--theme-tertiary: #1c371c; /* banner-venue, banner-address, revp-info */
	--theme-tertiary-rgb: 28,55,28;
	--theme-quaternary: #93b393; /* end-of-story */
	--theme-quaternary-rgb: 147,179,147;
	--theme-background-primary: #F8FBF8;
	--theme-background-secondary: #F5F9F5;
	--theme-background-tertiary: #F0F6F0;
	--theme-background-preloader: #f7fef7;
	--theme-background-sendloading-rgb: 240, 246, 240;
	--theme-background-bottomnav: #F3FAF3;
	--theme-background-bottomnav-hover: #e8f1e8;
	--color-background: #ffffff;
	--color-background-lightest:#ffffff;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-green-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-green-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_green.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_green.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_green.gif");
	--theme-show-more-image: url("../../images/icons/arrow-green.png");
	--theme-nav: #809e84; /* nav menu */
	--theme-nav-hover: #35603a;
	--theme-nav-border: #c6e0d2;
	--theme-nav-border-rgb: 198,224,210;
	--theme-heart: #ff957a; /* main heart */
	--theme-empty-heart: #edc085; /* couple button icon */
	--theme-button-primary: #42372c; /* rsvp and map zoom */
	--theme-button-primary-hover: #241d18; 
	--theme-button-secondary: #0d130d;
	--theme-button-couple: #254252; /* couple button */
	--theme-button-audio: #728c59; /* audio button */
	--theme-button-zoom: #ffd390; /* gallery zoom button */
	--theme-line: #91b160; /* line general and carousel inactive */
	--theme-line-rgb: 145,177,96;
	--theme-line-active: #3a5b3d; /* carousel active */
	--theme-line-active-rgb: 58,91,61;
	--theme-calendar-selected: #e95a42;

	/* groom color */
	--theme-groom-primary: #6f8570; 
	--theme-groom-primary-rgb: 111,133,112;
	--theme-groom-secondary: #707664; 
	--theme-groom-secondary-rgb: 112,118,100;
	--theme-groom-tertiary: #5d966d;
	--theme-groom-tertiary-rgb: 93,150,109;
	--theme-groom-line: #e9eae7;
	--theme-groom-background-primary: #edeeeb;
	--theme-groom-background-secondary: #f9faf9;
	--theme-groom-border: #d0d3cb;
	--theme-message-line-groom: url("/static/images/icons/letter-line-green.png");

	/* bride color */
	--theme-bride-primary: #ba7d60;
	--theme-bride-primary-rgb: 186,125,96;
	--theme-bride-secondary: #8b6254;
	--theme-bride-secondary-rgb: 139,98,84;
	--theme-bride-tertiary: #c47b58;
	--theme-bride-tertiary-rgb: 196, 123, 88;
	--theme-bride-line: #eee5e2;
	--theme-bride-background-primary: #f3edeb;
	--theme-bride-background-secondary: #fdfbfb;
	--theme-bride-border: #e4d7d2;
	--theme-message-line-bride: url("/static/images/icons/letter-line-orange.png");
}

/* PINK THEME		 						     */
/*-----------------------------------------------*/
:root.pink {
	/* main color */
	--theme-primary: #DBB8B8; /* subtitle-en */
	--theme-primary-rgb: 219,184,184;
	--theme-secondary: #623232; /* banner-text.dark*/
	--theme-secondary-rgb: 138,69,69;
	--theme-tertiary: #482525; /* banner-venue, banner-address, revp-info */
	--theme-tertiary-rgb: 72,37,37;
	--theme-quaternary: #ba8c8c; /* end-of-story */
	--theme-quaternary-rgb: 186,140,140;
	--theme-background-primary: #FDF8F8;
	--theme-background-secondary: #FBF5F5;
	--theme-background-tertiary: #F7F0F0;
	--theme-background-preloader: #fff6fa;
	--theme-background-sendloading-rgb: 247, 240, 240;
	--theme-background-bottomnav: #FBF3F5;
	--theme-background-bottomnav-hover: #f3e7ea;
	--color-background: #ffffff;
	--color-background-lightest:#ffffff;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-pink-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-pink-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_pink.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_pink.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_pink.gif");
	--theme-show-more-image: url("../../images/icons/arrow-pink.png");
	--theme-nav: #be889c; /* nav menu */
	--theme-nav-hover: #784244;
	--theme-nav-border: #e0c6c7;
	--theme-nav-border-rgb: 224,198,199;
	--theme-heart: #f39fb8; /* main heart */
	--theme-empty-heart: #f4bbc8; /* couple button icon */
	--theme-button-primary: #453e41; /* rsvp and map zoom */
	--theme-button-primary-hover: #2a2628; 
	--theme-button-secondary: #2a2628;
	--theme-button-couple: #254252; /* couple button */
	--theme-button-audio: #fa7991; /* audio button */
	--theme-button-zoom: #ffcfe6; /* gallery zoom button */
	--theme-line: #c89191; /* line general and carousel inactive */
	--theme-line-rgb: 200,145,145;
	--theme-line-active: #8a4545; /* carousel active */
	--theme-line-active-rgb: 138,69,69;
	--theme-calendar-selected: #e94270;

	/* groom color */
	--theme-groom-primary: #627baa; 
	--theme-groom-primary-rgb: 148,165,197;
	--theme-groom-secondary: #536573; 
	--theme-groom-secondary-rgb: 83,101,115;
	--theme-groom-tertiary: #6f86b1;
	--theme-groom-tertiary-rgb: 111, 134, 177;
	--theme-groom-line: #dee5e8;
	--theme-groom-background-primary: #e9edf0;
	--theme-groom-background-secondary: #f5f7f8;
	--theme-groom-border: #d0dae2;
	--theme-message-line-groom: url("/static/images/icons/letter-line-blue.png");

	/* bride color */
	--theme-bride-primary: #b0686f;
	--theme-bride-primary-rgb: 202,154,159;
	--theme-bride-secondary: #a26069;
	--theme-bride-secondary-rgb: 162,96,105;
	--theme-bride-tertiary: #b77581;
	--theme-bride-tertiary-rgb: 183, 117, 129;
	--theme-bride-line: #e8dede;
	--theme-bride-background-primary: #efeaeb;
	--theme-bride-background-secondary: #f8f5f5;
	--theme-bride-border: #e0d2d4;
	--theme-message-line-bride: url("/static/images/icons/letter-line-pink.png");
}

/* GRAY THEME		 						     */
/*-----------------------------------------------*/
:root.gray {
	/* main color */
	--theme-primary: #bbbbbb; /* subtitle-en */
	--theme-primary-rgb: 187,187,187;
	--theme-secondary: #484848; /* banner-text.dark*/
	--theme-secondary-rgb: 72,72,72;
	--theme-tertiary: #48484A; /* banner-venue, banner-address, revp-info */
	--theme-tertiary-rgb: 72,72,74;
	--theme-quaternary: #aaaaaa; /* end-of-story */
	--theme-quaternary-rgb: 170,170,170;
	--theme-background-primary: #f9f9f9;
	--theme-background-secondary: #f6f6f6;
	--theme-background-tertiary: #F1F1F1;
	--theme-background-preloader: #f6f6f6;
	--theme-background-sendloading-rgb: 241, 241, 241;
	--theme-background-bottomnav: #F3F3F3;
	--theme-background-bottomnav-hover: #E9E9E9;
	--color-background: #ffffff;
	--color-background-lightest:#ffffff;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-pink-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-pink-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_gray.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_gray.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_gray.gif");
	--theme-show-more-image: url("../../images/icons/arrow-gray.png");
	--theme-nav: #7c7c7c; /* nav menu */
	--theme-nav-hover: #2C2C2E;
	--theme-nav-border: #d6d0d0;
	--theme-nav-border-rgb: 214,208,208;
	--theme-heart: #f39fb8; /* main heart */
	--theme-empty-heart: #f4bbc8; /* couple button icon */
	--theme-button-primary: #323234; /* rsvp and map zoom */
	--theme-button-primary-hover: #1f1f20; 
	--theme-button-secondary: #1C1C1E;
	--theme-button-couple: #254252; /* couple button */
	--theme-button-audio: #fa7991; /* audio button */
	--theme-button-zoom: #ffcfe6; /* gallery zoom button */
	--theme-line: #9a9a9a; /* line general and carousel inactive */
	--theme-line-rgb: 154,154,154;
	--theme-line-active: #787878; /* carousel active */
	--theme-line-active-rgb: 120,120,120;
	--theme-calendar-selected: #e94270;

	/* groom color */
	--theme-groom-primary: #627baa; 
	--theme-groom-primary-rgb: 148,165,197;
	--theme-groom-secondary: #536573; 
	--theme-groom-secondary-rgb: 83,101,115;
	--theme-groom-tertiary: #6f86b1;
	--theme-groom-tertiary-rgb: 111, 134, 177;
	--theme-groom-line: #dee5e8;
	--theme-groom-background-primary: #e9edf0;
	--theme-groom-background-secondary: #f5f7f8;
	--theme-groom-border: #d0dae2;
	--theme-message-line-groom: url("/static/images/icons/letter-line-blue.png");

	/* bride color */
	--theme-bride-primary: #b0686f;
	--theme-bride-primary-rgb: 202,154,159;
	--theme-bride-secondary: #a26069;
	--theme-bride-secondary-rgb: 162,96,105;
	--theme-bride-tertiary: #b77581;
	--theme-bride-tertiary-rgb: 183, 117, 129;
	--theme-bride-line: #e8dede;
	--theme-bride-background-primary: #efeaeb;
	--theme-bride-background-secondary: #f8f5f5;
	--theme-bride-border: #e0d2d4;
	--theme-message-line-bride: url("/static/images/icons/letter-line-pink.png");
}

/*===============================================*/
/* NEW THEMES: 8 TYPES OF THEMES		 		 */
/*===============================================*/

/* BROWN THEME — richer, warmer, more contrast than BEIGE          */
/*-----------------------------------------------------------------*/
:root.brown {
	/* main color (베이지보다 한 톤 더 골드브라운/채도↑, 대비↑) */
	--theme-primary: #C8A372; /* subtitle-en */
	--theme-primary-rgb: 200,163,114;
	--theme-secondary: #5B4636; /* banner-text.dark — 가독성 강한 다크브라운 */
	--theme-secondary-rgb: 91,70,54;
	--theme-tertiary: #2E231B; /* banner-venue/address/rsvp-info — 깊이감 */
	--theme-tertiary-rgb: 46,35,27;
	--theme-quaternary: #AF937A; /* end-of-story — 웜 뉴트럴 브라운 */
	--theme-quaternary-rgb: 175,147,122;
  
	/* background (화이트 대신 #f8f8f8와 조합해도 컬러가 선명해 보이도록) */
	--theme-background-primary:   #F5F1EC; /* 가장 밝은 면 */
	--theme-background-secondary: #F2EFEA; /* warm grey-beige mix */
	--theme-background-tertiary:  #EBE4DD; /* 살짝 더 베이지 기운 */
	--theme-background-preloader: #f5f1ec;
	--theme-background-sendloading-rgb: 245, 242, 236;
	--theme-background-bottomnav: #F7F3EE;
	--theme-background-bottomnav-hover: #EEE8E1;
	--color-background: #F0F0F0;
	--color-background-lightest:#f7f7f7;
  
	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-beige-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-beige-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_beige.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_beige.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_beige.gif");
	--theme-show-more-image: url("../../images/icons/arrow-beige.png");
	 
	/* nav — 명암/채도 상향으로 beige 대비 뚜렷 */
	--theme-nav: #9B6B3E;
	--theme-nav-hover: #6D4A2C;
	--theme-nav-border: #D8C7B6;
	--theme-nav-border-rgb: 216,199,182;
  
	/* heart — ★ 베이지와 완전 동일 유지 */
	--theme-heart: #F5AB7F;       /* main heart (KEEP) */
	--theme-empty-heart: #EDC085; /* couple button icon (KEEP) */
  
	/* buttons — 회색 배경(#f8f8f8) 위에서 또렷하게 보이도록 깊은 톤 */
	--theme-button-primary: #37281F;       /* RSVP/map */
	--theme-button-primary-hover: #1F1611;
	--theme-button-secondary: #1F1611;
	--theme-button-couple: #254252;        /* (KEEP 공통 네이비) */
	--theme-button-audio: #728C59;         /* (KEEP) */
	--theme-button-zoom:  #FFD390;         /* (KEEP 골드 포인트) */
  
	/* line — 베이지보다 한 단계 따뜻하고 진한 브라운 */
	--theme-line: #AD8A61;
	--theme-line-rgb: 173,138,97;
	--theme-line-active: #7D6047;
	--theme-line-active-rgb: 125,96,71;
  
	--theme-calendar-selected: #E95A42;
  
	/* groom — ★ 베이지와 완전 동일 유지 */
	--theme-groom-primary: #6F8570; 
	--theme-groom-primary-rgb: 111,133,112;
	--theme-groom-secondary: #707664; 
	--theme-groom-secondary-rgb: 112,118,100;
	--theme-groom-tertiary: #5D966D;
	--theme-groom-tertiary-rgb: 93,150,109;
	--theme-groom-line: #E9EAE7;
	--theme-groom-background-primary: #EDEEEB;
	--theme-groom-background-secondary: #F9FAF9;
	--theme-groom-border: #D0D3CB;
	--theme-message-line-groom: url("/static/images/icons/letter-line-green.png");
  
	/* bride — ★ 베이지와 완전 동일 유지 */
	--theme-bride-primary: #BA7D60;
	--theme-bride-primary-rgb: 186,125,96;
	--theme-bride-secondary: #8B6254;
	--theme-bride-secondary-rgb: 139,98,84;
	--theme-bride-tertiary: #C47B58;
	--theme-bride-tertiary-rgb: 196,123,88;
	--theme-bride-line: #EEE5E2;
	--theme-bride-background-primary: #F3EDEB;
	--theme-bride-background-secondary: #FDFBFB;
	--theme-bride-border: #E4D7D2;
	--theme-message-line-bride: url("/static/images/icons/letter-line-orange.png");
}

/* MODERN ROSE THEME — pink & gray harmony for #f7f7f7 */
/*-----------------------------------------------------------------*/
:root.rose {
	/* main color — 부드러운 핑크, 붉은기 ↓, 그레이 조화 ↑ */
	--theme-primary: #e2aeb7; /* subtitle-en — 차분한 로즈핑크 */
	--theme-primary-rgb: 231,188,196;
	--theme-secondary: #5A4A50; /* banner-text.dark — 그레이시 로즈 */
	--theme-secondary-rgb: 90,74,80;
	--theme-tertiary: #3E3337; /* banner-venue/address/rsvp-info — 딥 그레이 브라운 */
	--theme-tertiary-rgb: 62,51,55;
	--theme-quaternary: #C5A8AD; /* end-of-story — 핑크+그레이 중간톤 */
	--theme-quaternary-rgb: 197,168,173;

	/* backgrounds — gray 톤을 살짝 섞은 따뜻한 뉴트럴 */
	--theme-background-primary: #FBF7F8;
	--theme-background-secondary: #F5F2F3;
	--theme-background-tertiary: #EDE8E9;
	--theme-background-preloader: #eeeeee;
	--theme-background-sendloading-rgb: 238, 238, 238;
	--theme-background-bottomnav: #F2EDEE;
	--theme-background-bottomnav-hover: #E9E4E5;
	--color-background: #F7F7F7;
	--color-background-lightest:#FFFFFF;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart2-blue-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart1-blue-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_pink.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_pink.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_rose.gif");
	--theme-show-more-image: url("../../images/icons/arrow-champagne.png");

	/* nav — 핑크그레이로 부드럽게 */
	--theme-nav: #A17C86;
	--theme-nav-hover: #5A4A50;
	--theme-nav-border: #E0D4D7;
	--theme-nav-border-rgb: 224,212,215;

	/* heart — 기존 핑크 유지 */
	--theme-heart: #F39FB8; 
	--theme-empty-heart: #F4BBC8;

	/* buttons — 딥그레이로 고급스럽게 */
	--theme-button-primary: #3A3234;
	--theme-button-primary-hover: #221D1E; 
	--theme-button-secondary: #221D1E;
	--theme-button-couple: #254252;
	--theme-button-audio: #B98493; /* 회색 핑크 오디오 버튼 */
	--theme-button-zoom: #F0D6DC; /* gallery zoom button */

	/* line — 회색빛 핑크라인으로 정제 */
	--theme-line: #B79AA1;
	--theme-line-rgb: 183,154,161;
	--theme-line-active: #7B636A;
	--theme-line-active-rgb: 123,99,106;

	--theme-calendar-selected: #E25D8A;

	/* groom color — 동일 유지 */
	--theme-groom-primary: #627BAA; 
	--theme-groom-primary-rgb: 98,123,170;
	--theme-groom-secondary: #536573; 
	--theme-groom-secondary-rgb: 83,101,115;
	--theme-groom-tertiary: #6F86B1;
	--theme-groom-tertiary-rgb: 111,134,177;
	--theme-groom-line: #DEE5E8;
	--theme-groom-background-primary: #E9EDF0;
	--theme-groom-background-secondary: #F5F7F8;
	--theme-groom-border: #D0DAE2;
	--theme-message-line-groom: url("/static/images/icons/letter-line-blue.png");

	/* bride color — 핑크 중심, 회색조 조화 */
	--theme-bride-primary: #B47E88;
	--theme-bride-primary-rgb: 180,126,136;
	--theme-bride-secondary: #9E6D78;
	--theme-bride-secondary-rgb: 158,109,120;
	--theme-bride-tertiary: #C19099;
	--theme-bride-tertiary-rgb: 193,144,153;
	--theme-bride-line: #E7DDDF;
	--theme-bride-background-primary: #F4EDEF;
	--theme-bride-background-secondary: #FBF8F8;
	--theme-bride-border: #E2D5D8;
	--theme-message-line-bride: url("/static/images/icons/letter-line-pink.png");
}

/* OLIVE (DEEP SAGE) THEME — same tone, richer and more defined colors */
/*-----------------------------------------------------------------*/
:root.olive {
	/* main color — 기존 톤 유지, 채도 + 약간 명도 ↓ */
	--theme-primary: #A2C095; /* subtitle-en — 세이지 그린 강화 */
	--theme-primary-rgb: 162,192,149;
	--theme-secondary: #304E34; /* banner-text.dark — 명암 대비 ↑ */
	--theme-secondary-rgb: 48,78,52;
	--theme-tertiary: #1D331F; /* banner-venue/address/rsvp-info — 깊이감 강화 */
	--theme-tertiary-rgb: 29,51,31;
	--theme-quaternary: #879F80; /* end-of-story — 올리브 회색기 강화 */
	--theme-quaternary-rgb: 135,159,128;

	/* background — 기존 톤 유지, 명도 ↓ 살짝 진한 느낌 */
	--theme-background-primary:   #EEF2EE;
	--theme-background-secondary: #E8ECE8;
	--theme-background-tertiary:  #E3E8E3;
	--theme-background-preloader: #ecf0ec;
	--theme-background-sendloading-rgb: 236, 240, 236;
	--theme-background-bottomnav: #EDF1ED;
	--theme-background-bottomnav-hover: #E4E8E4;
	--color-background: #F0F0F0;
	--color-background-lightest:#f7f7f7;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart2-beige-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart1-champagne-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_olive.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_olive.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_green.gif");
	--theme-show-more-image: url("../../images/icons/arrow-green.png");

	/* nav — 세이지 명암 대비를 높여 또렷하게 */
	--theme-nav: #739875;
	--theme-nav-hover: #2E5633;
	--theme-nav-border: #C2D6C5;
	--theme-nav-border-rgb: 194,214,197;

	/* heart — 그대로 유지 */
	--theme-heart: #ff957a;
	--theme-empty-heart: #edc085;

	/* buttons — 살짝 더 짙은 브라운톤으로 조정 */
	--theme-button-primary: #3B3129;
	--theme-button-primary-hover: #201A14;
	--theme-button-secondary: #0D130D;
	--theme-button-couple: #254252;
	--theme-button-audio: #6D875A;
	--theme-button-zoom: #FFD390;

	/* line — 더 진한 세이지 그린 */
	--theme-line: #7E9E68;
	--theme-line-rgb: 126,158,104;
	--theme-line-active: #435E47;
	--theme-line-active-rgb: 67,94,71;

	--theme-calendar-selected: #E95A42;

	/* groom color — 동일 유지 */
	--theme-groom-primary: #6f8570; 
	--theme-groom-primary-rgb: 111,133,112;
	--theme-groom-secondary: #707664; 
	--theme-groom-secondary-rgb: 112,118,100;
	--theme-groom-tertiary: #5d966d;
	--theme-groom-tertiary-rgb: 93,150,109;
	--theme-groom-line: #e9eae7;
	--theme-groom-background-primary: #edeeeb;
	--theme-groom-background-secondary: #f9faf9;
	--theme-groom-border: #d0d3cb;
	--theme-message-line-groom: url("/static/images/icons/letter-line-green.png");

	/* bride color — 동일 유지 */
	--theme-bride-primary: #ba7d60;
	--theme-bride-primary-rgb: 186,125,96;
	--theme-bride-secondary: #8b6254;
	--theme-bride-secondary-rgb: 139,98,84;
	--theme-bride-tertiary: #c47b58;
	--theme-bride-tertiary-rgb: 196,123,88;
	--theme-bride-line: #eee5e2;
	--theme-bride-background-primary: #f3edeb;
	--theme-bride-background-secondary: #fdfbfb;
	--theme-bride-border: #e4d7d2;
	--theme-message-line-bride: url("/static/images/icons/letter-line-orange.png");
}

/* CHAMPAGNE THEME — Sweet Champagne (refined, natural beige+pink) */
/*-----------------------------------------------------------------*/
:root.champagne {
	/* main color — 로지톤을 베이지 쪽으로 한 단계 더 자연스럽게 */
	--theme-primary:   #e1c2bb; /* subtitle-en — rosy-beige, 더 맑고 부드럽게 */
	--theme-primary-rgb: 231,206,201;
	--theme-secondary: #5F3D3A; /* banner-text.dark — 과한 적색기 ↓, 가독성↑ */
	--theme-secondary-rgb: 95,61,58;
	--theme-tertiary:  #4A2C2E; /* banner-venue/address/rsvp-info — 딥 로즈브라운 */
	--theme-tertiary-rgb: 74,44,46;
	--theme-quaternary: #D2B0AE; /* end-of-story — 샴페인 로즈를 더 뉴트럴하게 */
	--theme-quaternary-rgb: 210,176,174;

	/* backgrounds — pink 기반 유지 + beige 섹션과 자연스럽게 믹스 */
	--theme-background-primary:   #FDF7F6; /* 거의 화이트에 가까운 샴페인 핑크 */
	--theme-background-secondary: #F8F0EE; /* 따뜻한 아이보리 핑크 */
	--theme-background-tertiary:  #F3E8E4; /* 섹션 전환 대비용, 베이지 기 혼합 */
	--theme-background-preloader: #F6EFEA;

	/* bottom nav — 베이지 계열과 자연스럽게 연결 */
	--theme-background-bottomnav:       #FAF2EC;
	--theme-background-bottomnav-hover: #F3E7E0;

	/* 섹션에 삽입될 공통 베이스(베이지 섹션) */
	--color-background:        #F5F1EC;
	--color-background-lightest:#F8F7F5;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-champagne-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-champagne-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_champagne.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_champagne.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_beige.gif");
	--theme-show-more-image: url("../../images/icons/arrow-champagne.png");

	/* nav — 베이지/핑크 배경 모두에서 조화롭게 보이는 로즈베이지 */
	--theme-nav: #c59fa5;
	--theme-nav-hover: #5F3D3A;
	--theme-nav-border: #E9DADA;
	--theme-nav-border-rgb: 233,218,218;

	/* ♥ hearts — Pink와 동일 유지 (브랜드 일관성) */
	--theme-heart: #F39FB8;
	--theme-empty-heart: #F4BBC8;

	/* buttons — Pink와 동일 유지, 배경 위 대비 충분 */
	--theme-button-primary: #453E41;
	--theme-button-primary-hover: #2A2628; 
	--theme-button-secondary: #2A2628;
	--theme-button-couple: #254252;
	--theme-button-audio: #FA7991;
	--theme-button-zoom:  #FFCFE6;

	/* lines — 라인도 베이지+로즈 사이를 자연스럽게 연결 */
	--theme-line: #D6B5B7;
	--theme-line-rgb: 214,181,183;
	--theme-line-active: #7B4A4F;
	--theme-line-active-rgb: 123,74,79;

	--theme-calendar-selected: #E94270; /* 유지 */

	/* groom — Pink와 동일 유지 */
	--theme-groom-primary: #627BAA; 
	--theme-groom-primary-rgb: 98,123,170;
	--theme-groom-secondary: #536573; 
	--theme-groom-secondary-rgb: 83,101,115;
	--theme-groom-tertiary: #6F86B1;
	--theme-groom-tertiary-rgb: 111,134,177;
  
	--theme-groom-line: #DEE5E8;
	--theme-groom-background-primary: #E9EDF0;
	--theme-groom-background-secondary: #F5F7F8;
	--theme-groom-border: #D0DAE2;
	--theme-message-line-groom: url("/static/images/icons/letter-line-blue.png");

	/* bride — Pink와 동일 유지 */
	--theme-bride-primary: #B0686F;
	--theme-bride-primary-rgb: 202,154,159;
	--theme-bride-secondary: #A26069;
	--theme-bride-secondary-rgb: 162,96,105;
	--theme-bride-tertiary: #B77581;
	--theme-bride-tertiary-rgb: 183,117,129;
	--theme-bride-line: #E8DEDE;
	--theme-bride-background-primary: #EFEAEB;
	--theme-bride-background-secondary: #F8F5F5;
	--theme-bride-border: #E0D2D4;
	--theme-message-line-bride: url("/static/images/icons/letter-line-pink.png");
}

/* BLUE THEME — Clear & Deep Blue refinement version */
/*----------------------------------------------------------------*/
:root.blue {
	/* main color — 명도 살짝 낮추고 채도 살짝 올림 */
	--theme-primary: #B0C9E5; /* subtitle-en, slightly deeper sky blue */
	--theme-primary-rgb: 176,201,229;
	--theme-secondary: #2E5775; /* banner-text.dark, 한층 진한 네이비블루 */
	--theme-secondary-rgb: 46,87,117;
	--theme-tertiary: #1C3F55; /* banner-venue/address/rsvp-info, 고명도 포인트 */
	--theme-tertiary-rgb: 28,63,85;
	--theme-quaternary: #8BAEC8; /* end-of-story */
	--theme-quaternary-rgb: 139,174,200;

	/* background — 여전히 맑고 청명하지만 명도 밸런스 조정 */
	--theme-background-primary: #F6F9FC;
	--theme-background-secondary: #F2F6FA;
	--theme-background-tertiary: #ECF2F8;
	--theme-background-preloader: #e0e8f7;
	--theme-background-sendloading-rgb: 224, 232, 247;
	--theme-background-bottomnav: #F1F6FA;
	--theme-background-bottomnav-hover: #E6EEF5;
	--color-background: #FFFFFF;
	--color-background-lightest: #FFFFFF;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-blue-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-blue-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_blue.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_blue.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_blue.gif");
	--theme-show-more-image: url("../../images/icons/arrow-blue.png");

	/* nav — 명암 대비 강화 */
	--theme-nav: #6D8FB1;
	--theme-nav-hover: #3C627E;
	--theme-nav-border: #D2E0EB;
	--theme-nav-border-rgb: 210,224,235;

	/* heart — pink theme과 동일 유지 */
	--theme-heart: #F39FB8;
	--theme-empty-heart: #F4BBC8;

	/* buttons — 이전보다 약간 더 진한 네이비블루로 강조 */
	--theme-button-primary: #2A4761;         /* RSVP/map */
	--theme-button-primary-hover: #1A2E3F;
	--theme-button-secondary: #1A2E3F;
	--theme-button-couple: #254252;          /* 공통 navy */
	--theme-button-audio: #6D95AE;           /* 진한 블루톤 오디오 */
	--theme-button-zoom: #D4E6F5;            /* gallery zoom button - 은은한 하늘톤 */

	/* line — 대비 강화 */
	--theme-line: #91B3CE;
	--theme-line-rgb: 145,179,206;
	--theme-line-active: #4F7A9B;
	--theme-line-active-rgb: 79,122,155;

	--theme-calendar-selected: #E94270; /* (pink 공통 포인트 유지) */

	/* groom color — pink theme 동일 */
	--theme-groom-primary: #627BAA; 
	--theme-groom-primary-rgb: 98,123,170;
	--theme-groom-secondary: #536573; 
	--theme-groom-secondary-rgb: 83,101,115;
	--theme-groom-tertiary: #6F86B1;
	--theme-groom-tertiary-rgb: 111,134,177;
	--theme-groom-line: #DEE5E8;
	--theme-groom-background-primary: #E9EDF0;
	--theme-groom-background-secondary: #F5F7F8;
	--theme-groom-border: #D0DAE2;
	--theme-message-line-groom: url("/static/images/icons/letter-line-blue.png");

	/* bride color — pink theme 동일 */
	--theme-bride-primary: #B0686F;
	--theme-bride-primary-rgb: 202,154,159;
	--theme-bride-secondary: #A26069;
	--theme-bride-secondary-rgb: 162,96,105;
	--theme-bride-tertiary: #B77581;
	--theme-bride-tertiary-rgb: 183,117,129;
	--theme-bride-line: #E8DEDE;
	--theme-bride-background-primary: #EFEAEB;
	--theme-bride-background-secondary: #F8F5F5;
	--theme-bride-border: #E0D2D4;
	--theme-message-line-bride: url("/static/images/icons/letter-line-pink.png");
}

/* LAVENDER THEME — clearer lavender + pink theme's heart/groom/bride */
/*-------------------------------------------------------------------*/
:root.lavender {
	/* main color — 라벤더를 더 맑게 톤업 */
	--theme-primary: #D6C9E9; /* subtitle-en, clear lavender */
	--theme-primary-rgb: 214,201,233;
	--theme-secondary: #4E3D68; /* banner-text.dark, 선명한 보라 네이비 */
	--theme-secondary-rgb: 78,61,104;
	--theme-tertiary: #35274A;  /* banner-venue/address/rsvp-info, 깊이감 */
	--theme-tertiary-rgb: 53,39,74;
	--theme-quaternary: #B7A3CF; /* end-of-story, 은은한 라벤더 그레이 */
	--theme-quaternary-rgb: 183,163,207;

	/* backgrounds — 라벤더 빛을 더 깨끗하게 */
	--theme-background-primary:   #F9F7FB; /* 가장 밝은 라벤더 화이트 */
	--theme-background-secondary: #F3EFF8; /* 은은한 라이트 라벤더 */
	--theme-background-tertiary:  #EEE8F4; /* 한 톤 더 보라빛 */
	--theme-background-preloader: #F3EFF8;
	--theme-background-sendloading-rgb: 243, 239, 248;

	/* bottom nav — 라벤더 계열로 통일 */
	--theme-background-bottomnav: #F1ECF6;
	--theme-background-bottomnav-hover:  #E8E1F1;

	--color-background: #FFFFFF;
	--color-background-lightest:#FFFFFF;

	/* components (assets는 필요시 lavender 버전으로 교체 가능) */
	--theme-preloader-image: url("../../images/preloader/heart1-lavender-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-blue-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_lavender.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_lavender.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_lavender.gif");
	--theme-show-more-image: url("../../images/icons/arrow-lavender.png");

	/* nav — 더 맑은 라벤더 톤 */
	--theme-nav: #9E8FBE;
	--theme-nav-hover: #5B4A83;
	--theme-nav-border: #E2D9EE;
	--theme-nav-border-rgb: 226,217,238;

	/* ♥ hearts — FROM PINK THEME (동일 적용) */
	--theme-heart: #F39FB8;
	--theme-empty-heart: #F4BBC8;

	/* buttons — 더 어두운 보라로 대비 강화 */
	--theme-button-primary: #2F253A;            /* RSVP/map */
	--theme-button-primary-hover: #1C1722;
	--theme-button-secondary: #1C1722;
	--theme-button-couple: #5A466B;             /* 기존 purple 계열과의 연결 */
	--theme-button-audio: #8F7AA2;
	--theme-button-zoom: #F3DDF2;               /* 아주 연한 핑크퍼플 */

	/* line — 라벤더 그레이 */
	--theme-line: #BEADD2;
	--theme-line-rgb: 190,173,210;
	--theme-line-active: #7A6392;
	--theme-line-active-rgb: 122,99,146;

	--theme-calendar-selected: #E94270; /* 공통 포인트 유지 */

	/* groom color — FROM PINK THEME (동일 적용) */
	--theme-groom-primary: #627BAA; 
	--theme-groom-primary-rgb: 98,123,170;
	--theme-groom-secondary: #536573; 
	--theme-groom-secondary-rgb: 83,101,115;
	--theme-groom-tertiary: #6F86B1;
	--theme-groom-tertiary-rgb: 111,134,177;
	--theme-groom-line: #DEE5E8;
	--theme-groom-background-primary: #E9EDF0;
	--theme-groom-background-secondary: #F5F7F8;
	--theme-groom-border: #D0DAE2;
	--theme-message-line-groom: url("/static/images/icons/letter-line-blue.png");

	/* bride color — FROM PINK THEME (동일 적용) */
	--theme-bride-primary: #B0686F;
	--theme-bride-primary-rgb: 202,154,159;
	--theme-bride-secondary: #A26069;
	--theme-bride-secondary-rgb: 162,96,105;
	--theme-bride-tertiary: #B77581;
	--theme-bride-tertiary-rgb: 183,117,129;
	--theme-bride-line: #E8DEDE;
	--theme-bride-background-primary: #EFEAEB;
	--theme-bride-background-secondary: #F8F5F5;
	--theme-bride-border: #E0D2D4;
	--theme-message-line-bride: url("/static/images/icons/letter-line-pink.png");
}

/* PINK-LAVENDER THEME — Pink main + Lavender sub sections */
/*-----------------------------------------------------------------*/
:root.lilac {
	/* main color (핑크 무드 유지) */
	--theme-primary: #E5C7CF; /* 라이트 로즈핑크 */
	--theme-primary-rgb: 229,199,207;
	--theme-secondary: #6A3A3F; /* 로즈브라운 */
	--theme-secondary-rgb: 106,58,63;
	--theme-tertiary: #4B242D;  /* 딥 로즈브라운 */
	--theme-tertiary-rgb: 75,36,45;
	--theme-quaternary: #D1AAB4; /* 로지 핑크 */
	--theme-quaternary-rgb: 209,170,180;

	/* background — 라벤더 기운을 은은하게 */
	--theme-background-primary:   #FCF6F8; /* 핑크 화이트 */
	--theme-background-secondary: #F8EFF3; /* 핑크+라벤더 */
	--theme-background-tertiary:  #F3E6ED; /* 대비용 */
	--theme-background-preloader: #F8EFF3;
	--theme-background-sendloading-rgb: 248,239,243;

	/* 섹션에 삽입될 공통 sub 배경 (Lavender) */
	--color-background: #F7F4FA; /* 소프트 라일락 */

	--theme-background-bottomnav: #FAF1F5;
	--theme-background-bottomnav-hover: #F0E6EE;

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-lavender-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-blue-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_lilac.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_lilac.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_lilac.gif");
	--theme-show-more-image: url("../../images/icons/arrow-lilac.png");

	/* nav — 핑크 중심, 경계선에 라벤더 기운 */
	--theme-nav: #C9A3AD;
	--theme-nav-hover: #6A3A3F;
	--theme-nav-border: #E4D6EA;          /* 라벤더 톤 */
	--theme-nav-border-rgb: 228,214,234;

	/* heart / buttons — ★ pink 테마와 동일 유지 */
	--theme-heart: #f39fb8;
	--theme-empty-heart: #f4bbc8;
	--theme-button-primary: #453e41;
	--theme-button-primary-hover: #2a2628; 
	--theme-button-secondary: #2a2628;
	--theme-button-couple: #254252;
	--theme-button-audio: #fa7991;
	--theme-button-zoom: #ffcfe6;

	/* line — 기본은 핑크, active에 라일락 기운 */
	--theme-line: #D6AAB2;
	--theme-line-rgb: 214,170,178;
	--theme-line-active: #8B6A92;         /* 라일락 그레이 */
	--theme-line-active-rgb: 139,106,146;

	--theme-calendar-selected: #e94270;    /* 유지 */

	/* groom — ★ pink과 동일 유지 */
	--theme-groom-primary: #627baa; 
	--theme-groom-primary-rgb: 148,165,197;
	--theme-groom-secondary: #536573; 
	--theme-groom-secondary-rgb: 83,101,115;
	--theme-groom-tertiary: #6f86b1;
	--theme-groom-tertiary-rgb: 111,134,177;
	--theme-groom-line: #dee5e8;
	--theme-groom-background-primary: #e9edf0;
	--theme-groom-background-secondary: #f5f7f8;
	--theme-groom-border: #d0dae2;
	--theme-message-line-groom: url("/static/images/icons/letter-line-blue.png");

	/* bride — ★ pink과 동일 유지 */
	--theme-bride-primary: #b0686f;
	--theme-bride-primary-rgb: 202,154,159;
	--theme-bride-secondary: #a26069;
	--theme-bride-secondary-rgb: 162,96,105;
	--theme-bride-tertiary: #b77581;
	--theme-bride-tertiary-rgb: 183,117,129;
	--theme-bride-line: #e8dede;
	--theme-bride-background-primary: #efeaeb;
	--theme-bride-background-secondary: #f8f5f5;
	--theme-bride-border: #e0d2d4;
	--theme-message-line-bride: url("/static/images/icons/letter-line-pink.png");
}

/* MISTY MINT THEME — mint(main) + cool pink(sub) */
/*-------------------------------------------------*/
:root.mint {
	/* main color — green tone → mint tone으로 톤업 */
	--theme-primary: #A7D9C1; /* subtitle-en */
	--theme-primary-rgb: 167,217,193;
	--theme-secondary: #33785A; /* banner-text.dark */
	--theme-secondary-rgb: 51,120,90;
	--theme-tertiary: #1E4D39; /* banner-venue/address/rsvp-info */
	--theme-tertiary-rgb: 30,77,57;
	--theme-quaternary: #8EBFA5; /* end-of-story */
	--theme-quaternary-rgb: 142,191,165;

	/* backgrounds — mint & cool pink 섞임 */
	--theme-background-primary: #F9FCFA;     /* 메인 민트빛 화이트 */
	--theme-background-secondary: #F7FBF9;   /* 소프트 민트 */
	--theme-background-tertiary: #F3F8F6;    /* 중간톤 민트 */
	--theme-background-preloader: #F8FCFA;
	--theme-background-sendloading-rgb: 248, 252, 250;
	--theme-background-bottomnav: #FAFCFB;
	--theme-background-bottomnav-hover: #F1F7F4;
	
	/* sub 배경: 쿨 핑크 계열 */
	--color-background: #FCF7F9;             /* 부드러운 쿨핑크 섹션 */
	--color-background-lightest: #FFF8FB;    /* 아주 옅은 핑크 하이라이트 */

	/* components */
	--theme-preloader-image: url("../../images/preloader/heart1-mint-skin.png");
	--theme-preloader-image-reverse: url("../../images/preloader/heart2-mint-skin.png");
	--theme-preloader-gif: url("../../images/preloader/preloader-typing_mint.gif");
	--theme-preloader-heart: url("../../images/preloader/prealoader-heart_mint.png");
	--theme-sendloading-gif: url("../../images/preloader/sending_green.gif");
	--theme-show-more-image: url("../../images/icons/arrow-mint.png");

	/* nav — mint base + cool pink border */
	--theme-nav: #79b296; 
	--theme-nav-hover: #3A7059;
	--theme-nav-border: #E8D5D9; /* 부드러운 로즈빛 경계 */
	--theme-nav-border-rgb: 232,213,217;

	/* heart — green heart 유지 */
	--theme-heart: #FF9BAA; /* cool pink로 포인트 */
	--theme-empty-heart: #F9C2C9;

	/* buttons — mint base tone */
	--theme-button-primary: #3A5B46;
	--theme-button-primary-hover: #243A2D;
	--theme-button-secondary: #1A2C20;
	--theme-button-couple: #254252; /* 공통 navy */
	--theme-button-audio: #85A78B; /* mint grayish green */
	--theme-button-zoom: #FFD8E4;  /* gallery zoom — cool pink point */

	/* line — mint line + cool pink accent */
	--theme-line: #9DC8A9;
	--theme-line-rgb: 157,200,169;
	--theme-line-active: #C28A9C; /* pinkish accent */
	--theme-line-active-rgb: 194,138,156;

	--theme-calendar-selected: #E85E7B;

	/* groom color — 기존 green에서 mint tone 보정 */
	--theme-groom-primary: #83A892;
	--theme-groom-primary-rgb: 131,168,146;
	--theme-groom-secondary: #728B7A;
	--theme-groom-secondary-rgb: 114,139,122;
	--theme-groom-tertiary: #6BB897;
	--theme-groom-tertiary-rgb: 107,184,151;
	--theme-groom-line: #E7ECE8;
	--theme-groom-background-primary: #EDF2EE;
	--theme-groom-background-secondary: #F8FAF8;
	--theme-groom-border: #CFD8D1;
	--theme-message-line-groom: url("/static/images/icons/letter-line-green.png");

	/* bride color — cool pink 계열로 보정 */
	--theme-bride-primary: #D991A4;
	--theme-bride-primary-rgb: 217,145,164;
	--theme-bride-secondary: #C37A8E;
	--theme-bride-secondary-rgb: 195,122,142;
	--theme-bride-tertiary: #E0A4B3;
	--theme-bride-tertiary-rgb: 224,164,179;
	--theme-bride-line: #EEDCE0;
	--theme-bride-background-primary: #F6EFF1;
	--theme-bride-background-secondary: #FCF8F9;
	--theme-bride-border: #E3D3D6;
	--theme-message-line-bride: url("/static/images/icons/letter-line-pink.png");
}

/*===============================================*/
/* GENERAL			 						     */
/*===============================================*/
html, body{
	max-width: 100%;
	overflow-x: hidden;
}

body{
	font-size:18px;
    font-family: var(--body-font-family);
	font-weight: var(--font-weight-normal);
	color: var(--color-paragraph);
}

body.no-drag {
	-ms-user-select: none;
	-moz-user-select: -moz-none;
	-webskit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	overscroll-behavior-x: none;
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
	color: var(--color-title);
}

h1 a:hover, h2 a:hover, h3 a:hover, 
h4 a:hover, h5 a:hover, h6 a:hover{
	color: var(--color-title);
}

h1, h2, h3,
.h1, .h2, .h3 {
	margin-top: 10px;
  	margin-bottom: 10px;
}

h4, h5, h6,
.h4, .h5, .h6{
	margin-top: 8px;
  	margin-bottom: 8px;
	font-weight: var(--font-weight-normal);
}

img {
	-webkit-touch-callout: none !important; 
	-webkit-user-select: none !important;
	user-select: none !important;
	pointer-events: none !important;
}

/* TITLE FONT			 						 */
/*-----------------------------------------------*/

h1, .h1{
	font-size: calc(28px + var(--font-size-var-two));
}

h2, .h2{
	font-size: calc(26px + var(--font-size-var-two));
}

h3, .h3{
	font-size: calc(24px + var(--font-size-var-one));
}

/* CONTENT FONT			 						 */
/*-----------------------------------------------*/

h4, .h4{
	font-size: calc(21px + var(--font-size-var-one));
}

h5, .h5{
	font-size: calc(19px + var(--font-size-var-one));
}

.wysiwyg-h5, .wysiwyg-h5 p, .wysiwyg-h5 *{
	font-size: calc(18px + var(--font-size-var-one));
}

.wysiwyg-h5 p {
	margin-bottom: 0;
}

/* info-description, subtitle */
h6, .h6{
	font-size: calc(17px + var(--font-size-var-one));
	line-height: 1.5;
}

h6.smaller {
	font-size: calc(16px + var(--font-size-var-one));
}

h1.inline, h2.inline, h3.inline,
h4.inline, h5.inline, h6.inline{
	display:inline;
	vertical-align:middle; 
}

p, .wysiwyg-p, .wysiwyg-p p, .wysiwyg-p * {
	font-size: calc(16px + var(--font-size-var-one));
	line-height: 1.6;
}

p.lead, .wysiwyg-p.lead, .wysiwyg-p.lead p, .wysiwyg-p.lead *{
	font-size: calc(17px + var(--font-size-var-half));
	line-height: 1.8;
	margin-bottom: 0;
}

.lead {
	font-weight:400;
}

a{
	text-decoration:none;
	color: var(--color-paragraph);
}

a:hover{
	text-decoration:none;
	color: var(--color-paragraph);
}

.clearboth{
	clear:both;
}

.no-padding{
	padding:0;
}

.no-margin{
	margin:0;
}

img.fullwidth{
	width:100%;
}

img.with-border{
	border:1px solid #6a6a6a;
}

/* Added */
.subtitle-en{
	color: var(--theme-primary);
	font-family: var(--font-en-serif-garamond);
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.2em;
}

.subtitle-kr{
	color: var(--theme-primary);
	font-family: var(--body-font-family);
	font-weight: var(--font-weight-normal);
	text-align: center;
	letter-spacing: 0.1em;
}

.title-kr{
	font-weight: var(--font-weight-bold);
	color: var(--color-title);
	margin-top: 20px;
}

.emphasize{
	font-weight: var(--font-weight-bold);
}

.description, .description * {
	text-align: left;
	line-height: 1.9;
	letter-spacing: -0.5px;
}

.info-description{
	word-break: keep-all;
	line-height: 1.7;
	letter-spacing: -0.5px;
	font-family: var(--info-font-family);
}

.info-description li{
	margin-bottom: 10px;
}

.info-description p {
	font-family: var(--info-font-family);
	letter-spacing: -0.5px;
}

.numberfont{
	font-family: var(--info-font-family);
}

.and-text {
	font-family: var(--font-en-serif-garamond);
	font-weight: 400;
	margin-left: 5px;
	margin-right: 5px;
}

.slide-title .and-text, .logo-wrapper .and-text, .dont-miss-it-title .and-text, .thank-you-kr .and-text {
	margin-left: 0;
	margin-right: 0;
}

ol, ul {
	padding-inline-start: 15px;
}

a.de-button i {
	margin-right: 5px;
}

/*===============================================*/
/* Background Color			         			 */
/*===============================================*/
#greeting{
	background-color: var(--theme-background-secondary);	
}

#calendar{
	background-color: var(--color-background-lightest);
}

#couple{
	background-color: var(--color-background);
}

#parents{
	background-color: var(--color-background);
}

#our-story{
	background-color: var(--theme-background-primary);
}

#gallery-section{
	background-color: var(--color-background-lightest);
}

#more-events{
	background-color: var(--color-background);	
}

#rsvp{
	background-color: var(--theme-background-secondary);
}

#gift-section{
	background-color: var(--color-background-lightest);
}

#where-when{
	background-color: var(--theme-background-tertiary);
}

#guestbook {
	background-color: var(--theme-background-primary);	
}

/* CONTACT POPUP */
#contact-popup{
	background-color: var(--color-background);
}

/* STORY POPUP */
#story-popup{
	background-color: var(--theme-background-primary);
}

/* GUESTBOOK POPUP */
#guestbook-popup{
	background-color: var(--color-background);
}

#message-all-popup {
	background-color: var(--theme-background-primary);
}

/*===============================================*/
/* Preloader 				 		 			 */
/*===============================================*/
#preloader{
	background-color: var(--theme-background-preloader);
}

/* Heart Animation							     */
/* ----------------------------------------------*/
#preloader .heart-animation img{
	content: var(--theme-preloader-image);
	width: 25px; 
	height: auto;
}

#preloader .heart-animation-reverse img{
	content: var(--theme-preloader-image-reverse);
	width: 25px; 
	height: auto;
}

/* Text FadeInUp							     */
/* ----------------------------------------------*/
.preloader-type-text{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
	padding: 0 20px;
}

.preloader-line {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
    animation-delay: var(--delay);
}

.preloader-line.guest-name {
	margin-bottom: 30px;
}

.preloader-line-content {
	margin-bottom: 7px;
	margin-bottom: 7px;
	color: var(--theme-secondary);
	font-size: 25px;
}

.preloader-line-content .and-kr {
	font-size:0.8em;
	margin: 0 15px;
}

.preloader-line-content .and-en {
	margin: 0 15px;
	/* font-family: var(--font-en-serif-garamond); */
}

.preloader-line-content i {
	color: var(--theme-primary);
	font-size: 30px;
}

.preloader-line-content img{
	width: 30px;
	height: auto;
}

.preloader-line-content.en-vibes {
	font-family: var(--font-en-cursive-vibes);
	font-size: 30px;
}

.preloader-line-content.en-vibes-lg {
	font-family: var(--font-en-cursive-vibes);
	font-size: 45px;
}

.preloader-line-content.en-script {
	font-family: var(--font-en-cursive-script);
	font-size: 30px;
}

.preloader-gif img{
	width: 300px;
	height:auto;
}

/*===============================================*/
/* Send Loading - GIF				 			 */
/*===============================================*/
#send-loading {
	background-color: rgb(var(--theme-background-sendloading-rgb), 0.8);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0; 
	z-index:9999;
}

#send-loading img{
	content: var(--theme-sendloading-gif);
	width: 100px; 
	height: auto;
	opacity: 1.0;
}

/*===============================================*/
/* LAYER POPUP  	 							 */
/*===============================================*/

.shadow{
	display: block;
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 2000;
}

.layerPopup .layerBox{
	z-index: 3000;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 30px 30px 10px 30px;
	background: #f6f1eb;
	border-radius: 6px;
}

#layer_popup{
	width:500px;
	height:400px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-250px;
	margin-top:-250px;
	z-index:3000;
	visibility:visible;
}

.layerBox{
	border:none;
	background-color:#f6f1eb;
}

.layerContent{
	text-align: center;
	padding: 30px;
	background-color:#f6f1eb;
}

.layerContent #title{
	margin-bottom: 40px;
	font-weight: 700;
	font-size: 23px;
}

.popup-close{
	text-align: left;
	height: 30px; 
	background-color: #f6f1eb; 
	vertical-align: middle;
	color: var(--color-secondary);
	font-family: var(--btn-font-family-primary);
	font-weight: 400;
	cursor: pointer;
}

.popup-close a{
	text-decoration: none;
	color: inherit;
	font-size: 17px;
}

.popup-close i{
	vertical-align: middle;
	margin-left: 10px;
	font-size: 1.4em;
}

#layer_popup .pop-info{
	margin-top: 30px;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	border-top: 2px dashed rgb(204, 186, 152, 0.3);
	border-bottom: 2px dashed rgb(204, 186, 152, 0.3);
}

#layer_popup .pop-info h3{
	font-family: var(--info-font-family);
	font-weight: 400;
	font-size: 16px;
	color: #7a6451;
}

#layer_popup .pop-info i{
	margin-right: 7px;
}

#popup-button a.de-button{
	margin-top: 30px;
	padding:15px 60px; 
	font-size:18px; 
	border-radius: 10px;
	border: none;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	color: #fff;
	background-color: #42372c;
	text-decoration: none;
}

#popup-button a.de-button:hover{
	border: none;
	color: #fff;
	text-decoration:none;
	background-color: #241d18;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

/*===============================================*/
/* NAV BAR  	 							     */
/*===============================================*/
#nav-header{
	z-index:1000; 
}

#nav-bar{
	position:relative;
	height:80px;
	width:100%;
	z-index:1000;
	opacity: 0.95;
}

/* ----------------------------------------------*/
/* Width & Color 							     */
/* ----------------------------------------------*/

#nav-bar.fluid-width #nav-wrapper{
	position:relative;
	height:inherit;
	width:100%;
	padding:0px 30px 0px 40px;	
}

#nav-bar.bottom-bar.inside{
	position:absolute;
	/*background-color:transparent;*/
	bottom:0;
}

#nav-bar.bottom-bar.outside{
	position:absolute;
	/*background-color:transparent;*/
	bottom:-80px;
	/* bottom: -145px */
}

#nav-bar.bottom-bar.stick-it{
	position:fixed;
	height:80px; 
	width:100%;
	z-index:1500;
	top:0;
	bottom:auto;
	background-color: var(--color-background);
	opacity: 1.0;
	border-bottom:0.1px solid rgba(var(--theme-nav-border-rgb),0.5);
}

#nav-bar.block-color{
	/*position:relative; */ 
	background-color: rgba(255, 255, 255, 0.95);
}

/*.is-sticky #nav-bar.block-color{
	-webkit-transform: translateZ(0)
}*/

/* ----------------------------------------------*/
/* Logo & Nav Position						     */
/* ----------------------------------------------*/

#nav-menu{	
	list-style-type:none; 
	margin:0; 
	font-weight: var(--font-weight-normal);
	font-size:13px;
	z-index:1000;
	vertical-align: middle;
}

#nav-bar.nav-right .logo-wrapper{
	float:left;
	position:relative; 
	width:15%; 
	height:auto; 
}

#nav-bar.nav-right .logo-wrapper.en-version{
	width: 25%;
}

#nav-bar.nav-right #nav-menu{
	float:right;
	text-align:right;
	width:85%;
	padding-inline-start:0;
}

#nav-bar.nav-right #nav-menu.en-version{
	float:right;
	text-align:right;
	width:75%;
	padding-inline-start:0;
}

/*===============================================*/
/* NAV MENU  	 	 							 */
/*===============================================*/

/* ----------------------------------------------*/
/* Parent Menu						     		 */
/* ----------------------------------------------*/
#nav-menu > li{
	position:relative;
	display:inline;	
}

#nav-menu > li:before{
  	font-family: "fontello";
  	font-style: normal;
  	font-weight: normal;
  	font-size:10px;
	content: '\e9bd';
	color:#48484A;
	text-align:center;
	display: none; 
}

#nav-menu > li.first-child:before{
	content: "";
	margin-left: 0;
}

#nav-menu > li a{
	color: var(--theme-nav);
	display:inline-block;
	padding:30px 15px; /* Nav Bar Edit */
	text-decoration:none;
	font-weight: var(--font-weight-bold);
	font-size: 14px;
}

#nav-menu.en-version > li a{
	font-size: 13px;
	padding:30px 10px;
}

#nav-menu > li a:hover{
	color: var(--theme-nav-hover);
}

/* Transparent 							         */
/* ----------------------------------------------*/
.transparent #nav-menu > li a{
	color: var(--theme-nav);
}

.transparent #nav-menu > li a:hover{
	color: var(--theme-nav-hover);
}

.transparent.stick-it #nav-menu > li a{
	color:var(--theme-nav);
}

/* Additional Class For Nav Center 		         */
/* ----------------------------------------------*/
.first-child-margin{
	margin-left:20px;
}

.last-child-margin{
	margin-right:0px;
}

.split-margin{
	margin-left:100px;
}

/* ----------------------------------------------*/
/* Child Menu								     */
/* ----------------------------------------------*/
#nav-menu ul{
	position:absolute;
	display:none;
	width:200px;	
	left:0;
	list-style-type:none;
	padding:0;
	text-align:left;
	/*border-top:solid 3px #fa7991; Deleted */
}

#nav-menu li:hover > ul{
	display:block;
}

#nav-menu ul li{
	position:relative;
	width:100%;
}

#nav-menu ul li a{
	display:block;
	width:100%;
	background-color:#FFF;
	border-bottom:solid thin #f4f2f2;
}   

#nav-menu ul li a:hover{
	border:none;
	color:#FFF;
}

/* Reset Transparent Child Menu Color	         */
/* ----------------------------------------------*/
.transparent #nav-menu ul li a{
	color:#666666;
}

.transparent #nav-menu ul li a:hover{
	color:#FFF;
}

/* Child-Parent Arrow 					         */
/* ----------------------------------------------*/
#nav-menu li > ul li a::after { 
	content: '>'; 
	position:absolute;
	right:15px;
} 

#nav-menu li > ul li a:only-child::after { 
	content: ''; 
}

/* More Child 						  	         */
/* ----------------------------------------------*/
#nav-menu ul ul{
	top:0;
	left:100%;
	border:none;
}


/* ----------------------------------------------*/
/* Mobile Nav			      					 */
/* ----------------------------------------------*/
#mobile-nav{
	display:none;
}

#mobile-nav,
.transparent.stick-it #mobile-nav{
	color:#666;
}

.transparent #mobile-nav{
	color:#FFF;
}

#mobile-nav i{
	color: var(--theme-nav);
}

/*===============================================*/
/* LOGO	 	 	 							     */
/*===============================================*/

/* ----------------------------------------------*/
/* CSS Logo								         */
/* ----------------------------------------------*/
.css-logo{
	width:100%; 
	height:100%; 
	border-radius:0%; 
	text-align:left; 
	padding: 25px 0px;
	letter-spacing: 1px;
	background-color:transparent;
	color: var(--theme-nav);
}

.css-logo.en-version{
	padding: 28px 0px;
}

.css-logo.rounded{
	border-radius:50%; 
}

.css-logo-text{
	padding-top:0px; 
	font-size:22px;
	font-weight: var(--font-weight-bold);
}

.css-logo-text.en-version {
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: var(--font-weight-bold);
}

.css-logo-text > i {
	font-size:10px;
}

.mobile-logo{
	display: none;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: var(--font-weight-normal);
}

/*===============================================*/
/* BOTTOM NAV BAR  	 							 */
/*===============================================*/
.bottom-navbar {
	display: none;
	z-index: 1000;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: var(--theme-background-bottomnav);
	border-top: 0.1px solid rgba(var(--theme-nav-border-rgb),0.5);
	padding-bottom: calc(env(safe-area-inset-bottom, 20px) - 15px);
	color: var(--color-default);
}

/* When displayed, use flexbox for automatic equal spacing */
.bottom-navbar[style*="display: flex"],
.bottom-navbar[style*="display:flex"] {
	display: flex !important;
	justify-content: space-around;
	align-items: stretch;
}

.bottom-navbar a {
	display: block;
	text-align: center;
	font-size: 18px;
	padding: 20px 0;
	text-decoration: none;
	color: var(--color-default);
	line-height: 0;
}

.bottom-navbar a i {
	font-size: 20px;
	margin-top: 2px;
}

.bottom-navbar a.shortcut-large {
	flex: 0 0 50%;
	font-family: 'pretendard', sans-serif;
	font-weight: 400;
}

.bottom-navbar a.shortcut-small {
	flex: 1;
	min-width: 0;
}

.bottom-navbar a.shortcut-small:before {
    position: sticky;
    display: block;
    content: '';
    width: 1px;
    height: 18px;
    background-color:rgba(var(--theme-nav-border-rgb),0.3);
    top: 50%;
    left: 0;
    margin-top: -18px;
}

/* Change the color of links on hover */
.bottom-navbar a:hover, .bottom-navbar a.active, .bottom-navbar a:focus{
	background-color: var(--theme-background-bottomnav-hover);
  	color: var(--color-default);
}

.bottom-navbar a.icon-kakao img{
	content: url('../../images/icons/icon-kakaotalk.png');
	height: 22px;
	width: auto;
}

.bottom-navbar a.icon-location img{
	content: url('../../images/icons/icon-location.png');
	height: 22px;
	width: auto;
}

.bottom-navbar a.icon-guestbook img{
	content: url('../../images/icons/icon-write.png');
	height: 22px;
	width: auto;
}

.bottom-navbar a.icon-download img{
	content: url('../../images/icons/icon-download.png');
	height: 22px;
	width: auto;
}

.bottom-navbar a.icon-audio img{
	content: url('../../images/icons/icon-audio.png');
	height: 22px;
	width: auto;
}

.bottom-navbar a.icon-mute img{
	content: url('../../images/icons/icon-mute.png');
	height: 22px;
	width: auto;
}

.bottom-navbar-footer-padding {
	height: 62px;
	background-color: #fff;
}

/*===============================================*/
/* MAIN-SLIDER  					 		 	 */
/*===============================================*/
#main-slider {
	margin:0; 
	padding:0;
	position:relative;
}

/* ----------------------------------------------*/
/* Main Slider Height   					     */
/* ----------------------------------------------*/
/* #main-slider.fullscreen - script.js			 */

#main-slider.fixed-height{
	position:relative;
	height:625px;
}

/* ----------------------------------------------*/
/* Main Slider Flexslider   			  		 */
/* ----------------------------------------------*/
#main-slider.flexslider { 
	border: none; 
}

#main-slider .slides,
#main-slider.flexslider .slides li{
	position:relative;
	height:inherit;
	width:100%;
	overflow:hidden;
}

#main-slider.flexslider .flex-viewport{
	position:relative;
	height:inherit;
}

/* Main Slider Flexslider Control Nav & Paging   */
/* ----------------------------------------------*/
#main-slider .flex-control-nav, .flex-control-paging{
	 background-color:transparent;
	 margin:0; padding:0;
	 position:absolute;
	 bottom:0;
	 z-index:4;
}

#main-slider.flexslider .flex-direction-nav .flex-prev { left: 0px; }
#main-slider.flexslider .flex-direction-nav .flex-next { right: 0px; text-align: right; }
#main-slider.flexslider:hover .flex-prev { opacity: 0.7; left: 100px; }
#main-slider.flexslider:hover .flex-next { opacity: 0.7; right: 100px; }


#main-slider .flex-direction-nav a {
	z-index:4;
	line-height:40px;
}

/* ----------------------------------------------*/
/* Main Slider Slide-Image	    	  		 	 */
/* ----------------------------------------------*/

#main-slider .slide-image {
	background-image:url('../images/main/1.jpeg');
	background-position:50% 0%;
	position:relative;
	height:inherit;
	width:600px;
	margin: auto;
	background-size:cover; 
	background-color:#FFF;
	-webkit-transform: translateZ(0);
}

#main-slider .slide-image.title-top.bg-black::before {
	content: "";
	position: absolute;
	top:0;
	width: 600px;
	height: 30%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0)); 
}

#main-slider .slide-image.title-top.bg-white::before {
	content: "";
	position: absolute;
	top:0;
	width: 600px;
	height: 30%;
	background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0)); 
}

#main-slider .slide-image.title-bottom.bg-black::before {
	content: "";
	position: absolute;
	bottom:0;
	width: 600px;
	height: 30%;
	background: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0)); 
}

#main-slider .slide-image.title-bottom.bg-white::before {
	content: "";
	position: absolute;
	bottom:0;
	width: 600px;
	height: 30%;
	background: linear-gradient(to top, rgba(255,255,255,0.3), rgba(255,255,255,0)); 
}

/* ----------------------------------------------*/
/* Main Slider Title    					     */
/* ----------------------------------------------*/

.slide-title-outter-wrapper{
	position:absolute; 
	width:100%; 
	height:inherit; 
	left:0; 
	z-index:3;
	overflow:hidden;
}

.slide-title-inner-wrapper{
	width:1170px; 
	height:inherit; 
	margin:0 auto; 
	display: table;
}

.slide-title{ 
	display: table-cell;
	text-align:center;	
    color:#FFF;
}

/* Title Alignment                               */
/* ----------------------------------------------*/
.slide-title.align-middle{
	vertical-align: middle;
}

.slide-title.align-top{
	vertical-align: top;
	padding-top:10px;
}

.slide-title.align-bottom{
	vertical-align: bottom;
	padding-bottom:100px;
}

/* ----------------------------------------------*/
/* Slide Overlay		        			     */
/* ----------------------------------------------*/

.slide-overlay{
	position:absolute;
	top:0;
	display:block; 
	width:inherit; 
	height:inherit; 
	opacity:0;
	-webkit-transform: translateZ(0);
	background: linear-gradient(to bottom, black, transparent); 
	opacity: 0.4; 
	height: 30%;
}

/* ----------------------------------------------*/
/* Slide Caption		    		    	     */
/* ----------------------------------------------*/
.slide-caption{
	position:absolute;
	top:0;
	display:block;
	width:inherit; 
	height:inherit; 
	color:#fff;	
}

.use-animation{
	visibility:hidden
}

/* ----------------------------------------------*/
/* Hack Flexslider Fade for Firefox & IE11	     */
/* ----------------------------------------------*/
.flexslider .slides.css-fade > li { 
  	-webkit-transition: opacity 1s ease; 
	-moz-transition: opacity 1s ease;
 	transition: opacity 1s ease; 
}

/* ----------------------------------------------*/
/* Loop Animation						         */
/* ----------------------------------------------*/

/* Zoom							        		 */
/* ----------------------------------------------*/
@-webkit-keyframes zoom-in-out {
   0% {-webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);}
	50% {-webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1);}
	100%	{-webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);}
}

@keyframes zoom-in-out {
    0% {-webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);}
	50% {-webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1);}
	100%	{-webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);}
}

.zoom.animate{
	-webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
	-webkit-animation: zoom-in-out 30s; /* Chrome, Safari, Opera */
    animation: zoom-in-out 30s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}


/* Left-Right        							 */
/* ----------------------------------------------*/
@-webkit-keyframes move-left-right {
   0% { background-position: 50% 50%; }
    25% { background-position: 100% 50%; }
	50% { background-position: 50% 50%; }
	75%	{ background-position: 0% 50%; }
	100%	{ background-position: 50% 50%; }
}

@keyframes move-left-right {
    0% { background-position: 50% 50%; }
    25% { background-position: 100% 50%; }
	50% { background-position: 50% 50%; }
	75%	{ background-position: 0% 50%; }
	100%	{ background-position: 50% 50%; }
}

.left-right.animate{
	background-position:50% 50%;
	-webkit-animation: move-left-right 240s; /* Chrome, Safari, Opera */
    animation: move-left-right 240s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

/* Video Audio Control			        		 */
/* ----------------------------------------------*/
#main-slider .video-audio-control{
	height: 50px;
	/*width: 100%;*/
	/*position: absolute;*/
	right: 10px;
	bottom: 30px;
	z-index: 4;
	padding-right:10px;
	text-align:right;
	color:#000;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: flex-end;
	position: fixed;
}

/* Audio Music Icon */
#mute-audio .de-icon{
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size:25px;	
}

/*===============================================*/
/* 07. PAGE										 */
/*===============================================*/

/* ----------------------------------------------*/
/* 07.1	Page Layout								 */
/* ----------------------------------------------*/
#content{
	position:relative;
	background-color:#FFF;
}

/* Page Without Slider */
.no-slider-page #content{
	padding:220px 0 120px 0;
}

/* Page With Slider */
.slider-title-page #content{
	padding:120px 0;
}

/* Page With Banner */
.slider-banner-page #content{
	padding:60px 0 120px 0;
}

/* Page With Full Gallery */
.full-gallery-page #content{
	padding:145px 0 120px 0;
}

/* Page With Outside Bottom Bar */
.outside-bottom-bar-page #content{
	margin-top:80px;
}

/* ----------------------------------------------*/
/* PAGE ELEMENT	 	 			         		 */
/* ----------------------------------------------*/

/* Page Title Wrapper */
.page-title{
	padding-bottom:50px;
}

/*  Section Title Wrapper */
.section-title{
	margin-bottom:50px;
	word-break: keep-all;
}

#rsvp .section-title h1, #gift-section .section-title h1 {
	margin-bottom: 40px;
}

h1.title-guest {
	line-height: 1.6em;
}

.section-title .title-content{
	line-height: 1.8em;
	margin-top: 0;
}

#parents .section-title .title-content, #rsvp .section-title .title-content, #gift-section .section-title .title-content {
	margin-top: 35px;
}

.section-title img{
	height: 45px;
	width: auto;
}

/* Icon Title Wrapper */
.icon-title {
	position:absolute; 
	margin: auto; 
	left:0; 
	right:0;
	top:-50px;
}

/* Title-Excerpt White Box                       */
/* ----------------------------------------------*/
.title-excerpt{
	position:relative; 
	padding: 30px 20px 10px 20px;
}

.title-excerpt .custom-heart-icon{
	position:absolute;
	margin: auto; 
	left:0; 
	right:0; 
	top:-12px;
	color:#f0394d; 
}

/* Align Middle Wrapper			        		 */
/* ----------------------------------------------*/
.alignment{
	position:absolute;
	display:table;
	height:100%;
	width:100%;
}

.v-align{
	display:table-cell;	
}

.center-middle{
	vertical-align:middle;
	text-align:center;
}

.center-top{
	vertical-align:top;
	text-align:center;
}

.center-bottom{
	vertical-align:bottom;
	text-align:center;
}

/* IMAGE & VIDEO DIVIDER					     */
/* ----------------------------------------------*/

.divider-wrapper{
	padding:130px 0;
}

.image-divider {
	position:relative;
	background-size:cover;
	-webkit-background-size:cover;
	background-attachment: scroll;
	background-position:center center;
	background-repeat:no-repeat;
	color:#FFF;
	-webkit-backface-visibility: hidden;
}

.image-divider.mobile{
	background-attachment:scroll;
}

.video-divider {
	position:relative;
	color:#FFF;
	z-index:3;
}

.image-divider h1, .image-divider h2,
.image-divider h3, .image-divider h4,
.image-divider h5, .image-divider h6,
.video-divider h1, .video-divider h2,
.video-divider h3, .video-divider h4,
.video-divider h5, .video-divider h6 {
	color:#FFF;
}

#dont-miss-it {
	position: inherit;
	height:400px;
	background-color:rgba(0,0,0,0.6); 
}

.image-divider .divider-overlay,
.video-divider .divider-overlay{
	position:absolute; 
	top:0; 
	display:block; 
	width:100%; 
	height:100%; 
	background-color:#000; 
	opacity:0.6
}

.image-divider.auto-height{
	background-position: 35% 60%;
	height:100%;
	width:100%;
	max-width: 1500px;
	padding:60px 0;
	margin:auto;
}

.image-divider.auto-height.user-image{
	background-position: 50% 50%;
	height:100%;
	width:600px;
	padding:60px 0;
	margin:auto;
}

/* SPACE AND LINE DIVIDER 			        	 */
/* ----------------------------------------------*/
.space-divider{
	display:block;
	height:150px
}

hr.line-divider{
	height:2px;
	border:none;
	color: #e8dede;
	background-color: rgb(185,159,113,0.3);
	margin-top: 40px;
}

/* HEART DIVIDER					    		 */
/* ----------------------------------------------*/

.heart-divider{
	height:100%; 
	width:100%;
	margin:0 auto; 
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
}

.white-line{
	width:30px; 
	height:8px;
	display:inline-block;
	border-top:solid 0.5px rgba(255, 255, 255, 0.5);
}

.grey-line{
	width:30px; 
	height:8px;
	display:inline-block;
	border-top:solid 1px #e1dddd;
}

.beige-line{
	width:30px; 
	height:8px;
	display:inline-block;
	border-top:solid 1px rgb(185,159,113,0.3);
}

.left-line{
	color:#FFF; 
	letter-spacing:-2px; 
	float:left; 
	margin-right:10px
}

.right-line{
	color:#FFF; 
	letter-spacing:-2px; 
	float:left;
	margin-left:10px
}

.two-heart{
	float:left;
}

.main-heart{
	color: var(--theme-heart); /*slide title color line*/
	font-size:18px; 
	position:relative; 
	z-index:3;
}

.parents-name .main-heart {
	font-size:18px; 
	margin-left: 10px;
	margin-right: 10px;
}

.pink-heart{
	color:#f0394d; /* default */
	font-size:18px; 
	position:relative; 
	z-index:3;
}

.pink-heart-lowsat{
	color:#c7626d; /* default */
	font-size:18px; 
	position:relative; 
	z-index:3;
}

.white-heart{
	color:#FFF; 
	font-size:18px; 
	margin-left:-15px; 
	position:relative;
	z-index:2
}

.grey-heart{
	color: #e1dddd;
	font-size:18px; 
	margin-left:-15px; 
	position:relative;
	z-index:2
}

.grey-heart-lowsat{
	color: #c5d5cb;
	font-size:18px; 
	margin-left:-15px; 
	position:relative;
	z-index:2
}

/* BUTTON					 		        	 */
/* ----------------------------------------------*/
a.de-button, span.de-button, input[type=submit]{
	display:inline-block; 	
	margin:0 auto; 
	margin-top:20px; 
	font-family: var(--btn-font-family-primary);
	color: var(--color-button-text-hover);
	background-color: transparent;
	border:solid 1px var(--color-button-border);
	text-decoration: none;
}

a.de-button.outline, span.de-button.outline, input[type=submit].outline{
	background-color:transparent; 
	border:solid 1px #FFF;
	color:#FFF;
}

a.de-button.reverse, span.de-button.reverse, input[type=submit].reverse{
	background-color: var(--theme-button-primary);
	color: var(--color-inverse);
	border:solid 1px var(--theme-button-primary);
}

a.de-button.small, span.de-button.small, input[type=submit].small{
	padding:8px 26px; 
	font-size:14px; 
}

a.de-button.medium, span.de-button.medium, input[type=submit].medium{
	padding:10px 50px; 
	font-size:16px; 
}

a.de-button.large, span.de-button.large, input[type=submit].large{
	padding:14px 70px; 
	font-size:20px; 
}

a.de-button:hover, span.de-button:hover, input[type=submit]:hover{
	color: var(--color-button-text);
	background-color: transparent;
	border: 1px solid var(--color-button-border-hover);
	text-decoration:none;
}

a.de-button.reverse:hover, span.de-button.reverse:hover, input[type=submit].reverse:hover{
	background-color: var(--theme-button-primary-hover);
	color: var(--color-inverse);
	border:solid 1px var(--theme-button-primary-hover);
	text-decoration:none;
}

input[type=submit]:disabled, input[type=submit]:hover:disabled{
   background-color:#CCC !important;
   border:solid 1px #CCC !important;
   color:#FFF !important;;
}


/* Banner Text	         			 			 */
/* ----------------------------------------------*/
.banner-text{
	display:inline-block;
	font-weight: var(--font-weight-normal);
	margin:auto;
	margin-top:5px;
	margin-bottom:20px; 	
	text-align:center
}

.banner-text.small{
	padding:2px 30px;  
}

.banner-text.medium{
	padding:2px 50px;  
}

.banner-text.large{
	padding:2px 70px;  
}

.banner-text.full{
	width:100%;
}

.banner-text.light{
	color:#FFF;
	border-top:medium double rgb(255,255,255, 0.5);
	border-bottom:medium double rgb(255,255,255, 0.5);
}

.banner-text.light *{
	color:#FFF;
}

.banner-text.dark{
	border-top: medium double rgba(var(--theme-line-rgb),0.2);
	border-bottom: medium double rgba(var(--theme-line-rgb),0.2);
}

.banner-text.withlove{
	position:relative;
	display:inline-block;
	font-weight: 400;
	margin:auto;
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
}

.banner-text.withlove:before{
	display:block;
	font-family: "fontello";
	position:absolute;
	font-size:18px;
	color:#FFF;
	content:"\e806";
	top:-13px;
	/*top: -17px*/
	left:0;
	right:0;
	margin-left:13px;
}

.banner-text.withlove.dark:before{
	color:#e1dddd;
}

.banner-text.withlove::after{
	display:block;
	font-family: "fontello";
	position:absolute;
	font-size:18px;
	/*font-size: 22px*/
	color:#Fa7991;
	content:"\e806";
	top:-13px;
	left:0;
	right:0	;
	margin-right:13px;
}


/* White Box Content Wrapper        			 */
/* ----------------------------------------------*/
.white-box-content-wrapper{
	background-color:#FFF; 
	padding:40px 40px;
	margin-bottom:30px;
}

/*-----------------------------------------------*/
/* Popup Template			         			 */
/*-----------------------------------------------*/
#story-popup{
	width:900px;
	margin:30px auto; 
	overflow: auto;
	height: 700px;
}

#story-popup #main-image{
	height:400px; 
	/* height: 485px*/
	width:100%;
	position:relative;
}

#story-popup .story-popup-content{
	padding:50px 70px 80px 70px;
	margin: auto;
}

#story-popup .story-popup-content #socialnetwork-icon{
	text-align:center; 
	margin-bottom:20px;
}

#story-popup .story-popup-content img{
	width:100%;
}

#story-popup .story-qna h3{
	font-size: 24px;
}

/* line in story.html popup template */
hr.line-popup{
	border: 0.5px solid rgba(var(--theme-primary-rgb),0.5);
	margin: 10px 10px;
}

/*-----------------------------------------------*/
/* CONTACT - Popup Template Small			     */
/*-----------------------------------------------*/
#contact-popup{
	width:600px;
	padding: 20px;
	margin:30px auto; 
	overflow: hidden;
	font-family: var(--info-font-family);
}

#contact-popup .content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

#contact-popup .the-content{
	padding:20px 80px;
	margin: auto;
}

#contact-popup .the-content.en-version{
	padding:20px 0;
	margin: auto;
}

#contact-popup .contact-icon{
	text-align:center; 
	margin-bottom:20px;
	color: var(--color-tertiary);
}

#contact-popup h4{
	margin-bottom: 15px;
	margin-top: 10px;
	font-weight: var(--font-weight-bold);
}

#contact-popup .name-wrapper.en-version{
	display: inline-block;
    text-align: right;
}

#contact-popup .name-wrapper{
	display: inline-block;
    text-align: right;
	width: 250px;
}

#contact-popup h4 {
	font-size: 20px;
}

#contact-popup h6 {
	font-size: 16px;
	margin-bottom: 10px;
	margin-top: 10px;
	display: inline-block;
}

#contact-popup h5 {
	font-size: 18px;
	margin-bottom: 10px;
	margin-top: 10px;
	display: inline-block;
}

#contact-popup .icon-wrapper{
	display: inline-block;
	padding-right: 20px;
	padding-left: 20px;
}

#contact-popup a{
	display: inline-block;
}

#contact-popup i{
	margin: 10px 5px;
	font-size: 95%;
}

#contact-popup .name-bolder{
	font-weight: var(--font-weight-bold);
	margin-left: 10px;
}

#contact-popup h4 i{
	margin-right: 2px;
}

#contact-popup .mfp-close{
	right: 25%;
}

#contact-popup .groom-parents{
	padding-top: 20px;
	padding-bottom: 20px;
}

#contact-popup .bride-parents{
	padding-top: 20px;
	padding-bottom: 20px;
}

/* LINE                                          */
/* ----------------------------------------------*/
hr.line-popup-groom{
	border: 0.5px solid rgba(var(--theme-groom-primary-rgb),0.3); 
	margin: 10px auto 20px auto;
	width:400px;
}

hr.line-popup-bride{
	border: 0.5px solid rgba(var(--theme-bride-primary-rgb),0.3); 
	margin: 10px auto 20px auto;
	width:400px;
}

/*-----------------------------------------------*/
/* Autocrop Image		         				 */
/*-----------------------------------------------*/
.autocrop-image{
 	display:block;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	overflow:hidden;
}

/*===============================================*/
/* ICON  										 */
/*===============================================*/
.de-icon{
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size:30px;
	text-align: center;
	vertical-align: middle;	
	margin: 8px 0px;
	
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
	/*The transition will be disabled on script.js for tablet/mobile*/
}

.de-icon.aligncenter{
	margin:0 auto;
}

.de-icon.inline{
	display:inline-block;
	vertical-align:middle;
	margin-right:8px;
}

.de-icon.float{
	float:left; 
	margin-right:15px
}

.de-icon i{
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
	/*The transition will be disabled on script.js for tablet/mobile*/
}

/*------------------------------------------------*/
/* Size 						     	   	  	  */
/*------------------------------------------------*/
.de-icon.large-size{
	width: 130px;
	height: 130px;
	line-height: 140px;
	font-size:40px;	
}

.de-icon.medium-size{
	width: 90px;
	height: 90px;
	line-height: 96px;
	font-size:30px;	
}

.de-icon.small-size{
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size:18px;	
}

.de-icon.very-small-size{
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size:11px;	
}

/*------------------------------------------------*/
/* Shape					     				  */
/*------------------------------------------------*/

/* Default							         	  */
/*------------------------------------------------*/
.de-icon.default{
	color:#6a6a6a;
}

.de-icon.default.light{
	color:#FFF;
}

.de-icon.default.reverse{
	color:#f0394d;
}

a:hover .de-icon.default, a:hover .de-icon.default.light{
	color:#f0394d;
}

a:hover .de-icon.default.reverse{
	color:#6a6a6a;
}

a:hover .de-icon.default.light.reverse{
	color:#FFF;
}

/* Circle, Rounded, Square	         			  */
/*------------------------------------------------*/
.de-icon.circle{
	border-radius: 50%;
}

.de-icon.rounded{
	border-radius: 20%;
}

.de-icon.square, .de-icon.circle, .de-icon.rounded{
	background-color:#6a6a6a;
	color:#FFF;
}

.de-icon.square.reverse, .de-icon.circle.reverse, .de-icon.rounded.reverse{
	background-color:#f0394d;
	color:#FFF;
}

.de-icon.square.light, .de-icon.circle.light, .de-icon.rounded.light{
	background-color:#FFF;
	color:#6a6a6a;
}

.de-icon.square.light.reverse, .de-icon.circle.light.reverse, .de-icon.rounded.light.reverse{
	background-color:#FFF;
	color:#f0394d;
}


.de-icon.outline{
	background-color:transparent;
	color:#6a6a6a;
	border:1px solid #6a6a6a;
	display: inline-block;
	vertical-align: middle;
}

/* audio play button */
.de-icon.outline.reverse{
	background-color:transparent;
	color:var(--theme-button-audio);
	border:1px solid var(--theme-button-audio);
}

.de-icon.outline.light, .de-icon.outline.light.reverse{
	background-color:transparent;
	color:#FFF;
	border:1px solid #FFF;
}

/* gallery zoom button */
a:hover .de-icon.circle.outline.light, a:hover .de-icon.rounded, a:hover .de-icon.square{
	background-color:transparent;
	color:var(--theme-button-zoom);
	border:1px solid var(--theme-button-zoom);
}

a:hover .de-icon.circle.reverse, a:hover .de-icon.rounded.reverse, a:hover .de-icon.square.reverse{
	background-color:#6a6a6a;
	color:#FFF;
	border:none;
}


/*------------------------------------------------*/
/* Effect Zoom 						         	  */
/*------------------------------------------------*/
.de-icon.effect1{
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	     -o-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);	
}

a:hover .de-icon.effect1{
	-webkit-transform: scale(1.2);
	   -moz-transform: scale(1.2);
	     -o-transform: scale(1.2);
	    -ms-transform: scale(1.2);
	        transform: scale(1.2);	
}

/*------------------------------------------------*/
/* Effect Rotate     						  	  */
/*------------------------------------------------*/
.de-icon.effect2 i{
	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
	     -o-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	        transform: rotate(0deg);	
}

a:hover .de-icon.effect2 i{
	-webkit-transform: rotate(360deg);
	   -moz-transform: rotate(360deg);
	     -o-transform: rotate(360deg);
	    -ms-transform: rotate(360deg);
	        transform: rotate(360deg);	
}

/*------------------------------------------------*/
/* Effect Square/Rounded To Circle 	  	          */
/*------------------------------------------------*/
a:hover .de-icon.effect3{
	background-color:#f0394d;
	color:#fff;
	border-radius: 50%;
}


/*===============================================*/
/* PHOTO ITEM					    			 */
/*===============================================*/
.photo-item {
	position:relative;
	overflow:hidden;
}

.photo-item.frame-border {
	background-color:transparent;
	border-radius: 10px; 
}

#couple .photo-item.frame-border {
	background-color:transparent;
	border-radius: 10px; 
	margin: 5px;
}

#parents .photo-item.frame-border {
	border-radius: 10px; 
	margin: 5px;
}

#our-story .photo-item {
	background-color:transparent;
	border-radius: 10px; 
	margin: 5px;
}

#story-popup .photo-item.frame-border{
	border-radius: 10px; 
}

#story-popup .photo-item {
	background-color:transparent;
	border-radius: 10px; 
}

/* ----------------------------------------------*/
/* Image    									 */
/* ----------------------------------------------*/
.photo-item img {
	width: 100%;
}

/* ----------------------------------------------*/
/* Layer     								 	 */
/* ----------------------------------------------*/
.photo-item .layer {
	position: absolute; 
	margin: auto;
	top: 0; 
	right: 0; 
	bottom: 0;
	left: 0;
	width:100%;
	height:100%;
}

.photo-item .layer.wh100{
	width:100%;
	height:100%; 
}

.photo-item .layer.wh95{
	width:95%;
	height:95%; 
}


/* Layer : Second Image   	        			 */
/* ----------------------------------------------*/
.photo-item .layer.second-image{
	opacity: 0; 
}


/* Layer : Black Overlay  		        		 */
/* ----------------------------------------------*/
.photo-item .layer.opacity-black-overlay{
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0.3; 
}

.photo-item .layer.hidden-black-overlay{
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0; 
}

/* Layer : Photo Caption  		        		 */
/* ----------------------------------------------*/
.photo-item .layer.photo-caption{
	opacity: 1; 
}

.photo-item .layer.hidden-photo-caption{
	opacity: 0; 
}

.photo-item .layer.border-photo-caption{
	opacity: 1;
	border:1px solid #FFF; 
}

.photo-item .layer.hidden-border-photo-caption{
	opacity: 0;
	border:1px solid #FFF; 
}

/* Layer : Icon / Button Link	        	 	 */
/* ----------------------------------------------*/
.photo-item .layer.link{
	opacity: 1;
}

.photo-item .layer.hidden-link{
	opacity: 0;
}

.photo-item:hover .layer.hover-animation.fade-in{
	opacity: 1; 
}

.photo-item:hover .layer.hover-animation.half-fade-in{
	opacity: 0.3; 
}

.photo-item:hover .layer.hover-animation.fade-out{
	opacity: 0; 
}

/* ----------------------------------------------*/
/* on Hover Animation	       				 	*/
/* ----------------------------------------------*/
.photo-item img.hover-animation, .photo-item:hover img.hover-animation{
	-webkit-transition: all 0.5s; 
		-ms-transition: all 0.5s;
		 -o-transition: all 0.5s;
			transition: all 0.5s;
	/*The transition will be disabled on script.js for tablet/mobile*/		
}

.photo-item .layer.hover-animation, .photo-item:hover .layer.hover-animation {
	-webkit-transition: all 0.5s; 
		-ms-transition: all 0.5s;
		 -o-transition: all 0.5s;
			transition: all 0.5s;
	/*The transition will be disabled on script.js for tablet/mobile*/	
}

/* on Hover Animation Duration        		 	 */
/* ----------------------------------------------*/
.photo-item:hover .layer.hover-animation.duration1,
.photo-item:hover img.hover-animation.duration1{
	transition-duration:0.5s;
}

.photo-item:hover .layer.hover-animation.duration2,
.photo-item:hover img.hover-animation.duration12{
	transition-duration:1s;
}

.photo-item:hover .layer.hover-animation.duration3,
.photo-item:hover img.hover-animation.duration3{
	transition-duration:1.5s;
}

.photo-item:hover .layer.hover-animation.duration4,
.photo-item:hover img.hover-animation.duration4{
	transition-duration:2s;
}

.photo-item:hover .layer.hover-animation.duration5,
.photo-item:hover img.hover-animation.duration5{
	transition-duration:2.5s;
}

/* on Hover Animation Delay		        	 	 */
/* ----------------------------------------------*/
.photo-item:hover .layer.hover-animation.delay1,
.photo-item:hover img.hover-animation.delay1{
	transition-delay:0.5s;
}

.photo-item:hover .layer.hover-animation.delay2,
.photo-item:hover img.hover-animation.delay2{
	transition-delay:1s;
}

.photo-item:hover .layer.hover-animation.delay3,
.photo-item:hover img.hover-animation.delay3{
	transition-delay:1.5s;
}

.photo-item:hover .layer.hover-animation.delay4,
.photo-item:hover img.hover-animation.delay4{
	transition-delay:2s;
}

.photo-item:hover .layer.hover-animation.delay5,
.photo-item:hover img.hover-animation.delay5{
	transition-delay:2.5s;
}


/* on Hover Zoom In		        			 	 */
/* ----------------------------------------------*/
.photo-item:hover img.hover-animation.image-zoom-in {
	-webkit-transform: scale(1.1); 
		-ms-transform: scale(1.1);
		 -o-transform: scale(1.1);  
			transform: scale(1.1);		
}

/* on Hover Zoom In and Rotate	        	 	*/
/* ----------------------------------------------*/
.photo-item:hover img.hover-animation.image-zoom-rotate {
	-webkit-transform: rotate(7deg) scale(1.1);
		-ms-transform: rotate(7deg) scale(1.1);
		 -o-transform: rotate(7deg) scale(1.1);  
			transform: rotate(7deg) scale(1.1);			
}

/* on Hover Fade Out		     		 		 */
/* ----------------------------------------------*/
.photo-item:hover img.hover-animation.image-fade-out {
	opacity:0;
}


/*===============================================*/
/* MASONRY GALLERY							     */
/*===============================================*/
.masonry-col.w100{
	width:100%;
}

/* ----------------------------------------------*/
/* Three Column No Gutter		 	     		 */
/* ----------------------------------------------*/
.three-col .grid-sizer{
	width:33.33%;
}

.three-col .gutter-sizer{
	width:0;
}

.three-col .masonry-col.w33{
	width:33.33%;
}

.three-col .masonry-col.w66{
	width:66.67%;
}


/* ----------------------------------------------*/
/* Three Column With Gutter	        			 */
/* ----------------------------------------------*/
.three-col.with-gutter .grid-sizer{
	width:31%;
}

.three-col.with-gutter .gutter-sizer{
	width:3.5%;
}

.three-col.with-gutter .masonry-col{
	margin-bottom:25px;
}

.three-col.with-gutter .masonry-col.w33{
	width:32%;
}

.three-col.with-gutter .masonry-col.w66{
	width:66.5%;
}

/* ----------------------------------------------*/
/* Four Column No Gutter	     	 			 */
/* ----------------------------------------------*/
.four-col .grid-sizer{
	width:25%;
}

.four-col .gutter-sizer{
	width:0;
}

.four-col .masonry-col.w25{
	width:25%;
}

.four-col .masonry-col.w50{
	width:50%;
}

.four-col .masonry-col.w75{
	width:75%;
}

/* ----------------------------------------------*/
/* Four Column With Gutter		 	    		 */
/* ----------------------------------------------*/
.four-col.with-gutter .grid-sizer{
	width:23%;
}

.four-col.with-gutter .gutter-sizer{
	width:2.666%;
}

.four-col.with-gutter .masonry-col{
	margin-bottom:25px;
}

.four-col.with-gutter .masonry-col.w25{
	width:23%;
}

.four-col.with-gutter .masonry-col.w50{
	width:48.55%;
}

.four-col.with-gutter .masonry-col.w75{
	width:69%;
}

/* ----------------------------------------------*/
/* Five Column No Gutter	     	 			 */
/* ----------------------------------------------*/
.five-col .grid-sizer{
	width:20%;
}

.five-col .gutter-sizer{
	width:0;
}

.five-col .masonry-col.w20{
	width:20%;
}

.five-col .masonry-col.w40{
	width:40%;
}

.five-col .masonry-col.w60{
	width:60%;
}

.five-col .masonry-col.w80{
	width:80%;
}

/* ----------------------------------------------*/
/* Five Column With Gutter   		 			 */
/* ----------------------------------------------*/
.five-col.with-gutter .grid-sizer{
	width:18%;
}

.five-col.with-gutter .gutter-sizer{
	width:2.5%;
}

.five-col.with-gutter .masonry-col{
	margin-bottom:25px;
}

.five-col.with-gutter .masonry-col.w20{
	width:18%;
}

.five-col.with-gutter .masonry-col.w40{
	width:36%;
}

.five-col.with-gutter .masonry-col.w60{
	width:54%;
}

.five-col.with-gutter .masonry-col.w80{
	width:72%;
}

/*===============================================*/
/* SECTION      								 */
/*===============================================*/

/* ----------------------------------------------*/
/* Slider Section     		    				 */
/* ----------------------------------------------*/
.text-white *{
	color: #fff;
	text-shadow: 0 0 10px #000;
}

.text-black *{
	color: var(--color-secondary);
	text-shadow: 0 0 10px #fff;
}

.invited{
	font-family: var(--font-en-cursive-script);
	font-weight: 400; 
	letter-spacing: 0;
	line-height: 1.5;
}

.invited-kr{
	font-weight: var(--font-weight-normal);
	letter-spacing: 2px;
	line-height: 1.5;
}

.banner-date{
	font-family: var(--font-en-serif-garamond); 
	font-weight: 500;
	letter-spacing: 1.1px; 
	text-transform: uppercase;
	line-height: 1.5;
}

.banner-date-kr{
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.3px; 
	line-height: 1.6;
}

.slide-title h2{
	font-weight: var(--font-weight-normal);
	letter-spacing: 0.15em;
	margin: 0;
}

.slide-title h2.en-version{
	letter-spacing: 0;
}

.slide-title h2.en-version .and-text{
	margin-left: 10px;
	margin-right: 10px;
}

/* ----------------------------------------------*/
/* Greeting Section     						 */
/* ----------------------------------------------*/

#greeting{
	padding:80px 0;
}

#greeting .flower-name {
	width: 20px;
	height: 22px;
	margin-bottom: 5px;
	/* margin-right: 5px; */
}

#parents .flower-name {
	width: 20px;
	height: 22px;
	margin-right: -5px;
	margin-bottom: 5px;
	margin-left: -5px;
}

#greeting .flower-placeholder {
	width: 20px;
	height: 22px;
	background: transparent;
    display: inline;
}

#greeting .flower-placeholder-none {
	width: 0;
}

.letterspace-up{
	letter-spacing: 1px;
}

.letterspace-2up{
	letter-spacing: 2px;
}

.greeting-content{
	line-height: 2.0em;
	width: 420px;
	height: auto;
	margin-top: 10px;
	margin-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
}

.greeting-name, .greeting-name-couple{
	font-weight:var(--font-weight-bold);
	display: flex;
    align-items: baseline; 
    justify-content: center;
	margin-bottom: 20px;
}

.greeting-rank-wrapper{
	width: 110px;
	font-family: 'pretendard', sans-serif;
	font-weight: var(--font-weight-normal);
	color: var(--color-secondary);
	text-align: left;
}

.greeting-name .greeting-rank-wrapper{
	margin-left: 10px;
}

.greeting-rank-two-letter{
	margin-left: 12px;
}

.greeting-rank-one-letter{
	margin-left: 23px;
	margin-right: 10px;
}

.separator {
	width: 15px;
	color: transparent
}

.separator-placeholder {
	width: 15px;
	background: transparent;
    display: inline;
}

.separator-none {
	width: 0;
}

.name-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 65px;
}

.name-block.groom-bride {
	width: 80px;
}

.name-block-none {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 0;
}

.name-block-couple {
	margin-left:10px;
}

.name-main  {
	font-family: 'pretendard', sans-serif;
	font-weight: var(--font-weight-normal);
	color: var(--color-secondary);
	font-size: 90%;
}

.greeting-name .name-main {
	margin-left: 5px;
	font-size: 90%;
}

.groom-bride .name-main {
	font-size: 110%;
	font-family: var(--body-font-family);
	font-weight: var(--font-weight-bold);
	align-items: center;
	color: var(--color-default);
}

.name-sub {
	font-family: 'pretendard', sans-serif;
	color: var(--color-quaternary);
	font-size: 15px;
	font-weight: var(--font-weight-normal);
	letter-spacing: -0.5px;
	word-break: keep-all;
	margin-top: 7px;
}

.greeting-name-couple .name-main {
	font-family: var(--body-font-family);
	font-weight: var(--font-weight-bold);
	line-height: 1.5;
	font-size: 100%;
}

.greeting-name-couple .and-text {
	margin-left: 15px;
	margin-right: 15px;
}

/* LONG NAME  						             */
/* ----------------------------------------------*/
.greeting-longname {
	display: flex;
	align-items:center;
    justify-content: center;
}

.longname-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right:10px;
}

.longname-inline-wrapper {
	display: inline-flex;
	/* align-items: baseline; */
	align-items: center;
	font-size: 90%;
}

.longname-separator {
	margin-bottom: 5px;
}

.name-block.longname {
	width: 350px;
	flex-wrap: wrap;
	align-items: flex-end;
	text-align: right;
}

.name-block.longname.groom-bride {
	width: 350px;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-left: 10px;
	text-align: left;
}

.greeting-longname .name-sub {
	margin-top: 0px;
	/* margin-bottom: 5px; */
}

/* .name-block.longname.groom-bride .name-sub {
	margin-top: 5px;
} */

/* CALL BUTTON 									*/
/* ----------------------------------------------*/

.call-button a.de-button, .calendar-button a.de-button{
	padding: 24px 0px;
	width: 350px;
	border-radius: 10px;
	border: 1px solid #b8b8b8;
	color:#2C2C2E;
	text-decoration: none;
	background-color: transparent;
	margin-top: 25px;
}

.call-button a.de-button h5, .calendar-button a.de-button h5{
	margin: 0;
	line-height: 0;
	font-family: var(--btn-font-family-primary);
	font-weight: 400;
}

.call-button a.de-button:hover, .calendar-button a.de-button:hover{
	border: 1px solid #878787;
	color: var(--color-default);
	text-decoration:none;
}

/* ----------------------------------------------*/
/* Calendar Section     						     */
/* ----------------------------------------------*/
#calendar{
	padding: 80px 0;
	display: flex; 
	justify-content: center; 
	align-content: center;
}

#calendar .section-title{
	margin-bottom: 10px;
}

.calendar-title {
	color: var(--color-title);
}

.calendar-title.date{
	letter-spacing: 1px;
	font-weight: var(--font-weight-bold);
	margin-top: 20px;
} 

.calendar-title.venue{
	letter-spacing: 0;
	line-height: 1.6;
	word-break: keep-all;
	font-weight: var(--font-weight-bold);
	margin-top: 15px;
	padding: 0 30px;
}

.calendar-wrapper{
	margin: auto;
	/* width: 500px; */
	width: 450px;
	margin-bottom: 20px;
	font-family: 'AritaBuri', sans-serif;
	font-size: 15px;
}

.week .day.selected span {
	font-family: 'AritaBuri', sans-serif !important;
}

/* ----------------------------------------------*/
/* Couple Section     						 */
/* ----------------------------------------------*/

#couple{
	padding:80px 0;
}

.couple-excerpt{
	margin-top:40px;
	margin-bottom:40px;
}

.groom-text{
	color: var(--theme-groom-primary);
	font-weight: var(--font-weight-bold);
}

.bride-text{
	color: var(--theme-bride-primary);
	font-weight: var(--font-weight-bold);
}

.couple-normal, .couple-short, .parents-normal {
	padding-left: 50px;
	padding-right: 50px;
}

.his-her-name{
	position:relative;
	margin-top: 40px;
	margin-bottom: 30px;
}

.his-her-name h3 {
	font-weight: var(--font-weight-bold);
	letter-spacing: 0;
}

.his-her-name small{
	font-weight: var(--font-weight-bold);
	margin-right: 10px;
}

.interview-btn a.de-button{
	padding: 27px 0px;
	width: 390px;
	border-radius: 50px;
	color: var(--color-inverse);
	text-decoration: none;
	background-color: var(--theme-button-couple);
	border: 1px solid var(--theme-button-couple);
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
	margin-top: 30px;
}

.interview-btn a.de-button h5{
	margin: 0;
	line-height: 0;
	color: var(--color-inverse);
	font-family: var(--btn-font-family-primary);
	font-weight: 400;
}

.interview-btn a i.de-icon-heart-empty{
	color: var(--theme-empty-heart);
}

.interview-btn a{
	text-align: center;
	color: #fff;
	text-decoration: none;
}

.interview-btn a i{
	margin-right: 10px;
	margin-left: 10px;
}

/* STORY POPUP TEMPLATE                          */
/* ----------------------------------------------*/
.story-qna{
	margin: 40px 0px;
}

.qna-title{
	font-weight: var(--font-weight-bold);
	word-break: keep-all;
	margin-bottom:20px;
	text-align: center;
}

.story-qna p{
	margin-bottom: 15px;
	color: var(--color-secondary);
	text-align: justify;
}

.test{
	display: none;
}

.load-more{
	background-color:#000;
	color:#fff !important;
	padding:5px 10px;
	border-radius:4px;
	font-size:20px;
	margin:50px 0;
	display:inline-block;
}
.load-more:hover{
	background-color:blue;
	text-decoration:none;
}

/* ----------------------------------------------*/
/* Parents Section     					    	 */
/* ----------------------------------------------*/

#parents{
	padding:80px 0;
}

.parents-name{
	position:relative;
}

.parents-name h5{
	margin-top:40px; 
	margin-bottom:20px;
	font-weight: var(--font-weight-normal);
}

.parents-name h3{
	font-weight: var(--font-weight-bold);
}

/* ----------------------------------------------*/
/* Our Story Section			                 */
/* ----------------------------------------------*/
#our-story{
	padding: 80px 0;
}

.story-row.row {
    display: table;
	padding:50px 0;
	position:relative;
}

.story-row.row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

.story-date-wrapper{
	z-index:1;
}

.story-date{
	float:left;
	margin-left:50px;
	background-color: #e1dddd;
	border-radius:50%;
	height: 20px;
	width: 20px;
}

#story-popup .story-date{
	display: none;
}

.story-date .date-only{
	font-size:30px; 
	color:#FFF; 
	line-height:30px; 
	margin-top:16px;
}

.story-date .month-year{
	font-size:16px; 
	color:#FFF;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	
	border-left: 13px solid transparent;
	float:right;
	margin-bottom:22px;
	margin-left:10px;
	margin-top:30px;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent; 
	
	border-right:13px solid transparent; 
	float:left;
	margin-bottom:22px;
	margin-right:10px;
	margin-top:30px;
}

.vertical-line{
	position:absolute; 
	height:100%; 
	width:1px; 
	margin:auto; 
	top:0; 
	bottom:0; 
	left:0; 
	right:0; 
	border-left:1px solid #e1dddd;
}

.end-of-story{
	margin-top:50px;
	margin-bottom:10px;
}

.end-of-story h2{
	color:var(--theme-quaternary);
	font-family: var(--font-en-cursive-script);
	font-weight: 400; 
}

/* ----------------------------------------------*/
/* Gallery Section - BOOTSTRAP     		 		 */
/* ----------------------------------------------*/
#gallery-section{
	padding: 80px 0;
}

#gallery-section .photo-item img {
    aspect-ratio: 1;
	width: 100%;
	border-radius: 5px;
}

#gallery-section .wedding-video{
	width: 100%;
	height: auto;
	padding-right: 10px;
	padding-left: 10px;
}

#gallery-section .col-sm-3 {
	width: 25%;
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
}

#gallery-section .col-sm-4 {
	width: 33%;
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
}

#gallery-section .col-sm-6 {
	width: 50%;
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 2px;
}

iframe{
	width:925px;
	height:520px;
	border:none;
	display: block;
	margin: 0 auto;
	align-items: center;
}

#moreImage {
	display: none;
}

.showButton-wrapper {
	text-align: center;
}

.showButton {
	background-color: transparent;
	border:none;
	/* margin-top: 40px; */
	padding: 40px 100px 0 100px;
}

.showButton img {
	content: var(--theme-show-more-image);
	width: 70px;
	height: auto;
}

.showButton h4 {
	font-family: var(--btn-font-family-primary);
	font-weight:400;
	color: var(--theme-nav);
}
  
/* ----------------------------------------------*/
/* Countdown Section (Don't Miss it)	         */
/* ----------------------------------------------*/

#counting-down{
	text-align:center; 
	color:#FFF; 
	-ms-transform: rotate(-10deg); 
	-webkit-transform: rotate(-10deg); 
	transform: rotate(-10deg);
	padding-right:30px;
	margin-top:0px;
	margin-bottom:25px;
}

#counting{
	font-size:65px; 
	line-height:50px
}

#down{
	font-size:55px; 
	line-height:65px;
}

.simple-countdown{ 
	margin:0 auto; 
	margin-top:5px;
	text-align: center;
	font-family: 'Nanum Myeongjo', serif;
	font-weight: 700;
}

#dday-countdown{
	font-size: 70px;
	letter-spacing: 0.3em;
	color: #fff;
	position: relative;
}

#date-countdown{
	font-size: 40px;
	letter-spacing: 0.25em;
	color: #fff;
	position: relative;
}

.simple-countdown.is-countdown {
	border: none;
	background-color:transparent;
	color:#FFF;
}

.simple-countdown .countdown-amount {
	display:inline-block;
	font-size:18px;
	letter-spacing:2px;
}
.simple-countdown .countdown-period {
    display:inline-block;
	font-size:18px;
}

h3.dont-miss-it-title{
	letter-spacing: 0.3em;
	margin-top: 20px;
	margin-bottom:30px; 
	font-weight: var(--font-weight-normal);
	color: var(--color-inverse);
	position:relative;
}

#divider-title{
	color: #FFF;
	text-align: center;
	vertical-align: middle;
}

#divider-title-line{
	font-size: 75px;
	line-height: 75px;
}

.circle-countdown{
	width:100%; 
	margin:0 auto; 
	margin-top:25px
}

.circle-countdown.is-countdown {
	background-color:transparent;
	border:none;
}

.circle-countdown .countdown-amount {
	background-color:#f0394d;
	width:85px;
	height:85px;
	border-radius:50%;
	display:block;
	padding-top:22px;
	font-size:30px;
	margin:0 auto;
}

.circle-countdown .countdown-period {
	padding:10px;
	display:block;
	text-align:center;
	font-size:16px;
	text-transform:uppercase;    
}

/* ----------------------------------------------*/
/* More Events Section					     	 */
/* ----------------------------------------------*/
/* ref - https://bootsnipp.com/snippets/6Bd7     */

#more-events{
	padding: 80px 0;
}

#events-carousel .item{
	padding:7px;
}

#more-events .title-excerpt h3{
	font-weight: var(--font-weight-bold);	
	margin-bottom: 20px;
}

.events-title{
	color:rgba(var(--theme-primary-rgb),0.7);
	font-family: var(--font-en-serif-garamond);
	font-weight: var(--font-weight-normal);
	letter-spacing: 0.1em;
	font-size: 1.1em;
}

.event-item img{
	position: relative;
}

.event-item i{
	position: absolute;
	top: 150px;
	right: 10px;
	font-size: 30px;
}

#custom_carousel .controls{
	border-bottom: 1px solid rgba(var(--theme-line-active-rgb),0.2);
    overflow-x: hidden;
    overflow-y: hidden;
    padding:0;
    /* margin:0 0 30px 0; */
	margin:0;
    white-space: nowrap;
    text-align: center;
    position: relative;
}

#custom_carousel .controls li {
    display: table-cell;
    width: 1%;
    max-width:90px;
	/* font-size: 18px; */
}

#custom_carousel .controls li.active {
	border-bottom: 4px solid rgba(var(--theme-line-active-rgb),0.7);
}

#custom_carousel .controls li.active a{
	color: rgba(var(--theme-secondary-rgb),1.0);
	content: '';
	font-weight: 500;
}

#custom_carousel .controls li a{
	color: rgba(var(--theme-secondary-rgb),0.5);
	background-color: transparent;
	font-size: 19px;
	font-family: var(--btn-font-family-primary);
	font-weight: 400;
}

#custom_carousel .controls a small {
    overflow:hidden;
    display:block;
    font-size:10px;
    margin-top:5px;
    font-weight:var(--font-weight-bold);
}

#custom_carousel img{
	display: block;
	margin: 20px auto 0 auto;
	/* width: 90%; */
	width: 95%;
	height: auto;
}

.event-button a.de-button{
	padding: 10px 50px;
	width: 350px;
	border-radius: 10px;
	border: 1px solid #b8b8b8;
	color:#2C2C2E;
	text-decoration: none;
	background-color: transparent;
	margin-top: 25px;
	margin-bottom: 20px;
}

.event-button a.de-button h5{
	line-height: 1.6;
	font-family: var(--btn-font-family-primary);
	font-weight: 400;
	word-break:keep-all;
}

.event-button a.de-button:hover{
	border: 1px solid #878787;
	color: var(--color-default);
	text-decoration:none;
}

/* ----------------------------------------------*/
/* RSVP Section					     	 */
/* ----------------------------------------------*/

#rsvp{
	padding: 80px 0;
}

.rsvp-info{
	margin-top: 30px;
	width: 330px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 5px double rgba(var(--theme-primary-rgb), 0.3);
	border-bottom: 5px double rgba(var(--theme-primary-rgb), 0.3);
}

#rsvp .section-title .rsvp-info h5{
	font-family: var(--info-font-family);
	font-weight: 400;
	/* line-height: 1.3em; */
	line-height: 1.6;
	color: var(--theme-tertiary);
}

.rsvp-info i{
	margin-right: 7px;
}

.rsvp-button a.de-button, .rsvp-button a.de-button:hover, .rsvp-button a.de-button:active, .rsvp-button a.de-button:focus{
	margin-top: 0px;
	padding: 24px 0px;
	width: 350px;
	border-radius: 10px;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
	text-decoration: none;
}

.rsvp-button a.de-button h5{
	margin: 0;
	line-height: 0;
	color: var(--color-inverse);
	font-family: var(--btn-font-family-primary);
	font-weight: 400;
}

/*-----------------------------------------------*/
/* RSVP popup		     		     		     */
/*-----------------------------------------------*/
#rsvp-popup{
	width: 600px;
	height: auto;
	max-height: 90%;
	padding: 20px;
	margin:auto; 
	overflow-y:scroll;
	overflow-x:hidden;
	background-color: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#rsvp-popup .mfp-close{
	position: absolute;
    top: 45px;
    right: 40px;
	cursor:pointer;
	background-color: #fff !important;
	color:#333;
}

#rsvp-popup .content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

#rsvp-popup .the-content{
	padding:30px 30px 20px 30px;
	margin: auto;
}

#rsvp-popup *{
	font-family: var(--info-font-family);
}

#rsvp-popup .custom-input{
	border:none;
}

#rsvp-popup .form-control{
	box-shadow:none;
	padding:0px 12px 16px 0px;
	height: 40px;
	font-size: 16px;
}

#rsvp-popup .rsvp-button-outer{
	padding-bottom: 30px;
}

#rsvp-popup .rsvp-items-wrapper{
	padding-bottom: 10px;
}

#rsvp-popup .rsvp-item-outer{
	padding-bottom: 0px;
}

#rsvp-popup .rsvp-radio-outer{
	padding-bottom: 40px;
}

#rsvp-popup .rsvp-radio-outer .col-xs-6{
	padding:0;
}

#rsvp-popup .main-title{
	font-size: 22px;
	font-weight: 700;
}

#rsvp-popup .large-title{
	font-size: 16px;
	letter-spacing: -0.3px;
	font-weight: 700;
	margin-bottom: 15px;
}

#rsvp-popup .small-title{
	font-size: 16px;
	letter-spacing: -0.3px;
	font-weight: 700;
	word-break: keep-all;
}

#rsvp-popup hr.line-title{
	margin: 30px 0;
	width:100%;
	border-top:1px solid #eaeaea;
}

#rsvp-popup hr.line-item{
	margin-bottom: 25px;
	width:95%;
	border-top:1px solid #eee;
}

#rsvp-popup .required{
	color:#f47269;
	font-size: 16px;
	font-weight: 700;
	position: absolute;
	margin-left:5px;
}

#rsvp-popup .rsvp .btn-default{
	border-radius: 0px;
	padding: 15px;
	border-color:#e1e1e1;
	font-size: 16px;
	font-weight: 400;
	color:#909090;
}

#rsvp-popup .rsvp .btn-default label{
	padding-right: 10px;
}
#rsvp-popup .btn:active, #rsvp-popup .btn.active{
	box-shadow: none;
	-webkit-box-shadow:none;
}

#rsvp-popup .rsvp .btn-default.attend-yes.active, #rsvp-popup .rsvp .btn-default.attend-no.active{
    background-color: var(--color-background-inverse);
	border-color:var(--color-background-inverse);
	color: var(--color-inverse);
	font-weight: 500;
}

#rsvp-popup .rsvp .btn-default.attend-yes.active i{
	color: #91b193;
}

#rsvp-popup .rsvp .btn-default.attend-no.active i{
	color:#cb9794;
}

#rsvp-popup .rsvp .btn-default.side-groom.active{
    background-color: #658f67;
	border-color:#658f67;
	color:#fff;
	font-weight: 500;
}

#rsvp-popup .rsvp .btn-default.side-bride.active{
    background-color: #be7e79;
	border-color:#be7e79;
	color:#fff;
	font-weight: 500;
}

#rsvp-popup .rsvp-consent-outer{
	padding: 25px 25px 10px 25px;
	border: 1px solid #eaeaea;
	width:95%;
	margin:auto;
}

#rsvp-popup .rsvp-consent-outer .consent{
	font-size: 14px;
	color: var(--color-tertiary);
	letter-spacing: -0.5px;
	margin-bottom: 15px;
	font-weight: 300;
}

#rsvp-popup .checkbox-container{
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Radio container */
#rsvp-popup .radio-container {
	display: block;
	position: relative;
	padding-left: 27px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
#rsvp-popup .radio-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
  
/* Create a custom radio button */
#rsvp-popup .radiomark {
	position: absolute;
	top: 2px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #fff;
	border: 1px solid #909090;
	border-radius: 50%;
}

/* When the radio button is checked, add a blue background */
#rsvp-popup .radio-container input:checked ~ .radiomark {
	background-color: var(--color-background-inverse);
	border: 1px solid var(--color-background-inverse);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
#rsvp-popup .radiomark::after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
#rsvp-popup .radio-container input:checked ~ .radiomark::after {
	display: block;
}

/* Style the indicator (dot/circle) */
#rsvp-popup .radio-container .radiomark::after {
	left: 6px;
	top: 3px;
	width: 6px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Hide the browser's default checkbox button */
#rsvp-popup .checkbox-container input{
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom checkbox */
#rsvp-popup .checkmark{
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #fff;
	border: 1px solid #333;
}
  
/* When the checkbox is checked, add a blue background */
#rsvp-popup .checkbox-container input:checked ~ .checkmark {
	background-color: var(--color-background-inverse);
}

/* Create the checkmark/indicator (hidden when not checked) */
#rsvp-popup .checkmark::after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
#rsvp-popup .checkbox-container input:checked ~ .checkmark::after {
	display: block;
}
  
/* Style the checkmark/indicator */
#rsvp-popup .checkbox-container .checkmark::after {
	left: 8px;
	top: 4px;
	width: 8px;
	height: 12px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#rsvp-popup .rsvp-submit-button a.de-button{
	width:100%;
	padding: 18px 0;
	font-size: 18px;
	background-color: var(--color-background-inverse);
	color: var(--color-inverse);
	margin-top: 25px;
	font-weight: 300;
}

/* ----------------------------------------------*/
/* Gift Section			         				 */
/* ----------------------------------------------*/
#gift-section{
	padding: 80px 0; 
}

#gift-section h3 {
	color:#2C2C2E;
}

#gift-info{
	font-family: var(--info-font-family); 
	font-weight: 400;
}

.gift-display{
	display:flex;
}

/* ICON IMAGE */
#flower-icon{
	width: 60px !important; 
	height: auto;
}

/* Gift for Groom */
.accordion1,.accordion-groom{
	background-color: var(--theme-groom-background-primary);
	color: var(--theme-groom-secondary);
	border-width: 0.5px;
	border-color:var(--theme-groom-border);
	border-style: solid;
	cursor: pointer;
	padding: 20px 25px;
	width: 100%;
	text-align: left;
	outline: none;
	font-size: 22px;
	transition: 0.4s;
	font-weight: 500;
}  

.accordion1::after, .accordion-groom::after {
	color: var(--theme-groom-secondary);
	font-family:'FontAwesome';
	font-weight: bold;
	font-size: 24px;
	float: right;
	margin-left: 5px;
}
  
.accordion-groom::after,.accordion.active::after {
	content: "\f106";
}

.accordion1::after,.accordion-groom.collapsed::after {
	content: "\f107";
}

.accordion-groom.always-open::after, .accordion-bride.always-open::after{
	content:none;
}
  
.panel-groom{
	background-color: var(--theme-groom-background-secondary);
	border: 0.5px solid var(--theme-groom-border);
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

/* Gift for Groom OPEN */
.panel3{
	background-color: var(--theme-groom-background-secondary);
	border: 0.5px solid var(--theme-groom-border);
}

hr.line-groom{
	border: 0.5px solid var(--theme-groom-line);
	margin: 0px;
}

/* Gift for Bride */
.accordion2, .accordion-bride{
	background-color: var(--theme-bride-background-primary);
	color: var(--theme-bride-secondary);
	border-width: 0.5px;
	border-color: var(--theme-bride-border);
	border-style: solid;
	cursor: pointer;
	padding: 20px 25px;
	width: 100%;
	text-align: left;
	outline: none;
	font-size: 22px;
	transition: 0.4s;
	font-weight: 500;
}
  
.accordion2::after, .accordion-bride::after {
	color: var(--theme-bride-secondary);
	font-family:'FontAwesome';
	font-weight: bold;
	font-size: 24px;
	float: right;
	margin-left: 5px;
}
  
.accordion-bride::after,.accordion2.active::after {
	content: "\f106";
}

.accordion2::after,.accordion-bride.collapsed::after {
	content: "\f107";
}
  
.panel-bride{
	background-color:var(--theme-bride-background-secondary);
	border: 0.5px solid var(--theme-bride-border);
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

/* Gift for Bride OPEN */
.panel4{
	background-color:var(--theme-bride-background-secondary);
	border: 0.5px solid var(--theme-bride-border);
}

hr.line-bride{
	border: 0.5px solid var(--theme-bride-line); 
	margin: 0px;
}

.kakaopaybtn {
	background-color: #FEE500 ; /* kakao yellow */
	box-shadow: 0px 8px 15px rgba(51, 51, 51, 0.1);
	color: #000;
	border: none;
	border-radius: 40px;
	text-align: center;
	display: inline-block;
	font-size: 15px;
	width: 200px;
	padding: 15px 0px;
	cursor: pointer;
}

.kakaopaybtn a{
	color: #000;
	text-decoration: none;
}

.kakaopaybtn a i.de-icon-comment{
	margin-right: 2px;
	font-size: 17px;
}

.accountbtn {
	background-color: #fff;
	box-shadow: 0px 8px 15px rgba(51, 51, 51, 0.1);
	color: #000;
	border: none;
	border-radius: 40px;
	text-align: center;
	display: inline-block;
	font-size: 15px;
	width: 200px;
	padding: 15px 0px;
	cursor: pointer;
}

.gift-one-button {
	width: 250px;
}

.btnouter {
	margin-bottom: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.accountinfo {
	padding: 30px 60px;
	font-family: var(--info-font-family);
	/* font-size: 18px; */
	font-weight: 400;
	color: #2C2C2E;
	letter-spacing: -0.3px;
}

.accountinfo p.lead{
	margin-bottom: 0;
	line-height: 1.5;
}

.btninner {
	display: inline-block;
	margin: 0px 10px;
}

.right-float{
	float: right; 
}

/* ----------------------------------------------*/
/* Flower Section			         			 */
/* ----------------------------------------------*/

#section-flower {
	margin-bottom: 100px;
}

.flower-button a.de-button {
	padding: 10px 50px;
	width: 350px;
	border-radius: 10px;
	border: 1px solid #b8b8b8;
	color:#2C2C2E;
	text-decoration: none;
	background-color: transparent;
	margin-top: 25px;
}

.flower-button a.de-button h5{
	line-height: 1.6;
	font-family: var(--btn-font-family-primary);
	font-weight: 400;
	word-break:keep-all;
}

.flower-button a.de-button:hover{
	border: 1px solid #878787;
	color: var(--color-default);
	text-decoration:none;
}

/* Flower Popup		         			         */
/* ----------------------------------------------*/

#flower-popup, #rsvp-layerpopup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: auto;
	max-height: 90%; /* or none */
	max-width: 90vw;
	padding: 20px;
	margin:auto; 
	/* overflow-y:scroll;
	overflow-x:hidden; */
	overflow: visible;
	background-color: #fff;
	border: none;
	box-shadow: none;
	z-index: 9999; /* 화면 맨 위에 표시 */
}

#flower-popup .mfp-close, #rsvp-layerpopup .mfp-close{
	position: absolute;
    top: 45px;
    right: 40px;
	cursor:pointer;
	background-color: #fff !important;
	color:#333;
}

#flower-popup .content-wrapper, #rsvp-layerpopup .content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

#flower-popup .the-content, #rsvp-layerpopup .the-content{
	padding:30px 30px 20px 30px;
	margin: auto;
}

#flower-popup *, #rsvp-layerpopup *{
	font-family: var(--info-font-family);
}

#flower-popup .custom-input, #rsvp-layerpopup .custom-input{
	border:none;
}

#flower-popup .form-control, #rsvp-layerpopup .form-control{
	box-shadow:none;
	padding:0px 12px 16px 0px;
	height: 40px;
	font-size: 16px;
}

#flower-popup .rsvp-button-outer, #rsvp-layerpopup .rsvp-button-outer{
	padding-bottom: 30px;
}

#flower-popup .rsvp-items-wrapper, #rsvp-layerpopup .rsvp-items-wrapper{
	padding-bottom: 10px;
}

#flower-popup .rsvp-item-outer, #rsvp-layerpopup .rsvp-item-outer{
	padding-bottom: 0px;
}

#flower-popup .rsvp-radio-outer, #rsvp-layerpopup .rsvp-radio-outer{
	padding-bottom: 40px;
}

#flower-popup .rsvp-radio-outer .col-xs-6, #rsvp-layerpopup .rsvp-radio-outer .col-xs-6{
	padding:0;
}

#flower-popup .main-title, #rsvp-layerpopup .main-title{
	font-size: 22px;
	font-weight: 700;
}

#flower-popup .large-title, #rsvp-layerpopup .large-title{
	font-size: 18px;
	letter-spacing: -0.3px;
	font-weight: 700;
	margin-bottom: 15px;
}

#flower-popup .small-title, #rsvp-layerpopup .small-title{
	font-size: 16px;
	letter-spacing: -0.3px;
	font-weight: 400;
}

#flower-popup .small-title, #rsvp-layerpopup .small-title{
	font-size: 16px;
	letter-spacing: -0.3px;
	font-weight: 400;
}

#flower-popup .flower-popup-content-button a.de-button, #rsvp-layerpopup .layerpopup-btn a.de-button{
	width:100%;
	padding: 18px 0;
	font-size: 18px;
	background-color: var(--color-background-inverse);
	color: var(--color-inverse);
	margin-top: 25px;
	font-weight: 300;
}

/* FLOWER POPUP CUSTOM DESIGN */
.flower-popup-card, .layerpopup-card {
	background: #fff;
	border-radius: 18px;
	padding: 32px 20px 24px 20px;
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
  }
  
  .flower-popup-title, .layerpopup-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 16px;
  }
  
  .flower-popup-desc, .layerpopup-desc {
	color: #666;
	font-size: 16px;
	margin-bottom: 18px;
	line-height: 1.7;
	font-weight: 400;
	white-space: pre-line;
  }
  
  .flower-popup-divider, .layerpopup-divider {
	border: none;
	border-top: 1px solid #eee;
	margin: 25px 0;
  }
  
  .flower-popup-info, .layerpopup-info {
	margin-bottom: 24px;
  }
  
  .flower-popup-info-item, .layerpopup-info-item {
	font-size: 16px;
	margin-bottom: 8px;
	align-items: center;
	gap: 8px;
	justify-content: center;
	color: #333;
	font-weight: 400;
  }

	.layerpopup-info-item.venue span {
		display: inline-block;
	}
  
  .flower-popup-btn, .flower-popup-btn:hover, .flower-popup-btn:active, .flower-popup-btn:active:after, .flower-popup-btn:focus, .layerpopup-btn, .layerpopup-btn:hover, .layerpopup-btn:active, .layerpopup-btn:active:after, .layerpopup-btn:focus {
	width: 100%;
	background: var(--color-background-inverse);
	border: 1px solid var(--color-background-inverse);
	border-radius: 10px;
	font-size: 18px;
	padding: 16px 0;
	color: #fff;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 500;
	cursor: pointer;
	margin-top: 10px;
	transition: border 0.2s;
	display: inline-block;
	text-decoration: none !important;
  }

  @media screen and (max-width: 767px) {

	.flower-button a.de-button{
		padding: 6px 25px;
		width: 270px;
	}

	.flower-popup-title, .layerpopup-title {
	  font-size: 20px;
	}

	.flower-popup-desc, .layerpopup-desc {
		font-size: 15px;
	  }
	
	  .flower-popup-info-item, .layerpopup-info-item {
		font-size: 15px;
	  }
	
	  .flower-popup-btn, .flower-popup-btn:hover, .flower-popup-btn:active, .flower-popup-btn:active:after, .flower-popup-btn:focus, .layerpopup-btn, .layerpopup-btn:hover, .layerpopup-btn:active, .layerpopup-btn:active:after, .layerpopup-btn:focus {
		font-size: 16px;
	  }
}

@media screen and (max-width: 480px) {

	.flower-popup-card, .layerpopup-card {
		padding: 20px 0px 20px 0px;
	}

  	.flower-popup-title, .layerpopup-title {
		font-size: 17px;
	}

	.flower-popup-desc, .layerpopup-desc {
		font-size: 14px;
	}

	.flower-popup-info-item, .layerpopup-info-item {
		font-size: 13px;
	}

  	.flower-popup-btn, .flower-popup-btn:hover, .flower-popup-btn:active, .flower-popup-btn:active:after, .flower-popup-btn:focus, .layerpopup-btn, .layerpopup-btn:hover, .layerpopup-btn:active, .layerpopup-btn:active:after, .layerpopup-btn:focus {
		font-size: 15px;
	}

	#flower-popup .mfp-close, #rsvp-layerpopup .mfp-close {
		top: 32px;
		right: 15px;
	}
}

@media screen and (max-width: 359px) {

	.flower-button a.de-button{
		padding: 6px 25px;
		width: 270px;
	}

	.flower-popup-title, .layerpopup-title {
		font-size: 16px;
	}

	.flower-popup-desc, .layerpopup-desc {
		font-size: 13px;
	}

	.flower-popup-info-item, .layerpopup-info-item {
		font-size: 12px;
	}

	.flower-popup-btn, .flower-popup-btn:hover, .flower-popup-btn:active, .flower-popup-btn:active:after, .flower-popup-btn:focus, .layerpopup-btn, .layerpopup-btn:hover, .layerpopup-btn:active, .layerpopup-btn:active:after, .layerpopup-btn:focus {
		font-size: 14px;
	}
}

@media screen and (max-width: 320px) {
	.flower-popup-title {
		font-size: 15px;
	}

	.flower-popup-desc {
		font-size: 12px;
		letter-spacing: -0.5px;
	}

	.flower-popup-info-item {
		font-size: 11px;
	}

	.flower-popup-btn, .flower-popup-btn:hover, .flower-popup-btn:active, .flower-popup-btn:active:after, .flower-popup-btn:focus {
		font-size: 13px;
	}

	#flower-popup .mfp-close {
		font-size: 18px !important;
		top: 30px;
		right: 15px;
	}
}

/* ----------------------------------------------*/
/* Where When Section					     	 */
/* ----------------------------------------------*/
#where-when{
	padding: 80px 0;
}

#where-when .kakao-map{
	margin-top: 20px;
	margin-bottom: 40px;
}

#where-when .root_daum_roughmap {
	width:100%;
	height:auto
}

#where-when .address-info h3{
	font-family: var(--info-font-family);
	font-weight: 400;
	font-size: 18px;
	color: var(--color-secondary);
}

#where-when .location-info{
	margin: 0px 20px;
}

#where-when .location-info h4{
	margin-bottom: 15px;
	font-weight: var(--font-weight-bold);
}

#where-when .location-info p{
	font-family: var(--info-font-family);
	font-weight: 400;
	line-height: 1.8;
	word-break: keep-all;
	letter-spacing: -0.3px;
}

#where-when .location-info p.indent{
	margin-left: 25px;
}

#where-when .location-info p.indent-long{
	text-indent: -1.5em;
	margin-left: 2em;
}

.and{
	color:#f0394d;
}

.border-column{
	border-left:1px solid rgb(185,159,113,0.3); 
}

#map-canvas{
	height:560px; 
	width:100%; 
}

/* address info Icon */
#where-when .de-icon{
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size:18px;	
}

#where-when .btninner {
	display: inline-block;
	margin: 0px 10px;
}

#where-when .nav-outer .col-xs-4{
	padding-right: 5px;
	padding-left: 5px;
}

.nav-button {
	background-color: #fff;
	width: 100%;
	color: #191919;
	border: none;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	text-align: center;
	display: inline-block;
	padding: 15px 0px;
	cursor: pointer;
	font-size: 17px;
	font-family: var(--info-font-family);
	font-weight: 400;
	margin-top: 10px;
}

.nav-button img{
	width: 28px;
	height: auto;
	border-radius: 5px;
	border: solid 0.1px rgb(106, 106, 106, 0.2);
	margin-right: 8px;
}

.map-button {
	background-color: #fff;
	color: #191919;
	border: none;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	text-align: center;
	display: inline-block;
	width: 170px;
	padding: 15px 0px;
	cursor: pointer;
	font-size: 18px;
	font-family: var(--info-font-family);
	font-weight: 400;
}

.map-button img{
	width: 28px;
	height: auto;
	border-radius: 5px;
	border: solid 0.1px rgb(106, 106, 106, 0.2);
	margin-right: 8px;
}

hr.line-general{
	border:0.5px solid rgba(var(--theme-line-rgb),0.3);
	margin: 30px 0;
}

hr.line-onoff{
	display: none;
}

#map-overlay {
    cursor: pointer;
    z-index: 1;
}

.map-zoom{
	width: 100%;
	margin-bottom: 50px;
}

.nav-outer{
	margin-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
}

.map-zoom button{
	background-color: var(--theme-button-secondary);
	color: var(--color-inverse);
	width: 100%;
	border: none;
	padding: 20px;
	font-size: 18px;
	font-family: var(--info-font-family);
	text-align: center;
	letter-spacing: -0.3px;
	word-break: keep-all;
}

.map-zoom button .col-xs-8, .map-zoom button .col-xs-4{
	padding-right:5px;
	padding-left:5px;
}

.map-zoom button .col-xs-8{
	text-align:left;
}

.map-zoom button .col-xs-4{
	text-align:right;
}

.map-zoom a{
	text-decoration: none;
	color: inherit
}

.banner-venue, .banner-address{
	color: var(--theme-tertiary);
	/* font-weight: 700; */
	/* font-size: 22px;
	line-height:1.5em; */
	line-height:1.7;
	word-break: keep-all;
	margin-top: 15px;
	margin-bottom: 15px;
	font-family: var(--info-font-family);
	font-weight: 400;
}

.banner-venue span{
	display: inline-block;
}

.banner-address i{
	display: none;
}

/* ----------------------------------------------*/
/* Guestbook Section					     	 */
/* ----------------------------------------------*/
#guestbook{
	padding: 100px 0;
}

#guestbook .section-title {
	margin-bottom: 40px;
}

#guestbook .section-title h1{
	margin-bottom: 40px;
}

#guestbook .section-title .title-content{
	margin-top: 35px;
}

/* Message Write Button 						 */
/* ----------------------------------------------*/

.message-write a.de-button, .message-write a.de-button:hover, .message-write a.de-button:active, .message-write a.de-button:focus{
	margin-top: 0px;
	margin-bottom: 50px;
	padding: 24px 10px;
	width: 350px;
	border-radius: 10px;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	font-family: var(--btn-font-family-primary);
}

.message-write a.de-button i{
	font-size: 105%;
	margin-right: 10px;
}

.message-write a.de-button h5{
	margin: 0;
	line-height: 0;
	color: var(--color-inverse);
	font-weight: 400;
}

/* message Box - Overall						 */
/* ----------------------------------------------*/
.message-box-wrapper {
	margin-bottom: 20px;
}

.message-box {
    background-color: #fff;
    padding: 25px;
    border-radius: 20px;
}

#message-all-popup .message-box, .guestbook-exampleComment .message-box {
    background-color: #fff;
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 20px;
}

.message-header p, .message-footer p{
	line-height: 1.0;
	margin: 0;
}

.message-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.message-remove {
	cursor: pointer;
	margin-left: 20px;
	text-decoration: none;
	color: #aeaeae;
	background: none;
	border: none;
	padding-right:0;
}

.message-remove svg {
	width: 16px;
	height: 16px;
}

p.message-content {
    line-height: 1.7;
	text-align: left;
	font-weight: 400;
}

img.message-line-groom {
	content: var(--theme-message-line-groom);
	width:200px; 
	height:auto; 
	margin:0 auto;
	display: block;
}

img.message-line-bride {
	content: var(--theme-message-line-bride);
	width:200px; 
	height:auto; 
	margin:0 auto;
	display: block;
}

p.message-date {
    font-weight: 400;
	color: #aeaeae;
	font-family: var(--info-font-family);
	margin-bottom: 10px;
}

.sender-name {
	font-weight: var(--font-weight-bold);
}

.sender-relationship {
	font-size:0.9em;
}

.message-box.to-groom .message-receiver-wrapper {
	background: linear-gradient(to top, rgba(var(--theme-groom-tertiary-rgb),0.1) 50%, transparent 50%);
}

.message-box.to-groom .message-to, .message-box.to-groom .message-from {
	color: rgba(var(--theme-groom-tertiary-rgb),1.0);
	font-family: var(--font-en-serif-garamond);
	font-size: 1.1em;
}

.message-box.to-bride .message-receiver-wrapper {
	background: linear-gradient(to top, rgba(var(--theme-bride-tertiary-rgb),0.1) 50%, transparent 50%);
}

.message-box.to-bride .message-to, .message-box.to-bride .message-from {
	color: rgba(var(--theme-bride-tertiary-rgb),1.0);
	font-family: var(--font-en-serif-garamond);
	font-size: 1.1em;
}

/* message Show All Button   					 */
/* ----------------------------------------------*/
.show-message {
	background-color: transparent;
	cursor: pointer;
	padding: 20px 90px 20px 100px;
	border: none;
}

.show-message h4 {
	font-weight: 400;
	color: var(--color-button-text);
	/* font-size: 20px; */
	display: inline-block;
	font-family: var(--btn-font-family-primary);
	margin-top: 10px;
	margin-bottom: 10px;
}

/* ----------------------------------------------*/
/* Guestbook Popup Components					 */
/* ----------------------------------------------*/
#guestbook-popup {
	width: 700px;
	height: auto;
	max-height: 95%;
	margin:auto; 
	overflow-y:auto;
	overflow-x:hidden;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--info-font-family);
}

#message-all-popup{
	width: 700px;
	height: auto;
	max-height: 95%;
	margin:auto; 
	overflow-y:auto;
	overflow-x:hidden;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#guestbook-popup .mfp-close {
	position: absolute;
    top: 30px;
    right: 30px;
	cursor:pointer;
	background-color: transparent !important;
	color:var(--color-secondary);
}

#message-all-popup .mfp-close {
	position: absolute;
    top: 35px;
    right: 30px;
	cursor:pointer;
	background-color: transparent !important;
	color:var(--color-secondary);
}

#guestbook-popup .content-wrapper, #message-all-popup .content-wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
}

#guestbook-popup .the-content {
	padding: 35px 60px;
	width: 100%;
	margin: auto;
}

#message-all-popup .the-content{
	padding:40px 40px;
	margin: auto;
	width: 100%;
}

#guestbook-popup .form-control{
	padding: 15px;
	height: 45px;
	font-size: 15px;
	margin-top: 10px;
	border-radius: 15px;
}

#guestbook-popup textarea.form-control {
	height: 110px;
	padding: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
}

#guestbook-popup .message-items-wrapper{
	padding: 0 15px;
}

#guestbook-popup .message-item-outer{
	padding-bottom: 0;
}

#guestbook-popup .main-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 30px;
}

#message-all-popup .main-title{
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 40px;
	font-family: var(--info-font-family);
}

#guestbook-popup .sub-title {
	margin-top:15px;
	margin-bottom: 25px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

#guestbook-popup hr.line-title {
	margin: 0px 0 30px 0;
	width:100%;
	border-top:1px solid #eaeaea;
}

#guestbook-popup .large-title{
	font-size: 18px;
	letter-spacing: -0.3px;
	font-weight: 400;
	margin-bottom: 15px;
}

#guestbook-popup .second-line {
	font-weight: 700;
}

#guestbook-popup .small-title{
	font-size: 16px;
	letter-spacing: -0.3px;
	font-weight: 700;
	margin-bottom:0;
}

#guestbook-popup .form-description{
	font-size: 14px;
	letter-spacing: -0.3px;
	color: #9e9e9e;
	font-weight: 400;
}

#guestbook-popup hr.line-item{
	margin-bottom: 20px;
	width:95%;
	border-top:1px solid #eee;
}

#guestbook-popup .required{
	color:#f47269;
	font-size: 16px;
	font-weight: 700;
	position: absolute;
	margin-left:5px;
}

#guestbook-popup .btn-default{
	border-radius: 0px;
	padding: 10px;
	border-color:#e1e1e1;
	font-size: 16px;
	font-weight: 400;
	color:#909090;
}

#guestbook-popup .btn-default label{
	padding-right: 10px;
}

#guestbook-popup .btn:active, #guestbook-popup .btn.active{
	box-shadow: none;
	-webkit-box-shadow:none;
}

#guestbook-popup .btn-default.side-groom.active{
    background-color: #658f67;
	border-color:#658f67;
	color:#fff;
	font-weight: 500;
}

#guestbook-popup .btn-default.side-bride.active{
    background-color: #be7e79;
	border-color:#be7e79;
	color:#fff;
	font-weight: 500;
}

#guestbook-popup .custom-footer {
    display: flex;
    justify-content: space-between; /* Aligns one button to each end */
	margin-top: 15px;
}

#guestbook-popup .custom-footer .btn {
    display: inline-block;
	font-size: 18px;
}

#guestbook-popup .custom-footer .btn:hover, #guestbook-popup .custom-footer .btn:active, #guestbook-popup .custom-footer .btn:focus {
	box-shadow:none;
	outline:none;
}

#guestbook-popup .guestbook-exampleButton{
	padding-left: 10px;
	background-color: transparent;
	text-align: left;
	font-weight: 500;
	cursor: pointer;
	width: 45%;
}

#guestbook-popup .guestbook-submitButton{
	padding: 16px 0;
	background-color: var(--color-secondary);
	color: var(--color-inverse);
	margin-top: 0px;
	font-weight: 400;
	cursor: pointer;
	letter-spacing: 1px;
	width: 50%;
	border-radius: 0;
}

.guestbook-exampleComment {
	background-color:var(--theme-background-primary); 
	text-align: center; 
	padding: 50px 50px; 
}

.guestbook-exampleComment * {
	font-size: 16px;
	font-weight: 400;
}
/* ----------------------------------------------*/
/* Footer Section		     		 			 */
/* ----------------------------------------------*/

footer {
	position: inherit;
	height: 550px;
	background-color:rgba(0,0,0,0.6); 
}

footer .image-divider.fixed-height{
	background-position: 60% 60%;
	height:100%;
	width: 100%;
	max-width: 1500px;
	margin:auto;
}

footer .image-divider.fixed-height.user-image{
	background-position: 50% 50%;
	height:100%;
	width:600px;
	margin:auto;
}

.thank-wrapper{
	padding-top: 30px;
}

.link-outer{
	text-align: center;
	padding-top: 160px;	
}

.thank-you-kr{
	font-weight: var(--font-weight-normal);
	color: var(--color-inverse);
	letter-spacing: 1px;
	line-height: 1.8;
	max-height: 180px;
	overflow: hidden;
}

.link-wrapper{
	margin-bottom: 20px;
}

.link-wrapper p {
	margin: 0;
}

a.link-btn, a.link-btn:hover, a.link-btn:active, a.link-btn:focus{
	color: var(--color-inverse);
	/* font-size: 16px; */
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	text-decoration: none;
	cursor: pointer;
	padding: 6px;
}

a.link-btn i {
	margin-right: 5px;
}

.copyright{
	text-align: center;
	font-size: 15px;
	font-family: 'AritaBuri', serif;
	font-weight: var(--font-weight-normal);
	color:rgba(255, 255, 255, 0.4);
	margin-top: 30px;
}

.copyright a{
	color:rgba(255, 255, 255, 0.4);
	text-decoration: none;
}

#company{
	color: rgba(255, 255, 255, 0.5);
	/* letter-spacing: 1px; */
	text-decoration: none;
	cursor: pointer;
	margin-left: 3px;
	margin-right: 3px;
}

/* Ensure that the parent is positioned relative to position the child absolutely */
.footer-container {
    position: relative;
    height: 100%; /* Or a fixed height, depending on your design */
}

.top-row {
	position: absolute;
	top: 20px;
	left: 0;
	right:0;
}

.bottom-row {
    position: absolute;
    bottom: 30px;
	left: 0;
	right:0;
}

/*===============================================*/
/* PLUGIN CUSTOM					     		 */
/*===============================================*/

/* -------------------------------------------*/
/* MAGNIFIC POPUP 				     		  */
/* -------------------------------------------*/
.mfp-bg{
	z-index:2000;
	-webkit-transform: translateZ(0);
}

.mfp-wrap {
  	z-index: 2001;
}

.mfp-content {
  	z-index: 2003;
}
  
.mfp-preloader {
  	z-index: 2002; 
}

button.mfp-close, button.mfp-arrow {
  	z-index: 2003;
}

/*===============================================*/
/* 99. OPTION SETTING							 */
/*===============================================*/
#options-setting{
	position:fixed; 
	width:300px;  
	padding:25px; 
	background-color:#FFF; 
	top:170px; 
	left:-302px; 
	z-index:2000;
	box-shadow: 2px 2px 5px #888888;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
}

#options-setting.move-right{
	left:0px;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
}

#setting-button-wrapper{
	position:absolute; 
	left:300px; 
	top:-8px
}

.swatches{
	display:inline-block; 
	height:25px; 
	width:25px; 
	margin-right:3px;
}

#grey span{
	background-color:#909090;
}

#pink span{
	background-color:#fb92ae; 
}

#blue span{
	background-color:#87aefe; 
}

#green span{
	background-color:#89c99e; 
}

#purple span{
	background-color:#b889c9; 
}

#reset-color span{
	position:absolute; 
	top:0; 
	right:10px; 
	border:3px solid #CCC; 
	padding:0px 10px;
	font-weight: 400;
}

.navbar-setting-button{
	display:inline-block; 
	border:3px solid #CCC;
	padding:8px 15px;
}

.navbar-setting-button{
	display:inline-block; 
	border:3px solid #CCC;
	padding:8px 15px;
}

.pattern-setting-button{
	display:inline-block; 
	border:3px solid #CCC; 
	padding:8px 16px;
}

.setting-info{
	font-size:12px; 
	line-height:16px; 
	margin-top:10px;
}

.navbar-setting-button.active,
.pattern-setting-button.active,
a:hover .pattern-setting-button,
a:hover .navbar-setting-button,
#reset-color:hover span{
	/*background-color:#f0394d;*/
	/*border-color:#f0394d;*/
	background-color: #ccba98;
	color:#FFF;
	border-color:#ccba98;
}	

/*===============================================*/
/* 16. MEDIA SCREEN		 						 */
/*===============================================*/

/* ----------------------------------------------*/
/* Media Screen Max-width: 1200px	     		 */
/* ----------------------------------------------*/

@media screen and (max-width:1200px){

/* ----------------------------------------------*/
/* Main Slider Slide-Image	    	  		 	 */
/* ----------------------------------------------*/

/* 06.5.2 Main Slider Inner Wrapper */
.slide-title-inner-wrapper{
	width:100%; 
} 

/* 09.1 Image */

.three-col.with-gutter .masonry-col{
	margin-bottom:21px;
}

/* Story Section */
.story-date{
	margin-left: 33px;
}

/*-----------------------------------------------*/
/* CONTACT - Popup Template Small			     */
/*-----------------------------------------------*/

#contact-popup .mfp-close{
	right: 12%;
}

/* ----------------------------------------------*/
/* Gallery Section - BOOTSTRAP     		 		 */
/* ----------------------------------------------*/

#gallery-section .col-sm-6 {
	padding-top: 1px;
}

/* Gallery Youtube Video		                 */
/*-----------------------------------------------*/
iframe{
	width:755px;
	height:425px;
	border:none;
}

/* Gift    Section                      		 */
/* ----------------------------------------------*/

.accountinfo {
	padding: 30px 30px;
	font-family: 'Noto Sans KR', sans-serif;
}

/* Where-When Section                      		 */
/* ----------------------------------------------*/

#where-when .btninner {
	display: inline-block;
	margin: 0px 5px;
}

.nav-button {
	font-size: 16px;
}

.nav-button img{
	width: 20px;
	margin-right: 5px;
}

.map-button {
	width: 135px;
	font-size: 16px;
}

.map-button img{
	width: 20px;
	margin-right: 5px;
}

}

/* ----------------------------------------------*/
/* Media Screen Max-width: 991px	     		 */
/* ----------------------------------------------*/

@media screen and (max-width: 991px) {	

/*===============================================*/
/* 02. NAV BAR 	 							 	 */
/*===============================================*/

#nav-bar{
	height:60px;
}

#nav-bar-sticky-wrapper{
	height:60px !important;
}

#nav-bar.top-bar.stick-it{
	height:60px; 
	/* height: 100px */	
}

#nav-bar.bottom-bar.stick-it{
	height:60px; 
}

#nav-bar.bottom-bar.outside{
	bottom:-60px;
}

#nav-menu{
	font-size: 15px;
}

#nav-menu > li a{
	padding: 20px 17px;
}

#nav-menu.en-version > li a{
	padding: 20px 17px;
}

#nav-menu > li a:hover{
	color: var(--theme-nav-hover);
	background-color: var(--theme-background-primary);
}

/* ----------------------------------------------*/
/* 02.1 Width & Color (Nav Bar)			 		 */
/* ----------------------------------------------*/
/* 02.1.1 Fixed-width */
/* 02.1.2 Fluid-width */
#nav-bar.fluid-width #nav-wrapper,
#nav-bar.fixed-width #nav-wrapper{
	padding:0 20px 0 20px;
}

/* ----------------------------------------------*/
/* 02.2 Logo & Nav Position	 					 */
/* ----------------------------------------------*/
.logo-wrapper, #nav-bar.nav-right .logo-wrapper.en-version{
	margin:0;
	width: 80%;
	height: auto;
}

.css-logo{
	display: none;
}

.mobile-logo{
	display: block;
	text-align: left;
	font-size:18px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 1px;
	padding: 16px 0px;
	color: var(--theme-nav);
}

.mobile-logo .en-version {
	letter-spacing: 0;
}

#nav-menu { display: none }
#nav-menu.sidebar {display:block}	
#nav-menu.open { display: block; }

#nav-menu,
.bottom-bar.transparent #nav-menu{	
	list-style-type:none; 
	margin:0; 
	padding:0 !important; 
	position:absolute;
	left:0;
	top:100%;
	clear:both !important;
	text-align:left !important;
	width:100% !important;
	background-color:#FFF;
	height:auto;
	overflow:auto;
}

.transparent #nav-menu{
	width:100% !important;
	position:absolute; 
	margin:auto; 
	top:80%;
	left:0; 
	right:0;
}

.transparent.stick-it #nav-menu{
	width:100% !important;
}

/* 02.2.1 Nav Center */
/* 02.2.2 Nav Left 	 */
/* 02.2.3 Nav Right  */
#nav-bar.nav-center .logo-wrapper,
#nav-bar.nav-left .logo-wrapper,
#nav-bar.nav-right .logo-wrapper{
	position:relative;
	float:left;	
}

/*===============================================*/
/* 03. NAV MENU	 	 							 */
/*===============================================*/

/* ----------------------------------------------*/
/* 03.1 Parent Menu 						     */
/* ----------------------------------------------*/
#nav-menu, #nav-menu ul{
	-webkit-overflow-scrolling : touch;
}

#nav-menu li{
	position:relative;
}

#nav-menu li a{
	display:block;
	width:100%;
	border-bottom:0.5px solid rgba(var(--theme-nav-border-rgb),0.5);
	position: relative;
	font-size: 15px;
}

#nav-menu .first-child a{ /* Added */
	border-top:0.5px solid rgba(var(--theme-nav-border-rgb),0.5);
	position: relative;
}

/* 03.1.2 Additional Class For Nav Center */
/* ----------------------------------------------*/
.first-child-margin,
.last-child-margin,
.split-margin{
	margin:0
}

/* ----------------------------------------------*/
/* 03.2 Child Menu 								 */
/* ----------------------------------------------*/
#nav-menu ul{
	display:block;
	width:100%;
	position:relative;
	top:0;
	text-align:left;
	border-top:none;
}

#nav-menu li > ul li a:before{ 
	content: '-';
	padding-right:10px;
} 

/* 03.2.2 Child-Parent Arrow */
/* ----------------------------------------------*/
#nav-menu li > ul li a::after { 
	content: '';
} 


/* 03.2.3 More Child */
/* ----------------------------------------------*/
#nav-menu ul ul{
	display:block;
	width:100%;
	position:relative;
	top:0;
	left:0;
	border:none;
}

#nav-menu ul ul li a:before{ 
	content: '- -';
	padding-right:10px;
} 

#nav-menu ul ul ul li a:before{ 
	content: '- - -';
	padding-right:10px;
} 


/* ----------------------------------------------*/
/* 03.3 Mobile Nav								 */
/* ----------------------------------------------*/
#mobile-nav{
	display:block;
	position:relative;
	float:right;
	font-size:22px;
	/* margin-top:18px; */
	margin-top:15px;
	z-index:1000;
}

.transparent #mobile-nav{	
	color:#FFF;
}

.transparent.stick-it #mobile-nav{
	color:#666666;	
}

/* ----------------------------------------------*/
/* 06. Main Slider								 */
/* ----------------------------------------------*/

/* ----------------------------------------------*/
/* Main Slider Slide-Image	    	  		 	 */
/* ----------------------------------------------*/

#main-slider .slide-image {
	background-image:url('../images/main/1.jpeg');
	background-position: 50% 0%;
	height:inherit;
	width:768px;
	margin: auto;
}

#main-slider .slide-image.title-top::before, #main-slider .slide-image.title-bottom::before, #main-slider .slide-image.title-top.bg-black::before, #main-slider .slide-image.title-top.bg-white::before, #main-slider .slide-image.title-bottom.bg-black::before, #main-slider .slide-image.title-bottom.bg-white::before {
	width: 768px;
}

/* 06.2.1 Main Slider Flexslider Control Nav & Paging */
/* ----------------------------------------------*/
#main-slider.flexslider:hover .flex-prev { opacity:0.4;  left: 20px; }
#main-slider.flexslider:hover .flex-next { opacity:0.4; right: 20px; }
#main-slider.flexslider .flex-direction-nav .flex-prev { opacity:0.4; left: 20px; }
#main-slider.flexslider .flex-direction-nav .flex-next { opacity:0.4; right: 20px; }


/* ----------------------------------------------*/
/* 07.1 PAGE LAYOUT						 		 */
/* ----------------------------------------------*/

/* Page Without Slider */
.no-slider-page #content{
	padding:140px 0 80px 0;
}

/* Page With Slider*/
.slider-title-page #content{
	padding:80px 0;
}

/* Page With Banner*/
.slider-banner-page #content{
	padding:60px 0 80px 0;
}

/* Page With Full Gallery*/
.full-gallery-page #content{
	padding:100px 0 80px 0;
}

/* Page With Outside Bottom Bar*/
.outside-bottom-bar-page #content{
	margin-top:60px;
}

/* Image & Video Divider*/
.divider-wrapper{
	padding:70px 0;
}

.image-divider {
	background-attachment: scroll;
}

/*-----------------------------------------------*/
/* 07.2.13 Popup Template						 */
/*-----------------------------------------------*/
#story-popup{
	width:90%;
	height: 550px;
}

/* ==============================================*/
/* 14. Section							         */
/* ==============================================*/

/* ----------------------------------------------*/
/* Calendar Section							     */
/* ----------------------------------------------*/
.calendar-wrapper{
	font-size: 14px;
}

/* ----------------------------------------------*/
/* Couple Section							     */
/* ----------------------------------------------*/

#couple a.de-button{
	font-size: 15px;
}

#groom-button{
	margin-bottom: 50px;
}

#bride-button{
	margin-bottom: 50px;
}

.couple-normal, .couple-short, .parents-normal {
	padding-left: 0;
	padding-right: 0;
}

/* ----------------------------------------------*/
/* Our Story Section						     */
/* ----------------------------------------------*/
.story-row.row {
    display: block;
	padding:20px 0
}

.story-date-wrapper{
	margin-bottom:30px;
}

.story-date{
	margin-left: 22px;
}

.end-of-story{
	margin-top:30px;
}

#our-story .col-sm-push-7 {
    left: 56.33333333%;
}

#our-story .col-sm-pull-7 {
    right: 56.33333333%;
}

/* ----------------------------------------------*/
/* Gallery Section - BOOTSTRAP     		 		 */
/* ----------------------------------------------*/

#gallery-section .col-sm-6 {
	padding-top: 0px;
}

/* Gallery Youtube Video		                 */
/*-----------------------------------------------*/
iframe{
	width:700px;
	height:394px;
	border:none;
}

/* ----------------------------------------------*/
/* More Events Section						     */
/* ----------------------------------------------*/
#events-carousel{
	width: 80%;
	margin: auto;
}

#custom_carousel{
	width: 90%;
	margin: auto;
}

/* ----------------------------------------------*/
/* Guestbook Popup 								 */
/* ----------------------------------------------*/
#message-all-popup{
	width:90%;
	height: 700px;
}

/* ----------------------------------------------*/
/* Gift Section						             */
/* ----------------------------------------------*/
#gift-info{
	width: 80%;
	margin: auto;
}

.gift-display{
	display:block;
}

/* ----------------------------------------------*/
/* Where When Section						     */
/* ----------------------------------------------*/

.border-column{
	border:none;
}

.banner-text.dark{
	border: none;
}

.banner-venue{
	color: var(--theme-secondary);
}

.banner-address i{
	color: rgba(var(--theme-secondary-rgb), 0.5);
	display: inline-block;
	margin-right: 7px;
	/* font-size: 18px; */
}

#where-when .address-info{
	margin: 0px 20px 0px 20px;
}

hr.line-onoff{
	display: block;
	margin: 30px 0;
	border:0.5px solid rgba(var(--theme-line-rgb),0.3);
}

.nav-outer{
	margin: 15px 15px 120px 15px;
	padding-left: 0;
	padding-right: 0;
}

.nav-button {
	font-size: 16px;
}

.nav-button img{
	width: 25px;
	margin-right: 5px;
}

#where-when .btninner {
	display: inline-block;
	margin: 0px 10px;
}

.map-button {
	width: 205px;
	font-size: 18px;
}

.map-button img{
	width: 25px;
	margin-right: 5px;
}

}

@media screen and (max-width: 991px) and (orientation : landscape) {
/* ----------------------------------------------*/
/* 02.2 Logo & Nav Position						 */
/* ----------------------------------------------*/
#nav-menu{	
	height:230px !important;
}

}

/* ----------------------------------------------*/
/* Media Screen Max-width: 767px	     		 */
/* ----------------------------------------------*/

@media screen and (max-width: 767px) and (orientation : landscape) {

}


@media screen and (max-width: 767px) {	
    
/* ----------------------------------------------*/
/* 09.1 Image 									 */
/* ----------------------------------------------*/
.three-col.with-gutter .masonry-col{
	margin-bottom:16px;
}

/* ICON IMAGE */
#flower-icon{
	width: 40px !important; 
	height: auto;
}

/*===============================================*/
/* Text Size									 */
/*===============================================*/

h1, .h1{
	font-size: calc(25px + var(--font-size-var-one));
}

h2, .h2{
	font-size: calc(25px + var(--font-size-var-one));
}

h3, .h3{
	font-size: calc(21px + var(--font-size-var-one));
}

h4, .h4{
	font-size: calc(19px + var(--font-size-var-one));
}

h5, .h5, .wysiwyg-h5, .wysiwyg-h5 p, .wysiwyg-h5 *{
  	font-size: calc(17px + var(--font-size-var-one));
}

h6, .h6{
  	font-size: calc(16px + var(--font-size-var-half));
}

h6.smaller {
	font-size: calc(15px + var(--font-size-var-half));
}

p, .wysiwyg-p, .wysiwyg-p p, .wysiwyg-p * {
	font-size: calc(15px + var(--font-size-var-one));
}

p.lead, .wysiwyg-p.lead, .wysiwyg-p.lead p, .wysiwyg-p.lead *{
	font-size: calc(16px + var(--font-size-var-half));
}

.invited-kr{
	letter-spacing: 1.5px;
}

.description {
	padding: 0 5px;
}
/*===============================================*/
/* Preloader	 							     */
/*===============================================*/
.preloader-line.guest-name {
	margin-bottom: 25px;
}

.preloader-line-content {
	font-size: 20px;
}

.preloader-line-content i {
	font-size: 25px;
}

.preloader-line-content img{
	width: 25px;
	height: auto;
}

.preloader-line-content.en-vibes, .preloader-line-content.en-script {
	font-size: 25px;
}

.preloader-line-content.en-vibes-lg {
	font-size: 35px;
}

/*===============================================*/
/* LAYER POPUP  	 							 */
/*===============================================*/

#layer_popup{
	width:350px;
	height:400px;
	margin-left:-150px;
	margin-top:-150px;
}

#layer_popup .pop-info{
	margin-top: 40px;
	width: 300px;
}

/* ----------------------------------------------*/
/* Image & Space							 */
/* ----------------------------------------------*/	
.section-title img{
	height: 33px;
	width: auto;
}

.section-title{
	margin-bottom: 40px;
}

.title-kr{
	margin-top: 15px;
}

#main-slider .video-audio-control{
	height: 50px;
	right: 10px;
	bottom: 25px;
}

/* Audio Music Icon */
#mute-audio .de-icon{
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size:22px;	
}

/* ----------------------------------------------*/
/* Main Slider Slide-Image	    	  		 	 */
/* ----------------------------------------------*/

#main-slider .slide-image {
	background-image:url('../images/main/1.jpeg');
	background-position: 50% 0%;
	height:inherit;
	width:100%;
	margin: auto;
}

#main-slider .slide-image.title-top::before, #main-slider .slide-image.title-bottom::before, #main-slider .slide-image.title-top.bg-black::before, #main-slider .slide-image.title-top.bg-white::before, #main-slider .slide-image.title-bottom.bg-black::before, #main-slider .slide-image.title-bottom.bg-white::before {
	width: 100%;
}

/* ----------------------------------------------*/
/* Greeting Section			                     */
/* ----------------------------------------------*/						
#greeting{
	padding: 60px 0;
}

#greeting .flower-name, #parents .flower-name{
	width: 18px;
	height: 20px;
	margin-bottom: 3px;
}

#greeting .flower-placeholder {
	width: 18px;
	height: 20px;
}

.greeting-content{
	width: 380px;
	margin-bottom: 40px;
}

.greeting-rank-wrapper{
	width: 95px;
}

.greeting-rank-one-letter{
	margin-left: 22px;
	margin-right: 6px;
}

.call-button a.de-button, .calendar-button a.de-button{
	padding:22px 0px;
	width: 300px;
}

.name-block {
	width: 60px;
}

.name-sub {
	font-size: 14px;
}

/* LONG NAME 		                     */
/* ----------------------------------------------*/	
.name-block.longname {
	width: 170px;
}

.name-block.longname.groom-bride {
	width: 150px;
}

/* ----------------------------------------------*/
/* Calendar Section			                     */
/* ----------------------------------------------*/
#calendar {
	padding: 60px 0px;
}

.calendar-wrapper{
	margin: auto;
	width: 350px;
	margin-bottom: 10px;
	font-size: 14px;
}

/* ----------------------------------------------*/
/* Couple Section			                     */
/* ----------------------------------------------*/
#couple {
	padding: 60px 30px 60px 30px;
}

.interview-btn a.de-button{
	padding:25px 0px;
	width: 350px;
}

.couple-first-part {
	padding-bottom: 40px;
}

.couple-short .couple-left{
	padding-left: 10px;
	padding-right: 5px;
}

.couple-short .couple-right{
	padding-left: 5px;
	padding-right: 10px;
}

/* ----------------------------------------------*/
/* Our Story Section							 */
/* ----------------------------------------------*/	

#our-story{
	padding: 60px 30px;
}

#our-story .title-excerpt h3{
	font-weight: var(--font-weight-bold);
}

.story-row.row{
	padding: 5px 0 20px 0;
}

.story-row.row [class*="col-"] {
    display: block;
	text-align:center;
}

.story-date{
	display: none;
}

.arrow-right {
	display:none;
	float:none;
}

.arrow-left {
	display:none;
	float:none;
}

.vertical-line{
	display:none;
}

#our-story .col-sm-push-7 {
    left: 0%;
}

#our-story .col-sm-pull-7 {
    right: 0%;
}

/* ----------------------------------------------*/
/* Gallery Section - BOOTSTRAP     		 		 */
/* ----------------------------------------------*/
#gallery-section {
	padding: 60px 0px;
}

#gallery-section .col-xs-3 {
	width: 25%;
	margin-bottom: 14px;
	padding-right: 6.5px;
	padding-left: 6.5px;
}

#gallery-section .col-xs-6 {
	width: 50%;
	margin-bottom: 14px;
	padding-right: 6.5px;
	padding-left: 6.5px;
}

#gallery-section .col-xs-4 {
	width: 33%;
	margin-bottom: 14px;
	padding-right: 7px;
	padding-left: 7px;
}

#gallery-section .col-xs-8 {
	width: 66%;
	margin-bottom: 14px;
	padding-right: 7px;
	padding-left: 7px;
}

#gallery-section .wedding-video{
	width: 100%;
	height: auto;
	padding-right: 5px;
	padding-left: 5px;
}

.showButton {
	padding: 20px 60px 0 60px;
}

.showButton img {
	width: 60px;
}

/* Gallery Youtube Video		                 */
/*-----------------------------------------------*/
iframe{
	width:430px;
	height:242px;
}

/* ----------------------------------------------*/
/* POPUP TEMPLATE						 */
/* ----------------------------------------------*/	

#story-popup .story-popup-content{
	padding:40px 30px 60px 30px;
}

#story-popup .story-qna h3{
	font-size: 20px;
}

.story-qna{
	margin: 30px 0px;
}

hr.line-popup{
	margin: 10px 50px
}

/*-----------------------------------------------*/
/* CONTACT - Popup Template Small			     */
/*-----------------------------------------------*/

#contact-popup{
	width: 90%;
}

#contact-popup .the-content{
	/* padding:45px 0px; */
	padding: 20px 0;
}

#contact-popup .mfp-close{
	right: 6%;
}

#contact-popup h4{
	font-size: 19px;
}

#contact-popup h5 {
	font-size: 17px;
}

#contact-popup h6 {
	font-size: 15px;
}

hr.line-popup-groom, hr.line-popup-bride{
	width:350px;
	margin: 10px auto 15px auto;
}

#contact-popup .name-wrapper{
	width: 230px;
}

/* ----------------------------------------------*/
/* Parents Section			                     */
/* ----------------------------------------------*/
#parents {
	padding: 60px 30px;
}

.parents-left {
	padding-left: 10px;
	padding-right: 5px;
}

.parents-right {
	padding-left: 5px;
	padding-right: 10px;
}

.parents-name h5{
	margin-top: 30px;
	margin-bottom: 15px;
}

.parents-name .main-heart{
	font-size: 15px;
	margin-left: 2px;
	margin-right: 2px;
}

/* ----------------------------------------------*/
/* Countdown Section (Don't Miss It)             */
/* ----------------------------------------------*/
h3.dont-miss-it-title{
	margin-bottom: 30px; 
	margin-top: 15px;
}

#dday-countdown{
	font-size: 60px;
	letter-spacing: 0.25em;
}

#date-countdown{
	font-size: 34px;
	letter-spacing: 0.2em;
}

.image-divider.auto-height,
.image-divider.auto-height.user-image{
	height:100%;
	width:100%;
	padding:85px 0;
}

/* ----------------------------------------------*/
/* Photo Divider with Text		                 */
/* ----------------------------------------------*/
#divider-title-line{
	font-size: 65px;
	line-height: 65px;
}

/* ----------------------------------------------*/
/* More Events Section						     */
/* ----------------------------------------------*/
#more-events{
	padding: 60px 20px;
}

#events-carousel{
	width: 90%;
	margin: auto;
}

#custom_carousel{
	width: 90%;
	margin: auto;
}

#custom_carousel .controls li a{
	font-size: 18px;
}

#custom_carousel img{
	margin: 15px auto 0 auto;
}

#more-events .title-excerpt h3{
	margin-bottom: 15px;
}

.event-button a.de-button{
	padding: 8px 30px;
	width: 300px;
	margin-bottom: 15px;
}

/* ----------------------------------------------*/
/* RSVP Section					     	 		 */
/* ----------------------------------------------*/

#rsvp{
	padding: 60px 0;
}

.rsvp-info{
	width: 290px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.rsvp-info .venue span  {
	display: inline-block;
}

.rsvp-button a.de-button, .rsvp-button a.de-button:hover, .rsvp-button a.de-button:active, .rsvp-button a.de-button:focus{
	width: 300px;
	padding: 22px 0px;
}

/*-----------------------------------------------*/
/* RSVP popup		     		     		     */
/*-----------------------------------------------*/
#rsvp-popup{
	width: 90%;
	height: 550px;
}

#rsvp-popup .the-content{
	padding:30px 20px 50px 20px;
	margin: auto;
}

#rsvp-popup .main-title{
	font-size: 20px;
}

#rsvp-popup .large-title{
	font-size: 16px;
}

#rsvp-popup .small-title{
	font-size: 15px;
}

#rsvp-popup .form-control{
	font-size: 15px;
	letter-spacing: -0.3px;
}

#rsvp-popup .rsvp .btn-default{
	font-size: 15px;
	padding: 13px;
}

#rsvp-popup .checkbox-container{
	font-size: 14px;
	padding-left: 30px;
}

#rsvp-popup .checkmark{
	height: 22px;
	width: 22px;
}

#rsvp-popup .radio-container {
	font-size: 14px;
	padding-left: 24px;
}

#rsvp-popup .radiomark{
	height: 18px;
	width: 18px;
}

#rsvp-popup .radio-container .radiomark::after {
	left: 5px;
	top: 2px;
	width: 6px;
	height: 10px;
}

#rsvp-popup .rsvp-consent-outer{
	padding: 20px 20px 10px 20px;
}

#rsvp-popup .rsvp-consent-outer .consent{
	font-size: 13px;
	letter-spacing: -1px;
}

#rsvp-popup .checkbox-container .checkmark::after {
	left: 7px;
	top: 3px;
	width: 7px;
	height: 11px;
}

#rsvp-popup .rsvp-submit-button a.de-button{
	font-size: 16px;
}

/* ----------------------------------------------*/
/* Flower Section						         */
/* ----------------------------------------------*/
#flower-popup .mfp-close{
	top: 25px;
    right: 11px;
	font-size: 21px !important;
}

/* ----------------------------------------------*/
/* Gift Section						             */
/* ----------------------------------------------*/
#gift-section{
	padding: 60px 30px;
}

#gift-info{
	width: 100%;
}

#gift-section .col-md-6{
	padding-right: 7px;
	padding-left: 7px;
}

.accordion1, .accordion-groom{
	font-size: 20px;
	padding: 18px 20px;
}

.accordion1::after, .accordion-groom::after{
	font-size: 21px;
}


.accordion2, .accordion-bride{
	font-size: 20px;
	padding: 18px 20px;
}

.accordion2::after, .accordion-bride::after{
	font-size: 21px;
}


.btninner{
	margin: 0px 5px;
}

.accountinfo{
	padding: 30px 30px;
	font-size: 17px;
}

.accountinfo p.lead{
	font-size: 14px;
}

.accountbtn {
	width: 170px;
	font-size: 14px;
	padding: 14px 0px;
}

.kakaopaybtn {
	width: 170px;
	font-size: 14px;
	padding: 14px 0px;
}

.gift-one-button {
	width: 220px;
}

/* ----------------------------------------------*/
/* Where When Section					     	 */
/* ----------------------------------------------*/
#where-when{
	padding: 60px 30px;
}

.nav-outer{
	margin: 15px 15px 105px 15px;
}

.nav-button{
	font-size: 15px;
	font-weight: 500;
	padding: 13px 0;
}

.nav-button img{
	width: 20px;
	height: auto;
}

#where-when .btninner{
	margin: 0px 5px;
}

.map-button{
	font-size: 15px;
	font-weight: 500;
	width: 130px;
	padding: 13px 0;
	border-radius: 10px;
}

.map-button img{
	width: 20px;
	height: auto;
}

.banner-text {
	margin-top: 0;
	margin-bottom: 10px;
}

/* ----------------------------------------------*/
/* Guestbook Section					     	 */
/* ----------------------------------------------*/
#guestbook{
	padding: 80px 10px;
}

#guestbook-popup {
	width: 90%;
	height: auto;
}

#message-all-popup {
	width: 90%;
	height: 600px;
}

/* message write button 						 */
/* ----------------------------------------------*/
.message-write a.de-button, .message-write a.de-button:hover, .message-write a.de-button:active, .message-write a.de-button:focus{
	width: 300px;
	padding: 22px 10px;
}

/* GUESTBOOK POPUP COMPONENTS   				 */
/* ----------------------------------------------*/
#guestbook-popup .form-control{
	padding: 14px;
	height: 45px;
	font-size: 15px;
	margin-top: 10px;
	border-radius: 10px;
}

#guestbook-popup textarea.form-control {
	height: 90px;
	font-size: 14px;
	padding: 14px;
}

#guestbook-popup .the-content {
	padding: 30px 40px;
	width: 100%;
	margin: auto;
}

#message-all-popup .mfp-close {
	right: 40px;
	top: 10px;
}

.guestbook-exampleComment {
	padding: 40px 30px
}

.guestbook-exampleComment * {
	font-size: 15px;
}

#message-all-popup .the-content{
	padding:30px 20px;
	margin: auto;
}

#guestbook-popup .mfp-close, #message-all-popup .mfp-close{
	right: 30px;
	top: 23px;
}

#guestbook-popup .main-title{
	font-size: 20px;
}

#message-all-popup .main-title{
	font-size: 20px;
	margin-bottom: 30px;
}

#guestbook-popup .sub-title {
	margin-top:15px;
	margin-bottom: 25px;
	font-size: 14px;
}

#guestbook-popup .large-title{
	font-size: 16px;
}

#guestbook-popup .small-title{
	font-size: 15px;
}

#guestbook-popup .form-description{
	font-size: 13px;
}

#guestbook-popup .btn-default{
	font-size: 15px;
}

#guestbook-popup .custom-footer .btn {
	font-size: 16px;
}

/* ----------------------------------------------*/
/* Footer Section		     		 			 */
/* ----------------------------------------------*/
footer .image-divider.fixed-height, 
footer .image-divider.fixed-height.user-image{
	height:100%;
	width:100%;
}

.copyright{
	font-size: 14px;
}

}

/* ----------------------------------------------*/
/* Media Screen Max-width: 480px	     		 */
/* ----------------------------------------------*/

@media screen and (max-width: 480px)  {	
/*===============================================*/
/* 01. GENERAL			 						 */
/*===============================================*/

h1, .h1{
	font-size: calc(20px + var(--font-size-var-two));
}

h2, .h2{
	font-size: calc(20px + var(--font-size-var-two));
}

h3, .h3{
	font-size: calc(18px + var(--font-size-var-one));
}

h3.smaller {
	font-size: calc(16px + var(--font-size-var-one));
}

h4, .h4{
	font-size: calc(16.5px + var(--font-size-var-half));
}

h5, .h5, .wysiwyg-h5, .wysiwyg-h5 p, .wysiwyg-h5 *{
	font-size: calc(15.5px + var(--font-size-var-half));
}

h5.smaller{
	font-size: calc(13px + var(--font-size-var-one));
}

h6, .h6{
  	font-size: calc(14.5px + var(--font-size-var-half));
}

h6.smaller{
	font-size: calc(12px + var(--font-size-var-one));
}

p, .wysiwyg-p, .wysiwyg-p p, .wysiwyg-p *{
	font-size: calc(14.5px + var(--font-size-var-half));
}

p.lead, .wysiwyg-p.lead, .wysiwyg-p.lead p, .wysiwyg-p.lead * {
	font-size: calc(14.5px + var(--font-size-var-half));
}

p.smaller {
	font-size: calc(13.5px + var(--font-size-var-half));
}

/* .slide-title .and-text {
	margin-left: 8px;
	margin-right: 8px;
} */

/* Audio Music Icon very-small-size*/
#main-slider .video-audio-control{
	right: 10px;
	bottom: 20px;
}

#mute-audio .de-icon{ 
	width: 40px;
	height: 40px;
	line-height: 42px;
	font-size:19px;	
}
/*===============================================*/
/* Preloader	 							     */
/*===============================================*/
.preloader-line.guest-name {
	margin-bottom: 15px;
}

.preloader-line-content {
	font-size: 17px;
}

.preloader-line-content .and-kr {
	margin: 0 10px;
}

.preloader-line-content .and-en {
	margin: 0 10px;
}

.preloader-line-content i {
	font-size: 20px;
}

.preloader-line-content img{
	width: 22px;
	height: auto;
}

.preloader-line-content.en-vibes, .preloader-line-content.en-script {
	font-size: 20px;
}

.preloader-line-content.en-vibes-lg {
	font-size: 30px;
}

.preloader-gif img{
	width: 200px;
	height:auto;
}

/* ----------------------------------------------*/
/* Main Slider Slide-Image	    	  		 	 */
/* ----------------------------------------------*/

.slide-overlay{
	background: linear-gradient(to bottom, black, transparent); 
	opacity: 0.5; 
	height: 30%;
}

/* ICON & DIVIDER                                */
/* ----------------------------------------------*/	
.main-heart{
	font-size: 14px;
}

.pink-heart{
	font-size: 14px;
}

.pink-heart-lowsat{
	font-size: 14px;
}

.white-heart{
	font-size: 14px;
}

.grey-heart{
	font-size: 14px;
}

.grey-heart-lowsat{
	font-size: 14px;
}

hr.line-divider{
	margin: 30px 0px;
}

/* 0.6 Main Slider                               */	
/* ----------------------------------------------*/	
.slide-title.align-top{
	vertical-align: top;
	padding-top:10px;
}

.banner-text.withlove{
	margin-top: 20px;
	margin-bottom: 20px;
}

.banner-date{
	/* font-size: 16px; */
	letter-spacing: 0.5px; 
}

/* 07.2.11 Banner Text				 			 */
/* ----------------------------------------------*/
.banner-text.small,
.banner-text.medium,
.banner-text.large{
	padding:0;
}

.mobile-logo{
	display: block;
	font-size: 17px;
	padding: 18px 0px;
}

.mobile-logo .en-version {
	font-size: 15px;
}

#mobile-nav{
	display: block;
	font-size: 20px;
}

#nav-menu li a{
	font-size: 13px;
}

#nav-menu > li a {
	padding: 20px 20px;
}

/*===============================================*/
/* BOTTOM NAV BAR  	 							 */
/*===============================================*/
.bottom-navbar a {
	font-size: 16px;
	padding: 18px 0;
}

.bottom-navbar a i {
	font-size: 18px;
	margin-top: 1px;
}

.bottom-navbar a.icon-kakao img, .bottom-navbar a.icon-location img, .bottom-navbar a.icon-guestbook img, .bottom-navbar a.icon-download img, .bottom-navbar a.icon-audio img, .bottom-navbar a.icon-mute img {
	height: 20px;
	width: auto;
}

.bottom-navbar-footer-padding {
	height: 56px;
}

/*-----------------------------------------------*/
/* 07.2.13 Popup Template						 */
/*-----------------------------------------------*/

#story-popup {
	width: 95%;
}

#story-popup .mfp-close{
	right: 4%;
}

#story-popup .story-popup-content{
	padding-right:20px;
	padding-left:20px;
}

#story-popup h2.title-kr{
	font-size: 21px;
}

#story-popup .qna-title{
	/* font-size: 18px; */
	margin-bottom: 15px;
}

#story-popup .story-qna h3{
	font-size: 16px;
}

#story-popup #main-image{
	height: 300px;
	background-position: 50% 90%;
	
}

hr.line-popup{
	margin: 10px 20px
}

/*-----------------------------------------------*/
/* CONTACT - Popup Template Small			     */
/*-----------------------------------------------*/

#contact-popup{
	width: 95%;
	padding: 10px
}

#contact-popup .the-content{
	padding: 30px 0;
}

#contact-popup p{
	margin-bottom: 7px;
	margin-top: 7px;
}

#contact-popup i{
	margin: 8px 3px;
}

#contact-popup h4{
	font-size: 16px;
}

#contact-popup h5 {
	font-size: 14px;
	margin-top: 7px;
	margin-bottom: 7px;
}

#contact-popup h6 {
	font-size: 12px;
	margin-top: 7px;
	margin-bottom: 7px;
}

#contact-popup .mfp-close{
	right: 4%;
}

hr.line-popup-groom, hr.line-popup-bride{
	width:270px
}

#contact-popup .groom-parents, #contact-popup .bride-parents{
	padding-top: 10px;
	padding-bottom: 10px;
}

#contact-popup .icon-wrapper{
	padding-right: 15px;
	padding-left: 15px;
}

#contact-popup .name-wrapper{
	width: 180px;
}

/* ----------------------------------------------*/
/* 09.1 Image & Space								 */
/* ----------------------------------------------*/
.three-col.with-gutter .masonry-col{
	margin-bottom:10px;
}

.section-title img{
	height: 30px;
	width: auto;
}

#parents .section-title .title-content, #rsvp .section-title .title-content, #gift-section .section-title .title-content {
	margin-top: 30px;
}

/*===============================================*/
/* LAYER POPUP  	 							 */
/*===============================================*/
.layerPopup .layerBox{
	padding: 30px 20px 5px 20px;
}

#layer_popup{
	width:350px;
	height:350px;
	margin-left:-150px;
	margin-top:-150px;
}

#layer_popup .pop-info{
	margin-top: 30px;
	width: 250px;
}

#layer_popup .pop-info h3{
	font-size: 13px;
}

.layerContent{
	text-align: center;
	padding: 10px 10px 30px 10px;
	background-color:#f6f1eb;
}

.layerContent #title{
	margin-bottom: 30px;
	font-weight: 700;
	font-size: 18px;
}

.layerContent p{
	font-weight: 400;
	font-size: 13px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#popup-button a.de-button{
	margin-top: 30px;
	padding:13px 40px; 
	font-size:14px; 
}

.popup-close a{
	font-size: 14px;
	margin-top: 100px;
}

/* ----------------------------------------------*/
/* Greeting Section			      				 */
/* ----------------------------------------------*/	
#greeting{
	padding:50px 0;
}

#greeting .flower-name, #parents .flower-name{
	width: 14px;
	height: 16px;
}

#greeting .flower-placeholder {
	width: 14px;
	height: 16px;
}

.greeting-content{
	width: 320px;
}

.greeting-name {
	margin-bottom: 15px;
}

.greeting-rank-wrapper{
	width: 80px;
}

.greeting-name .greeting-rank-wrapper{
	margin-left: 5px;
}

.greeting-rank-two-letter{
	margin-left: 8px;
}

.greeting-rank-one-letter{
	margin-left: 18px;
	margin-right: 6px;
}

.name-block {
	width: 55px;
	margin: 0px;
}

.name-block.groom-bride {
	width: 65px;
}

.name-sub {
	font-size: 12px;
}

.name-block-couple {
	margin-left:7px;
}

.greeting-name-couple .and-text {
	margin-left: 10px;
	margin-right: 10px;
}

.call-button a.de-button, .calendar-button a.de-button{
	padding:18px 0px;
	width: 270px;
	margin-top: 20px;
}

/* LONG NAME		      				 */
/* ----------------------------------------------*/	
.name-block.longname {
	width: 130px;
}

.name-block.longname.groom-bride {
	width: 110px;
	margin-left: 5px;
}

.name-block.longname.groom-bride .name-main {
	font-size: 110%;
}

/* ----------------------------------------------*/
/* Calendar Section			      				 */
/* ----------------------------------------------*/	
#calendar{
	padding: 50px 0;
}

.calendar-wrapper{
	margin: auto;
	width: 270px;
	margin-bottom: 10px;
}

.calendar-title.date{
	letter-spacing: 0.5px;
	margin-top: 15px;
}

.calendar-title.venue{
	padding: 0 20px;
}

.calendar-title.venue span{
	display: inline-block;
}

/* ----------------------------------------------*/
/* Couple Section			      				 */
/* ----------------------------------------------*/	

#couple{
	padding:50px 0;
}

.couple-name{
	font-size:36px; 
	padding-top:80px !important;
	line-height:38px; 
}

.couple-excerpt{
	margin-top:20px;
}

.his-her-name{
	margin-top: 25px;
	margin-bottom: 15px;
}

.his-her-name small{
	margin-right: 5px;
}

.interview-btn a.de-button{
	width: 300px;
	padding:22px 0px;
}

.couple-short .couple-left{
	padding-left: 10px;
	padding-right: 3px;
}

.couple-short .couple-right{
	padding-left: 3px;
	padding-right: 10px;
}

.couple-first-part {
	padding-top: 5px;
	padding-bottom: 25px;
}

/* ----------------------------------------------*/
/* Parents Section			      				 */
/* ----------------------------------------------*/	
#parents{
	padding:50px 0;
}

.parents-name h5{
	margin-top: 20px;
	margin-bottom: 15px;
}

.parents-name h3{
	letter-spacing: -0.5px;
} 

.parents-name .main-heart{
	font-size: 12px;
}

.parents-left {
	padding-left: 10px;
	padding-right: 3px;
}

.parents-right {
	padding-left: 3px;
	padding-right: 10px;
}

/* ----------------------------------------------*/
/* Countdown Section		                 	 */
/* ----------------------------------------------*/	
#location-countdown .image-divider.auto-height {
	padding:60px 0;
}	

#counting{
	font-size:55px; 
	line-height:45px;
}

#down{
	font-size:50px; 
	line-height:50px;
}

.simple-countdown .countdown-amount {
	font-size:16px;
}
.simple-countdown .countdown-period {
	font-size:16px;
}


.circle-countdown .countdown-amount {
	width:45px;
	height:45px;
	padding-top:9px;
	font-size:20px;
}

.circle-countdown .countdown-period {
	padding:10px;
	display:block;
	text-align:center;
	font-size:12px;
	text-transform:uppercase;    
}

#dont-miss-it {
	height:350px;
}

#dday-countdown{
	font-size: 45px;
}

#date-countdown{
	font-size: 28px;
}

.image-divider.auto-height,
.image-divider.auto-height.user-image{
	height:350px;
	width:100%;
	padding:70px 0;
}

/* ----------------------------------------------*/
/* Our Story Section				     		 */
/* ----------------------------------------------*/
#our-story{
	padding: 50px 0;
}

.qna-title{
	/* font-size: 19px; */
	margin-bottom: 15px;
	/* word-break: keep-all; */
}

.story-date-wrapper{
	/* margin-bottom: 20px; */
	margin-bottom: 25px;
}

.end-of-story{
	margin-top:20px;
}

/* ----------------------------------------------*/
/* Gallery Section - BOOTSTRAP     		 		 */
/* ----------------------------------------------*/
#gallery-section{
	padding: 50px 0;
}

#gallery-section .photo-item img {
    aspect-ratio: 1;
	width: 100%;
	border-radius: 5px;
}

#gallery-section .col-xs-3 {
	width: 25%;
	margin-bottom: 8px;
	padding-right: 4px;
	padding-left: 4px;
}

#gallery-section .col-xs-6 {
	width: 50%;
	margin-bottom: 8px;
	padding-right: 4.5px;
	padding-left: 4.5px;
	padding-top: 1px;
}

#gallery-section .col-xs-4 {
	width: 33%;
	margin-bottom: 8px;
	padding-right: 4px;
	padding-left: 4px;
}

.de-icon.medium-size{
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size:25px;	
}

.showButton img {
	width: 45px;
}

#gallery-section .col-sm-12 {
	padding-right: 10px;
	padding-left: 10px;
}

/* Gallery Youtube Video				         */
/* ----------------------------------------------*/
iframe{
	width:320px;
	height:180px;
}

/* ----------------------------------------------*/
/* More Events Section				     		 */
/* ----------------------------------------------*/
#more-events{
	padding: 50px 0;
}

#events-carousel{
	width: 100%;
	margin: auto;
}

#custom_carousel .controls li a{
	font-size: 15px;
}

#custom_carousel{
	width: 100%;
	margin: auto;
}

.title-excerpt{
	padding: 20px 10px 0px 10px;
}

.event-button a.de-button{
	padding: 6px 25px;
	width: 270px;
}

/* ----------------------------------------------*/
/* Divider 		                                 */
/* ----------------------------------------------*/

#divider-title-line{
	font-size: 50px;
	line-height: 50px;
}

/* ----------------------------------------------*/
/* RSVP Section					     	 */
/* ----------------------------------------------*/

#rsvp{
	padding: 50px 0;
}

.rsvp-info{
	width: 260px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#rsvp .section-title .rsvp-info h5 {
	line-height: 1.5;
}

.rsvp-button a.de-button, .rsvp-button a.de-button:hover, .rsvp-button a.de-button:active, .rsvp-button a.de-button:focus{
	width: 270px;
	padding: 18px 0px;
}

/* ----------------------------------------------*/
/* Flower Section					     	 */
/* ----------------------------------------------*/
#flower-popup .mfp-close{
	top: 30px;
    right: 11px;
	font-size: 21px !important;
}

/*-----------------------------------------------*/
/* RSVP popup		     		     		     */
/*-----------------------------------------------*/
#rsvp-popup{
	width: 95%;
}

#rsvp-popup .mfp-close{
	top: 25px;
    right: 11px;
	font-size: 21px !important;
}

#rsvp-popup hr.line-title{
	margin: 25px 0;
}

#rsvp-popup .the-content{
	padding:15px 0px 30px 0px;
}

#rsvp-popup .main-title{
	font-size: 17px;
}

#rsvp-popup .large-title{
	font-size: 15px;
}

#rsvp-popup .small-title{
	font-size: 14px;
}

#rsvp-popup hr.line-item{
	width:93%;
}

#rsvp-popup .col-xs-3{
	padding-right:0;
}

#rsvp-popup .form-control{
	font-size: 14px;
	letter-spacing: -1px;
	height:35px;
}

#rsvp-popup .rsvp .btn-default{
	font-size: 14px;
	padding: 12px;
}

#rsvp-popup .checkbox-container{
	font-size: 14px;
	padding-left: 25px;
}

#rsvp-popup .checkmark{
	height: 19px;
	width: 19px;
}

#rsvp-popup .radio-container {
	font-size: 13px;
	padding-left: 22px;
}

#rsvp-popup .radiomark{
	height: 16px;
	width: 16px;
}

#rsvp-popup .radio-container .radiomark::after {
	left: 4px;
	top: 1px;
	width: 6px;
	height: 9px;
}

#rsvp-popup .rsvp-consent-outer{
	padding: 20px 15px 10px 15px;
	width:91%;
}

#rsvp-popup .rsvp-consent-outer .consent{
	font-size: 11px;
}

#rsvp-popup .checkbox-container .checkmark::after {
	left: 6px;
	top: 2px;
	width: 7px;
	height: 11px;
}

#rsvp-popup .rsvp-submit-button a.de-button{
	font-size: 15px;
}

/* ----------------------------------------------*/
/* Gift Section	        						 */
/* ----------------------------------------------*/
#gift-section{
	padding: 50px 0;
}

.accordion1, .accordion-groom{
	font-size: 18px;
	padding: 16px 15px 15px 12px;
}

.accordion1::after, .accordion-groom::after{
	font-size: 21px;
}


.accordion2, .accordion-bride{
	font-size: 18px;
	padding: 16px 15px 15px 12px;	
}

.accordion2::after, .accordion-bride::after{
	font-size: 21px;
}


.accountinfo{
	padding: 20px 15px;
	font-size: 15px;
	letter-spacing: -0.1px;
}

.kakaopaybtn{
	font-size: 13px;
	width: 140px;
	padding: 12px 0px 13px 0px;
}

.kakaopaybtn a i.de-icon-comment{
	margin-right: 1px;
	font-size: 13px;
}

.accountbtn{
	font-size: 13px;
	width: 140px;
	padding: 11px 0px 12px 0px;
}

.accountinfo p.lead{
	font-size: 13px;
}

.gift-one-button {
	width: 200px;
}

.btnouter {
	margin-bottom: 20px;	
}

.btninner{
	margin: 0px 5px;
}

/* ----------------------------------------------*/
/* Where When Section		     				 */
/* ----------------------------------------------*/
#where-when{
	padding: 50px 0;
}

.banner-address i{
	margin-right: 5px;
}

#where-when .kakao-map{
	margin-top: 10px;
	margin-bottom: 30px;
	margin-left: -20px;
	margin-right: -20px;
}

.map-zoom{
	width: 100%;
}

.map-zoom button{
	width: 100%;
	padding: 14px 20px;
	font-size: 16px;
}

#where-when .location-info{
	margin: 0px 3px;
}

#where-when .location-info p{
	margin-left: 0px;
	line-height: 1.6;
}

#where-when .location-info p.indent{
	margin-left: 20px;
}

/* address info icon */
#where-when .de-icon{ 
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size:11px;	
}

.nav-outer{
	margin: 5px 0px 90px 0px;
}

#where-when .nav-outer .col-xs-4{
	padding-right: 3px;
	padding-left: 3px;
}

.nav-button{
	font-size: 13px;
	padding: 11px 5px;
}

.nav-button img{
	width: 17px;
	height: auto;
	margin-right: 5px;
}

.map-button{
	font-size: 14px;
	width: 135px;
	padding: 12px 0;
}

.map-button img{
	width: 20px;
	height: auto;
	margin-right: 8px;
}

/* ----------------------------------------------*/
/* Guestbook Section					     	 */
/* ----------------------------------------------*/
#guestbook{
	padding: 70px 0px;
}

#guestbook .section-title {
	margin-bottom: 35px;
}

#guestbook .section-title h1{
	margin-bottom: 35px;
}

#guestbook .section-title .title-content{
	margin-top: 30px;
}

#guestbook-popup{
	width:95%;
}

#message-all-popup{
	width:95%;
	height: 550px;
}

#guestbook .col-xs-12, #message-all-popup .col-xs-12 {
	padding-right: 5px;
	padding-left: 5px;
}

/* message write button 						 */
/* ----------------------------------------------*/
.message-write a.de-button, .message-write a.de-button:hover, .message-write a.de-button:active, .message-write a.de-button:focus{
	width: 270px;
	padding: 18px 10px;
}

/* message Box - Overall						 */
/* ----------------------------------------------*/
.message-box-wrapper {
	margin-bottom: 10px;
}

.message-box{
	padding: 20px;
	border-radius: 15px;
}

.guestbook-exampleComment * {
	font-size: 13px;
}

#message-all-popup .message-box, .guestbook-exampleComment .message-box {
	padding: 20px;
	margin-bottom: 10px;
	border-radius: 15px;
}

.message-header p, .guestbook-exampleComment .message-header p {
	line-height: 1.4;
}

.message-remove svg {
	width: 14px;
	height: 14px;
}

img.message-line-groom, img.message-line-bride {
	width:150px; 
	height:auto; 
}

/* message Show All Button   					 */
/* ----------------------------------------------*/
.show-message {
	padding: 10px 50px 10px 70px;
}

/* ----------------------------------------------*/
/* Guestbook Popup Components					 */
/* ----------------------------------------------*/
#guestbook-popup .mfp-close, #message-all-popup .mfp-close {
	top: 15px;
    right: 10px;
	font-size: 21px !important;
}

#guestbook-popup .the-content{
	padding: 25px 20px;
}

#message-all-popup .the-content{
	padding: 25px 20px;
}

#guestbook-popup .main-title, #message-all-popup .main-title{
	font-size: 17px;
	margin-bottom: 20px;
}

#guestbook-popup .sub-title {
	margin-top:15px;
	margin-bottom: 25px;
	font-size: 13px;
}

#guestbook-popup .btn-default{
	font-size: 13px;
	padding: 8px 0;
}

#guestbook-popup .form-group {
	margin-bottom:5px;
}

#guestbook-popup .form-control{
	height:35px;
	font-size: 13px;
	padding: 0 10px;
	margin-top: 5px;
}

#guestbook-popup textarea.form-control {
	height: 80px;
	font-size: 13px;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

#guestbook-popup .large-title{
	font-size: 15px;
}

#guestbook-popup .small-title{
	font-size: 14px;
}

#guestbook-popup .form-description{
	font-size: 11px;
	letter-spacing: -0.5px;
}

#guestbook-popup hr.line-item{
	margin-bottom: 15px;
	width:87%;
}

#guestbook-popup .col-xs-3{
	padding-right:0;
}

#guestbook-popup .message-item-outer label{
	margin-bottom: 0;
	margin-top: 8px;
}

#guestbook-popup .custom-footer .btn {
	font-size: 14px;
}

#guestbook-popup .guestbook-exampleButton{
	/* letter-spacing: -1px; */
	padding-left: 0;
	width: 38%;
	font-size: 13px !important;
}

#guestbook-popup .guestbook-submitButton{
	padding: 11px 0;
	letter-spacing: 0;
	width: 45%;
}

.guestbook-exampleComment {
	padding: 30px 15px; 
}

.guestbook-exampleComment .message-box .message-content {
	line-height: 1.5;
}

/* ----------------------------------------------*/
/* Footer Section		     		 			 */
/* ----------------------------------------------*/

footer {
	height:480px;
}

.thank-wrapper{
	padding-top: 20px;
}

.link-outer{
	text-align: center;
	padding-top: 120px;	
}

.thank-you-kr{
	letter-spacing: 0;
	max-height: 160px;
}

.heart-divider {
	margin-top: 10px;
	margin-bottom: 5px;
}

a.link-btn, a.link-btn:hover, a.link-btn:active, a.link-btn:focus {
	padding: 10px;
}

.copyright{
	font-size: 12px;
}

}

/* ----------------------------------------------*/
/* Media Screen Max-width: 359px	     		 */
/* ----------------------------------------------*/

@media screen and (max-width: 359px) {
/*===============================================*/
/* 01. GENERAL			 						 */
/*===============================================*/

h1, .h1{
	font-size: calc(18px + var(--font-size-var-one));
}

h2, .h2{
	font-size: calc(18px + var(--font-size-var-one));
}

h3, .h3{
	font-size: calc(16px + var(--font-size-var-one));
}

h3.smaller {
	font-size: calc(14px + var(--font-size-var-one));
}

h4, .h4{
	font-size: calc(15px + var(--font-size-var-half));
}

h5, .h5, .wysiwyg-h5, .wysiwyg-h5 p, .wysiwyg-h5 *{
	font-size: calc(14px + var(--font-size-var-half));
}

h5.smaller{
	font-size: calc(11px + var(--font-size-var-half));
}

h6, .h6{
	font-size: calc(12px + var(--font-size-var-half));
}

h6.smaller{
	font-size: calc(11px + var(--font-size-var-half));
}

p, .wysiwyg-p, .wysiwyg-p p, .wysiwyg-p * {
	font-size: calc(13.5px + var(--font-size-var-half));
}

p.lead, .wysiwyg-p.lead, .wysiwyg-p.lead p, .wysiwyg-p.lead * {
	font-size: calc(13.5px + var(--font-size-var-half));
}

p.smaller {
	font-size: calc(12.5px + var(--font-size-var-half));
}

.section-title{
	margin-bottom: 30px;
}

#rsvp .section-title h1, #gift-section .section-title h1{
	margin-bottom: 30px;
}

#parents .section-title .title-content, #rsvp .section-title .title-content, #gift-section .section-title .title-content {
	margin-top: 25px;
}

/*===============================================*/
/* Preloader	 							     */
/*===============================================*/
.preloader-line-content {
	font-size: 15px;
}

.preloader-line-content i {
	font-size: 18px;
}

.preloader-line-content img{
	width: 20px;
	height: auto;
}

.preloader-line-content.en-vibes, .preloader-line-content.en-script {
	font-size: 18px;
}

.preloader-line-content.en-vibes-lg {
	font-size: 25px;
}

/*===============================================*/
/* LAYER POPUP  	 							 */
/*===============================================*/
.layerPopup .layerBox{
	padding: 30px 10px 5px 10px;
}

#layer_popup{
	width:250px;
	height:250px;
	margin-left:-100px;
	margin-top:-100px;
}

#layer_popup .pop-info{
	margin-top: 20px;
	width: 220px;
}

#layer_popup .pop-info h3{
	font-size: 11px;
}

.layerContent{
	text-align: center;
	padding: 10px 5px 30px 5px;
	background-color:#f6f1eb;
}

.layerContent #title{
	margin-bottom: 25px;
	font-weight: 700;
	font-size: 16px;
}

.layerContent p{
	font-weight: 400;
	font-size: 11px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#popup-button a.de-button{
	margin-top: 25px;
	padding:11px 35px; 
	font-size:12px; 
}

.popup-close a{
	font-size: 13px;
	margin-top: 50px;
	padding-right: 100px;
}

.popup-close i{
	vertical-align: middle;
	margin-left: 5px;
	font-size: 1.4em;
}

/* ----------------------------------------------*/
/* MAIN SLIDE / NAV BAR & LOGO		     		 */
/* ----------------------------------------------*/

.banner-date {
	letter-spacing: 0.5px; 
}

.banner-date-kr{
	letter-spacing: 0px; 
}

.mobile-logo{
	padding: 18px 0px;
}

/* ----------------------------------------------*/
/*  GREETING	     	                   		 */
/* ----------------------------------------------*/
.greeting-content{
	width: 95%;
	margin-bottom: 30px;
}

.name-block {
	width: 45px;
}

.name-block.groom-bride {
	width: 60px;
}

.greeting-rank-wrapper{
	width: 65px;
}

.call-button a.de-button, .calendar-button a.de-button{
	padding:17px 0px;
	width: 240px; 
}

#greeting .flower-name, #parents .flower-name{
	width: 12px;
	height: 14px;
}

#greeting .flower-placeholder {
	width: 12px;
	height: 14px;
}

.name-sub {
	font-size: 11px;
}

/* LONG NAME		      				 */
/* ----------------------------------------------*/	
.name-block.longname {
	width: 130px;
}

.name-block.longname.groom-bride {
	width: 100px;
}

/* ----------------------------------------------*/
/* Calendar & DDAY Section		     			 */
/* ----------------------------------------------*/

.calendar-title.venue {
	line-height: 1.5;
	margin-top: 13px;
}

.calendar-wrapper{
	margin: auto;
	width: 240px;
	margin-bottom: 10px;
}

#dont-miss-it {
	height:300px;
}

h3.dont-miss-it-title{
	letter-spacing: 0.2em;
}

#dday-countdown{
	font-size: 40px;
}

#date-countdown{
	font-size: 23px;
}

#divider-title-line{
	font-size: 40px;
	line-height: 40px;
}

.image-divider.auto-height,
.image-divider.auto-height.user-image{
	height:100%;
	width:100%;
	padding:60px 0;
}

/* ----------------------------------------------*/
/* Couple Section		     					 */
/* ----------------------------------------------*/

.interview-btn a.de-button{
	padding:19px 0px;
	width: 260px;
}

.his-her-name{
	margin-top: 25px;
	margin-bottom: 15px;
}
 
/* ----------------------------------------------*/
/* Parents Section		     					 */
/* ----------------------------------------------*/
.parents-name h5{
	margin-top: 22px;
	margin-bottom: 13px;
}

#story-popup .story-popup-content{
	padding: 25px 20px 40px 20px;
}

hr.line-popup{
	margin: 10px 20px
}

/*-----------------------------------------------*/
/* CONTACT - Popup Template Small			     */
/*-----------------------------------------------*/

#contact-popup h4{
	font-size: 16px;
}

#contact-popup h5 {
	font-size: 14px;
}

#contact-popup h6 {
	font-size: 12px;
}

hr.line-popup-groom, hr.line-popup-bride {
	width: 230px;
}

#contact-popup .icon-wrapper{
	padding-right: 10px;
	padding-left: 10px;
}

/* ----------------------------------------------*/
/* GALLERY Section		     			     */
/* ----------------------------------------------*/
#gallery-section .col-sm-12{
	padding-right: 7px;
	padding-left: 7px;
}

.three-col.with-gutter .masonry-col{
	margin-bottom:10px;
}
.three-col.with-gutter .masonry-col.w33{
	width:31%;
}

.three-col.with-gutter .masonry-col.w66{
	width:64.5%;
}

#gallery-section .wedding-video{
	width: 100%;
	height: auto;
}

/* Gallery Section - BOOTSTRAP     		 		 */
/* ----------------------------------------------*/

#gallery-section .col-xs-3 {
	width: 25%;
	margin-bottom: 7px;
	padding-right: 3.5px;
	padding-left: 3.5px;
}

#gallery-section .col-xs-6 {
	width: 50%;
	margin-bottom: 7px;
	padding-right: 4px;
	padding-left: 4px;
}

#gallery-section .col-xs-4 {
	width: 33%;
	margin-bottom: 7px;
	padding-right: 3.5px;
	padding-left: 3.5px;
}

.showButton img {
	width: 40px;
}

/* Gallery Youtube Video				         */
/* ----------------------------------------------*/
iframe{
	width:295px;
	height:166px;
	margin-left:-4px
}

/* ----------------------------------------------*/
/* More Events Section		     			     */
/* ----------------------------------------------*/

#custom_carousel .controls li a{
	font-size: 13px;
}

#custom_carousel{
	width: 100%;
	margin: auto;
}

.event-button a.de-button{
	padding: 5px 20px;
	width: 240px; 
}

/* ----------------------------------------------*/
/* RSVP Section		     			             */
/* ----------------------------------------------*/

.rsvp-info{
	width: 240px;
	margin-top: 25px;
}

.rsvp-button a.de-button, .rsvp-button a.de-button:hover, .rsvp-button a.de-button:active, .rsvp-button a.de-button:focus{
	padding:17px 0px;
	width: 240px; 
}

/*-----------------------------------------------*/
/* RSVP popup		     		     		     */
/*-----------------------------------------------*/
#rsvp-popup .main-title{
	font-size: 16px;
}

#rsvp-popup .large-title{
	font-size: 14px;
}

#rsvp-popup .small-title{
	font-size: 13px;
	letter-spacing: -1px;
}

#rsvp-popup .form-control{
	font-size: 13px;
	letter-spacing: -1px;
	height:35px;
}

#rsvp-popup .rsvp .btn-default{
	font-size: 12px;
	padding: 11px;
}

#rsvp-popup .checkbox-container{
	font-size: 13px;
	padding-left: 25px;
}

#rsvp-popup .checkmark{
	height: 18px;
	width: 18px;
}

#rsvp-popup .rsvp-consent-outer{
	padding: 15px 15px 5px 15px;
	width:91%;
}

#rsvp-popup .rsvp-consent-outer .consent{
	font-size: 10px;
}

#rsvp-popup .checkbox-container .checkmark::after {
	left: 5px;
	top: 1px;
	width: 7px;
	height: 11px;
}

#rsvp-popup .rsvp-submit-button a.de-button{
	font-size: 14px;
}

/* ----------------------------------------------*/
/* Gift Section						        	 */
/* ----------------------------------------------*/
#gift-section .col-md-6 {
	padding-left: 0;
	padding-right: 0;
}

.accordion1, .accordion-groom{
	font-size: 16px;
	padding: 16px 15px 15px 10px;
}

.accordion1::after, .accordion-groom::after{
	font-size: 17px;
}

.accordion2, .accordion-bride{
	font-size: 16px;
	padding: 16px 15px 15px 10px;
}

.accordion2::after, .accordion-bride::after{
	font-size: 17px;
}

.accountinfo{
	padding: 20px 15px;
	font-size: 14px;
}

.kakaopaybtn{
	font-size: 12px;
	padding: 10px 0px 11px 0px;
	width: 130px;
}

.kakaopaybtn a i.de-icon-comment{
	margin-right: 1px;
	font-size: 11px;
}

.accountbtn{
	font-size: 12px;
	width: 130px;
	padding: 10px 0px 11px 0px;
}

.gift-one-button {
	width: 200px;
}

.btnouter{
	margin-bottom: 15px;
}

.btninner{
	margin: 0px 3px;
}

/* ----------------------------------------------*/
/* Where When Section		     			     */
/* ----------------------------------------------*/
.map-zoom button {
	font-size: 14px;
}

.nav-outer{
	margin: 0px 0px 80px 0px;
}

#where-when .nav-outer .col-xs-4{
	padding-right: 2px;
	padding-left: 2px;
}

.nav-button{
	font-size: 11px;
	padding: 11px 0px;
	border-radius: 8px;
}

.nav-button img{
	width: 14px;
	height: auto;
	margin-right: 3px;
}

.map-button{
	font-size: 12px;
	width: 110px;
	padding: 10px 0;
}

.map-button img{
	width: 15px;
	height: auto;
	margin-right: 3px;
}
/* ----------------------------------------------*/
/* Guestbook Section					     	 */
/* ----------------------------------------------*/
#guestbook .section-title .title-content{
	margin-top: 25px;
}

/* message write button 						 */
/* ----------------------------------------------*/
.message-write a.de-button, .message-write a.de-button:hover, .message-write a.de-button:active, .message-write a.de-button:focus{
	width: 240px;
	padding: 17px 10px;
	margin-bottom: 45px;
}

/* message Box - Overall						 */
/* ----------------------------------------------*/
.message-box{
	padding: 15px;
	border-radius: 10px;
}

#message-all-popup .message-box, .guestbook-exampleComment .message-box {
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 10px;
}

/* message Show All Button   					 */
/* ----------------------------------------------*/
.guestbook-exampleComment * {
	font-size: 12px;
}

/* ----------------------------------------------*/
/* Guestbook Popup      				     	 */
/* ----------------------------------------------*/
#guestbook-popup .mfp-close{
	top: 15px;
    right: 5px;
	font-size: 21px !important;
}

#guestbook-popup .main-title, #message-all-popup .main-title{
	font-size: 16px;
}

#guestbook-popup .small-title{
	font-size: 13px;
}

#guestbook-popup .form-control{
	font-size: 12px;
}

#guestbook-popup textarea.form-control {
	font-size: 12px;
}

/* ----------------------------------------------*/
/* Footer Section	     			 			 */
/* ----------------------------------------------*/
footer {
	height:400px;
}

.thank-wrapper{
	padding-top: 20px;
}

.thank-you-kr{
	letter-spacing: 0;
	max-height: 130px;
}

.heart-divider {
	margin-top: 10px;
	margin-bottom: 5px;
}

.link-outer{
	padding-top: 90px;
}

.link-wrapper{
	margin-bottom: 15px;
}

.copyright{
	font-size: 11px;
}

}

/* ----------------------------------------------*/
/* Media Screen Max-width: 319px	     		 */
/* ----------------------------------------------*/

@media screen and (max-width: 319px) {

h1, .h1{
	font-size: calc(16px + var(--font-size-var-half));
}

h2, .h2{
	font-size: calc(16px + var(--font-size-var-half));
}

h3, .h3{
	font-size: calc(14px + var(--font-size-var-half));
}

h3.smaller {
	font-size: calc(13px + var(--font-size-var-half));
}

h4, .h4{
	font-size: calc(13px + var(--font-size-var-half));
}

h5, .h5, .wysiwyg-h5, .wysiwyg-h5 p, .wysiwyg-h5 *{
	font-size: calc(12.5px + var(--font-size-var-half));
}

h5.smaller{
	font-size: calc(10.5px + var(--font-size-var-half));
}

h6, .h6{
	font-size: calc(12px + var(--font-size-var-half));
}

h6.smaller{
	font-size: calc(10px + var(--font-size-var-half));
}

p, .wysiwyg-p, .wysiwyg-p p, .wysiwyg-p * {
	font-size: calc(12.5px + var(--font-size-var-half));
}

p.lead, .wysiwyg-p.lead, .wysiwyg-p.lead p, .wysiwyg-p.lead * {
	font-size: calc(12.5px + var(--font-size-var-half));
}

p.smaller {
	font-size: calc(12px + var(--font-size-var-half));
}

/*===============================================*/
/* BOTTOM NAV BAR  	 							 */
/*===============================================*/
.bottom-navbar a {
	font-size: 14px;
	padding: 16px 0;
}

.bottom-navbar-footer-padding {
	height: 52px;
}

.mobile-logo .en-version {
	font-size: 12px;
	padding: 20px 0px;
}

/* ----------------------------------------------*/
/* Calendar & Couple Section		     		 */
/* ----------------------------------------------*/
.banner-date {
	letter-spacing: 0;
}

.greeting-content {
	width: 100%;
}

.name-block {
	width: 40px;
}

.name-block.groom-bride {
	width: 55px;
}

.greeting-rank-wrapper {
	width: 60px;
}

.calendar-wrapper{
	margin: auto;
	width: 220px;
}

.call-button a.de-button, .calendar-button a.de-button {
	padding: 16px 0px;
	width: 230px;
}

.interview-btn a.de-button{
	padding:18px 0px;
	width: 240px;
	margin-top: 20px;
}

/* ----------------------------------------------*/
/* Gallery Youtube Video   		     			 */
/* ----------------------------------------------*/
iframe{
	width:256px;
	height:144px;
}

#custom_carousel .controls li a {
	font-size: 12px;
}

/*-----------------------------------------------*/
/* Events Section	     		     		     */
/*-----------------------------------------------*/
.event-button a.de-button{
	padding: 4px 20px;
	width: 230px;
}

/*-----------------------------------------------*/
/* RSVP popup		     		     		     */
/*-----------------------------------------------*/
#rsvp-popup .main-title{
	font-size: 14px;
}

#rsvp-popup .large-title{
	font-size: 12px;
}

#rsvp-popup .small-title{
	font-size: 11px;
}

#rsvp-popup .form-control{
	font-size: 11px;
}

#rsvp-popup .rsvp-submit-button a.de-button{
	font-size: 13px;
}

/* ----------------------------------------------*/
/* Gift Section						        	 */
/* ----------------------------------------------*/
#gift-section .col-md-6 {
	padding-left: 0;
	padding-right: 0;
}

.accordion1, .accordion-groom{
	font-size: 15px;
	padding: 16px 15px 15px 10px;
}

.accordion1::after, .accordion-groom::after{
	font-size: 17px;
}

.accordion2, .accordion-bride{
	font-size: 15px;
	padding: 16px 15px 15px 10px;
}

.accordion2::after, .accordion-bride::after{
	font-size: 17px;
}


.accountinfo{
	padding: 20px 10px;
	font-size: 13px;
	letter-spacing: -0.3px;
}

.kakaopaybtn{
	font-size: 11px;
	padding: 10px 0px 11px 0px;
	width: 115px;
}

.kakaopaybtn a i.de-icon-comment{
	margin-right: 1px;
	font-size: 11px;
}

.accountbtn{
	font-size: 11px;
	width: 115px;
	padding: 10px 0px 11px 0px;
}

.gift-one-button{
	width: 160px;
}

.btnouter{
	margin-bottom: 15px;
}

.btninner{
	margin: 0px 3px;
}

/* ----------------------------------------------*/
/* Where When Section		     			     */
/* ----------------------------------------------*/
.map-zoom button{
	/* padding: 15px 2px; */
	font-size: 12px;
}

/* ----------------------------------------------*/
/* Guestbook Popup      				     	 */
/* ----------------------------------------------*/
#guestbook-popup .the-content {
	padding: 20px 15px;
}

#guestbook-popup .mfp-close {
	top: 10px;
    right: 5px;
	font-size: 21px !important;
}

#guestbook-popup .main-title, #message-all-popup .main-title{
	font-size: 14px;
	margin-bottom: 20px;
	letter-spacing: -0.5px;
}

#guestbook-popup .small-title{
	font-size: 12px;
}

#guestbook-popup .form-control{
	font-size: 11px;
	letter-spacing: -1px;
}

#guestbook-popup .custom-footer .btn {
	font-size: 13px;
}

.message-remove-confirm a.de-button, .message-remove-confirm a.de-button:hover, .message-remove-confirm a.de-button:active {
	padding: 11px 0;
	font-size: 13px;
}

.message-remove-cancel a.de-button, .message-remove-cancel a.de-button:hover, .message-remove-cancel a.de-button:active{
	padding: 11px 0;
	font-size: 13px;
}

/* ----------------------------------------------*/
/* Footer Section	     			 			 */
/* ----------------------------------------------*/
footer{
	height:350px;
}

.thank-wrapper{
   padding-top: 20px;
}

.thank-you-kr{
   /* font-size: 14px; */
   max-height: 120px;
}

.link-outer{
   padding-top: 80px;
}

.link-wrapper{
   margin-bottom: 10px;
}

/* a.link-btn{
   font-size: 11px;
} */

.copyright{
   font-size: 10px;
   margin-top: 20px;
}

}

/* ----------------------------------------------*/
/* Media Screen Max-width: 279px	     		 */
/* ----------------------------------------------*/

@media screen and (max-width: 279px) {

/* ----------------------------------------------*/
/* GALLERY Section		     			     */
/* ----------------------------------------------*/
#gallery-section .col-sm-12{
	padding-right: 5px;
	padding-left: 5px;
}

.three-col.with-gutter .masonry-col{
	margin-bottom:10px;
}
.three-col.with-gutter .masonry-col.w33{
	width:30.5%;
}

.three-col.with-gutter .masonry-col.w66{
	width:63.5%;
}

}