/*common*/ .full_container .inner_container{max-width:1300px; width:95%; margin:0 auto; position:relative} .clear:after{content:''; display:block; clear:both} /*esamanru*/ @font-face { font-family: 'GongGothicBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff'); font-weight: normal; font-style: normal; } /* IE9 이하를 위한 css */ .placeholder { color: #ccc; } /* IE10 이상을 위한 css */ input::placeholder { color: #ccc; opacity: 1; /* 파이어폭스에서 뿌옇게 나오는 현상을 방지하기 위한 css */ } input::-webkit-input-placeholder { color: #ccc; } /* IE */ input:-ms-input-placeholder { color: #ccc; } /* Firefox */ input:-mos-input-placeholder { color: #ccc; } /*custom menu new*/ .custom_menu{background:#f0c31c; position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:999; width:45px; height:115px; border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:20px; border-bottom-right-radius:20px; overflow:hidden; transition:0.2s ease} .custom_menu.inside{left:-45px} .custom_menu .custom_menu_inner{background:#fff; width:100%; height:100%; border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:20px; border-bottom-right-radius:20px; transform:translateX(-6px)} .custom_menu .custom_menu_inner a{display:block; width:100%; height:100%; position:relative} .custom_menu .custom_menu_inner a img{position:absolute; left:50%; top:50%; transform:translate(calc(-50% + 2px), -50%)} /*-------------------모바일 메뉴 new----------------------*/ .gnbWrap{ padding-top: 10px; padding-bottom: 8px; width: 890px; margin: 0 auto; } .gnbWrap>img{ width: 250px; height: 42px; } /* 모바일 메뉴 버튼 */ .mobile_menu {position: absolute; top: 48px; right:20px; transform: translateY(-50%);} .mobile_menu>a{width: 100%;height: 100%; display: block; font-size:24px; color:#000;} a.close{ background-color: #fff; width: 50px; height: 50px; font-size:22px; position: absolute; right: 20px; top: 50%; color: #3976cf; line-height: 50px; text-align: center; transform:translateY(-50%); z-index:2; } .left_gnbWrap{ height: 100%; width: 388px; position: fixed; left: -388px; top: 0; background-color: #f0c31c; border-top-right-radius:40px; border-bottom-right-radius:40px; z-index: 999; transition: all 0.3s; overflow:hidden; } .left_gnbWrap .left_gnbWrap_inner{width:100%; height:100%; background:#fff; border-top-right-radius:40px; border-bottom-right-radius:40px; transform:translateX(-8px); overflow:auto; padding:40px; position:relative} .left_gnbWrap.on{ left:0; } .left_gnb>li{width: 100%; margin-bottom:50px; position:relative} .left_gnb>li>a, .left_gnb>li>span{display: block; text-align: left; width: 100%; color: #000; font-size:25px; font-weight:800; letter-spacing:-1px; transition:0.2s ease} .left_gnb>li>span{cursor:pointer} .left_gnb>li>a:hover, .left_gnb>li>span:hover{color:#e7453a;} .left_gnb>li>a .menu_icon, .left_gnb>li>span .menu_icon{vertical-align:sub; display:inline-block; width:30px; height:32px; overflow:hidden; position:relative; margin-right:15px} .left_gnb>li>a .menu_icon img, .left_gnb>li>span .menu_icon img{position:absolute; left:0; top:0} .left_gnb>li>a:hover .menu_icon img, .left_gnb>li>span:hover .menu_icon img{top:-32px} .left_gnb>li>a.on, .left_gnb>li>span.on{color:#e7453a} .left_gnb>li>a.on .menu_icon img, .left_gnb>li>span.on .menu_icon img{top:-32px} .left_gnb>li>ul{display: none; padding-top:20px; padding-left:45px} .left_gnb>li>ul>li{padding-bottom:15px} .left_gnb>li>ul>li.spec_menu{padding-bottom:45px} .left_gnb>li>ul>li.spec_menu2{padding-top:5px} .left_gnb>li>ul>li>a{display: block; text-align: left; width: 100%; color: #999; font-size:17px; font-weight:400} .left_gnb>li>ul>li>a:hover{color:#e7453a} .left_gnb>li>ul>li:last-child{padding-bottom:0} .left_gnb>li>ul>li .dumy_link{position:absolute; top:68%} .left_gnb>li>ul>li>ul>li{padding:10px 20px; font-size:14px;} .left_gnb>li>span a{ color: #214ba0; font-size: 16px; display:block; width:100%; padding:0 15px; font-weight: 600;} /*-------------------모바일 메뉴 new----------------------*/ .menu_logo_area .menu_logo_inner{overflow:hidden; margin-bottom:45px} .menu_logo_area .menu_logo_inner .menu_logo{float:left; display:block} .menu_logo_area .menu_logo_inner .show_hide {display:block; font-size:0; float:right} .menu_logo_area .menu_logo_inner .show_hide:after{content:''; display:inline-block; width:23px; height:23px; background:url(/img/main/sch_open.png) no-repeat center; background-size:cover} .menu_logo_area .menu_logo_inner .show_hide.show:after{background:url(/img/main/sch_close.png) no-repeat center; background-size:cover} .menu_logo_area .slidingDiv .hd_sch_wr{width:100%} .menu_logo_area .slidingDiv #hd_sch{border-radius:10px} .menu_logo_area .slidingDiv #hd_sch #sch_stx{width:calc(100% - 60px); border-radius:0; background:#f9f9f9; padding:0 20px; font-size:16px; height:50px; color:#666} .menu_logo_area .slidingDiv #hd_sch #sch_submit{height:50px; background:#f9f9f9; border-radius:0} .left_gnbWrap .left_gnbWrap_inner .left_gnb{position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); padding-left:40px; padding-right:40px; padding-right:70px} /*main*/ /*커튼효과*/ .curtain_panel{position:fixed; top:0; left:0; width:100%; height:100%; z-index:2; display:flex;} .curtain_panel .curtain{width: 50%; background-size:cover; position: relative; transition: transform 0.7s ease-out; display: flex; align-items: center; overflow: hidden; height:100%;} .curtain_panel .left-curtain{background:url(/img/main/curtain01.jpg) no-repeat center; background-size:cover} .curtain_panel .right-curtain{background:url(/img/main/curtain02.jpg) no-repeat center; background-size:cover} .fp-viewing-WHO_ARE_YOU .curtain_panel, .fp-viewing-HOW_TO_DO .curtain_panel, .fp-viewing-HOW_WE_MOVE .curtain_panel, .fp-viewing-WHAT_WE_DO .curtain_panel, .fp-viewing-TODAY_S_CAST .curtain_panel, .fp-viewing-LET_S_GOOD_THING .curtain_panel, .fp-viewing-7 .curtain_panel{z-index:-1} .fp-viewing-WHO_ARE_YOU .curtain_panel .left-curtain, .fp-viewing-HOW_TO_DO .curtain_panel .left-curtain, .fp-viewing-HOW_WE_MOVE .curtain_panel .left-curtain, .fp-viewing-WHAT_WE_DO .curtain_panel .left-curtain, .fp-viewing-TODAY_S_CAST .curtain_panel .left-curtain, .fp-viewing-LET_S_GOOD_THING .curtain_panel .left-curtain, .fp-viewing-COPYRIGHT .curtain_panel .left-curtain{transform: translateX(calc(-100% + -6em)) matrix3d( 0.9940959576537652, 0, 0, -0.000011310425950641302, 0, 1.0213993258986134, 0, 0.0001244146854570543, 0, 0, 1, 0, 0, 0, 0, 1 ); animation-name: open} .fp-viewing-WHO_ARE_YOU .curtain_panel .right-curtain, .fp-viewing-HOW_TO_DO .curtain_panel .right-curtain, .fp-viewing-HOW_WE_MOVE .curtain_panel .right-curtain, .fp-viewing-WHAT_WE_DO .curtain_panel .right-curtain, .fp-viewing-TODAY_S_CAST .curtain_panel .right-curtain, .fp-viewing-LET_S_GOOD_THING .curtain_panel .right-curtain, .fp-viewing-COPYRIGHT .curtain_panel .right-curtain{transform:translateX(calc(100% - -6em)) matrix3d( 1, 0, 0, 0, 0.05324357405140758, 1.0175438596491229, 0, 0.00010199918400652795, 0, 0, 1, 0, 0, 0, 0, 1 ); animation-name: open} /*메인공통*/ #fullpage{z-index:4} .section{} .section .inner_container{height:100%; display:table; position:relative} .main_content{width:100%; z-index:4; color:#fff; display:table-cell; vertical-align:middle; position:relative; padding:100px 0} .main_content.slim{padding:50px 0} /*메인콘텐츠*/ .main_content.first, .main_content.intro{transition:0.4s ease} .main_content.intro .headline{display:flex; align-items:center} .main_content.intro .headline h1{float:left; padding-bottom:10px} .main_content.intro .headline .slider-wrap{float:left; width:calc(100% - 842px); margin-left:40px; -webkit-mask-image: -webkit-gradient(linear, right 45%, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))} .main_content.intro .headline .slider-wrap .slider--vertical {position:relative; transform-origin: center left; -webkit-mask-image: -webkit-gradient(linear, left 55%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); margin-bottom:0; opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease} .main_content.intro .headline .slider-wrap .slider--vertical.slick-initialized { visibility: visible; opacity: 1} .main_content.intro .headline .slider-wrap .slider--vertical:after{content:''; width:100%; height:80px; border:8px solid #fff; position:absolute; left:0; top:50%; transform:translateY(calc(-50% + -3px))} .main_content.intro .headline .slider-wrap .slider--vertical .slick-slide{ font-size: 50px; opacity: .8; text-transform: uppercase; transform-origin: center left; transition: opacity .1s ease, transform .1s ease; text-align:center; font-family: 'GongGothicBold'; letter-spacing:1px; line-height:1.6em} .main_content.intro .headline .slider-wrap .slider--vertical .slick-current, .main_content.intro .headline .slider-wrap .slider--vertical .slick-current-clone-animate {opacity: 1} .main_content.intro .headline .slider-wrap .slider--vertical .slick-dots{bottom:auto; top:50%; transform:translateY(calc(-50% + 48px))} .main_content.intro .headline .slider-wrap .slider--vertical .slick-dots li{width:10px; height:15px} .main_content.intro .headline .slider-wrap .slider--vertical .slick-dots li button:before{display:none} .main_content.intro .headline .slider-wrap .slider--vertical .slick-dots li button{width:6px; height:6px; border-radius:6px; background:#fff; opacity:0.5; padding:0} .main_content.intro .headline .slider-wrap .slider--vertical .slick-dots li.slick-active button{width:30px; height:6px; opacity:1} .fp-viewing-MAKE_A_NEW .main_content.first{opacity:0} .fp-viewing-WHO_ARE_YOU .main_content.intro{opacity:0} .section_title{text-align:center; font-size:70px; color:#fff; font-weight:900; letter-spacing:-2px} .bold_txt{font-size:40px; text-align:center; font-weight:900; letter-spacing:-1px} .bold_txt span{color:#f0c31c; font-weight:900} .sub_title{font-size:30px; font-weight:800; letter-spacing:-1px; text-align:center} .sub_title span{font-weight:800; color:#f0c31c} .section_title + .sub_title{padding-top:30px} /*who are you?*/ .section.greeting .greeting_box{padding-top:60px; display:flex; align-items:center} .section.greeting .greeting_box .img_box{float:left; width:50%} .section.greeting .greeting_box .img_box img{margin-left:12%} .section.greeting .greeting_box .txt_box{float:left; width:50%} .section.greeting .greeting_box .txt_box p{font-size:19px; font-weight:400; line-height:1.4; padding-bottom:2em; padding-left:7.5%} .section.greeting .greeting_box .txt_box p strong{color:#f0c31c} .section.greeting .greeting_box .txt_box p:last-child{padding-bottom:0} .section.greeting .bold_txt{padding-top:45px} /*how to do*/ .section.howtodo{background:url(/img/main/cinema_bg.jpg) no-repeat center; background-size:cover} .section.howtodo .howtodo_box{padding-top:50px} .section.howtodo .howtodo_box > div{background:#fff; border-radius:40px; padding:40px; max-width:995px; width:100%; margin:0 auto 30px; position:relative} .section.howtodo .howtodo_box > div p{font-size:28px; color:#222; font-weight:800; letter-spacing:-1px; text-align:center; font-style:oblique; line-height:1.3} .section.howtodo .howtodo_box > div p span{color:#f0c31c; font-weight:800} .section.howtodo .howtodo_box > div + div + div{margin:0 auto} .section.howtodo .bold_txt{padding-top:45px} .section.howtodo .howtodo_box.style2{padding-top:0} .section.howtodo .howtodo_box.style2 > div{margin-bottom:0} .section.howtodo .howtodo_box.style2 .bold_txt{padding-bottom:45px} .section.howtodo .howtodo_box.style2 .bold_txt + div + .bold_txt + div + .bold_txt + div + .bold_txt{padding-bottom:0} .section.howtodo .howtodo_box.style2 > div p{font-size:25px; font-style:normal} .section.howtodo .howtodo_box.style2 > div:after{content:''; display:block; width:38px; height:33px; background:url(/img/main/howtodobox_bullet.png) no-repeat center; background-size:cover; position:absolute; top:-14px; left:50%; transform:translateX(-50%)} .main_devide{font-size:0; border-bottom:2px dashed rgba(240, 195, 28, 0.5); padding-top:145px} /*how we move*/ .section.marketing{background:#222} .section.marketing .marketing_box{padding-top:60px; max-width:880px; width:100%; margin:0 auto} .section.marketing .marketing_box .take_wrap .take_inner{display:flex; position:relative} .section.marketing .marketing_box .take_wrap .take_inner > div{width:50%; float:left; padding-bottom:25px; position:relative} .section.marketing .marketing_box .take_wrap .take_inner:before{content:''; display:block; width:3px; height:100%; background:#f0c31c; position:absolute; top:0; left:50%; transform:translateX(-50%)} .section.marketing .marketing_box .take_wrap .take_inner > div h2{font-family: 'Roboto', sans-serif; font-weight:700; font-style:italic; font-size:40px; color:#f0c31c; padding-top:35px; position:relative} .section.marketing .marketing_box .take_wrap .take_inner > div h2 span{display:inline-block; width:calc(100% - 170px); border-bottom:5px dotted #f0c31c; vertical-align:middle} .section.marketing .marketing_box .take_wrap .take_inner > div h2:before{content:''; width:15px; height:15px; display:block; border-radius:100%; background:#f0c31c; position:absolute; top:0} .section.marketing .marketing_box .take_wrap .take_inner .left h2:before{right:-8px} .section.marketing .marketing_box .take_wrap .take_inner .right h2:before{left:-8px} .section.marketing .marketing_box .take_wrap .take_inner > div h2:after{content:''; width:35px; height:35px; border-radius:100%; background:#fff; border:10px solid #f0c31c; position:absolute; top:40px} .section.marketing .marketing_box .take_wrap .take_inner .left h2:after{right:-18px} .section.marketing .marketing_box .take_wrap .take_inner .right h2:after{left:-18px} .section.marketing .marketing_box .take_wrap .take_inner .right h2{text-align:right} .section.marketing .marketing_box .take_wrap .take_inner > div p{font-size:18px; padding-top:10px; line-height:1.5; opacity:0.8; position:absolute;} .section.marketing .marketing_box .take_wrap .take_inner .right p{text-align:right; right:0} .section.marketing .marketing_box .take_wrap .take_inner:last-child:after{content:''; width:15px; height:15px; display:block; border-radius:100%; background:#f0c31c; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%)} .section.marketing .bold_txt{padding-top:85px} /*what we do*/ .section.whatwedo{background:#222} .section.whatwedo .whatwedo_box{padding-top:60px; display:flex; max-width:1200px; width:100%; margin:0 auto} .section.whatwedo .whatwedo_box .ticket{width:23.33%; margin-right:2.22%; background:#f0c31c} .section.whatwedo .whatwedo_box .ticket > p{text-align:center; padding: 15px 5px; border: 3px solid #222; display: block; width: 95%; margin: 60px auto 0; border-radius: 33px; color: #222; font-weight: 800; font-size: 20px} .section.whatwedo .whatwedo_box .ticket:last-child{background:#e7453a; margin-right:0} .section.whatwedo .whatwedo_box .ticket:last-child > p{color:#fff; border:3px solid #fff;} .section.whatwedo .whatwedo_box .ticket .punch{background:#f0c31c; position:relative} .section.whatwedo .whatwedo_box .ticket:last-child .punch{background:#e7453a} .section.whatwedo .whatwedo_box .ticket .punch .big_p{display:block; width:48px; height:26px; background:#222; position:absolute; left:50%; top:0; transform:translateX(-50%); border-radius:0 0 26px 26px} .section.whatwedo .whatwedo_box .ticket .punch:before{content:''; display:block; width:15px; height:7px; background:#222; position:absolute; left:-7px; border-radius:0 0 7px 7px} .section.whatwedo .whatwedo_box .ticket .punch:after{content:''; display:block; width:15px; height:7px; background:#222; position:absolute; right:-7px; border-radius:0 0 7px 7px} .section.whatwedo .whatwedo_box .ticket .punch ul{float:left; width:50%; overflow:hidden; height:7px} .section.whatwedo .whatwedo_box .ticket .punch .left li{float:left; margin-right:10px} .section.whatwedo .whatwedo_box .ticket .punch .left li:first-child{margin-left:19px} .section.whatwedo .whatwedo_box .ticket .punch .left li:last-child{margin-right:0} .section.whatwedo .whatwedo_box .ticket .punch ul li span{display:block; width:12px; height:7px; background:#222; border-radius:0 0 7px 7px} .section.whatwedo .whatwedo_box .ticket .punch .right li{float:right; margin-left:10px} .section.whatwedo .whatwedo_box .ticket .punch .right li:first-child{margin-right:19px} .section.whatwedo .whatwedo_box .ticket .punch .right li:last-child{margin-left:0} .section.whatwedo .whatwedo_box .ticket .ticket_title{font-size:40px; font-family: 'Roboto', sans-serif; font-weight:900; text-align:center; color:#000; padding-top:60px; letter-spacing:4px} .section.whatwedo .whatwedo_box .ticket:last-child .ticket_title{color:#fff} .section.whatwedo .whatwedo_box .ticket > p + p{font-size:20px; text-align:center; color:#000; font-weight:800; letter-spacing:-1px; padding:8px 0 15px} .section.whatwedo .whatwedo_box .ticket > p + p + p{padding:0} .section.whatwedo .whatwedo_box .ticket > p + p + p a{font-size:14px; font-weight:800; color:#000; display:block; max-width:200px; margin:0 auto; letter-spacing:0; width:auto; border:3px solid #000; border-radius:40px; padding:10px 20px; word-break:keep-all; cursor:default} .section.whatwedo .whatwedo_box .ticket:last-child > p + p{color:#fff} .section.whatwedo .whatwedo_box .ticket:last-child > p + p + p a{color:#fff; border:3px solid #fff} .section.whatwedo .whatwedo_box .ticket + .ticket + .ticket > p + p + p a{max-width:170px} .section.whatwedo .whatwedo_box .ticket .ticket_content{padding:20px 20px 40px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info{background:#fff; padding:30px 10px; border-radius:5px; overflow:hidden; height:185px; display:none} .section.whatwedo .whatwedo_box .ticket .ticket_content .info p{font-size:23px; font-weight:900; color:#000; text-align:center} .section.whatwedo .whatwedo_box .ticket .ticket_content .info ul{padding-top:25px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info ul li{font-size:15px; color:#666; position:relative; padding-left:15px; padding-bottom:15px; font-weight:500} .section.whatwedo .whatwedo_box .ticket .ticket_content .info ul li:before{content:''; width:12px; height:9px; background:url(/img/main/check_icon.png) no-repeat center; background-size:cover; position:absolute; left:0; top:0; display:block} .section.whatwedo .whatwedo_box .ticket .ticket_content .info ul li:last-child{padding-bottom:0} .section.whatwedo .whatwedo_box .ticket .ticket_content .img_box{border-radius:5px; overflow:hidden; height:185px} .section.whatwedo .whatwedo_box .ticket .ticket_content .img_box img{width:100%; height:100%; object-fit:cover} .section.whatwedo .whatwedo_box .ticket .ticket_content .img_box.fit_none img{object-fit:inherit} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2{background:#fff; border-radius:5px; overflow:hidden; height:185px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2 ul{padding-top:20px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2 ul li{text-align:center; color:#000; font-size:18px;; font-weight:700; position:relative; padding-bottom:12px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2 ul li:after{content:'·'; display:block; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%)} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2 ul li:last-child{padding-bottom:0} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2 ul li:last-child:after{display:none} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2 p{font-weight:900; text-align:center; color:#e7453a; font-size:25px; padding-top:15px} .section.whatwedo .whatwedo_box .ticket:hover .ticket_content .img_box{display:none} .section.whatwedo .whatwedo_box .ticket:hover .ticket_content .info{display:block} .section.whatwedo .whatwedo_box .ticket .punch.reverse{transform:rotate(180deg) translateY(-7px)} .section.whatwedo .notion_btn{max-width:275px; width:100%; height:65px; border-radius:65px; border:1px solid #fff; margin:65px auto 0; position:relative} .section.whatwedo .notion_btn:after{content:''; width:79px; height:75px; background:url(/img/main/notion_btn_icon.png) no-repeat center; background-size:cover; display:block; position:absolute; left:-15px; top:-6px} .section.whatwedo .notion_btn a{display:block; width:100%; height:100%; border-radius:65px; background:#fff; border:5px solid #000; line-height:52px; text-align:center; font-size:20px; font-weight:700; position:relative; text-indent:15px} .section.whatwedo .notion_btn a:after{content:''; width:9px; height:16px; background:url(/img/main/notion_btn_bullet.png) no-repeat center; background-size:cover; display:block; position:absolute; right:25px; top:50%; transform:translateY(-50%)} /*today's cast*/ .section.todayscast{background:#222} .section.todayscast .todayscast_box{padding-top:114px; display:flex; flex-wrap:wrap; max-width:1000px; width:100%; margin:0 auto} .section.todayscast .todayscast_box .todayscast_box_inner{float:left; width:30%; margin-right:5%; position:relative} .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(3n){margin-right:0} .section.todayscast .todayscast_box .todayscast_box_inner .profile{text-align:center; position:absolute; width:100%; top:-64px; left:0} .section.todayscast .todayscast_box .todayscast_box_inner .profile img{max-width:120px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info{background:#fff; border-radius:10px; padding:70px 10px 0; min-height:195px; position:relative} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info p{text-align:center; font-size:22px; color:#222; font-weight:900} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info p + p{font-size:15px; color:#666; font-weight:500; line-height:1.3; padding-top:15px} .section.todayscast .todayscast_box .todayscast_box_inner:last-child .profile_info{background:#f0c31c} .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(4), .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(5), .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(6){margin-top:104px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info .blank_img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1; width:60px} .section.todayscast .bold_txt{padding-top:45px} /*replay*/ .section.replay{background:url(/img/main/curtain_bg.jpg) no-repeat center; background-size:cover} .section.replay > .inner_container{display:table; height:calc(100vh - 496px)} .section.replay .main_content{display:table-cell} .section.replay .partnership_link_wrap{max-width:780px; width:100%; height:150px; background:#fff; border-radius:150px; border:5px solid #000; margin:0 auto; -webkit-box-shadow: 0px 16px 0px 0px #000000; box-shadow: 0px 16px 0px 0px #000000; cursor:pointer; position:relative; margin-top:60px} .section.replay .partnership_link_wrap:before{content:''; display:block; position:absolute; width:102px; height:104px; background:url(/img/main/slate_icon.png) no-repeat center; background-size:cover; left:35px; top:50%; transform:translateY(-50%)} .section.replay .partnership_link_wrap:after{content:''; display:block; position:absolute; width:23px; height:42px; background:url(/img/main/partnership_link_bullet.png) no-repeat center; background-size:cover; right:70px; top:50%; transform:translateY(-50%)} .section.replay .partnership_link_wrap > div{position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%)} .section.replay .partnership_link_wrap > div p{text-align:center; font-size:50px; color:#222; font-weight:900} .section.replay .partnership_link_wrap > div p + p{font-size:30px; font-weight:600; padding-top:10px} .section.replay .replay_link{text-align:center; padding-top:46px} .section.replay .replay_link a{display:inline-block; font-size:35px; color:#f0c31c; font-weight:900} .section.replay .replay_link a img{display:inline-block; vertical-align:sub; margin-right:15px} .section.replay .main_bottom_area{position:absolute; left:0; bottom:0; width:100%} .section.replay .sitemap_wrap{background:rgba(0,0,0,0.5); color:#fff} .section.replay .sitemap_wrap .sitemap_inner{display:flex; padding:50px 0} .section.replay .sitemap_wrap .sitemap_inner > div{float:left; width:20%; min-height:180px; position:relative} .section.replay .sitemap_wrap .sitemap_inner > div p{text-align:center; font-size:20px; color:#fff; font-weight:800; padding-bottom:25px} .section.replay .sitemap_wrap .sitemap_inner > div ul li{text-align:center} .section.replay .sitemap_wrap .sitemap_inner > div ul li + li{padding-top:10px} .section.replay .sitemap_wrap .sitemap_inner > div ul li a{font-size:16px; color:#fff; opacity:0.7; font-weight:500; transition:0.2s ease} .section.replay .sitemap_wrap .sitemap_inner > div ul li a:hover{opacity:1} .section.replay .sitemap_wrap .sitemap_inner > div:after{content:''; width:1px; height:100%; background:#fff; opacity:0.2; position:absolute; right:0; top:0} .section.replay .sitemap_wrap .sitemap_inner > div:first-child:before{content:''; width:1px; height:100%; background:#fff; opacity:0.2; position:absolute; left:0; top:0} .section.replay .main_footer{background:#2c3134} /*미디어쿼리*/ @media screen and (max-width: 1600px) { /*커튼효과*/ .curtain_panel .left-curtain{background-position-x:100%} .curtain_panel .right-curtain{background-position-x:0} /*let's good thing*/ .section.replay .partnership_link_wrap{max-width:630px; margin-top:40px} .section.replay .partnership_link_wrap > div p{font-size:34px} .section.replay .partnership_link_wrap > div p + p{font-size:22px} .section.replay .replay_link{padding-top:36px} .section.replay .replay_link a{font-size:30px} .section.replay .replay_link a img{width:35px} .section.replay .sitemap_wrap .sitemap_inner{padding:30px 0} .section.replay .sitemap_wrap .sitemap_inner > div p{font-size:16px} .section.replay .sitemap_wrap .sitemap_inner > div ul li a{font-size:14px} } @media screen and (max-width: 1440px) { /*main content*/ .main_content.intro .headline{padding:0 5%} .main_content.intro .headline h1{width:65%} .main_content.intro .headline .slider-wrap{width:33%; margin-left:2%} } @media screen and (max-width: 1366px) { /*모바일 메뉴 new*/ .left_gnbWrap .left_gnbWrap_inner .left_gnb{padding-left:25px; padding-right:30px} .left_gnb>li>a .menu_icon, .left_gnb>li>span .menu_icon{margin-right:5px} .left_gnb>li>a, .left_gnb>li>span{font-size:20px} .left_gnb>li>ul{padding-top:10px} .left_gnb>li{margin-bottom:35px} .left_gnb>li>ul{padding-left:35px} .left_gnb>li>ul>li{padding-bottom:10px} .left_gnb>li>ul>li>a{font-size:14px} } @media screen and (max-width: 1280px) { /*모바일 메뉴 new*/ .left_gnbWrap .left_gnbWrap_inner{padding:40px 20px} .menu_logo_area .menu_logo_inner{margin-bottom:25px;} .menu_logo_area .slidingDiv #hd_sch #sch_stx{padding:0 10px; font-size:14px; width:calc(100% - 40px)} #hd_sch #sch_submit{width:40px} /*who are you*/ .section.greeting .greeting_box .img_box{padding-left:60px} .section.greeting .greeting_box .img_box img{margin-left:0} /*what we do*/ .section.whatwedo .whatwedo_box .ticket > p{font-size:1.7vw} } @media screen and (max-width: 1024px) { /*메인공통*/ .main_content{padding:100px 30px} .section_title{font-size:50px} .bold_txt{font-size:25px} .sub_title{font-size:18px} .section_title + .sub_title{padding-top:18px} /*who are you*/ .section.greeting .greeting_box{padding-top:40px} .section.greeting .greeting_box .txt_box p{font-size:16px} .section.greeting .bold_txt{padding-top:35px} /*how to do*/ .section.howtodo .howtodo_box{padding-top:40px} .section.howtodo .howtodo_box > div{padding:25px; max-width:875px; margin:0 auto 20px; border-radius:30px} .section.howtodo .howtodo_box > div p{font-size:22px;} .section.howtodo .bold_txt{padding-top:35px} .section.howtodo .howtodo_box.style2 > div p{font-size:20px} .section.howtodo .howtodo_box.style2 .bold_txt{padding-bottom:35px} /*how we move*/ .section.marketing .marketing_box{padding-top:40px} .section.marketing .marketing_box .take_wrap .take_inner > div h2{font-size:30px; padding-top:20px} .section.marketing .marketing_box .take_wrap .take_inner > div h2 span{width:calc(100% - 140px)} .section.marketing .marketing_box .take_wrap .take_inner > div p{font-size:14px} .section.marketing .marketing_box .take_wrap .take_inner > div h2:before{width:10px; height:10px; top:-4px} .section.marketing .marketing_box .take_wrap .take_inner .left h2:before{right:-5px} .section.marketing .marketing_box .take_wrap .take_inner .right h2:before{left:-5px} .section.marketing .marketing_box .take_wrap .take_inner > div h2:after{width:25px; height:25px; border:6px solid #f0c31c; top:25px} .section.marketing .marketing_box .take_wrap .take_inner .right h2:after{left:-12px} .section.marketing .marketing_box .take_wrap .take_inner .left h2:after{right:-12px} .section.marketing .marketing_box .take_wrap .take_inner:last-child:after{width:10px; height:10px; bottom:-2px} .section.marketing .bold_txt{padding-top:65px} /*what we do*/ .section.whatwedo .whatwedo_box{padding-top:40px} .section.whatwedo .whatwedo_box .ticket .ticket_title{font-size:25px} .section.whatwedo .whatwedo_box .ticket > p + p{font-size:15px} .section.whatwedo .whatwedo_box .ticket > p + p + p a{max-width:150px; padding:10px 5px; font-size:11px} .section.whatwedo .whatwedo_box .ticket + .ticket + .ticket > p + p + p a{max-width:120px} .section.whatwedo .whatwedo_box .ticket .ticket_content{padding:20px 12px 40px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info{padding:15px 10px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info p{font-size:16px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info ul{padding-top:15px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info ul li{font-size:13px; line-height:1.2; padding-bottom:10px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2 ul li{font-size:14px; padding-bottom:10px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2 p{font-size:18px} .section.whatwedo .notion_btn{margin:45px auto 0; max-width:225px} .section.whatwedo .notion_btn a{font-size:15px} /*today's cast*/ .section.todayscast .todayscast_box .todayscast_box_inner .profile_info p{font-size:20px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info p + p{font-size:15px; word-break:keep-all} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info p + p br{display:none} .section.todayscast .bold_txt{padding-top:35px} /*let's good thing*/ .section.replay .main_bottom_area{position:static} .section.replay > .inner_container{display:block; height:auto} .section.replay .main_content{display:block} } @media screen and (max-width: 980px) { /*main content*/ .main_content.intro .headline{padding:0 12%} .main_content.intro .headline .slider-wrap .slider--vertical:after{height:22%; border:5px solid #fff; transform:translateY(calc(-50% + -5px))} .main_content.intro .headline .slider-wrap .slider--vertical .slick-dots{top:57%; transform:inherit} .main_content.intro .headline .slider-wrap .slider--vertical .slick-slide{font-size:4vw} /*who are you*/ .section.greeting .greeting_box .txt_box p{word-break:keep-all} .section.greeting .greeting_box .txt_box p br{display:none} } @media screen and (max-width: 768px) { /*메인공통*/ .bold_txt{word-break:keep-all; line-height:1.5} .sub_title{word-break:keep-all; line-height:1.5} /*main content*/ .main_content.intro .headline .slider-wrap .slider--vertical:after{border:4px solid #fff} .main_content.intro .headline .slider-wrap .slider--vertical .slick-slide{line-height:1.2em} /*who are you*/ .section.greeting .greeting_box .img_box{padding-left:7%} .section.greeting .greeting_box .txt_box p{font-size:14px; padding-right:7%} /*how to do*/ .section.howtodo .howtodo_box > div p{word-break:keep-all} .section.howtodo .howtodo_box.style2 > div p br{display:none} /*what we do*/ .section.whatwedo .whatwedo_box{flex-wrap:wrap} .section.whatwedo .whatwedo_box .ticket{width:49%; margin-right:2%} .section.whatwedo .whatwedo_box .ticket:nth-child(2n){margin-right:0} .section.whatwedo .whatwedo_box .ticket > p{font-size:3vw;} .section.whatwedo .whatwedo_box .ticket .punch .left li{margin-right:15px} .section.whatwedo .whatwedo_box .ticket .punch .right li{margin-left:15px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info{height:165px} .section.whatwedo .whatwedo_box .ticket .ticket_content .img_box{height:165px} .section.whatwedo .whatwedo_box .ticket .ticket_content .info_style2{height:165px} .section.whatwedo .whatwedo_box .ticket + .ticket + .ticket{margin-top:30px} /*today's cast*/ .section.todayscast .todayscast_box{padding-top:100px} .section.todayscast .todayscast_box .todayscast_box_inner .profile{top:-64px} .section.todayscast .todayscast_box .todayscast_box_inner .profile img{max-width:120px; width:100%} .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(4), .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(5), .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(6){margin-top:94px} /*let's good thing*/ .section.replay .partnership_link_wrap{height:120px} .section.replay .partnership_link_wrap:before{width:42px; height:43px; left:20px} .section.replay .partnership_link_wrap:after{width:13px; height:23px; right:25px} .section.replay .partnership_link_wrap > div p{font-size:26px} .section.replay .partnership_link_wrap > div p + p{font-size:18px} } @media screen and (max-width: 480px) { /*main content*/ .main_content{padding:70px 30px} .main_content.intro .headline{flex-wrap:wrap} .main_content.intro .headline h1{float:none; width:100%} .main_content.intro .headline .slider-wrap{float:none; width:100%; margin-top:10px; margin-left:0} .main_content.intro .headline .slider-wrap .slider--vertical:after{transform:translateY(calc(-50% + -2px))} .main_content.intro .headline .slider-wrap .slider--vertical .slick-slide{font-size:7vw; line-height:1.4em} /*메인공통*/ .section_title{font-size:30px} .bold_txt{font-size:18px} .sub_title{font-size:15px} /*custom menu*/ .custom_menu{width:35px; height:85px; border-top-right-radius:15px; border-bottom-right-radius:15px} .custom_menu .custom_menu_inner{border-top-right-radius:15px; border-bottom-right-radius:15px} .custom_menu .custom_menu_inner a img{width:10px} .menu_logo_area .menu_logo_inner .menu_logo img{width:120px} .menu_logo_area .slidingDiv #hd_sch #sch_stx{width:calc(100% - 40px); font-size:13px} .menu_logo_area .slidingDiv #hd_sch #sch_submit{width:40px} .left_gnbWrap{width:80%; left:-80%; border-top-right-radius:20px; border-bottom-right-radius:20px} .left_gnbWrap .left_gnbWrap_inner{border-top-right-radius:20px; border-bottom-right-radius:20px} /*who are you*/ .section.greeting .greeting_box{flex-wrap:wrap} .section.greeting .greeting_box .img_box{float:none; width:100%; padding-left:0} .section.greeting .greeting_box .txt_box{float:none; width:100%; padding-top:30px} .section.greeting .greeting_box .txt_box p{padding-left:0; padding-right:0; font-size:13px; padding-bottom:1.5em} .section.greeting .bold_txt{padding-top:25px} /*how to do*/ .section.howtodo .howtodo_box > div{padding:18px; border-radius:20px} .section.howtodo .howtodo_box > div p{font-size:16px} .section.howtodo .bold_txt{padding-top:25px} .section.howtodo .howtodo_box.style2 > div p{font-size:14px} .section.howtodo .howtodo_box.style2 .bold_txt{padding-bottom:25px} /*how we move*/ .section.marketing .marketing_box .take_wrap .take_inner:before{width:2px} .section.marketing .marketing_box .take_wrap .take_inner > div h2{font-size:18px} .section.marketing .marketing_box .take_wrap .take_inner > div h2 span{width:calc(100% - 78px); border-bottom:2px dotted #f0c31c} .section.marketing .marketing_box .take_wrap .take_inner > div p{font-size:12px; word-break:keep-all} .section.marketing .marketing_box .take_wrap .take_inner .left p{padding-right:15px} .section.marketing .marketing_box .take_wrap .take_inner .right p{padding-left:15px} .section.marketing .marketing_box .take_wrap .take_inner > div p br{display:none} .section.marketing .marketing_box .take_wrap .take_inner > div h2:before{width:6px; height:6px; top:-4px} .section.marketing .marketing_box .take_wrap .take_inner .left h2:before{right:-3px} .section.marketing .marketing_box .take_wrap .take_inner .right h2:before{left:-3px} .section.marketing .marketing_box .take_wrap .take_inner > div h2:after{width:15px; height:15px; border:3px solid #f0c31c; top:22px} .section.marketing .marketing_box .take_wrap .take_inner .right h2:after{left:-7px} .section.marketing .marketing_box .take_wrap .take_inner .left h2:after{right:-7px} .section.marketing .marketing_box .take_wrap .take_inner:last-child:after{width:6px; height:6px; bottom:-2px} .section.marketing .bold_txt{padding-top:45px} /*what we do*/ .section.whatwedo .whatwedo_box{display:block} .section.whatwedo .whatwedo_box .ticket{width:100%; margin-right:0} .section.whatwedo .whatwedo_box .ticket > p{font-size:6vw; margin:20px auto 0;} .section.whatwedo .whatwedo_box .ticket .ticket_title{padding-top:45px} .section.whatwedo .whatwedo_box .ticket .ticket_content .img_box{height:auto} .section.whatwedo .whatwedo_box .ticket .ticket_content .info{height:auto} .section.whatwedo .whatwedo_box .ticket + .ticket{margin-top:30px} .section.whatwedo .whatwedo_box .ticket .punch{padding-bottom:20px; overflow:hidden;} .section.whatwedo .whatwedo_box .ticket .punch.reverse{transform:rotate(180deg) translateY(0px)} .section.whatwedo .whatwedo_box .ticket > p + p + p a{font-size:13px; max-width:170px} .section.whatwedo .whatwedo_box .ticket + .ticket + .ticket > p + p + p a{max-width:150px} .section.whatwedo .notion_btn{height:55px} .section.whatwedo .notion_btn a{line-height:45px} .section.whatwedo .notion_btn:after{top:-12px} /*today's cast*/ .section.todayscast .todayscast_box .todayscast_box_inner{width:49%; margin-right:2%} .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(2n){margin-right:0} .section.todayscast .todayscast_box .todayscast_box_inner:nth-child(3n){margin-right:2%} .section.todayscast .todayscast_box .todayscast_box_inner:last-child{margin-right:0} .section.todayscast .todayscast_box .todayscast_box_inner + .todayscast_box_inner + .todayscast_box_inner{margin-top:100px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info{min-height:225px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info p{font-size:18px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info p + p{font-size:14px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info .blank_img{width:55px} /*let's good thing*/ .section.replay .sitemap_wrap .sitemap_inner{flex-wrap:wrap} .section.replay .sitemap_wrap .sitemap_inner > div{width:50%; padding-bottom:50px} .section.replay .sitemap_wrap .sitemap_inner > div:first-child:before, .section.replay .sitemap_wrap .sitemap_inner > div:after{display:none} .section.replay .sitemap_wrap .sitemap_inner > div:last-child{padding-bottom:0; min-height:auto} .section.replay .partnership_link_wrap{height:90px} .section.replay .partnership_link_wrap > div p{font-size:20px} .section.replay .partnership_link_wrap > div p + p{font-size:15px; padding-top:6px} } @media screen and (max-width: 414px) { /*today's cast*/ .section.todayscast .todayscast_box{padding-top:70px} .section.todayscast .todayscast_box .todayscast_box_inner + .todayscast_box_inner + .todayscast_box_inner{margin-top:70px} .section.todayscast .todayscast_box .todayscast_box_inner .profile{top:-35px} .section.todayscast .todayscast_box .todayscast_box_inner .profile img{max-width:70px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info{padding:55px 10px 0; min-height:205px} .section.todayscast .todayscast_box .todayscast_box_inner .profile_info p + p{font-size:13px} } @media screen and (max-width: 360px) { /*let's good thing*/ .section.replay .partnership_link_wrap{height:80px; -webkit-box-shadow:0px 16px 0px 0px #000000; box-shadow:0px 8px 0px 0px #000000} .section.replay .partnership_link_wrap:before{width:22px; height:23px; left:14px} .section.replay .partnership_link_wrap:after{width:9px; height:17px; right:15px} .section.replay .partnership_link_wrap > div p{font-size:16px} } /* ===== LIVEALL ===== */ .lv_hero {width: 100%; aspect-ratio: 16 / 9; max-height: 100vh; min-height: 460px; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(10,12,16,.35), rgba(10,12,16,.35)), url(../img/sub/solution_bg2.jpg) center / cover no-repeat; color: #fff;} .lv_hero_inner {padding: 0 20px;} .lv_hero_eng {font-size: 18px; letter-spacing: .25em; color: #B4A170; font-weight: 600; word-break: keep-all;} .lv_hero_tit {margin-top: 24px; font-size: 64px; line-height: 1.3; font-weight: 800; word-break: keep-all;} .lv_empty {padding: 70px 0; text-align: center; color: #888; font-size: 20px;} .lv_map_empty {height: 100%; display: flex; justify-content: center; padding-top: 200px; background: #f4f6f7; color: #888; font-size: 20px;} .lv_org {display: flex; flex-direction: column; align-items: center; gap: 24px;} .lv_org_box {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 240px; height: 140px; border-radius: 24px; background: #161b20; color: #fff;} .lv_org_box span {font-size: 16px; color: #B4A170; font-weight: 600;} .lv_org_box strong {margin-top: 8px; font-size: 28px; font-weight: 800;} .lv_org_note {color: #888; font-size: 18px;} .lv_guide {border: 10px solid #e6e9ec; border-radius: 40px; padding: 70px 80px;} .lv_guide_head h3 {font-size: 30px; font-weight: 800;} .lv_guide_head p {font-size: 30px; font-weight: 800;} .lv_guide h4 {margin: 50px 0 20px; font-size: 20px; font-weight: 700; border-top: 2px solid #222; padding-top: 14px;} .lv_guide_colors {display: flex; gap: 0; flex-wrap: wrap;} .lv_guide_colors .chip {width: 33.33%; min-height: 130px; padding: 24px; color: #222;} .lv_guide_colors .chip b {display: block; font-size: 18px;} .lv_guide_colors .chip span {display: block; margin-top: 12px; font-size: 14px; line-height: 1.6;} .lv_guide_colors .chip_w {background: #fff; border: 1px solid #ddd;} .lv_guide_logos {display: flex; gap: 20px; flex-wrap: wrap;} .lv_guide_logos .logo {flex: 1 1 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 200px; padding: 30px; border: 1px solid #eee; border-radius: 20px;} .lv_guide_logos .logo img {max-width: 100%; max-height: 90px; width: auto; height: auto;} .lv_guide_logos .logo.dark {background: #161b20; color: #fff;} .lv_guide_logos .logo p {font-size: 15px;} @media (max-width: 767px) { .lv_hero {aspect-ratio: auto; height: 520px;} .lv_hero_eng {font-size: 11px; letter-spacing: .08em;} .lv_hero_tit {font-size: 32px;} .lv_guide {padding: 40px 24px; border-width: 6px; border-radius: 24px;} .lv_guide_colors .chip {width: 100%;} }