@charset "UTF-8";

/* SECTION 1 */
.st-1 { position:relative; width:100%; padding-top:140px; }
.st-1 > .wrap { width:100%; max-width:1920px; margin:0 auto; }
.st-1 > .wrap::after { content:''; display:table; clear:both; }
.st-1 > .wrap > .bg { float:left; width:calc(100% - 950px); height:546px; margin-top:-140px; overflow:hidden; }
.st-1 > .wrap > .bg > video { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; }
.st-1 > .wrap > .content { float:left; width:950px; padding:0 50px; box-sizing:border-box; }
.st-1 > .wrap > .content > .en { font-size:65px; font-weight:800; font-family:'Unbounded',sans-serif; line-height:80px; }
.st-1 > .wrap > .content > .kr { font-size:18.5px; line-height:28px; margin-top:50px; }

/* SECTION TYPE-1 */
@media only screen and (max-width:1649px) {
	.st-1 { padding-top:130px; }
	.st-1 > .wrap > .bg { width:calc(100% - 850px); height:500px; margin-top:-130px; }
	.st-1 > .wrap > .content { width:850px; padding:0 40px; }
	.st-1 > .wrap > .content > .en { font-size:62px; line-height:74px; }
	.st-1 > .wrap > .content > .kr { font-size:17.5px; line-height:27px; margin-top:45px; }
}

/* SECTION TYPE-2 */
@media only screen and (max-width:1279px) {
	.st-1 { padding-top:110px; }
	.st-1 > .wrap > .bg { width:calc(100% - 700px); height:400px; margin-top:-110px; }
	.st-1 > .wrap > .content { width:700px; padding:0 30px; }
	.st-1 > .wrap > .content > .en { font-size:47px; line-height:57px; }
	.st-1 > .wrap > .content > .kr { font-size:15.5px; line-height:22.5px; margin-top:40px; }
}

/* SECTION TYPE-3 */
@media only screen and (max-width:1023px) {
	.st-1 { padding-top:0; }
	.st-1 > .wrap > .bg { float:none; position:absolute; width:100%; height:370px; top:0; margin-top:0; }
	.st-1 > .wrap > .bg > video { width:100%; height:auto; }
	.st-1 > .wrap > .content { float:none; width:100%; padding:410px 20px 0 20px; }
	.st-1 > .wrap > .content > .en { font-size:37px; line-height:45px; }
	.st-1 > .wrap > .content > .en > br.pc { display:none; }
	.st-1 > .wrap > .content > .kr { font-size:14px; line-height:20.5px; margin-top:30px; }
}

/* SECTION TYPE-4 */
@media only screen and (max-width:767px) {
	.st-1 > .wrap > .bg { height:250px; }
	.st-1 > .wrap > .content { padding:280px 10px 0 10px; }
	.st-1 > .wrap > .content > .en { font-size:27px; line-height:34px; }
	.st-1 > .wrap > .content > .kr { font-size:12px; line-height:17px; margin-top:25px; }
}

/* SECTION TYPE-5 */
@media only screen and (max-width:499px) {
	.st-1 > .wrap > .bg > video { width:140%; }
}

/* SECTION 2 */
.st-2 { margin-top:110px; margin-bottom:-70px; }
.st-2 > .wrap { position:relative; width:100%; max-width:1920px; margin:0 auto; padding:0 50px; box-sizing:border-box; }
.st-2 > .wrap::after { content:''; display:table; clear:both; }
.st-2 > .wrap > .content { width:calc(100% + 34px); margin-left:-17px; }
.st-2 > .wrap > .content::after { content:''; display:table; clear:both; }
.st-2 > .wrap > .content > .box { position:relative; float:left; width:calc(33.33% - 34px); margin:0 17px 70px 17px; cursor:pointer; }
.st-2 > .wrap > .content > .box > .thumb { width:100%; }
.st-2 > .wrap > .content > .box > .thumb { position:relative; width:100%; cursor:pointer; }
.st-2 > .wrap > .content > .box > .thumb > img { width:100%; transition:opacity linear 0.25s; }
.st-2 > .wrap > .content > .box > .thumb > img.brand { opacity:1; }
.st-2 > .wrap > .content > .box > .thumb > img.site { position:absolute; top:0; left:0; opacity:0; }
.st-2 > .wrap > .content > .box > .thumb:hover > img.brand { opacity:0; }
.st-2 > .wrap > .content > .box > .thumb:hover > img.site { opacity:1; }
.st-2 > .wrap > .content > .box > .title { margin-top:20px; }
.st-2 > .wrap > .content > .box > .title > .en { float:left; }
.st-2 > .wrap > .content > .box > .title > .en > .box { height:21px; overflow:hidden; }
.st-2 > .wrap > .content > .box > .title > .en > .box > .depth { position:relative; display:block; height:100%; top:0%; font-size:21px; font-weight:600; line-height:21px; font-family:'Unbounded',sans-serif; transition:0.3s; }
.st-2 > .wrap > .content > .box:hover > .title > .en > .box > .depth { top:-100%; }
.st-2 > .wrap > .content > .box > .title > .kr { float:right; margin-top:2px; }
.st-2 > .wrap > .content > .box > .title > .kr > .box { height:17px; overflow:hidden; }
.st-2 > .wrap > .content > .box > .title > .kr > .box > .depth { position:relative; display:block; height:100%; top:0%; font-size:17px; line-height:17px; transition:0.3s; }
.st-2 > .wrap > .content > .box:hover > .title > .kr > .box > .depth { top:-100%; }

