@charset "utf-8";

#wrapper{position: relative; width: 100%; height: 100%; overflow: hidden; background: url(/treemap/resources/images/bg_main.jpg) 50% 50% no-repeat; background-size: cover;}

/* header */
header{position: relative; box-sizing: border-box; width: 100%; padding: 60px 60px 0 60px; height: 90px;}

header .container_header{position: relative; width: 100%; display: flex; flex-direction: row; align-items: center;}

header .container_header .container_mainlogo a.logo_home{display: block; width: 235px; height: 30px; background: url(/treemap/resources/images/logo_socialmap.png)50% 50% no-repeat; background-size: cover;}

header .container_header .container_login{flex: 1 1 auto; text-align: right;}
header .container_header .container_login a{display: flex; align-items: center; justify-content: right; font-size: 1em;}

header .container_header .container_login .log-title,
header .container_header .container_login .btn-logoff,
header .container_header .container_login.on .btn-logon{display: none;}
header .container_header .container_login.on .btn-logoff{display: flex; color: #fff;}

header .container_header .container_login .btn-logon{color:#fff;}
header .container_header .container_login .btn-logon span{position: relative; display: inline-block; margin-right: 10px; overflow: hidden; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75.51 97.21'%3E%3Cdefs%3E%3Cstyle%3E.ic_login%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='ic_login' d='M590.27,329.53h-6.38V315a23.08,23.08,0,0,0-46.16,0v14.54h-6.37a8.3,8.3,0,0,0-8.3,8.29v43a8.3,8.3,0,0,0,8.3,8.29h58.91a8.31,8.31,0,0,0,8.3-8.29v-43A8.31,8.31,0,0,0,590.27,329.53Zm-29.46-30.62A16.1,16.1,0,0,1,576.89,315v14.54H544.73V315A16.11,16.11,0,0,1,560.81,298.91Zm-30.75,38.91a1.3,1.3,0,0,1,1.3-1.29h58.91a1.3,1.3,0,0,1,1.3,1.29v43a1.3,1.3,0,0,1-1.3,1.29H531.36a1.3,1.3,0,0,1-1.3-1.29Z' transform='translate(-523.06 -291.91)'/%3E%3Cpath class='ic_login' d='M550.32,368.56a5.5,5.5,0,0,0,5.26,7.12h10.47a5.5,5.5,0,0,0,5.26-7.12l-1.43-4.64a12.44,12.44,0,1,0-18.13,0ZM560.81,350a5.43,5.43,0,0,1,2.09,10.45l-1.26.53,2.38,7.73h-6.41L560,361l-1.25-.53A5.43,5.43,0,0,1,560.81,350Z' transform='translate(-523.06 -291.91)'/%3E%3C/svg%3E") center left no-repeat; background-size: 20px 20px;}

header .container_header .container_login .btn-logoff span{position: relative; display: inline-block; margin-right: 10px; overflow: hidden; width: 25px; height: 25px; border: 1px solid #dedede; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg data-name='Layer 3' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135.85 142.88'%3E%3Cpath d='M155 177.48c-10-3-14.39-9.7-14.39-9.7v-13.05a29.5 29.5 0 0 0 6-7 45.72 45.72 0 0 0 3.35-9.36S156 134 157.3 127s-4.69-9-4.69-9 2-5.69-2.67-20.74c-5.36-17.4-24.77-16.73-24.77-16.73s-19.4-.67-24.76 16.73c-4.63 15-2.67 20.74-2.67 20.74s-6 2-4.69 9 7.36 11.38 7.36 11.38a45.72 45.72 0 0 0 3.35 9.36 29.5 29.5 0 0 0 6 7v13.05s-4.35 6.69-14.39 9.7-38.14 16.07-38.14 45.85H193.1c0-29.79-28.1-42.84-38.1-45.86Z' transform='translate(-57.25 -80.44)' style='fill:%23d2d5d9'/%3E%3C/svg%3E") #fff 50% bottom no-repeat; background-size: 80%;}
header .container_header .container_login .btn-logoff span::before{content: ''; display: block; width: 100%; min-height: 100%; background: url(/treemap/resources/images/test_img.jpg) 50% 50% no-repeat; background-size: cover;}

header .container_header .container_login .log-title{position: absolute; top: 50px; right: -60px; transform: translateX(-50%); width: 100px; padding: 7px 0; border: 1px solid #dedede; border-radius: 5px; box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, .12); z-index: 120; background-color: #fff;}
header .container_header .container_login .log-title a{display: inline-block; width:100%; text-align:center; padding: 5px 0; font-size: 13px; color:#000;}
header .container_header .container_login .log-title a:hover{text-decoration: underline;}
header .container_header .container_login .log-title .ico-arrow{display: block; width: 0px; height: 0px; border-bottom: 6px solid #dedede; border-left: 6px solid transparent; border-right: 6px solid transparent; transform: rotate( 0deg ); position: absolute; top: -7px; left: 50%; transform: translateX(-50%);}
header .container_header .container_login .log-title .ico-arrow2{display: block; width: 0px; height: 0px; border-bottom: 6px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent; transform: rotate( 0deg ); position: absolute; top: -6px; left: 50%; transform: translateX(-50%);}

/* main */
main{position: relative; width: 100%; height: calc(100% - 90px); display: flex; align-items: center;}

main .container_all{position: relative; width: 100%; display: flex; flex-direction: row; align-items: center;}

main .container_all .section_socialmap{position: relative; width: 40%; box-sizing: border-box; padding: 0 3% 0 7%; overflow: hidden;}
main .container_all .section_socialmap .wrap_socialmap_explain,
main .container_all .section_socialmap .wrap_socialmap_download{position: relative; width: 100%;}

main .container_all .section_socialmap .wrap_socialmap_explain h4{font-size: 3.2em; font-weight: bold; color: #fff;}
main .container_all .section_socialmap .wrap_socialmap_explain p{font-size: 1.2em; color: #bbb; line-height: 1.3em;}
main .container_all .section_socialmap .wrap_socialmap_explain p.title{font-size: 3em; font-weight: bold; color: #58abff; margin-bottom: 30px;}

main .container_all .section_socialmap .wrap_socialmap_download{margin-top: 60px;}
main .container_all .section_socialmap .wrap_socialmap_download p{font-size: 1.2em; color: #fff; margin-top: 10px;}
main .container_all .section_socialmap .wrap_socialmap_download a{display: inline-block; width: 200px; height: 60px;}
main .container_all .section_socialmap .wrap_socialmap_download a:first-child{margin-right: 10px;}
main .container_all .section_socialmap .wrap_socialmap_download a.appStore{background: url(/treemap/resources/images/appStore.png)50% 50% no-repeat;}
main .container_all .section_socialmap .wrap_socialmap_download a.googlePlay{background: url(/treemap/resources/images/googlePlay.png)50% 50% no-repeat;}

main .container_all .section_maplist{position: relative; width: 60%; overflow: hidden;}

main .container_all .section_maplist .wrap_maplist_list ul li a{position: relative; display: inline-block; width: 100%; overflow: hidden;}
main .container_all .section_maplist .wrap_maplist_list ul li a .inner_list{position: relative; width: 100%; padding-top: 115%; overflow: hidden; border-radius: 10px;}
main .container_all .section_maplist .wrap_maplist_list ul li a .inner_list img{min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
main .container_all .section_maplist .wrap_maplist_list ul li a .inner_list .box_txt{position: absolute; bottom: 30px; left: 30px;}
main .container_all .section_maplist .wrap_maplist_list ul li a .inner_list .box_txt p{font-size: 1.2em; margin-bottom: 5px; font-weight: 200;}
main .container_all .section_maplist .wrap_maplist_list ul li a .inner_list .box_txt h5{font-size: 1.6em; font-weight: bold;}

main .container_all .section_maplist .wrap_maplist_button{position: relative; width: 100%; margin-top: 20px; display: flex; flex-direction: row; align-items: center;}

main .container_logo{position: absolute; bottom: 60px; left: 60px;}
main .container_logo a.logo_nubiz{display: inline-block; width: 150px;}
main .container_logo a.logo_nubiz img{width: 100%;}
main .container_logo p{color: #fff; font-weight: 200; margin-top: 2px;}

/* swiper */
.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, .swiper-pagination-fraction{bottom:  inherit !important; left: inherit !important; width: auto !important;}
.swiper-pagination{position: relative !important; text-align: left !important;}
.swiper-pagination-bullet{background:rgba(255, 255, 255) !important; opacity: .6 !important; width: 15px !important; height: 15px !important; margin: 0 10px !important;}
.swiper-pagination-bullet-active{background: rgba(88, 171, 255) !important; opacity: 1 !important; width: 40px !important; height: 15px !important; border-radius: 15px !important;}

.swiper-button-next, 
.swiper-button-prev{position: relative !important; top: inherit !important; right: inherit !important; left: inherit !important; width: 58px !important; height: 42px !important; display: block !important; margin-top: 0 !important;}
.swiper-button-next:after, 
.swiper-button-prev:after{content: '' !important; display: none Im !important;}
.swiper-button-next{background: url(/treemap/resources/images/btn_right.png)50% 50% no-repeat; background-size: cover; margin-left: 15px;}
.swiper-button-prev{background: url(/treemap/resources/images/btn_left.png)50% 50% no-repeat; background-size: cover; margin-right: 15px;}

/* 미디어쿼리 1400 */
@media (max-width:1400px){

    #wrapper{width: 1400px;}

    main .container_all .section_socialmap .wrap_socialmap_explain p.title{margin-bottom: 20px;}
    main .container_all .section_socialmap .wrap_socialmap_download{margin-top: 40px;}

}