/*
Theme Name: 이에스알홀딩스
Author: 신하연
Version: 1.0.0
*/


@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap');
/*==============================================

        FLUX
    (,,◕　⋏　◕,,)
    ----------------------------------------------------------------
    * Date          :   2018.07.11
    * Modify        :
    * Name      :   reset.css`
    * Author        :   neoflux.co.kr
    ----------------------------------------------------------------

    - Description -

    00. reset           :   css 초기화

==============================================*/

/* 공통 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,input,select,textarea,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0px; padding:0px; vertical-align:top;}
body, #main{ overflow:hidden; width:100%; /*min-width:1920px;*/ color:#222; font-family:'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; line-height:1; letter-spacing:-0.025em; word-break:break-all;}
html , body {position:relative; height:100%;}
ul, ol, dl {list-style-type:none;}
h1, h2, h3, h4, h5, h6, th {font-weight:400;}
table {border-collapse:collapse; border-spacing:0; word-break:break-all;}
table th {font-weight:400;}
img, button, fieldset, abbr, acronym {border:0;}
label {cursor:pointer;}
address, caption, cite, code, dfn, em, var {font-style:normal; font-weight:normal;}
strong {font-weight:normal;}
caption, legend {width:0px; height:0px; font-size:0px; line-height:0px; visibility:hidden;}
/*img {max-width:100%;}*/
q:before, q:after {content:'';}
hr {display:none;}
a {text-decoration:none;color:#646464;cursor:pointer;}
a:link, a:visited {text-decoration:none;color:#646464;}
a:hover, a:focus, a:active {background:none;text-decoration:none;}

/* html5 ie9 else */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block; padding:0; margin:0;}


/* 큰 틀(공통-wrap/content)*/
#wrap {opacity:0; transition:opacity 0.5s ease;}
#wrap.open {opacity:1;}
.window-content{position:relative; box-sizing:border-box; margin:0 auto; min-width:1180px;}


/* 헤더 */
.header { position:absolute; top:50px; left:50%; margin-left:-128.5px; z-index:9999999;}


/* 백그라운드 텍스트 */
.background_txt { position:absolute; z-index:9; top:32%; left:0; width:100%; text-align:center;}
.background_txt h2 a span { color:#fff; opacity:0.5; font-size:80px; font-family: 'PT Serif', serif;}
.background_txt h2 { }

/* 백그라운드 동영상 */
.main-group {position:relative;  box-sizing:border-box; }
.main-group .video-wrap {position:absolute;  top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; overflow:hidden; text-align:center;}
.main-group .video-data {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.main-group .video-data video {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-group .video-wrap:before {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#000; opacity:0.4; z-index:3;}


/* 사이트 공통 */
.content-wrap {position:absolute; top:0; right:0; bottom:0; left:0; display:block; width:auto; height:auto; margin:auto; z-index:10;}
.content-wrap > div {position:absolute; height:100%; overflow:hidden; z-index:1;}
.content-wrap .holdings {width:25%; left:0%;}
.content-wrap .shopping {width:25%; left:25%;}
.content-wrap .coin {width:25%; left:50%;}
.content-wrap .graphene {width:25%; left:75%;}
.content-wrap .title-wrap {position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}


/* 사이트 공통 - 모니터 부분 */
.content-wrap .title-monitor { position:relative; top:-410px; opacity:0; width:100%; text-align:center; margin:0 auto 30px auto; width:410px; height:350px; background:url('/wp-content/themes/esr/img/intro_monitor.png') no-repeat center bottom; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;}
.title-wrap:hover > .title-monitor {opacity:1; top:10%;}
.content-wrap .title-monitor .sub_imgbox {margin-left:41px; display:block; position:relative; top:35px; width:327px; height:182px;}
.content-wrap .title-monitor .sub_imgbox2 {margin-left:41px; display:block; position:relative; top:35px; width:327px; height:182px;}
.content-wrap .title-monitor .sub_imgbox .section { display:inline-block;} 


/* 사이트 명 */
.content-wrap .title-data {position:absolute; left:50px; width:calc(100% - 100px); height:380px;padding-bottom:15px; box-sizing:border-box; text-align:left; /* -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); */z-index:5; bottom:100px;}
.content-wrap .title-data .brand-name {margin-top:14px; font-size:50px; line-height:50px; color:#fff; font-weight:800; letter-spacing:0; white-space:nowrap; font-family: 'Montserrat', sans-serif;}
.content-wrap .title-data .line {position:absolute; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; bottom:110px; left:0; display:block; width:0; height:4px; background:#fed200;}
.content-wrap .title-wrap:hover .line {bottom:250px;}
.content-wrap .title-cell {position:relative; top: 140px; width:0; overflow:hidden; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;}
.content-wrap .title-wrap:hover .title-cell { top:0px; }

/* 사이트 백그라운드 이미지*/
.content-wrap .visual-wrap {position:absolute; top:0px; left:0; display:block; width:0; height:100%; z-index:1; overflow:hidden; transition:width 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.content-wrap .visual-wrap .obj {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.content-wrap .visual-wrap:after {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0;}
.content-wrap .holdings .visual-wrap .obj {background-image:url(/wp-content/themes/esr/img/holdings.jpg);}
.content-wrap .shopping .visual-wrap .obj {background-image:url(/wp-content/themes/esr/img/shopping.jpg);}
.content-wrap .coin .visual-wrap .obj {background-image:url(/wp-content/themes/esr/img/coin.jpg);}
.content-wrap .graphene .visual-wrap .obj {background-image:url(/wp-content/themes/esr/img/graphene.jpg);}

/* 사이트 상세설명 */
.content-wrap .sub-info {position:absolute; top:260px; left:0; width:100%; opacity:0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;}
.content-wrap .title-wrap:hover .sub-info { opacity:1; top:130px;  }
.content-wrap .sub-info .txt {padding-top:30px; font-size:16px; color:#fff; opacity:0.8; line-height:30px; word-break:keep-all;}

/* detail_view 버튼 */
.content-wrap .btn-view {position:relative; bottom:-180px; width:auto; float:left; clear:both;}
.content-wrap .home { float:left; }
.content-wrap .ebank {float:left; margin-top:10px;}
.content-wrap .usa { float:left; margin-top:10px;}
.content-wrap .vip {margin-top:10px;}
.content-wrap .community {margin-top:10px;}



/* detail_view 버튼 - Effect 7: second border slides up */
.cl-effect-7 a { padding: 8px 0 6px 0; color: #fff; text-shadow: none; font-weight: 300; font-family: 'Montserrat', sans-serif; display:inline-block; font-size:18px;}
.cl-effect-7 a::before, .cl-effect-7 a::after {  position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;}
.cl-effect-7 a::after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s;}
.cl-effect-7 a:hover::after, .cl-effect-7 a:focus::after { top: 0%; opacity: 1;}


/* 마우스오버시 백그라운드 opacity */
.content-wrap:before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; display:block; width:auto; height:auto; margin:auto -50px; background:#000; opacity:0; transition:opacity 0.45s ease;}
.content-wrap.hover:before {opacity:0.5;}

/* 사이트 상세설명 - 마우스 이동 효과 */
.content-data.hover .visual-wrap {width:100%;}

.content-data.enter-left .visual-wrap {left:0; right:auto;}
.content-data.enter-left .visual-wrap .obj {left:0; right:auto;}
.content-data.enter-right .visual-wrap {left:auto; right:0;}
.content-data.enter-right .visual-wrap .obj {left:auto; right:0;}
.content-data.leave-left .visual-wrap {left:0; right:auto;}
.content-data.enter-left .visual-wrap .obj {left:0; right:auto;}
.content-data.leave-right .visual-wrap {left:auto; right:0;}
.content-data.leave-right .visual-wrap .obj {left:auto; right:0;}



/* 하단 푸터 */
.copy{font-family: 'Montserrat', sans-serif; position:absolute; bottom:0; left:50%; margin-left:-158.36px; padding-bottom:50px; display:block; font-size:12px; line-height:14px; text-align:center; color:#fff; opacity:0.4; z-index:50;}



/* 미디어 쿼리(반응형) - 최소 넓이 1751px */
@media only screen and (min-width: 1751px) {

	/* 미디어 쿼리(반응형) - 최대 높이 900px */
	@media only screen and (max-height: 900px) {


		.content-wrap .title-monitor { top:10%;  margin:0 auto 30px auto; width:350px; height:299px; background-size:350px 299px;}
		.content-wrap .title-monitor .sub_imgbox { width:279px; top:30px; margin-left:35px; }
		.content-wrap .title-monitor .sub_imgbox2 { width:279px; top:30px; margin-left:35px;}
		.content-wrap .title-monitor img { width:100%; }


		.content-wrap .title-data .brand-name { font-size: 40px; line-height:40px; }

		.content-wrap .sub-info .txt { font-size:14px; line-height:25px; padding-top:20px;}

		.content-wrap .title-data { bottom:3%; }
		.content-wrap .title-data .line { bottom:130px; }
		.content-wrap .title-wrap:hover .line {bottom:270px;}

		.content-wrap .btn-view {bottom:-165px; margin-top:10px;}


	}
	/* 미디어 쿼리(반응형) - 최대 높이 800px */
	@media only screen and (max-height: 800px) {

		.header { top:30px; width:200px; margin-left:-100px; }
		.header img { width:100%; }
		.copy {padding-bottom:30px;}

		.content-wrap .title-data { bottom:2%; }
		.cl-effect-7 a {font-size:15px;}

		.content-wrap .btn-view {bottom:-160px;}

	}

}


/* 미디어 쿼리(반응형) - 최대 넓이 1750px */
@media only screen and (max-width: 1750px) {

	.content-wrap .btn-view {bottom:-190px;}

	/* 미디어 쿼리(반응형) - 최대 높이 900px */
	@media only screen and (max-height: 900px) {


		.content-wrap .title-monitor { top:10%;  margin:0 auto 30px auto; width:350px; height:299px; background-size:350px 299px;}
		.content-wrap .title-monitor .sub_imgbox { width:279px; top:30px; margin-left:35px; }
		.content-wrap .title-monitor .sub_imgbox2 { width:279px; top:30px; margin-left:35px;}
		.content-wrap .title-monitor img { width:100%; }

		.content-wrap .title-data .brand-name { font-size: 40px; line-height:40px; }

		.content-wrap .sub-info .txt { font-size:14px; line-height:25px; padding-top:40px;}

		.content-wrap .title-data { bottom:3%; }
		.content-wrap .title-data .line { bottom:130px; }
		.content-wrap .title-wrap:hover .line {bottom:270px;}

		.content-wrap .sub-info .txt {padding-top:20px;}

		.content-wrap .btn-view {bottom:-165px; margin-top:10px;}

	}
	/* 미디어 쿼리(반응형) - 최대 높이 800px */
	@media only screen and (max-height: 800px) {

		.header { top:30px; width:200px; margin-left:-100px; }
		.header img { width:100%; }
		.copy {padding-bottom:30px; }

		.content-wrap .title-data { bottom:2%; }
		.cl-effect-7 a {font-size:15px;}
		.content-wrap .btn-view {bottom:-160px;}

	}


}


/* 미디어 쿼리(반응형) - 최대 넓이 1670px */
@media only screen and (max-width: 1670px) {

	/* 사이트 공통 - 모니터 부분 */
	.content-wrap .title-monitor { top:-410px;  margin:0 auto 30px auto; width:350px; height:299px; background-size:350px 299px;}
	.content-wrap .title-monitor .sub_imgbox { width:279px; top:30px; margin-left:35px; }
	.content-wrap .title-monitor .sub_imgbox2 { width:279px; top:30px; margin-left:35px;}
	.content-wrap .title-monitor img { width:100%; }

	/* 사이트 명 */
	.content-wrap .title-data .brand-name { font-size: 40px; line-height:40px; }

	/* 사이트 상세설명 */
	.content-wrap .sub-info .txt { font-size:14px; line-height:25px; padding-top:40px;}


	/* 미디어 쿼리(반응형) - 최대 높이 900px */
	@media only screen and (max-height: 900px) {
		
		.title-wrap:hover > .title-monitor {top:10%;}

		.content-wrap .title-data { bottom:7%; }

		.content-wrap .title-data .line { bottom:130px; }
		.content-wrap .title-wrap:hover .line {bottom:270px;}
		.content-wrap .sub-info .txt {padding-top:20px;}

		.content-wrap .btn-view {bottom:-170px;}

	}

	/* 미디어 쿼리(반응형) - 최대 높이 800px */
	@media only screen and (max-height: 800px) {

		.header { top:30px; width:200px; margin-left:-100px; }
		.header img { width:100%; }
		.copy {padding-bottom:30px;}

		.title-wrap:hover > .title-monitor {top:7%;}
		.content-wrap .title-data { bottom:4%; }

	}

}


/* 미디어 쿼리(반응형) - 최대 넓이 1575px */
@media only screen and (max-width: 1575px) {


	/* 사이트 공통 - 모니터 부분 */

	.title-wrap:hover > .title-monitor {top:15%;}


	/* 사이트 상세설명 */
		.content-wrap .title-data { height:330px;}
		.content-wrap .sub-info .txt { padding-top:0px; }

		.content-wrap .title-data .line { bottom:80px; }
		.content-wrap .title-wrap:hover .line {bottom:220px;}

		.content-wrap .btn-view { bottom:-160px; }

		.content-wrap .title-data { bottom:150px; }

	/* 미디어 쿼리(반응형) - 최대 높이 900px */
	@media only screen and (max-height: 900px) {
		
		.title-wrap:hover > .title-monitor {top:10%;}

		.content-wrap .title-data { bottom:12%; }

	}

	/* 미디어 쿼리(반응형) - 최대 높이 800px */
	@media only screen and (max-height: 800px) {

		.header { top:30px; width:200px; margin-left:-100px; }
		.header img { width:100%; }

		.title-wrap:hover > .title-monitor {top:8%;}
		.content-wrap .title-data { bottom:11%; }

		.cl-effect-7 a {font-size:15px;}

		.copy { padding-bottom:30px; }

		

	}

}


/* 미디어 쿼리(반응형) - 최대 넓이 1419px */
@media only screen and (max-width: 1419px) {

	.content-wrap .title-monitor {  width:300px; height:256px; background-size:300px 256px;}
	.content-wrap .title-monitor .sub_imgbox { width:239px; top:25px; margin-left:30px; }
	.content-wrap .title-monitor .sub_imgbox2 { width:239px; top:25px; margin-left:30px;}

	/* 사이트 상세설명 */
	.content-wrap .title-data {width:calc(100% - 50px); left:25px;}


	/* 미디어 쿼리(반응형) - 최대 높이 900px */
	@media only screen and (max-height: 900px) {
		
		.title-wrap:hover > .title-monitor {top:15%;}

		.content-wrap .title-data { bottom:17%; }

	}

	/* 미디어 쿼리(반응형) - 최대 높이 800px */
	@media only screen and (max-height: 800px) {


		.title-wrap:hover > .title-monitor {top:11%;}
		.content-wrap .title-data { bottom:11%; }



		

	}


}

/* 미디어 쿼리(반응형) - 최대 넓이 1220px */
@media only screen and (max-width: 1220px) {

	.content-wrap .title-monitor {  width:250px; height:213px; background-size:250px 213px;}
	.content-wrap .title-monitor .sub_imgbox { width:199px; top:20px; margin-left:25px; }
	.content-wrap .title-monitor .sub_imgbox2 { width:199px; top:20px; margin-left:25px;}

	.content-wrap .title-data .brand-name { font-size:35px; line-height:35px;}
	.content-wrap .title-data .line { bottom:80px; }
	.content-wrap .title-wrap:hover .line {bottom:220px;}

	.content-wrap .btn-view { bottom:-195px; }


		/* 미디어 쿼리(반응형) - 최대 높이 900px */
		@media only screen and (max-height: 900px) {
			
			.content-wrap .btn-view { bottom:-200px; }

		}

		/* 미디어 쿼리(반응형) - 최대 높이 800px */
		@media only screen and (max-height: 800px) {


			.title-wrap:hover > .title-monitor {top:15%;}
			.content-wrap .title-data { bottom:15%; }



			

		}

}

/* 미디어 쿼리(반응형) - 최대 높이 768px */
		@media only screen and (max-height: 768px) {


		.title-monitor{ display:none !important; }

}