/* word-break: keep-all; << 단어별로 끊기 */ /* backdrop-filter: blur(5px); << 블러처리 */ /* sub_home 시작 */ /* page_nav start*/ .page_nav{position: absolute; top: 80px; left: 10%; z-index: 1; width: 80%; margin: 0 auto; border-top: 1px solid #eee;} .page_nav a{font-size: 1em; color: #fff; font-weight: 600; text-shadow: 0 0 3px rgba(0,0,0,0.3);} /* page_nav end*/ /* homeBanner start */ #homeBanner{position: relative;} #homeBanner .home_banner_img{width: 100%;} #homeBanner .home_banner_img img{width: 100%;} #homeBanner .home_banner_title{position: absolute; top: 0%; left: 50%; transform: translate(-50%,-40%); opacity: 0;} #homeBanner .home_banner_title h2{text-align: center; font-size: 4.5vw; font-weight: bold;} /* homeBanner end */ /* midTitle start */ #midTitle{position: relative; background-color: #212121;} #midTitle .mid_title_inner{position: relative; width: 90%; margin: 0 auto; text-align: center; color: #f1f1f1; padding: 80px 0;} #midTitle .mid_title_inner h3{font-size: 2em; font-weight: bold; opacity: 0;} #midTitle .mid_title_inner p{margin-top: 20px; opacity: 0;} /* midTitle end */ /* homeTabs start */ #homeTabs{position: relative; background-color: #00B8FC;} #homeTabs .home_tabs{position: relative; width: 600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;} #homeTabs .home_tabs>li{height: 70px; line-height: 70px; width: 32%; cursor: pointer;} #homeTabs .home_tabs>li.tabs_select::after{height: 60px;} #homeTabs .home_tabs>li:hover::after{height: 60px;} #homeTabs .home_tabs>li::after{content: ''; bottom: 0; position: absolute; display: block; height: 0px; width: 32%; background-color: #212121; border-radius: 10px 10px 0 0 ; transition-duration: 0.5s;} #homeTabs .home_tabs>li.tabs_select>div{color: #DCFD00;} #homeTabs .home_tabs>li:hover>div{color: #DCFD00;} #homeTabs .home_tabs>li>div{position: relative; display: flex; align-items: center; color: #fff; text-align: center; justify-content: center; font-size: 1.1em; font-weight: 600; z-index: 1; transition-duration: 0.5s; line-height: 70px;} #homeTabs .home_tabs>li.tabs_select>div>div img{transform: translateY(-50%);} #homeTabs .home_tabs>li:hover>div>div img{transform: translateY(-50%);} #homeTabs .home_tabs>li>div>div{width: 20px; height: 20px; margin-left: 10px; overflow: hidden;} #homeTabs .home_tabs>li>div>div img{width: 100%;} /* tabs_banner */ #homeTabs .tabs_banner{position: relative; overflow: hidden;} #homeTabs .tabs_banner .tabs_banner_inner{position: relative; width: 300%; display: flex;} #homeTabs .tabs_banner .tabs_banner_inner li{position: relative; width: 100%;} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_img{width: 100%; position: relative; } #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_img img{width: 100%;} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title{position: absolute; width: 100%; top: 10%; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0;} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title h3{font-size: 3vw; font-weight: 600; margin-bottom: 20px;} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title p{font-size: 1.2em;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a{display: flex; justify-content: center; text-align: center; margin: 0 auto; width: 145px; height: 50px; line-height: 50px;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a::after{content: ''; display: block; width: 0px; height: 1px; position: absolute; bottom: 15px; background-color: #212121; transition-duration: 0.5s;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a:hover{font-weight: bold;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a:hover::after{width: 130px;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a img{width: 14px; height: 14px; line-height: 50px; margin-top: 18px;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a img.t_color{display: none;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(3) .tabs_banner_title>a{padding: 10px 20px; width: 140px; margin: 0 auto; border: 1px solid #212121; margin-top: 40px; display: block; text-align: center; transition-duration: 0.5s;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(3) .tabs_banner_title>a:hover{background-color: #212121; color: #DCFD00;} /* tabs_banner_under */ #homeTabs .tabs_banner .tabs_banner_under{position: relative; width: 300%; display: flex; background-color: #212121; padding: 60px 0;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap{position: relative; width: 90%; margin: 0 5%; display: flex; justify-content: space-between;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li{width: 30%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_img{width: 50%;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_img>img{width: 100%;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text{width: 90%; text-align: center; color: #f1f1f1; margin-top: 20px;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text p:first-child{font-size: 1.4em; font-weight: bold; margin-bottom: 10px;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text p{font-size: 0.9em; font-weight: normal;} /* homeTabs end */ /* viewMore start */ #viewMore{position: relative; background-color: #212121; padding-top: 40px; padding-bottom: 100px;} #viewMore ul{position: relative; width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;} #viewMore ul li{width: 32%; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; margin-top: 60px; position: relative; top: -100px; opacity: 0;} #viewMore ul li:nth-child(1), #viewMore ul li:nth-child(2){width: 26%;} #viewMore ul li:nth-child(3){width: 45%;} #viewMore ul li div{overflow: hidden;} #viewMore ul li div img{width: 100%; border-radius: 5px; transition-duration: 0.5s;} #viewMore ul li:hover div img{transform: scale(1.1);} #viewMore ul li button{position: relative; width: 50%; margin: 0 auto; margin-top: -80px; padding: 10px; border: 2px solid #212121; background-color: #212121; color: #f1f1f1; transition-duration: 0.5s; box-sizing: border-box;} #viewMore ul li button:hover{border-color: #DCFD00; color: #DCFD00;} /* viewMore end */ /* moreHome start */ #moreHome{position: relative; background-color: #f1f1f1;} #moreHome .more_home{position: relative; width: 90%; margin: 0 auto; display: flex; padding: 5% 0;} #moreHome .more_home_left{width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;} #moreHome .more_home_left h3{font-size: 3.5em; font-weight: bold;} #moreHome .more_home_left p{font-size: 1.4em; margin-top: 10px; margin-bottom: 40px;} #moreHome .more_home_left button{border: 1px solid #212121; padding: 10px 20px; background: none; color: #212121; font-weight: 600; box-sizing: border-box; transition-duration: 0.5s;} #moreHome .more_home_left button:hover{border-color: #00B8FC; background-color: #00B8FC; color: #f1f1f1; font-weight: 600;} #moreHome .more_home_right{width: 50%;} #moreHome .more_home_right .more_home_img{width: 100%;} #moreHome .more_home_right .more_home_img img{width: 100%;} /* moreHome end */ /* sub_home 끝 */ /* sub_wireless 시작 */ /* wirelessBanner start */ #wirelessBanner{position: relative;} #wirelessBanner .wireless_banner_video{width: 100%; position: relative;} #wirelessBanner .wireless_banner_video video{width: 100%;} #wirelessBanner .wireless_banner_inner{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center;} #wirelessBanner .wireless_banner_inner .wireless_banner_logo img{width: 85%; margin: 0 auto;} #wirelessBanner .wireless_banner_inner .wireless_banner_control{cursor: pointer;} #wirelessBanner .wireless_banner_inner .wireless_banner_control img{width: 85%;} #wirelessBanner .wireless_banner_inner h2{color: #fff; font-weight: bold; font-size: 5vw;} /* wirelessBanner end */ /* whatWirelss start */ #wirelessBanner span.point, #whatWirelss span.point, #graph span.point, #wirelessTabs span.point, #moreShop span.point{color: #DCFD00; font-family: 'noto sans kr'; cursor: pointer;} #whatWirelss{position: relative; background-image: url(../img/pattern_row.jpg); color: #f1f1f1; padding: 100px 0; margin-top: -10px;} #whatWirelss .what_wirelss_top{position: relative; width: 90%; max-width: 1400px; margin: 0 auto;} #whatWirelss .what_wirelss_top .what_wirelss_title{text-align: center;} #whatWirelss .what_wirelss_top .what_wirelss_title h3{font-size: 2.2em; font-weight: bold; margin-bottom: 20px; opacity: 0;} #whatWirelss .what_wirelss_top .what_wirelss_title p{opacity: 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid{position: relative; display: flex; justify-content: space-between; margin-top: 50px;} #whatWirelss .what_wirelss_top .what_wirelss_mid div{width: 50%;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:first-child{position: relative; left: -100px; opacity: 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid div>img{width: 100%;} #whatWirelss .what_wirelss_top .what_wirelss_mid div>img{width: 100%;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child{padding: 4%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; position: relative; right: -100px; opacity: 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child h4{font-size:1.5em; font-weight: bold;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child p{font-size: 1em; margin: 20px 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a{color: #fff; line-height: 20px; display: flex; transition-duration: 0.5s; width: 180px; position: relative;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a::after{content: ''; display: block; width: 180px; height: 1px; background-color: #fff; position: absolute; bottom: 0; right: 0; transition-duration: 0.5s;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a:hover::after{width: 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a:hover{color: #00B8FC;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a img{width: 20px; height: 20px; margin-left: 10px;} /*이미지 변경..*/ #whatWirelss .what_wirelss_bottom{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 60px; flex-wrap: wrap;} #whatWirelss .what_wirelss_bottom .what_wirelss_list{width: 24%; opacity: 0;} #whatWirelss .what_wirelss_bottom .what_wirelss_list img{width: 100%;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div:last-child{padding: 20px 10px; height: 200px;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div p{font-size: 0.9em; margin-bottom: 10px;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div p:first-child{font-size: 1.3em; font-weight: 600;} #whatWirelss .what_wirelss_bottom .what_wirelss_list:nth-child(1) div{background-color: rgba(204,232,17,0.6);} #whatWirelss .what_wirelss_bottom .what_wirelss_list:nth-child(2) div{background-color: rgba(89,71,155,0.6);} #whatWirelss .what_wirelss_bottom .what_wirelss_list:nth-child(3) div{background-color: rgba(95,94,94,0.6);} #whatWirelss .what_wirelss_bottom .what_wirelss_list:nth-child(4) div{background-color: rgba(97,194,189,0.6);} #whatWirelss>a{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; color: #fff; justify-content: flex-end; align-items: center; bottom: -0%; transition-duration: 0.5s;} #whatWirelss>a:hover{color: #00B8FC;} #whatWirelss>a>img{width: 15px; height: 15px; margin-left: 10px;} /* whatWirelss end */ /* graph start */ #graph span.point{color: #DCFD00; font-family: 'noto sans kr';} #graph span.white_point{color: #00B8FC;} #graph{position: relative; background-color: #212121; color: #f1f1f1; padding: 120px 0;} #graph .graph_title{position: relative; width: 50%; margin: 0 auto; text-align: center; margin-bottom: 60px;} #graph .graph_title h3{font-size: 1.5em; font-weight: bold; margin-bottom: 20px; opacity: 0;} #graph .graph_title p{opacity: 0;} #graph .graph_inner{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;} #graph .graph_inner .graph_inner_left{width: 40%; position: relative; left: -100px; opacity: 0;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>p{font-size: 1.2em; font-weight: 600; margin-bottom: 20px;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div{display: flex; margin: 10px 0;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div .g_color_box{position: relative; width: 20px; height: 20px; background-color: #eee; color: #212121; font-weight: 600; text-align: center; text-shadow: 0 0 1px #fff; margin-right: 10px;} #graph .graph_inner .graph_inner_left .graph_inner_left_top:nth-child(1)>div:nth-child(2) .g_color_box{background-color: #00B8FC;} #graph .graph_inner .graph_inner_left .graph_inner_left_top:nth-child(1)>div:nth-child(3) .g_color_box{background-color: #94E2FF;} #graph .graph_inner .graph_inner_left .graph_inner_left_bottom{margin-top: 40px;} #graph .graph_inner .graph_inner_left .graph_inner_left_bottom>div:nth-child(2) .g_color_box{background-color: #FF3500;} #graph .graph_inner .graph_inner_left .graph_inner_left_bottom>div:nth-child(3) .g_color_box{background-color: #FF4919;} #graph .graph_inner .graph_inner_left .graph_inner_left_bottom>div:nth-child(4) .g_color_box{background-color: #FF7A58;} #graph .graph_inner .graph_inner_left .graph_inner_left_bottom>div:nth-child(5) .g_color_box{background-color: #FFAF9A;} #graph .graph_inner .graph_inner_right{width: 60%; position: relative; opacity: 0;} #graph .graph_inner .graph_inner_right>p{text-align: center;} #graph .graph_inner .graph_inner_right .graph_wrap{background-color: #eee; color: #212121; padding: 30px 0;} #graph .graph_inner .graph_inner_right .graph_wrap>p{font-size: 1.5em; text-align: center; font-weight: bold; opacity: 0;} #graph .graph_inner .graph_inner_right .graph_wrap_inner{position: relative; width: 90%; margin: 0 auto; border-left: 1px solid #999; display: flex; flex-direction: column;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div{display: flex; align-items: center; height: 25px; margin: 15px 0;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div>div.stick{position: relative; display: block; width: 10%; height: 20px; background-color: #212121; padding-left: 10px; color: #212121; font-weight: 600; text-shadow: 0 0 1px #fff; } #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(1)>div.stick{width: 10px; background-color: #00B8FC;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(2)>div.stick{width: 10px; background-color: #94E2FF;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(3)>div.stick{width: 10px; background-color: #FF3500;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(4)>div.stick{width: 10px; background-color: #FF4919;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(5)>div.stick{width: 10px; background-color: #FF7A58;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(6)>div.stick{width: 10px; background-color: #FFAF9A;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(6)>div{width: 25px;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(6)>div>img{width: 100%;} /* graph end */ /* wirelessTabs start */ #wirelessTabs{position: relative; overflow: hidden; background-color: #f1f1f1;} #wirelessTabs .wireless_tabs_cover{position: relative; background-color: #00B8FC;} #wirelessTabs .wireless_tabs{position: relative; width: 600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;} #wirelessTabs .wireless_tabs>li{height: 70px; line-height: 70px; width: 32%; cursor: pointer;} #wirelessTabs .wireless_tabs>li p{line-height: 70px;} #wirelessTabs .wireless_tabs>li.tabs_select::after{height: 60px;} #wirelessTabs .wireless_tabs>li:hover::after{height: 60px;} #wirelessTabs .wireless_tabs>li::after{content: ''; bottom: 0; position: absolute; display: block; height: 0px; width: 32%; background-color: #212121; border-radius: 10px 10px 0 0 ; transition-duration: 0.5s;} #wirelessTabs .wireless_tabs>li.tabs_select>div{color: #DCFD00;} #wirelessTabs .wireless_tabs>li:hover>div{color: #DCFD00;} #wirelessTabs .wireless_tabs>li>div{position: relative; display: flex; align-items: center; color: #fff; text-align: center; justify-content: center; font-size: 1.1em; font-weight: 600; z-index: 1; transition-duration: 0.5s; line-height: 70px;} #wirelessTabs .wireless_tabs>li.tabs_select>div>div img{transform: translateY(-50%);} #wirelessTabs .wireless_tabs>li:hover>div>div img{transform: translateY(-50%);} #wirelessTabs .wireless_tabs>li>div>div{width: 20px; height: 20px; margin-left: 10px; overflow: hidden;} #wirelessTabs .wireless_tabs>li>div>div img{width: 100%;} #wirelessTabs .wireless_tabs_wrap{position: relative; width: 300%; display: flex; align-items: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner{position: relative; width: 33.333%; display: flex; flex-direction: column; justify-content: center; height: 880px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner h3{padding-bottom: 60px; text-align: center; font-size: 2.2em; font-weight: bold;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner .wireless_product_list{width: 90%; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1){position: relative; background-color: #f1f1F1; height: 880px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list_wrap{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list_wrap .wireless_product_list{position: relative; width: 200%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-around;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list li{width: 12%; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>p{display: block; text-align: center; padding: 10px 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>p:first-child{position: absolute; display: block; width: 95%; text-align: right; padding: 10px 0 0 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>div{width: 100%; border: 1px solid #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>div img{width: 100%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button{position: absolute; top: 50%; transform: translateY(-50%); border: none; background: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button.wireless_prev{right: 96%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button.wireless_next{left: 96%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2){background-image: url(../img/bolt-wireless-technology-banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 880px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>h3{font-size: 2.5em; font-weight: bold; padding-bottom: 20px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>p{font-size: 1.1em; text-align: center; font-weight: 500; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a{position: relative; display: flex; height: 40px; line-height: 40px; justify-content: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>img{height: 15px; width: 15px; margin-top: 13px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>img:last-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3){border: 1px solid #212121; width: 200px; margin: 20px auto; margin-bottom: 60px; background: none; color: #212121; transition-duration: 0.5s; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover{background-color: #212121; color: #fff;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>:nth-child(3)img:last-child{position: relative; width: 9%; margin: 0 auto; display: none} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover>img:first-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover>img:last-child{display: block; margin-top: 12px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5){position: relative; width: 140px; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>:nth-child(5)img:last-child{position: relative; width: 9%; margin: 0 auto; display: none} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5)::after{position: absolute; display: block; width: 0%; height: 1px; background-color: #fff; bottom: 10px; content: ''; left: 47%; transform: translateX(-50%); transition-duration: 0.5s;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover::after{width: 95%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover{font-weight: bold; color: #fff;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover>img:first-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover>img:last-child{display: block; margin-top: 12px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3){position: relative; background-color: #f1f1f1; padding: 20px 0; box-sizing: border-box; height: auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq{position: relative; width: 90%; max-width: 1200px; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul{position: relative;} /* #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li{padding-bottom: 60px;} */ #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li h4{line-height: 50px; border-bottom: 1px solid #ddd; margin-bottom: 20px; font-weight: 600; font-size: 1.2em; cursor: pointer;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:first-child h4{margin-top: 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>p{margin-top: 20px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul{position: relative; display: flex; justify-content: space-between;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li{width: 30%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li img{width: 100%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li>p{text-align: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>.icon{position: absolute; right: 10px; width: 15px; height: 2px; background-color: #212121; margin-top: 25px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>.icon:first-child{rotate: 90deg;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table{position: relative; width: 80%; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th:first-child{width: 10%; border: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th{width: 45%;padding: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr>td{padding: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th:first-child:after{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead::after{content: ''; display: block; position: absolute; bottom: 42.5%; left: -5%; margin-top: 45px; width: 110%; height: 1px; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th::after{content: ''; display: block; position: absolute; bottom: 0; left: -5%; margin-top: 45px; width: 110%; height: 1px; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table th::after{content: ''; display: block; position: absolute; width: 1px; height: 100%; top: 0; left: 8%; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr::after{content: ''; display: block; position: absolute; width: 1px; height: 100%; bottom: 0; right: 45.5%; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr .table_point{font-weight: 600;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>div.fold>p{margin-bottom: 50px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>div.fold{height: 0%; overflow: hidden;} /* #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:hover>div.fold{height: 100%; opacity: 1;} */ #wirelessTabs .more_faq{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; padding-bottom: 0px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner .more_faq h3{padding-top: 40px; padding-bottom: 20px;} #wirelessTabs .more_faq .more_faq_btns{position: relative; display: flex; justify-content: center;} #wirelessTabs .more_faq .more_faq_btns button{border: 1px solid #212121; background-color: #212121; display: flex; justify-content: center; align-items: center; line-height: 20px; padding: 10px 20px; color: #fff; margin: 0 10px; transition-duration: 0.5s;} #wirelessTabs .more_faq .more_faq_btns button img{width: 15px; height: 15px; margin-top: 3px; margin-left: 5px;} #wirelessTabs .more_faq .more_faq_btns button:hover{background-color: #00B8FC; border-color: #00B8FC;} /* wirelessTabs end */ /* more_shop start */ #moreShop{position: relative; min-height: 300px; background-image: url(../img/more_q_banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #moreShop .more_shop_wrap{position: relative; width: 90%; margin: 0 auto; max-width: 1400px; display: flex; justify-content: space-around; align-items: center; padding: 100px 0;} #moreShop .more_shop_wrap>div{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%;} #moreShop .more_shop_wrap>div::after{content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1px; height: 90%; background-color: #999;} #moreShop .more_shop_wrap>div p{color: #fff; font-size: 1.5em; font-weight: bold; margin: 10px 0;} #moreShop .more_shop_wrap>div button{border: 1px solid #00B8FC; background-color: #00B8FC; padding: 8px 20px; color: #fff; font-weight: 600; transition-duration: 0.5s;} #moreShop .more_shop_wrap>div button:hover{border-color: #00B8FC; background-color: #00B8FC; color: #fff; font-weight: 600;} /* more_shop end */ /* sub_wireless 끝 */ /* sub_about 시작 */ /* aboutTopBanner start */ #aboutTopBanner{position: relative; height: 100vh; background-image: url(../img/logi_about_topbanner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #aboutTopBanner .about_title{position: absolute; top: 0%; left: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center;} #aboutTopBanner .about_title h2{font-size: 3.5vw; font-weight: bold;} #aboutTopBanner .about_title h2 span{font-size: 2.1vw; font-weight: 600;} #aboutTopBanner .about_logi{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center; width: 70%; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0;} #aboutTopBanner .about_logi h3{font-size: 2.1em; font-weight: bold; margin-bottom: 30px;} #aboutTopBanner .about_logi p{font-size: 1.1em;} #aboutTopBanner .about_logi p:last-child{width: 90%; margin-top: 20px;} #aboutTopBanner .about_logi button{display: none;} /* aboutTopBanner end */ /* aboutTeam start */ #aboutTeam{position: relative; background-color: #212121; padding: 120px 0;} #aboutTeam h3{font-size: 2.1em; font-weight: bold; margin-bottom: 30px; text-align: center; color: #fff; margin-bottom: 60px;} #aboutTeam h3 span{font-size: 0.9em; font-weight: 600;} #aboutTeam .team_leader_list{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between;} #aboutTeam .team_leader_list .leaders{width: 32%; position: relative; overflow: hidden; display: block; top: 100px; opacity: 0;} #aboutTeam .team_leader_list .leaders>a{position: absolute; background-color: #fff; display: flex; padding: 2px 10px; top: 10px; transition-duration: 0.5s; opacity: 0;} #aboutTeam .team_leader_list .leaders>a:hover{background-color: #00B8FC;} #aboutTeam .team_leader_list .leaders:nth-child(2)>a:nth-child(2){transform: translateY(calc(100% + 10px));} #aboutTeam .team_leader_list .leaders .leaders_img{width: 100%;} #aboutTeam .team_leader_list .leaders .leaders_img img{width: 100%;} #aboutTeam .team_leader_list .leaders .leaders_info{position: absolute; background-color: rgba(255,255,255,0.4); width: 100%; bottom: 0; transform: translateY(50%); text-align: center; transition-duration: 0.5s;} #aboutTeam .team_leader_list .leaders .leaders_info p:first-child{font-size: 1.1em; font-weight: 500;} #aboutTeam .team_leader_list .leaders:hover>a{opacity: 1;} #aboutTeam .team_leader_list .leaders:hover .leaders_info{transform: translateY(0);} #aboutTeam .leader_controls{display: none;} /* aboutTeam end */ /* about start */ #about{position: relative; overflow: hidden; margin-top: -1px;} #about .about_wrap{position: relative; width: 400%; display: flex; left: 0%;} #about .about_wrap .about_list{position: relative; width: 25%; display: flex; justify-content: center; align-items: center; overflow: hidden;} #about .about_wrap .about_list .left_img{position: relative; width: 50%;} #about .about_wrap .about_list .left_img img{width: 100%;} #about .about_wrap .about_list .right_info{width: 50%; padding: 2.7% 4%; box-sizing: border-box;} #about .about_wrap .about_list .right_info h3{font-size: 2.1em;} #about .about_wrap .about_list .right_info p{font-size: 1.1em; margin: 20px 0;} #about .about_wrap .about_list .right_info a{display: flex; padding-left: 5px; width: 150px;} #about .about_wrap .about_list .right_info a::after{content: ''; display: block; position: absolute; width: 0; height: 1.6em; background-color: rgba(220,253,0,1); transform: translateX(-5px); z-index: -1; transition-duration: 0.5s;} #about .about_wrap .about_list .right_info a:hover::after{width: 155px;} #about .about_wrap .about_list .right_info button{position: relative; display: block; background: none; border: 1px solid #212121; color: #212121; padding: 10px 30px; transition-duration: 0.5s; box-sizing: border-box;} #about .about_wrap .about_list .right_info button:hover{color: #DCFD00; background-color: #212121;} .controls{position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; z-index: 998;} .controls li{margin: 5px 0;} .controls li.control_select a{background-color: #000; color: #fff; width: 65px;} .controls a{color: #000; background-color: #fff; padding: 2px 10px; line-height: 20px; border-radius: 12px; font-size: 0.8em; transition-duration: 0.5s; width: 30px; position: relative; display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} /* about end */ /* learnMore start */ #learnMore{position: relative; background-color: #212121; padding: 120px 0;} #learnMore h3{font-size: 2.1em; font-weight: bold; margin-bottom: 30px; text-align: center; color: #fff; margin-bottom: 60px;} #learnMore h3 span{font-size: 0.9em; font-weight: 600;} #learnMore .learn_more_wrap{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between;flex-wrap: wrap;} #learnMore .learn_more_wrap .learn_more_list{position: relative; width: 32%; margin-bottom: 25px; overflow: hidden;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_img{width: 100%;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_img img{width: 100%;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text{position: absolute; bottom: 0; text-align: center; background-color: rgba(33,33,33,0.7); width: 100%; height: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; cursor: pointer; transition-duration: 0.5s;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text h4{font-size: 1.2em; font-weight: 600;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text p{margin: 15px 5px; font-size: 0.9em; display: none;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text button{padding: 4px 20px; border: 1px solid #fff; background: none; color: #fff; transition-duration: 0.5s; display: none;} #learnMore .learn_more_wrap .learn_more_list:hover .learn_more_list_text{height: 100%;} #learnMore .learn_more_wrap .learn_more_list:hover .learn_more_list_text p{display: block;} #learnMore .learn_more_wrap .learn_more_list:hover .learn_more_list_text button{display: block;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text button:hover{background-color: #00B8FC; border-color: #00B8FC;} /* learnMore end */ /* sub_about 끝 */ /* sub_creator 시작 */ /* common */ .creator{position: relative; height: 100vh; overflow: hidden; display: flex; justify-content: center;} h2 span.color_background{font-size: 1em; font-weight: bold; color: #DCFD00; background-color: #212121; position: relative; opacity: 0;} .corner_box{display: flex; flex-direction: column; height: 5vw; width: 45%; justify-content: space-between; position: absolute; top: 0; height: 75px; width: 600px;} .left_top{display: block; position: relative; width: 20px; height: 20px; border-left: 5px solid #212121; border-top: 5px solid #212121;} .right_bottom{display: block; position: relative; width: 20px; height: 20px; border-right: 5px solid #212121; border-bottom: 5px solid #212121; align-self: flex-end;} .creator_inner_left{position: relative; width: 50%;} .creator_inner_right{position: relative; width: 50%;} /* common */ .page_nav.for_creators{display: flex;} .page_nav.for_creators a{display: flex;} .page_nav.for_creators a img{width: 100px; height: 16px; margin-left: 10px; margin-top: 3px;} .page_nav.for_creators ul{display: flex; width: 340px; justify-content: space-between; position: absolute; left: 50%; transform: translateX(-50%); color: #fff;} #creatorTopBanner{position: relative; height: 100vh; background-image: url(../img/creators_banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #creatorTopBanner .creator_banner_title{position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center;} #creatorTopBanner .creator_banner_title>h2{width: 45%; opacity: 0;} #creatorTopBanner .creator_banner_title>h2>img{width: 100%} #creatorTopBanner .creator_banner_title>div{width: 6%; margin-top: 40px;} #creatorTopBanner .creator_banner_title>div>img{width: 100%} /* creatorIcon start */ #creatorIcon{background-color: #fff;} #creatorIcon .creator_icon{position: absolute; width: 90%; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center;} /* #creatorIcon .creator_icon .corner_box{height: 75px; width: 600px;} */ #creatorIcon .creator_icon h2{font-size: 3.5em; font-weight: bold;} #creatorIcon .creator_icon .icons{position: relative; display: flex; justify-content: space-between; width: 600px; margin-top: 40px;} #creatorIcon .creator_icon .icons li{width: 10%; top: 50px; position: relative; opacity: 0;} #creatorIcon .creator_icon .icons li img{width: 100%;} /* creatorintro start */ #creatorintro{background-color: #212121;} #creatorintro h2{font-size: 3.5em; font-weight: bold; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; text-align: center; word-break: keep-all;} /* creatorintro end */ /* creatorLevel start */ #creatorLevel{background-color: #9A3B92; align-items: center;} #creatorLevel .creator_level{position: relative; max-width: 1400px; margin: 0 auto; display: flex; color: #fff;} #creatorLevel .creator_level .creator_level_left{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: 10%; width: 100%; opacity: 0;} #creatorLevel .creator_level .creator_level_left h2{font-size: 3em; font-weight: bold;} #creatorLevel .creator_level .creator_level_left .corner_box{width: 470px; top: 0%; left: -3%;} #creatorLevel .creator_level .creator_level_left .corner_box>div{border-color: #fff;} #creatorLevel .creator_level .creator_level_left p{margin: 40px 0; width: 90%; font-size: 1.2em;} #creatorLevel .creator_level .creator_level_left button{border: 1px solid #fff; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; border-radius: 30px; font-size: 1.1em; color: #9A3B92; font-weight: bold;} #creatorLevel .creator_level .creator_level_left button img{width: 25px; margin-right: 10px; padding-bottom: 5px;} #creatorLevel .creator_level .creator_level_right>div{width: 50%; margin: 20px 0;} #creatorLevel .creator_level .creator_level_right>div>img{width: 100%;} #creatorLevel .create_tag{position: absolute; bottom: 10%; right: -180px; background-color: #fff; color: #9A3B92; height: 90px; width: 180px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; opacity: 0;} #creatorLevel .create_tag>p{margin: 5px 0; margin-right: 10%; font-size: 1.2em;} #creatorLevel .create_tag>a{display: flex; align-items: center; margin: 5px 0; margin-right: 10%; color: #9A3B92;} #creatorLevel .create_tag>a>img{width: 25px; padding-bottom: 5px; margin-right: 5px;} /* creatorLevel end */ /* creatorCam start */ #creatorCam{background-color: #fff} #creatorCam .creator_cam{position: relative; max-width: 1400px; color: #212121; display: flex; justify-content: center; align-items: center;} #creatorCam .creator_cam .creator_cam_left{position: relative; transform: translateX(-100%); bottom: -175px; opacity: 0;} #creatorCam .creator_cam .creator_cam_left>div{height: 70%;} #creatorCam .creator_cam .creator_cam_left>div img{height: 100%;} #creatorCam .creator_cam .creator_cam_right{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 50%; position: absolute; right: 0%; top: 50%; transform: translateY(-50%); opacity: 0;} #creatorCam .creator_cam .creator_cam_right h2{font-size: 3em; font-weight: bold;} #creatorCam .creator_cam .creator_cam_right .corner_box{width: 315px; top: 0; left: -5%; height: 70px;} #creatorCam .creator_cam .creator_cam_right .corner_box>div{border-color: #212121;} #creatorCam .creator_cam .creator_cam_right p{margin: 40px 0; font-size: 1.2em;} #creatorCam .creator_cam .creator_cam_right button{border: 1px solid #212121; background-color: #212121; display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; border-radius: 30px; font-size: 1.1em; color: #fff; font-weight: bold;} /* creatorCam end */ /* creatorFriskk start */ #creatorFriskk{background-color: #DE9521;} #creatorFriskk .creator_friskk{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; color: #212121; justify-content: flex-end;} #creatorFriskk .creator_friskk .creator_friskk_left{display: flex; flex-direction: column; justify-content: center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title{display: flex; flex-direction: column; justify-content: center;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title p{font-size: 1.2em; font-weight: 600;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title h2{font-size: 5em; font-weight: bold; color: #fff;} #creatorFriskk .creator_friskk .creator_friskk_left div:last-child{display: flex; align-items: center; width: 90%; margin-top: 80px;} #creatorFriskk .creator_friskk .creator_friskk_left div:last-child p{font-size: 1.2em; margin-left: 20px;} #creatorFriskk .creator_friskk .creator_friskk_right{right: -2.5%;} #creatorFriskk .creator_friskk .creator_friskk_right div{height: 90%; position: relative; top: calc(100vh - 90%); display: flex; justify-content: center;} #creatorFriskk .creator_friskk .creator_friskk_right div img{height: 100%;} #creatorFriskk .create_tag{background-color: #fff; color: #DE9521; position: absolute; bottom: 10%; right: -180px; width: 180px; height: 90px; display: flex; flex-direction: column; justify-content: center; opacity: 0;} #creatorFriskk .create_tag p{font-size: 1.2em; margin: 5px 0; margin-left: 10%;} #creatorFriskk .create_tag a{margin: 5px 0; color: #DE9521; display: flex; margin-left: 10%;} #creatorFriskk .create_tag a img{margin-right: 5px;} /* creatorFriskk end */ /* creatorMike start */ #creatorMike{background-image: url(../img/creators_mike_bg.jpg); background-position: right bottom; background-repeat: no-repeat; background-size: cover;} #creatorMike .creator_mike{position: relative; width: 90%; margin: 0 auto; color: #fff;} #creatorMike .creator_mike h2{font-size: 3em; font-weight: bold; text-align: center; margin: 40px 0; margin-top: 100px; color: #DCFD00;} #creatorMike .creator_mike .corner_box{top: 10%; left: 50%; transform: translate(-50%); width: 380px;} #creatorMike .creator_mike .corner_box>div{border-color: #DCFD00;} #creatorMike .creator_mike .creator_mike_wrap{display: flex; justify-content: space-between; align-items: center;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left{display: flex; flex-direction: column; align-items: center;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left .creator_mike_left_img{height: 50%; position: relative;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left .creator_mike_left_img img{height: 100%;} #creatorMike .create_tag{position: absolute; bottom: 10%; left: calc(-180px - 6%); width: 180px; height: 80px; background-color: #DCFD00; color: #212121; display: flex; flex-direction: column; justify-content: center;} #creatorMike .create_tag p{margin-left: 10%; font-size: 1.1em; font-weight: bold;} #creatorMike .create_tag a{display: flex; margin: 5px 0; margin-left: 10%;} #creatorMike .create_tag a img{width: 25px; height: 18px; margin-top: 2px; margin-right: 5px;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right{display: flex; flex-direction: column; justify-content: center; padding-left: 5%; box-sizing: border-box; transform: translateY(-50%); opacity: 0;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right>div{display: flex; align-items: flex-start;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right>div>div:last-child{margin-left: 20px;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right>div>div>h3{font-size: 2.5em; font-weight: bold; text-shadow: 0 0 6px rgba(0,0,0,1);} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right>div>div>p{margin: 10px 0; font-size: 2.2em; color: #DCFD00; font-weight: bold;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right>div>div>button{padding: 10px 40px; border-radius: 20px; border: 1px solid #DCFD00; background-color: #DCFD00; font-weight: bold; font-size: 1.1em;} /* creatorMike end */ /* creatorCrew start */ #creatorCrew{position: relative; width: 100%; height: auto; background-color: #f1f1f1; display: flex; flex-direction: column;} .creator_crew{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; padding: 120px 0; overflow: hidden;} .creator_crew h2{font-size: 2.5em; text-align: center; font-weight: bold; margin-bottom: 40px;} .creator_crew h2 span{font-size: 1em; font-weight: bold; color: #00B8FC;} .creator_crew .crew_list_wrap{position: relative; display: flex; width: 280%;} /*left: -34%;*/ .creator_crew .crew_list_wrap .crew_list{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 12%; padding: 0 0.25%; opacity: 0; box-sizing: border-box; position: relative;} /* .creator_crew .crew_list_wrap .crew_list:last-child{margin-right: 0;} */ .creator_crew .crew_list_wrap .crew_list .crew_list_img{width: 100%;} .creator_crew .crew_list_wrap .crew_list .crew_list_img img{width: 100%;} .creator_crew .crew_list_wrap .crew_list .crew_list_info{display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; background-color: #212121; width: 100%; color: #fff; padding: 10px 0;} .creator_crew .crew_list_wrap .crew_list .crew_list_info p{font-size: 1.4em; font-weight: 600;} .creator_crew .crew_list_wrap .crew_list .crew_list_info a{display: flex; color: #DCFD00; align-items: center;} .creator_crew .crew_list_wrap .crew_list .crew_list_info a img{width: 20px; height: 20px; margin-right: 10px; margin-top: 2px;} #creatorCrew .crew_btns{position: absolute; width: 100%; display: flex; justify-content: space-between; top: 50%; left: 50%; transform: translateX(-50%);} #creatorCrew .crew_btns button{background: none; border: none;} /* creatorCrew end */ /* sub_creator 끝 */ /* PC */ @media screen and (min-width:1201px){ #homeBanner{position: relative;} #wirelessBanner{position: relative;} #aboutTopBanner{position: relative;} #creatorTopBanner{position: relative;} #wirelessBanner{position: relative;} } /* 타블랫 가로 */ @media screen and (min-width:801px) and (max-width:1200px){ /* page_nav start*/ .page_nav{top: 60px;} .page_nav a{font-size: 1em;} /* page_nav end*/ /* sub_home 시작 */ #homeBanner{min-height: 300px; background-image: url(../img/home_banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #homeBanner .home_banner_img img{display: none;} #homeTabs .home_tabs>li{height: 60px; line-height: 60px; font-size: 1em;} #homeTabs .home_tabs>li.tabs_select::after{height: 50px;} #homeTabs .home_tabs>li:hover::after{height: 50px;} #homeTabs .home_tabs>li>a{line-height: 60px; font-size: 1em;} /* homeTabs start */ #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title h3{font-size: 2em; font-weight: 600; margin-bottom: 10px;} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title p{font-size: 1em;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a{display: flex; justify-content: space-between; text-align: center; margin: 0 auto; width: 145px; height: 50px; line-height: 50px; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,1);} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a::after{content: ''; display: block; width: 0px; height: 1px; position: absolute; bottom: 10px; background-color: #fff; transition-duration: 0.5s;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a:hover{font-weight: bold;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a img{display: none; width: 10px; height: 10px; line-height: 50px; margin-top: 20px;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a img.t_color{display: block; position: relative; left: -14px;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(3) .tabs_banner_title>a{padding: 10px 20px; background-color: #fff; border: 1px solid #212121; margin-top: 20px;} /* tabs_banner_under */ #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap{margin: 0; display: flex; justify-content: space-between;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li{width: 33%;} /* homeTabs end */ /* viewMore start */ #viewMore{padding-top: 0px;} #viewMore ul li{margin-top: 40px;} #viewMore ul li button{position: relative; width: 60%; margin: 0 auto; margin-top: -60px; padding: 8px 10px; border: 2px solid #212121; background-color: #212121; color: #f1f1f1; transition-duration: 0.5s; box-sizing: border-box; font-size: 0.9em;} #viewMore ul li button:hover{border-color: #DCFD00; color: #DCFD00;} /* viewMore end */ /* moreHome start */ #moreHome .more_home_left h3{font-size: 2.2em; font-weight: bold;} #moreHome .more_home_left p{font-size: 1em; margin-top: 10px; margin-bottom: 20px;} #moreHome .more_home_left button{border: 1px solid #212121; padding: 8px 20px; background: none; color: #212121; font-size: 0.9em; font-weight: 600; box-sizing: border-box; transition-duration: 0.5s;} /* sub_home 끝 */ /* sub_wireless 시작 */ #whatWirelss span.point{color: #DCFD00; font-family: 'noto sans kr'; cursor: alias; font-size: 1em;} /* wirelessBanner start */ #wirelessBanner .wireless_banner_inner .wireless_banner_logo img{width: 70%; margin: 0 auto;} #wirelessBanner .wireless_banner_inner .wireless_banner_control img{width: 70%; margin: 0 auto;} #wirelessBanner .wireless_banner_inner h2{color: #fff; font-weight: bold; font-size: 6vw;} /* wirelessBanner end */ /* whatWirelss start */ #whatWirelss{padding: 100px 0; margin-top: -10px;} #whatWirelss .what_wirelss_top .what_wirelss_title h3{font-size: 2em; font-weight: bold; margin-bottom: 20px;} #whatWirelss .what_wirelss_top .what_wirelss_mid{margin-top: 50px;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child{padding: 0 2%;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child h4{font-size:1.3em; font-weight: bold;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child p{font-size: 1em; margin: 15px 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a{color: #fff; line-height: 20px; display: flex;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a:hover{color: #00B8FC;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a img{width: 20px; height: 20px; margin-left: 10px;} /*이미지 변경..*/ #whatWirelss .what_wirelss_bottom{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 60px; flex-wrap: wrap;} #whatWirelss .what_wirelss_bottom .what_wirelss_list{width: 49%; margin-bottom: 2%;} #whatWirelss .what_wirelss_bottom .what_wirelss_list img{width: 100%;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div:last-child{padding: 20px 10px; height: 160px;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div p{font-size: 0.9em; margin-bottom: 10px;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div p:first-child{font-size: 1.3em; font-weight: 600;} #whatWirelss .what_wirelss_bottom .what_wirelss_list:nth-child(1) div{background-color: rgba(204,232,17,0.6);} #whatWirelss .what_wirelss_bottom .what_wirelss_list:nth-child(2) div{background-color: rgba(89,71,155,0.6);} #whatWirelss .what_wirelss_bottom .what_wirelss_list:nth-child(3) div{background-color: rgba(95,94,94,0.6);} #whatWirelss .what_wirelss_bottom .what_wirelss_list:nth-child(4) div{background-color: rgba(97,194,189,0.6);} #whatWirelss>a{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; color: #fff; justify-content: flex-end; align-items: center; bottom: -0%;} #whatWirelss>a:hover{color: #00B8FC;} #whatWirelss>a>img{width: 15px; height: 15px; margin-left: 10px;} /* whatWirelss end */ /* graph start */ #graph{position: relative; background-color: #212121; color: #f1f1f1; padding: 100px 0;} #graph .graph_title{position: relative; width: 90%; margin-bottom: 50px;} #graph .graph_title h3{font-size: 1.5em; font-weight: bold; margin-bottom: 20px;} #graph .graph_inner{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: center;} #graph .graph_inner .graph_inner_left{width: 100%; position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 40px;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>p{font-size: 1.1em; font-weight: 600; margin-bottom: 15px;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div{display: flex; margin: 10px 0;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div>p{font-size: 0.9em;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div .g_color_box{width: 20px; height: 20px;} #graph .graph_inner .graph_inner_left .graph_inner_left_bottom{margin-top: 0px;} #graph .graph_inner .graph_inner_right{width: 100%; position: relative; margin-top: 0px;} #graph .graph_inner .graph_inner_right .graph_wrap{padding: 20px 0;} #graph .graph_inner .graph_inner_right .graph_wrap>p{font-size: 1.5em;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div{height: 25px; margin: 10px 0;} /* graph end */ /* wirelessTabs start */ #wirelessTabs .wireless_tabs{position: relative; width: 600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;} #wirelessTabs .wireless_tabs>li{height: 70px; line-height: 70px; width: 32%; cursor: pointer;} #wirelessTabs .wireless_tabs>li.tabs_select::after{height: 60px;} #wirelessTabs .wireless_tabs>li:hover::after{height: 60px;} #wirelessTabs .wireless_tabs>li::after{content: ''; bottom: 0; position: absolute; display: block; height: 0px; width: 32%; background-color: #212121; border-radius: 10px 10px 0 0 ; transition-duration: 0.5s;} #wirelessTabs .wireless_tabs>li>div{position: relative; display: flex; align-items: center; color: #fff; text-align: center; justify-content: center; font-size: 1.1em; font-weight: 600; z-index: 1; transition-duration: 0.5s; line-height: 70px;} #wirelessTabs .wireless_tabs>li.tabs_select>div>div img{transform: translateY(-50%);} #wirelessTabs .wireless_tabs>li:hover>div>div img{transform: translateY(-50%);} #wirelessTabs .wireless_tabs>li>div>div{width: 20px; height: 20px; margin-left: 10px; overflow: hidden;} #wirelessTabs .wireless_tabs_wrap{position: relative; width: 300%; display: flex; align-items: center; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner{position: relative; width: 33.333%; display: flex; flex-direction: column; justify-content: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner h3{padding-bottom: 50px; text-align: center; font-size: 2.2em; font-weight: bold;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner .wireless_product_list{width: 90%; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1){position: relative; background-color: #f1f1F1; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list_wrap{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list_wrap .wireless_product_list{position: relative; width: 266.664%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-around;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list li{width: 12%; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>p{display: block; text-align: center; padding: 10px 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>p:first-child{position: absolute; display: block; width: 95%; text-align: right; padding: 10px 0 0 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>div{width: 100%; border: 1px solid #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>div img{width: 100%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button{position: absolute; top: 50%; transform: translateY(-50%); border: none; background: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button.wireless_prev{right: 94%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button.wireless_next{left: 94%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2){background-image: url(../img/bolt-wireless-technology-banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>h3{font-size: 2.5em; font-weight: bold; padding-bottom: 20px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>p{font-size: 1.1em; text-align: center; font-weight: 500; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a{position: relative; display: flex; height: 40px; line-height: 40px; justify-content: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>img{height: 15px; width: 15px; margin-top: 13px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>img:last-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3){border: 1px solid #212121; width: 200px; margin: 20px auto; margin-bottom: 60px; background: none; color: #212121; transition-duration: 0.5s; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover{background-color: #212121; color: #fff;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>:nth-child(3)img:last-child{position: relative; width: 9%; margin: 0 auto; display: none} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover>img:first-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover>img:last-child{display: block; margin-top: 12px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5){position: relative; width: 140px; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>:nth-child(5)img:last-child{position: relative; width: 9%; margin: 0 auto; display: none} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5)::after{position: absolute; display: block; width: 0%; height: 1px; background-color: #fff; bottom: 10px; content: ''; left: 47%; transform: translateX(-50%); transition-duration: 0.5s;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover::after{width: 95%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover{font-weight: bold; color: #fff;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover>img:first-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover>img:last-child{display: block; margin-top: 12px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3){position: relative; background-color: #f1f1f1;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3) h3{font-size: 2em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq{position: relative; width: 90%; max-width: 1200px; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul{position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li{ cursor: pointer;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li h4{line-height: 40px; border-bottom: 1px solid #ddd; margin-bottom: 20px; font-weight: 600; font-size: 1.1em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:first-child h4{margin-top: 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>p{margin-top: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul{position: relative; display: flex; justify-content: space-between;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li{width: 30%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li img{width: 100%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li>p{text-align: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>.icon{position: absolute; right: 10px; width: 15px; height: 2px; background-color: #212121; margin-top: 25px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>.icon:first-child{rotate:90deg;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table{position: relative; width: 80%; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th:first-child{width: 10%; border: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th{width: 45%;padding: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr>td{padding: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th:first-child:after{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead::after{content: ''; display: block; position: absolute; bottom: 42.5%; left: -5%; margin-top: 45px; width: 110%; height: 1px; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th::after{content: ''; display: block; position: absolute; bottom: 0; left: -5%; margin-top: 45px; width: 110%; height: 1px; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table th::after{content: ''; display: block; position: absolute; width: 1px; height: 100%; top: 0; left: 8%; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr::after{content: ''; display: block; position: absolute; width: 1px; height: 100%; bottom: 0; right: 45.5%; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr .table_point{font-weight: 600;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>div.fold>p{margin-bottom: 30px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>div.fold{height: 0; overflow: hidden;} /* #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:hover>div.fold{height: 100%; opacity: 1;} */ #wirelessTabs .more_faq{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; padding-bottom: 0px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner .more_faq h3{padding-top: 30px; padding-bottom: 10px; font-size: 1.8em;} #wirelessTabs .more_faq .more_faq_btns{position: relative; display: flex; justify-content: center;} #wirelessTabs .more_faq .more_faq_btns button{border: 1px solid #212121; background-color: #212121; display: flex; justify-content: center; align-items: center; padding: 5px 10px; color: #fff; font-size: 0.9em; margin: 0 5px; transition-duration: 0.5s;} #wirelessTabs .more_faq .more_faq_btns button img{margin-top: 0px;} #wirelessTabs .more_faq .more_faq_btns button:hover{background-color: #00B8FC; border-color: #00B8FC;} /* wirelessTabs end */ /* more_shop start */ #moreShop{min-height: 100px;} #moreShop .more_shop_wrap>div p{font-size: 1.4em;} #moreShop .more_shop_wrap>div button{padding: 5px 20px;} /* more_shop end */ /* sub_wireless 끝 */ /* sub_about 시작 */ /* aboutTopBanner start */ #aboutTopBanner .about_title h2{font-size: 3em; font-weight: bold;} #aboutTopBanner .about_title h2 span{font-size: 0.9em; font-weight: 600;} #aboutTopBanner .about_logi{width: 90%;} /* aboutTopBanner end */ /* learnMore start */ #learnMore .learn_more_wrap .learn_more_list{margin-bottom: 20px;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text h4{font-size: 1em;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text p{margin: 5px; font-size: 0.8em;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text button{padding: 2px 15px; font-size: 0.8em; border: 1px solid #fff; background: none; color: #fff; transition-duration: 0.5s; display: none;} /* learnMore end */ /* sub_about 끝 */ /* sub_creator 시작 */ .page_nav.for_creators ul{width: 260px;} .page_nav.for_creators ul li{font-size: 0.9em;} #creatorTopBanner .creator_banner_title>h2{width: 55%} #creatorTopBanner .creator_banner_title>div{width: 7%; margin-top: 20px;} /* common */ #creatorTopBanner{height: 800px;} .creator{position: relative; height: 800px; overflow: hidden; display: flex; justify-content: center;} h2 span.color_background{font-size: 1em; font-weight: bold; color: #DCFD00; background-color: #212121;} .corner_box{display: flex; flex-direction: column; height: 5vw; width: 45%; justify-content: space-between; position: absolute; top: 0; height: 75px; width: 550px;} .left_top{display: block; position: relative; width: 20px; height: 20px; border-left: 4px solid #fff; border-top: 4px solid #ffff;} .right_bottom{display: block; position: relative; width: 20px; height: 20px; border-right: 4px solid #212121; border-bottom: 4px solid #212121; align-self: flex-end;} .creator_inner_left{position: relative; width: 50%;} .creator_inner_right{position: relative; width: 50%;} /* common */ /* creatorIcon start */ #creatorIcon .creator_icon{position: absolute; width: 90%; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center;} #creatorIcon .creator_icon h2{font-size: 3em;} #creatorIcon .creator_icon .icons{width: 500px; margin-top: 40px;} #creatorIcon .left_top{display: block; position: relative; width: 20px; height: 20px; border-left: 5px solid #212121; border-top: 5px solid #212121;} #creatorIcon .right_bottom{display: block; position: relative; width: 20px; height: 20px; border-right: 5px solid #212121; border-bottom: 5px solid #212121; align-self: flex-end;} /* creatorintro start */ #creatorintro h2{font-size: 2.5em;} /* creatorintro end */ /* creatorLevel start */ #creatorLevel .creator_level .creator_level_left{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: 5%;} #creatorLevel .creator_level .creator_level_left h2{font-size: 2.2em; font-weight: bold;} #creatorLevel .creator_level .creator_level_left .corner_box{width: 350px; height: 60px; top: -3%; left: -4.5%;} #creatorLevel .creator_level .creator_level_left p{margin: 30px 0; font-size: 1em;} #creatorLevel .creator_level .creator_level_left button{padding: 5px 20px; font-size: 1em;} #creatorLevel .creator_level .creator_level_left button img{width: 25px; margin-right: 10px; padding-bottom: 5px;} #creatorLevel .create_tag{height: 80px; width: 150px;} #creatorLevel .create_tag>p{font-size: 1.1em;} #creatorLevel .create_tag>a{font-size: 0.9em;} #creatorLevel .create_tag>a>img{width: 20px;} /* creatorLevel end */ /* creatorCam start */ #creatorCam{background-color: #fff} #creatorCam .creator_cam{position: relative; width: 90%; margin: 0 auto; max-width: 1400px; color: #212121; display: flex; justify-content: center; align-items: center;} #creatorCam .creator_cam .creator_cam_left{position: relative; transform: translateX(0%); bottom: -180px; width: 100%;} #creatorCam .creator_cam .creator_cam_left>div{width: 100%;} #creatorCam .creator_cam .creator_cam_left>div img{width: 100%;} #creatorCam .creator_cam .creator_cam_right{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 70%; position: absolute; right: 0%; top: 50%; transform: translate(-30%, -50%);} #creatorCam .creator_cam .creator_cam_right h2{font-size: 2.2em;} #creatorCam .creator_cam .creator_cam_right .corner_box{width: 240px; top: -5%; left: 50%; transform: translateX(-50%);} #creatorCam .creator_cam .creator_cam_right p{margin: 20px 0; font-size: 1em; text-align: center;} #creatorCam .creator_cam .creator_cam_right button{padding: 10px 20px; border-radius: 30px; font-size: 1em;} /* creatorCam end */ /* creatorFriskk start */ #creatorFriskk{background-color: #DE9521;} #creatorFriskk .creator_friskk{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; color: #212121; justify-content: flex-end;} #creatorFriskk .creator_friskk .creator_friskk_left{display: flex; flex-direction: column; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; width: 90%;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title{display: flex; flex-direction: column; justify-content: center;} #creatorFriskk .creator_friskk .creator_friskk_left img{width: 100%;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title p{font-size: 1.1em; font-weight: 600;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title h2{font-size: 4.5em; font-weight: bold; color: #fff; text-shadow: 0 0 9px rgba(222,149,33,1);} #creatorFriskk .creator_friskk .creator_friskk_left div:last-child{display: flex; align-items: center; width: 100%; margin-top: 40px;} #creatorFriskk .creator_friskk .creator_friskk_left div:last-child p{font-size: 1.2em; margin-left: 20px; color: #fff; background-color: rgba(222,149,33,0.7);} #creatorFriskk .creator_friskk .creator_friskk_right{right: -2.5%;} #creatorFriskk .creator_friskk .creator_friskk_right div{height: 90%; position: relative; top: calc(10%); display: flex; justify-content: center;} #creatorFriskk .creator_friskk .creator_friskk_right div img{height: 100%;} #creatorFriskk .create_tag{background-color: #fff; color: #DE9521; position: absolute; bottom: 10%; right: 0%; width: 180px; height: 90px; display: flex; flex-direction: column; justify-content: center;} #creatorFriskk .create_tag p{font-size: 1.2em; margin: 5px 0; margin-left: 10%;} #creatorFriskk .create_tag a{margin: 5px 0; color: #DE9521; display: flex; margin-left: 10%;} #creatorFriskk .create_tag a img{margin-right: 5px;} /* creatorFriskk end */ /* creatorMike start */ #creatorMike{background-image: url(../img/creators_mike_bg.jpg); background-position: right bottom; background-repeat: no-repeat; background-size: cover;} #creatorMike .creator_mike{position: relative; width: 90%; margin: 0 auto; color: #fff;} #creatorMike .creator_mike h2{font-size: 3em; font-weight: bold; text-align: center; margin: 40px 0; margin-top: 80px; color: #DCFD00;} #creatorMike .creator_mike .corner_box{top: 9%; left: 50%; transform: translate(-50%); width: 380px;} #creatorMike .creator_mike .corner_box>div{border-color: #DCFD00;} #creatorMike .creator_mike .creator_mike_wrap{display: flex; justify-content: flex-start; align-items: flex-start;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left{display: flex; flex-direction: column; align-items: center; transform: translateY(10%);} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left div{width: 130%;;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left div img{width: 100%;} #creatorMike .create_tag{position: absolute; bottom: 10%; left: -6%; width: 180px; height: 80px; background-color: #DCFD00; color: #212121; display: flex; flex-direction: column; justify-content: center;} #creatorMike .create_tag p{margin-left: 10%; font-size: 1.1em; font-weight: bold;} #creatorMike .create_tag a{display: flex; margin: 5px 0; margin-left: 10%;} #creatorMike .create_tag a img{width: 25px; height: 18px; margin-top: 2px; margin-right: 5px;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right{display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-left: 5%; box-sizing: border-box; transform: translateY(100%); position: absolute; right: 0; width: 65%;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right>div{display: flex; align-items: flex-start;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div:last-child{margin-left: 0px;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div img{width: 80%;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div h3{font-size: 2em; font-weight: bold; text-shadow: 0 0 6px rgba(0,0,0,1);} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div p{margin: 10px 0; font-size: 1.8em; color: #DCFD00; font-weight: bold;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div button{padding: 10px 20px; border-radius: 20px; border: 1px solid #DCFD00; background-color: #DCFD00; font-weight: bold; font-size: 1em;} /* creatorMike end */ /* creatorCrew start */ #creatorCrew{position: relative; width: 100%; height: auto; background-color: #f1f1f1; display: flex; flex-direction: column;} .creator_crew{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; padding: 100px 0; overflow: hidden;} .creator_crew h2{font-size: 2.2em; text-align: center; font-weight: bold; margin-bottom: 40px;} .creator_crew h2 span{font-size: 1em; font-weight: bold; color: #00B8FC;} .creator_crew .crew_list_wrap{position: relative; display: flex; width: 280%;} .creator_crew .crew_list_wrap .crew_list{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 12%; padding: 0 0.25%; box-sizing: border-box;} .creator_crew .crew_list_wrap .crew_list:last-child{margin-right: 0;} .creator_crew .crew_list_wrap .crew_list .crew_list_img{width: 100%;} .creator_crew .crew_list_wrap .crew_list .crew_list_img img{width: 100%;} .creator_crew .crew_list_wrap .crew_list .crew_list_info{display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; background-color: #212121; width: 100%; color: #fff; padding: 5px 0;} .creator_crew .crew_list_wrap .crew_list .crew_list_info p{font-size: 1.2em; font-weight: 600;} /* creatorCrew end */ /* sub_creator 끝 */ } /* 타블랫 세로 */ @media screen and (min-width:601px) and (max-width:800px){ /* page_nav start*/ .page_nav{top: 60px;} .page_nav a{font-size: 0.9em;} /* page_nav end*/ /* sub_home 시작 */ #homeBanner{min-height: 300px; background-image: url(../img/home_banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #homeBanner .home_banner_img img{display: none;} #homeTabs .home_tabs{width: 90%;} #homeTabs .home_tabs>li{height: 60px; line-height: 60px; font-size: 0.9em;} #homeTabs .home_tabs>li.tabs_select::after{height: 50px;} #homeTabs .home_tabs>li:hover::after{height: 50px;} #homeTabs .home_tabs>li>a{line-height: 60px; font-size: 1em;} /* midTitle start */ #midTitle .mid_title_inner{padding: 60px 0;} #midTitle .mid_title_inner h3{font-size: 1.8em; font-weight: bold;} #midTitle .mid_title_inner p{font-size: 0.9em;} /* midTitle end */ /* homeTabs start */ #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title h3{font-size: 1.5em; margin-bottom: 20px; color: #f1f1f1; text-shadow: 0 0 5px rgba(0,0,0,1);} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title p{font-size: 0.9em; margin-bottom: 10px; color: #f1f1f1; text-shadow: 0 0 5px rgba(0,0,0,1);} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a{height: 40px; line-height: 40px; font-size: 0.9em; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,1);} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a img.t_color{display: block; position: relative; left: 5px; margin-top: 12px;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(3) .tabs_banner_title>a{padding: 8px 10px; background-color: #fff; font-size: 0.9em; border: 1px solid #212121; margin-top: 20px;} /* tabs_banner_under */ #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap{margin: 0; display: flex; flex-direction: column; justify-content: space-between;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li{width: 90%; margin: 0 auto; flex-direction: row; margin-bottom: 20px;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_img{width: 35%;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text{align-self: center; text-align: justify; margin-top: 0; margin-left: 20px;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text p:first-child{font-size: 1.3em; margin-bottom: 10px;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text p{font-size: 0.9em;} /* homeTabs end */ /* viewMore start */ #viewMore{padding-top: 0px;} #viewMore ul li{margin-top: 20px;} #viewMore ul li button{position: relative; width: 80%; margin: 0 auto; margin-top: -40px; padding: 5px 10px; border: 2px solid #212121; background-color: #212121; color: #f1f1f1; transition-duration: 0.5s; box-sizing: border-box; font-size: 0.9em;} #viewMore ul li button:hover{border-color: #DCFD00; color: #DCFD00;} /* viewMore end */ /* moreHome start */ #moreHome .more_home_left{width: 55%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); justify-content: flex-start; align-items: flex-start;} #moreHome .more_home_left h3{font-size: 1.6em; font-weight: bold;} #moreHome .more_home_left p{font-size: 0.9em; margin-top: 10px; margin-bottom: 20px;} #moreHome .more_home_left button{padding: 5px 10px;font-size: 0.9em;} #moreHome .more_home_right{width: 50%; margin-left: 50%;} /* sub_home 끝 */ /* sub_wireless 시작 */ #whatWirelss span.point{color: #DCFD00; font-family: 'noto sans kr'; cursor: alias; font-size: 1em;} /* wirelessBanner start */ #wirelessBanner video{min-height: 360px; object-fit: cover ;} #wirelessBanner .wireless_banner_inner .wireless_banner_logo img{width: 80%; margin: 0 auto;} #wirelessBanner .wireless_banner_inner .wireless_banner_control img{width: 60%; margin: 0 auto;} #wirelessBanner .wireless_banner_inner h2{color: #fff; font-weight: bold; font-size: 3em;} /* wirelessBanner end */ /* whatWirelss start */ #whatWirelss{padding: 100px 0; margin-top: -10px;} #whatWirelss .what_wirelss_top .what_wirelss_title h3{font-size: 1.8em; font-weight: bold; margin-bottom: 20px;} #whatWirelss .what_wirelss_top .what_wirelss_mid{margin-top: 50px; flex-direction: column;} #whatWirelss .what_wirelss_top .what_wirelss_mid div{width: 100%;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child{padding: 0 2%;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child h4{font-size:1.3em; font-weight: bold; margin-top: 15px;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child p{font-size: 0.9em; margin: 15px 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a{color: #fff; line-height: 20px; display: flex;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a:hover{color: #00B8FC;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a img{width: 20px; height: 20px; margin-left: 10px;} /*이미지 변경..*/ #whatWirelss .what_wirelss_bottom{position: relative; width: 96%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 60px; flex-wrap: wrap;} #whatWirelss .what_wirelss_bottom .what_wirelss_list{width: 49%; margin-bottom: 2%;} #whatWirelss .what_wirelss_bottom .what_wirelss_list img{width: 100%;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div:last-child{padding: 10px; height: 180px;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div p{font-size: 0.9em; margin-bottom: 5px;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div p:first-child{font-size: 1.1em; font-weight: 600;} #whatWirelss>a{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; color: #fff; justify-content: flex-end; align-items: center; bottom: -0%;} #whatWirelss>a:hover{color: #00B8FC;} #whatWirelss>a>img{width: 15px; height: 15px; margin-left: 10px;} /* whatWirelss end */ /* graph start */ #graph{position: relative; background-color: #212121; color: #f1f1f1; padding: 100px 0;} #graph .graph_title{position: relative; width: 90%; margin-bottom: 50px;} #graph .graph_title h3{font-size: 1.4em; font-weight: bold; margin-bottom: 20px;} #graph .graph_title p{font-size: 0.9em;} #graph .graph_inner{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: center;} #graph .graph_inner .graph_inner_left{width: 100%; position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 40px; flex-direction: column;} #graph .graph_inner .graph_inner_left .graph_inner_wrap{width: 100%; margin-bottom: 20px;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>p{font-size: 1.4em; font-weight: 600; margin-bottom: 10px;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div{display: flex; margin: 10px 0;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div>p{font-size: 1em;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div .g_color_box{width: 20px; height: 20px;} #graph .graph_inner .graph_inner_left .graph_inner_left_bottom{margin-top: 0px;} #graph .graph_inner .graph_inner_right{width: 100%; position: relative; margin-top: 0px;} #graph .graph_inner .graph_inner_right .graph_wrap{padding: 20px 0;} #graph .graph_inner .graph_inner_right .graph_wrap>p{font-size: 1.5em;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div{height: 25px; margin: 10px 0;} /* graph end */ /* wirelessTabs start 세로*/ #wirelessTabs .wireless_tabs{position: relative; width: 90%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;} #wirelessTabs .wireless_tabs>li{height: 60px; line-height: 60px; width: 32%; cursor: pointer;} #wirelessTabs .wireless_tabs>li.tabs_select::after{height: 50px;} #wirelessTabs .wireless_tabs>li:hover::after{height: 50px;} #wirelessTabs .wireless_tabs>li::after{content: ''; bottom: 0; position: absolute; display: block; height: 0px; width: 32%; background-color: #212121; border-radius: 10px 10px 0 0 ; transition-duration: 0.5s;} #wirelessTabs .wireless_tabs>li>div{position: relative; display: flex; align-items: center; color: #fff; text-align: center; justify-content: center; font-size: 1.1em; font-weight: 600; z-index: 1; transition-duration: 0.5s; line-height: 60px;} #wirelessTabs .wireless_tabs>li.tabs_select>div>div img{transform: translateY(-50%);} #wirelessTabs .wireless_tabs>li:hover>div>div img{transform: translateY(-50%);} #wirelessTabs .wireless_tabs>li>div>div{width: 20px; height: 20px; margin-left: 10px; overflow: hidden;} #wirelessTabs .wireless_tabs_wrap{position: relative; width: 300%; display: flex; align-items: center; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner{position: relative; width: 33.333%; display: flex; flex-direction: column; justify-content: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner h3{padding-bottom: 50px; text-align: center; font-size: 2.2em; font-weight: bold;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner .wireless_product_list{width: 90%; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1){position: relative; background-color: #f1f1F1; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list_wrap{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list_wrap .wireless_product_list{position: relative; width: 266.664%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-around;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list li{width: 12%; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>p{display: block; text-align: center; padding: 10px 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>p:first-child{position: absolute; display: block; width: 95%; text-align: right; padding: 10px 0 0 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>div{width: 100%; border: 1px solid #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>div img{width: 100%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button{position: absolute; top: 50%; transform: translateY(-50%); border: none; background: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button.wireless_prev{right: 94%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button.wireless_next{left: 94%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2){background-image: url(../img/bolt-wireless-technology-banner.jpg); background-position: right; background-repeat: no-repeat; background-size: cover; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>h3{font-size: 2em; font-weight: bold;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>p{font-size: 1em; text-align: center; font-weight: 500; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a{position: relative; display: flex; height: 35px; line-height: 35px; justify-content: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>img{height: 15px; width: 15px; margin-top: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>img:last-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3){border: 1px solid #212121; width: 200px; margin: 20px auto; margin-bottom: 60px; background: none; color: #212121; transition-duration: 0.5s; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover{background-color: #212121; color: #fff;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>:nth-child(3)img:last-child{position: relative; width: 9%; margin: 0 auto; display: none} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover>img:first-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover>img:last-child{display: block; margin-top: 12px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5){position: relative; width: 140px; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>:nth-child(5)img:last-child{position: relative; width: 9%; margin: 0 auto; display: none} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5)::after{position: absolute; display: block; width: 0%; height: 1px; background-color: #fff; bottom: 10px; content: ''; left: 47%; transform: translateX(-50%); transition-duration: 0.5s;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover::after{width: 95%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover{font-weight: bold; color: #fff;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover>img:first-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover>img:last-child{display: block; margin-top: 12px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3){position: relative; background-color: #f1f1f1;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3) h3{font-size: 2em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq{position: relative; width: 90%; max-width: 1200px; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul{position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li{ cursor: pointer; width: 95%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li h4{line-height: 40px; border-bottom: 1px solid #ddd; margin-bottom: 10px; font-weight: 600; font-size: 1em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:first-child h4{margin-top: 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>p{margin-top: 10px; font-size: 0.9em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul{position: relative; display: flex; justify-content: space-between;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li{width: 30%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li img{width: 100%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li>p{text-align: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>.icon{position: absolute; right: 10px; width: 15px; height: 2px; background-color: #212121; margin-top: 25px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>.icon:first-child{rotate:90deg;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table{position: relative; width: 90%; margin: 0 auto; font-size: 0.9em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th:first-child{width: 10%; border: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th{width: 45%;padding: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr>td{padding: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th:first-child:after{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead::after{content: ''; display: block; position: absolute; bottom: 42.5%; left: -5%; margin-top: 45px; width: 110%; height: 1px; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th::after{content: ''; display: block; position: absolute; bottom: 0; left: -5%; margin-top: 45px; width: 110%; height: 1px; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table th::after{content: ''; display: block; position: absolute; width: 1px; height: 100%; top: 0; left: 10%; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr::after{content: ''; display: block; position: absolute; width: 1px; height: 100%; bottom: 0; right: 45.5%; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr .table_point{font-weight: 600;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>div.fold>p{margin-bottom: 30px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>div.fold{height: 0; overflow: hidden;} /* #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:hover>div.fold{height: 100%; opacity: 1;} */ #wirelessTabs .more_faq{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; padding-bottom: 0px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner .more_faq h3{padding-top: 30px; padding-bottom: 10px; font-size: 1.5em;} #wirelessTabs .more_faq .more_faq_btns button{border: 1px solid #212121; background-color: #212121; display: flex; justify-content: center; align-items: center; padding: 5px; color: #fff; font-size: 0.8em; margin: 0 5px; transition-duration: 0.5s;} #wirelessTabs .more_faq .more_faq_btns button img{margin-top: 0px;} #wirelessTabs .more_faq .more_faq_btns button:hover{background-color: #00B8FC; border-color: #00B8FC;} /* wirelessTabs end */ /* more_shop start */ #moreShop{min-height: 100px;} #moreShop .more_shop_wrap>div p{font-size: 1.2em;} #moreShop .more_shop_wrap>div button{padding: 5px 10px; font-size: 0.9em;} /* more_shop end */ /* sub_wireless 끝 */ /* sub_about 시작 */ /* aboutTopBanner start */ #aboutTopBanner .about_title h2{font-size: 3em; font-weight: bold;} #aboutTopBanner .about_title h2 span{font-size: 0.9em; font-weight: 600;} #aboutTopBanner .about_logi{width: 90%;} #aboutTopBanner .about_logi h3{font-size: 1.8em; font-weight: bold; margin-bottom: 30px;} #aboutTopBanner .about_logi p{font-size: 0.9em;} /* aboutTopBanner end */ /* aboutTeam start */ #aboutTeam{padding: 100px 0;} #aboutTeam h3{font-size: 1.8em; margin-bottom: 50px;} #aboutTeam h3 span{font-size: 0.9em;} #aboutTeam .team_leader_list .leaders>a{padding: 2px 4px; font-size: 0.9em;} #aboutTeam .team_leader_list .leaders .leaders_info p:first-child{font-size: 1em;} #aboutTeam .team_leader_list .leaders:hover .leaders_info{transform: translateY(0);} /* aboutTeam end */ /* about start */ #about .about_wrap .about_list .right_info h3{font-size: 1.8em;} #about .about_wrap .about_list .right_info p{font-size: 0.9em; margin: 20px 0;} #about .about_wrap .about_list .right_info a{width: 140px; font-size: 0.9em;} #about .about_wrap .about_list .right_info a:hover::after{width: 140px;} #about .about_wrap .about_list .right_info button{padding: 5px 15px; font-size: 0.9em;} /* about end */ /* learnMore start */ #learnMore{padding: 100px 0;} #learnMore h3{font-size: 1.8em; margin-bottom: 50px;} #learnMore .learn_more_wrap .learn_more_list{position: relative; width: 49%; margin-bottom: 2%;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text h4{font-size: 1em; font-weight: 600;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text p{margin: 5px;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text button{padding: 4px 10px; font-size: 0.9em;} /* learnMore end */ /* sub_about 끝 */ /* sub_creator 시작 */ .page_nav.for_creators ul{width: 180px; margin-top: 5px;} .page_nav.for_creators ul li{font-size: 0.8em;} #creatorTopBanner .creator_banner_title>h2{width: 80%} #creatorTopBanner .creator_banner_title>div{width: 10%; margin-top: 20px;} /* common */ #creatorTopBanner{height: 640px; } .creator{position: relative; height: 640px; overflow: hidden; display: flex; justify-content: center;} h2 span.color_background{font-size: 1em; font-weight: bold; color: #DCFD00; background-color: #212121;} .corner_box{display: flex; flex-direction: column; height: 4vw; width: 45%; justify-content: space-between; position: absolute; top: 0; height: 65px; width: 470px;} .left_top{display: block; position: relative; width: 16px; height: 16px; border-left: 3px solid #fff; border-top: 3px solid #ffff;} .right_bottom{display: block; position: relative; width: 16px; height: 16px; border-right: 3px solid #212121; border-bottom: 3px solid #212121; align-self: flex-end;} .creator_inner_left{position: relative; width: 100%;} .creator_inner_right{position: relative; width: 100%;} /* common */ /* creatorIcon start */ #creatorIcon .creator_icon{position: absolute; width: 90%; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center;} #creatorIcon .creator_icon h2{font-size: 2.7em;} #creatorIcon .creator_icon .icons{width: 400px; margin-top: 40px;} #creatorIcon .left_top{display: block; position: relative; width: 20px; height: 20px; border-left: 5px solid #212121; border-top: 5px solid #212121;} #creatorIcon .right_bottom{display: block; position: relative; width: 20px; height: 20px; border-right: 5px solid #212121; border-bottom: 5px solid #212121; align-self: flex-end;} /* creatorintro start */ #creatorintro h2{font-size: 2.2em;} /* creatorintro end */ /* creatorLevel start */ #creatorLevel .creator_level .creator_level_left{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; top: 50%; z-index: 1; width: 580px; margin-left: 0; transform: translateX(5%);} #creatorLevel .creator_level .creator_level_left h2{font-size: 2em; font-weight: bold;} #creatorLevel .creator_level .creator_level_left .corner_box{width: 320px; height: 55px; top: -3%; left: -3%;} #creatorLevel .creator_level .creator_level_left p{margin: 30px 0; font-size: 1em;} #creatorLevel .creator_level .creator_level_left button{padding: 5px 15px; font-size: 1em;} #creatorLevel .creator_level .creator_level_left button img{width: 25px; margin-right: 10px; padding-bottom: 5px;} #creatorLevel .creator_level .creator_level_right{width: 100%; margin: 20px 0;} #creatorLevel .creator_level .creator_level_right>div{width: 50%; margin: 20px 0;} #creatorLevel .creator_level .creator_level_right>div>img{width: 100%;} #creatorLevel .create_tag{height: 70px; width: 120px;} #creatorLevel .create_tag>p{font-size: 1.1em;} #creatorLevel .create_tag>a{font-size: 0.9em; margin: 0; margin-right: 10%;} #creatorLevel .create_tag>a>img{width: 20px;} /* creatorLevel end */ /* creatorCam start */ #creatorCam{background-color: #fff} #creatorCam .creator_cam{position: relative; width: 90%; margin: 0 auto; max-width: 1400px; color: #212121; display: flex; justify-content: center; align-items: center;} #creatorCam .creator_cam .creator_cam_left{position: relative; transform: translateX(0%); bottom: -100px; width: 100%;} #creatorCam .creator_cam .creator_cam_left>div{width: 100%;} #creatorCam .creator_cam .creator_cam_left>div img{width: 100%;} #creatorCam .creator_cam .creator_cam_right{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 70%; position: absolute; right: 0%; top: 50%; transform: translate(-30%, -50%);} #creatorCam .creator_cam .creator_cam_right h2{font-size: 2em;} #creatorCam .creator_cam .creator_cam_right .corner_box{width: 220px; height: 50px; top: -3%; left: 50%; transform: translateX(-50%);} #creatorCam .creator_cam .creator_cam_right p{margin: 20px 0; font-size: 1em; text-align: center;} #creatorCam .creator_cam .creator_cam_right button{padding: 5px 15px; border-radius: 30px; font-size: 1em;} /* creatorCam end */ /* creatorFriskk start */ #creatorFriskk{background-color: #DE9521;} #creatorFriskk .creator_friskk{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; color: #212121; justify-content: center; flex-direction: column;} #creatorFriskk .creator_friskk .creator_friskk_left{display: flex; flex-direction: column; justify-content: center; position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 1; width: 80%; background-color: rgba(222,149,33,0.7); padding: 10px;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title{display: flex; flex-direction: column; justify-content: center; margin-bottom: 120px;} #creatorFriskk .creator_friskk .creator_friskk_left img{width: 150%;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title p{font-size: 1.1em; font-weight: 600;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title h2{font-size: 5em; font-weight: bold; color: #fff; text-shadow: 0 0 9px rgba(222,149,33,1);} #creatorFriskk .creator_friskk .creator_friskk_left div:last-child{display: flex; align-items: center; width: 100%; margin-top: 40px;} #creatorFriskk .creator_friskk .creator_friskk_left div:last-child p{font-size: 1.2em; margin-left: 20px; color: #212121; background: none; margin-left: 40px;} #creatorFriskk .creator_friskk .creator_friskk_right{right: 0%;} #creatorFriskk .creator_friskk .creator_friskk_right div{height: 90%; position: relative; top: calc(100vh - 50%); display: flex; justify-content: center; align-items: center;} #creatorFriskk .creator_friskk .creator_friskk_right div img{height: 100%;} #creatorFriskk .create_tag{background-color: #fff; color: #DE9521; position: absolute; bottom: 10%; right: 0%; width: 120px; height: 70px; display: flex; flex-direction: column; justify-content: center;} #creatorFriskk .create_tag p{font-size: 1.1em; margin: 5px 0; margin-left: 10%;} #creatorFriskk .create_tag a{margin: 5px 0; color: #DE9521; display: flex; margin-left: 10%; font-size: 0.9em;} #creatorFriskk .create_tag a img{margin-right: 5px;} /* creatorFriskk end */ /* creatorMike start */ #creatorMike{background-image: url(../img/creators_mike_bg.jpg); background-position: right bottom; background-repeat: no-repeat; background-size: cover;} #creatorMike .creator_mike{position: relative; width: 90%; margin: 0 auto; color: #fff;} #creatorMike .creator_mike h2{font-size: 2.5em; font-weight: bold; text-align: center; margin: 40px 0; color: #DCFD00;} #creatorMike .creator_mike .corner_box{top: 40px; left: 50%; transform: translate(-50%); width: 320px; height: 60px;} #creatorMike .creator_mike .corner_box>div{border-color: #DCFD00;} #creatorMike .creator_mike .creator_mike_wrap{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left{display: flex; flex-direction: column; align-items: flex-start; margin-left: -10%; transform: translateY(10%);} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left div{width: 70%;;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left div img{width: 100%;} #creatorMike .create_tag{position: absolute; bottom: 10%; left: -6%; width: 175px; height: 70px; background-color: #DCFD00; color: #212121; display: flex; flex-direction: column; justify-content: center;} #creatorMike .create_tag p{margin-left: 10px; font-size: 1.1em; font-weight: bold;} #creatorMike .create_tag a{display: flex; margin: 5px 0; margin-left: 10px; font-size: 0.9em;} #creatorMike .create_tag a img{width: 20px; height: 13px; margin-top: 3px; margin-right: 5px;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right{display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-left: 5%; box-sizing: border-box; transform: translateY(100%); position: absolute; right: 0; width: 70%;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right>div{display: flex; align-items: flex-start;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div:last-child{margin-left: -10px;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div img{width: 70%;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div h3{font-size: 1.7em; font-weight: bold; text-shadow: 0 0 6px rgba(0,0,0,1);} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div p{margin: 10px 0; font-size: 1.6em; color: #DCFD00; font-weight: bold;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div button{padding: 5px 15px; border-radius: 20px; border: 1px solid #DCFD00; background-color: #DCFD00; font-weight: 600; font-size: 1em;} /* creatorMike end */ /* creatorCrew start */ #creatorCrew{position: relative; width: 100%; height: auto; background-color: #f1f1f1; display: flex; flex-direction: column;} .creator_crew{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; padding: 100px 0; overflow: hidden;} .creator_crew h2{font-size: 2.2em; text-align: center; font-weight: bold; margin-bottom: 40px;} .creator_crew h2 span{font-size: 1em; font-weight: bold; color: #00B8FC;} .creator_crew .crew_list_wrap{position: relative; display: flex; width: 415%;} .creator_crew .crew_list_wrap .crew_list{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 12%; padding: 0 0.25%; box-sizing: border-box;} .creator_crew .crew_list_wrap .crew_list:last-child{margin-right: 0;} .creator_crew .crew_list_wrap .crew_list .crew_list_img{width: 100%;} .creator_crew .crew_list_wrap .crew_list .crew_list_img img{width: 100%;} .creator_crew .crew_list_wrap .crew_list .crew_list_info{display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; background-color: #212121; width: 100%; color: #fff; padding: 5px 0;} .creator_crew .crew_list_wrap .crew_list .crew_list_info p{font-size: 1.2em; font-weight: 600;} /* creatorCrew end */ /* sub_creator 끝 */ } /* 모바일 */ @media screen and (max-width:600px){ /* page_nav start*/ .page_nav{top: 60px;} .page_nav a{font-size: 0.9em;} /* page_nav end*/ /* sub_home 시작 */ #homeBanner{min-height: 300px; background-image: url(../img/home_banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #homeBanner .home_banner_img img{display: none;} #homeBanner .home_banner_title{width: 100%;} #homeBanner .home_banner_title h2{font-size: 2em;} #homeTabs .home_tabs{width: 98%;} #homeTabs .home_tabs>li{height: 50px; line-height: 50px; width: 33%;} #homeTabs .home_tabs>li.tabs_select::after{height: 45px;} #homeTabs .home_tabs>li:hover::after{height: 45px; width: 33%;} #homeTabs .home_tabs>li>div{line-height: 50px; font-size: 0.9em;} #homeTabs .home_tabs>li>div>div{margin-left: 0px;} /* midTitle start */ #midTitle .mid_title_inner{padding: 40px 0;} #midTitle .mid_title_inner h3{font-size: 1.6em; font-weight: bold;} #midTitle .mid_title_inner p{font-size: 0.9em;} #midTitle .mid_title_inner p br{display: none;} /* midTitle end */ /* homeTabs start */ #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_img{min-height: 220px;} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_img img{display: none;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(1) .tabs_banner_img{background-image: url(../img/home_mid_banner_1.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_img{background-image: url(../img/home_mid_banner_2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(3) .tabs_banner_img{background-image: url(../img/home_mid_banner_3.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title{width: 90%;} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title h3{font-size: 1.3em; margin-bottom: 20px; color: #f1f1f1; text-shadow: 0 0 5px rgba(0,0,0,1);} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title p{font-size: 0.9em; margin-bottom: 10px; color: #f1f1f1; text-shadow: 0 0 5px rgba(0,0,0,1);} #homeTabs .tabs_banner .tabs_banner_inner li .tabs_banner_title p br{display: none;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a{height: 40px; line-height: 40px; font-size: 0.9em; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,1);} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(2) .tabs_banner_title>a img.t_color{display: block; position: relative; left: 5px; margin-top: 12px;} #homeTabs .tabs_banner .tabs_banner_inner li:nth-child(3) .tabs_banner_title>a{padding: 8px 10px; background-color: #fff; font-size: 0.9em; border: 1px solid #212121; margin-top: 20px; border-color: #fff;} /* tabs_banner_under */ #homeTabs .tabs_banner .tabs_banner_under{padding-top: 20px;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap{width: 90%; margin: 0; display: flex; flex-direction: row; justify-content: space-between;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li{width: 30%; margin: 0 auto; flex-direction: column; margin-bottom: 20px;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_img{width: 100%;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text{align-self: center; text-align: center; margin-top: 0; margin-left: 0px; width: 120%;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text p:first-child{font-size: 1em; margin-bottom: 10px; opacity: 1;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text p{font-size: 0.9em;} #homeTabs .tabs_banner .tabs_banner_under .tabs_banner_under_wrap li>.tabs_banner_under_text p:last-child{display: none;} /* homeTabs end */ /* viewMore start */ #viewMore{padding-top: 0px;} #viewMore ul li{width: 49%; margin-top: 15px;} #viewMore ul li:nth-child(1){width: 49%;} #viewMore ul li:nth-child(2){width: 49%;} #viewMore ul li:nth-child(3){width: 57%;} #viewMore ul li:nth-child(4){width: 41%;} #viewMore ul li div img{width: 100%; border-radius: 5px;} #viewMore ul li button{position: relative; width: 95%; margin: 0 auto; margin-top: -40px; padding: 5px 0; border: 2px solid #212121; background-color: #212121; color: #f1f1f1; transition-duration: 0.5s; box-sizing: border-box; font-size: 0.9em;} #viewMore ul li button:hover{border-color: #DCFD00; color: #DCFD00;} /* viewMore end */ /* moreHome start */ #moreHome .more_home{position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 0;} #moreHome .more_home_left{width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); flex-direction: column; justify-content: center; align-items: center;} #moreHome .more_home_left h3{font-size: 1.6em; font-weight: bold; text-shadow: 0 0 3px rgba(255,255,255,0.7);} #moreHome .more_home_left p{font-size: 0.9em; margin-top: 10px; margin-bottom: 20px; text-shadow: 0 0 3px rgba(255,255,255,0.7);} #moreHome .more_home_left button{padding: 5px 10px;font-size: 0.9em; background-color: #fff; border-color: #fff;} #moreHome .more_home_right{width: 100%;} /* sub_home 끝 */ /* sub_wireless 시작 */ #whatWirelss span.point{color: #DCFD00; font-family: 'noto sans kr'; cursor: alias; font-size: 1em;} /* wirelessBanner start */ #wirelessBanner{height: 360px;} #wirelessBanner video{height: 360px; object-fit: cover ;} #wirelessBanner .wireless_banner_inner .wireless_banner_logo img{width: 80%; margin: 0 auto;} #wirelessBanner .wireless_banner_inner .wireless_banner_control img{width: 40%; margin: 0 auto;} #wirelessBanner .wireless_banner_inner h2{color: #fff; font-weight: bold; font-size: 2.4em;} /* wirelessBanner end */ /* whatWirelss start */ #whatWirelss{padding: 80px 0; margin-top: -10px;} #whatWirelss .what_wirelss_top .what_wirelss_title h3{font-size: 1.4em; font-weight: bold; margin-bottom: 10px;} #whatWirelss .what_wirelss_top .what_wirelss_mid{margin-top: 30px; flex-direction: column;} #whatWirelss .what_wirelss_top .what_wirelss_mid div{width: 100%;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child{padding: 0 2%;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child h4{font-size:1.2em; font-weight: bold; margin-top: 15px;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child p{font-size: 0.9em; margin: 5px 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a{color: #fff; line-height: 20px; display: flex; font-size: 0.9em; position: relative; width: 154px; margin-top: 10px;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a::after{content: ''; display: block; width: 154px; height: 1px; background-color: #fff; position: absolute; bottom: 0; right: 0; transition-duration: 0.5s;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a:hover::after{width: 0;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a:hover{color: #00B8FC;} #whatWirelss .what_wirelss_top .what_wirelss_mid div:last-child a img{width: 15px; height: 15px; margin-left: 5px; margin-top: 3px;} /*이미지 변경..*/ #whatWirelss .what_wirelss_bottom{position: relative; width: 96%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 60px; flex-wrap: wrap;} #whatWirelss .what_wirelss_bottom .what_wirelss_list{width: 100%; margin-bottom: 2%; display: flex; flex-direction: column;} #whatWirelss .what_wirelss_bottom .what_wirelss_list>div{width: 100%;} #whatWirelss .what_wirelss_bottom .what_wirelss_list img{width: 100%; height: 100%; object-fit: cover;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div:last-child{padding: 0;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div p{font-size: 0.9em; margin-bottom: 5px; padding: 0 10px;} #whatWirelss .what_wirelss_bottom .what_wirelss_list div p:first-child{font-size: 1.1em; font-weight: 600; padding-top: 10px;} #whatWirelss>a{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; color: #fff; justify-content: flex-start; align-items: center; bottom: -0%;} #whatWirelss>a:hover{color: #00B8FC;} #whatWirelss>a>img{width: 15px; height: 15px; margin-left: 10px;} /* whatWirelss end */ /* graph start */ #graph{position: relative; background-color: #212121; color: #f1f1f1; padding: 60px 0;} #graph .graph_title{position: relative; width: 90%; margin-bottom: 40px;} #graph .graph_title h3{font-size: 1.4em; font-weight: bold; margin-bottom: 20px;} #graph .graph_title p{font-size: 0.9em;} #graph .graph_inner{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: center;} #graph .graph_inner .graph_inner_left{width: 100%; position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 30px; flex-direction: column;} #graph .graph_inner .graph_inner_left .graph_inner_wrap{width: 100%; margin-bottom: 20px;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>p{font-size: 1.2em; font-weight: 600; margin-bottom: 10px; text-align: center;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div{display: flex; margin: 10px 0;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div>p{font-size: 0.9em;} #graph .graph_inner .graph_inner_left .graph_inner_wrap>div .g_color_box{width: 20px; height: 20px; margin-right: 5px;} #graph .graph_inner .graph_inner_left .graph_inner_left_bottom{margin-top: 0px;} #graph .graph_inner .graph_inner_right{width: 100%; position: relative; margin-top: 0px;} #graph .graph_inner .graph_inner_right .graph_wrap{padding: 20px 0;} #graph .graph_inner .graph_inner_right .graph_wrap>p{font-size: 1.3em; line-height: 1.2em; width: 90%; margin: 0 auto; word-break: keep-all; margin-bottom: 20px;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div{height: 25px; margin: 5px 0;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div>div.stick{padding: 0 5px;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(1)>div.stick{width: 14px; background-color: #00B8FC;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(2)>div.stick{width: 8px; background-color: #94E2FF;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(3)>div.stick{width: 114px; background-color: #FF3500;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(4)>div.stick{width: 162px; background-color: #FF4919;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(5)>div.stick{width: 162px; background-color: #FF7A58;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(6)>div.stick{width: 100%; background-color: #FFAF9A;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(6)>div{width: 25px;} #graph .graph_inner .graph_inner_right .graph_wrap_inner>div:nth-child(6)>div{width: 25px;} /* graph end */ /* wirelessTabs start 세로*/ #wirelessTabs .wireless_tabs{position: relative; width: 98%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;} #wirelessTabs .wireless_tabs>li{height: 60px; width: 33%; cursor: pointer;} #wirelessTabs .wireless_tabs>li p{font-size: 0.8em; line-height: 60px; } #wirelessTabs .wireless_tabs>li.tabs_select::after{height: 50px;} #wirelessTabs .wireless_tabs>li:hover::after{height: 50px;} #wirelessTabs .wireless_tabs>li::after{content: ''; bottom: 0; position: absolute; display: block; height: 0px; width: 32%; background-color: #212121; border-radius: 10px 10px 0 0 ; transition-duration: 0.5s;} #wirelessTabs .wireless_tabs>li>div{position: relative; display: flex; align-items: center; color: #fff; text-align: center; justify-content: center; font-size: 1.1em; font-weight: 600; z-index: 1; transition-duration: 0.5s; line-height: 60px;} #wirelessTabs .wireless_tabs>li.tabs_select>div>div img{transform: translateY(-50%);} #wirelessTabs .wireless_tabs>li:hover>div>div img{transform: translateY(-50%);} #wirelessTabs .wireless_tabs>li>div>div{width: 16px; height: 16px; margin-left: 5px; overflow: hidden;} #wirelessTabs .wireless_tabs_wrap{position: relative; width: 300%; display: flex; align-items: center; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner{position: relative; width: 33.333%; display: flex; flex-direction: column; justify-content: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner h3{padding-bottom: 50px; text-align: center; font-size: 2.2em; font-weight: bold;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner .wireless_product_list{width: 90%; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1){position: relative; background-color: #f1f1F1; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list_wrap{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list_wrap .wireless_product_list{position: relative; width: 400%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-around;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list li{width: 12%; position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>p{display: block; text-align: center; padding: 10px 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>p:first-child{position: absolute; display: block; width: 95%; text-align: right; padding: 10px 0 0 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>div{width: 100%; border: 1px solid #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1) .wireless_product_list>li>div img{width: 100%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button{position: absolute; top: 50%; transform: translateY(-50%); border: none; background: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button.wireless_prev{right: 92%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(1)>button.wireless_next{left: 92%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2){background-image: url(../img/bolt-wireless-technology-banner.jpg); background-position: right; background-repeat: no-repeat; background-size: cover; height: 720px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>h3{font-size: 2em; font-weight: bold; color: #f1f1f1;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>p{font-size: 1em; text-align: center; font-weight: 500; position: relative; color: #f1f1f1;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a{position: relative; display: flex; height: 35px; line-height: 35px; justify-content: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>img{height: 15px; width: 15px; margin-top: 10px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>img:last-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3){border: 1px solid #f1f1f1; width: 200px; margin: 20px auto; margin-bottom: 60px; background: none; color: #212121; transition-duration: 0.5s; position: relative; background-color: #f1f1f1;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover{background-color: #212121; color: #fff; border-color: #212121;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>:nth-child(3)img:last-child{position: relative; width: 9%; margin: 0 auto; display: none} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover>img:first-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(3):hover>img:last-child{display: block; margin-top: 12px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5){position: relative; width: 140px; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a>:nth-child(5)img:last-child{position: relative; width: 9%; margin: 0 auto; display: none} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5)::after{position: absolute; display: block; width: 0%; height: 1px; background-color: #fff; bottom: 10px; content: ''; left: 47%; transform: translateX(-50%); transition-duration: 0.5s;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover::after{width: 95%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover{font-weight: bold; color: #fff;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover>img:first-child{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(2)>a:nth-child(5):hover>img:last-child{display: block; margin-top: 12px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3){position: relative; background-color: #f1f1f1;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3) h3{font-size: 1.5em; padding-bottom: 20px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq{position: relative; width: 90%; max-width: 1200px; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul{position: relative;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li{ cursor: pointer; width: calc(100% - 30px);} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li h4{line-height: 1.6em; padding: 5px 0; border-bottom: 1px solid #ddd; margin-bottom: 10px; font-weight: 600; font-size: 1em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:first-child h4{margin-top: 0;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>p{margin-top: 10px; font-size: 0.9em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul{position: relative; display: flex; justify-content: space-between;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li{width: 30%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li img{width: 100%;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(1)>div>ul>li>p{text-align: center;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>.icon{position: absolute; right: 10px; width: 15px; height: 2px; background-color: #212121; margin-top: 25px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>.icon:first-child{rotate:90deg;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table{position: relative; width: 90%; margin: 0 auto;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th:first-child{width: 10%; border: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th{width: 45%;padding: 5px 0; font-size: 0.9em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr>td{padding: 10px; font-size: 0.9em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr>th{writing-mode: vertical-rl; transform: translateY(50%);} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th:first-child:after{display: none;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead::after{content: ''; display: block; position: absolute; bottom: 42.5%; left: -5%; margin-top: 45px; width: 110%; height: 1px; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table thead th::after{content: ''; display: block; position: absolute; bottom: 0; left: -5%; margin-top: 45px; width: 110%; height: 1px; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table th::after{content: ''; display: block; position: absolute; width: 1px; height: 150%; top: 0; right: -10%; transform: translateY(-50%); background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr::after{content: ''; display: block; position: absolute; width: 1px; height: 100%; bottom: 0; right: 45.5%; background-color: #ddd;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:nth-child(4)>div>table>tbody>tr .table_point{font-weight: 600; font-size: 1em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>div.fold>p{margin-bottom: 20px; font-size: 0.9em;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li>div.fold{height: 0; overflow: hidden;} /* #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner:nth-child(3)>.faq>ul>li:hover>div.fold{height: 100%; opacity: 1;} */ #wirelessTabs .more_faq{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; padding-bottom: 0px;} #wirelessTabs .wireless_tabs_wrap .wireless_tabs_inner .more_faq h3{padding-top: 30px; padding-bottom: 10px; font-size: 1.5em;} #wirelessTabs .more_faq .more_faq_btns button{border: 1px solid #212121; background-color: #212121; display: flex; justify-content: center; align-items: center; padding: 5px; color: #fff; font-size: 0.8em; margin: 0 5px; transition-duration: 0.5s;} #wirelessTabs .more_faq .more_faq_btns button img{margin-top: 0px;} #wirelessTabs .more_faq .more_faq_btns button:hover{background-color: #00B8FC; border-color: #00B8FC;} /* wirelessTabs end */ /* more_shop start */ #moreShop{min-height: 100px;} #moreShop .more_shop_wrap{flex-direction: column; padding: 40px 0;} #moreShop .more_shop_wrap>div{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;} #moreShop .more_shop_wrap .more_left{margin-bottom: 40px} #moreShop .more_shop_wrap>div p{font-size: 1.2em;} #moreShop .more_shop_wrap>div button{padding: 5px 10px; font-size: 0.9em;} #moreShop .more_shop_wrap>div::after{content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; height: 1px; background-color: #999;} /* more_shop end */ /* sub_wireless 끝 */ /* sub_about 시작 */ /* aboutTopBanner start */ #aboutTopBanner .about_title h2{font-size: 2em; font-weight: bold;} #aboutTopBanner .about_title h2 span{font-size: 0.9em; font-weight: 600;} #aboutTopBanner .about_logi{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center; width: 90%; overflow: hidden; text-overflow: ellipsis; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; opacity: 0;} #aboutTopBanner .about_logi h3{font-size: 1.8em; font-weight: bold; margin-bottom: 30px;} #aboutTopBanner .about_logi p{font-size: 0.9em;} #aboutTopBanner .about_logi p:nth-child(2){width: 90%; margin-top: 20px; display: none;} #aboutTopBanner .about_logi button{display: block; margin-top: 20px; border: none; background-color: #fff; font-size: 0.9em; padding: 0 10px; text-align: center; border-radius: 20px; line-height: 20px; transition-duration: 0.5s;} #aboutTopBanner .about_logi button:hover{background-color: #00B8FC; color: #fff;} /* aboutTopBanner end */ /* aboutTeam start */ #aboutTeam{position: relative; background-color: #212121; padding: 80px 0; overflow: hidden;} #aboutTeam h3{font-size: 1.5em; margin-bottom: 40px;} #aboutTeam .team_leader_list{position: relative; width: 70%; margin: 0 auto;} #aboutTeam .team_leader_list .leaders{width: 100%; margin: 0 auto; position: relative; overflow: hidden; display: none;} #aboutTeam .team_leader_list .leaders:nth-child(1){display: block;} #aboutTeam .leader_controls{display: flex; position: absolute; justify-content: space-between; width: 80px; left: 50%; transform: translateX(-50%); margin-top: 20px;} #aboutTeam .leader_controls li{background-color: #fff; width: 15px; height: 15px; border-radius: 50%; cursor: pointer;} #aboutTeam .leader_controls li.leader_select{background-color: #DCFD00;} /* aboutTeam end */ /* about start */ #about{position: relative; overflow: hidden; margin-top: -1px;} #about .about_wrap{position: relative; width: 400%; display: flex; left: 0%;} #about .about_wrap .about_list{position: relative; width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;} #about .about_wrap .about_list .left_img{position: relative; width: 100%;} #about .about_wrap .about_list .left_img img{width: 100%;} #about .about_wrap .about_list .right_info{width: 90%; height: 100%; padding: 0; margin: 10px 0; box-sizing: border-box; text-align: center;} #about .about_wrap .about_list .right_info h3{font-size: 1.8em; margin-top: 20px;} #about .about_wrap .about_list .right_info p{font-size: 0.9em; margin: 10px 0;} #about .about_wrap .about_list .right_info a{display: flex; padding-left: 5px; width: 140px; font-size: 0.9em;} #about .about_wrap .about_list .right_info a:hover::after{width: 140px;} #about .about_wrap .about_list .right_info button{position: relative; display: block; background: none; border: 1px solid #212121; color: #212121; padding: 5px 10px; transition-duration: 0.5s; box-sizing: border-box; font-size: 0.9em; margin: 0 auto;} #about .about_wrap .about_list .right_info button:hover{color: #DCFD00; background-color: #212121;} .controls{position: absolute; left: 20px; top: 25%; transform: translateY(0%); display: flex; flex-direction: column; align-items: flex-start; z-index: 998;} .controls li{margin: 5px 0;} .controls li.control_select a{background-color: #000; color: #fff; width: 65px;} .controls a{color: #000; background-color: #fff; padding: 2px 10px; line-height: 20px; border-radius: 12px; font-size: 0.8em; transition-duration: 0.5s; width: 30px; position: relative; display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} /* about end */ /* learnMore start */ #learnMore{padding: 100px 0;} #learnMore h3{font-size: 1.8em; margin-bottom: 50px;} #learnMore .learn_more_wrap .learn_more_list{position: relative; width: 49%; margin-bottom: 2%; overflow: hidden;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text h4{font-size: 1em; font-weight: 600;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text p{margin: 5px; display: none;} #learnMore .learn_more_wrap .learn_more_list .learn_more_list_text button{padding: 2px 10px; font-size: 0.9em; margin-top: 10px;} #learnMore .learn_more_wrap .learn_more_list:hover .learn_more_list_text p{display: none;} /* learnMore end */ /* sub_about 끝 */ /* sub_creator 시작 */ .page_nav.for_creators ul{width: 180px; margin-top: 5px;} .page_nav.for_creators ul li{font-size: 0.8em;} #creatorTopBanner .creator_banner_title>h2{width: 80%} #creatorTopBanner .creator_banner_title>div{width: 10%; margin-top: 20px;} /* common */ #creatorTopBanner{height: 360px; } .creator{position: relative; height: 360px; overflow: hidden; display: flex; justify-content: center;} h2 span.color_background{font-size: 1em; font-weight: bold; color: #DCFD00; background-color: #212121;} .corner_box{display: flex; flex-direction: column; height: 4vw; width: 45%; justify-content: space-between; position: absolute; top: 0; height: 50px; width: 320px;} .left_top{display: block; position: relative; width: 10px; height: 10px; border-left: 3px solid #fff; border-top: 3px solid #ffff;} .right_bottom{display: block; position: relative; width: 10px; height: 10px; border-right: 3px solid #212121; border-bottom: 3px solid #212121; align-self: flex-end;} .creator_inner_left{position: relative; width: 100%;} .creator_inner_right{position: relative; width: 100%;} /* common */ /* creatorIcon start */ #creatorIcon .creator_icon{position: absolute; width: 90%; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center;} #creatorIcon .creator_icon h2{font-size: 1.8em;} #creatorIcon .creator_icon .icons{width: 320px; margin-top: 30px;} #creatorIcon .left_top{display: block; position: relative; width: 12px; height: 12px; border-left: 3px solid #212121; border-top: 3px solid #212121;} #creatorIcon .right_bottom{display: block; position: relative; width: 12px; height: 12px; border-right: 3px solid #212121; border-bottom: 3px solid #212121; align-self: flex-end;} /* creatorintro start */ #creatorintro h2{font-size: 1.8em;} /* creatorintro end */ /* creatorLevel start */ #creatorLevel .creator_level .creator_level_left{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; top: 0%; z-index: 1; width: 360px; margin: 0 auto; margin-left: 0; transform: translate(5%,-70%);} #creatorLevel .creator_level .creator_level_left h2{font-size: 1.8em; font-weight: bold;} #creatorLevel .creator_level .creator_level_left .corner_box{width: 280px; height: 50px; top: -4%; left: -3%;} #creatorLevel .creator_level .creator_level_left p{margin: 20px 0; font-size: 0.9em;} #creatorLevel .creator_level .creator_level_left button{padding: 5px 10px; font-size: 0.9em;} #creatorLevel .creator_level .creator_level_left button img{width: 20px; margin-right: 5px; padding-bottom: 5px;} #creatorLevel .creator_level .creator_level_right{width: 100%; margin: 20px 0;} #creatorLevel .creator_level .creator_level_right>div{width: 50%; margin: 20px 0;} #creatorLevel .creator_level .creator_level_right>div>img{width: 100%;} #creatorLevel .create_tag{height: 60px; width: 100px;} #creatorLevel .create_tag>p{font-size: 1em;} #creatorLevel .create_tag>a{font-size: 0.8em; margin: 0; margin-right: 10%;} #creatorLevel .create_tag>a>img{width: 18px;} /* creatorLevel end */ /* creatorCam start */ #creatorCam{background-color: #fff} #creatorCam .creator_cam{position: relative; width: 90%; margin: 0 auto; max-width: 1400px; color: #212121; display: flex; justify-content: center; align-items: center;} #creatorCam .creator_cam .creator_cam_left{position: relative; transform: translateX(0%); bottom: -40px; width: 100%;} #creatorCam .creator_cam .creator_cam_left>div{width: 100%;} #creatorCam .creator_cam .creator_cam_left>div img{width: 100%;} #creatorCam .creator_cam .creator_cam_right{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 70%; position: absolute; right: 0%; top: 50%; transform: translate(-30%, -50%);} #creatorCam .creator_cam .creator_cam_right h2{font-size: 1.8em;} #creatorCam .creator_cam .creator_cam_right .corner_box{width: 190px; height: 50px; top: -3%; left: 50%; transform: translateX(-50%);} #creatorCam .creator_cam .creator_cam_right p{margin: 20px 0; font-size: 0.9em; text-align: center;} #creatorCam .creator_cam .creator_cam_right button{padding: 5px 10px; border-radius: 30px; font-size: 0.9em;} /* creatorCam end */ /* creatorFriskk start */ #creatorFriskk{background-color: #DE9521;} #creatorFriskk .creator_friskk{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; color: #212121; justify-content: center; flex-direction: column;} #creatorFriskk .creator_friskk .creator_friskk_left{display: flex; flex-direction: column; justify-content: center; position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 1; width: 100%; background-color: rgba(222,149,33,0.7); padding: 10px;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title{display: flex; flex-direction: column; justify-content: center; margin-bottom: 40px;} #creatorFriskk .creator_friskk .creator_friskk_left img{width: 150%;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title p{font-size: 0.9em; font-weight: 600;} #creatorFriskk .creator_friskk .creator_friskk_left .creator_friskk_title h2{font-size: 3em; font-weight: bold; color: #fff; line-height: 1.2em;} #creatorFriskk .creator_friskk .creator_friskk_left div:last-child{display: flex; align-items: center; width: 100%; margin-top: 0px;} #creatorFriskk .creator_friskk .creator_friskk_left div:last-child p{font-size: 1em; margin-left: 20px; color: #212121; background: none; margin-left: 25px;} #creatorFriskk .creator_friskk .creator_friskk_right{right: 0%;} #creatorFriskk .creator_friskk .creator_friskk_right div{height: 90%; position: relative; top: calc(100vh - 50%); display: flex; justify-content: center;} #creatorFriskk .creator_friskk .creator_friskk_right div img{height: 100%;} #creatorFriskk .create_tag{background-color: #fff; color: #DE9521; position: absolute; bottom: 10%; right: 0%; width: 100px; height: 60px; display: flex; flex-direction: column; justify-content: center;} #creatorFriskk .create_tag p{font-size: 1em; margin: 5px 0; margin-left: 10%;} #creatorFriskk .create_tag a{margin: 5px 0; color: #DE9521; display: flex; margin-left: 10%; font-size: 0.9em;} #creatorFriskk .create_tag a img{margin-right: 5px; width: 16px; height: 16px; margin-top: 2px;} /* creatorFriskk end */ /* creatorMike start */ #creatorMike{background-image: url(../img/creators_mike_bg.jpg); background-position: right bottom; background-repeat: no-repeat; background-size: cover;} #creatorMike .creator_mike{position: relative; width: 90%; margin: 0 auto; color: #fff;} #creatorMike .creator_mike h2{font-size: 2em; font-weight: bold; text-align: center; margin: 40px 0; color: #DCFD00;} #creatorMike .creator_mike .corner_box{top: 40px; left: 50%; transform: translate(-50%); width: 250px; height: 40px;} #creatorMike .creator_mike .corner_box>div{border-color: #DCFD00;} #creatorMike .creator_mike .creator_mike_wrap{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left{display: flex; flex-direction: column; align-items: flex-start; margin-left: -10%; transform: translateY(-10%);} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left div{width: 70%;;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_left div img{width: 100%;} #creatorMike .create_tag{position: absolute; bottom: 10%; left: -6%; width: 160px; height: 60px; background-color: #DCFD00; color: #212121; display: flex; flex-direction: column; justify-content: center;} #creatorMike .create_tag p{margin-left: 10px; font-size: 1em; font-weight: bold;} #creatorMike .create_tag a{display: flex; margin: 5px 0; margin-left: 10px; font-size: 0.9em;} #creatorMike .create_tag a img{width: 20px; height: 13px; margin-top: 3px; margin-right: 5px;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right{display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-left: 5%; box-sizing: border-box; transform: translateY(100%); position: absolute; right: 0; width: 70%;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right>div{display: flex; align-items: flex-start;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div:last-child{margin-left: -10px;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div img{width: 70%;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div h3{font-size: 1.7em; font-weight: bold; text-shadow: 0 0 6px rgba(0,0,0,1);} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div p{margin: 10px 0; font-size: 1.6em; color: #DCFD00; font-weight: bold;} #creatorMike .creator_mike .creator_mike_wrap .creator_mike_right div div button{padding: 5px 15px; border-radius: 20px; border: 1px solid #DCFD00; background-color: #DCFD00; font-weight: 600; font-size: 1em;} /* creatorMike end */ /* creatorCrew start */ #creatorCrew{position: relative; width: 100%; height: auto; background-color: #f1f1f1; display: flex; flex-direction: column;} .creator_crew{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; padding: 100px 0; overflow: hidden;} .creator_crew h2{font-size: 2.2em; text-align: center; font-weight: bold; margin-bottom: 40px;} .creator_crew h2 span{font-size: 1em; font-weight: bold; color: #00B8FC;} .creator_crew .crew_list_wrap{position: relative; display: flex; width: 840%; } .creator_crew .crew_list_wrap .crew_list{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 12%; padding: 0 0.25%; box-sizing: border-box;} .creator_crew .crew_list_wrap .crew_list:last-child{margin-right: 0;} .creator_crew .crew_list_wrap .crew_list .crew_list_img{width: 100%;} .creator_crew .crew_list_wrap .crew_list .crew_list_img img{width: 100%;} .creator_crew .crew_list_wrap .crew_list .crew_list_info{display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; background-color: #212121; width: 100%; color: #fff; padding: 5px 0;} .creator_crew .crew_list_wrap .crew_list .crew_list_info p{font-size: 1.2em; font-weight: 600;} /* creatorCrew end */ /* sub_creator 끝 */ }