@import 'base.css';
@import 'fonts.css';

body {font-family: 'Noto Sans KR', 'Roboto', serif; background-color: #ffffff; height: 100%;}

.only-mobile {display: none;}
.fade-in {opacity: 0;}
.fade-in.active {-webkit-animation: fadein 1.4s; animation: fadein 1.4s; opacity: 1;}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sec-img .img-hover {display: none;}
.sec-img.hover .img-hover {display: block; opacity: 0;}

.content-area {position: relative; width: 100%; box-sizing: border-box;}
.content-area .header {position: relative; padding: 42px 0; width: 100%; box-sizing: border-box;}
.content-area .header .logo {margin-right: 46px; width: 123px; height: 34px;}

.content-area .header .ico {display: inline-block; position: relative;  width: 24px; height: 24px;}
.content-area .header ul {display: inline-block; position: absolute; top: 42px; right: 0; margin: 0; padding: 0; list-style: none; vertical-align: middle;}
.content-area .header ul li {display: inline-block; font-size: 0; margin-right: 26px; vertical-align: middle;}
.content-area .header ul li:last-child {margin-right: 0;}
.content-area .header ul li .ico {display: inline-block; padding: 5px 0;}
.content-area .header ul li .ico img {width: 100%;}
.content-area .header .logo .ico {padding: 0; width: auto; height: auto;}

/* --------------------- */

.section {display: block; position: relative; width: 100%;}
.section .article-wrapper {display: block; position: relative; width: 100%; height: 100%; font-size: 0; background-color: #ffffff;}
.section .article-wrapper .lf-sec {display: inline-block; padding: 0 58px 0 46px; width: 66%; box-sizing: border-box; vertical-align: top;}
.section .article-wrapper .lf-sec .sec-txt {display: block; position: relative; padding-bottom: 435px; color: #000000; box-sizing: border-box;}
.section .article-wrapper.logo {background-color: #000000;}
.section .article-wrapper.logo .lf-sec .sec-txt{padding-top: 63px;}
.section .article-wrapper .lf-sec .sec-txt .lg-txt {margin: 0; line-height: 60px; letter-spacing: 0.06em; font-family: 'Montserrat'; font-weight: 700; font-size: 50px; color: #ffffff;}
.section .article-wrapper .lf-sec .sec-txt .sm-txt {margin: 0; padding-top: 5px; line-height: 55px; font-size: 30px; font-weight: 700; color: #ffffff;}

.section .article-wrapper.content {}
.section .article-wrapper.content .lf-sec .sec-txt {top: auto; padding: 90px 0 0 90px; transform: none; color: #644f4f;}
.section .article-wrapper.content.sec_03 .lf-sec .sec-txt {padding-top: 80px;}
.section .article-wrapper.content .lf-sec .sec-txt .tit {margin: 0; padding: 0;}
.section .article-wrapper.content .lf-sec .sec-txt .desc {margin: 14px 0 21px; padding: 0; font-weight: 400; line-height: 36px; font-size: 22px; color: #000000; font-family: 'Noto Sans KR';}

.section .article-wrapper .rt-sec {display: inline-block; padding: 0 40px; width: 34%; box-sizing: border-box; vertical-align: top;}
.section .article-wrapper .rt-sec .sec-movie {display: block; width: 100%; height: 100%;}

.section .article-wrapper .lf-sec .sec-img {display: inline-block; position: relative; padding-left: 90px; width: 100%; box-sizing: border-box;}
.section .article-wrapper .lf-sec .sec-img .img-list {display: inline-block; position: relative; width: 100%;}
.section .article-wrapper .lf-sec .sec-img .img-list .list-items {display: inline-block; position: relative; margin-left: 10px; width: 130px; vertical-align: top;}
.section .article-wrapper .lf-sec .sec-img .img-list .list-items a {text-decoration: none;}
.section .article-wrapper .lf-sec .sec-img .img-list .list-items img {width: 100%; height: 130px;}
.section .article-wrapper .lf-sec .sec-img .img-list .list-items .img-tit {display: block; margin: 0; padding: 4px 0 20px; max-height: 60px; line-height: 18px; font-weight: 700; font-size: 12px; text-align: center; color: #000000; font-family: 'Noto Sans KR'; box-sizing: border-box;}
.section .article-wrapper .lf-sec .sec-img .img-list.col-item-3 {max-width: 410px;}
.section .article-wrapper .lf-sec .sec-img .img-list.col-item-3 .list-items:nth-child(3n-2) {margin-left: 0;}
.section .article-wrapper .lf-sec .sec-img .img-list.col-item-2 {max-width: 410px;}
.section .article-wrapper .lf-sec .sec-img .img-list.col-item-2 .list-items {width: 200px;}
.section .article-wrapper .lf-sec .sec-img .img-list.col-item-2 .list-items:nth-child(2n-1) {margin-left: 0;}

/* -- hover // -- */
.section .article-wrapper .lf-sec .sec-img.hover .img-list .list-items {min-height: 190px;}
/* .section .article-wrapper .lf-sec .sec-img.hover .img-list .list-items:hover img {opacity: 0; } */
.section .article-wrapper .lf-sec .sec-img.hover .img-list .list-items:hover img.img-hover {display: inline-block; opacity: 1; transition: all 1000ms;}
.section .article-wrapper .lf-sec .sec-img.hover .img-list .list-items img {position: absolute; top: 0; left: 0; transition: all 1000ms;}
.section .article-wrapper .lf-sec .sec-img.hover .img-list .list-items .img-tit {position: relative; top: 130px;}
/* -- // hover -- */

/* --------------------- */

.section .article-wrapper.content:after,
.footer:after  {content: ''; display: inline-block; position: absolute; width: 116px; height: 121px; background: url('/20AR/assets/media/sec_arrow.png') no-repeat center center; background-size: contain;}
.section .article-wrapper.content.sec_02:after {left: 130px; top: -110px; background-image: url('/20AR/assets/media/sec_arrow_shuffle.png');}
.section .article-wrapper.content.sec_03:after {left: 726px; top: -114px;}	
.section .article-wrapper.content.sec_03 {padding-bottom: 180px;}
.footer:after {left: 123px; top: -105px;}

.section .play-area {display: inline-block; top: 0; bottom: 0; right: 0; position: fixed; width: 34%; z-index: 100;}
.section .play-area.youtube {overflow: hidden;}
/* .section .play-area:hover {transform: scale(1.05); transition: all 500ms;} */
.section .play-area .rt-sec {position: relative; width: 100%; height: 100%; transition: all 500ms; cursor: pointer;}
.section .play-area .rt-sec:hover {transform: scale(1.05); transition: all 500ms;}
.section .play-area .rt-sec .sec-movie {overflow: hidden; width: 100%; height: 100%; background-color: #000000;}
.section .play-area .rt-sec .sec-movie video {position: relative; left: 50%; width: auto; height: 100%; transform: translateX(-50%);}

.footer {position: relative; padding: 0 40px; background-color: #ffffff; border-top: solid 1px #cccccc; z-index: 110; box-sizing: border-box;}
.footer .link-area {display: inline-block; position: relative; padding-left: 90px; vertical-align: middle;}
.footer .link-area a {display: inline-block; line-height: 100px; font-weight: 700; font-size: 16px; color: #000000; text-decoration: none;}
.footer .copyright {display: none; padding-left: 40px; line-height: 100px; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 400; color: #999999; vertical-align: middle; box-sizing: border-box;}
.footer .copyright.mobile-none {display: inline-block;}

video {width: 100%;}
.frame-wrapper {position: absolute; width: 100%; height: 100vh;}
.frame-wrapper .frame {position: fixed; top: 50%; width: 20px; height: 379px; max-height: 28.1481vw; background-color: #aaaaaa; transform: translateY(-50%); z-index: 200; transition: all 1000ms;}
.frame-wrapper.fixed .frame {top: 470px; transform: none;}
.frame-wrapper .lf-frame {left: 40px;}
.frame-wrapper .lf-frame:after {content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 50px; height: 20px; background-color: #aaaaaa;}
.frame-wrapper .lf-frame:before {content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; width: 50px; height: 20px; background-color: #aaaaaa;}
.frame-wrapper .rf-frame {right: 40px;}
.frame-wrapper .rf-frame:after {content: ""; display: inline-block; position: absolute; top: 0; right: 0; width: 50px; height: 20px; background-color: #aaaaaa;}
.frame-wrapper .rf-frame:before {content: ""; display: inline-block; position: absolute; bottom: 0; right: 0; width: 50px; height: 20px; background-color: #aaaaaa;}

.sec-movie iframe {position: absolute; left: calc(50%); transform: translateX(-50%); width: 100vw;}
.sec-movie:after {content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%;}

.dim {display: none; position: fixed; z-index: 9999; top: 0; left: 0; right: 0; bottom: 0; background: rgba(19, 19, 19, 1);}
.dim.active {display: block;}
.modal {display: none; position: fixed; top: 50%; right: 0; bottom: 0; left: 50%; transform: translate(-50%, -50%); overflow: hidden; width: 45vw; max-height: 71vw; max-width: 80vw; text-align: center; -webkit-overflow-scrolling: touch; z-index: 10000;}
.modal.youtube {max-height: 45vw;}
.modal .content {position: relative; top: 50%; transform: translateY(-50%); width: 100%; height: auto;}
.modal.youtube .content {height: 100%;}
.modal .content video {height: 100%;}
.modal.active {display: block;}

@media (max-width: 1350px) {
	.section .article-wrapper.content.sec_03:after {left: 53.77vw;}
}

@media (max-width: 1160px) {
	.only-mobile {display: block;}
	
	.content-area .header {padding: 6.8965vw 0 0 0;}
	.content-area .header ul {top: 6.8965vw;}
	.content-area .header ul li {margin-right: 2.931vw;}
	.content-area .header ul li.logo {margin-right: 7.0689vw;}

	.section .article-wrapper .lf-sec {padding: 0 3.4482vw 0 4.3103vw; width: 100%;}
	.section .article-wrapper .lf-sec .sec-txt {padding-left: 9.3103vw;}
	.section .article-wrapper.logo .lf-sec .sec-txt{margin-top: 0; margin-bottom: 0; padding-top: 17.7586vw; padding-bottom: 18.9655vw; padding-left: 0;}
	.section .article-wrapper .lf-sec .sec-txt .lg-txt {line-height: 6.5517vw; font-size: 5.5172vw;}
	.section .article-wrapper .lf-sec .sec-txt .sm-txt {padding-top: 0.5172vw; line-height: 6.0344vw; font-size: 4.3103vw; font-weight: 700;}

	.section .article-wrapper.content .lf-sec .sec-txt {padding: 12.0689vw 0 0 10.3448vw;}
	.section .article-wrapper.content .lf-sec .sec-txt .tit {height: 7.4137vw;}
	.section .article-wrapper.content .lf-sec .sec-txt .tit img {height: 100%;}
	.section .article-wrapper.content .lf-sec .sec-txt .desc {margin: 1.7241vw 0 5vw; line-height: 6.2068vw; font-size: 3.7931vw;}
	.section .article-wrapper.content.sec_03 .lf-sec .sec-txt {padding-top: 25.8620vw;}
	
	.section .article-wrapper .lf-sec .sec-img {padding-left: 0; width: 100%; text-align: center;}
	.section .article-wrapper .lf-sec .sec-img .img-list .list-items {margin-left: 1.7241vw; width: 22.4137vw; min-height: 32.7586vw;}
	.section .article-wrapper .lf-sec .sec-img .img-list .list-items img {height: auto;}
	.section .article-wrapper .lf-sec .sec-img .img-list .list-items .img-tit {padding: 0.6896vw 0 3.4482vw; line-height: 3.1034vw; font-size: 2.0689vw;}
	.section .article-wrapper .lf-sec .sec-img .img-list.col-item-3 {max-width: 70.6896vw;}
	.section .article-wrapper .lf-sec .sec-img .img-list.col-item-2 {max-width: 70.6896vw;}
	.section .article-wrapper .lf-sec .sec-img .img-list.col-item-2 .list-items {width: 34.4827vw;}
	
	.section .article-wrapper.content:after,
	.footer:after {width: 20vw; height: 20.8620vw;} 
	.section .article-wrapper.content.sec_02:after {display: none;}
	.section .article-wrapper.content.sec_03:after {left: 64.3103vw; top: -1.8965vw;}
	.section .article-wrapper.content.sec_03 {padding-bottom: 35vw;}
	.footer:after {left: 15.5172vw; top: -18.1034vw;}
		
	.section .play-area {overflow: hidden; top: auto; bottom: auto; right: auto; position: relative; width: 100%; height: 60.3448vw;}
	.section .play-area .rt-sec {position: relative; width: 100%; height: 100%;}
	.section .play-area .rt-sec .sec-movie video {left: 50%; width: auto; height: 100%; transform: translateX(-50%);}
	
	.frame-wrapper .frame {top: 50%; width: 3.4482vw; height: 82.7587vh; max-height: 48.2758vw; transform: translateY(-50%);}
	.frame-wrapper.fixed .frame {position: absolute; top: 77.03448vw; transform: none;}
	.frame-wrapper .lf-frame {left: 4.3103vw;}
	.frame-wrapper .lf-frame:after {width: 8.6206vw; height: 3.4482vw;}
	.frame-wrapper .lf-frame:before {width: 8.6206vw; height: 3.4482vw;}
	.frame-wrapper .rf-frame {right: 3.4482vw;}
	.frame-wrapper .rf-frame:after {width: 8.6206vw; height: 3.4482vw;}
	.frame-wrapper .rf-frame:before {width: 8.6206vw; height: 3.4482vw;}

	.footer {padding: 0; padding-top: 7.2413vw; padding-bottom: 4.6551vw;}
	.footer .link-area {padding-left: 0; width: 100%; text-align: center;}
	.footer .link-area a {line-height: 6.2068vw; font-size: 4.1379vw;}
	.footer .copyright {display: block; padding-top: 2.5862vw; padding-left: 0; width: 100%; line-height: 4.3103vw; font-size: 1.7241vw; text-align: center;}
	.footer .copyright.mobile-none {display: none;}
	
	/* -- hover // -- */
	.section .article-wrapper .lf-sec .sec-img.hover .img-list .list-items {min-height: 32.7586vw;}
	.section .article-wrapper .lf-sec .sec-img.hover .img-list .list-items .img-tit {top: 22.4137vw;}
	/* -- // hover -- */
	
	.sec-movie iframe {position: absolute; left: calc(50%); transform: translateX(-50%); width: 110vw;}
	
	.modal {width: 80vw;}
}

@media (min-width: 1920px) {
	.modal {width: 864px;}
}