@charset "utf-8";


a, a:hover, a:focus, a:active {text-decoration: none;}
#container_main h4 {font-size: 25px; color: #111;}
.o-hidden {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}


section.sec01 {width: 100%; height: 700px; background: url(../../images/kr/main/sec01_bg.png) no-repeat; background-size: cover;}
section.sec01 div.inner {padding-top: 80px; display: flex; justify-content: space-between;}
section.sec01 div.inner > div {vertical-align: top;}
section.sec01 div.unit {width : 352px;}
.sec01 .right {width: 24.75%;}
.sec01 .inner:after {display: none;}



#visual {width: 70.625%; position: relative; box-shadow: 0 0 10px 2px #0000002b; border-radius: 20px; height: 528px;}
#visual div.list-wrap {}
#visual div.list-wrap div.list {border-radius: 20px; overflow: hidden;}
#visual div.list-wrap div.list a {display: block;}
#visual div.list-wrap div.list img {width: 100%; height: 528px;}
#visual div.txt-wrap {position: absolute; top: 80px; left: 80px;}
#visual div.txt-wrap p.txt {font-family: 'Noto Sans KR'; font-size: 55px; color: #333;
-webkit-text-stroke: 3px #ffffff;
paint-order: stroke fill; line-height: 70px;}
#visual div.txt-wrap p.txt span.blue {color: #4f95da; font-size: 65px;}
#visual div.txt-wrap p.txt span.red {color: #d34949; font-size: 65px;}
#visual div.txt-wrap p.txt span.block {display: block;}
#visual div.control {width: 163px; border-radius: 30px; height: 50px; background: #0000009e; position: absolute; bottom: -23px; right: 37px; color: #fff; font-weight: 600;}
#visual div.control div.page {line-height: 50px; padding: 0px 10px 0 25px; display: inline-block;}
#visual div.control div.page span{}
#visual div.control div.page span.current {}
#visual div.control div.page span.bar {width: 10px; height: 1px; display: inline-block; background: #fff; vertical-align: middle; margin: 0 5px;}
#visual div.control div.btns {display: inline-block; vertical-align: middle;}
#visual div.control div.btns button {font-size: 0; width: 20px; height: 20px; background: url(../../images/kr/main/sec01_icon.png) no-repeat 4px -304px;}
#visual div.control div.btns button.btn-next {background-position: -35px -304px;}
#visual div.control div.btns button.btn-stop {background-position: -15px -304px;}
#visual div.control div.btns button.btn-stop.on {background-position: -67px -304px;}


#chairman {position: relative; height: 295px; overflow: hidden;}
#chairman p.tit {color: #0c357c; font-family: 'Noto Sans KR'; font-weight: 900; position: relative; font-size: 21px; line-height: 26px;}
#chairman p.tit:before {content: ''; width: 125px; height: 1px; background: #0c357c; position: absolute; bottom: -10px; left: 0;}	
#chairman span.txt {margin-top: 30px; display: block; width: 190px; line-height: 24px; font-family: 'Noto Sans KR'; font-size: 18px;
 color: #333; font-weight: 600;}
#chairman span.pic {display: block; position: absolute; bottom: 30px; right: 0;}
#chairman span.pic img {}
#chairman div.btns {}
#chairman div.btns a {color: #fff; display: block; width: 100%; height: 100%; text-align: center; line-height: 62px;}
#chairman div.btns:hover {background: #975118;}
#chairman div.btns {height: 62px; background: #ba7238; position: absolute; bottom: 0; left: 0; right: 0; border-radius: 15px; font-family: 'score_200'; display: flex; justify-content: space-around; align-items: center;}
#chairman div.btns a {color: #fff;}
#chairman div.btns a:before {content:''; width: 26px; height: 26px; display: inline-block; background: url(../../images/kr/main/sec01_icon.png)no-repeat 0px -239px; vertical-align: middle; margin-right: 7px;}
#chairman div.btns a:hover {font-weight: 800;}
#chairman::after {content: ''; width: 29px; height: 32px; background: url(../../images/kr/main/chair_bg.png) no-repeat center; position: absolute; top: 80px; right: 150px;}


