@charset "utf-8";
/*layout_setting*/
@media all and (min-width:1290px) {
	body {min-width:1400px;}
}
/*pc*/
@media all and (min-width:801px) {
	body {min-width:1024px;}
}

#visual {position:relative; height:643px; background:url('/yglec/img/main/visual.jpg') no-repeat center top;}
#visual p {color:#fff; text-shadow:1px 0 rgba(0,0,0,.17), 0 -1px rgba(0,0,0,.17), 1px 0 rgba(0,0,0,.17), 0 1px rgba(0,0,0,.17);}
#visual p.eng {padding-top:110px; font-size:18px; font-weight:bold; letter-spacing:-0.01em;}
#visual p.tit {margin:20px 0 55px; font-size:48px; font-weight:bold; letter-spacing:-0.075em;}
#visual p.txt {font-size:17px; letter-spacing:-0.025em;}
#visual a.more {display:inline-block; margin-top:50px; padding:15px 30px; border:1px solid #fff; color:#fff; font-size:16px; font-weight:bold;}

#pZone {position:absolute; left:51%; bottom:35px; width:628px;}
#pZone ul {text-align:center; width:100%; font-size:0; line-height:0;}
#pZone li {display:inline-block; padding-top:30%; margin-left:13px;}
#pZone li:first-child {margin-left:0;}
#pZone .bl {position:relative; width:20px; height:20px; border-radius:50%; border:4px solid #fff; z-index:10;}
#pZone .select .bl {border:0; background:#166cc2;}
#pZone .img {display:none; position:absolute; bottom:0; right:0; border:1px solid rgba(0,0,0,.1);}
#pZone .select .img  {display:block;}
#pZone .img img {vertical-align:top;}

#contents {padding-top:90px; padding-bottom:90px;}
#contents>div {overflow:hidden;}
#contents>div.bCon {margin-top:50px;}
#contents>div>div {position:relative; float:left; width:49%;}
#contents>div>div:nth-of-type(2) {float:right;}
#contents h3 {font-size:25px; letter-spacing:-0.05em; font-weight:bold;}
#contents .more {position:absolute; right:0; top:5px; font-size:16px; letter-spacing:-0.05em; font-weight:bold;}

#edu h4 {position:absolute; top:5px; width:90px;}
#edu>div:nth-of-type(6) h4 {right:0;}
#edu>div:nth-of-type(5) h4 {right:82px;}
#edu>div:nth-of-type(4) h4 {right:128px;}
#edu>div:nth-of-type(3) h4 {right:222px;}
#edu>div:nth-of-type(2) h4 {right:315px;}
#edu>div:nth-of-type(1) h4 {right:408px;}
#edu h4>a {display:block; text-align:center; padding:3px 0; font-weight:normal; border:1px solid #c7c5c5; border-radius:50px;}
#edu .on h4>a {position:relative; font-weight:bold; color:#fff; border-color:#166cc2; background:#166cc2;}
#edu .on h4>a:after {display:block; content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; margin-left:-3px; background:#166cc2; transform:rotate(45deg);}
#edu dl {display:none; position:relative; height:280px; margin-top:20px; padding:15px 10px 38px 18px; background:url('/yglec/img/main/edu_bg02.gif') no-repeat right bottom;}
#edu dl:before {display:block; content:""; position:absolute; left:0; top:0; width:45%; height:100%; background:#166cc2; z-index:0;}
#edu .on dl {display:block;}
#edu dl dt, #edu dl dd {position:relative; z-index:10;}
#edu dl dt {color:#fff; font-size:28px; font-weight:bold; letter-spacing:-0.05em;}
#edu dl dd p {width:40%; margin-top:10px; font-size:14px; line-height:20px; margin-left:2px; color:#fff;}
#edu dl dd ul.edu_list {position:absolute; left:47%; top:-55px; letter-spacing:-0.025em;}
#edu dl dd a {display:inline-block; margin-top:15px; padding:5px 15px; color:#033333; border-radius:50px; background:#fff;}
#edu dl dd ul li.blet {position:relative; padding-left:10px;} 
#edu dl dd ul li.blet:before{content:''; position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:50%; background-color:#484848;}

