@charset "utf-8";

body {background:#121212; overflow:hidden;}
/*BG*/
#conMain {background:url('/img/main/mainBg.jpg') no-repeat;}
/*#conPhilosopy { background: url('/img/main/philosopyBg.jpg') no-repeat; }*/
#conMain {display:block; overflow:hidden; position:relative; text-align:left;}
#conMain .titBox {width:100%; margin:0 auto;}
#conMain .leftTxt .mainslogan{font-size: 75px;}
#conMain .leftTxt .slogantxt .tit::before {position:absolute; left:0; bottom:0; content:''; width:242px; height:1px; background:#fff;}
.colorslogan .txt1 { color: #6cbddf; }
.colorslogan .txt2 { color: #29d2c0; }
/* earthBoxWrap */
.earthBoxWrap { position: absolute; top: 103px; right: 102px; width: 800px; height: 807px; }
.earthMotion { position: absolute; top: 0; left: 0; width: 800px; height: 807px; }
.earth-img { position: absolute; top: 0; left: 0; width: 800px; height: 807px; -webkit-animation: rotateMotion3 70s infinite; animation: rotateMotion3 70s infinite; }
.earthBoxWrap .earth-img ~ div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.earthFront { background: url('/img/main/e_lineFront.png') 50% 50% no-repeat; -webkit-animation: rotateMotion 80s infinite; animation: rotateMotion 80s infinite; }
.earthBack { background: url('/img/main/e_lineBack.png') 50% 50% no-repeat; -webkit-animation: rotateMotion2 90s infinite; animation: rotateMotion2 90s infinite; }
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.earthGroup li { position: absolute; width: 120px; height: 120px; color: #fff; text-align: center; line-height: 1.2rem; }
.earthGroup li p {font-size:1.3rem; font-weight:600;}
.earthGroup li span {display:block; margin-top:5px; font-size:.9rem; font-weight:200; line-height:1.2rem;}
.earthGroup .circle { display: flex; position: absolute; right: 0; bottom: 0; align-items: center; justify-content: center; width: 163px; height: 163px; border-radius: 100%; background:rgba(255,255,255,.33); transition: width .3s, height .3s, font-size .3s; box-shadow:0 0 15px rgba(0,0,0,1); }
.earthGroup .group { display: none; }
.earthGroup .circle a { transition:.3s all; color: #fff; font-size: 1.5em; font-weight:600; }
.earthGroup > li:hover .circle { width: 199px; height: 199px; background: #47b4a1; font-size: 1.7em; }
.earthGroup > li:hover .circle p { font-size: 2em; }
.earthGroup > li:hover .group { display: block; }
.earthGroup > li:hover .default_group { display: none; }
.earthGroup .item01 { top: 0; left: 50%; }
.earthGroup .item02 { top: 45%; right: -50px; }
.earthGroup .item03 { right: 10%; bottom: 0; }
.earthGroup .item04 { left: 100px; bottom: 0; }
.earthGroup .item05 { left: 0; top: 45%; }

@keyframes rotateMotion {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	50% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
	100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@-webkit-keyframes rotateMotion {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	50% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
	100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@keyframes rotateMotion2 {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	50% { -webkit-transform: rotate(260deg); transform: rotate(260deg); }
	100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@-webkit-keyframes rotateMotion2 {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	50% { -webkit-transform: rotate(260deg); transform: rotate(260deg); }
	100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@keyframes rotateMotion3 {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
	50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	75% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
	100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@-webkit-keyframes rotateMotion3 {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
	50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	75% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
	100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
/*only PC ver.*/
@media screen and (max-width:1920px){
	.earthBoxWrap {top:103px; right:10%}
}
@media screen and (max-width:1919px) and (min-width:1830px) {
	.earthBoxWrap {top:103px; right:9%;}
}
@media screen and (max-width:1860px) {
	.earthBoxWrap {top:107px; right:106px;}
}
@media screen and (max-width: 1740px) {
	#conMain .leftTxt .mainslogan{font-size: 66px;}
	/* earth-menu */
	.earthBoxWrap { top: 89px; right: 0; }
	.earthMotion { transition: all .3s ease; transform: scale(.7); }
	.earthGroup li { width: 130px; height: 130px; }
	.earthGroup .item01 { top: 50px; left: 38%; }
	.earthGroup .item02 { top: 90px; right: 170px; left: auto; }
	.earthGroup .item03 { top: 260px; right: 70px; }
	.earthGroup .item04 { right: 90px; bottom: 177px; left:auto; }
	.earthGroup .item05 { right: 327px; bottom: 58px; left: auto; top:auto; }
	.earthGroup .circle { width: 130px; height: 130px; }
	.earthGroup li p {font-size:1rem;}
	.earthGroup > li:hover .circle { width: 156px; height: 156px; font-size: 1.412rem; }
	.earthGroup > li .circle a {font-size: 1.412rem; }
}
@media screen and (max-width:1640px) and (min-width:1301px) {
	#fixMain>#container .contents {background-position-x:47%;}
}
@media screen and (max-width:1366px) and (min-width:768px) and (orientation: landscape) {
	#fixMain>#container .contents {background-position-x:59%;}
	/*earthBoxWrap*/
	.earthBoxWrap { top: 10%; right:-44px; }
	.earthMotion { transform: scale(.65) translateX(0%); }
	.earthGroup .item01 { top: 163px; left: auto; right:118px; }
	.earthGroup .item02 { top: 53%; right: 80px; }
	.earthGroup .item03 { top: auto; right: auto; left:41%; bottom:8%; }
	.earthGroup .item04 { right: auto; left: 11%; }
	.earthGroup .item05 { right: auto; bottom: 50%; left: 5%; }
}
@media screen and (max-width: 1279px) {
	#fixMain>#container .contents {background-position-x:72%;}
}
@media screen and (min-width:1301px) {
	#conMain .titBox {width:95%;}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
	#fixMain>#container .contents {background-position-x:90%;}
	/*earthBoxWrap*/
	.earthBoxWrap { top: 191px; right:29px; }
	.earthMotion { transform: scale(.65) translateX(-29%); }
	.earthBack, .earthFront {background-size:70% !important;}
	.earthGroup li { width: 100px; height: 100px; }
	.earthGroup .circle { width: 100px; height: 100px; font-size: 0.823rem; }
	.earthGroup li p {font-size:.7rem;}
	.earthGroup li span {font-size:.542rem;}
	.earthGroup > li .circle a {font-size: 1.412rem; }
}
@media screen and (max-width: 1000px) {
	#conMain {background-position-x:87% !important;}
	/*earthBoxWrap*/
	.earthBoxWrap { position: relative; top: 0; right: auto; width: 500px; height: 500px; margin: 0 auto; }
	.earthMotion { width: 800px; height: 440px; transform: scale(.45) translateX(-45%); }
	.earth-img { width: 800px; height: 440px; }
	.earthBack, .earthFront {background-size:55% !important;}
	.earthGroup .item01 { top: 80px; left: 40px; }
	.earthGroup .item02 { top: 80px; right: 40px; left: auto; }
	.earthGroup .item03 { top: 250px; right: 50px; }
	.earthGroup .item04 { right: auto; bottom: 50px; left:40%; }
	.earthGroup .item05 { right: auto; bottom: 150px; left: 22px; }
}
@media screen and (max-width:1300px) {
	#conMain .leftTxt .mainslogan { font-size: 55px; line-height: 150%; }	
	#conMain .leftTxt .slogantxt .tit::before {width:214px;}
}
/*only MOBILE ver.*/
@media screen and (max-width:900px) {
	#conMain { background: none; }
	#conMain .leftTxt .mainslogan { font-size: 35px; line-height: 120%; }
	/*earthBoxWrap*/
	.earthBoxWrap { position: relative; top: 0; right: auto; width: 500px; height: 500px; margin: 0 auto; }
	.earthMotion { width: 800px; height: 440px; transform: scale(.45) translateX(-45%); }
	.earth-img { width: 800px; height: 440px; }
	.earthBack, .earthFront {background-size:55% !important;}
	.earthGroup .item01 { top: 80px; left: 40px; }
	.earthGroup .item02 { top: 80px; right: 40px; left: auto; }
	.earthGroup .item03 { top: 250px; right: 50px; }
	.earthGroup .item04 { right: auto; bottom: 50px; left:40%; }
	.earthGroup .item05 { right: auto; bottom: 150px; left: 22px; }
	.earthGroup li p {font-size:.7rem;}
	.earthGroup li span {font-size:.542rem; line-height:15px !important;}
	.earthGroup > li .circle a {font-size: 1.412rem; }
}
@media screen and (max-width: 767px) {
	.earthBack, .earthFront {background-size:30% !important;}
	/*earthBoxWrap*/
	.earthBoxWrap {width:400px;}
	.earthMotion { transform: scale(.35) translateX(-75%); }
	.earthGroup li { width: 100px; height: 100px; }
	.earthGroup .circle { width: 100px; height: 100px; font-size: 0.823rem; }
	.earthGroup > li .circle a {font-size: 1rem; }
	.earthGroup > li:hover .circle { width: 120px; height: 120px; font-size: 1.412rem; }
	.earthGroup .item03, .earthGroup .item05 { top: 228px; bottom:auto; }
	.earthGroup .item04 { left:33%; bottom:80px; }
}
@media screen and (max-width:700px) {
	.earthBack, .earthFront {background-size:30% !important;}
}
@media screen and (max-width:480px) {
	#conMain .leftTxt .mainslogan {font-size:1.415rem; margin:10px auto;}
	#conMain .leftTxt .slogantxt .tit::before {width:155px;}
	/*earthBoxWrap*/
	.earthBoxWrap { top: -73px; }
	.earthGroup .item01, .earthGroup .item02 { top: 100px; }
	.earthGroup .item04 {bottom:100px; }
}