#member {height: 204px; box-sizing: border-box; margin-top: 28px; background: #b5cdff; border-radius: 15px; box-shadow: 0 0 10px 2px #0000002b; padding: 30px; position: relative;}
#member p.tit {font-family: 'Noto Sans KR'; font-weight: 900; font-size: 21px;}
#member span.txt {font-family: 'Noto Sans KR'; font-size: 17px; margin-top: 5px; display: block;}
#member a.more {background: #2163ee; color: #fff; font-size: 16px; font-family: 'Noto Sans KR'; padding: 7px 20px; border-radius: 25px; margin-top: 13px; display: inline-block; border: 1px solid #2163ee;}
#member a.more:hover {background: #fff; border: 1px solid #2163ee; color: #2163ee;}
#member:before {content: ''; width: 157px; height: 168px; background: url(../../images/en/main/member_bg.png) no-repeat center; position: absolute; bottom: 0; right: 0;}


#quick {padding: 80px 0 90px; display: flex;}
#quick div.inner {}
#quick div.tit-box {position: relative; width: 230px; display: inline-block; margin-right: 77px;}
#quick div.tit-box span.s-tit {font-size: 17px; color: #555; letter-spacing: 1.5px;}
#quick div.tit-box h4 {font-size: 33px; color: #2a2d44; margin: 5px 0 25px 0;}
#quick div.tit-box:before {content: ''; width: 29px; height: 32px; background: url(../../images/kr/main/chair_bg.png) no-repeat center; display: block; position: absolute; top: 3px; right: -30px;}
#quick div.tit-box:after {content: ''; width: 40px; height: 2px; background: #bdd1d9; position: absolute; bottom: 40px; left: 2px;}
#quick ul.quick-box {display: flex; vertical-align: top; width: calc(100% - 307px); justify-content: space-between;}
#quick ul.quick-box li {width: 23.28%; border: 3px solid #bdd1d9; border-radius: 10px; height: 131px; box-sizing: border-box;}
#quick ul.quick-box li a {display: flex; align-items: center; justify-content: flex-start;padding: 25px 30px; }
#quick ul.quick-box li a span {}
#quick ul.quick-box li a span.img {border-radius: 50%; width: 100px; height: 72px; display: block; font-size: 0; box-sizing: border-box;}
#quick ul.quick-box li a span.img:before {content: ''; width: 80px; height: 75px; background: url(../../images/en/main/quick_img.png) no-repeat 0px 0px; display: block; transition: 0.5s;}
#quick ul.quick-box li:nth-child(2) a span.img:before {background-position: -330px 0px;}
#quick ul.quick-box li:nth-child(3) a span.img:before {background-position: -665px 0px;}
#quick ul.quick-box li:nth-child(4) a span.img:before {background-position: -988px 0px;}
#quick ul.quick-box li:hover a span.img:before {animation:ani_bg 0.5s ease-in-out;}
@keyframes ani_bg{
	0%{transform:rotate(0);}
	20%{transform:rotate(-8deg);}
	40%{transform:rotate(8deg);}
	60%{transform:rotate(-8deg);}
	80%{transform:rotate(8deg);}
	100%{transform:rotate(0deg);}
}
#quick ul.quick-box li:hover a {font-weight: 700;}
#quick ul.quick-box li a span.txt {font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 900; color: #222;  margin-left: 10px;}




