@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */
/*main.css*/
.mainContainer{position:relative; z-index:30;}
.pc_none{display:none;}

.main_head{font-size:0;}
.main_head [class^="head_"]{display:inline-block; font-size:1rem; vertical-align:top;}
.main_head .head_visual,
.main_head .head_login{height:340px;}
.head_visual{position:relative; width:65.23%;}
	.area_visual{position:absolute; top:0; left:0; width:100%; height:100%;}
	.area_visual li{width:100% !important; height:100%;}
	.area_visual li > a{display:block; width:100%; height:100%;}
	.area_visual li .pc{display:block; width:100%; height:100%; background:no-repeat 24% 50%;}
	.area_visual li .mobile{display:none;}
	.visual_dot.swiper-pagination{position:absolute; bottom:26px !important; left:26px !important; width:auto; text-align:left; font-size:0; z-index:10;}
	.visual_dot span{opacity:1 !important; display:inline-block; width:8px; height:8px; margin:0; border-radius:50%; background-color:#fff;}
	.visual_dot span + span{margin-left:8px;}
	.visual_dot span.swiper-pagination-bullet-active{background-color:#333;}
.head_login{width:34.77%; padding-left:20px;}
	.head_login .login_button{display:none; z-index:10;}
	.area_login{width:100%; height:100%; padding:32px 36px; border:1px solid #ebebeb; background-color:#fff;}
	.area_login .login_top{position:relative; font-size:18px; text-align:center;}
	.area_login .login_top .name{font-weight:500;}
	.area_login .login_top .ico{margin-right:6px; vertical-align:-9px;}
	.area_login .login_cont{margin-top:26px; text-align:center;}
	.login_list{max-width:308px; margin:0 auto; font-size:0;}
	.login_list > li{display:inline-block; width:50%; font-size:1rem; vertical-align:top;}
	.login_list > li.wide{width:100%;}
	.login_list > li .inbox{margin:0 7px;}
	.login_list > li .sort{display:block; margin-bottom:18px;}
	.login_list > li .ico{display:block; margin:0 auto 12px;}
	.login_list > li .login_btn{margin:14px auto 0;}
	.login_list > li .point_count{display:block; padding:4px 0; font-size:21px; font-weight:500;}
	.login_list > li small{font-size:15px; font-weight:500; color:#807f7f;}
	.login_list ul > li{position:relative; margin-bottom:10px; font-size:15px; font-weight:400;}
.login_list ul > li:last-child{margin-bottom:0;}
	.login_list ul > li:after{content:""; display:block; clear:both;}
	#.login_list ul > li a{opacity:0; visibility:hidden; display:block; position:absolute; top:100%; left:0; width:100%; padding:7px 8px 9px; border-radius:9px;  background-color:#ffeae3; color:#fa5d2a;}
	.login_list ul > li a{display:block; position:absolute; top:100%; left:50%; width:80%; margin-left:-40%; padding:10px 8px 10px; border-radius:9px;  background-color:#ffeae3; color:#fa5d2a;}
	.login_list ul > li a small{color:inherit;}
	.login_list ul > li em{display:block; padding-right:34px; text-align:left;}
	.login_list ul > li > .count{display:inline-block; position:absolute; top:50%; left:inherit; right:0; width:25px; height:25px; line-height:25px; padding:0 4px; border-radius:50%; background-color:#f1f1f1; font-weight:500; transform:translateY(-50%);}
	.login_list ul > li:hover{z-index:10;}
	#.login_list ul > li:hover a{opacity:1; visibility:visible;}
	.login_list ul > li a.visible{opacity:1; visibility:visible;}
	.area_login_in .login_top .user_btn{display:none;}
	.area_login_in .login_list{display:table; table-layout:fixed; width:100%; max-width:none; border:1px solid #ebebeb;}
	.area_login_in .login_list > li{display:table-cell; width:50%; padding:23px 24px 20px; border-left:1px solid #ebebeb; vertical-align:top;}
	.area_login_in .login_list > li:first-child{border-left:0;}
	.area_login_in .login_list .tit{display:inline-block; min-width:80px; line-height:34px; padding:0 10px; margin:0 auto 16px; border-radius:3px; font-size:14px; font-weight:500;}
	.area_login_in .login_list .tit.type1{background-color:#fa5d2a; color:#fff;}
	.area_login_in .login_list .tit.type2{background-color:#343a43; color:#fff;}
	.login_quick_menu{margin-top:20px; font-size:0; text-align:center;}
	.login_quick_menu a{display:inline-block; width:50%; padding:10px; font-size:1rem; vertical-align:top;}
	.login_quick_menu a .ico{margin-left:8px;}
	
.head_hashtag{width:100%; margin-top:40px;}
	.area_hashtag{position:relative; padding:20px 20px 20px 70px; background-color:#236bcc;}
	.area_hashtag b{display:block; position:absolute; top:50%; left:auto; font-size:25px; color:#fff; transform:translateY(-50%);}
	.area_hashtag .hashtag_box{margin-left:204px; font-size:0;}
	.area_hashtag .hashtag_box a{display:inline-block; padding:10px 26px; margin:2.5px 6px; border-radius:30px; background-color:transparent; font-size:14px; font-weight:400; color:#fff; text-align:center; vertical-align:middle; transition:background .3s, color .4s;}
	.area_hashtag .hashtag_box span{overflow:hidden; display:block; width:100%; white-space:nowrap; word-wrap:normal; text-overflow:ellipsis;}
	.area_hashtag .hashtag_box a:hover{background-color:#fff; color:#236bcc; box-shadow:10px 10px 20px rgba(0,0,0,.2);}
	.area_hashtag .hashtag_box a.active{background-color:#fff; font-weight:400; color:#236bcc; box-shadow:10px 10px 20px rgba(0,0,0,.2);}
	
	
.main_body{}
.sect{padding:80px 0 90px;}
.sect .tit_box{position:relative; max-width:1400px; margin:0 auto 46px;}
.sect .tit_box h2{display:inline-block; font-size:30px; font-weight:400; vertical-align:middle;}
.sect .tit_box p{display:inline-block; margin-left:48px; font-size:15px; color:#989898; vertical-align:middle;}
.sect .tit_box .more{display:block; width:120px; height:40px; line-height:40px; border:1px solid #afafaf; border-radius:20px; font-size:11px; font-weight:500; color:#000; text-align:center; text-shadow:0 0 0 rgba(0,0,0,.5);}
.sect .tit_more_box{padding-right:120px;}
.sect .tit_more_box .more{position:absolute; top:50%; right:0; margin-top:-20px;}
.sect .btn_wrap{margin-top:40px; text-align:center;}
.sect .more_btn{display:inline-block; width:324px; padding:12px 15px 13px; border:1px solid #ced8e5; border-radius:3px; background-color:#e8ecf1; color:#717a84; font-size:14px; font-weight:500; text-align:center;}
.sect .more_btn span{display:inline-block; vertical-align:middle;}
.sect .more_btn span:after{content:""; display:inline-block; width:9px; height:5px; margin-left:10px; background:url(/images/main/icon_more.png) no-repeat 50% 50%; vertical-align:2px;}
.sect .more_btn.type1{background-color:#dcedf2; border-color:#bcd7df; color:#73919a;}
.sect .more_btn.type1 span:after{background-image:url(/images/main/icon_more_type1.png);}

.sec_popular{background-color:#f8fbfe;}
.sec_all_campaign{padding:0 0 70px;}
.sec_review{padding-bottom:70px; background-color:#f2f9fb;}

@media screen and (max-width:1560px){
	.area_hashtag{padding:20px;}
	.area_hashtag b{position:static; font-size:22px; text-align:center; transform:none;}
	.area_hashtag .hashtag_box{display:inline-block; width:100%; margin:12px 0 0; text-align:center;}
	.login_list ul > li{font-size:14px;}
	
}

@media screen and (max-width:1400px){
	.head_visual{width:62%;}
	.head_login{width:38%;}	
}

@media screen and (max-width:1280px){ /*border-radius:11px;*/
	.main_head .inner{position:relative;}
	.main_head .head_visual,
	.main_head .head_login{height:auto;}
	
	.head_visual{width:100%; padding-top:33.2%;}
	.area_visual{border-radius:11px;}
	.area_visual li .pc{background-size:100% auto;}
	
	.head_login{width:100%; margin-top:20px; padding-left:0;}
	.head_login .login_button{display:none; position:absolute; top:20px; right:20px; width:48px; height:48px; line-height:50px; border-radius:50%; background-color:#fa5d2a;}
	.head_login .login_button .header_menu_btn{display:block; padding:17px 14px;}
	.head_login .login_button .header_menu_btn .btn_line{background-color:#fff;}
	
	.area_login{padding:/*32px 36px 30px*/ 25px 36px 26px; border-radius:11px;}
	.area_login .login_top{text-align:left; font-size:16px;}
	.login_list > li .inbox{margin:0;}
	.login_list > li .sort{display:none;}
	.login_list > li .login_btn .pc_none{display:inline-block;}
	.login_quick_menu{margin-top:12px;}
	
	.area_login_in .login_list > li{padding:20px;}
	.area_login_in .login_top p{padding-right:100px;}
	.area_login_in .login_top .user_btn{display:block; position:absolute; top:50%; right:0; transform:translateY(-50%);}
	.area_login_in .login_cont{display:none; margin-top:16px;}
	.area_login_in .login_list ul{max-width:208px; margin:0 auto;}
	.area_login_in.active .login_cont{display:block;}
	
	.area_login_not .login_top{position:absolute; left:auto;}
	.area_login_not .login_cont{margin-top:0; padding-left:250px;}
	.area_login_not .login_list{max-width:none;}
	.area_login_not .login_list{width:102%;}
	.area_login_not .login_list > li{width:31.333%; margin:0 2% 0 0;}
	.area_login_not .login_list > li .login_btn{margin-top:0;}	
		
	.head_login.active .area_login{display:block;}		
		
	.head_hashtag{width:100%; margin-top:20px;}
	.area_hashtag{padding:20px; border-radius:11px; text-align:center;}
	.area_hashtag .hashtag_box a{max-width:31.333%; margin:0.5% 0.5%; padding:8px;}
	
	
	.sect{padding:60px 0 70px;}
	.sect .tit_box {margin-bottom:36px;}
	.sect .tit_box h2{font-size:26px;}
	.sect .tit_box .more{width:100px;}
	.sect .tit_more_box{padding-right:100px;}
	.sect .btn_wrap{margin-top:30px;}
		
	.sec_all_campaign{padding:0 0 50px;}
	.sec_review{padding-bottom:50px;}
}

@media screen and (max-width:1200px){
}

@media screen and (max-width:1059px){ /*font size 14px  border-radius:9px; */
	.head_visual{padding-top:0;}
	.area_visual{position:relative; border-radius:9px;}
	.area_visual li .pc{display:none;}
	.area_visual li .mobile{display:block; text-align:center;}
	
	.head_login{position:static; width:100%; margin-top:16px;}
	.head_login .login_button{display:none;}
	.head_login .area_login{position:static; display:block !important;}
	.area_login{padding:22px; border-radius:9px;}
	.area_login .login_top{font-size:16px;}
	.area_login_in .login_top p{padding-right:100px;}
	.area_login_in .login_top .user_btn{display:block; position:absolute; top:50%; right:0; transform:translateY(-50%);}
	.area_login_in .login_cont{display:none; margin-top:16px;}
	.area_login_in.active .login_cont{display:block;}
	
	.area_hashtag{border-radius:9px;}
	
	.sect .tit_box{/*text-align:center; */margin-bottom:26px;}
	.sect .tit_box h2{font-size:22px;}
	.sect .tit_box p{font-size:1rem; margin-left:30px;}
	.sect .btn_wrap{margin-top:28px;}
	.sect .more_btn{width:auto; min-width:210px; padding:8px 16px 9px; font-size:13px;}	
}

@media screen and (max-width:768px){
	.visual_dot{bottom:16px !important; left:16px !important;}
	
	.area_login .login_top{position:relative; top:auto; left:auto;}
	.area_login_in .login_list .tit{font-size:13px; margin-bottom:10px;}
	.area_login_not .login_top{text-align:center;}
	.area_login_not .login_top br{display:none;}
	.area_login_not .login_cont{margin-top:16px; padding-left:0;}
	
	.area_hashtag .hashtag_box{line-height:1.8; text-align:left;}
	.area_hashtag .hashtag_box a{display:inline; max-width:none; width:auto; padding:0; border:0; font-size:13px;}
	.area_hashtag .hashtag_box a.active{background-color:transparent; color:#fff; box-shadow:none;}
	.area_hashtag .hashtag_box span{display:inline; padding:2px 0; white-space:inherit; word-wrap:inherit; text-overflow:inherit;}
	
	.sect{padding:56px 0 60px;}	
}

@media screen and (max-width:640px){
	.area_login{padding:18px;}
	.area_login .login_top{font-size:15px;}
	.area_login .login_top .ico{width:35px; height:28px;}
	.login_list ul > li{font-size:1rem;}
	.login_quick_menu{margin-top:6px;}
	
	.area_hashtag b{font-size:20px;}
	.head_hashtag{width:100%; margin-top:16px;}
	
	.sect .tit_box:not(.tit_more_box){text-align:center;}
	.sect .tit_box h2{display:block;}
	.sect .tit_box p{display:block; margin-left:0; margin-top:4px;}
	.sect .tit_box .more{width:86px; height:34px; line-height:34px;}
	.sect .tit_more_box{padding-right:0;}
	.sect .tit_more_box .more{top:-2px; margin-top:0;}
	.sect .tit_more_box p{margin-top:6px;}
	.sect .more_btn{min-width:140px;}	
}

@media all and (max-width:450px){
	.visual_dot{bottom:10px !important; left:10px !important;}
	
	.head_login{margin-top:12px;}
	.area_login{padding:20px 18px 18px;}
	.login_list > li .point_count{padding:0;}
	.login_quick_menu a{width:100%;}
	.login_quick_menu a + a{border-top:1px solid #ebebeb;}
	
	.area_login_not .login_list > li{width:48%;}
	.area_login_not .login_list > li.wide{width:98%; margin-top:2%;}
	.area_login_in .login_top p{padding-right:74px;}
	.area_login_in .login_list{padding:0; border:0;}
	.area_login_in .login_list > li{display:inline-block; width:100%; margin-top:12px; background-color:#f9f9f9; border-left:0; /*border-top:1px solid #ebebeb;*/}
	.area_login_in .login_list > li:first-child{border-top:0; margin-top:0;}
	
	.head_hashtag{margin-top:12px;}
}