/* SECTION TYPE-1 */
@media only screen and (max-width:1649px) {
    .st-2 { margin-top:100px; margin-bottom:-65px; }
    .st-2 > .wrap { padding:0 40px; }
    .st-2 > .wrap > .content { width:calc(100% + 30px); margin-left:-15px; }
    .st-2 > .wrap > .content > .box { width:calc(33.33% - 30px); margin:0 15px 65px 15px; }
    .st-2 > .wrap > .content > .box > .title { margin-top:18px; }
    .st-2 > .wrap > .content > .box > .title > .en > .box { height:20px; }
    .st-2 > .wrap > .content > .box > .title > .en > .box > .depth { font-size:20px; line-height:20px; }
    .st-2 > .wrap > .content > .box > .title > .kr > .box { height:16px; }
    .st-2 > .wrap > .content > .box > .title > .kr > .box > .depth { font-size:16px; line-height:16px; }
}

/* SECTION TYPE-1 */
@media only screen and (max-width:1439px) {
    .st-2 > .wrap > .content > .box { width:calc(50% - 30px); }
    
}

/* SECTION TYPE-3 */
@media only screen and (max-width:1279px) {
    .st-2 { margin-top:80px; margin-bottom:-58px; }
    .st-2 > .wrap { padding:0 30px; }
    .st-2 > .wrap > .content { width:calc(100% + 20px); margin-left:-10px; }
    .st-2 > .wrap > .content > .box { width:calc(50% - 20px); margin:0 10px 58px 10px; }
    .st-2 > .wrap > .content > .box > .title { margin-top:15px; }
    .st-2 > .wrap > .content > .box > .title > .en > .box { height:18px; }
    .st-2 > .wrap > .content > .box > .title > .en > .box > .depth { font-size:18px; line-height:18px; }
    .st-2 > .wrap > .content > .box > .title > .kr > .box { height:14px; }
    .st-2 > .wrap > .content > .box > .title > .kr > .box > .depth { font-size:14px; line-height:14px; }
}

/* SECTION TYPE-4 */
@media only screen and (max-width:1023px) {
    .st-2 { margin-top:90px; margin-bottom:48px; }
    .st-2 > .wrap { padding:0 20px; }
    .st-2 > .wrap > .content { width:calc(100% + 24px); margin-left:-12px; }
    .st-2 > .wrap > .content > .box { width:calc(50% - 24px); margin:0 12px 48px 12px; }
    .st-2 > .wrap > .content > .box > .title { margin-top:12px; }
    .st-2 > .wrap > .content > .box > .title > .en > .box { height:16px; }
    .st-2 > .wrap > .content > .box > .title > .en > .box > .depth { font-size:16px; line-height:16px; }
    .st-2 > .wrap > .content > .box > .title > .kr > .box { height:13px; }
    .st-2 > .wrap > .content > .box > .title > .kr > .box > .depth { font-size:13px; line-height:13px; }
}

/* SECTION TYPE-5 */
@media only screen and (max-width:767px) {
    .st-2 { margin-top:70px; margin-bottom:-38px; }
    .st-2 > .wrap { padding:0 10px; }
    .st-2 > .wrap > .content { width:100%; margin-left:0; }
    .st-2 > .wrap > .content > .box { width:100%; margin:0 0 38px 0; }
    .st-2 > .wrap > .content > .box > .title { margin-top:10px; }
    .st-2 > .wrap > .content > .box > .title > .en > .box { height:13px; }
    .st-2 > .wrap > .content > .box > .title > .en > .box > .depth { font-size:13px; line-height:13px; }
    .st-2 > .wrap > .content > .box > .title > .kr > .box { height:12px; }
    .st-2 > .wrap > .content > .box > .title > .kr > .box > .depth { font-size:12px; line-height:12px; }
}