@charset "utf-8";

@font-face {
    font-family: 'Tenada';
    src: url('/fonts/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.text-red {color:#d3101a;}
.text-dark {color:#242424;}

.award-wrapper {padding-bottom:50px; color:#454545; font-size:17px; line-height:1.7em; letter-spacing:-.03em;}
.award-wrapper .contain {max-width:1500px; padding-left:50px; padding-right:50px;}
.award-wrapper .semibold {font-weight:600;}

.award-heading {position:relative; display:flex; align-items:center; height:100%; height:100vh; text-align:center; color:#fff; background:#6b1616 url("images/241212_top_img.jpg") 50% 50% no-repeat; background-size:cover;}
.award-heading .year {margin-bottom:10px;}
.award-heading .year svg {width:auto; height:95px;}
.award-heading h2 {font-family:'Tenada',sans-serif; font-size:100px; font-weight:400; line-height:1.1em; letter-spacing:-.02em; margin-bottom:10px;}
.award-heading p {font-size:18px; line-height:1.6em; letter-spacing:-.04em;}
.award-heading path {stroke-dasharray:1000; stroke-dashoffset:1000; animation:stroke 10s ease-out forwards;}
.award-heading line {stroke-dasharray:300; stroke-dashoffset:300; animation:stroke 3s 1s ease-out forwards;}

@keyframes stroke {
	to {
		stroke-dashoffset: 0;
	}
}

.award-title {margin-bottom:25px; color:#d3101a; font-size:50px; line-height:1.33em; letter-spacing:-.03em;}
.award-sub-title {margin-bottom:10px; color:#242424; font-size:26px; line-height:1.33em; letter-spacing:-.03em;}

.award-winner {padding:110px 0; overflow:hidden; background:#f4f4f5 url("images/winner_bg.jpg") 50% 50%/cover no-repeat;}
.award-winner .cnt {width:45%;}
.award-winner .award-title {margin-bottom:15px; color:#f19b24;}
.award-winner .award-sub-title {margin-bottom:40px;}

.award-intro {padding:150px 0; overflow:hidden;}
.award-intro .contain {display:flex; align-items:center;}
.award-intro .cnt {flex:1 1 auto; min-width:0; width:1%; margin-right:30px;}

.award-website {position:relative; padding:150px 0; min-height:780px; background:#e5e5e7; overflow:hidden;}
.award-website:before {content:""; position:absolute; top:-45%; left:50%; margin-left:336px; width:800px; height:800px; background:#dfdfe1; border-radius:100%;}
.award-website:after {content:""; position:absolute; bottom:-33%; right:50%; margin-right:-55px; width:667px; height:667px; border:2px dotted rgba(211,16,26,.2); border-radius:100%;}
.award-website .background {position:absolute; top:544px; bottom:0; left:0; right:50%; margin-right:-95px; height:241px; background:url("images/ledge.png") 100% 100% no-repeat;}
.award-website .contain {position:relative; display:flex; justify-content:space-between; z-index:2;}
.award-website .cnt {position:relative;}
.award-website .award-title .line {display:inline-block; width:180px; height:2px; background:#d3101a;}
.award-website .award-sub-title {margin-bottom:1em;}

.award-list {padding:150px 0; overflow:hidden;}
.award-list .head {margin-bottom:50px;}
.award-list .award-title {color:#242424; font-weight:500; margin-bottom:5px;}
.award-list .items {margin-left:calc(50% - 700px); max-width:1660px; display:grid; align-items:start; grid-template-columns:repeat(4, 1fr); gap:40px;}
.award-list .item .img-area {position:relative; margin-bottom:17px;}
.award-list .item .img-area .mark {position:absolute; top:30px; left:30px; width:66px;}
.award-list .item .img-area .trophy {position:absolute; bottom:-45px; right:4px;}
.award-list .item .txt-area {margin-bottom:27px;}
.award-list .item .txt-area .txt {color:#686868; line-height:1.4em; margin-bottom:5px;}
.award-list .item .txt-area .txt strong {font-weight:600; color:#242424;}
.award-list .item .txt-area .tit {color:#242424; font-size:20px; line-height:1.33em; letter-spacing:-.03em;}
.award-list .item .txt-area .tit strong {font-weight:600;}
.award-list .item .btn-area {display:flex; align-items:center; color:#686868; font-size:16px;}
.award-list .item .btn-area i {margin-right:8px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:100%; border:1px solid #ddd; transition:.2s;}
.award-list .item .btn-area svg {width:12px; height:auto; transition:.2s;}
.award-list .item:hover .btn-area {color:#d3101a;}
.award-list .item:hover .btn-area i {background:#d3101a; border-color:#d3101a;}
.award-list .item:hover .btn-area svg {transform:rotate(45deg);}
.award-list .item:hover .btn-area path {fill:#fff;}

@media (max-width: 1600px) {
	.award-wrapper {font-size:16px;}

	.award-heading h2 {font-size:85px;}
	.award-heading p {font-size:16px;}

	.award-title {font-size:44px;}
	.award-sub-title {font-size:22px;}	

	.award-list .items {padding:0 50px; margin:0;}
}

@media (max-width: 1400px) {
	.award-intro .cnt p br {display:none;}
	.award-intro .img {width:45%;} 
}

@media (max-width: 1280px) {

}

@media (max-width: 1024px) {	
	.award-wrapper {font-size:15px;}

	.award-heading h2 {font-size:65px;}
	.award-heading p {font-size:15px;}

	.award-title {font-size:37px;}
	.award-sub-title {font-size:20px;}

	.award-winner {padding:60px 0; background-position:65% 50%;}
	.award-winner .award-sub-title {margin-bottom:0;}

	.award-intro {padding:100px 0;}

	.award-website {padding:100px 0; min-height:auto;}
	.award-website:before {width:600px; height:600px; margin-left:20%;}
	.award-website:after {width:480px; height:480px;}
	.award-website .img {width:40%;}
	.award-website .background {top:calc(50% + 35px); right:55%; background-size:auto 140px;}
	.award-website .cnt {width:45%;}
	.award-website .award-title .line {width:120px;}
	.award-website .award-sub-title br {display:none;}

	.award-list {padding:100px 0;}
	.award-list .head {margin-bottom:40px;}
	.award-list .items {gap:30px;}
	.award-list .item .img-area {margin-bottom:25px;}
	.award-list .item .img-area .mark {top:15px; left:15px; width:46px;}
	.award-list .item .img-area .trophy {bottom:-35px;  width:90px; right:0;}
	.award-list .item .txt-area .tit {font-size:18px;}
	.award-list .item .btn-area {font-size:14px;}
	.award-list .item .btn-area i {width:36px; height:36px;}
	.award-list .item .btn-area svg {width:10px;}
}


@media (max-width: 900px) {
	.award-intro .contain {display:block;}
	.award-intro .cnt {width:auto; margin:0 0 50px;}
	.award-intro .img {width:auto; text-align:center;}

	.award-winner {background-position:100% 100%; background-size:100% auto; background-image:url("images/winner_bg_m.jpg");}
	.award-winner:after {content:''; display:block; padding-bottom:94%;}
	.award-winner .cnt {width:auto;}

	.award-website .contain {flex-direction: column-reverse;}
	.award-website:before {top:-20%; margin-left:0;}
	.award-website:after {bottom:-20%; right:5%; margin-right:0;}
	.award-website .cnt {width:auto; margin:0 0 50px;}
	.award-website .img {width:auto; text-align:center;}
	.award-website .background {top:auto; bottom:-15px; right:0; margin-right:0;}

	.award-list .items {grid-template-columns: repeat(2, 1fr); gap:50px 40px;}
}

@media (max-width: 760px) {
	.award-wrapper {font-size:14px; overflow:hidden;}
	.award-wrapper .contain {padding-left:16px; padding-right:16px;}

	.award-heading {background-image:url("images/241212_top_img_m.jpg");}
	.award-heading .year svg {width:auto; height:60px;}
	.award-heading h2 {font-size:44px; line-height:1em; margin-bottom:15px;}
	.award-heading p {font-size:13px;}

	.award-title {margin-bottom:15px; line-height:1.1em;}

	.award-sub-title {margin-bottom:6px;}

	.award-winner {padding:75px 0 15px;}
	.award-winner:after {padding-bottom:100%;}

	.award-intro {padding:75px 0;}
	.award-intro .text-dark {display:inline-block;}

	.award-website {padding:75px 0;}
	.award-website:before {width:400px; height:400px; top:-15%; left:30%;}
	.award-website:after {width:330px; height:330px; bottom:-5%; right:-15%;}
	.award-website .cnt p br {display:none;}
	.award-website .award-title {display:flex; align-items:flex-end;}
	.award-website .award-title .line {margin:0 0 9px 10px; width:100%;}
	.award-website .award-sub-title {margin-bottom:14px;}
	.award-website .img {width:260px; margin-left:8%; margin-bottom:30px;}
	.award-website .background {bottom:5px; right:-5%; background-size:auto 114px;}
	
	.award-list {padding:75px 0;}
	.award-list .items {padding:0; gap:35px 16px;}
	.award-list .item .img-area .mark {width:36px;}
	.award-list .item .img-area .trophy {bottom:-25px; width:65px;}
	.award-list .item .txt-area {padding:0 10px; margin-bottom:10px;}
	.award-list .item .txt-area .txt {font-size:13px;}
	.award-list .item .txt-area .tit {font-size:17px;}
	.award-list .item .btn-area {padding:0 10px; font-size:12px;}
	.award-list .item .btn-area i {width:28px; height:28px;}
	.award-list .item .btn-area svg {width:8px;}
}