@charset "utf-8";

/* gate page */
#wrap.gate{padding-top:0;padding-bottom:35px;}
.gate #container{scroll-behavior:smooth;}
.gate #container .title_desc{height:200px;text-align:right;padding:75px 25px 0;background:url('/publishing/images/main/bg_gate.jpg') no-repeat 50% 100%;background-size:100% auto;}
.gate #container .title_desc span{display:block;font-size:14px;color:#888;line-height:22px;letter-spacing:-0.7px;margin-bottom:10px;}
.gate #container .title_desc strong{font-size:25px;color:#111;line-height:30px;letter-spacing:-1.25px;}

.gate #container .banner_box{background:#f5f5f5;}
.gate #container .banner_box li{overflow:hidden;position:relative;border-bottom:1px solid #bcbcbc;}
.gate #container .banner_box li:before{display:block;content:'';position:absolute;top:25px;left:15px;font-family:'GmarketSansBold';font-size:30px;color:#dedede;}
.gate #container .banner_box li:nth-child(1):before{content:'1';}
.gate #container .banner_box li:nth-child(2):before{content:'2';}
.gate #container .banner_box li:nth-child(3):before{content:'3';}
.gate #container .banner_box li:last-of-type{border-bottom:0 none;}
.gate #container .banner_box li .dummy{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;}
.gate #container .banner_box li strong{position:absolute;top:60px;left:15px;font-size:15px;font-weight:400;line-height:22px;}
.gate #container .banner_box li strong i{display:block;font-size:19px;font-weight:700;line-height:24px;}
.gate #container .banner_box li p{overflow:hidden;position:absolute;top:24px;right:15px;width:215px;height:300px;padding:43px 43px 0 25px;background:#222;border-radius:10px;box-shadow:7px 5px 20px rgba(0,0,0,0.3);}
.gate #container .banner_box li p:before{display:block;content:'';position:absolute;top:25px;right:15px;width:15px;height:8px;background:url('/publishing/images/main/bul_arrow_down.png') no-repeat 0 0;background-size:contain;}
.gate #container .banner_box li:nth-child(1) p{background-color:#e5467a;}
.gate #container .banner_box li:nth-child(2) p{background-color:#3e3ad1;}
.gate #container .banner_box li:nth-child(3) p{background-color:#f5c42c;}
.gate #container .banner_box li p em{display:-webkit-box;overflow:hidden;font-size:14px;color:#fff;text-overflow:ellipsis;line-height:20px;letter-spacing:-0.35px;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.gate #container .banner_box li p span{display:block;position:absolute;top:140px;left:25px;font-size:27px;color:rgba(255,255,255,0.4);line-height:34px;letter-spacing:-0.67px;opacity:0;}
.gate #container .banner_box li p a{display:block;position:absolute;bottom:0;left:0;width:100%;height:45px;font-size:13px;font-weight:400;color:#fff;line-height:45px;padding:0 15px;}
.gate #container .banner_box li p a:after,
.gate #container .banner_box li p a:before{display:block;content:'';position:absolute;}
.gate #container .banner_box li p a:before{top:0;left:15px;width:calc(100% - 30px);height:1px;background:rgba(255,255,255,0.3);}
.gate #container .banner_box li p a:after{top:calc(50% - 10px);right:15px;width:18px;height:18px;background:url('/publishing/images/main/bul_arrow_right.png') no-repeat 50% 50%;background-size:6px auto;border:1px solid #fff;border-radius:100%;}

/* gate > banner_box > on */
.gate #container .banner_box li.on{background:#e2e2e2;}
.gate #container .banner_box li.on:nth-child(1):before{color:#e5467a;}
.gate #container .banner_box li.on:nth-child(2):before{color:#3e3ad1;}
.gate #container .banner_box li.on:nth-child(3):before{color:#f5c42c;}
.gate #container .banner_box li.on p:before{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.gate #container .banner_box li.on p span{opacity:1;}
.gate #container .banner_box li.on p em{-webkit-line-clamp:4;}