#notice ul {margin-top:20px; padding-top:10px; border-top:2px solid #000;}
#notice ul li {position:relative; padding:10px 15px; letter-spacing:-0.025em; border-bottom:1px dotted #9b9b9b;}
#notice ul li:last-child {border-bottom:0;}
#notice ul li:before {display:block; content:""; position:absolute; left:3px; top:20px; width:5px; height:5px; border-radius:50%; background:#000;}
#notice ul li a {display:block; margin-right:100px; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#notice ul li span {position:absolute; right:0; top:10px; color:#666;}

#service ul {overflow:hidden; margin-top:15px; border:1px solid #ddd;}
#service ul>li {float:left; width:50%; text-align:center;}
#service ul>li:last-child {border-left:1px solid #ddd;}
#service ul>li a {display:block; padding:115px 20px 31px;}
#service ul>li a.location {background:url('/yglec/img/main/ic_location.gif') no-repeat center 50px;}
#service ul>li a.application {background:url('/yglec/img/main/ic_application.gif') no-repeat center 50px;}
#service ul>li a .tit {font-size:20px; font-weight:bold;}
#service ul>li a .txt {font-size:14px; color:#9f9f9f;}

#participation ul {overflow:hidden; margin-top:15px; }
#participation ul li {float:left; width:48.5%; height:200px;}
#participation ul li img {width:100%; min-height:100%;}
#participation ul li:nth-of-type(2) {float:right;}


/*minpc이후*/
@media all and (max-width:1289px) {
	#visual>div.wrap {padding:0 40px;}
	#edu h4 {width:16.5%;}
	#edu>div:nth-of-type(6) h4 {right:0;}
	#edu>div:nth-of-type(5) h4 {right:16.5%;}
	#edu>div:nth-of-type(4) h4 {right:33%;}
	#edu>div:nth-of-type(3) h4 {right:49.5%;}
	#edu>div:nth-of-type(2) h4 {right:66%;}
	#edu>div:nth-of-type(1) h4 {right:82.5%;}
	#edu h4 a {margin:0 1px;}
	#edu dl {padding-top:30px; background-size:100%; height:auto; /*background-image:none;*/}
	#edu dl:before {width:100%; background:rgba(22,108,194,.8);}
	#edu dl dd {text-align:center;}
	#edu dl dd p {text-align:left; width:100%; max-width:300px; margin-top:10px;}
	#edu dl dd ul {text-align:left; position:static; margin-top:10px;}
	#edu dl dd ul li {color:#fff;}
	#edu dl dd a {margin-top:15px;} 
	#pZone {left:auto; right:40px;}
	#contents {padding:50px 40px;}
}

/*only_minpc*/
@media all and (max-width:1289px) and (min-width:801px) {
	#edu {padding-top:40px;}
	#edu h3 {display:none;}
}


/*tablet이하*/
@media screen and (max-width:800px) {
	#visual {text-align:center; height:auto;}
	#visual>div.wrap {padding:0 5%;}
	#visual p.eng {padding-top:70px; font-size:16px;}
	#visual p.tit {margin:0 0 10px; font-size:40px;}
	#visual p.txt {font-size:15px;}
	#visual p.txt br {display:none;}
	#visual a.more {margin-top:20px; padding:8px 30px;}

	#contents {padding:50px 5%;}
	#contents>div>div {float:none !important; width:100%;}

	#edu {text-align:center;}
	#edu h4 {top:45px;}
	#edu h4 a {margin:0 2px;}
	#edu dl {margin-top:50px;}
	#edu dl dd p, #edu dl dd ul {text-align:center;}
	#edu dl dd p {margin:0 auto;}

	#pZone {position:relative; right:auto; bottom:auto; width:auto; max-width:628px; margin:40px auto 0;}
	#pZone .img img {width:100%;}

	#service h3 {display:none;}
	
	#notice, #contents>div.bCon, #participation {margin-top:25px;}

	#edu dl dd ul li.blet:before{display:none;}
	#edu dl dd ul.edu_list {position:relative; left:0; top:0;}
}


/*tablet이하*/
@media screen and (max-width:800px) and (min-width:480px) {
	#service ul>li a {display:inline-block; text-align:left; padding:50px 0 50px 80px; background-position:left center !important;}
	#service ul>li a span {display:none;}
}

/*mobile*/
@media screen and (max-width:640px) {
	#notice ul li a {margin-right:0;}
	#notice ul li span {display:none;}
	#participation ul li { height:130px;}
}