@media (max-width: 1600px) {
	.sec01 .right {width: 70.625%;display: flex; justify-content: space-between; margin: 50px auto 50px;}
	section.sec01 div.inner {flex-direction: column; flex-wrap: wrap;}
	section.sec01 {width: 100%;height: auto;}
	
	#visual {margin: auto; height: auto;}
	#visual div.list-wrap div.list img {height: 100%; object-fit: cover;}
	#visual div.txt-wrap p.txt span.blue,
	#visual div.txt-wrap p.txt span.red,
	#visual div.txt-wrap p.txt {font-size: 42px;}
	#visual div.txt-wrap p.txt {line-height: 54px;}
	
	#member,
	#chairman {width: 48%;}
	#chairman span.txt {width: 60%;}
	#member {height: 295px; vertical-align: top; margin-top: 0;}
	#member a.more {position: absolute; bottom: 30px; left: 30px;}

	#quick ul.quick-box li a span.txt {font-size: 18px; margin-left: 5px;}
	#quick ul.quick-box li a {padding: 25px 15px;}
}
@media (max-width: 1280px) {
    #visual,
    .sec01 .right {width: 90%;}

	#quick {flex-wrap: wrap;}
	#quick div.tit-box {width: 100%;}
	#quick div.tit-box:after {display: none;}
	#quick div.tit-box:before {right: auto; left: 225px;}
	#quick ul.quick-box {width: 100%;}
	#quick ul.quick-box li a span.block {display: block;}
	#quick ul.quick-box li a {justify-content: center;}
	#quick ul.quick-box li a span.img {width: 85px;}
}
@media (max-width: 1024px) {
	#container_main {margin-top: 0px;}
	
	section.sec01 div.inner {padding-top: 60px;}
	#quick ul.quick-box {flex-wrap: wrap;}
	#quick ul.quick-box li {margin-bottom: 20px; width: 49%;}
	#quick ul.quick-box li a span.block {display: inline-block;}
}
@media (max-width: 980px) {
	#visual div.txt-wrap {top: 50px; left: 60px;}
	#visual div.txt-wrap p.txt {font-size: 37px; line-height: 45px;}
    #visual div.txt-wrap p.txt span.blue, #visual div.txt-wrap p.txt span.red {font-size: 37px;}
}
@media (max-width: 768px) {
    #visual, .sec01 .right {width: 100%; flex-wrap: wrap;}
    #member, #chairman {width: 100%;}
    #chairman {margin-bottom: 40px;}
    #visual div.txt-wrap p.txt {font-size: 30px; line-height: 36px;}
    #visual div.txt-wrap p.txt span.blue, 
	#visual div.txt-wrap p.txt span.red {font-size: 30px;}
    #visual div.txt-wrap {top: 30px; left: 30px;}
	section.sec01 div.inner {padding-top: 50px;}
}
@media (max-width: 680px) {
	#quick ul.quick-box li a span.block {display: block;}
}
@media (max-width: 580px) {
	#quick ul.quick-box li a span.img:before {transform: scale(0.8);}
    #quick ul.quick-box li a span.img  {width: 70px;}
}
@media (max-width: 480px) {
    section.sec01 div.inner {padding-top: 35px;}
    .sec01 .right {margin: 35px auto 35px;}
	#visual div.txt-wrap p.txt {font-size: 20px; line-height: 23px;}
	
	#chairman span.txt {font-size: 16px;}
	#chairman p.tit {font-size: 19px; line-height: 22px;}
	#chairman span.pic img {width: 140px; height: 210px;}
	#chairman::after {top: 43px; right: 124px;}
	#chairman {height: 270px;}	
    
    #quick ul.quick-box li a {justify-content: left;}
	#quick ul.quick-box li a span.txt {font-size: 16px;}
    #quick ul.quick-box li a {padding: 25px 10px;}	
}
@media (max-width: 430px) {
    #quick ul.quick-box li {width: 100%;}
	#quick ul.quick-box li a span.block {display: inline-block;}
    #quick ul.quick-box li a {justify-content: center;}
	#quick ul.quick-box li a span.txt {margin: 0 15px 0 10px;}
	#quick div.tit-box h4 {font-size: 30px;}
}
@media (max-width: 380px) {
    #visual div.txt-wrap p.txt span.blue, 
	#visual div.txt-wrap p.txt span.red {font-size: 22px;}
    #visual div.txt-wrap {top: 20px; left: 20px;}
}