/*main.css */
#headBox { width: 100%; height: 134px; padding-top: 20px; box-sizing: border-box; border-bottom: 1px solid #ddd; }

.headarea { position: relative; z-index: 100; width: 100%; height: 64px; padding-left: 20px; box-sizing: border-box; margin-bottom: 10px; }

h1 { float: left; width: 100px; height: 50px; margin-right: 10px; }

h1 a { display: block; width: 100%; height: 100%; background: url("../../img/big_portfolio-01.png") no-repeat 50% 50%/contain; }

h1 a:hover { outline: 0; transform: scale(1.1); }

.search { position: absolute; z-index: 100; left: 130px; top: 0; float: left; width: 500px; height: 40px; margin-top: 8px; margin-left: 20px; border: 1px solid #ddd; border-radius: 20px; background-color: #fff; transition: height 500ms ease; }

.search.action { height: 300px; cursor: pointer; box-shadow: 0 0 3px #ddd; }

.searchtext { float: left; margin-left: 4%; line-height: 40px; }

.searchtext > p { font-weight: bold; }

.searchlist { display: none; width: 100%; height: auto; margin-top: 10px; }

.searchlist li { width: 100%; height: auto; margin-top: 2px; line-height: 30px; }

.searchlogo { float: right; width: 10%; height: 100%; line-height: 40px; text-align: center; }

.searchlogo.action { font-size: 1.3rem; }

.gnb { width: 100%; height: 40px; /* background-color: #f0f0f0; box-shadow: 0 0 15px #ddd inset; */ }

.gnb ul { width: 100%; min-width: 1000px; height: 100%; /* &:before{content: " ";  position:absolute; left: 0; display: block; width: 100%; height: auto; border-top: $border; } */ }

.gnb ul li { float: left; width: auto; height: 100%; margin-right: 10px; }

.gnb ul li:first-child { margin-left: 140px; }

.gnb ul li a { display: block; width: auto; height: 40px; line-height: 40px; padding: 0 30px; }

.gnb ul li a:hover { font-weight: bold; color: #5479BC; }

.gnb ul li a:focus { font-weight: bold; color: #333; outline: none; font-size: 1.1rem; }

#footBox { width: 100%; height: 150px; margin-top: 100px; background-color: #f0f0f0; }

#footBox .footlink { width: 100%; height: 100px; text-align: center; padding-top: 40px; box-sizing: border-box; }

#footBox .footlink li { display: inline-block; position: relative; width: auto; height: auto; padding: 0 10px; margin-right: 0; box-sizing: border-box; }

#footBox .footlink li:after, #footBox .footlink li::after { content: " "; display: block; position: absolute; right: -3px; top: 0; bottom: 0; margin: auto; width: 0; height: 12px; border-right: 2px solid #999; }

#footBox .footlink li:last-child:after { display: none; }

#footBox .footlink li a { display: block; width: 100%; height: 100%; }

#footBox p { text-align: center; }

.gnb li:nth-child(2) a { font-weight: bold; color: #5479BC; }

.gnb li:nth-child(2):after { content: " "; display: block; width: 100%; height: 4px; background-color: #5479BC; margin-top: -3px; }

#contentBox { width: 100%; min-width: 1400px; height: auto; min-height: 800px; background-color: #fff; }

#information { float: left; width: 60%; height: 1000px; }

#related { width: 100%; height: 80px; }

#related:after { content: " "; display: block; width: 86%; height: 80px; border-bottom: 1px solid #ddd; margin-left: 10%; }

#related > p { float: left; margin-left: 140px; width: 130px; height: 100%; line-height: 50px; text-align: center; font-weight: bold; }

#related > ul { float: left; overflow: hidden; width: 65%; height: 78px; padding-top: 10px; box-sizing: border-box; }

#related > ul li { float: left; width: auto; height: auto; margin-right: 20px; color: #00C; font-size: 0.9rem; line-height: 30px; }

#resume { width: 100%; height: 350px; margin: auto; background-color: #fff; }

#resume:after { content: " "; display: block; margin-left: 10%; width: 86%; height: 280px; border-bottom: 1px solid #ddd; }

#resume > p { width: 100%; height: 30px; margin: 20px 0 10px; margin-left: 15%; font-size: 1.2rem; font-weight: bold; line-height: 30px; }

#resume .resume_area { width: 100%; height: auto; }

#resume .resume_area .pic { float: left; width: 170px; height: 220px; margin-left: 15%; background: url("../../img/resumePic.jpg") no-repeat 50% 50%/contain; }

#resume .resume_area .pic:hover { background-size: 105% auto; }

#resume .resume_area .persinfo { float: left; margin-left: 40px; width: 60%; height: 200px; }

#resume .resume_area .persinfo dl { width: 100%; height: 30px; }

#resume .resume_area .persinfo dl:nth-of-type(1) { height: 40px; margin-bottom: 5px; }

#resume .resume_area .persinfo dl:nth-of-type(1) dt { font-size: 1.48rem; width: 16%; color: #00c; }

#resume .resume_area .persinfo dl:nth-of-type(1) dd { font-size: 1.2rem; line-height: 2; }

#resume .resume_area .persinfo dl dt { float: left; width: 15%; font-weight: bold; }

#resume .resume_area .persinfo dl dd { float: left; }

#resume .resume_area .persinfo dl dd em { font-style: normal; font-size: 13px; font-weight: bold; }

.hdtext { position: relative; z-index: -10; }

#copy { position: absolute; border: none; }

.copy { margin-left: 10px; border: 1px solid #ddd; font-size: 0.7rem; border-radius: 5px; background-color: #777; overflow: hidden; color: #fff; }

.copy a { display: block; width: 100%; height: auto; padding: 2px 5px; color: inherit; }

.copy a:hover, .copy a:focus { background-color: #5479BC; }

.copy a:active { background-color: #f00; }

#studyinfo { width: 100%; height: auto; margin: auto; }

#studyinfo:after { content: " "; display: block; margin-left: 10%; width: 86%; height: 50px; border-bottom: 1px solid #ddd; }

#studyinfo .studylink { width: 100%; height: 32px; margin-left: 15%; }

#studyinfo .studylink li { float: left; width: auto; height: 30px; border: 1px solid #ddd; line-height: 30px; background-color: #f0f0f0; }

#studyinfo .studylink li.action { background-color: #777; color: #fff; font-weight: bold; }

#studyinfo .studylink li a { display: block; padding: 0 18px; color: inherit; }

#studyinfo .infoconts { width: 100%; height: auto; margin-left: 15%; margin-top: 15px; }

#studyinfo .infoconts dl { width: 100%; height: auto; margin-top: 15px; margin-left: 10px; }

#studyinfo .infoconts dl dt { font-size: 1.5rem; color: #5479BC; font-weight: bold; margin-bottom: 5px; }

#studyinfo .infoconts dl dt em { font-style: normal; font-size: 1rem; }

#studyinfo .infoconts dl dd { text-indent: 20px; text-transform: capitalize; }

.studyconts { display: none; }

.educonts { display: none; }

.prizelink { width: 100%; height: 32px; margin-top: 50px; margin-left: 15%; }

.prizelink li { float: left; width: auto; height: 30px; border: 1px solid #ddd; line-height: 30px; background-color: #f0f0f0; }

.prizelink li.action { background-color: #777; color: #fff; font-weight: bold; }

.prizelink li a { display: block; padding: 0 18px; color: inherit; }

#ability { float: left; width: 40%; height: 1000px; margin: 20px 0; border-left: 1px solid #ddd; box-sizing: border-box; }

.abilityLink { width: 100%; height: 30px; margin-bottom: 20px; }

.abilityLink li { float: left; width: auto; height: 30px; border: 1px solid #ddd; line-height: 30px; background-color: #f0f0f0; }

.abilityLink li:first-child { margin-left: 20px; }

.abilityLink li.action { background-color: #777; color: #fff; font-weight: bold; }

.abilityLink li a { display: block; padding: 0 18px; color: inherit; }

.prizeconts { width: 100%; height: auto; margin-left: 15%; margin-top: 15px; }

.prizeconts dl { width: 50%; height: 30px; line-height: 30px; margin-top: 15px; margin-left: 10px; }

.prizeconts dl dt { float: left; font-size: 1.1rem; margin-bottom: 5px; }

.prizeconts dl dd { float: left; text-indent: 20px; font-size: 0.9rem; }

.prizeconts dl dd em { font-style: normal; font-size: 1rem; font-weight: bold; }

.award { display: none; }

.compcan { width: 35%; height: 400px; margin-left: 30px; }

.compcan ul { width: 100%; height: auto; }

.compcan ul li { position: relative; width: 100%; height: 50px; margin-bottom: 10px; }

.compcan ul li > div { float: left; width: 20%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }

.compcan ul li dl { float: left; width: 80%; }

.compcan ul li dl dt { margin-left: 10px; width: 100%; height: 25px; line-height: 25px; font-weight: bold; text-transform: uppercase; font-size: 0.9rem; }

.compcan ul li dl dd { margin-left: 10px; width: 90%; height: 20px; background-color: #ddd; }

.compcan ul li dl dd span { display: block; width: 0; height: 100%; background-color: #5479BC; text-align: right; /* transition: width 2000ms ease; */ }

.compcan ul li dl dd em { position: absolute; right: 15px; bottom: 0; z-index: 5; font-style: normal; font-size: 0.9rem; line-height: 32px; }

.compcan ul li.dif { margin-bottom: 40px; }

.language { display: none; width: 35%; height: 400px; margin-left: 30px; }

.language ul { width: 100%; height: auto; }

.language ul li { position: relative; width: 100%; height: 50px; margin-bottom: 10px; }

.language ul li > div { float: left; width: 20%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }

.language ul li dl { float: left; width: 80%; }

.language ul li dl dt { margin-left: 10px; width: 100%; height: 25px; line-height: 25px; font-weight: bold; text-transform: uppercase; font-size: 0.9rem; }

.language ul li dl dd { margin-left: 10px; width: 90%; height: 20px; background-color: #ddd; }

.language ul li dl dd span { display: block; width: 0; height: 100%; background-color: #5479BC; text-align: right; /* transition: width 2000ms ease; */ }

.language ul li dl dd em { position: absolute; right: 15px; bottom: 0; z-index: 5; font-style: normal; font-size: 0.9rem; line-height: 32px; }

/* PC 1280px~1919px (1024) h:800=============== */
/* media screen and (min-width: 1280px) */
@media screen and (min-width: 1280px) and (max-width: 1919px) { #resume .resume_area .persinfo { margin-left: 5%; width: 55%; height: 200px; }
  #resume .resume_area .persinfo dl:nth-of-type(1) dt { width: 20%; }
  #resume .resume_area .persinfo dl:nth-of-type(1) dt dt { width: 30%; }
  #resume .resume_area .persinfo dl:nth-of-type(1) dt dd { width: 70%; } }