﻿
* {margin:0; padding:0; outline:none; border:none; -moz-box-sizing:border-box; box-sizing:border-box;}

/* GLOBAL */

html {height:100%;}
body {height:100%; line-height:1; font-family: 'Noto Sans KR', sans-serif; background-color: #000000; text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased; color:#ffffff;}
form	{height:100%;}

::-webkit-input-placeholder     {color:#bdbdbd;}
::-moz-placeholder              {color:#bdbdbd; opacity:1;}
:-ms-input-placeholder          {color:#bdbdbd;}
:-moz-placeholder               {color:#bdbdbd; opacity:1;}

ul		{margin-left:0}
img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}

p			{line-height:1.4em; font-size:18px; margin-bottom:1em;}

p a			{color:#E96627;}
p a:hover	{color:#ffffff;}

.inner		{/*width:1193px;*/ width:1253px; padding-left: 30px; padding-right: 30px; max-width:100%; margin: auto; position: relative;}

.content-section			{position:relative; z-index: 5; padding:200px 0 0 0}
.content-section-gradient	{height:200px; width: 100%; position: absolute; top: 0px; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));}
.content-bg					{background-color: #000000; }

h1			{font-size:44px; font-weight: 700; line-height: 1.4em; margin-bottom: 1em;}
h2			{font-size:44px; font-weight: 700; line-height: 1.4em; margin-bottom: 1em;}
h3			{font-size:30px; font-weight: 700; line-height: 1.4em; margin-bottom: 1em;}
h4			{font-size:28px; font-weight: 700; line-height: 1.4em; margin-bottom: 1em;}
h5			{font-size:24px; font-weight: 700; line-height: 1.4em; margin-bottom: 1em;}
h6			{font-size:22px; font-weight: 700; line-height: 1.4em; margin-bottom: 1em;}

ul,
ol			{margin:1.5em 1em;}

ul li,
ol li		{margin-bottom:0.6em;}

p.intro		{font-size:25px; font-weight: 500; line-height: 1.4em; margin-bottom: 1em;}


/* TEXT PAGE */
.text-page				{padding-top:150px;}
.text-page .text-inner	{width:960px; max-width:100%;}

.text-page h1,
.text-page h2,
.text-page h3,
.text-page h4,
.text-page h5,
.text-page h6	{margin-top:1em;}

/* COLULMS */
.col-row		{font-size:0}
.col-container	{width:calc(100% + 42px); margin-left: -21px;}
.left-col		{width:748px; display: inline-block; font-size: 16px; vertical-align: top}
.right-col		{width:445px; padding-left: 100px; display: inline-block; font-size: 16px; vertical-align: top}
.col-1			{width:100%; display: inline-block; vertical-align: top; padding: 0 21px;}
.col-3			{width:33.333%; display: inline-block; vertical-align: top; padding: 0 21px; font-size: 16px;}

/* HEADER */
header			{position:fixed; top: 0; left: 0; right: 0; z-index: 20; padding: 30px 0;}
/*
.scroll-header { height:150px; width: 100%; top:-150px; position: absolute; background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); transition: 0.4s ease-in; }
*/
.scroll-header { height:150px; width: 100%; top:0px; position: absolute; background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); transition: 0.4s ease-in; }



.scroll-header.active { top: 0; }
.logo img		{width:220px; height: auto;}
.header-right	{float:right;}

.header-menu-desktop { display:inline-block; vertical-align:top;}
.header-menu-desktop ul.main-nav { text-decoration: none; margin-left: 110px; margin-top: 12px; }
.header-menu-desktop ul.main-nav li { display: inline-block; font-size: 15px; margin-right: 30px;}
.header-menu-desktop ul.main-nav li:first-child {display:none; }

.nav-icon { width: 40px; height: 36px; text-align: center; z-index: 99; position: relative; cursor: pointer; background-color: #E96627; padding: 8px; display: inline-block; margin-left: 8px; transition: 0.2s ease-out; display: none; }
.nav-icon span 				{width: 24px; display: block; height: 1px; background-color: #ffffff; position: absolute; top: 0; left: 8px; border-radius: 1px; transition: 0.2s cubic-bezier(0, 0, 0.21, 1); }
.nav-icon span:nth-child(1) {top: 9px}
.nav-icon span:nth-child(2) {top: 17px; }
.nav-icon span:nth-child(3) {top: 25px; }

.nav-icon.open span 				{}
.nav-icon.open span:nth-child(1) 	{top: 13px; transform: rotate(45deg) }
.nav-icon.open span:nth-child(2) 	{opacity: 0; transform: scale(0) }
.nav-icon.open span:nth-child(3) 	{top: 13px; transform: rotate(-45deg) }

.nav-icon:hover			{background-color:#ffffff}
.nav-icon:hover	span	{background-color:#E96627}

.minerals-btn		{font-size:37px; color:#E96627; transform: translateY(-4px); display: inline-block; transition:0.2s ease-out}

.contact-btn { font-size: 37px; color: #E96627; transform: translateY(-4px); display: inline-block; transition: 0.2s ease-out }
.contact-btn:hover	{color:#ffffff;}
.minerals-btn:hover { color: #ffffff; }

/* CONTACT POPUP */
.contact-popup { background-color: #E96627; padding: 57px; padding-right: 160px; position: fixed; right: 0; z-index: 21; font-size: 0; color: #ffffff; top: -1500px; transition: 0.5s ease-in-out }
.contact-popup.active	{top:0}
.contact-popup h2		{font-size:28px; font-weight: 700; text-transform: uppercase; margin-bottom: 25px;}
.contact-popup p		{font-size:13px; margin-bottom: 20px;}
.contact-form-col		{width:301px; display: inline-block; vertical-align: top;}
.contact-form-col textarea,
.contact-form-col input[type="text"]								{background-color:#FCEFE9; font-size: 11px; width:100%; padding: 6px; margin-bottom: 8px}

.contact-form-col textarea::-webkit-input-placeholder,
.contact-form-col input[type="text"]::-webkit-input-placeholder     {color:#E96627;}
.contact-form-col textarea::-moz-placeholder,
.contact-form-col input[type="text"]::-moz-placeholder              {color:#E96627; opacity:1;}
.contact-form-col textarea:-ms-input-placeholder,
.contact-form-col input[type="text"]:-ms-input-placeholder          {color:#E96627;}
.contact-form-col textarea:-moz-placeholder,
.contact-form-col input[type="text"]:-moz-placeholder               {color:#E96627; opacity:1;}

.error::-webkit-input-placeholder { color: red !important; }
.error::-moz-placeholder { color: red !important; opacity: 1; }
.error:-ms-input-placeholder { color: red !important; }
.error:-moz-placeholder { color: red !important; opacity: 1; }

.contact-form-col textarea	{height:120px;}

.contacts-page-container input[type="submit"],
.contact-text-col input[type="submit"]			{font-size:14px; background-color: #ffffff; color:#E96627; padding:7px 35px 7px 10px; vertical-align: middle; background-image: url(/_assets/chevron.svg); background-position: 90%; background-size: 11px 18px; background-repeat: no-repeat;}

.contacts-page-container input[type="submit"]:hover,
.contact-text-col input[type="submit"]:hover	{opacity:0.8}

.contact-text-col	{display:inline-block; width:450px; margin-top: 115px; max-width: 100%; padding-left: 60px;}
.contact-text-col p	{font-size:11px}

.error {color:red;}
.errorBox   {margin-top: 50px; width: 100%; padding: 20px; border: 1px solid red; border-radius: 5px; color:red;}
.errorBox ul {font-size:14px; margin-left: 20px;}
.errorBox ul li { font-size: 14px; }

.pnlThanks {min-height:400px;}

.container { display: inline-block; position: relative; padding-left: 20px; margin-right: 25px; margin-bottom: 0; cursor: pointer; font-size: 11px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle }
.container input							{position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark 									{position: absolute; top: 0; left: 0; height: 14px; width: 14px; background-color: transparent; border-radius: 50%; border:1px solid #ffffff;}
.container:hover input ~ .checkmark 		{background-color: #ccc;}
.container input:checked ~ .checkmark		{background-color: transparent;}
.checkmark:after 							{content: ""; position: absolute; display: none;}
.container input:checked ~ .checkmark:after {display: block;}
.container .checkmark:after 				{top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: white;}

a.close		{position:absolute; right:60px; top:30px; font-size:26px; color:#ffffff;}

/* NAV POPUP */
nav								{position:absolute; top:-1500px; right:0; z-index: 21; background-color: #000000; padding: 35px 60px; border-bottom:2px solid #E96627; transition: 0.5s ease-in-out}
nav.active						{top:0}
nav h3							{font-size:26px; margin-bottom: 0; font-weight: 700; text-transform: uppercase; display: inline-block; vertical-align: top; color:#E96627;}
ul.social						{font-size:0; display: inline-block; vertical-align: middle; margin-left: 50px;}
ul.social li					{display:inline-block; vertical-align: middle; margin-right: 14px; font-size:30px;}
ul.social li a 					{color:#E96627;}
ul.social li a:hover			{color:#ffffff;}
ul.social li a img				{width:28px; height: 28px;}
ul.social li a img.close-nav	{width:24px; height: 24px;}
ul.main-nav						{margin-top:60px; text-transform:uppercase;}
ul.main-nav li.home img			{width:25px;}
ul.main-nav li					{margin-bottom:30px; font-size: 26px;}
ul.main-nav li a				{text-decoration:none; }
ul.main-nav li a:hover			{color:#E96627;}

.menu-upper   {font-weight:700;}
.menu-number { font-weight: normal; }

ul.social li.close-nav { font-size: 25px; }

/* HERO CONTAINER */
.hero-container							{background-size:cover; width: 100%; height: 100%; min-height:768px; background-position: center top; position: fixed; background-repeat: no-repeat; top: 0; left: 0;}
.hero-container .inner					{height:100%; position: relative; z-index: 10}
.hero-container	.text-container			{display:table; width: 100%; height: 100%;}
.hero-container	.text-container-outer	{display:table-cell;height: 100%; vertical-align: middle;}
.hero-container	.text-container-inner 	{width:100%;}
.hero-container h1						{font-size:36px; font-weight: 900; line-height: 1.4em; width:580px; max-width:100%;}

.hero-container:before	{content: ''; position: absolute; left: 0; top: 0; width: 100%; height:0%; background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,1)); z-index:2}

.quick-nav							{font-size:0; margin-top: 55px; position:relative; margin-bottom: 0}
.quick-nav li						{font-size:20px; display: inline-block; padding-right: 95px; text-transform: uppercase; position: relative; margin-bottom: 0}
.quick-nav li a						{text-decoration:none; position: relative;}
.quick-nav li a span				{width:14px; height: 14px; position: absolute; right: -20px; top: 50%; margin-top: -7px;}
.quick-nav li a span:before,
.quick-nav li a span:after			{width:14px; height: 2px; background-color: #ffffff; position: absolute; top: 50%; margin-top: -1px; content: '';}
.quick-nav li a span:after			{width:2px; height: 14px; background-color: #ffffff; position: absolute; top: 0; margin-top: 0; left:50%; margin-left: -1px; content: '';}

.quick-nav li a:hover span:before,
.quick-nav li a:hover span:after	{background-color:#E96627}
.quick-nav li a:hover				{color:#E96627;}

.quick-nav li:before				{width:42px; position: absolute; bottom:8px; left: -55px; content: ''; border-top:1px solid #ffffff;}
.quick-nav li:first-child:before	{display: none}
.quick-nav li strong				{font-weight: 700}
.quick-nav:before					{width:5000px; position: absolute; bottom:8px; left: -5020px; content: ''; border-top:1px solid #ffffff;}

.bg-vid-home	{display: block; position: absolute; min-width:100%; min-height: 100%; width: auto; height: auto; -moz-transform:translate(-50%, -50%); transform:translate(-50%, -50%); left: 50%; top: 50%; filter: saturate(0); z-index: 0}

.arrow-down		{position:absolute; bottom: 25px; left: 50%; margin-left: -150px; width: 300px; text-align: center; text-decoration: none; -webkit-animation-duration: 2.5s; 
				-webkit-animation-name: scroller; 
				animation-name: scroller; 
				animation-duration: 2.5s; 
				-webkit-animation-fill-mode: both; 
				animation-fill-mode: both; 
				-webkit-animation-timing-function: ease-in-out; 
				animation-timing-function: ease-in-out; 
				animation-iteration-count:infinite; 
				-webkit-animation-iteration-count:infinite;}

.arrow-down p	{margin-bottom:15px; font-size: 18px;}


@-webkit-keyframes scroller {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(6px);} 
    40% {-webkit-transform: translateY(10px);} 
    60% {-webkit-transform: translateY(14px);} 
} 

@keyframes scroller { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(6px);} 
    40% {transform: translateY(10px);} 
    60% {transform: translateY(14px);} 
} 

.scroller { 
    -moz-animation-name: scroller; 
    -webkit-animation-name: scroller; 
    animation-name: scroller; 
}


/* CONTENT */
.image-container	{text-align:center; border-top:1px dashed #ffffff; margin: 60px 0; padding: 50px 0}

/* RIGHT COL */
.icon-panel img		{width:70px; margin-bottom: 25px; margin-left:45px;}
.icon-panel			{padding-bottom:55px;}
.icon-panel p		{font-weight: 300; margin-left: 45px;}
.icon-panel .line	{width:100%; border-top:1px solid #ffffff; display: block; position: relative; margin-top: 55px;}
.icon-panel .line:before	{width:12px; height: 12px; border-radius: 50%; border:2px solid #ffffff; position: absolute; left: 0; top: -9px; content: ''; background-color: #000000}

.right-panel.icon-panel:last-child .line	{display:none}


/* ARTICLE */
article							{}
article	.content-section		{margin-top:-200px;}
article .content-bg				{background-color:transparent; margin-top:-100px;}
.article-header					{height:75vh; width:100%; min-height: 600px; background-repeat: no-repeat; background-position: top center; background-size: cover; overflow: hidden; background-attachment: fixed;}
.article-header	h1				{font-size:100px; font-weight: 900; color:#ffffff; text-transform: uppercase; display: inline-block; position: relative; margin-bottom: 0}
.article-header	h1 span			{font-size:33px; font-weight: 400; color: #E96627}
.article-header	.inner			{display: table; height: 100%;}
.article-header	.header-text	{display: table-cell; vertical-align:middle; width:100%; height: 100%;}

.article-header	h1:before		{width:5000px; position: absolute; bottom:59px; left: -5020px; content: ''; border-top:1px solid #ffffff;}
.article-header	h1:after		{width:5000px; position: absolute; bottom:59px; right: -5020px; content: ''; border-top:1px solid #ffffff;}

.left-col h3,
.right-col h3			{font-size:22px; color:#E96627;}
.right-col.centered		{text-align:center}

/* ABOUT PAGE */
.panel-circle-image			{width:157px; height: 157px; border-radius: 50%; border:2px solid #ffffff; background-size: cover; margin-bottom: 40px;}
.principals .col-3 h3		{font-size:18px; color:#E96627; font-weight: 700;}
.principals .col-3 p a		{font-weight:300; text-decoration: none; color:#ffffff;}

.line-chevron				{font-size:20px; text-decoration: none; display: inline-block; border-bottom: 2px solid #ffffff; padding-bottom: 15px; color: #E96627; transition:0.2s ease-out}
.line-chevron i				{margin-left:15px; transform: translateY(1px); display: inline-block; color:#ffffff; transition:0.2s ease-out}
.line-chevron:hover i		{margin-left:20px; color: #E96627;}
.line-chevron:hover			{border-color: #E96627;}

.address-container {width: 100%; margin-top: 10px;}
.address { width: 48%; display: inline-block; vertical-align: top; margin-bottom: 50px; }

/* LOCATION */
.fifty-fifty .left-col	{width:50%;}
.fifty-fifty .right-col	{width:50%; padding-left: 40px;}
.key li					{display:inline-block; vertical-align: top; font-size: 20px; color: #E96627; margin-right: 20px;}
.key li i				{margin-right:6px;}

/* COMMITMENT */
.sixty-forty .left-col	{width:60%;}
.sixty-forty .right-col	{width:40%;}

.principals.col-container,
.fifty-fifty,
.sixty-forty		{padding-top:50px; padding-bottom: 50px;}

/* INSIGHTS */
.filter-container				{margin:40px 0;}
.filters hr						{position:absolute; z-index: 0; width:100%; top: 50%;}
.filters						{position: relative;}
.filter-cell					{display:inline-block; vertical-align: top; background-color: #000000; padding-right: 20px; position: relative; z-index: 1; }
.filter-cell select { font-size: 20px; background-color: black; -webkit-appearance: none; color: #ffffff; width: 180px; padding: 5px 10px 7px; }
.filter-cell .select-cell		{border:1px solid #ffffff; color:#ffffff;  position: relative; font-size: 16px;}
.filter-cell .select-cell i		{transform:rotate(90deg); position: absolute; right:10px; top: 9px}

/* INSIGHT LISTING */
.main-listing .col-3	{margin-bottom:60px;}
.main-listing .col-1	{text-align:center;}

.listing-panel *		{transition: 0.2s ease-out}
.listing-panel			{position:relative; padding-bottom: 0px; border-bottom:1px solid #ffffff;}
.listing-panel p		{font-weight:300}
.listing-panel p.topic	{font-size:18px; font-weight: 700; text-transform: uppercase;}
.listing-panel h4		{color:#E96627; font-size: 18px}
.listing-panel-image	{margin-bottom:24px; background-size: cover; height: 180px;}
.listing-panel-text		{padding-right:20px;}
.listing-panel-text i.icon-chevron	{position:absolute; right:0; bottom: 22px}

.listing-panel:hover 						{border-color:#E96627}
.listing-panel:hover .listing-panel-image	{opacity:0.6}
.listing-panel:hover i.icon-chevron			{color:#E96627; transform: translateX(5px)}

.listing-panel a.cover	{z-index:10}

/* INSIGHT TEXT PAGE */
.insights-container h2		{font-size:35px}
.insights-header			{height:315px; background-size: cover; background-repeat: no-repeat;}

.insights-actions					{margin:40px 0;}
.insights-actions p.topic			{display:inline-block; margin-bottom: 0; vertical-align: top; text-transform: uppercase; font-weight: 900;}
.insights-actions ul				{font-size:18px; list-style: none; float: right; margin: 3px 0 0 0;}
.insights-actions ul li				{display:inline-block; vertical-align: top; font-weight: 900; border-left:2px solid #E96627; margin-left: 10px; padding-left: 12px;}
.insights-actions ul li a			{color:#E96627;}
.insights-actions ul li a:hover		{color:#ffffff;}
.insights-actions ul li:first-child	{border-left:none;}

.insights-actions .btn.next	{float:right;}

/* CONTACTS */
.contacts-page-container textarea,
.contacts-page-container input[type="text"]	{font-size:17px;}
.contacts-page-container .form-cell			{margin-bottom:2px;}
.contacts-page-container .contact-form-col	{width:575px; margin-bottom: 50px;}

.contact-text	{width:990px; max-width: 100%;}

.contact-radios								{margin:40px 0}
.contact-radios .container					{font-size:20px; padding-top: 3px; padding-left: 36px;}
.contact-radios .container .checkmark		{width:28px; height: 28px;  border:2px solid #ffffff;}
.contact-radios .container .checkmark:after	{top: 4px; left: 4px; width: 16px; height: 16px;}

.contacts-page-container input[type="submit"]	{font-size:28px; margin: 20px 0; padding:10px 45px 10px 10px; color:#ffffff; background-color:#E96627; background-image: url(/_assets/chevron-white.svg); background-size: 14px  auto}

.contact-details				{display:inline-block;}
.contact-item					{font-size:0;}
.contact-item-text				{border-left:1px solid #ffffff; display:inline-block; vertical-align: top; padding-left: 45px; margin-left: 30px; padding-bottom: 20px;}
.contact-item-text p			{font-size: 22px; margin-bottom: 0;}
.contact-item-text p a			{color:#ffffff; text-decoration: none;}
.contact-item-text p a:hover	{text-decoration: underline;}
.contact-item i					{display:inline-block; font-size: 30px; color:#E96627; width:40px;}
.contact-item i.icon-mail		{font-size:24px;}

.contact-item:last-child .contact-item-text	{padding-bottom:0}

.contact-left-col { width: 55%; margin-right: 4%; display: inline-block; padding-right: 20px;}
.contact-right-col { width: 40%; display: inline-block; vertical-align:top; margin-top: 125px;}

/* BUTTONS */
a.btn		{font-size:20px; background-color: transparent; -webkit-appearance:none; color:#ffffff; border:1px solid #ffffff; text-decoration: none; display: inline-block; padding: 8px 10px 7px; transition:0.2s ease-out}
a.btn i		{font-size:15px; transform: translateY(-3px); display: inline-block; margin-left: 15px;}
a.btn:hover	{background-color:#E96627;}

a.btn.back		{padding-left: 0; padding-right: 15px; padding-bottom: 10px}
a.btn.back i	{transform:rotate(180deg) translateY(0px); margin-left: 8px; font-size: 18px;}

a.btn.next		{padding-left: 15px; padding-right: 15px; padding-bottom: 10px}
a.btn.next i	{transform:rotate(0) translateY(0px); margin-left: 8px; font-size: 18px;}

button.btn { font-size: 20px; background-color: transparent; -webkit-appearance: none; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; display: inline-block; padding: 8px 10px 7px; transition: 0.2s ease-out }
button.btn i { font-size: 15px; transform: translateY(-3px); display: inline-block; margin-left: 15px; }
button.btn:hover { background-color: #E96627; }

/* FOOTER */
footer					{background-color:#000000; position: relative; font-size: 0; padding:100px 0 40px 0}
footer p				{font-size:14px; border-bottom: 2px solid #ffffff; padding-bottom: 16px; display: inline-block;}
footer ul				{float:right; margin: 29px 0 0 0;}
footer ul li			{font-size:14px; margin-left: 85px; margin-bottom: 0; display: inline-block;}	
footer ul li a			{text-decoration:none; border-bottom:2px solid #ffffff; padding-bottom: 8px; transition: 0.2s ease-out}
footer ul li a:hover	{color:#E96627; border-color: #E96627; padding-bottom: 5px;}


ul.social li a,
.contact-btn,
a.close			{text-decoration:none;}
























/* COOKIE BAR */
.cookieBar              { width: 100%; background: url('/_assets/bg_cookiebar.png'); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999; box-sizing:border-box; -moz-box-sizing:border-box; }
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {border:0px; background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }


