@charset "utf-8";
@import url(common.css);
/* [S] gate */
html, body{overflow-y:auto;}
body{background:url(../../images/wb/gate/gate_bg.png) no-repeat left top;}
#gate{min-width:1400px;max-width:1920px;height:100%;min-height:900px;max-height:1100px;position:relative;overflow:hidden;}

.txt{position:absolute;left:0;top:50%;margin:-350px 0 0 1130px;transition:all 0.5s;}
.txt .logo{padding-bottom:50px;transition:all 0.5s}
.txt .logo p{padding-bottom:37px;font-size:30px;line-height:32px;color:#090909;letter-spacing:-2px;font-weight:500;transition:all 0.5s;}
.txt .logo span{display:block;transition-delay: 0.3s;}
.txt .logo img{width:455px;vertical-align:top;transition:all 0.5s;}
.txt .area_info ul:after{content:'';display:block;clear:both;}
.txt .area_info li{height:240px;float:left;font-size:0;}
.txt .area_info li:first-child{margin-right:67px;padding-right:67px;transition:all 0.5s;background:url(../../images/wb/gate/area_list_line.png) no-repeat right top;}
.txt .area_info span{display:block;font-size:20px;color:#090909;font-weight:500;letter-spacing:-1px;transition:all 0.5s;}
.txt .area_info strong{display:block;padding:7px 0 25px;font-weight:700;transition-delay: 0.3s;}
.txt .area_info strong b{font-size:60px;line-height:62px;letter-spacing:-6px;transition:all 0.5s;}
.txt .area_info li:nth-child(1) strong{color:#ad0132;}
.txt .area_info li:nth-child(2) strong{color:#f18903;}
.txt .area_info a{display:inline-block;width:90px;height:90px;position:relative;overflow:hidden;text-align:center;transition:all 0.5s;border-radius:90px;box-shadow:10px 10px 25px rgba(0,0,0,0.2);transition:all 0.5s;}
.txt .area_info a:nth-last-child(2){margin-right:15px;background:#f8981d;}
.txt .area_info a:nth-last-child(1){background:#ad0132;}
.txt .area_info a:after{content:'';display:block;clear:both;width:90px;height:90px;position:absolute;left:0;top:0;transition:transform 0.5s ease, opacity 1.0s ease;transform:translate(0,0);opacity:1.0;}
.txt .area_info a:nth-last-child(2):after{background:url(../../images/wb/gate/gate_btn_bg_01.png) no-repeat left top;}
.txt .area_info a:nth-last-child(1):after{background:url(../../images/wb/gate/gate_btn_bg_02.png) no-repeat left top;}
.txt .area_info a:hover:after{transition:transform 0.0s ease, opacity 0.0s ease;transform:translate(30px,30px);opacity:0.0;}
.txt .area_info a i{display:block;padding-top:16px;font-size:22px;color:#fff;font-weight:500;line-height:27px;letter-spacing:-1px;transition:transform 0.0s ease, opacity 0.0s ease;transform:translate(30px,30px);opacity:0.0;}
.txt .area_info a:hover i{transition:transform 0.5s ease, opacity 1.0s ease;transform:translate(0,0);opacity:1.0;}

/* 배너목록 */
.txt .bannerList {height: 600px; padding-top: 30px;}
.txt .bannerList ul > li {float: left; width: 50%; padding: 10px 5px;box-sizing: border-box;}
.txt .bannerList ul > li > div {width:250px;height:100px;border-radius:10px;box-sizing:border-box;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);}
.txt .bannerList ul > li > div:hover {transform:scale(1.06);}
.txt .bannerList ul > li > div a {cursor:pointer;display:block;padding:26px 73px 30px 17px;}
.txt .bannerList ul > li > div p {font-size:16px;font-weight:500;line-height:22px;letter-spacing:-1px;}
.txt .bannerList ul > li > div a > p > span {font-size:14px;} 
/* .txt .bannerList ul > li:nth-child(1) > div{background:#7bd3e1 url(../../images/wb/gate/gate_banner_bg_01.png) no-repeat 170px 17px;} K-CHOICE 배너 숨김 (SHY20220621) */ 
/* .txt .bannerList ul > li:nth-child(1) > div{background:#cbe7eb url(../../images/wb/gate/gate_banner_bg_02.png) no-repeat 158px 17px;} 홈키트 배너 숨김 (SHY20230524) */
.txt .bannerList ul > li:nth-child(2) > div{background:#e9f3ff url(../../images/wb/gate/gate_banner_bg_03.png) no-repeat 135px -7px;}
.txt .bannerList ul > li:nth-child(3) > div{background:#F7C7C9 url(../../images/wb/gate/gate_banner_bg_01_ET.png) no-repeat 148px -3px;} /* 잉글리시트립 배너 수정 (SHY20240702) */
.txt .bannerList ul > li:nth-child(4) > div{background:#d5d7fe url(../../images/wb/gate/gate_banner_bg_04.png) no-repeat 130px 16px;}
/*.txt .bannerList ul > li:nth-child(4) > div{background:#d7ece7 url(../../images/wb/gate/gate_banner_bg_05.png) no-repeat 166px 8px;background-size:80px;} 펀띵 배너 추가 (SHY20220719) */
.txt .bannerList ul > li:nth-child(5) > div{background:#d7ece7 url(../../images/wb/gate/gate_banner_bg_04_lineup.png) no-repeat 130px 1px;background-size:130px;}
.txt .bannerList ul > li:nth-child(1) {float: left; width: 80%; padding: 10px 5px;box-sizing: border-box;}
.txt .bannerList ul > li:nth-child(1) > div {width:516px;height:100px;border-radius:10px;box-sizing:border-box;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);}
.txt .bannerList ul > li:nth-child(1) > div a {cursor:pointer;display:block;padding:36px 73px 30px 17px;}
.txt .bannerList ul > li:nth-child(1) > div p {font-size:22px;font-weight:500;line-height:22px;letter-spacing:-1px;}
.txt .bannerList ul > li:nth-child(1) > div{background:#FFF2CC url(../../images/wb/gate/gate_banner_bg_05_lineup.png) no-repeat 430px 1px;background-size:80px;}


.copy{padding-top:150px;font-size:11px;color:#a9a9a9;line-height:13px;transition:all 0.5s;}

.bg{position:absolute;left:0;top:0;transition:all 0.5s;}
.bg img{width:100%;vertical-align:top;}
.bg_01{transform:translate(-50px,-50px);opacity:0.0;}
.bg_01.In{transform:translate(0,0);opacity:1.0;transition-delay: 0.2s;}
.bg_02{transform:translate(-30px,30px);opacity:0.0;}
.bg_02.In{transform:translate(0,0);opacity:1.0;transition-delay: 0.3s;}
/* .bg_03{transform:translate(-70px,-70px);}
.bg_03.In{transform:translate(0,0);} */

@media(max-width:1920px){
	.txt{width:530px;margin-left:930px;}
	.bg{left:-190px;}
}

@media(max-width:1400px){
	#gate{min-width:1200px;min-height:900px;}
	.txt{margin-left:700px;}
	.txt .logo{padding-bottom:50px;}
	.txt .logo p{padding-bottom:20px;font-size:20px;line-height:22px;}
	.txt .logo img{width:300px;}
	.txt .area_info li:first-child{margin-right:40px;padding-right:40px;background-size:1px 180px;}
	.txt .area_info span{font-size:17px;}
	.txt .area_info strong b{font-size:50px;line-height:52px;letter-spacing:-4px;}
	.txt .area_info a{width:70px;height:70px;}
	.txt .area_info a:after{width:70px;height:70px;}
	.txt .area_info a:nth-last-child(2):after{background-size:100% 100%;}
	.txt .area_info a:nth-last-child(1):after{background-size:100% 100%;}
	.txt .area_info a i{padding-top:14px;font-size:17px;line-height:20px;}
	.bg{width:820px;position:absolute;left:-110px;top:0;}
	#imgCanvas{width:820px;}
	.copy{padding-top:80px;}
	
	/* 배너목록 */
	.txt .bannerList {height: 600px; padding-top: 30px;}
	.txt .bannerList ul > li {float: left; width: 200px; padding: 10px 5px; box-sizing: border-box;}
	.txt .bannerList ul > li > div {background-color:orange; width:190px; height:100px; border-radius:10px;padding:27px 11px;box-sizing:border-box;color:#fff;}	
	.txt .bannerList ul > li > div p {font-size:17px;font-weight:500;line-height:22px;}
	.txt .bannerList ul > li > div a {cursor:pointer;display:block;padding:0}
	.txt .bannerList ul > li:nth-child(1) > div{background:#7bd3e1}
	.txt .bannerList ul > li:nth-child(2) > div{background:#cbe7eb}
	.txt .bannerList ul > li:nth-child(3) > div{background:#e9f3ff}
	.txt .bannerList ul > li:nth-child(4) > div{background:#d5d7fe}
	
}

.right {margin-bottom: 20px;}
.toggle-btn {position: relative;width: 80px;height: 40px;background: #ccc;border-radius: 20px;cursor: pointer;overflow: hidden;}
.slider {position: absolute;top: 4px;left: 44px;width: 32px;height: 32px;background: white;border-radius: 50%;box-shadow: 0 2px 5px rgba(0,0,0,0.2);transition: transform 0.3s ease;}
.flags {position: absolute;top: 50%;left: 8px;right: 8px;display: flex;justify-content: space-between;transform: translateY(-50%);z-index: 1;}
.flags img {width: 24px;height: 24px;opacity: 1;transition: opacity 0.3s ease;}
.toggle-btn.active .slider {transform: translateX(40px);}
.toggle-btn.active .flags img.on {opacity: 1;}
.toggle-btn:not(.active) .flags img.off {opacity: 1;}

 
/* [E] gate */