@import url('https://indestructibletype.com/fonts/Jost.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
@import url(./reset.css);
@import url(./form.css);





/* common */
html, body { height: 100%; }
body { position: relative; min-width: 1280px; font-family: 'Jost', 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 400; color: #666; background: #f7f5ec;  }
body.main { cursor: url(../img/skip.cur), url(../img/skip30.png), auto; }
body.white { background: #fff !important; }

a { color: #666; text-decoration: none; }
a:hover {}
::selection {background:#008ae4; color:#666; text-shadow:none;}
::-moz-selection {background:#008ae4; color:#666; text-shadow:none;}
::-webkit-selection {background:#008ae4; color:#666; text-shadow:none;} 


.iz-site { position: relative; height: 100%; visibility: hidden; background-size: cover; }
.iz-background-0 { background: url(../img/bg/bg_00.jpg) }
.iz-background-1 { background: url(../img/bg/bg_01.jpg) }
.iz-background-2 { background: url(../img/bg/bg_02.jpg) }
.iz-background-3 { background: url(../img/bg/bg_03.jpg) }
.iz-background-4 { background: url(../img/bg/bg_04.jpg) }
.iz-background-5 { background: url(../img/bg/bg_05.jpg) }
.iz-background-6 { background: url(../img/bg/bg_06.jpg) }

/*.iz-background-9 { background: url(../img/bg/파일명); }*/

.iz-fix { position: relative; margin: 0 auto; max-width: 1330px; }
.iz-wrap { position: relative; margin: 0 auto; padding: 0 100px 0 200px; max-width: 1080px; }
.iz-content { position: relative; }

/*.iz-site-before { position: fixed; right: 0; top: 0; z-index: 9000; width: 100%; height: 100%; background: #023373; }
.iz-site-after { position: fixed; left: 0; top: 0; z-index: 9000; width: 0; height: 100%; background: #023373; }
.csstransitions .iz-site:before { position: fixed; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #023373; z-index: 999; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleX(1) translateZ(0); -ms-transform: scaleX(1) translateZ(0); transform: scaleX(1) translateZ(0); }
.csstransitions .is-ready .iz-site:before { -webkit-transition: 1s 0s cubic-bezier(0.23, 1, 0.32, 1); -ms-transition: 1s 0s cubic-bezier(0.23, 1, 0.32, 1); transition: 1s 0s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: scaleX(0) translateZ(0); -ms-transform: scaleX(0) translateZ(0); transform: scaleX(0) translateZ(0); visibility: hidden; }
.csstransitions .iz-site:after { position: fixed; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #023373; z-index: 9999; visibility: hidden; -webkit-transition: 0.85s 0s cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: 0.85s 0s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.85s 0s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0) translateZ(0); -ms-transform: scaleX(0) translateZ(0); transform: scaleX(0) translateZ(0); }
.csstransitions .is-leaving .iz-site:after { visibility: visible; -webkit-transform: scaleX(1) translateZ(0); -ms-transform: scaleX(1) translateZ(0); transform: scaleX(1) translateZ(0); }*/


.bold { font-weight: 700; }
.blind { display: none; }

/* aside */
.aside { position: fixed; top: 50%; z-index: 3000; margin-top: -55px; width: 150px; height: 110px; }
.aside h2 { display: none; }
.aside-nav { position: relative; margin-left: 50px; }
.aside-nav li { position: relative; height: 20px; }
.aside-nav li.cur { position: absolute; top: -50px; left: 0; width: 20px; height: 12px; background: url(../img/common/ic-cursor02.png) no-repeat; opacity: 0; filter: alpha(opacity=0); }
.aside-nav li + li { margin-top: 10px; }
.aside-nav li a { display: block; font-size: 12px; font-weight: bold; color: #004086 }
.aside-nav li a span { position: absolute; margin-left: -15px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); -webkit-transition: transform .4s cubic-bezier(.19, 1, .22, 1); -ms-transition: transform .4s cubic-bezier(.19, 1, .22, 1); transition: transform .4s cubic-bezier(.19, 1, .22, 1); }
.aside-nav li a:hover span { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(15px, 0); -ms-transform: translate(15px, 0); transform: translate(15px, 0); }

.aside-social { position: fixed; bottom: 20px; z-index: 3000; margin-left: 50px; }
.aside-social li { float: left; }
.aside-social li + li { margin-left: 10px; }
.aside-social li a { display: block; width: 16px; height: 16px; overflow: hidden; text-indent: -999em; background: url(../img/common/sp-social.png) no-repeat; }
.aside-social li a.facebook { background-position: 0 0 }
.aside-social li a.instagram { background-position: -16px 0 }
.aside-social li span { font-size: 12px; color: #023373; }


/* header */
.header { display: none; }


/* container */
.container { position: relative; height: 100%; font-size: 0; }
.container:before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
.container-navigation { margin-bottom: 100px; font-size: 14px; }
.container-navigation h2 { display: none; }
.container-navigation ul { position: relative; overflow: hidden; }
.container-navigation li { float: left; }
.container-navigation li + li { margin-left: 5px; padding-left: 5px; border-left: 1px solid #bababa; }
.container-navigation li a { display: block; font-weight: 300; line-height: 1; color: #666; }
.container-navigation li a.on { font-weight: 700; color: #004086; }

.content { display: inline-block; vertical-align: middle; width: 100%; font-size: 12px; }

.section-group-1 { min-height: 500px; }
.section-group-2 { min-height: 600px; }

/* typed */
.typed-text { font-size: 200px; font-weight: 900; color: #fff; }
.typed-text + .typed-cursor { display: none }
.typed-text .blue { color: #023373; }


/* footer */
.footer { position: fixed; bottom: 20px; z-index: 3000; }
.footer li { float: left; }
.footer li + li { margin-left: 10px; }
.footer li a { display: block; width: 12px; height: 12px; overflow: hidden; text-indent: -999em; background: url(../img/common/sp-social.png) no-repeat; }
.footer li a.facebook { background-position: 0 0 }
.footer li a.instagram { background-position: -12px 0 }
.footer li span { font-size: 9px; color: #023373; }


/* Preloader */
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #023373; z-index: 10000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#status { position: absolute; left: 50%; top: 50%; margin: -105px 0 0 -240px; width: 480px; height: 210px; background: url(../img/common/logo.png) center center no-repeat; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .1; filter: alpha(opacity=10); }


@media screen and (min-width: 1280px) {
	body { min-width: inherit; }

	.iz-fix { max-width: inherit; }
	.iz-wrap { padding: 0 7.8125vw 0 15.625vw; max-width: inherit; }

	/* aside */
	.aside { margin-top: -10.9375vw; width: 11.71875vw; height: 21.875vw; }
	.aside-nav li { display: inline-block; width: 100%; height: 5.46875vw; vertical-align: middle; }
	.aside-nav li:before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
	.aside-nav li + li { margin-top: 0; }
	.aside-nav li a { display: inline-block; font-size: 0.9375vw; vertical-align: middle; }
	.aside-nav li a span { margin-left: -1.171875vw; }
	.aside-nav li a:hover span { -webkit-transform: translate(1.171875vw, 0); -ms-transform: translate(1.171875vw, 0); transform: translate(1.171875vw, 0); }
	
	/*.aside-social li a { width: 1.25vw; height: 1.25vw; background-size: 2.5vw 1.25vw; }
	.aside-social li a.facebook { background-position: 0 0 }
	.aside-social li a.instagram { background-position: -1.25vw 0 }
	.aside-social li + li { margin-left: 0.78125vw }
	.aside-social li span { font-size: 0.9375vw }*/

	.container-navigation { margin-bottom: 7.8125vw; }
	.container-navigation li a { font-size: 14px; font-size: 1.09375vw }
	.container-navigation li + li { margin-left: 10px; margin-left: 0.78125vw; padding-left: 10px; padding-left: 0.78125vw; }


	/* typed */
	.typed-text { font-size: 200px; font-size: 15.625vw; }
}

@media screen and (max-width:750px) {
	
	/* common */
	body { min-width: 320px; }

	.space { display: block; }
	
	.iz-wrap,
	.iz-content { padding: 0; }

	
	/* aside */
	.aside { top: 0; margin: 0; margin-left: -100%; width: 100%; height: 100%; background: rgba(2, 51, 115, 0.8); opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: transform 0s linear 0.2s, opacity 0.2s linear; -o-transition: transform 0s linear 0.2s, opacity 0.2s linear; transition: transform 0s linear 0.2s, opacity 0.2s linear }
	.aside:before { content: ""; display: block; width: 100%; height: 80px; height: 21.333333333333332vw; }
	.is-open .aside { opacity: 1; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; }
	.aside h2 { display: block; position: absolute; left: 20px; top: 20px; z-index: 4000; font-size: 48px; font-size: 12.8vw; font-weight: 900; color: #fff; line-height: 0.74; letter-spacing: 5px; }
	.aside .close { position: absolute; right: 20px; top: 20px; width: 36px; width: 9.6vw; height: 36px; height: 9.6vw; background: url(../img/common/ic-close.png) no-repeat; background-size: 100%; }
	
	.aside-nav { margin: 0 20px; }
	.aside-nav li { height: auto }
	.aside-nav li.cur { display: none !important; }
	.aside-nav li + li { margin-top: 20px; }
	.aside-nav li a { font-size: 30px; font-size: 8vw; font-weight: 500; color: #fff; }
	.aside-nav li a span { position: static; margin-left: 0; opacity: 1; -webkit-transition: no; -o-transition: no; transition: no; }
	.aside-nav li a span:hover { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
	
	.aside-social { position: static; margin: 20px; }
	.aside-social li { float: left; }
	.aside-social li + li { margin-left: 10px; }
	.aside-social li a { width: 30px; width: 8vw; height: 30px; height: 8vw; background: url(../img/common/sp-social@2x.png) no-repeat; background-size: 60px 30px; background-size: 16vw 8vw; }
	.aside-social li a.facebook { background-position: 0 0 }
	.aside-social li a.instagram { background-position: -30px 0; background-position: -8vw 0; }
	.aside-social li span { position: absolute; left: 20px; bottom: 20px; font-size: 12px; font-size: 3.2vw; color: #fff; }

	/* header */
	.header { display: block; height: 80px; height: 21.333333333333332vw; }
	.header-logo { position: fixed; left: 20px; top: 20px; z-index: 3000; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transition: opacity .0s; -o-transition: opacity .0s; transition: opacity .0s; }
	.header-logo a { display: block; font-size: 48px; font-size: 12.8vw; font-weight: 900; color: #023373; line-height: 0.74; text-shadow: 0px 0px 10px #e5e5e5; }
	.is-open .header-logo { opacity: 0; }
	
	/* container */
	.container { margin: 0 20px; padding: 0 0 20px; height: auto }
	.container-navigation { margin-bottom: 30px; margin-bottom: 8vw; }
	.container-navigation h2 { position: relative; display: block; font-size: 24px; font-size: 6.4vw; font-weight: 700; line-height: 42px; line-height: 11.2vw; color: #023373; border-top: 1px solid #999; border-bottom: 1px solid #999; }
	.container-navigation h2:after { content: ""; position: absolute; right: 0; top: 50%; display: block; width: 18px; width: 4.8vw; height: 18px; height: 4.8vw; background: url(../img/common/ic-arrow-down.png); background-size: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
	.container-navigation h2.on:after { background-image: url(../img/common/ic-arrow-up.png); }
	.container-navigation ul { overflow: hidden; margin-top: -1px; height: auto; max-height: 0; opacity: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity .3s ease-out, max-height .5s ease-in-out; -moz-transition: opacity .3s ease-out, max-height .5s ease-in-out; -ms-transition: opacity .3s ease-out, max-height .5s ease-in-out; -o-transition: opacity .3s ease-out, max-height .5s ease-in-out; transition: opacity .3s ease-out, max-height .5s ease-in-out; }
	.container-navigation ul.on { opacity: 1; max-height: 1000px; }
	.container-navigation li { float: none; }
	.container-navigation li a { font-size: 24px; font-size: 6.4vw; font-weight: 300; line-height: 42px; line-height: 11.2vw; color: #999; border-top: 1px solid #999; border-bottom: 1px solid #999; }
	.container-navigation li a.on { display: none; }
	.container-navigation li + li { margin-top: -1px; margin-left: 0; padding-left: 0; border-left: 0; }


	/* typed */
	.typed { position: fixed; top: 50%; left: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
	.typed-text { font-size: 60px; font-size: 16vw; }


	/* Preloader */
	#status { background-size: 50% }
	
}