body { overflow-y: auto; color:#2d343e; background-color: #ffffff;}
a { cursor:pointer; }
#eventNotice {
/* display: none; */
/*
position: absolute;
top: 150px; left: 20px;
text-align: center;
display: inline-block;
min-width: 135px;
min-height: 90px;
background-color: #ffffff;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #dbdbdb;
z-index: 1;
*/
}
/*
#eventNotice .ev-content {
padding: 5px 10px;
}
#eventNotice .ev-content * {
font-family: 'Noto Sans', 'Noto Sans KR';
font-size: 15px;
font-weight: 300;
letter-spacing: -0.02em;
color: #878791;
}
#eventNotice .ev-content .btn-box {
text-align: right;
line-height: 1;
}
#eventNotice .ev-content .btn-box .btn-en-close { cursor: pointer; }
#eventNotice .ev-content .text-box a { text-decoration: none; color: inherit; line-height: 1.3; }
#eventNotice .ev-content .text-box a span {
font-weight: 600;
color: #212327;
}
#eventNotice .ev-content .btn-box .btn-en-close.big-close,
#eventNotice .ev-content .text-box .big-arrow { display: none;}
*/
#awardNotice {
position: absolute;
top: 3px; right: 35px;
display: inline-block;
z-index: 100;
}
@media only screen and (max-width:1770px) {
#awardNotice { display: none; }
}
@media only screen and (max-width:991px) {
.navigation { top: 26%! important; }
}
/**************************************************************************************/
/******로그인 전***********************************************************************/
/**************************************************************************************/
/*main header css -START*/
#nav {
font-family: 'Noto Sans KR';/*'Raleway','Nanum Gothic';*/
position: relative;
top:0px; left:0px;
width:100%;
z-index: 100;
padding: 0 15px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
/* background-color: #ffffff; */
background-color: #f3f4f9;
}
#nav.fixed {z-index: 90 !important;}
#nav[data-page="upgrade"],
#nav[data-page="template"],
#nav[data-page="edu"],
#nav[data-page="production"],
#nav[data-page="mainfunction"] {/*border-bottom: 1px solid #eceff4;*/box-sizing: border-box;}
#nav[data-page="upgrade"] ~ #cl-footer,
#nav[data-page="template"] ~ #cl-footer,
#nav[data-page="mainfunction"] ~ #cl-footer,
#nav[data-page="edu"] ~ #cl-footer,
#nav[data-page="production"] ~ #cl-footer { border-top: 1px solid #eceff4; }
#nav.default-nav ~ #cl-footer { border-top: 1px solid #eceff4; }
#nav .full-width .navbar-header { margin-left:50px; }
#nav .header { height:64px;max-width:1170px; margin: auto; }
#nav .header .navbar-header .navbar-brand { padding: 15px; }
#nav.intro .header .navbar-header .navbar-brand { padding: 0px 15px 0 0; line-height:64px; }
#nav .navbar-toggle {
margin:10px 15px;
}
#nav .navbar-toggle .icon-bar {
background-color:#37374a;
border:1px solid #37374a;
width:20px;
}
#nav .main-menu .navbar-nav > li > a {
font-size: 13px;
/*letter-spacing: 0.1em;*/
color:#37374a;
padding:0px 18px;
/* min-width: 126px; */
min-width: 80px;
text-align: center;
line-height: 64px;
height: 64px;
font-weight: 400;
}
#nav .main-menu .navbar-nav > li.lang-box > a,
#nav .main-menu .navbar-nav > li.lang-box > a:hover,
#nav .main-menu .navbar-nav > li.lang-box > a:focus {
padding: 0 22px;
}
#nav .main-menu .navbar-nav > li > a:hover,
#nav .main-menu .navbar-nav > li > a:focus {
background-color: transparent;
/* color:#ffffff; */
/* background-color: #46505d; */
background-color: #f9f9f9;
border-radius: 20px;
margin: 12px 0;
height: 40px;
line-height: 40px;
/* padding:0px 18px; */
}
#nav .main-menu .navbar-nav > li > a:hover .caret,
#nav .main-menu .navbar-nav > li > a:focus .caret{
border-top-color: #ffffff;
}
/*navbar-link*/
.navbar-link {padding:0 0 0 8px;}
.navbar-link * {font-size:13px; color:#37374a;font-weight: 400;}
.navbar-link,
.navbar-link a { float:left; }
/* #nav[data-page="upgrade"] .navbar-link a,
#nav[data-page="template"] .navbar-link a,
#nav[data-page="mainfunction"] .navbar-link a {height:56px;} */
.navbar-link a {/*padding: 16px 25px;*/ padding: 0 15px; height:40px; line-height: 40px; margin: 12px 5px 12px 0; box-sizing: border-box;}
.navbar-link a.active {
/* border-bottom: 2px solid #3c4450; */
background-color: #f9f9f9;
color: #4789e7;
border-radius: 30px;
}
.navbar-link a:hover:not(.active) {
background-color:#f9f9f9;
border-radius: 30px;
}
.navbar-link a span.newicon { color:#e74747; font-size: 10px; letter-spacing: -0.2px; font-family: 'Noto Sans KR'; }
.navbar-link li { padding: 0 25px; }
.navbar-link li:last-child { margin-right: 0px; }
.ctsHelp a {
display: inline-block;
font-size: 12px;
letter-spacing: 0.1em;
background-color:#4789e7;
color:#ffffff;
padding: 4px 12px;
min-width: 92px;
margin-top: 12px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.ctsHelp a:hover,
.ctsHelp a:focus {
color:#ffffff;
}
.ctsHelp a .fa { margin-left: 0; margin-right: 5px; }
/*main header css -END*/
/*main content_section1~3::: common - START*/
.navigation {
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 50px;
z-index: 999;
}
.navigation li a {
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #ddd;
}
.navigation li a.active {
background-color: #000;
}
section#about .container,
section#function .container,
section#creatorlinkqna .container { max-width: 946px; }
section.intro { padding: 100px 0; font-family: 'Raleway','Noto Sans KR', 'Nanum Gothic'; color:#212327; min-height: 800px; }
section#service {
min-height: initial;
padding: 100px 0;
background-color: #051432; color: #fff;
position:relative;
background-image: url('//storage.googleapis.com/i.addblock.net/intro/intro_service_video_img2.jpg');
background-repeat:no-repeat;
background-size: auto 100%;
background-position: center 0;
}
section#bestsite { background-color: #f3f4f9; }
section#creatorlinkqna { background-color: #ffffff; }
section#responsive { background-color: #eaebf1; }
section.intro .container .row,
section.intro .container .row div {
text-align: center;
}
.intro-header .title {
font-size: 45px;
font-weight: 300;
line-height: 1.4;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 25px;
word-wrap:break-word;
}
.intro-header .title.en {
font-size: 45px;
line-height: 1.25;
letter-spacing: 0.05em;
}
.intro-header .subtitle {
color:#878791;
font-size: 15px;
font-weight: 300;
letter-spacing: 0.02em;
line-height: 1.6;
margin-bottom: 20px;
word-wrap:break-word;
word-break: keep-all;
}
.intro-header .subtitle.en {
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.05em;
}
.intro-header .btn-box,
.intro-content .btn-box{
margin:30px auto 15px auto;
}
.intro-header .btn-box a {
font-size: 14px;
letter-spacing: 0.02em;
min-width: 195px;
padding:16px 53px;
color:#39384a;
background-color:transparent;
border: 1px solid #39384a;
display: inline-block;
}
.intro-content .btn-box a {
font-size: 14px;
letter-spacing: 0.02em;
min-width: 195px;
padding:16px 53px;
color:#39384a;
border: 1px solid #39384a;
background-color: none;
display: inline-block;
margin: 10px 0 0;
}
.intro-header .btn-box a.en,
.intro-content .btn-box a.en {
text-transform: uppercase;
font-size: 15px;
}
.intro-header .btn-box a:hover,
.intro-header .btn-box a:focus {
color: #ffffff;
background-color: #46505d;
text-decoration: none;
}
.intro-content .btn-box a:hover,
.intro-content .btn-box a:focus {
background-color: #5b6573;
text-decoration: none;
}
/*main content_section1~4::: common - END*/
/*main content_section1::: service - START*/
#service { overflow: hidden; }
#service div * { color:#fff; }
#service > .container, #service > .container > .row { position: relative; }
#service .video-box { position: absolute; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; }
#service .filter-box { position: absolute; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; background-color:#424449; opacity: 0.7; }
#service .intro-header {
}
#service .intro-header .subtitle { opacity: 0.8; }
#service .intro-header .btn-box {
margin:30px auto 20px;
}
#service .intro-header .btn-box a {
border-color: #fff;
}
#service .intro-header .btn-box a.btn-white {
background-color: #ffffff;
color: #39384a;
}
#service .intro-header .btn-box a + a { margin-left: 20px; }
#service .intro-header .btn-box a:hover,
#service .intro-header .btn-box a:focus {
color: #46505d;
background-color: #ffffff;
}
#service .intro-header .btn-box a.btn-white:hover,
#service .intro-header .btn-box a.btn-white:focus {
background-color: rgba(255,255,255,0.9);
}
#service .intro-header .btn-box a > .fa {
margin-left: 5px;
font-family: 'FontAwesome'! important;
font-size: 15px;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
-o-transform: translateY(1px);
transform: translateY(1px);
}
#service .intro-header .btn-box a:hover > .fa,
#service .intro-header .btn-box a:focus > .fa {
color: #46505d;
}
#service .intro-header .subtitle span { font-family:'Noto Sans KR', 'Raleway'!important; }
#service .utext-box {
font-family: 'Noto Sans KR', 'Raleway';
font-size: 15px;
position: absolute;
bottom: 0; right: 15px;
padding: 0 15px;
z-index: 2;
font-weight: 300;
}
#service .utext-box a {
display: inline-block;
overflow: hidden;
margin: 0 0 -13px;
background-color: #fff;
padding: 6px 6px 1px;
border-radius: 50%;
margin-left: 10px;
}
#service .utext-box a svg {
fill:#3c3f43;
}
#service .utext-box a:nth-of-type(1) { margin-left: 10px; }
#service .utext-box a img { float: left; }
#service .utext-box .text { display: inline-block; z-index: 2; opacity: 0.8 }
#service .utext-box .user-num {
font-family: 'Noto Sans KR', 'Raleway';
color: #fff;
font-weight: 400;
font-size: 18px;
}
#videoModal {
background: #ffffff;
}
#videoModal .modal-header {
padding-top: 0;
padding-right: 20px;
min-height: 30px;
}
#videoModal .modal-content {
background: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#videoModal .modal-dialog {
margin: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
padding-top; 20px;
}
#videoModal .modal-body {
padding-top: 100px;
}
#videoModal .aboutVideo-box { width: 722px; margin: 40px auto 0;}
#videoModal .aboutVideo-box .embed-responsive-16by9,
#videoModal .aboutVideo-box .embed-responsive-item { width:722px; height:482px; }
#videoModal .aboutVideo-box .embed-responsive-item {border:1px solid #ededed;}
#videoModal .embed-responsive { position: relative; }
#videoModal .embed-responsive.stopPlay #overlay {
border:1px solid #ededed;
position: absolute;
top:0; left:0;
width: 100%; height: 100%;
background-image: url('https://storage.googleapis.com/i.addblock.net/aboutVideoImg.png');
background-repeat: no-repeat;
background-size: cover;
z-index: 50; cursor: pointer;
}
/*main content_section1::: service - END*/
/*main content_section2::: about - START*/
#about { background: #fff; font-family:'Noto Sans KR',sans-serif;}
#about .intro-header h1 b { font-weight: 500; }
#about .intro-header .btn { padding: 0; }
#about .intro-header .btn a { display: none; color: #fff; background: #39384a; padding: 12px 30px; }
#about .intro-content{ padding: 0; }
#about .video { position: relative; margin: 50px 0 0; }
#about .video .video-wrap { position: relative; display: inline-block; margin: 0 auto; }
#about .video .video-wrap .embed-responsive-16by9,
#about .video iframe { width: 720px; height: 482px; }
#about .video .video-wrap .embed-responsive-16by9 { position: relative; }
#about .video .video-over {
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//storage.googleapis.com/i.addblock.net/video_bg.jpg);
background-repeat: no-repeat;
background-size: 720px 481px;
background-position: center center;
z-index: 50;
cursor: pointer;
}
/*#about .video_bg { position: absolute; top: 0; left: 50%; overflow: hidden; width: 962px; border: 1px solid #000; z-index: 99; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }*/
/*#about .video_bg img { float: left; width: 100%; }*/
/*main content_section2::: about - END*/
/*main content_section?::: m_template (only visible from Mobile) - START*/
#m_template { background: #eaebf1; }
#m_template .img-wrap { width: 150px; margin: 0 auto 30px ; }
#m_template .m.sp-slideshow { position: relative; width: 100%; }
#m_template .m.sp-content { position: relative; width: 100%; height: 100%; overflow: hidden; }
#m_template .start-effect {
-webkit-transition-delay: 0.4s!important;
-moz-transition-delay: 0.4s!important;
-o-transition-delay: 0.4s!important;
transition-delay: 0.4s!important;
}
#m_template .m.sp-left-effect2 {
-webkit-transition: left cubic-bezier(0,.61,0,1) 0.7s;
-moz-transition: left cubic-bezier(0,.61,0,1) 0.7s;
-o-transition: left cubic-bezier(0,.61,0,1) 0.7s;
-ms-transition: left cubic-bezier(0,.61,0,1) 0.7s;
transition: left cubic-bezier(0,.61,0,1) 0.7s;
}
#m_template .m.sp-left-effect {
-webkit-transition: left cubic-bezier(.9,0,.09,1) 0.5s;
-moz-transition: left cubic-bezier(.9,0,.09,1) 0.5s;
-o-transition: left cubic-bezier(.9,0,.09,1) 0.5s;
-ms-transition: left cubic-bezier(.9,0,.09,1) 0.5s;
transition: left cubic-bezier(.9,0,.09,1) 0.5s;
}
#m_template .m.sp-content { width: 100%; overflow: hidden; }
#m_template .m.sp-slider {
position: relative;
left: 0;
width: 1500%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
opacity: 0;
}
#m_template .m.sp-content .m.sp-slider { left: 100%; }
#m_template .m.sp-slider > li {
position: relative;
color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 360px;
margin: 0 10px;
float: left;
text-align: center;
-webkit-transition: opacity ease-in 0.4s;
-moz-transition: opacity ease-in 0.4s;
-o-transition: opacity ease-in 0.4s;
-ms-transition: opacity ease-in 0.4s;
transition: opacity ease-in 0.4s;
}
#m_template .m.sp-slider > li img {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block;
margin: 0 auto;
padding: 0;
width: 100%;
max-height: 100%;
cursor: pointer;
}
#m_template .intro-content .btn-box { padding-bottom: 0; padding-top: 20px;}
#m_template .m.sp-slider > li > .m-over-box {
position: absolute;
top:0; left:0; right:0; bottom:0;
width: 100%;
display: inline-block;
text-align: center;
background-color: rgba(0,0,0,0.6);
vertical-align: middle;
cursor: default;
}
#m_template .m.sp-slider > li > .m-over-box { height: 0; z-index: -1; }
#m_template .m.sp-slider > li:hover > .m-over-box { height: 100%; z-index: 2; }
#m_template .m.sp-slider > li > .m-over-box > a {
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-49%,-50%);
-moz-transform: translate(-49%,-50%);
-ms-transform: translate(-49%,-50%);
-o-transform: translate(-49%,-50%);
transform: translate(-49%,-50%);
font-size: 12px;
letter-spacing: 0.22em;
background-color: #fff;
padding: 10px 30px;
color: #000;
cursor: pointer;
}
#m_template .m.slider-control {
cursor: pointer;
position: absolute;
top:0; bottom: 0;
display: inline-block;
width: 110px; height: 100%;
}
#m_template .m.slider-control.left { left: 0; }
#m_template .m.slider-control.right { right: 0; }
#m_template .m.slider-control .fa { display: none;}
/*main content_section?::: m_template (only visible from Mobile) - END*/
/*main content_section2::: bestsite - START*/
#bestsite { overflow: hidden; }
#bestsite .intro-header .title { word-break: keep-all; }
#bestsite .intro-header .title > span > b { font-family:'Noto Sans KR'; }
#bestsite .intro-header .btn-box { margin: 30px auto 50px;}
#bestsite .subtitle strong { font-family:'Noto Sans KR', 'Raleway'!important; }
#bestsite .intro-content { position: relative; min-height: 330px; }
#bestsite .bestsite-type { margin-top: 60px; margin-bottom: 50px; }
#bestsite .bestsite-type .nav-tabs { display: inline-block; }
#bestsite .bestsite-type .nav-tabs > li,
#bestsite .bestsite-type .nav-tabs > li:first-child { width: auto; }
#bestsite .bestsite-type .nav-tabs > li + li { margin-left: 50px; }
#bestsite .bestsite-type .nav-tabs > li > a {
font-family: 'Noto Sans', 'Noto Sans KR';
font-size: 18px;
font-weight: bold;
color: #a6a6a6;
border-radius: 0;
padding: 3px 0;
}
#bestsite .bestsite-type .nav-tabs > li > a:hover ,
#bestsite .bestsite-type .nav-tabs > li > a:focus {
border-bottom-width: 2px;
border-color: transparent;
background-color: transparent;
}
#bestsite .bestsite-type .nav-tabs > li.active > a,
#bestsite .bestsite-type .nav-tabs > li.active > a:hover {
color: #212327;
border-bottom-width: 2px;
background-color: transparent;
border-color: transparent transparent #212327;
}
#bestsite .bestsite-list a { color: #212327; font-family: 'Open Sans'; font-size: 12px; text-decoration: none; word-wrap:break-word;}
#bestsite .bestsite-list .grid {
position: relative;
margin-bottom: 20px;
min-height: 270px;
padding: 0;
}
#bestsite .bestsite-list .grid .img-wrap {
position: absolute;
top: 0; left: 0; right: 0;
}
#bestsite .bestsite-list .grid.tablet .img-wrap { padding: 58px 66px 0 73px; }
#bestsite .bestsite-list .grid.laptop .img-wrap { padding: 42px 60px 0 60px; }
#bestsite .bestsite-list .grid.desktop .img-wrap { padding: 15px 47px 0 47px; }
#bestsite .bestsite-list .grid > a > p { color: #999999; margin-bottom: 0; }
#bestsite .bestsite-list .grid > a > p > strong { color: #212327; font-weight: normal; }
#bestsite .btn-box .bestsite-loadmore {
font-size: 14px;
letter-spacing: 0.02em;
padding: 8px 30px;
min-width: 110px;
color: #46505d;
background-color: transparent;
border: 1px solid #46505d;
-moz-border-radius: 0;
border-radius: 0;
text-decoration: none;
display: inline-block;
position: relative;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
text-align: left;
}
#bestsite .btn-box .bestsite-loadmore .fa {
font-family: 'FontAwesome';
margin-left: 7px;
position: absolute;
top: 12px;
}
#bestsite .btn-box .bestsite-loadmore.active, #bestsite .btn-box .bestsite-loadmore:hover, #bestsite .btn-box .bestsite-loadmore:focus {
color:#fff;
background-color:#46505d;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
/*20161121 bestsite left&right
#bestsite .loadmore-control {
position: absolute;
top: 50%;
display: inline-block;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#bestsite .loadmore-control.left {
left: 0;
}
#bestsite .loadmore-control.right {
right: 0;
}
#bestsite .bestsite-loadmore {
color:#46505d;
line-height: 1;
padding: 7px 3px 5px 10px;
width: 48px; height: 48px;
text-align: center;
-moz-border-radius: 30px;
border-radius: 30px;
border: none;
background-color: rgba(0,0,0,0.4);
margin-top: 0;
display: inline-block;
text-decoration: none;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
position: relative;
}
#bestsite .left .bestsite-loadmore {
padding: 7px 7px 5px 3px;
}
#bestsite .bestsite-loadmore .fa {
font-family: 'FontAwesome';
font-size: 32px;
color: #ffffff;
}
#bestsite .bestsite-loadmore:hover, #bestsite .bestsite-loadmore:focus {
color:#fff;
background-color:#46505d;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
*/
/*main content_section2::: bestsite - END*/
/*main content_section3::: creatorlinkqna - START*/
#creatorlinkqna { position: relative; }
#creatorlinkqna .title.en b { font-weight: 500; }
#creatorlinkqna #qnaaccordion { border-bottom: 1px solid #e5e8eb; }
#creatorlinkqna #qnaaccordion * { text-align: left; }
#creatorlinkqna #qnaaccordion .panel + .panel {
margin-top: 0;
}
#creatorlinkqna #qnaaccordion .panel.panel-default,
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading,
#creatorlinkqna #qnaaccordion .panel-default > .panel-body {
background-color: transparent;
border: none transparent;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#creatorlinkqna #qnaaccordion .panel-default:not(:first-child) {
border-top: 1px solid #e5e8eb;
}
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading {
padding: 15px 15px 15px 0;
}
#creatorlinkqna #qnaaccordion .panel-default:first-child > .panel-heading { padding-top: 0; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title {
position: relative;
}
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title > a {
display: block;
font-family: 'Open Sans', 'Noto Sans KR', 'Nanum Gothic';
font-size: 24px;
font-weight: 100;
letter-spacing: -0.03em;
color: #212327;
padding-right: 30px;
}
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title > a:after {
display: inline-block;
content: '';
position: absolute;
top: 5px; right: 5px;
width: 16px; height: 16px;
background-image: url(https://storage.googleapis.com/i.addblock.net/icon/fa_intro_creatorlinkqna_plus.png);
background-position: center center;
background-repeat: no-repeat;
-webkit-transition: ease-in-out 0.3s;
-moz-transition: ease-in-out 0.3s;
-o-transition: ease-in-out 0.3s;
-ms-transition: ease-in-out 0.3s;
transition: ease-in-out 0.3s;
}
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title a:not(.collapsed),
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title a:hover,
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title a:focus { color: #4789e7; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title a.collapsed { color: #212327; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title a:not(.collapsed):after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading + .panel-collapse .panel-body {
font-size: 14px;
font-weight: 300;
letter-spacing: 0.02em;
color: #878791;
border-top: none transparent;
padding: 0 15px 20px 0;
}
#creatorlinkqna #qnaaccordion .panel-default > .panel-footer + .panel-collapse .panel-body {
border-bottom: none;
}
#creatorlinkqna .btn-spcenter {
display: inline-block;
margin-top: 20px;
color: #46505d;
font-size: 16px;
font-weight: 300;
position: relative;
text-transform: uppercase;
}
#creatorlinkqna .btn-spcenter:after {
content: '';
display: inline-block;
position: absolute;
top: 8px; right: -15px;
width: 8px; height: 8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 1px solid #46505d;
border-right: 1px solid #46505d;
}
#creatorlinkqna .btn-spcenter:hover,
#creatorlinkqna .btn-spcenter:focus,
#creatorlinkqna .btn-spcenter:active {
color: #4789e7;
}
#creatorlinkqna .btn-spcenter:hover:after,
#creatorlinkqna .btn-spcenter:focus:after,
#creatorlinkqna .btn-spcenter:active:after {
border-top-color: #4789e7;
border-right-color: #4789e7;
}
/*main content_section3::: creatorlinkqna - END*/
/*main content_section4::: responsive - START*/
#responsive { position: relative; overflow: hidden; padding-bottom: 100px;}
#responsive .title.en b { font-weight: 500; }
#responsive.mobile { display: none; }
#responsive .bg-box {
position: absolute;
top: 50%;
left:0; right: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#responsive .sp-slideshow { position: relative; width: 100%; }
#responsive .sp-content { position: relative; width: 100%; height: 100%; overflow: hidden; }
#responsive .sp-left-effect2 {
-webkit-transition: left cubic-bezier(0,.61,0,1) 0.7s;
-moz-transition: left cubic-bezier(0,.61,0,1) 0.7s;
-o-transition: left cubic-bezier(0,.61,0,1) 0.7s;
-ms-transition: left cubic-bezier(0,.61,0,1) 0.7s;
transition: left cubic-bezier(0,.61,0,1) 0.7s;
}
#responsive .sp-left-effect {
-webkit-transition: left cubic-bezier(.9,0,.09,1) 0.5s;
-moz-transition: left cubic-bezier(.9,0,.09,1) 0.5s;
-o-transition: left cubic-bezier(.9,0,.09,1) 0.5s;
-ms-transition: left cubic-bezier(.9,0,.09,1) 0.5s;
transition: left cubic-bezier(.9,0,.09,1) 0.5s;
}
#responsive .sp-slider {
position: relative;
left: 0;
width: 501%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#responsive .sp-content .sp-slider { left: 100%; }
#responsive .device-content .sp-slider { overflow: hidden;}
#responsive .dc-pc .sp-slider { width: 2000%;}
#responsive .dc-m .sp-slider { width: 2000%; height: 177px;}
#responsive .sp-slider > li {
color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
max-width: 4.6%;
padding: 0 10px;
float: left;
text-align: center;
opacity: 0.4;
-webkit-transition: opacity ease-in 0.4s;
-moz-transition: opacity ease-in 0.4s;
-o-transition: opacity ease-in 0.4s;
-ms-transition: opacity ease-in 0.4s;
transition: opacity ease-in 0.4s;
}
#responsive .sp-slider > li img{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block;
margin: 0 auto;
padding: 0;
max-height: 100%;
max-width: 100%;
}
#responsive .dc-pc .sp-slider > li,
#responsive .sp-content .sp-slider > li img { cursor: pointer; max-width: 430px; }
#responsive .sp-content .sp-slider > li:hover { opacity: 1; }
#responsive .dc-pc .sp-slider > li img { max-width: 690px; }
#responsive .dc-pc .sp-slider > li { position: relative; }
#responsive .dc-pc .sp-slider > li > .over-box {
position: absolute;
top:0; left:0; right:0; bottom:0;
width: 100%; height: 100%;
display: inline-block;
text-align: center;
background-color: rgba(0,0,0,0.6);
vertical-align: middle;
}
#responsive .dc-pc .sp-slider > li > .over-box > span {
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-49%,-50%);
-moz-transform: translate(-49%,-50%);
-ms-transform: translate(-49%,-50%);
-o-transform: translate(-49%,-50%);
transform: translate(-49%,-50%);
font-size: 12px;
letter-spacing: 0.22em;
background-color: #fff;
padding: 10px 48px;
color: #000;
}
#responsive .intro-header .btn-box { margin-top: 30px; margin-bottom:10px; }
#responsive .intro-header .btn-box a:hover,
#responsive .intro-header .btn-box a:focus { text-decoration: none; }
#responsive .intro-content { position: relative; overflow: visible; display: inline-block; margin: 40px auto 0; max-width: 100%; }
#responsive .device.pc {
width: 730px;
margin: 0 auto;
position: relative;
-webkit-transform: scale(1.73);
-moz-transform: scale(1.73);
-ms-transform: scale(1.73);
-o-transform: scale(1.73);
transform: scale(1.73);
-webkit-transition: transform cubic-bezier(0,.71,.16,1) 0.4s;
-moz-transition: transform cubic-bezier(0,.71,.16,1) 0.4s;
-ms-transition: transform cubic-bezier(0,.71,.16,1) 0.4s;
-o-transition: transform cubic-bezier(0,.71,.16,1) 0.4s;
transition: transform cubic-bezier(0,.71,.16,1) 0.4s;
}
#responsive .device.mobile {
width: 158px;
margin: auto 0 0 auto;
position: absolute;
bottom:0; right: 0;
margin-right: -200px;
margin-bottom: -2px;
opacity: 0;
-webkit-transition: all cubic-bezier(0,.61,0,1) 0.7s;
-moz-transition: all cubic-bezier(0,.61,0,1) 0.7s;
-o-transition: all cubic-bezier(0,.61,0,1) 0.7s;
-ms-transition: all cubic-bezier(0,.61,0,1) 0.7s;
transition: all cubic-bezier(0,.61,0,1) 0.7s;
}
#responsive .start-effect {
-webkit-transition-delay: 0.4s!important;
-moz-transition-delay: 0.4s!important;
-o-transition-delay: 0.4s!important;
transition-delay: 0.4s!important;
}
#responsive .device .device-content {
position: absolute;
top:20px; left:20px; right: 0; bottom: 0;
overflow: hidden;
}
#responsive .device .device-content.dc-m { top:0; left:0; padding: 31px 29px 41px 31px; }
#responsive .device .device-content.dc-pc .inner-box { overflow: hidden; margin-right: 21px; }
#responsive .device .device-content.dc-m .inner-box { overflow: hidden; }
#responsive .device .device-content .sp-slider > li { max-width: 100%; padding: 0; opacity: 1; }
#responsive .slider-control {
position: absolute;
top: 50%;
display: inline-block;
width: 50px; height: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transform: -webkit-translateY(-50%);
-moz-transform: -moz-translateY(-50%);
-ms-transform: -ms-translateY(-50%);
-o-transform: -o-translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0,0,0,0.4);
text-align: center;
cursor: pointer;
}
#responsive .slider-control.left { left: 40px; }
#responsive .slider-control.right { right: 40px; }
#responsive .slider-control .fa { color: #fff; font-family: FontAwesome! important; font-size: 30px; line-height: 50px; }
#responsive .slider-control.left .fa { margin-right: 4px; }
#responsive .slider-control.right .fa { margin-left: 4px; }
#responsive .intro-header .banner { overflow: hidden; width: 150px; margin: 0 auto 30px; }
#responsive .intro-header .banner img { float: left; width: 100%; }
#responsive .intro-header h1 { margin: 0 0 30px; }
#responsive .intro-header .mobile { display: none; }
#m_template .intro-header h1 { margin: 10px 0 30px; }
#m_template .intro-header h1 b { display: block; font-weight: 500; margin: 0 0 10px ;}
/*main content_section4::: responsive - END*/
/*main content_section3::: responsivewebsite - START*/
.aboutImg-box {
margin-top:30px;
margin-bottom: 30px;
display: block;
overflow:hidden;
}
.carousel-device {
height: 100%;
}
.device-box {
position: relative;
}
.device-box > img {
position:absolute;
top:0; left: 0;
margin:0 auto;
}
.device-box > img.pc { z-index: 0; }
.device-box > img.tablet { z-index: 1; }
.device-box > img.mobile { z-index: 2; }
.item .tablet {
position: absolute;
top:0; left:0;
z-index: 1;
}
.item .mobile {
position: absolute;
top:0; left:0;
z-index: 2;
}
.item img { margin: 0; }
#carousel-device.carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition: opacity .9s ease-in-out;
-moz-transition: opacity .9s ease-in-out;
-ms-transition: opacity .9s ease-in-out;
-o-transition: opacity .9s ease-in-out;
transition: opacity .9s ease-in-out;
}
#carousel-device.carousel-fade .carousel-inner .active {
opacity: 1;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-ms-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
#carousel-device.carousel-fade .carousel-inner .active img.pad {
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
}
#carousel-device.carousel-fade .carousel-inner .active img.mobile {
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
#carousel-device.carousel-fade .carousel-inner .active.left,
#carousel-device.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 2;
}
#carousel-device.carousel-fade .carousel-inner .next.left,
#carousel-device.carousel-fade .carousel-inner .prev.right {
opacity: 1;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
/*main content_section3::: responsivewebsite - END*/
/*main content_section6::: recognition - START*/
#recognition { width: 100%; background: #fff; }
#recognition.intro { min-height: auto; }
#recognition .intro-content { overflow: hidden; max-width: 946px; width: 100%; margin: 0 auto; }
#recognition .img { overflow: hidden; float: left; width: 16.66%; }
#recognition .img img { float: left; width: 100%; }
#nav.intro .mainmenu-mjoin {color:#fff;}
#nav.intro .mainmenu-mjoin,
#nav.intro .header .navbar-header a.navbar-toggle,
#nav.intro .main-menu .mjoinbtn,
#about .intro-content .mvideoplay_btn,
#about .intro-content .mvideo_cover {display: none;}
/*main content_section6::: recognition - END*/
section#event_main { display:none; background-color: #fff; font-family: 'Open Sans', 'Noto Sans KR', 'Nanum Gothic';padding: 100px 0;}
section#function .intro-header .title,
section#event_main .intro-header .title,
section#creatorlinkqna .intro-header .title {margin-bottom: 80px;}
section .intro-header .title {text-align: center;margin-bottom: 60px;}
section#about .intro-header .title {margin-bottom: 26px;}
body section *,
section#event_main .intro-header .title,
section#review_event .intro-header .title,
section#event_main .intro-header .title span {font-family:'Noto Sans KR',sans-serif;}
section .intro-header .mainRollnum { display:flex;justify-content:center;font-size: 16px;font-weight: 300;letter-spacing: -0.58px;line-height: normal;align-items: flex-end;margin-bottom: 20px; }
section .intro-header .mainRollnum .user-roll-num { margin:0 12px;letter-spacing: -1.15px; font-size: 32px; }
section .intro-header .mainRollnum .text { display:inline-block;margin-bottom: 6px; }
section .intro-header .mainRollnum .user-roll-num div { margin-left: -2px; }
section .intro-header .mainRollnum .user-roll-num div:first-child { margin-left: 0px; }
section .intro-header .mainRollnum .user-roll-num div:nth-last-child(4n) { margin-left: -6px;margin-right: -3px; }
/*section#function * { font-family: 'Raleway','Noto Sans KR', 'Nanum Gothic'; font-weight: 300; color:#212327;}
section#function {padding: 50px 0; background-color: #fff;}
section#function {padding:100px 0; font-family: 'Raleway','Noto Sans KR', 'Nanum Gothic'; }*/
/*mainfunction.css*/
#function .main_function { margin: 0 auto; padding-top: 0; padding-bottom: 0;}
#function .main_function .img-wrap img { margin: 0 auto; max-width:45%;}
#function .main_function h6.up {font-size:15px; line-height: 1.4;}
#function .main_function .row.functionbox02 { margin-top:45px;}
#function .container .main_function .btn-box { text-align: center; margin-top: 60px;}
#function .main_function .mainfunction-more {
font-size: 14px;
letter-spacing: 0.02em;
padding:16px 53px;
min-width: 110px;
color: #46505d;
background-color: transparent;
border: 1px solid #46505d;
-moz-border-radius: 0;
border-radius: 0;
text-decoration: none;
display: inline-block;
position: relative;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
text-align: left;
}
#function .main_function .mainfunction-more .fa {
font-family: 'FontAwesome';
margin-left: 7px;
position: absolute;
top: 12px;
}
#function .main_function .mainfunction-more.active, #function .main_function .mainfunction-more:hover,#function .main_function .mainfunction-more:focus {
color:#fff;
background-color:#46505d;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
section#function * { font-family: 'Noto Sans KR', 'Nanum Gothic'; font-weight: 300; color:#212327;}
section#function {padding:100px 0px 120px; font-family: 'Noto Sans KR', 'Nanum Gothic'; }
section#function .title.en b { font-weight: 500; }
#function .main_function { margin: 0 auto; padding-top: 0; padding-bottom: 0;}
#function .main_function .img-wrap img { margin: 0 auto; max-width:45%;}
#function .main_function h6.up {font-size:15px; line-height: 1.4;}
#function .main_function .row.functionbox02 { margin-top:45px;}
#function .container .main_function .btn-box { text-align: center; margin-top: 60px;}
section .intro-header .title .pcbold,
section#function .pcbold,
section#review_event .pcbold,
section#bestsite #sitenumberup {font-weight: 500;}
section .intro-header .title .headbold,
section#function .headbold,
section#review_event .headbold,
section#bestsite .headbold {font-weight: 500 !important;}
@media only screen and (min-width: 1200px){
.container { }
#creatorlinkqna .container { width: 990px!important;}
#template .intro-content { padding:0 50px; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading { padding: 30px 15px 30px 0; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title > a { padding-right: 40px; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title > a:after { top: 10px; right: 10px; }
#creatorlinkqna .btn-spcenter { font-size: 18px; }
}
@media only screen and (min-width: 1310px){
header .header, footer .footer > div > div { /*width: 946px! important;*/ margin: 0 auto; }
/*footer.default .footer { margin: 0 auto 20px; }*/
#bestsite .loadmore-control.left { left: -50px; }
#bestsite .loadmore-control.right { right: -50px; }
}
@media only screen and (min-width: 1600px){
#bestsite .loadmore-control.left { left: -150px; }
#bestsite .loadmore-control.right { right: -150px; }
}
@media only screen and (max-width: 1440px){
section#service { padding: 80px 0; }
}
@media only screen and (max-width: 1199px){
.intro-header, .intro-content { padding: 0 80px; }
.intro-header .title { font-size:46px;word-break: keep-all; }
.intro-header .title.en { font-size: 48px; }
#responsive .intro-content { max-width: 730px; padding: 0; }
#responsive .slider-control { width: 30px; height: 30px; }
#responsive .slider-control.left { left: 20px; }
#responsive .slider-control.right { right: 20px; }
#responsive .slider-control .fa { font-size: 20px; line-height: 30px; }
#about .video .video-wrap .embed-responsive-16by9,
#about .video iframe{ width: 720px; height: 482px; }
#about .video .video-over { background-size: 740px 494px; }
#bestsite .bestsite-list .grid.tablet .img-wrap { padding: 44px 48px 0 53px; }
#bestsite .bestsite-list .grid.laptop .img-wrap { padding: 32px 45px 0 45px; }
#bestsite .bestsite-list .grid.desktop .img-wrap { padding: 11px 34px 0 34px; }
}
@media only screen and (min-width: 1024px) {
.navbar-link a { padding: 0 25px; }
}
@media only screen and (min-width: 992px){
section#event_main .hidden-md,
section#bestsite .hidden-md {display: none !important;}
.responsivewebsite #carousel-device { display: inline-block;}
#service .utext-box { bottom: 30px; right: 40px; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading { padding: 20px 15px 20px 0; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title > a { padding-right: 30px; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title > a:after { top: 5px; right: 5px; width: 21px; height: 21px; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading + .panel-collapse .panel-body { font-size: 15px; padding: 0 15px 30px 0; }
}
@media only screen and (max-width: 991px){
#nav.default-nav .header { padding:0 27px; }
section#function .intro-header .title,
section#event_main .intro-header .title,
section#creatorlinkqna .intro-header .title {
margin-bottom: 60px;
}
section#function,
section#event_main,
section.intro,
section#creatorlinkqna {padding: 80px 0 50px 0;}
section .intro-header .title .headbold,
section#function .headbold,
section#review_event .headbold {font-weight: 500 !important;}
section .intro-header .title .pcbold,
section#function .pcbold,
section#review_event .pcbold {font-weight: unset;display: inline-block !important;}
section.intro { min-height: inherit; }
section#service { display: none; padding-bottom: 0; }
section#responsive { padding-bottom: 70px; }
.navigation { display: none; right: 30px; }
.intro-header, .intro-content { padding: 0 50px; }
.intro-header .title { font-size:35px; }
.intro-header .title.en { font-size: 36px; }
.intro-header .subtitle { font-size: 14px; line-height: 1.6}
.intro-header .subtitle.en { font-size: 14px; }
.intro-content .btn-box a, #service .intro-header .btn-box a, #service .intro-header .btn-box a { font-size: 15px; }
.aboutImg-box { margin-top:20px; margin-bottom: 20px; }
#videoModal .modal-header { padding-top: 30px; padding-right: 40px;}
#videoModal .aboutVideo-box { width: 622px; margin-top: 20px; }
#videoModal .aboutVideo-box .embed-responsive-16by9,
#videoModal .aboutVideo-box .embed-responsive-item { width:622px; height:415px; }
#responsive.pc { display: none; }
#responsive.mobile { display: block; }
#responsive .sp-content .sp-slider > li { max-width: 280px; }
#responsive .sp-content .sp-slider > li img { max-width: 260px; }
#responsive .device.pc { width: 529px; }
#responsive .device.mobile { width: 130px; margin-bottom:-10px; margin-right:30px; }
#responsive .device .device-content { top: 14px; left: 14px; }
#responsive .device .device-content.dc-pc .inner-box { margin-right: 16px; }
#responsive .device .device-content.dc-m { padding: 26px 23px 37px 26px; }
#responsive .device .device-content.dc-pc .sp-slider > li,
#responsive .dc-pc .sp-slider > li img { max-width: 502px; max-height: initial;}
#responsive .device .device-content.dc-m .sp-slider > li,
#responsive .dc-m .sp-slider > li img { max-width: 81px; max-height: initial;}
#responsive .dc-pc .sp-slider > li > .over-box > span { font-size: 11px; letter-spacing: 0.1em; padding: 8px 30px; }
#responsive .intro-content { max-width: 530px; padding: 0; }
#responsive .intro-header .pc { display: none; }
#responsive .intro-header .mobile { display: block; }
#about { padding-top: 80px; }
/*#about .intro-header h1 b { display: block; font-weight: 500; }*/
#about .intro-header h1 span { display: block; }
#about .intro-header .btn { display: none; }
#about .intro-header .subtitle { display: none; }
#about .video { margin: 40px 0 0; }
#about .video .video-wrap .embed-responsive-16by9,
#about .video iframe{ width: 520px; height: 346px; }
#about .video .video-over { background-size: 520px 347px; }
#review_event { padding:80px 0 50px !important; }
#m_template .m.sp-slider > li { width: 640px; }
#bestsite .intro-header { margin: 0 0 30px; padding: 0 15px; }
#bestsite .bestsite-list .grid { min-height: 180px; }
#bestsite .bestsite-list .grid.tablet .img-wrap { padding: 35px 39px 0 43px; }
#bestsite .bestsite-list .grid.laptop .img-wrap { padding: 25px 35px 0 35px; }
#bestsite .bestsite-list .grid.desktop .img-wrap { padding: 9px 28px 0 28px; }
#bestsite .btn-box:nth-of-type(1) { display: none; }
#recognition.intro { padding: 60px 0 40px !important;}
#recognition .img { width: 33.33%; padding: 0 30px;}
#recognition .img:nth-child(n+4) { padding-top: 10px; }
#function .container .main_function .btn-box {
margin-bottom: 0;
margin-top: 40px;
}
}
@media only screen and (max-width: 768px){
section#m_template {padding: 80px 0 50px;}
section#function {padding:80px 0 50px; }
#about .intro-content { overflow: hidden; }
#about .intro-content .mvideoplay_btn,
#about .intro-content .mvideo_cover {display: block;}
.intro.about .intro-header .title {display: none;}
#nav.intro .mainmenu-mjoin {
display: inline-block;
text-align: center;
width: auto;
float: right;
background-color: #ee445f;
color: #fff;
margin-right: 10px;
border-radius: 3px;
}
#nav.intro .mainmenu-mjoin .mjoinbtn {
display: table-cell;
width: 115px;
height: 38px;
vertical-align: middle;
}
#nav { position: relative; background: none; padding: 0; }
#nav.intro .navbar-brand .logo-img { display: inline-block; margin: 0 auto; }
/* #nav.intro .navbar-toggle { display: none; } */
#nav.intro .main-menu { display: block; width: 100%; padding: 0; margin: -1px 0 0; }
#nav.intro .main-menu > ul { width: 100%; margin: 0 !important; }
#nav.intro .main-menu > ul > li { float: left; width: 33.33%; border-top: 1px solid #e6e6e6 !important; border-bottom: 1px solid #e6e6e6; background: #f2f2f2; padding: 0; margin: 0 !important; }
#nav.intro .main-menu > ul > li > a { min-width: auto !important; padding: 0 !important; }
#nav.intro .main-menu > ul > li > a > .caret { margin-left: 0; }
#nav.intro .lang-box .dropdown-menu { position: absolute; min-width: 100% !important; border: 1px solid #e6e6e6 !important; border-top: none; background: #fff !important; }
#nav.intro {background-color: #3e4653; position: relative; /* top: 50px; */ }
#nav.intro.nomember_main {background-color: #fff;}
#nav.intro .header .navbar-header {
position: relative;
top: 0;
left: 0;
z-index: 99;
padding: 10px 0!important;
width: 100%;
text-align: center;
height:57px;
box-sizing: border-box;
}
#nav.intro .header .header-container {width:100%;}
#nav.intro .header .navbar-header a.navbar-toggle { z-index: 100; padding:9px 16px 2px 17px; margin:0; float: left; left: 0; display: block;}
#nav.intro .header .navbar-header a.navbar-toggle .cl_icon_menu {color:#222428; font-size:18px;}
#nav.intro .header .headerbox { width:80%; margin-left:20%; }
#nav.intro .header .headerbox .header_navbar .btn { width:60px;}
#nav.intro .header .headerbox .header_navbar .btn img { margin-right: 0 }
#nav.intro .header .headerbox .header_navbar .btn span { display:none;}
#nav.intro .header .navbar-header a.navbar-brand {
float: left;
padding: 0;
width: auto;
display: inline-block;
line-height: 36px;
}
.modal-open { overflow-y: visible; }
.main-login.modal { overflow-y: auto; }
.navbar-brand { padding: 15px 5px; }
#nav .header { padding:0; }
#nav .navbar-toggle { padding: 10px 5px; }
#nav .navbar-collapse { max-height: none; }
#nav .navbar-collapse.in { padding:0; margin-left: 0; }
#nav .navbar-collapse.in .nav { background:rgba(251,251,251,0.9); position: relative; top:0; left:0; width: 100%; }
#nav .main-menu .navbar-nav > li > a { line-height: 42px; }
.navigation { right: 15px; }
.intro-header, .intro-content { padding: 0 25px; }
#function .intro-header .title {margin-bottom: 60px;}
#event_main .intro-header .title {text-align: center;}
.intro-header .title { font-size: 35px; margin-bottom: 20px; line-height: 1.3; letter-spacing: -0.01em;}
.intro-header .title.en { font-size: 27px; }
.intro-header .subtitle { font-size: 14px; margin-bottom: 20px; line-height: 1.6; letter-spacing: -0.05em; }
.intro-header .subtitle.en { font-size: 12px; }
.intro-content .btn-box { padding: 0; margin: 30px auto 0 auto; }
.intro-content .btn-box a.en, #responsive .intro-header .btn-box a.en, #service .intro-header .btn-box a.en, #bestsite .intro-header .btn-box a.en,
.intro-content .btn-box a, #responsive .intro-header .btn-box a, #service .intro-header .btn-box a, #bestsite .intro-header .btn-box a { font-size: 13px; padding: 8px 25px;}
#videoModal .aboutVideo-box { width: 400px; }
#videoModal .aboutVideo-box .embed-responsive-16by9,
#videoModal .aboutVideo-box .embed-responsive-item { width:400px; height:267px; }
#responsive .sp-content .sp-slider > li { max-width: 180px; }
#responsive .sp-content .sp-slider > li img { max-width: 160px; }
#responsive .device.pc { width: 283px; }
#responsive .device.mobile { width: 70px; margin-bottom:-6px; }
#responsive .device .device-content { top: 7px; left: 7px; }
#responsive .device .device-content.dc-pc .inner-box { margin-right: 8px; }
#responsive .device .device-content.dc-m { padding: 14px 13px 19px 14px; }
#responsive .dc-m .sp-slider { height: 100%; }
#responsive .device .device-content.dc-pc .sp-slider > li,
#responsive .dc-pc .sp-slider > li img { max-width: 270px; }
#responsive .device .device-content.dc-m .sp-slider > li,
#responsive .dc-m .sp-slider > li img { max-width: 43px; }
#responsive .intro-header .btn-box { margin-bottom: 10px; }
#about { padding: 0; /*height:75%;*/ height: 56%;background-color: #a9afbd;}
#about .intro-content {
position: relative;
}
#about .intro-content .mvideo_cover {
width: 100%;
position: absolute;
z-index:70;
height: 100%;
background-position: center;
background-repeat: no-repeat;
-moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-image: url(//storage.googleapis.com/i.addblock.net/m_videomain.jpg);
top: 15px;
}
#about .intro-content .mvideo_cover.mCover_none {
z-index: 80;
}
#about .intro-content .mvideo_cover h3 {
margin: 0;
padding: 43px 24px;
font-size: 35px;
color: #fff;
font-weight: 300;
line-height: 1.2;
letter-spacing: -1px;
}
#about .intro-content {position: absolute; top: 0;}
#about .intro-content .mvideo_cover h3 span {font-weight: 500;}
#about .container .row {position:relative;}
#about .container, #about .container .row,#about .intro-header,#about .intro-content {height: 100%;width: 100%; margin: 0;}
#about .intro-content .mvideo_cover img {width: 100%;}
#about .intro-content .mvideoplay_btn {z-index: 81;position: absolute;width: 51px;top: 50%; left:50%; transform:translate(-50%,-50%);}
#about .intro-header, .intro-content { padding: 0 0; }
#about .video {
margin: 30px 0 0;
width: 100%;
position: relative;
height: 100%;
margin-top: 0;
z-index: 67;
}
#about .video.videoActive{
z-index: 82;
}
#about .video.videoActive .video-wrap .embed-responsive-16by9,
#about .video.videoActive iframe {
visibility: visible;
display: block;
z-index: 101;
opacity: 1;
width: 100%;
height: 100%;
position: fixed !important;
}
#about .video .video-wrap .embed-responsive-16by9,
#about .video iframe {
width: 100%;
height: 100%;
position: fixed;
top: -999999px;
right: -999999px;
z-index: -1;
border: none;
}
#about .video .video-over { background-size: 380px 254px; }
#m_template .m.sp-slider > li { width: 360px; }
#service .utext-box { right: 0; }
#service .video-box { display: none; }
#service .intro-header .btn-box { margin-top: 20px; margin-bottom: 0; }
#service .intro-header .btn-box a > .fa { font-size: 15px; }
#bestsite .bestsite-list .grid { min-height: 216px; padding: 0 5px;}
#bestsite .bestsite-list .grid > a > p > span,
#bestsite .bestsite-list .grid > a > .img-device { display: none; }
#bestsite .bestsite-list .grid .img-wrap { position: relative; }
#bestsite .bestsite-list .grid.tablet .img-wrap { padding: 0; }
#bestsite .bestsite-list .grid.laptop .img-wrap { padding: 0; }
#bestsite .bestsite-list .grid.desktop .img-wrap { padding: 0; }
#bestsite .btn-box .bestsite-loadmore { font-size: 13px; padding: 8px 15px 8px 18px; min-width: 80px; }
#responsive .slider-control { padding: 15px 35px 5px 10px; width: 60px; height: 60px; }
#responsive .slider-control { font-size: 28px;}
#responsive .slider-control.left { left: -30px; padding: 15px 10px 5px 35px; }
#responsive .slider-control.right { right: -30px; }
#recognition .intro-content { padding: 0 30px 0; }
.ctsHelp { position: absolute; right: 85px; top: 0; }
#function .container .main_function .btn-box { margin: 0 0 55px 0;}
body section#event_main {padding-top: 70px;}
section#event_main .container .row .intro-header .title,
#bestsite .intro-header .title {margin-bottom: 40px;}
#bestsite .bestsite-type {margin-top: 40px;}
#function .main_function h6.up { font-size:13px; line-height: 1.4; margin-top: 5px; margin-bottom: 0px; }
}
@media only screen and (min-width: 642px) and (max-width: 680px){
#bestsite .bestsite-list .grid { min-height: 235px; }
}
@media only screen and (min-width: 481px) and (max-width: 641px){
#bestsite .bestsite-list .grid { min-height: 175px; }
.main_function .intro-header .title { font-size:33px; }
}
@media only screen and (max-width: 600px) {
#bestsite .bestsite-type .nav-tabs > li { padding: 0 20px; min-width: 130px; }
#bestsite .bestsite-type .nav-tabs > li > a { display: inline-block; padding: 0; margin: 0; }
#bestsite .bestsite-type .nav-tabs > li + li { margin-left: 0; }
#bestsite .bestsite-type .nav-tabs > li:nth-child(even) { margin-left: 10px; }
#bestsite .bestsite-type .nav-tabs > li:nth-child(3) { clear: both; }
#bestsite .bestsite-type .nav-tabs > li:nth-child(n + 3) { margin-top: 18px; }
}
@media only screen and (max-width: 480px){
.navigation, .award { display: none; }
.intro-header .title { font-size: 27px; letter-spacing: -0.05em; }
.intro-header .subtitle { font-size: 14px; }
.intro-header .subtitle br { display:none;}
.btn-box { padding: 5px 0; }
.btn-box a, #responsive .btn-box a { font-size: 12px; padding:5px 30px;}
#videoModal .aboutVideo-box { width: 300px; }
#videoModal .aboutVideo-box .embed-responsive-16by9,
#videoModal .aboutVideo-box .embed-responsive-item { width: 300px; height: 170px; }
#responsive .sp-content .sp-slider > li { max-width: 130px; }
#responsive .sp-content .sp-slider > li img { max-width: 120px; }
#responsive .device.pc { width: 221px; }
#responsive .device.mobile {
width: 49px;
-webkit-transform: translateX(-14px);
-moz-transform: translateX(-14px);
-ms-transform: translateX(-14px);
-o-transform: translateX(-14px);
transform: translateX(-14px);
margin-bottom: 0;
}
#responsive .device .device-content { top: 6px; left: 6px; }
#responsive .device .device-content.dc-pc .inner-box { margin-right: 6px; }
#responsive .device .device-content.dc-m { padding: 10px 9px 13px 10px; }
#responsive .device .device-content.dc-pc .sp-slider > li, #responsive .dc-pc .sp-slider > li img { max-width: 215px; }
#responsive .device .device-content.dc-m .sp-slider > li, #responsive .dc-m .sp-slider > li img { max-width: 30px; }
#responsive .dc-pc .sp-slider > li > .over-box > span { font-size: 10px; padding: 6px 20px; }
#responsive .intro-content { max-width: 530px; padding: 0; margin: 30px auto 0; }
#service .intro-header .btn-box a + a { margin-left: 0; margin-top: 15px; }
#service .utext-box { position: relative; left: 0; text-align: center; font-size: 10px; }
#service .utext-box .text { display: inline; line-height: 1; }
#service .utext-box .user-num { font-size: 12px; }
#review_event { padding:50px 0 40px !important; }
#m_template .m.sp-slider > li { width: 280px; margin: 0 6px;}
#m_template .m.slider-control { width: 60px; }
#m_template .m.sp-slider > li > .m-over-box > span { font-size: 11px; padding: 3px 20px; letter-spacing: -0.01em; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading { padding: 15px 0; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title > a { font-size: 17px; padding-right: 20px; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading > .panel-title > a:after { top: 4px; right: 4px; width: 12px; height: 12px; }
#creatorlinkqna #qnaaccordion .panel-default > .panel-heading + .panel-collapse .panel-body { line-height: 1.4; font-size: 13px; padding: 0 0 15px 0; }
#creatorlinkqna .btn-spcenter { font-size: 15px; }
#creatorlinkqna .btn-spcenter:after { width: 6px; height: 6px; top: 8px; right: -10px; }
#about .video .video-wrap .embed-responsive-16by9 { width: 260px; height: 174px; }
#about .video .video-over { background-size: 260px 174px; }
#bestsite .intro-content { padding: 0 15px; }
#bestsite .title { margin-bottom: 20px; }
#bestsite .btn-box { padding-bottom: 0; margin-bottom: 0; }
#bestsite .bestsite-list .grid { min-height: 120px;}
#recognition .intro-content { padding: 0 20px 0; }
#recognition .img { padding: 0 10px;}
.ctsHelp a { min-width: 40px; margin-top: 15px; padding: 2px 7px; }
.ctsHelp a span { font-size:12px; }
#about .intro-content .mvideo_cover h3 {font-size: 28px;}
section#event_main .container .row .intro-header .title {margin-bottom: 40px;}
section#function .container .row .intro-header .title { margin-bottom: 50px;}
section#creatorlinkqna .container .row .intro-header .title {margin-bottom: 50px;}
section#function, section#event_main, section.intro, section#creatorlinkqna {padding:50px 0 40px 0;}
body section#event_main {padding-top: 50px;}
section#m_template {padding:50px 0 40px;}
#m_template .img-wrap {margin:0 auto 20px;}
#m_template .intro-content .btn-box {padding-top:10px;}
#recognition.intro { padding:40px 0 20px !important; }
}
@media only screen and (max-width: 340px){
#nav.intro .mainmenu-mjoin { width: 88px; }
.intro-header .title { font-size:24px; }
#bestsite .bestsite-list .grid { min-height: 80px; }
#about .video .video-wrap .embed-responsive-16by9, #about .video iframe { max-width: 100%; height: 117px; }
#m_template .m.sp-slider > li { width: 200px; }
#m_template .m.slider-control { width: 36px; }
#m_template .m.sp-slider > li > .m-over-box > a { font-size: 10px; padding: 3px 10px; letter-spacing: -0.03em; }
.ctsHelp { right: 80px; }
.ctsHelp a { min-width: 20px; background-color: transparent; }
.ctsHelp a span { display: none; }
.ctsHelp a .fa { margin-right: 0; }
}
/*main content - END*/
/**************************************************************************************/
/******로그인 후***********************************************************************/
/**************************************************************************************/
/*main header css -START*/
#nav.default-nav { position:relative; padding:0; background-color:#3c4451; max-height:64px; border-bottom:0px;}
#nav.default-nav.transparent { width: 100%; position: absolute; z-index: 3; background:transparent; border-bottom:0;}
#nav.default-nav .header { /* padding:0 16%; */height:55px; max-width: 946px; width: 100%; margin: auto;}
#nav.default-nav .header .navbar-header { /*position: absolute; top:0; left:0; padding:0 16%; width:100%;*/ height: 100%;}
#nav.default-nav .header .navbar-header a { color:#fff; font-size:14px; font-weight:600;}
#nav.default-nav .header .navbar-header a.navbar-brand { padding:0; line-height: 55px; }
#nav.default-nav .header .navbar-header a.navbar-brand span { display:none; }
#nav.default-nav .header .navbar-header a.navbar-toggle { margin:10px 15px; padding:10px; border:0; }
#nav.default-nav .header .navbar-header a.navbar-toggle .icon-bar { background-color:#fff; border:1px solid #fff; width:20px; }
#nav.default-nav .header .headerbox { position:relative; top:0; left:0; width:60%; margin:0 auto; height:55px; max-height:55px; z-index:1; }
#nav.default-nav .header .headerbox .header_navbar { height:55px; max-height:55px; }
#nav.default-nav .header .headerbox .header_navbar .btn {
font-family:'Raleway','Nanum Gothic'; height:100%; color:#7a838f; font-size:12px; font-weight:600; letter-spacing: 0.01em; width:140px; background-color:#3c4451;
box-shadow:none; -webkit-box-shadow:none; -moz-border-radius:0; border-radius:0;z-index:0;
}
#nav.default-nav .header .headerbox .header_navbar .btn img { margin-right:7px; opacity:0.25; z-index:0;}
#nav.default-nav .header .headerbox .header_navbar .btn.active { color:#f0efef; background-color:#ee445f;}
#nav.default-nav .header .headerbox .header_navbar .btn:hover,
#nav.default-nav .header .headerbox .header_navbar .btn:focus { color:#f0efef; background-color:#46505d;}
#nav.default-nav .header .headerbox .header_navbar .btn.active img,
#nav.default-nav .header .headerbox .header_navbar .btn:hover img,
#nav.default-nav .header .headerbox .header_navbar .btn:focus img { opacity:1; }
#nav.default-nav .header .ctsHelp { float: left !important; }
#nav.default-nav .header .header_user ul.nav { margin:0; vertical-align: middle; position: relative;}
#nav.default-nav .header .header_user ul.nav.fixed {background-color: #3c4451;}
#nav.default-nav .header .header_user ul.nav li, #nav.default-nav .header .header_user ul.nav div{ width:100%; height: 100%; position: relative;}
#nav.default-nav .header .header_user ul.nav li svg.menu-icon { position: absolute;right: 15px;top: 9px;fill: #d9dcdf; }
/*#nav.default-nav .header .header_user ul.nav li.bottom { border-bottom: 1px solid #4b5565; padding-bottom: 5px;}
#nav.default-nav .header .header_user ul.nav li.bottom + li { border-top: 1px solid #5f6b7c; padding-top: 5px; }*/
#nav.default-nav .header .header_user ul.nav li.bottom { border-bottom: 1px solid #424f62; }
#nav.default-nav .header .header_user ul.nav div.btn-group { text-align: right; }
#nav.default-nav .header .header_user a { color:#fff; font-size:12px; line-height:1; padding:0; text-decoration:none; background: none; display: inline-block;font-weight: 300;}
/*#nav.default-nav .header .header_user .lang-box { line-height: 55px; margin-left: 13px;}
#nav.default-nav .header .header_user .lang-box > a { border-left: 1px solid #637083; padding-left: 20px;}*/
#nav.default-nav .header .newCount {
display: none;
z-index: 2;
width: 16px!important;
height: auto!important;
margin-right: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
#nav.default-nav .header .newCount a,
#nav.default-nav .header .newCount a:hover,
#nav.default-nav .header .newCount a:focus{ color:#fff; }
#nav.default-nav .header .newCount i.fa { font-size:13px; margin:0; }
#nav.default-nav .header .newCount span.badge,
span.badge.red { font-size: 9px; padding: 3px 5px; background-color: #ee445f; position: absolute; top: -5px; right: -10px; color: #fff;line-height: 1;text-align: left;min-width: 16px;}
span.badge.red { position: relative; top:0; left:0; right:initial; text-align:center;}
#nav.default-nav .header .header_user .inner-box { padding: 16px 0; max-height: 55px;}
#nav.default-nav .header .header_user .btn-group .dropdown-toggle { text-align: right; }
#nav.default-nav .header .header_user .btn-group .dropdown-toggle .name-text { padding: 5px 0 5px 10px; margin:0; border: none; /*max-width: 65px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;*/ display: inline-block; }
#nav.default-nav .header .header_user .btn-group .dropdown-toggle span.caret { border-top:4px solid #ee445f; border-right:3px solid transparent; border-left:3px solid transparent; margin-bottom: 0;}
#nav.default-nav .header .header_user .btn-group.open .dropdown-toggle { box-shadow:none; -webkit-box-shadow:none; }
#nav.default-nav .header .header_user .btn-group.open .dropdown-toggle .name-text { border-bottom: none; }
#nav.default-nav .header .header_user .btn-group.open .dropdown-toggle span.caret { border-top:0 dotted; border-bottom:4px solid #fff }
/*#nav.default-nav .header .header_user .btn-group.lang-box .dropdown-toggle span.caret { border-top-color:#fff; }*/
#nav.default-nav .header .header_user .dropdown-menu { text-align: left; margin: 0; }
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu {
/* max-width: 100px; min-width: 100px; background-color:#556274; -moz-border-radius:0; border-radius:0; border:none; top: 55px; left:0; -webkit-box-shadow:none;box-shadow:none;*/
font-family: 'Noto sans KR', 'Noto sans', sans-serif;
max-width: 200px;
min-width: 200px;
background-color:#4c5b70;
-moz-border-radius:3px;
border-radius:3px;
border:none;
top: 47px;
left:0;
-webkit-box-shadow:none;
box-shadow:none;
padding: 8px 0px;
}
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu li a,
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu li .cl-logOut { background-color:#4c5b70; color:#fff; width:100%; max-width: 100%; padding: 15px 20px;}
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu li a:hover,
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu li a:focus,
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu li .cl-logOut:hover,
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu li .cl-logOut:focus { color:#fff; background-color:#435062;}
#nav.default-nav .header .header_user .btn-group.lang-box.open .dropdown-menu {
font-family: 'Noto sans KR', 'Noto sans', sans-serif;
display: block;
min-width: 120px;
background-color: #4c5b70;
border-radius: 3px;
color:#fff;
left:-21px;
padding: 8px 0px;
top: 47px;
/*top: 52px;
float: left;
min-width: 100px;
line-height: 20px;
border: 1px solid rgba(0,0,0,.15);
padding: 0;
margin: 2px 0 0;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;*/
}
#nav.default-nav .header .header_user .btn-group.lang-box.open .dropdown-menu li { line-height: normal; }
#nav.default-nav .header .header_user .btn-group.lang-box.open .dropdown-menu li a { line-height: 20px; font-size: 12px; background-color:#4c5b70; color:#fff; width: 100%; padding: 11px 20px; }
#nav.default-nav .header .header_user .btn-group.lang-box.open .dropdown-menu li a:hover { background-color: #435062; }
/*#nav.default-nav .header .header_user .btn-group.lang-box.open .dropdown-menu li { margin:0; padding:0; line-height: 2;}
#nav.default-nav .header .header_user .btn-group.lang-box.open .dropdown-menu li a { padding: 9px 16px; background-color:#ffffff; color:#37374a; width: 100%; }
#nav.default-nav .header .header_user .btn-group.lang-box.open .dropdown-menu li a:hover,
#nav.default-nav .header .header_user .btn-group.lang-box.open .dropdown-menu li a:focus { background-color: #f6f6f6; }*/
#nav .main-menu .navbar-nav > li:nth-of-type(2) > a { color: #fff; background: rgb(238, 68, 95); border-radius: 20px; margin: 12px 0; margin-left: 15px; line-height: 40px; height: 40px;}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background:transparent; }
.header .lang-box { line-height: 53px !important; margin: 0; }
/*side menu*/
#side-bar.sub-nav { display: none; }
.dash-lang { float: right !important; }
@media only screen and (min-width: 481px) and (max-width: 991px){
#nav.default-nav .header .headerbox .header_navbar .btn { width:100px; }
}
@media only screen and (min-width: 769px){
#nav.default-nav .header .navbar_right { /*position:absolute; height: 55px; top:0; right:5%;*/ height:55px; z-index:0; overflow:visible; text-align: right; float: right; }
#nav.default-nav .header .header_user { display: inline-block!important; padding-right:0; }
#nav.default-nav .header .header_user ul.nav div.btn-group { width: auto;}
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu { right:-13px; left: inherit;}
#nav.default-nav .header .header_user > ul.nav > li ,
#nav.default-nav .header .header_user > ul.nav > div { display: inline-block; float:left; width: auto; }
.header .lang-box { /* margin: 0 0 0 20px; */ }
.header .lang-box > ul.dropdown-menu { min-width: unset; width: 100%; margin-top: 1px; padding: 0; }
}
@media only screen and (min-width: 1200px){
#nav.default-nav .header .navbar_right { /*right: 16%;*/ }
}
@media only screen and (min-width: 1440px){
/*side menu*/
#side-bar.sub-nav { display: inline-block; width: 195px; position: absolute; top: 125px; right: inherit; left: 15px; }
#side-bar.sub-nav .user-data .user-name { margin-top:0; margin-bottom: 5px;}
#side-bar.sub-nav .user-data .user-id { font-size: 13px; color: #797f86;}
#side-bar.sub-nav ul { min-width: 195px; border: 1px solid #e1e1e1; margin-top: 25px; }
#side-bar.sub-nav ul li { width: 100%; }
#side-bar.sub-nav ul li.active { border-left: 3px solid #4689e4; }
#side-bar.sub-nav ul li + li { border-top: 1px solid #e1e1e1; }
#side-bar.sub-nav ul li a { font-size: 15px; width: 100%; background-color: #fff; display: block; padding: 14px 25px;}
#side-bar.sub-nav ul li.active a { background-color: #f4f4f6; padding-left: 22px; }
#side-bar.sub-nav ul li a,
#side-bar.sub-nav ul li a:hover,
#side-bar.sub-nav ul li a:focus { color: #42464c; text-decoration: none; }
#side-bar.sub-nav ul li a:before { font-family: 'FontAwesome'; margin-right: 7px; }
#side-bar.sub-nav ul li:nth-child(1) a:before { content: '\f013'; }
#side-bar.sub-nav ul li:nth-child(2) a:before { content: '\f0e0'; }
#side-bar.sub-nav ul li:nth-child(3) a:before { content: '\f09d'; }
#side-bar.sub-nav ul li:nth-child(4) a:before { content: '\f0c0'; }
#side-bar.sub-nav ul li:nth-child(5) a:before { content: '\f086'; }
}
@media only screen and (min-width: 1620px){
#side-bar.sub-nav { right: 80%; left: inherit; }
}
@media only screen and (max-width: 1199px){
#nav.default-nav .header .navbar-header { /*padding: 0 5%;*/ }
}
@media only screen and (max-width: 768px){
.navbar-nav { margin:0; }
.navbar-nav .dropdown-menu { width: 100%; }
.navbar-nav .dropdown-menu { position:static; float:none; width:auto; margin-top:0; background-color:#556274; -moz-border-radius:0; border-radius:0;}
.header_user {display: none;}
#nav.default-nav .header .navbar_right {
position: absolute;
top: 0;
left:auto;
right: 0;
z-index:99;
height: 55px;
/* width: 88%;*/
}
.header_user {display: none;}
#nav.default-nav._admin { background-color: #3c4451;}
#nav.default-nav {background-color: #3e4653; position: relative; /* top: 50px; */ }
#nav.default-nav .header .navbar-header { position: relative; top:0; left:0; z-index:99; padding:0 2%; width:100%; text-align: center;}
#nav.default-nav .header .header-container {width:100%;}
#nav.default-nav .header .navbar-header a.navbar-toggle { z-index: 100; padding: 10px 3px; margin:10px 0 0 10px; float: left; left: 0;}
#nav.default-nav .header .navbar-header a.navbar-toggle .cl_icon_menu {color:#fff; font-size:18px;}
#nav.default-nav .header .headerbox { width:80%; margin-left:20%; }
#nav.default-nav .header .headerbox .header_navbar .btn { width:60px;}
#nav.default-nav .header .headerbox .header_navbar .btn img { margin-right: 0 }
#nav.default-nav .header .headerbox .header_navbar .btn span { display:none;}
#nav.default-nav .header .navbar-header a.navbar-brand {
float: none;
padding: 0;
margin-right:36px;
}
#nav.default-nav .header .navbar-header a.navbar-brand img {
max-height:26px;
}
.ctsHelp a { min-width: 40px; margin-top: 15px; padding: 2px 7px; }
.ctsHelp a span { font-size:12px; }
.site-img .img-wrapper .site-view-btn { display:none !important; }
#nav.default-nav .header .header_user a {
position:relative;
top:0;
left:0;
right:0;
width:100%;
padding:0;
margin-left:0;
border-top: none;
padding:0 18px;
text-align: center;
background-color:#556274;
color:#fff;
line-height:34px;
width:100%;
}
#nav.default-nav .header .newCount {right:7px; left: auto;}
#nav.default-nav .header .newCount .cl_icon_alarm { font-size: 18px; color: #fff; float: right; margin-right: 5px;}
#eventNotice {top:0;}
.navbar-nav { margin:0; }
.navbar-nav .dropdown-menu { width: 100%; }
.navbar-nav .dropdown-menu { position:static; float:none; width:auto; margin-top:0; background-color:#556274; -moz-border-radius:0; border-radius:0;}
#nav.default-nav .header { width: 100%; padding:0;}
#nav.default-nav .header .header-container {width:100%;}
#nav.default-nav .header .headerbox { position:absolute; width:70%; margin-left:30%; }
#nav.default-nav .header .newCount i.fa { font-size: 14px; }
#nav.default-nav .header .header_user ul.nav { background:rgba(251,251,251,0.9); position: relative; top:0; left:0; width: 100%; }
#nav.default-nav .header .header_user .inner-box { padding: 0; text-align: center;}
#nav.default-nav .header .header_user a { padding:0 18px; text-align: center; background-color:#556274; color:#fff; line-height:34px; width:100%;}
/* #nav.default-nav .header .header_user .newCount { display: none; } */
#nav.default-nav .header .header_user .btn-group .dropdown-toggle,
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu { display: block; text-align: center; max-width:100%;}
#nav.default-nav .header .header_user .btn-group .dropdown-toggle .name-text { padding:0; }
#nav.default-nav .header .header_user .btn-group.open .dropdown-menu li a { padding: 0 18px; }
#nav.default-nav .header .header_user .btn-group .dropdown-toggle span.caret { display: none; }
#nav.default-nav .header .header_user .nav .lang-box .dropdown-toggle { border-top: 1px solid #5f6b7c; padding: 5px 0; }
#nav.default-nav .header .header_user .nav .lang-box .dropdown-toggle .caret { display: inline-block; }
#nav.default-nav .header .header_user .nav .lang-box.open .dropdown-menu { display: block; width: 100%; padding: 0; margin: 0; }
#nav.default-nav .header .header_user .btn-group.dash-lang.open .dropdown-menu li a { font-size: 12px; }
.navbar-nav .dash-lang { border-top: 1px solid #4b5565; }
.ctsHelp { display:none; /* position: absolute; right: 85px; top: 0; */}
}
@media only screen and (min-width:768px){
.m-headerClose {display: none;}
}
@media only screen and (min-width: 768px){
.m-header_user.menu {display: none !important;}
}
@media only screen and (max-width: 480px){
/*header.html관련*/
/* #nav.default-nav .header .navbar-header { padding:0 5%; width:100%; }
#nav.default-nav .header .navbar-header a.navbar-toggle { padding: 10px 5px; margin: 10px 0; }
#nav.default-nav .header .headerbox { width:80%; margin-left:20%; }
#nav.default-nav .header .headerbox .header_navbar .btn { width:60px;}
#nav.default-nav .header .headerbox .header_navbar .btn img { margin-right: 0 }
#nav.default-nav .header .headerbox .header_navbar .btn span { display:none;}
*/
}
/*main header css - END*/
.site-mainWrap { font-family:'Raleway', 'Nanum Gothic';width:100%; }
/********************************************* (.site-false in) 웹사이트 존재하지 않을 경우***/
.site-main { background-color:#fff; }
.site-main > .container { padding-top:100px; padding-bottom:100px; }
.site-main > .container > .row img { margin:0 auto; }
.site-main > .container > .row ul > li > h2 { font-size:48px; font-weight:300; color:#ee445f; margin-top:0px ;margin-bottom:60px; }
.site-main > .container > .row ul > li > h4 { font-size:20px; font-weight:700; color:#556274; margin-top:0px ;margin-bottom:25px; }
.site-main > .container > .row ul > li > p { font-size:16px; font-weight:400; color:#556274; }
.site-main > .container > .row div.site-btnbox { margin-top:70px; }
.site-main > .container > .row div.site-btnbox > a { display:inline-block; font-size:15px; font-weight:700; color:#fff; background-color:#ee445f; padding:10px 40px; -moz-border-radius:4px; border-radius:4px; text-decoration:none;}
.site-main > .container > .row div.site-btnbox > a > i { margin-left:20px; }
/*사이트 만들기 click) Modal CSS*/
.creatSite-modal.modal-default .modal-dialog .modal-body { text-indent: 0; }
.creatSite-modal .form-horizontal { margin: 25px; }
.creatSite-modal .form-horizontal .form-group { text-align:left; margin-left:0; margin-right: 0; }
.creatSite-modal .form-control { font-size:13px; color:#9d9ea3; -moz-border-radius:0; border-radius: 0; box-shadow: none; -webkit-box-shadow: none; padding: 14px 18px; line-height: 1; height: auto;}
.creatSite-modal .form-control.input-url-box { border-right: none; }
.creatSite-modal .input-group-addon { -moz-border-radius:0; border-radius: 0; background: none; border-left: none; letter-spacing: 0.05em; color:#2d343e; font-size: 21px;}
.creatSite-modal label { font-size: 18px; letter-spacing: 0.05em; color:#2e3034; line-height: 1.8; margin-top:0; }
.creatSite-modal .checkmsg { padding:10px 0 0 0; text-align: left; line-height:1; font-family: 'Dotum','Nanum Gothic'; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.creatSite-modal .sub-text { font-family: 'Dotum','Nanum Gothic';; font-size: 11px; color:#888888; line-height: 1; margin-top: 10px; }
/********************************************* (.site-true in) 웹사이트 존재할 경우 ***/
.site-mainTop { background-color:#fff;}
.site-mainTop > .container { padding-top:100px; padding-bottom:70px; }
.site-mainTop > .container > .row h4.up { margin-top:0; margin-bottom:60px; font-size: 21px; color:#212326; }
.site-mainTop > .container > .row img { margin:0 auto; }
.site-mainTop > .container > .row h2 { font-size:22px; font-weight:300; line-height:1; letter-spacing:0.1em; color:#37374a; margin-top:0; margin-bottom:20px;}
.no-site .site-mainTop > .container > .row h2 {
margin-bottom: 2em;
}
.site-mainTop > .container > .row ul li { font-size:13px; color:#4a4a5c; letter-spacing: 0.075em; padding:0; line-height: 2.4; }
.site-mainTop > .container > .row ul li > span.title { font-size:12px; line-height:1; letter-spacing: 0.1em; color:#8b8f95; min-width:117px; display:inline-block; }
.site-mainTop > .container > .row ul li > span.link { font-family:'Raleway','Nanum Gothic'; margin-left:15px; width:140px; text-align:left; color:#b9bcc1; font-size:11px; letter-spacing: 0.01em; }
.site-mainTop > .container > .row ul li > span.link > img { margin-left:7px; }
.site-mainTop > .container > .row div.site-btnbox > a {
line-height:1;
display:inline-block;
color:#3c4451;
font-size: 11px;
font-weight:600;
letter-spacing: 0.1em;
padding:15px 25px;
min-width: 14.8em;
background-color:transparent;
-moz-border-radius:0;
border-radius:0;
border:1px solid #46505d;
margin-right:10px;
text-align: center;
text-decoration:none;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
text-transform: uppercase;
}
.site-mainTop .site-btnbox.ctrls a {
display: inline-block;
min-width: 1em;
padding: 1em 3em;
}
.site-mainTop > .container > .row div.site-btnbox > a.active,
.site-mainTop > .container > .row div.site-btnbox > a:hover,
.site-mainTop > .container > .row div.site-btnbox > a:focus {
color:#ffffff;
background-color:#46505d;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
.site-mainTop > .container > .row div.site-btnbox > a.go-edit-mode {
color: #4c98f0;
border-color: #4c98f0;
}
.site-mainTop > .container > .row div.site-btnbox > a.go-edit-mode.active,
.site-mainTop > .container > .row div.site-btnbox > a.go-edit-mode:hover,
.site-mainTop > .container > .row div.site-btnbox > a.go-edit-mode:focus {
color: #ffffff;
background-color: #4c98f0;
}
.site-mainTop > .container > .row div.site-btnbox > a > img { margin-right:7px; }
.site-mainTop > .container > .row div.site-btnbox > a .fa { margin-left: 7px;}
.main-website .img-wrapper { position:relative; top:0; left:0;max-width: 80%;}
.main-website .img-wrapper img { width:100%; }
.main-website .main-screen-pc { position: absolute; top:0; left:0; z-index: 0; }
.main-website .main-screen { position: absolute; top:14px; left:14px; width:423px!important; z-index: 1; }
.site-mainTop .main-title {
margin-left: -39px;
}
.no-site .main-title {
margin-top: 13px;
}
.main-title li.site-name, .main-title li.url {
word-wrap: break-word;
}
.title .label-success {
display: inline-block;
margin-left: 10px;
position: relative;
top: -1px;
}
.no-site .main-userdata,
.made-site .main-userdata {
margin-left: 4px;
}
.main-userdata {
margin-left: 7px;
}
.site-btnbox.ctrls {
/*margin-bottom: 65px;*/
position: relative;
top: 91px;
}
.main-notice-box {
max-width: 351px;
position: relative;
top: -40px;
}
.no-site .main-notice-box {
top: -6em;
}
.site-mainTop > .container > .row div.site-btnbox > a:last-child {
margin: 0 0 0 0px;
}
.notice-contentbox .bell {
padding-right: 8px;
}
.main-notice-box .notice {
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
width: 286px;
overflow: hidden;
text-align: right;
letter-spacing: -0.385px;
}
.notice-contentbox .divider {
margin-right: 11px;
}
.notice-contentbox .more {
float: right;
}
.site-mainTop a {
text-decoration: none;
}
.news-banner {
background-color: #64a3ec;
border-radius: 5px;
color: #fff;
margin-top: 30px;
padding: 13px 6px 6px;
text-align: center;
width: 98%;
}
.news-banner .headline,
.news-banner .tagline {
letter-spacing: -0.1px;
}
.news-banner .headline {
display: inline-block;
line-height: 0.5;
font-size: 23px;
}
.news-banner img {
margin: 13px 0 0;
position: relative;
right: -5px;
top: -7px;
}
.news-banner .tagline {
color: #c6e0ff;
}
.site-mainTop .close {
color: #fff;
font-family: Verdana;
font-size: 10px;
padding: 10px;
position: relative;
right: 0;
top: -10px;
z-index: 1;
}
/*.visit-wrap {
background-color: #fff;
}
.visit-wrap .site-visit {
margin-left: 4%;
width: 92%;
margin-top: 0;
}
.site-visit .visit-info li { display:inline-block; position:relative; padding-left:2.5em;}
.site-visit .visit-info li:before {
position: absolute;
top: 8px;
left: 8px;
content: "• ";
color: #97BBCD;
font-size: 27px;
}*/
.main-notice-box .notice-topbox { border-bottom: 1px solid #e3e4e6; }
.main-notice-box .notice-topbox, .main-notice-box .notice-contentbox { display: inline-block; width: 100%; }
.main-notice-box .notice-topbox span.notice-title { font-size: 12px; letter-spacing: 0.1em; color: #46505d; }
.main-notice-box .notice-contentbox a,
.main-notice-box .notice-contentbox a:hover,
.main-notice-box .notice-contentbox a:focus { font-size: 9px; letter-spacing: 0.1em; color:#46505d; text-decoration: none; }
.main-notice-box .notice-contentbox span,
.main-notice-box .notice-contentbox p {
font-family: 'Raleway','Nanum Gothic';
font-size: 11px;
color:#93969c;
margin-bottom:0;
text-align: right;
}
.no-site .notice-box .notice,
.made-site .notice-box .notice {
padding-right: 1.5em;
}
.main-notice-box .notice-contentbox p label {
font-family:'Raleway','Nanum Gothic';
font-size: 10px ;
color:#fff;
background-color: #b9bcc1;
min-width: 47px;
padding:3px 4px 1px;
line-height: 1;
margin-right: 5px;
text-transform: uppercase;
text-align: center;
}
.no-site.site-off .main-title p,
.made-site .main-title p {
display: inline-block;
}
.no-site.site-off .main-title .info,
.made-site .main-title .info {
letter-spacing: -0.035em;
margin: -0.6em 0;
}
.site-off .site-btnbox.ctrls,
.site-on .site-btnbox.ctrls {
text-align: right;
top: 16px;
}
.site-off .site-btnbox.ctrls,
.site-on .site-btnbox.ctrls {
top: 91px;
}
.no-site .site-btnbox.ctrls {
top: 78px;
}
.no-site .news-banner,
.made-site .news-banner {
margin-bottom: 39px;
}
.no-site .ctrls,
.no-site .main-notice-box,
.made-site .ctrls,
.made-site .main-notice-box {
float: right;
}
.no-site.site-off .notice-ctrls,
.made-site .notice-ctrls {
padding-right: 0;
}
.checkmsg { padding-left: 115px; font-size: 12px; color: #cc0000; font-weight: bold;}
/*
.site-stats { background-color:#fff; }
.site-stats > .container { padding-top:150px; padding-bottom: 122px;}
.site-stats > .container > .row h4 { font-family:'Raleway','Nanum Gothic'; text-align:left; margin-top:65px; margin-bottom:18px; color:#556274; font-size:17px; font-weight:700; line-height: 1.2;}
.site-stats > .container > .row h4 > strong { color:#2d343e; font-weight:800; }
.site-stats > .container > .row p { text-align:left; color:#556274; font-size:12px; }
.site-stats > .container > .row .firstBox { padding-bottom:7px; display: inline-block; }
.site-stats > .container > .row .chart-background { border:1px solid #e3eae8; -moz-border-radius:50%; border-radius:50%; width:234px; height:234px;}
.site-stats > .container > .row ul.visit-text { width:200px; margin: 0 auto; padding:30% 0;}
.site-stats > .container > .row ul li { font-size:16px; font-weight:600; }
.site-stats > .container > .row ul.visit-text .visit-chartbox { padding-bottom:15px; }
.site-stats > .container > .row ul.visit-text .visited { font-weight:400; font-size:25px; letter-spacing: 0.025em; display:inline-block; color:#4c5259; padding-right:2px;}
.site-stats > .container > .row ul.visit-text .visited-total { font-weight:400; font-size:13px; letter-spacing: 0.02em; display:inline-block; color:#4c5259;}
.site-stats .visit-chartbox { text-align: center; }
.site-stats .site-stats-block { display: inline-block; margin:0 auto; position:relative; top:0; left:50%; transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%); -moz-transform:translateX(-50%); -webkit-transform:translateX(-50%); }
*/
/*.site-templates { background-color:#f3f4f9;}
.site-templates #carousel-device { display: block; }
.site-templates .aboutImg-box { display: block; margin-left: 8%; }
.site-templates .device-box { position: relative; top:0; left:0;}
.site-templates .device-box .site-templates-phone { position: absolute; top:0; left:0;}
.site-templates .device-box .tablet { position: absolute; top:0; left:0; }
.site-templates .device-box .mobile { position: absolute; bottom:0; right:0;}
.site-templates h5 { font-size: 21px; font-weight: 300; line-height:1.2; letter-spacing: 0.05em; color:#2e3034; margin:77px 0 30px;}
.site-templates p { font-family: 'Raleway','Nanum Gothic'; font-size: 13px; color:#8b8b8b; margin:0;}
.site-templates a {
font-size:11px;
font-weight: 600;
letter-spacing: 0.1em;
color:#46505d;
line-height: 1;
padding:18px 34px;
border:1px solid #46505d;
-moz-border-radius: 0;
border-radius: 0;
background-color: transparent;
margin-top:35px;
display: inline-block;
text-decoration: none;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
.site-templates a.active, .site-templates a:hover, .site-templates a:focus {
color:#fff;
background-color:#46505d;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
.site-templates .main-userdata {
margin-left: 0;
}*/
.site-bestSite { background-color:#f3f4f9; padding: 80px 0;}
.site-bestSite .title {
font-size: 30px;
font-weight: 300;
line-height: 1.2;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 50px;
word-wrap:break-word;
}
.site-bestSite .title.en {
line-height: 1.25;
letter-spacing: 0.05em;
}
.site-bestSite a { font-family: 'Open Sans'; font-size: 12px; color: #999999; text-decoration: none; word-wrap:break-word; }
.site-bestSite .btn-box { padding-top: 15px; }
.site-bestSite .btn-box a {
font-size:11px;
font-weight: 600;
letter-spacing: 0.1em;
color:#46505d;
line-height: 1;
padding:18px 34px;
border:1px solid #46505d;
-moz-border-radius: 0;
border-radius: 0;
background-color: transparent;
margin-top:35px;
display: inline-block;
text-decoration: none;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
.site-bestSite .btn-box a.active, .site-bestSite .btn-box a:hover, .site-bestSite .btn-box a:focus {
color:#fff;
background-color:#46505d;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
.site-bestSite a p { margin-bottom: 20px; }
@media only screen and (min-width: 1200px) {
.main-website-box { padding-right: 100px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.main-website-box { padding-right: 80px; }
.site-mainTop > .container { padding:50px 15px 0; }
.site-mainTop > .container > .row ul li > span.link { margin-left:116px; display:block; }
.site-mainTop > .container > .row div.site-btnbox > a:last-child {
float: right;
}
}
@media only screen and (max-width: 1199px) {
.site-mainTop > .container > .row div.site-btnbox > a {
padding: 14px 11px;
min-width: 132px;
}
/*.site-visit .visit-info li:before {
top: 8px;
left: 9px;
}*/
.main-notice-box .notice {
width: 231px;
}
.no-site .site-mainTop > .container > .row h2 {
margin-bottom: 22px;
}
}
@media only screen and (min-width: 800px) and (max-width: 991px){
.site-mainTop .main-title, .main-userdata, .site-mainTop .main-notice-box { max-width:565px; margin:0 auto; }
.site-mainTop .main-notice-box { margin-top: 40px; }
.site-mainTop > .container { padding:50px 15px 25px; }
.site-mainTop > .container > .row h2 { margin-top:0.2em; margin-bottom:10px;}
.site-mainTop > .container > .row ul li { line-height: 2; }
/*.site-mainTop > .container > .row div.site-btnbox { margin-top:20px; }*/
.site-mainTop > .container > .row div.site-btnbox > a { padding:15px 50px; min-width: 167px;}
/*.site-stats > .container { padding:80px 15px; }
.site-stats > .container > .row .chart-background { width:200px; height: 200px; }
.site-stats > .container > .row ul.visit-text .visited { font-size: 20px; }
.site-stats > .container > .row h4 { font-size:15px; margin-top:40px; }
.site-stats > .container > .row p { font-size: 11px; font-weight: 300;}
.site-stats .visit-chartbox #ticker > canvas { width:130px!important; }
.site-stats .circles-text{ font-size:30px!important; padding:0 27%; }*/
/*.main-website .img-wrapper { height: 575px;}*/
.main-website .main-screen { top:23px; left:22px; width:666px!important;}
/*.site-templates h5 { margin:0 0 15px; font-size:18px; }
.site-templates p { font-size: 12px; }
.site-templates a { margin-top:20px; padding: 12px 28px; }*/
.main-website .img-wrapper { max-width: 100%; }
.site-mainTop > .container {
padding-bottom: 0;
margin-bottom: -26px;
}
.no-site.site-off .site-btnbox.ctrls,
.site-off .site-btnbox.ctrls {
top: 26px;
}
}
@media only screen and (max-width: 991px) {
.main-notice-box {
position: static;
}
.site-btnbox.ctrls {
margin-bottom: 0;
}
.main-notice-box .notice-contentbox p {
text-align: left;
width: inherit;
}
.main-notice-box .notice {
float: right;
}
.notice-contentbox .no-padding {
width: inherit;
}
.notice-contentbox .more {
float: right;
margin: 0 8px 0 15px;
}
.news-banner {
margin-top: 45px;
}
/*.visit-wrap .site-visit.slide-up {
margin-top: 30px;
}
.site-templates .main-userdata {
margin: 0 auto;
}*/
.no-site .main-userdata,
.made-site .main-userdata {
margin: 13px auto 0;
}
.site-btnbox.ctrls {
position: static;
}
.no-site .site-mainTop .main-notice-box,
.made-site .site-mainTop .main-notice-box {
margin: 0 auto 52px;
top: 0;
}
.no-site .site-mainTop .main-title,
.made-site .site-mainTop .main-title,
.no-site .site-mainTop .main-websitebox,
.made-site .site-mainTop .main-websitebox,
.no-site .main-userdata,
.made-site .main-userdata,
.no-site .site-mainTop .main-notice-box,
.made-site .site-mainTop .main-notice-box {
max-width: 598px;
}
.no-site .news-banner,
.made-site .news-banner {
margin: 45px auto -13px;
padding-right: 2px;
top: -50px;
}
.no-site .ctrls,
.no-site .main-notice-box,
.made-site .ctrls,
.made-site .main-notice-box {
float: none;
}
.site-off .site-btnbox.ctrls,
.site-on .site-btnbox.ctrls {
top: 0;
text-align: left;
}
.site-off .site-mainTop > .container > .row div.site-btnbox > a:last-child,
.site-on .site-mainTop > .container > .row div.site-btnbox > a:last-child {
margin: -11px 0 -3px;
}
.made-site.site-off .site-btnbox.ctrls,
.made-site.site-on .site-btnbox.ctrls {
margin-top: 26px;
}
.site-bestSite .title { margin-bottom: 40px; font-size: 26px; }
}
@media only screen and (max-width: 800px){
.site-mainTop .main-title, .site-mainTop .main-websitebox, .main-userdata, .site-mainTop .main-notice-box { max-width:480px; margin:0 auto; }
.site-mainTop .main-notice-box { margin-top: 40px! important; }
.site-off .site-mainTop .main-notice-box,
.site-on .site-mainTop .main-notice-box {
margin-top: 0 !important;
}
.site-mainTop > .container { padding:50px 15px 25px; }
.site-mainTop > .container > .row h4.up { margin-bottom: 30px;}
.site-mainTop > .container > .row h2 { font-size:20px; margin-top: 0; margin-bottom: 10px; }
.site-mainTop > .container > .row ul li { line-height: 2; }
.site-mainTop > .container > .row ul li > span.link { margin-left:116px; display:block; }
.site-mainTop > .container > .row div.site-btnbox { margin:15px 0 -1em; }
.site-mainTop > .container > .row div.site-btnbox > a { padding: 15px 40px; min-width: 160px;}
.site-stats > .container { padding-top:100px; padding-bottom: 50px }
.site-stats > .container > .row > div { margin-bottom:50px; }
.site-stats > .container > .row h4 { margin-top:30px; }
/*.main-website .img-wrapper { position:relative; padding: 14px 87px 0 87px;}
/*.site-stats .visit-chartbox #ticker > canvas { width:130px!important; }
.site-stats .circles-text{ font-size:30px!important; padding:0 27%; }
.site-stats .circles-text .disk-total { padding:12% 62%!important; }*/
/*.main-website .img-wrapper { height: 530px;}*/
.main-website .main-screen-pc { width: 620px!important; }
.main-website .main-screen { top:21px; left:21px; width:581px!important;}
/*.site-templates { padding:0; }
.site-templates .text-box { max-width:500px; margin:0 auto; }
.site-templates h5 { margin:40px 0 20px; font-size:18px; }
.site-templates a { margin-top:20px; padding:15px 30px; }
.site-templates .aboutImg-box { margin-left:0; margin-top:0; }*/
.creatSite-modal .form-horizontal { margin: 20px 0 0 0; padding: 5px; }
.creatSite-modal .form-control { font-size: 10px; padding: 13px 10px;}
.creatSite-modal .checkmsg { width: 100%; padding-left: 0;}
.creatSite-modal label { font-size: 14px; }
.creatSite-modal .form-group { margin-bottom: 0; }
.creatSite-modal .input-group-addon { font-size: 12px;}
.creatSite-modal.modal-default .modal-dialog.w480 .modal-footer { margin-top: 20px; }
.site-mainTop > .container{
padding-bottom: 0;
}
.site-mainTop .main-title {
margin-top: 26px;
}
.main-userdata {
margin-top: 26px;
}
.site-mainTop > .container > .row h2 {
margin-top: -20px;
}
.site-mainTop > .container > .row div.site-btnbox {
margin-top: 39px;
}
/*.visit-wrap .site-visit {
margin-top: 17px;
}
.visit-wrap .site-visit.slide-up {
margin-top: 0;
}*/
.no-site .site-btnbox {
margin: 39px auto 0;
}
.no-site .main-website .img-wrapper,
.made-site .main-website .img-wrapper {
margin: 0 auto;
max-width: 100%;
}
.no-site .site-mainTop .main-notice-box,
.made-site .site-mainTop .main-notice-box {
margin: 0 auto 39px;
top: -10px;
}
.no-site .news-banner,
.made-site .news-banner {
margin-bottom: 13px;
margin-top: 2px;
top: 3px;
}
.no-site .site-mainTop > .container > .row div.site-btnbox,
.made-site .site-mainTop > .container > .row div.site-btnbox {
margin-top: 26px;
}
.site-off .site-mainTop > .container > .row div.site-btnbox {
margin: 0 0 -6px;
}
.site-off .site-mainTop > .container > .row div.site-btnbox > a:last-child,
.site-on .site-mainTop > .container > .row div.site-btnbox > a:last-child {
margin: 0 0 33px;
}
}
@media only screen and (max-width: 769px){
.no-site .main-website .img-wrapper,
.made-site .main-website .img-wrapper {
max-width: 455px;
}
.no-site .site-mainTop .main-title,
.no-site .site-mainTop .main-websitebox,
.no-site .main-userdata,
.no-site .site-mainTop .main-notice-box,
.made-site .site-mainTop .main-title,
.made-site .site-mainTop .main-websitebox,
.made-site .main-userdata,
.made-site .site-mainTop .main-notice-box {
max-width: 481px;
}
.site-off .site-mainTop > .container > .row div.site-btnbox,
.site-on .site-mainTop > .container > .row div.site-btnbox {
margin: 0 0 -6px;
}
}
@media only screen and (max-width: 719px){
/*.main-website .img-wrapper { height: 410px; margin-left: 50px;}*/
.main-website .main-screen-pc { width: 500px!important; margin:0 auto; }
.main-website .main-screen { top:16px; left:16px; width:468px!important;}
}
@media only screen and (max-width: 680px){
.news-banner .headline {
font-size: 1.4em;
}
.news-banner .tagline {
font-size: 1em;
}
.news-banner .close {
top: -7em;
}
.site-mainTop .close {
right: 1em;
}
.main-notice-box .notice {
float: none;
}
.site-off .site-mainTop > .container > .row div.site-btnbox {
margin: 0 0 -0.5em;
}
}
@media only screen and (max-width: 675px){
.news-banner .tagline .pt1.br {
display: block;
margin-top: -6px;
}
}
@media only screen and (max-width: 618px){
.site-mainTop .main-title, .site-mainTop .main-websitebox, .main-userdata, .site-mainTop .main-notice-box { max-width:420px; margin:0 auto; }
.site-mainTop > .container > .row ul li > span.link { margin-left:116px; display:block; }
/*.main-website .img-wrapper { height: 360px; margin-left:30px;}*/
.main-website .main-screen-pc { width: 400px!important; }
.main-website .main-screen { top:13px; left:13px; width:375px!important;}
/*.site-templates .text-box { max-width:360px; margin:0 auto; }*/
.site-mainTop > .container > .row h2 {
margin-top: 10px;
}
.no-site .main-website .img-wrapper,
.made-site .main-website .img-wrapper {
max-width: 403px;
}
.no-site .site-mainTop .main-title,
.no-site .site-mainTop .main-websitebox,
.no-site .main-userdata,
.no-site .site-mainTop .main-notice-box,
.made-site .site-mainTop .main-title,
.made-site .site-mainTop .main-websitebox,
.made-site .main-userdata,
.made-site .site-mainTop .main-notice-box {
max-width: 429px;
}
.site-off .site-mainTop > .container > .row div.site-btnbox,
.site-on .site-mainTop > .container > .row div.site-btnbox {
margin-top: 19.5px;
}
}
@media only screen and (max-width: 529px){
.news-banner {
padding-bottom: 1px;
}
.news-banner .headline {
font-size: 14px;
margin: 0 0 -8px;
}
.news-banner .headline img {
width: 17px;
}
.news-banner .tagline {
font-size: 10px;
}
.news-banner .tagline .pt1.br {
margin-top: -12px;
}
}
@media only screen and (max-width: 479px){
.site-mainTop .main-title, .site-mainTop .main-websitebox, .main-userdata, .site-mainTop .main-notice-box { max-width:350px; margin:0 auto; }
.site-mainTop > .container > .row h4.up { margin-bottom: 20px; }
.site-mainTop > .container > .row h2 { margin-top:0.8em; margin-bottom: 10px; font-size: 18px; }
.site-mainTop > .container > .row ul li { font-size: 12px; line-height: 1.8; letter-spacing:0.05em;}
.site-mainTop > .container > .row ul li > span { letter-spacing: 0.05em; min-width: 90px; font-size: 10px }
.site-mainTop > .container > .row ul li > span.link { margin-left:0; width:100%; text-align: right; }
.site-mainTop > .container > .row div.site-btnbox > a { font-size:12px; padding:10px 20px; min-width: 125px;}
.main-notice-box .notice-topbox .col-xs-10 {width: 70%;}
.main-notice-box .notice-topbox .col-xs-2 {width: 30%;}
.main-notice-box .notice-contentbox .col-xs-10 { width: 100%; }
.main-notice-box .notice-contentbox p { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block; }
/*
.site-stats .site-stats-block { text-align: center; }
.site-stats > .container { padding-top:50px; padding-bottom: 30px; }
.site-stats > .container > .row .chart-background { width:180px; height: 180px; }
.site-stats > .container > .row ul.visit-text { width:180px; padding:28% 0;}
.site-stats > .container > .row ul.visit-text .visited { font-size:20px; }
.site-stats > .container > .row ul.visit-text .visited-total { font-size:12px; }
.site-stats > .container > .row h4 { margin-top:15px; font-size:15px; }
.site-stats > .container > .row p { font-size:11px; line-height: 1.8; margin-bottom:0;}
.site-stats > .container > .row ul.visit-text .visit-chartbox { padding-bottom: 5px; }
.site-stats .visit-chartbox #ticker > canvas { width:100px!important; height:40px!important; }
.site-stats .circles-text{ font-size:28px!important; padding:0 29%!important; }
.site-stats .circles-text .disk-total { padding:10% 60%!important; font-size:11px!important;}*/
/*.main-website .img-wrapper { height: 200px; margin-left:0;}*/
.main-website .main-screen-pc { width: 300px!important; }
.main-website .main-screen { top:9px; left:9px; width:282px!important;}
/* .site-templates h5 { margin:40px 0 20px; font-size:16px; }
.site-templates p { font-size: 12px; }
.site-templates a { margin-top:20px; padding:10px 30px; }*/
.site-bestSite > .container { padding:0 15px; }
.site-bestSite .container .row .col-xs-6 { width: 100%; }
.site-bestSite .title { margin-bottom: 20px; font-size: 20px; }
.url > .label-success {
display: none;
}
.url .label-success {
display: inline-block;
position: relative;
top: -2px;
}
.news-banner {
padding-top: 32px;
}
.news-banner .headline .pt1,
.news-banner .tagline .pt1 {
display: block;
margin-top: -14px;
padding-top: 0;
}
.no-site .main-website .img-wrapper,
.made-site .main-website .img-wrapper {
max-width: 100%;
}
.no-site .site-mainTop .main-title,
.no-site .site-mainTop .main-websitebox,
.no-site .main-userdata,
.no-site .site-mainTop .main-notice-box,
.made-site .site-mainTop .main-title,
.made-site .site-mainTop .main-websitebox,
.made-site .main-userdata,
.made-site .site-mainTop .main-notice-box {
max-width: 100%;
}
.no-site .main-userdata,
.made-site .main-userdata {
margin: 0 auto;
}
.no-site .site-mainTop > .container > .row div.site-btnbox {
margin: 0 0 19px;
}
.no-site.site-off .site-mainTop .main-notice-box {
margin: 0 auto 32px;
}
/* 사이트 버튼 margin (1162 [margin-top] 줄도 묶여 있음) */
.site-off .site-mainTop > .container > .row div.site-btnbox > a:last-child,
.site-on .site-mainTop > .container > .row div.site-btnbox > a:last-child {
margin: 20px 0 0;
}
.made-site.site-off .site-mainTop > .container > .row div.site-btnbox,
.made-site.site-on .site-mainTop > .container > .row div.site-btnbox {
margin: 0 auto 22px;
}
}
@media only screen and (max-width: 375px){
/*.site-templates h5 {
font-size: 13px;
}
.site-templates p {
line-height: 1.5;
}*/
.no-site.site-off .main-title,
.no-site.site-off .notice-ctrls {
padding-left: 25px;
}
}
@media only screen and (max-width: 340px){
.news-banner .headline {
padding-top: 0;
}
.news-banner .headline .pt1 {
margin-top: -6.5px;
padding-top: 0;
}
}
@media only screen and (max-width: 319px){
.site-mainTop .main-title, .main-userdata { max-width:none; margin:0 auto; }
.site-mainTop > .container > .row div.site-btnbox > a { font-size: 10px; padding: 10px 15px; min-width: 91px;}
.main-website .main-screen-pc { width: 250px!important; }
.main-website .main-screen { top:6px; left:6px; width:196px!important;}
/* .site-templates { padding:15px 0; }
.site-mainTop > .container > .row ul li > span.title {
min-width: 120px;
}*/
.no-site.site-off .site-mainTop > .container > .row div.site-btnbox > a:last-child {
margin: 22px 0 0;
}
}
@media only screen and (max-width: 220px){
.news-banner .headline .pt1 {
line-height: 26px;
}
.main-notice-box .notice-contentbox p {
margin-right: 22px;
white-space: normal;
}
}
/*20190612 NEW CREATORLINK FOOTER*/
/*
@media only screen and (min-width: 992px) {
footer > .cl-f.container-fluid {
width: auto;
margin-left: 2%;
margin-right: 2%;
}
}
@media only screen and (min-width: 1200px) {
footer > .cl-f.container-fluid {
width: auto;
margin-left: 1%;
margin-right: 1%;
}
}*/
/*20161025 redesign*/
/*
footer {
opacity:1;
position:relative;
bottom:0;
left:0;
background-color:#fbfbfb;
height:auto;
padding: 0;
z-index: 5;
}
footer div { display: block; text-align: center; }
footer .row div a { text-decoration: none; }
footer > .container-fluid > .row { margin-left: 0; margin-right: 0; }
footer > .footer { padding-top: 0; }
.footer .footer_info:before,
.footer .footer_info:after { display: table; content: ''; position: relative; clear: both; }
.footer .footer_info .logo-wrap .navbar-brand { padding: 0; }
.footer .footer_info .logo-wrap .navbar-brand .logo-img { width: 180px; }
.footer .footer_info > div > .panel-group .panel { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; border:none; }
.footer .footer_info > div > .panel-group .panel + .panel { margin-top: 0; }
.footer .footer_info > div > .panel-group .panel div { font-family: 'Open Sans'; text-align: left; letter-spacing: 0.05em; }
.footer .footer_info > div > .panel-group .panel > .panel-heading { display: none; background-color: transparent; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(3) { margin: 0 0 15px; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(4) > .panel-heading { display: block; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(4) > .panel-heading.en { min-height: 44px; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(4) > .panel-heading.en .panel-title { display: none; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(4) .socialiconbox { display: none; }
.footer .footer_info > div > .panel-group .panel > .panel-heading + .panel-collapse .panel-body { border-top: none; }
.footer .footer_info > div > .panel-group .panel > .panel-heading + .panel-collapse .panel-body { border-top: none; padding: 0 15px 0; }
.footer .footer_info > div > .panel-group .panel .panel-title {
display: none;
font-family: 'Open Sans';
font-size: 13px;
font-weight: 600;
color: #42464c;
}
.footer .footer_info > div > .panel-group .panel .panel-title.point {
display: block;
font-family: 'Nanum Gothic', 'Open Sans';
letter-spacing: -0.03em;
color: #4789e7;
}
.footer .footer_info > div > .panel-group .panel .panel-title.point .fa {
font-size: 10px;
margin-right: 7px;
}
.footer .footer_info > div > .panel-group .panel .panel-body > li > a {
font-size: 11px;
color: #a8aaac;
}
.footer .footer_info > div > .panel-group #fheading04 ul { padding:0;}
.footer .footer_info > .lang-wrap > .lang-box > a,
.footer .footer_info > .lang-wrap > .lang-box > .dropdown-menu > li > a {
font-size: 12px;
letter-spacing: -0.03em;
color: #8e8e8e;
width: 100%;
display: inline-block;
text-align: left;
padding: 2px 10px;
min-width: 133px;
cursor:pointer;
}
.footer .footer_info > .lang-wrap > .lang-box > a > .caret {
float: right;
margin-top: 12px;
margin-right: 0;
border-top: 4px solid #3d4551;
border-bottom: 0 dotted;
}
.footer .footer_info > .lang-wrap > .btn-group.open .dropdown-toggle {
-webkit-box-shadow: none;
box-shadow: none;
}
.footer .footer_info > .lang-wrap > .lang-box > .dropdown-menu {
min-width: 133px;
-webkit-box-shadow: none;
box-shadow: none;
margin-bottom: 2px;
border: 1px solid #e6e6e6;
padding: 0;
}
.footer .footer_info > .lang-wrap > .lang-box > .dropdown-menu > li {
line-height: 1;
}
.footer .footer_info > .lang-wrap > .lang-box > .dropdown-menu > li > a {
padding-top: 0;
padding-bottom: 0;
line-height: 2.6;
}
.footer .footer_info .socialiconbox { overflow: hidden !important; display: inline-block; margin: 0 0 30px;}
.footer .footer_info .socialiconbox li { float: left !important; display: inline-block; margin-left: 5px; }
.footer .footer_info .socialiconbox li a,
.footer .footer_info .socialiconbox li a:hover,
.footer .footer_info .socialiconbox li a:focus { color:#7c8690; font-size: 20px; }
.footer .footer_info .socialiconbox li a i { color: #2d343e; font-size: 15px; margin: 0 5px; }
.footer .footer_info + hr { border: none; margin-top: 0; margin-bottom: 0; }
.footer .footer_logo * { font-family: 'Open Sans'; }
.footer .footer_logo { font-size: 11px; padding-top: 20px; padding-bottom: 20px; }
.footer .footer_logo address, .footer .footer_logo .company { color:#a4a4a4; }
.footer .footer_logo address, .footer .footer_logo .company span { position: relative; padding:0px 13px; line-height: 1.5; display: inline-block; }
.footer .footer_logo .company span + span:before {
content:'';
display: inline-block;
position: absolute;
top: 3px; left: 0;
width: 2px; height: 10px;
background-color:#dde1e2;
}
.footer .footer_logo address { margin-bottom: 0; text-transform: uppercase; }
@media only screen and (min-width: 991px){
footer { padding-top: 15px; }
.footer .footer_info { padding-top: 35px; padding-bottom: 20px; }
.footer .footer_info > div > .panel-group .collapse { display: block! important; height: inherit!important;}
.footer .footer_info > div > .panel-group .panel > .panel-heading { padding-top: 0; padding-bottom: 0; }
.footer .footer_info > div > .panel-group .panel-title:not(.point) > a { pointer-events: none! important; }
.footer .footer_info > .logo-wrap { padding-left: 15px; }
.footer .footer_info > .lang-wrap { text-align: right; }
.footer .footer_logo .company,
.footer .footer_logo address { display: inline-block; }
}
@media only screen and (max-width: 992px){
.footer .footer_info > div > .panel-group { overflow: hidden; width: 100%; padding: 15px 0 0; }
.footer .footer_info > div,
.footer .footer_info > div > .panel-group .panel { padding: 0; }
.footer .footer_info > div > .panel-group .panel { float: left; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(2) { margin-bottom:15px !important; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(3) { position: absolute; right: 0; width: 50%; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(4) { position: relative; width: 100%; border-radius: 0 !important; background: #f2f2f2; }
.footer .footer_info > div > .panel-group .panel > .panel-heading { padding-top: 0; padding-bottom:; }
.footer .footer_info > div > .panel-group .collapse { display: block !important; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(4) > .panel-heading { border: none !important; background: #f2f2f2; padding: 15px 0 15px 15px !important; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(4) .socialiconbox { position: absolute; top: 0; right: 15px; display: block; margin: 13px 0 0; }
.footer .footer_info > div > .panel-group .panel:nth-of-type(4) .socialiconbox i { font-size: 15px; margin: 0 10px; }
.footer .footer_info > div > .panel-group .panel-body { padding: 0 20px 10px; }
.footer .footer_info > .logo-wrap { display: none; text-align: center; padding-top: 40px; padding-bottom: 25px;}
.footer .footer_info > .logo-wrap > .navbar-brand { float: inherit; }
.footer .footer_info > .lang-wrap { display: none; }
.footer .footer_info > .soical-wrap { display: none; }
.footer .footer_logo .company { text-align: left; padding: 0 15px 0; }
.footer .footer_logo .company span { display: block; padding: 0 5px 0 0; }
.footer .footer_logo .company span + span:before { display: none; }
.footer .footer_logo .company span:nth-of-type(4),
.footer .footer_logo .company span:nth-of-type(5) { display: inline; }
.footer .footer_logo address { width: 100%; text-align: left; margin: 5px 0 15px; }
.footer .footer_info .socialiconbox { margin-bottom: 15px; }
}
@media only screen and (max-width: 767px){
.footer .footer_info .socialiconbox { margin-bottom: 0; }
.footer .footer_info > .logo-wrap { padding-top: 30px; padding-bottom: 20px; }
.footer .footer_logo .company span:nth-child(2) { display: inline; }
.footer .footer_logo address, .footer .footer_logo .company { line-height: 1.2; }
.footer .footer_info > .lang-wrap { display: none; }
.footer .footer_logo .company { text-align: left; padding: 0 15px 0; }
.footer .footer_logo .company span { display: block; padding: 0 5px 0 0; }
.footer .footer_logo .company span + span:before { display: none; }
.footer .footer_logo .company span:nth-of-type(4),
.footer .footer_logo .company span:nth-of-type(5) { display: inline; }
.footer .footer_logo address { width: 100%; text-align: left; margin: 5px 0 15px; }
}
@media only screen and (max-width: 479px){
.footer .footer_info > div > .panel-group #fheading04 ul { padding:10px 15px;}
}
*/
/* 20180828 유료제작 문의 주석처리 START*/
.footer .footer_info > div > .panel-group .panel .panel-title.point { height: 23px; }
.footer .footer_info > div > .panel-group .panel .panel-title.point > a { display: none; }
/* 20180828 유료제작 문의 주석처리 END*/
.visit-spot {
position: absolute;
top:0px;
left:0;
font-family: 'Raleway','Nanum Gothic';
background-color:#2D343E;
color:#fff;
height: 20px;
/*line-height: 25px;*/
text-align: center;
-moz-border-radius: 3px;
border-radius: 3px;
margin:0 auto;
}
/* 2015.02.05 add by zinbe */
/*admin mode_ user template list*/
.admin_nav { margin: 30px auto; text-align: center; }
.admin_nav li { display: inline-block; margin-left: 30px; }
.user_template { margin: 60px auto; }
.user_template .search-box { margin-bottom: 30px; }
.user_template .search-box select { width: 100px; }
.user_template .search-box .data-count { position: absolute; right:50px; top: 0; line-height: 1.4; font-size: 22px; color: #7d8696; font-family: 'Raleway','Nanum Gothic';}
.user_template .search-box .data-count small { font-size: 14px; }
.user_template .pagination { width: 100%; text-align: center; margin: 0;}
.user_template .pagination ul li { display: inline-block; margin-left:5px;}
.user_template .pagination ul li a { color:#2d343e; line-height: 2;}
.user_template .pagination ul li a.active { font-weight: 900; font-size:14px;}
.site-shot {
position: absolute;
top: 3.8%;
right: 0;
left: 0;
padding-left: 3.3% !important;
padding-right: 3.3% !important;
}
.-editor-alert {
margin-top: 30px;
line-height: 1.8;
font-size: 12px;
color: #5C5C60;
max-width: 455px;
}
.switch {
position: relative;
display: inline-block !important;
vertical-align: top !important;
width: 70px !important;
height: 26px !important;
padding: 4px !important;
border-radius: 18px !important;
cursor: pointer !important;
}
.switch-input{ position: absolute; top: 0; left: 0; opacity: 0; }
.switch-label{
width: 70px;
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #949FAB;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.6em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
right: 12px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.switch-label:after {
content: '';
left: 7px;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label { background: #ee445f; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); }
.switch-input:checked ~ .switch-handle{ left: 36px; box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); }
.switch-input:checked ~ .switch-label:before { opacity: 0; }
.switch-input:checked ~ .switch-label:after { opacity: 1; }
.list-item .switch-label:before { content: 'Normal'; }
.list-item .switch-input:checked ~ .switch-label:after { content: 'Blacklist'; }
.publishlist .switch-label:before { content: 'all site'; }
.publishlist .switch-input ~ .switch-label { background-color: #000; }
.publishlist .switch-input:checked ~ .switch-label { background-color: #4789e7; }
.publishlist .switch-input:checked ~ .switch-label:after { content: 'publish'; }
.switch-handle{
position: absolute;
top: 5px;
left: 5px;
width: 18px;
height: 18px;
background: white;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4) !important;
background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-handle:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
width: 15px;
height: 15px;
background: #f9f9f9;
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eeeeee, white);
background-image: -moz-linear-gradient(top, #eeeeee, white);
background-image: -o-linear-gradient(top, #eeeeee, white);
background-image: linear-gradient(to bottom, #eeeeee, white);
}
.switch-green > .switch-input:checked ~ .switch-label { background: #4fb845; }
.user_template .row div a + div.list-item { text-align: center; position: relative; margin-top: 10px; }
.user_template .row div a + div.list-item .site-title.active { color: #4789e7; }
.user_template .checkbox { position: absolute; top:0; right: 0; margin-top: 0;}
.user_template .checkbox label.blacklist.switch { padding: 0px!important; }
.user_template .checkbox .user-blacklist.switch-input { width: 70px; height: 26px; margin: 0;}
.user_template .checkbox label.blacklist.switch .switch-label:after { left: 10px; }
.user_template .user-plan { position: absolute; top: 30px; right: 0; margin-right: 0; max-width: 100px; display: inline-block; white-space: unset; }
.user_template .user-plan + .tooltip .tooltip-inner { font-size: 0.8em; }
.blacklist-option.w480 .black_opt_modal,
.blacklist-option.w480 .site-plan-connect { color: #a1a7af; }
.blacklist-option.w480 .black_opt_modal .black_opt {
width: 50%;
float: left;
}
.blacklist-option.w480 .black_opt_modal .black_opt li { font-size: 15px; text-align: left; }
.blacklist-option.w480 .black_opt_modal .black_opt > li + li { padding-top:10px; }
.blacklist-option.w480 .black_opt_modal .black_opt > li > span {
margin-right: 5px;
font-size: 10px;
background-color: #d1d4d6;
color: #fff;
border-radius: 15px;
padding: 1px 4px;
cursor: pointer;
}
.blacklist-option.w480 .black_opt_modal .black_opt > li.active { color: #4789e7; }
.blacklist-option.w480 .black_opt_modal .black_opt > li.active > span{ background-color: #4789e7; }
.blacklist-option.w480 .black_opt_modal label.error { padding-left: 15px; }
.black_opt_modal .blocktype-wrap {overflow: hidden;}
.black_opt_modal .blocktype-wrap > li {
width: 80%;
display: block;
overflow: hidden;
margin: 0 auto;
}
.switch-input[data-checked='checked'] ~ .switch-label {
background: #ee445f;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.black_opt_modal .blocktype-wrap > li:first-child {padding: 0 30px 20px 0;}
.black_opt_modal .blocktype-wrap > li:last-child {padding: 0px 30px 0 0;}
.black_opt_modal .blocktype-wrap > li span.block-title {float:left; width:40%;}
.black_opt_modal #user-block {color: #fff; position: absolute; left:20%; height:34px; min-width:79%; background-color: #4789e7; text-align: left;}
.black_opt_modal #user-block .btn-group { width: 100%; }
.black_opt_modal #user-block .inner-toggle { padding:5px 15px;}
.black_opt_modal #user-block .caret {
float:right;
vertical-align: middle;
margin-top: 10px;
border-bottom-color: #FFFFFF;
border-top-color: #FFFFFF;
}
.black_opt_modal ul.dropdown-blocktype {
width: 100%;
overflow-y: auto;
height: 130px;
}
.black_opt_modal ul.dropdown-blocktype li:hover,
.black_opt_modal ul.dropdown-blocktype li:focus {
background-color: #f5f5f5;
color: #858585;
}
.black_opt_modal ul.dropdown-blocktype li:active {
background-color: #428bca;
color: #fff;
}
.black_opt_modal ul.dropdown-blocktype li span {
padding:5px 15px;
display: block;
}
.black_opt_modal ul.dropdown-blocktype ul.dropdown-metamenu li span {
padding:5px 15px;
display: block;
}
.black_opt_modal ul.dropdown-blocktype li { background-color:#fff; color:#4789e7; margin:0;}
/*notice view modal*/
#noticeModal .modal-dialog { padding-top:5%; width: 500px; }
#noticeModal .modal-dialog .modal-content { -moz-border-radius: 0; border-radius: 0; padding:15px;}
#noticeModal .modal-dialog .modal-body { padding:0 25px 0; color:#25272b; }
#noticeModal .modal-dialog .modal-body .modal-title { margin-top: 30px; margin-bottom: 30px; font-size: 15px; letter-spacing: 0.05em; text-align: center}
#noticeModal .modal-dialog .modal-body .subject { font-family: 'Noto Sans KR','Open sans', 'Tahoma', 'Verdana', 'Trebuchet MS'; font-weight: 900; font-size: 16px; padding-top:10px;}
#noticeModal .modal-dialog .modal-body p {font-family: 'Noto Sans KR','Open sans', 'Tahoma', 'Verdana', 'Trebuchet MS'; margin-bottom:0; font-size: 13px; letter-spacing: -0.5px; }
#noticeModal .modal-dialog .modal-body p img { max-width: 100%; }
#noticeModal .modal-dialog .modal-footer { text-align: center; border-top: none; padding:0 25px 25px; margin-top:23px; }
#noticeModal .modal-dialog .modal-footer .btn { padding:10px 40px; -moz-border-radius:0; border-radius:0; border:none; color:#fff;}
#noticeModal .modal-dialog .modal-footer .btn-primary { background-color: #2d343e; text-decoration: none; margin-right: 8px; }
@media only screen and (max-width:991px) {
#noticeModal .modal-dialog { width: 80%; }
#noticeModal .modal-dialog .modal-content { padding:20px;}
}
@media only screen and (max-width:768px) {
#noticeModal .modal-dialog { padding-top:5%; width:100%; }
}
@media only screen and (max-width:479px) {
#noticeModal .modal-dialog .modal-body { padding:0 10px 0; }
}
/*.visit-wrap { background-color:#fff; }
.site-visit { font-family:'Raleway','Nanum Gothic'; padding-bottom:60px;}
.site-visit h4 { text-align: left; margin-bottom:34px; max-width:1010px;}
.site-visit .main-title { text-align: left; width:95%;}*/
/*.site-visit canvas {
width: 100%;
max-width: 1030px;
height: 131px;
max-height: 131px;
display: inline;
margin-bottom:10px;
}*/
/*.site-visit .visit-info { font-size:11px; color:#93969c; font-weight: bold; max-width:1030px; overflow: auto;}
.site-visit .visit-info ul { margin:0px; padding:0px;}
.site-visit .visit-info li span.num { font-family: 'Nanum Gothic'; font-weight:bold; font-size:12px; color:#46606d; font-weight: bold; padding-left:10px;}
*/
.forms * {
font-family: 'Noto Sans KR',sans-serif;
}
/* 폼 수정1 */
.formTable-wrap { padding: 20px 30px 0px 30px; background-color: #fff; }
/*.titleBox {width: 946px;}*/
.formBorder-box { overflow-x: auto; border: 1px solid #eeeff0; }
.form-wrap { min-height: 600px; padding: 40px 0px 80px; background-color: #eeeff3; }
.form-box { padding: 0px; }
.title-wrap {
margin-bottom: 30px;
padding: 30px 40px;
width: 100%;
color: #222428;
font-size: 22px;
font-weight: 300;
position: relative;
z-index: 1;
left: 0;
transform: translateX(0%);
margin: 0 auto;
border-bottom: 1px solid #eeeff0;
}
.form-box .title-wrap,
.form-box .title-top { font-weight: normal; }
.form-box .title-wrap { padding:0px;line-height: normal;font-size: 26px;color:#222428; }
.form-box .title-sub { color:#696c71;margin:0;margin-top: 8px; }
.form-box .formTable-header { padding-bottom: 40px;width: 100%; }
.form-box .formSiteList { display: inline-block; }
.form-box .title-top .form-name { word-break: break-all; }
.form-box .bottom-txt { background-color:#fff; }
.form-box .paging-box { padding-bottom: 30px;background-color:#fff; }
.form-box.view-top .paging-box { padding-bottom: 0px; }
.form-box._admin .formSearch-box { text-align: right; }
.form-box._admin .formSearch-box .pull-right { float: unset !important; }
.formTable .pc { text-overflow: inherit; word-break: break-all; width: 100px; overflow: hidden; word-wrap: break-word; white-space: unset; }
.formTable { background-color: #fff; margin-bottom: 0px; table-layout: fixed;}
.formTable > tbody > tr > td { border-top: none; position: relative; }
.formTable > tbody > tr > th, .formTable > tbody > tr > td {
vertical-align: middle;
font-size: 12px;
color: #696c71;
font-weight: 300;
border-top: none;
line-height: normal;
padding:8px 10px;
}
.formTable > tbody > tr > td .form-name { font-weight: bold;max-width:145px; display: inline-block;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;transform: translateY(2px); }
.formTable > tbody > tr { height: 40px; }
.formTable > tbody > tr:hover > td, .formTable > tbody > tr:hover > th { background-color: #f1f6fc; }
/*.formTable > tbody > tr > td:nth-child(1),
.formTable > tbody > tr > td:nth-child(3),
.formTable > tbody > tr > td:nth-child(5) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }*/
.formTable > tbody > tr > td > .form-delete { min-width: 50px; height: 24px; background-color: #ffffff; border: solid 1px #dbdcdf; font-size: 12px; color: #696c71; }
.formTable > tbody > tr > td > .form-delete:hover { background-color: #f7f8f9; }
/*.formTable > tbody > tr > td > span.red { float: right; }*/
/*.formTable > tbody > tr > td > span.badge.red { position: relative; top: 0px; right: 80px; }*/
.formTable > tbody > tr > td > .label-default { background-color: #b1b3b7; font-size: 11px; font-weight: 300; border-radius: 0px; padding: 3px 5px 4px; }
.formTable > tbody > tr > td > .badge.red { background-color: #ee445f; font-size: 11px; font-weight: normal; padding: 3px 6px 4px;margin-left: 5px; }
.formTable > tbody > tr > td > .badge.grey {
background-color: #b1b3b7;
font-size: 11px;
font-weight: normal;
padding: 3px 6px 4px;
margin-left: 5px;
color:#fff;
cursor: pointer;
transform: translateY(1px);
}
.formTable > tbody > tr > th svg.active,
.formTable > tbody > tr > td svg.active,
.forms-view > tbody > tr > th svg.active,
.forms-view > tbody > tr > td svg.active { fill: #4789e7; }
.formTable > tbody > tr > th svg.checkbox-disabled,
.formTable > tbody > tr > td svg.checkbox-disabled,
.forms-view > tbody > tr > th svg.checkbox-disabled { background-color: #f1f2f3; fill:#e7e7e9; }
.formTable > tbody > tr > th.check .newcheckbox { background-color: #fff; }
.formTable > tbody > tr > th.check .newcheckbox,
.formTable > tbody > tr > td.check .newcheckbox,
.forms-view > tbody > tr > th.check .newcheckbox,
.forms-view > tbody > tr > td.check .newcheckbox {
width: 16px;
height: 16px;
min-height: 16px;
display: inline-block;
text-align: center;
margin: 0;
}
.formTable > tbody > tr.on,
.forms-view > tbody > tr.on { background-color: #f1f6fc; }
.form-box .bottom-txt { position: relative; }
.form-box .bottom-txt p { margin:0; padding-right:91px;line-height:1.4; }
.form-box .bottom-txt p svg { fill:#4789e7;top: 0;transform: translateY(1px); }
.form-box .bottom-txt .icon { position: absolute; line-height: normal; }
.form-box .bottom-txt .text { display: inline-block;padding-left: 18px; }
.form-box .bottom-delete-btn { /*position: absolute; right:40px; top: 0;*/ }
.form-box .form-delbtn,
.form-box .formData-delbtn {
min-width: 76px;
height: 30px;
background-color: #ffffff;
border: solid 1px #dfe1e3;
font-size: 13px;
color: #d1d3d5;
text-align: center;
}
.form-box .form-delbtn.active,
.form-box .formData-delbtn.active {
background-color: #4789e7;
color:#fff;
border:solid 1px #4789e7;
}
.form-box .form-delbtn svg, .form-box .formData-delbtn svg { fill: #fff !important; transform: translateY(1px); margin-right: 6px; }
.form-box .formData-bottom { position: relative; overflow: hidden; margin-top: 11px; }
.form-box .formData-bottom .formData-delbtn { float: right; }
._admin.forms.form-box h3.title { margin-top:0px; margin-bottom: 0px; }
.formBorder-box { display: flex; }
.formBorder-box .left-div,
.formBorder-box .right-div { flex:auto; }
.formBorder-box .left-div { width: 56px;max-width: 56px; flex-shrink: 0;border-right:1px solid #eeeff0; }
.formBorder-box .right-div { overflow-x: auto; flex-shrink: 1; }
.formBorder-box .left-div > table th,
.formBorder-box .left-div > table td { text-align: center; }
.formBorder-box .right-div .formTable th:nth-child(1),
.formBorder-box .right-div .formTable td:nth-child(1) { padding-left: 20px; }
.formBorder-box .right-div .formTable td:nth-child(2) span.form-sid { max-width:100px; display: inline-block;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;transform: translateY(3px); }
.formBorder-box .right-div .formTable td:nth-child(2) span.label { margin-left: 5px; }
.formBorder-box .right-div .formTable td:nth-child(3) .form-name-edit { float: right; display: none; }
.formBorder-box .right-div .formTable tr.form-list.on:hover .form-name-edit { display: block; }
.formBorder-box .right-div .formTable td:nth-child(3) svg { fill:#4789e7; transform: translateY(3px); }
.formBorder-box .right-div .formTable td:nth-child(4) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.formBorder-box .right-div .formTable td .receive-mail {
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
display: inline-block;
max-width: 165px;
vertical-align: middle;
}
.formBorder-box .formTable th,
.formBorder-box .formTable tr { border-bottom:1px solid #eeeff0; }
.formBorder-box .formTable tr:last-child { border-bottom:none; }
.formBorder-box .forms-view th,
.formBorder-box .forms-view tr { border-bottom:1px solid #eeeff0; }
.formBorder-box .forms-view tr:last-child { border-bottom:none; }
.form-box .formBorder-box .left-div::-webkit-scrollbar,
.form-box .formBorder-box .right-div::-webkit-scrollbar { width: 10px; height: 8px; }
.form-box .formBorder-box .left-div::-webkit-scrollbar-thumb,
.form-box .formBorder-box .right-div::-webkit-scrollbar-thumb { background: #d1d3d5; border-radius: 0px; }
.form-box .formBorder-box .left-div::-webkit-scrollbar-track,
.form-box .formBorder-box .right-div::-webkit-scrollbar-track { background: #f3f4f5; }
.formTable-wrap #formCnt-select a,
.formTable-wrap #formCnt-select .dropdown-menu { min-width: 115px; width: 115px; }
.formTable-wrap #formSearch-select a,
.formTable-wrap #formSearch-select .dropdown-menu { min-width: 100px; width: 100px; }
#site-select.form-select a,
#msite-select.form-select a,
#site-select.form-select .dropdown-menu { min-width: 160px; width: 160px; }
#site-select.form-select .site-name,
#msite-select.form-select .site-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
padding-right: 0px;
max-width: 130px;
}
#site-select.form-select a { padding: 0px; color:#4789e7; font-size: 15px; }
.formTable-wrap #formSearch-select { display: inline-block; }
.formTable-wrap .formSearch #formSearch-input { position: relative;max-width: 280px;border: solid 1px #dbdcdf;display: inline-block;height: 30px;margin-right: 7px; }
.formTable-wrap .formSearch #formSearch-input input { vertical-align: middle; padding: 5px 26px 4px 8px; width: 100%;border: none;height: 28px; }
.formTable-wrap .formSearch #formSearch-input svg { fill: #696c71; transform: translateY(2px); position: absolute; right: 3px; }
#site-select.form-select svg,
#msite-select.form-select svg { fill:#4789e7 !important;position: relative;top: unset;right: unset;transform: translateY(3px); }
.formTable-wrap .formSearch #formSearch-input input::-webkit-input-placeholder { color: #b1b3b7; }
.formTable-wrap .formSearch #formSearch-input input:-webkit-input-placeholder { color: #b1b3b7; }
.formTable-wrap .formSearch #formSearch-input input::-moz-placeholder { color: #b1b3b7; }
.formTable-wrap .formSearch #formSearch-input input:-moz-placeholder { color: #b1b3b7; }
.formTable-wrap .formSearch #formSearch-input input:-ms-input-placeholder { color: #b1b3b7; }
.formSearch-box { position: relative; margin-bottom: 20px; }
.formSearch { display: inline-block; }
.formCount { display: inline-block; text-align: left; }
.formCount .formDelete { float: right; }
.pull-right .formDelete .delete-cnt-text { margin-right: 10px; color:#696c71; }
.pull-right .formDelete .delete-cnt { color:#4789e7; }
.formTable-wrap .formCount .form-cnt { margin-right: 20px; }
.form-select a,
.form-select a:hover,
.form-select a:focus {
font-size: 13px;
text-decoration: none;
color: #696c71;
border: 1px solid #dde1e2;
display: inline-block;
padding: 4px 10px 5px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
line-height: normal;
}
.form-select svg {
position: absolute;
transform: translateY(-50%);
top: 50%;
right: 10px;
fill:#696c71 !important;
}
.formSiteList .form-select a,
.formSiteList .form-select a:hover,
.formSiteList .form-select a:focus {
border:none;
}
#formCnt-select .dropdown-menu,
#formSearch-select .dropdown-menu,
#site-select.form-select .dropdown-menu {
box-shadow: none;
border-radius: unset;
margin-top: -2px;
padding: 0;
}
#formCnt-select .dropdown-menu li,
#formSearch-select .dropdown-menu li,
#site-select.form-select .dropdown-menu li {
padding: 2px 10px;
font-size: 13px;
cursor: pointer;
}
#formCnt-select .dropdown-menu li:hover,
#formSearch-select .dropdown-menu li:hover,
#site-select.form-select .dropdown-menu li:hover {
background-color: #f7f7f7;
}
#site-select.form-select .dropdown-menu li,
#msite-select.form-select .dropdown-menu li {
margin-left: 0px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right:10px;
cursor: pointer;
}
.form-wrap .paging {
text-align: center;
padding-bottom: 0px;
background: #fff;
color: #000;
font-weight: 300;
font-size: 13px;
margin-top: 0;
}
.form-wrap .paging a, .form-wrap .paging span, .form-wrap .paging strong {
width: 30px;
height: 30px;
display: inline-block;
margin: 0 2px;
color: #696c71;
font-weight: normal;
line-height: 28px;
background: #f6f8f9;
color: #b1b3b7;
padding:0px !important;
}
.form-wrap .paging strong {
color: #4789e7 !important;
border: 1px solid #4789e7 !important;
background-color: #fff !important;
vertical-align: top;
}
.form-wrap .paging svg {
fill: #b1b3b7;
}
.form-wrap .paging [disabled] svg {
/*display: none;*/
fill: #d1d3d5;
}
.container > .bottom-txt {color: #b1b3b7; font-size: 12px; font-weight: 300; padding: 0px 40px; }
.formMain .popover {
white-space: normal;
word-break: break-all;
box-shadow: none;
border-radius: 3px;
color:#696c71;
}
.formMain .popover.top {
max-width: 220px;
}
.formMain .popover.bottom {
max-width: 180px;
}
.formMain .popover .popover-content {
font-size: 12px;
padding:15px;
line-height: normal;
}
.formMain .popover .popover-content p {
margin:0;
position: relative;
color:#696c71;
line-height: normal;
}
.formMain .popover .popover-content p.mail-title {
font-weight: bold;
color:#484b50;
margin-bottom: 10px;
}
.formMain .popover .popover-content p.mail-list {
padding-left: 10px;
margin-bottom: 5px;
}
.formMain .popover .popover-content p.mail-list:last-child {
margin-bottom: 0px;
}
.formMain .popover .popover-content p.mail-list:before {
content: '·';
display: inline-block;
position: absolute;
left:0;
}
.formname-Edit .form-name-box { padding-bottom: 20px; color:#696c71; }
.formname-Edit .cl-common-form-wrap-box { margin-bottom: 50px; }
.formname-Edit .cl-common-form-wrap-box:after { content:''; display: block; clear: both; }
.formname-Edit p.error { text-align: left; }
@media only screen and (min-width: 1200px) {
.form-box { width: 946px; }
}
@media only screen and (min-width: 992px) {
.form-box { width: }
}
@media only screen and (min-width: 768px) {
.form-box { width: }
}
@media only screen and (max-width: 991px) {
.formBorder-box .formTable tr:last-child { border-bottom: 1px solid #eeeff0; }
}
@media only screen and (max-width: 767px) {
.formMain .default-nav.fixed { position: relative !important; }
.formTable-wrap {
overflow-x: auto;
padding: 20px 0px 0px 0px;
}
.formTable {
width: 767px;
}
.form-box {
padding: 0px;
}
.form-box .formTable-header {
padding: 15px 0px 15px 30px;
display: none;
}
.formMain footer#cl-footer,
.form-box .title-wrap:after { display: none; }
.form-box .formSiteList { /*position: absolute; right: 15px;*/ display: block; padding:0px 15px; }
.formSearch-box .pull-right { float: unset !important; width: 100%; }
.formSearch-box .pull-right .formSearch,
.formSearch-box .pull-right .formCount { margin:0px; float: unset;display: block; }
.formSearch-box .pull-right .formSearch { border-top: 1px solid #eeeff0; margin:15px; padding-top: 15px; }
.formSearch-box .pull-right .formCount { border-top: 1px solid #dbdcdf; padding:15px 15px 0px; }
.formBorder-box { margin:0px 15px; }
.form-wrap { min-height: auto; background-color: #fff; }
.formTable-wrap .formSearch #formSearch-input { width:100%;max-width:100%; margin-right: 0px; }
.forms .paging { padding-top: 20px; }
.form-box .paging-box { padding-bottom: 40px; }
/*.formCount { position: relative; margin-top: 15px; float: right; }
.formCount:after { content:''; display: block; clear: both; }*/
.formSearch-box { margin-bottom: 15px; }
.formSearch-box:after { content:''; display: block; clear: both; }
.title-wrap {padding: 30px 15px;}
.forms .forms-list .pc:not(.formregdate) {
display: table-cell;
}
.container > .bottom-txt {
padding:0px 15px;
}
.form-box .bottom-delete-btn {
right: 15px;
}
.form-wrap { padding:0px; position: absolute; z-index: 2; width:100%;margin-top: 3px; }
.mobile-detail-popup.formsHead { overflow-x: auto; overflow-y: hidden;height:auto;border-bottom: 1px solid #dbdcdf; }
.form-box._admin .formSiteList { display: none !important; }
.form-box._admin .formTable-wrap { padding-top: 0px; }
.formSearch-box .pull-right .formSearch { margin-top: 0px; border-top: none; }
.mobile-detail-popup.formsHead #popup-title { width: calc(100% - 80px); }
.mobile-detail-popup.formsHead #popup-title span { width: 100%;display: inline-block;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
}
/* 폼상세 수정 */
.table-width { background-color: #fff; margin-bottom: 0px;}
.table-width > tbody > tr > td { border-top: none; position: relative; }
.table-width > tbody > tr > th, .table-width > tbody > tr > td { vertical-align: middle; font-size: 12px; color: #696c71; font-weight: 300; border-top: none; }
.table-width > tbody > tr { height: 40px; }
.table-width > tbody > tr:hover > td, .table-width > tbody > tr:hover > th { background-color: #f1f6fc; }
.table-width > tbody > tr:first-child { background-color: #f7f8f9; pointer-events:none; }
/*.table-width > tbody > tr:nth-child(1) th { text-align: center; }*/
.table-width > tbody > tr > td > .form-delete { min-width: 50px; height: 24px; background-color: #ffffff; border: solid 1px #dbdcdf; font-size: 12px; color: #696c71; }
.table-width > tbody > tr > td > .form-delete:hover { background-color: #f7f8f9; }
/*.formTable > tbody > tr > td > span.red { float: right; }*/
/*.formTable > tbody > tr > td > span.badge.red { position: relative; top: 0px; right: 80px; }*/
.formTable > tbody > tr > td > .label-default { background-color: #d4d6d8; font-size: 11px; font-weight: 300; border-radius: 0px; }
.titleBox > h3 > svg {margin-left: 20px; margin-right: 16px;}
.title-top {font-size: 26px; color: #222428; font-weight: normal; margin-top: 0px; margin-bottom: 40px;}
.title-top p { color:#8e9095;font-size: 13px;margin-bottom: 8px; }
.title-top p .sid_lang {background-color: #d4d6d8;font-size: 11px;font-weight: 300;border-radius: 0px;color: #fff;text-align: center;padding: 2px 0px 3px;}
.label-inner {background-color: transparent; border: 1px solid #dbdcdf; font-size: 13px; font-weight: normal; color: #696c71; border-radius: 0; min-width: 120px; padding: 4px 12px 5px; height: 30px;}
.label-inner:hover {background: #f7f8f9;}
.table-hover > tbody > tr:first-child th {background-color: #f7f8f9; pointer-events:none;}
/*.formT-wrap .table-width > tbody > tr:first-child .th-first { padding: 8px 10px 8px 10px; }*/
.formView-wrap {padding: 20px 30px 30px 30px; background-color: #fff;}
.table-width {white-space: nowrap; margin-bottom: 0px;}
.table-width > tbody > tr > td, .table-width > tbody > tr > th {text-align: center;}
.table-width > tbody > tr > th, .table-width > tbody > tr > td {padding: 8px 15px;}
.forms.container > .formView-wrap > .btnExcel {}
.forms.container > .formView-wrap .pull-right { padding-bottom: 22px; }
.view-top {padding-right: 0px; padding-left: 0px;}
.form-wrap .forms .tableCon-wrap {border: 1px solid #eeeff0; margin: 0 0 0em;}
.form-wrap .forms .tableCon-wrap .forms-view.consult-table th.th_regdate {width: 99px;}
.tableCon-wrap::-webkit-scrollbar {width: 10px; height: 8px;}
.tableCon-wrap::-webkit-scrollbar-thumb {background-color: #d1d3d5; border-radius: 0px;}
.tableCon-wrap::-webkit-scrollbar-track {background-color: #f3f4f5;}
@media only screen and (min-width: 1200px) {
.view-top { width: 946px; }
}
@media only screen and (min-width: 992px) {
.view-top { width: }
}
@media only screen and (min-width: 768px) {
.view-top { width: }
}
@media only screen and (max-width: 767px) {
.forms.container .titleBox {
margin-bottom: 0px;
margin: 0px 0;
padding: 0px 0;
}
.forms .formView-wrap {
padding: 20px 15px 50px 15px;
}
.title-top {
padding: 30px 15px;
line-height: 1.4;
font-size: 18px;
display: none;
}
.titleBox > h3 > svg {
margin-left: 16px;
margin-right: 14px;
}
}
/*여기까지*/
/*.forms .table-fixed { width:1110px;max-width:1110px;}*/
.forms .table-container {
width: 100%;
overflow-x: auto;
_overflow: auto;
margin: 0 0 1em;
}
.forms.container .m_backbtn {
display: none;
}
.forms.container svg {fill:#d1d3d5;}
.forms .forms-list .form-deletewrap {
padding-top:9px;
text-align: center;
}
.forms .table-container::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 8px;
}
.forms .table-container::-webkit-scrollbar-thumb {
border-radius: 0px;
/*background-color: rgba(0, 0, 0, 0.2);*/
}
.forms.container .btnExcel {
margin-bottom: 6px;
}
.forms.container .btnExcel label { display: inline-block; line-height: 30px; padding:0px; margin: 0px; }
.forms.container .btnExcel svg {
fill:#696c71;
margin-right: 7px;
}
a.chart-refresh { color:#93969C;}
.forms .paging { font-size:14px; font-family: Inter; margin:0 auto; text-align: center; padding-top: 30px;}
.forms .paging strong { background-color:#3C4451; color:#fff; padding:0px 8px; text-align: center; display:inline-block; font-weight: normal; border:1px solid #3C4451;}
.forms .paging a { padding:0px 0px; display:inline-block; text-align: center;}
.forms .paging li { display: inline-block; padding:0 10px;}
.forms .paging li a { color:#b1b3b7; }
.forms .paging li.active a { color:#4789e7; }
.forms .paging li svg { fill:#d1d3d5; }
.forms .paging li.active svg { fill: #696c71; }
.forms .paging li.first_page,
.forms .paging li.prev_page,
.forms .paging li.next_page,
.forms .paging li.last_page { display:none; }
.forms .paging li.active.first_page,
.forms .paging li.active.prev_page,
.forms .paging li.active.next_page,
.forms .paging li.active.last_page { display:inline-block; }
.lang-box.service_lang { position: absolute; top:; left: 75%; display: inline-block; width: 130px; line-height: 36px !important; float: right; border-radius: 4px; background: #fff; padding: 0 20px; margin: 10px 0 10px 0; z-index:99; }
.lang-box.service_lang .dropdown-menu { top: 37px !important; height: 92px; }
@media only screen and (max-width: 767px){
.lang-box.service_lang { display: none; }
}
/* delete - 중복 css
#goto-top { position: fixed; cursor:pointer; bottom:50px; right:50px; background:rgba(0,0,0,0.1); z-index:1020; border-radius: 5px; font-size:24px; width:34px; height:34px; line-height:31px; text-align: center; color:#aaa;}
#goto-top:hover { background:rgba(0, 0, 0, 0.7); color:#fff;}*/
@media only screen and (min-width: 1200px){
}
@media only screen and (max-width: 992px){
#function .main_function .row.functionbox .item.col-xs-6.col-sm-6.col-md-3,
#function .main_function .row.functionbox02 .item.col-xs-6.col-sm-6.col-md-3 {height:170px;}
#function .main_function .row.functionbox02 {
margin-top:0px;
}
}
@media only screen and (max-width: 767px){
#function .main_function .row.functionbox02 {
margin-top:0px;
}
.forms.container .mbackbox {
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: 0px;
margin: 0px 0;
padding: 0px 0;
}
.forms.container .mbackbox > a {
display: block;
float: left;
margin-left: 5px;
}
.forms.container .m_backbtn {
display: block;
fill:#2d343e;
}
.forms.container .title.detailform {
font-size:16px;
color:#2d343e;
margin: 0;
}
/*.forms.container .btnExcel {
position: absolute;
top: 6px;
right: 0;
}*/
}
@media only screen and (max-width: 480px){
#function .mfunction_detail { padding: 60px 0;}
#function .mfunction_detail .mfunction_detail_area h2 { padding-bottom:60px; }
#function .main_function .row.functionbox .item.col-xs-6.col-sm-6.col-md-3,
#function .main_function .row.functionbox02 .item.col-xs-6.col-sm-6.col-md-3 {height:100px;}
section#function .container {padding:0 30px;}
#function .mfunction_detail .mfunction_detail_area .img-wrap img { margin-left: -10px;}
#function .container .main_function .btn-box { margin:0;}
#function .mfunctiondetail-close { right:4%; }
#function .main_function .mainfunction-more { font-size:13px; padding: 8px 25px; min-width: 195px; text-align: center; }
#function .mfunction_detail .mfunction_detail_area h2 { font-size:26px;}
#function .mfunction_detail .mfunction_detail_area h4.up { font-size:16px; margin-top:0px;}
#function .mfunction_detail .mfunction_detail_area p.desc { font-size:13px;}
}
/********* section event - 후기 css*******************/
/*****************************************************/
.recog-padding { padding : 0 0 100px 0 !important;}
.padding-none { padding:0 !important;}
#event_main .event_content_main > #list_cont_main a.event_link { color: #4789e7;}
#event_main .event_content_main > #list_cont_main > table * ,
#event_main .event_content_main > #list_cont_main > table tr.rows td.subject a ,
#event_main .event_content_main > #list_cont_main > table tr.rows td {font-family: 'Open Sans', 'Noto Sans KR', 'Nanum Gothic' !important; color: #212327;}
.event_content_main > #list_cont_main > table a * { font-weight: 300 !important;}
.event_content_main > #list_cont_main > table tr.rows td { font-weight:100 !important;}
.event_content_main table a * { font-weight: 100 !important;}
.weight100 { font-weight:100!important;}
.event_board_main {
background-color: #fff;
margin:50px 0;
}
.event_board_main .board_wrap_main {
width: 960px; margin: 0 auto; padding-top: 0; padding-bottom: 0;
}
.event_board_main .board_wrap_main .event_top {
padding-bottom: 60px;
}
.event_board_main .board_wrap_main .event_top .top_title_main { position: relative; text-align: center;}
.event_board_main .board_wrap_main .event_top .top_title_main h3 {
font-family: "Noto Sans","Noto Sans KR";
font-weight:300;
letter-spacing: -0.02em;
display: inline-block;
margin-top: 20px;
margin-bottom: 0;
font-size:46px;
}
.event_board_main .board_wrap_main .event_top .top_title_main .writebtn_box {
float: right;
display: inline-block;
}
.event_board_main a .fa-urlbtn-pencil { margin-bottom:4px; }
.event_board_main .board_wrap_main .event_top a.btn-more,
.event_board_main .board_wrap_main .event_top a.btn-more:hover,
.event_board_main .board_wrap_main .event_top a.btn-more:focus,
.event_board_main .board_wrap_main .event_top a.btn-more:active,
.event_board_main .board_wrap_main .event_top a.btn-more.active {
/* font-family: "Noto Sans","Noto Sans KR";
font-weight: 400;
font-size: 15px;
letter-spacing: -0.03em;
color: #212327;
background-color: #ffffff;
border: 1px solid #212327;
-moz-border-radius: 23px;
padding: 10px 15px;
min-width: 100px;
box-shadow: none; */
}
.event_board_main .board_wrap_main .event_content_main a.btn-more,
.event_board_main .board_wrap_main .event_content_main a.btn-more:hover,
.event_board_main .board_wrap_main .event_content_main a.btn-more:focus,
.event_board_main .board_wrap_main .event_content_main a.btn-more:active,
.event_board_main .board_wrap_main .event_content_main a.btn-more.active {
font-family: "Noto Sans","Noto Sans KR";
font-weight: 400;
font-size: 12px;
letter-spacing: -0.03em;
color: #878791;
background-color: #fafbfe;
border: 1px solid #878791;
-moz-border-radius: 13px;
border-radius: 13px;
padding: 4px 10px;
margin-left: 2px;
}
.event_content_main { font-family: 'Noto Sans KR', 'Nanum Gothic'; letter-spacing: 0.03em; }
.event_content_main table { width:100%;}
.event_content_main .no { width:60px; font-size: 13px; letter-spacing: -0.03em; }
.event_content_main .state { width:100px; color: #878791; }
.event_content_main .datetime { }
.event_content_main > #list_cont_main > table tr.title { border-top:1px solid #e5e8eb; border-bottom:1px solid #e5e8eb; }
.event_content_main > #list_cont_main > table tr th { font-weight: 400; text-align:center; color:#212327; border: none; font-size:15px; padding: 18px 15px; letter-spacing: -0.03em;}
.event_content_main > #list_cont_main > table tr th a { font-weight: 400; color:#878791; letter-spacing: -0.03em;}
.event_content_main > #list_cont_main > table tr.rows td { border:none; letter-spacing: -0.03em; height:44px; font-size:15px; padding:15px 0;}
.event_content_main > #list_cont_main > table tr.rows { text-align:center;}
.event_content_main > #list_cont_main > table tr.rows td.subject { padding:10px 106px; text-align: left;}
.event_content_main > #list_cont_main > table tr.rows td.writer a,
.event_content_main > #list_cont_main > table tr.rows td.writer a span,
.event_content_main > #list_cont_main > table tr.rows td.subject a { text-decoration:none; font-weight: 300; font-size:15px; }
.event_content_main > #list_cont_main > table tr.rows td span.comt { font-size: 12px; }
.event_content_main .event_answer_main { background-color: #fafbfe; }
.event_content_main .event_answer_main > td { position: relative; border-top:1px solid #e3eae8; border-bottom:1px solid #e3eae8; }
.event_content_main .event_answer_main .question li, .event_answer .answer li { display:table-cell; }
.event_content_main .event_answer_main ul li.state { font-weight: 600; font-size:20px; padding-top:35px; vertical-align: top;}
.event_content_main .event_answer_main ul li.text { color: #878791; padding:0 10px; vertical-align: middle;}
.event_content_main .event_answer_main ul li.text p { color: #878791 !important; font-weight: 300; font-size: 14px; letter-spacing: 0.02em;}
.event_content_main .event_answer_main .result-file img { max-width: 100%;}
.event_content_main .event_answer_main .question *,
.event_content_main .event_answer_main .answer * { word-wrap: break-word; }
.event_content_main .event_answer_main .question { padding: 5px 0 5px; }
.event_content_main .event_answer_main .answer { padding-bottom: 5px; }
.event_content_main .event_answer_main .question li p,
.event_content_main .event_answer_main .answer li p { font-weight: 300; font-size: 14px; letter-spacing: 0.02em; margin-bottom: 0; max-width: 100%; padding-left: 18px; color:#878791;}
.event_content_main .event_answer_main .answer li.text { position:relative; }
.event_content_main .event_answer_main .answer li .admin_content { content: ''; position:absolute; top: 7px; left: 10px; display: inline-block; width: 10px; height: 10px; border-left:1px solid #f0435f; border-bottom:1px solid #f0435f;}
.event_content_main .pagination { display:inline-block;margin: 20px 0 0 0;}
.event_content_main .paging-main ul.paging li>span.main_paging.active { font-size:14px; font-weight:800; color:#ee445f; }
.event_content_main .buttons { margin: 0; padding-right: 15px; margin-bottom: 10px; }
.event_board_main #write_cont li input,
.event_board_main #write_cont .input_text,
.event_board_main #write_cont input#wr_content,
.event_board_main #write_cont textarea#wr_content { width: 100%; padding: 10px 12px; height: 45px; }
.event_board_main #write_submit > div > .btn {
font-family: 'Noto Sans','Noto Sans KR';
font-size: 15px;
font-weight: 400;
letter-spacing: -0.03em;
color: #878791;
background-color: #ffffff;
border: 1px solid #878791;
-moz-border-radius: 23px;
border-radius: 23px;
padding: 10px 15px;
min-width: 185px;
}
.event_board_main #write_submit > div > .btn.btn_save {
background-color: #2d343e;
color: #fff;
}
.event_board_main .right { margin-left: 10px; }
.event_board_main .event_handle_btn {
font-size: 15px;
color: #878791;
background-color: #fff;
border: 1px solid #878791;
padding: 5px 15px;
}
.event_board_main label.comment,
.events_modal div.comment {
color: #ee445f;
font-size:12px;
display: inline-block;
}
.events_modal {
text-align: left;
margin: 0 auto;
width: 260px;
}
.events_modal > li > label {
min-width: 100px;
margin-bottom: 10px;
}
.question .fa { margin:0px; }
.event_answer_detail_main { padding:10px 140px; font-size:13px;}
.paging-main { width:100%; text-align: center; margin:0px; padding-top:30px; }
ul.paging > li > span.main_paging { border:none; font-size:15px; color:#878791; display:inline-block; margin-right:15px; margin-left:0px; padding:0; float:none;}
ul.paging > li.active > span { font-size:15px; font-weight:800; color:#ee445f; }
ul.paging > li > span:hover {background-color: transparent;}
ul.paging > li.active > span:hover { color: #ee445f;}
@media only screen and (max-width:991px) {
.event_board_main { padding: 0px; background-color: #fff; margin: 0; }
.intro-content .btn-box {padding: 0; margin: 30px auto 0 auto;}
.event_title.ev-intro { padding-top: 115px; }
.event_title h1 { font-size: 35px; margin-bottom: 24px;}
.event_title .step-box { padding: 20px 15px 25px 20px; }
.event_title .step-box h4 { margin-bottom: 5px; }
.event_title .step-box:before { font-size: 70px; }
.event_board_main .board_wrap_main .event_top .top_title_main h3 { font-family: "Noto Sans","Noto Sans KR"; font-weight: 300; letter-spacing: -0.02em; display: inline-block; margin-top: 19px; margin-bottom: 10px;
font-size: 38px;}
.event_content_main > #list_cont_main > table tr.rows td.writer a,
.event_content_main > #list_cont_main > table tr.rows td.writer a span,
.event_content_main > #list_cont_main > table tr.rows td.subject a { text-decoration: none; font-weight: 100; font-size:18px;}
.event_title .subnotice { margin-top: 40px; }
.event_title .container,
.event_board_main .board_wrap_main { width: auto; margin: 0 30px; }
.event_board_main .board_wrap_main .event_top { padding-bottom: 30px; }
.help_page.container-fluid { padding-top: 50px; padding-bottom: 50px; }
.help_page .title h1 { font-size: 35px; }
.help_page .title p { margin-bottom: 25px; }
}
@media only screen and (max-width:768px) {
.event_content_main > #list_cont_main > table tr.rows td { padding:10px 0;}
.event_content_main > #list_cont_main > table tr th { padding:6px 15px;}
.event_content_main > #list_cont_main > table tr th { font-size:14px;}
#event_main .event_content_main > #list_cont_main > table * ,
#event_main .event_content_main > #list_cont_main > table tr.rows td.subject a ,
#event_main .event_content_main > #list_cont_main > table tr.rows td {font-family: 'Open Sans', 'Noto Sans KR', 'Nanum Gothic' !important;}
.event_content_main table { width:100%; }
.event_content_main > #list_cont_main > table tr.rows td.subject a.open-artcle { font-weight:100 !important;}
.event_content_main > #list_cont_main > table tr.rows td { font-weight:100 !important;}
.event_content_main table a * { font-weight: 100 !important;}
.weight100 { font-weight:100!important;}
.event_content_main > #list_cont_main > table tr.rows td.subject { padding:3px 10px; font-weight:100; color:#212327; font-size:14px;}
.event_answer_detail_main { padding:0px; margin:0px;}
.event_content_main .event_answer_main > td { max-width: 370px;}
.event_content_main .event_answer_main ul li.text p {font-size:12px; letter-spacing: -0.5px; color: #878791; font-weight: 300; width:100%; line-height: 1.6}
.event_content_main .event_answer_main .question li p,
.event_content_main .event_answer_main .answer li p { margin-bottom: 0; font-size:12px; letter-spacing: -0.5px; color: #878791; font-weight: 300; width: 79%;}
.event_title, .event_board_main { background-color: #fff; padding:50px 0 35px 0;}
.event_board_main { padding: 0px; }
.event_title .container { margin: 0 20px;padding-bottom: 0; }
.event_title h1 { font-size: 27px; margin-bottom: 20px; letter-spacing: -0.08em;}
.event_title .step-box { padding: 20px 25px 25px 25px; min-height: auto; }
.event_title .step-box.event_blog {margin-bottom:10px;}
.event_title .step-box h4 { line-height: 20px; margin-top: 13px; }
.event_title .en .step-box h4 { margin-top: 15px; line-height: 1.4; }
.event_title .en .step-box.step1 h4 strong:after { position: relative; display: table; content: ' '; }
.event_title .step-box h4.up { margin-top: 10px; }
.event_title .step-box p { font-size: 13px; }
.event_content_main > #list_cont_main > table tr.rows td,
.event_content_main > #list_cont_main > table tr.rows td.writer a,
.event_content_main > #list_cont_main > table tr.rows td.writer a span,
.event_content_main > #list_cont_main > table tr.rows td.subject a { font-family: 'Open Sans', 'Noto Sans KR', 'Nanum Gothic' !important; text-decoration:none; font-weight:100; color:#212327; font-size:14px; }
.paging-main { width: 100%; text-align: center; margin: 0px; padding-top:5px; }
ul.paging > li > span.main_paging { font-size:14px;}
ul.paging > li.active > span { font-size:14px;}
/*.event_title h5.up { font-size: 14px; margin-top: 20px; margin-bottom: 30px;}
.event_title ul li:nth-child(odd),
.event_title ul li:nth-child(even) { width: 100%; max-width: 100%; display: block; text-align: center;}
.event_title ul li:nth-child(even) img { transform: rotate(90deg); margin: 30px 0;}*/
.event_title .subnotice { margin-top: 20px; }
.event_board_main .board_wrap_main { width: auto; margin: 0 15px;}
.event_board_main .board_wrap_main .event_top { padding-bottom: 33px; }
.event_board_main .board_wrap_main .event_top .top_title_main h3 { font-size: 27px; }
.event_board_main #list_cont_main table tr.title th:nth-child(1),
.event_board_main #list_cont_main table tr.rows td:nth-child(1),
.event_board_main #list_cont_main table tr.title th:nth-child(4),
.event_board_main #list_cont_main table tr.rows td:nth-child(4),
.event_board_main #list_cont_main table tr.event_answer td ul li ul li.no,
.event_board_main #list_cont_main table tr.event_answer td ul li ul li.state { display: none; }
.event_board_main #list_cont_main table tr.title th:nth-child(2),
.event_board_main #list_cont_main table tr.rows td:nth-child(2) { width: 69%; }
.event_board_main #list_cont_main table tr.title th:nth-child(3),
.event_board_main #list_cont_main table tr.rows td:nth-child(3) { width: 60%; }
.event_board_main #list_cont_main table tr.title th:nth-child(4),
.event_board_main #list_cont_main table tr.rows td:nth-child(4) { width: 20%; }
.event_content_main .event_answer .answer li .admin_content { top: 2px; }
.event_board_main .note-editable[contenteditable="true"] { height: 160px ! important; }
.event_board_main #write_submit > div > .btn { min-width: 120px; max-width: 120px;}
.event_board_main #write_submit { padding-top: 0; }
header.intro ~ .help_page.container-fluid { margin-top: 44px; }
.help_page .title h1 { font-size: 28px; letter-spacing: -0.08em; }
.help_page .title p { margin-bottom: 10px; }
.help_page .title .btn-wrap .btn { margin-top: 8px; height: 36px; font-size: 14px; padding: 8px 12px; }
.help_page .btn-write { min-width: inherit; margin-right: 10px; }
.help_page .btn-mycts { min-width: inherit; }
}
@media only screen and (max-width:640px) {
.event_title .step-box:before { margin-top: 18px; }
.event_title .step-box h4.up { margin-top: 0; font-size: 22px; line-height: 1.3; margin-bottom: 0; }
.event_title .step-box h4.up.en { margin-top: 0; }
.event_title .step-box h4.up > strong + strong { display: block; }
.event_title .en .step-box.step1 h4 strong:after { display: none; }
.event_content_main > #list_cont_main > table tr.rows td * { font-weight:100 !important;}
}
@media only screen and (max-width:480px) {
.event_title .step-box:before { font-size: 62px; }
.event_title .step-box h4 { font-size: 15px; line-height: 23px; margin-top: 7px; }
.event_title .step-box h4.up { font-size: 18px; margin-top: 9px; }
.event_title .step-box p { font-size: 13px; line-height: 18px; margin-top: 10px; }
.event_content_main > #list_cont_main > table tr.rows td * { font-weight:100 !important;}
.help_page.container-fluid { background-position: left; }
}
@media only screen and (max-width:400px) {
.event_title h1 { font-size: 24px; }
.event_title .step-box h4.up.en { margin-top: 15px; }
.event_title .step-box h4.up > strong + strong { display: inline; }
}
/************************ section review css START **********************/
/************************************************************************/
#review_event {/*background-color: #fff;*/ padding: 100px 0;min-height: 500px;}
#review_event * {font-family: 'Noto Sans KR',sans-serif; }
#review_event .review_list {position: relative;}
#review_event .review_list .swiper-container {
width: 100%;
height: 100%;
position:relative;
z-index:1;
}
#review_event .review_list .swp-none-box {
width:25%;
position:absolute;
top:0px;
background-color:rgba(255, 255, 255,0.8);
height:100%;
z-index:2;
}
#review_event .review_list .swpleft {left:0;}
#review_event .review_list .swpright {right:0;}
#review_event .review_list #sp-review {}
#review_event .review_list .swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: left;
}
#review_event .review_list .re_subject {
font-size: 18px;
font-weight: 600;
display: block;
width: 100%;
float: left;
padding-bottom: 15px;
}
#review_event .review_list .re_content {
font-size: 16px;
color: #202226;
line-height: 24px;
}
#review_event .review_list .re_bottom {overflow: hidden;padding-top: 15px;}
#review_event .review_list .re_star { margin: 0; float: left;}
#review_event .review_list .re_id {
font-size: 12px;
font-weight: 200;
float: right;
display: inline-block;
margin-top:-4px;
}
#review_event .review_list .slider-control {
position: absolute;
top:50%;
transform : translateY(-50%);
z-index: 3;
width: 48px;
height: 48px;
background-size: 48px 48px;
}
#review_event .review_list .slider-control.left{
background-image: url(//storage.googleapis.com/i.addblock.net/intro/swiper_left.png);
right: auto;
}
#review_event .review_list .slider-control.right {
background-image: url(//storage.googleapis.com/i.addblock.net/intro/swiper_right.png);
left: auto;
}
#review_event .review_list + .btn-box { text-align: center; margin-top: 60px;}
#review_event .review_list + .btn-box .reEventlink {
font-size: 14px;
letter-spacing: 0.02em;
padding:16px 42px;
min-width: 110px;
color: #46505d;
background-color: transparent;
border: 1px solid #46505d;
-moz-border-radius: 0;
border-radius: 0;
text-decoration: none;
display: inline-block;
position: relative;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
text-align: left;
}
#review_event .review_list + .btn-box .fa {
font-family: 'FontAwesome';
margin-left: 7px;
position: absolute;
top: 12px;
}
#review_event .review_list + .btn-box .reEventlink.active,
#review_event .review_list + .btn-box .reEventlink:hover,
#review_event .review_list + .btn-box .reEventlink:focus {
color:#fff;
background-color:#46505d;
-webkit-transition:ease-in-out 0.5s;
-moz-transition:ease-in-out 0.5s;
-ms-transition:ease-in-out 0.5s;
-o-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
}
@media only screen and (min-width: 1025px) {
#review_event .review_list .slider-control.left {left:100px;}
#review_event .review_list .slider-control.right {right:100px;}
}
@media only screen and (min-width: 768px) {
#review_event .tb-hidden { display: block;}
}
@media only screen and (max-width: 1024px) {
#review_event {padding:100px 30px;}
#review_event .review_list .slider-control.right {right:10px;}
#review_event .review_list .slider-control.left {left:10px;}
}
@media only screen and (max-width: 767px){
#review_event .tb-hidden { display: none;}
#review_event {padding: 100px 0;}
#review_event .review_list {padding: 0 40px;}
#review_event .review_list .slider-control{
width: 24px;
height: 24px;
background-size: 24px 24px;
}
}
/************************ section review css END ************************/
/************************************************************************/
/*주요기능 css*/
.mfunction_detail * {font-family: 'Noto Sans KR',sans-serif; }
.mfunction_detail { padding: 70px 0;background-color:#f3f4f9; top: 0; width: 100%;position: relative;}
.mfunction_detail .container { position:relative;}
.mfunctiondetail-close {top:2%; right:2%; position: fixed; z-index: 999;}
.mfunction_detail .mfunction_detail_area { letter-spacing: -0.3px;position: relative;}
.mfunction_detail .mfunction_detail_area .up {font-size:18px; margin-bottom: 10px; margin-top: 0px;}
.mfunction_detail .mfunction_detail_area .desc {
font-weight:normal; color:#707682; font-size:15px;
margin:0px; line-height: 1.5;
letter-spacing: -0.45px;
padding: 0;
}
.mfunction_detail_area .func-menu {width:100%;}
.mfunction_detail_area .func-menu-box.fixed {top:55px; padding: 25px 0; background-color: rgba(255, 255, 255, 0.95);width:100%;}
.mfunction_detail_area .func-menulist {
display: inline-block;margin-right: 32px;font-size:24px;
color:#9d9fa3;
position: relative;
font-weight: 300;
letter-spacing: -0.72px;
}
.mfunction_detail_area .func-info {
margin-top:23px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.6;
letter-spacing: -0.42px;
text-align: center;
color: #878791;
word-break: keep-all;
}
.mfunction_detail_area .func-info li > span {color:#4789e7;}
.mfunction_detail_area .func-menulist:last-child {margin-right:0;}
.mfunction_detail_area .func-menulist.active {color:#4789e7;font-weight: 500;}
.mfunction_detail_area .func-menulist:hover:not(.active) {color:#62656a;}
.mfunction_detail_area .func-menulist::after {
content: ' ';
width:2px;
height: 16px;
position: absolute;
background-color: #dfe1e3;
top: 50%;
transform: translateY(-50%);
margin-left: 15px;
}
.mfunction_detail_area .func-menulist:last-child::after {display: none;}
.mfunction_detail_area .menuContentWrap {position: relative; margin-top:50px;}
.mfunction_detail_area .menuContentsbox {
display: block;
clear: both;
height: auto;
overflow: hidden;
}
.mfunction_detail_area .function-listContents {
overflow: hidden;
position: relative;
display: flex;
flex-wrap: wrap;
max-width: 960px;
margin:auto;
}
.mfunction_detail_area .function-list-wrap {
flex:1 1 30%;
margin-right:30px;
max-width: 300px;
padding-top:30px;
}
.mfunction_detail_area .function-listContents .func-contents {
padding: 30px 25px 30px;
background-color:#fff;
height: 100%;
}
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(3n) { margin-right:0px; }
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(1),
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(2),
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(3) { padding-top:0px; }
.mfunction_detail_area .mfunc_listimg { padding-bottom: 20px; }
.mfunction_detail_area .mfunc_listimg img { display:inline-block; max-height:88px; }
@media only screen and (max-width:991px) {
.navbar-link {display: none;}
.mfunction_detail_area .func-menulist {font-size:20px; margin-right: 22px;}
.mfunction_detail_area .func-menulist::after {margin-left: 11px;}
.mfunction_detail_area .func-menu-box.fixed {top:55px !important;padding: 20px 15px;}
.mfunction_detail_area .func-info { margin-top:14px; }
.mfunction_detail_area .function-listContents .function-list-wrap { flex:1 1 50%; max-width: 50%; margin-right:0px; }
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(3) { padding-top:30px; }
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(2n+1) { padding-right:15px; }
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(2n) { padding-right:0px; padding-left:15px; }
}
@media only screen and (max-width:768px) {
.mfunction_detail_area .func-menu-box { padding:0px 15px; }
.mfunction_detail_area .func-menu-box.fixed {top:55px !important;z-index: 89;}
#nav .header {height:auto;}
#nav.intro.nomember_main[data-page="mainfunction"] { background-color: rgb(243, 244, 249); }
#nav.intro[data-page="mainfunction"] .navbar-header { background: unset; }
.mfunction_detail_area .menuContentsbox {padding: 0 6px;}
.mfunction_detail .mfunction_detail_area .up {font-size:16px; }
.mfunction_detail .mfunction_detail_area .desc { font-size:14px; }
.mfunction_detail_area .function-listContents .function-list-wrap { flex:1 1 100%; max-width: 100%; padding-right:15px; padding-left:15px; }
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(2) { padding-top:30px; }
.mfunction_detail_area .function-listContents .function-list-wrap:nth-child(2n) { padding-right:15px; }
.mfunction_detail_area .function-listContents .func-contents { flex: 1 1 100%; max-width: 100%; display: flex; }
.mfunction_detail_area .mfunc_listimg { width:16%; margin-right:20px; padding-bottom: 0px; }
.mfunction_detail_area .mfunc_listinfo { width: 84%; }
}
/* 240604.주요기능페이지개선작업_backup
.mfunction_detail { padding: 70px 0;background-color:#fff; top: 0; width: 100%;position: relative;}
.mfunction_detail .container { position:relative;}
.mfunctiondetail-close {top:2%; right:2%; position: fixed; z-index: 999;}
.mfunction_detail .mfunction_detail_area { letter-spacing: -0.3px;position: relative;}
.mfunction_detail .mfunction_detail_area h2 { padding-bottom: 28px; margin-right: 0; font-weight: normal; margin-top: 35px; }
.mfunction_detail .mfunction_detail_area .up {font-size:18px; margin-bottom: 10px; margin-top: -3px;}
.mfunction_detail .mfunction_detail_area .desc { font-weight:300; color:#707682; font-size:15px; margin:0px; line-height: 1.4; padding: 0;}
.mfunction_detail .mfunction_detail_area .desc .wordbreakNone {word-break:normal;}
.mfunction_detail .mfunction_detail_area .non_update { color: #dbdde2;}
.mfunction_detail_area .func-menu {margin-bottom: 96px; width:100%; padding: 22px 0;}
.mfunction_detail_area .func-menu.fixed {top:55px; padding: 22px 0; background-color: #f8fafc; /* z-index: 2 !important; *}
.mfunction_detail_area .func-menulist {display: inline-block;margin-right: 36px;font-size:22px; color:#9d9fa3;position: relative; font-weight: 300;}
.mfunction_detail_area .func-menulist:last-child {margin-right:0;}
.mfunction_detail_area .func-menulist.active {color:#4789e7;}
.mfunction_detail_area .func-menulist:hover:not(.active) {color:#62656a;}
.mfunction_detail_area .func-menulist::after {
content: ' ';
width:2px;
height: 12px;
position: absolute;
background-color: #dfe1e3;
top: 50%;
transform: translateY(-50%);
margin-left: 18px;
}
.mfunction_detail_area .func-menulist:last-child::after {display: none;}
.mfunction_detail_area .menuContentWrap {position: relative;}
.mfunction_detail_area .menuContentsbox {
display: block;
clear: both;
height: auto;
overflow: hidden;
margin-top:42px;
}
.mfunction_detail_area .menuContentsbox .menu-title:before,
.mfunction_detail_area .menuContentsbox .menu-title:after {
content: ' ';
width: 43%;
height:1px;
background-color: #dfe1e3;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.mfunction_detail_area .menuContentsbox p,
.mfunction_detail_area .function-listContents {
position: relative;
width:100%;
padding: 0 48px;
height: auto;
float: left;
word-break: keep-all;
}
.mfunction_detail_area .function-listContents > div {height:217px;float: left;}
.mfunction_detail_area .function-listContents > div:nth-child(2n-1) {padding-right:24px;}
.mfunction_detail_area .function-listContents > div:nth-child(2n) {padding-left:24px;padding-right: 0;}
.mfunction_detail_area .function-listContents .mfunc_listimg {float: left;height:100%;margin-right: 15px;}
.mfunction_detail_area .menuContentsbox .menu-title:before {left:0;margin-right:22px;}
.mfunction_detail_area .menuContentsbox .menu-title:after {right:0;}
.mfunction_detail_area .menuContentsbox .menu-title {font-size:22px; color:#696c71;position: relative;margin: 0;}
.mfunction_detail_area .menuContentsbox p {font-size:14px; color:#696c71;margin-top:20px; margin-bottom:60px;}
@media only screen and (max-width:991px) {
.navbar-link {display: none;}
.mfunction_detail_area .func-menulist {font-size:16px; margin-right: 22px;}
.mfunction_detail_area .func-menulist::after {margin-left: 11px;}
.mfunction_detail .mfunction_detail_area h2 {padding-bottom: 30px;margin-right: 0px;}
.mfunction_detail_area .func-menu {margin-bottom:60px;}
.mfunction_detail_area .menuContentsbox .menu-title {font-size:16px;}
.mfunction_detail_area .menuContentsbox .menu-title + p {padding: 0 16px;margin-bottom: 50px;}
.mfunction_detail_area .function-listContents > div {height:auto; margin-bottom: 58px;}
.mfunction_detail_area .function-listContents > div:nth-child(2n) {padding:0;}
.mfunction_detail_area .func-menu.fixed {top:56px !important;padding: 12px 0;}
.mfunction_detail_area .function-listContents > div:nth-child(2n-1) {padding-right: 0px;}
}
@media only screen and (max-width:768px) {
.mfunction_detail_area .func-menu.fixed {top:57px !important;padding: 12px 0; z-index: 89;}
.mfunction_detail_area .menuContentsbox .menu-title:before,
.mfunction_detail_area .menuContentsbox .menu-title:after {
width:37%;
}
#nav .header {height:auto;}
.mfunction_detail_area .menuContentsbox .menu-title + p {font-size:13px;}
.mfunction_detail_area .function-listContents,
.mfunction_detail_area .menuContentsbox p {padding: 0;}
.mfunction_detail_area .function-listContents > div {padding: 0;width: 100%; height: auto; margin-bottom: 55px;}
.mfunction_detail_area .menuContentsbox {padding: 0 6px;}
.mfunction_detail_area .function-listContents .mfunc_listimg {height:auto;margin-right: 17px;}
}
@media only screen and (max-width: 480px) {
.mfunction_detail_area .menuContentsbox {padding:0 15px;}
}
*/
/************************ main section backgroundcolor css *******************/
/*****************************************************************************/
section#about { background-color:transparent !important; }
section#review_event.pc,
section#review_event.mobile { background-color: #fff !important;}
section#bestsite,
section#responsive,
section#m_template { background-color: transparent !important;}
section#function,
section#creatorlinkqna,
section#recognition { background-color: #fff !important;}
section#review_event.mobile { min-height: 400px; }
@media only screen and (max-width:991px) {
section#bestsite,
section#responsive,
section#m_template { background-color: #fff !important;}
section#function,
section#creatorlinkqna { background-color: transparent !important;}
}
@media only screen and (max-width:768px) {
section#about { background-color: #a9afbd !important; }
}
/*교육.css*/
.education_page { background-color: #f3f4f9; }
.education_list { }
.education_list .card-list { display: flex; flex-wrap: wrap; padding-bottom: 50px; margin: auto; max-width: 960px;}
.education_list .card-list .card {
position:relative;
width:calc(33% - 17px);
max-width:300px;
margin-right:30px;
margin-top: 30px;
height:170px;
border-radius: 5px;
overflow: hidden;
border: 1px solid #e7e8e9;
}
.education_list .card-list .card:nth-child(3n) { margin-right:0px; }
.education_list .card-list .card-img {
background-repeat:no-repeat;
background-size: 100% 100%;
background-position: center;
height: 100%;
}
.education_list .card-list .card .card-title {
line-height: normal;
font-size: 18px;
font-weight: 300;
letter-spacing: -0.36px;
color: #212327;
position:absolute; top:30px; left:20px;
line-height:26px;
}
.education_list .card-list .card .card-title[data-pos="B"] { top:18px; }
.education_list .card-list .card.dis .card-img { filter: grayscale(100%); opacity: 0.7; }
.education_list .card-list .card .card-title span { color:#4789e7; font-size: 22px; font-weight: 500; letter-spacing: -0.48px; }
.education_list .card-list .card.dis .card-title,
.education_list .card-list .card.dis .card-title span { color:#707070; }
.education_list .card-list .card .card-title[data-pos="B"] span.sub { display:block; font-size: 16px; margin-top:8px; }
.education_list .card-list .card .card-date {
position:absolute;
bottom:0;
color:#fff;
height:44px;
width:100%;
padding:0px 20px;
background-color: #4789e7;
}
.education_list .card-list .card.dis .card-date { background-color: #c3c3c3; }
.education_list .card-list .card .card-date p {
position: absolute;
font-size:15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: 300;
}
.education_list .card-list .card .card-date svg {
fill:#fff;
position: absolute;
right:20px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.education_list .paging { text-align: center; }
.education_list .paging li,
.education_list .paging strong { display: inline-block; width:30px; height:30px;font-weight: normal;line-height: 30px; margin: 0 2px; }
.education_list .paging li { background: #f6f8f9;color: #b1b3b7; }
.education_list .paging li svg { fill:#b1b3b7; }
.education_list .paging strong { color: #4789e7; border: 1px solid #4789e7; background: #fff; }
.education_list_tab { text-align: center; padding-top: 70px; }
.education_list_tab h2 { display: inline-block; font-size: 24px; cursor: pointer; color:#9d9fa3;font-weight: 300; }
.education_list_tab h2:hover { color:#62656A; }
.education_list_tab h2.active { color:#4789e7;font-weight: 500; }
.education_list_tab h2:nth-child(1):after { content:'';width:2px;height:16px;background-color:#dfe1e3;display: inline-block;margin: 0px 12px 0px 15px; }
.education_list_tab .title_text { text-align: center;padding-bottom: 50px; }
.education_list_tab .title_text p.sub-title {
font-size: 14px;
line-height: 1.8;
letter-spacing: -0.03em;
color:#878791;
margin-bottom: 0px;
margin-top: 23px;
word-break: keep-all;
font-weight: 400;
}
.education_list #review_event { padding:70px 0; min-height:auto; }
.education_list #review_event .review_title { text-align: center; padding-bottom: 70px; }
.education_list #review_event .review_title h2 { line-height: 42px; }
.education_list #review_event .review_title span { font-weight: 300; }
.education_list #review_event .review_list .re_id { margin:0; display: flex; line-height: normal;font-weight: 400; }
.education_list #review_event .review_list .re_name { }
.education_list #review_event .review_list .re_edu_name { display:block;color:#b1b3b7; padding-right:15px; }
.education_video_list .video-card-box { max-width: 990px; margin:auto; padding-bottom: 70px; }
.education_video_list .card-list { display:flex; flex-wrap: wrap; }
.education_video_list .item {
max-width:300px;
width:100%;
border:1px solid #e7e7e7;
margin-right:30px;
margin-top:30px;
border-radius: 5px;
overflow: hidden;
}
.education_list .card-list .card:nth-child(-n+3),
.education_video_list .item:nth-child(-n+3) { margin-top:0; }
.education_video_list .item:nth-child(3n) {margin-right:0px;}
.education_video_list .item img { max-width: 100%; }
.education_video_list .item .video-content { margin-bottom: 0; }
.education_video_list + .video-frame .blueimp-gallery { z-index: 10000001 !important; }
.education_list #review_event .review_list .swp-none-box {
width:25%;
position:absolute;
top:0px;
background-color:rgba(243, 244, 249,0.8);
height:100%;
z-index:2;
}
@media only screen and (max-width:1199px) {
.education_list .card-list .card { width:293px; height:166px; }
.education_list .card-list .card .card-date { height: 42px; }
.education_list .card-list .card .card-title { font-size: 16px; top:30px; left:20px; line-height: 24px; }
.education_list .card-list .card .card-title span { font-size: 20px; }
.education_list .card-list .card .card-date { padding:0px 20px; }
.education_list .card-list .card .card-date svg { right:20px; }
.education_list #review_event .review_list .re_star { float: unset; }
.education_list #review_event .review_list .re_id { display:block;float: unset; }
.education_list #review_event .review_list .re_edu_name { padding-right:0;padding-top:14px; }
.education_video_list .item { max-width:293px;/*height:164px;*/ }
}
@media only screen and (max-width:991px) {
.education_list .card-list .card { width:calc(50% - 15px);margin-right:30px !important; max-width: 339px; height:192px; }
.education_list .card-list .card:nth-child(2n) { margin-right:0px !important; }
.education_list .card-list .card .card-date { height: 50px; }
.education_list .card-list .card .card-title { font-size: 19px;top:35px; left:23px;line-height: 29px; }
.education_list .card-list .card .card-title[data-pos="B"] { top:24px; }
.education_list .card-list .card .card-title span { font-size: 24px; }
.education_list .card-list .card .card-date { padding:0px 23px; }
.education_list .card-list .card .card-date svg { right:23px; }
.education_list #review_event { padding:70px 0px !important; }
.education_list_tab h2 { font-size: 20px; }
.education_video_list .item { max-width:339px;/*height:189px;*/margin-right:0px; }
.education_video_list .item:nth-child(2n+1) { margin-right:30px; }
.education_list .card-list .card:nth-child(3),
.education_video_list .item:nth-child(3) {margin-top:30px;}
.education_video_list + .video-frame .blueimp-gallery > .slides > .slide > .video-playing > iframe { height:400px; }
}
@media only screen and (max-width:767px) {
.education_list .card-list,
.education_video_list .card-list { justify-content: center; }
.education_list .card-list .card { width:100%; max-width:456px; margin-right:0px !important; height:258px; }
.education_list .card-list .card .card-date { height: 60px; }
.education_list .card-list .card .card-title { font-size: 25px; top:47px; left:31px; line-height: 39px; }
.education_list .card-list .card .card-title[data-pos="B"] { top:35px; }
.education_list .card-list .card .card-title[data-pos="B"] span.sub { margin-top:20px; }
.education_list .card-list .card .card-title span { font-size: 32px; }
.education_list .card-list .card .card-date { padding:0px 31px; }
.education_list .card-list .card .card-date svg { right:31px; }
.education_list #review_event { padding:80px 0px !important; }
.education_list #review_event .review_title span { display:block; }
.education_video_list .card-list { grid-template-columns: repeat(1, 1fr);}
.education_video_list .item { max-width:450px;/*height:251px;*/ margin-right:0px; }
.education_list .card-list .card:nth-child(2),
.education_video_list .item:nth-child(2) {margin-top:30px;}
.education_video_list .item:nth-child(2n+1) { margin-right:0px; }
}
@media only screen and (max-width:480px) {
.education_list .card-list .card { max-width:328px; height:186px; }
.education_list .card-list .card .card-date { height: 44px; }
.education_list .card-list .card .card-title { font-size: 20px;top:32px; left:22px;line-height: 30px; }
.education_list .card-list .card .card-title[data-pos="B"] { top:20px; }
.education_list .card-list .card .card-title[data-pos="B"] span.sub { margin-top:15px; }
.education_list .card-list .card .card-title span { font-size: 24px; }
.education_list .card-list .card .card-date { padding:0px 22px; }
.education_list .card-list .card .card-date svg { right:22px; }
.education_list #review_event { padding:100px 0px !important; }
.education_video_list .item { max-width:328px;/*height:183px;*/ }
}
.education_page.modal-open { overflow: hidden; }
.modal-dialog.guidePopup.education-modal { width:100% !important; max-width:1000px !important; }
.modal-dialog.guidePopup.education-modal .modal-content { padding:0px !important; overflow-y: auto !important; overflow-x: hidden !important; }
.modal-dialog.guidePopup.education-modal .modal-content button.close { position: absolute !important; top: 30px; right: 30px !important; fill: #212327 !important; }
.education_detail * { font-family: 'Noto Sans KR',sans-serif; color:#212327; line-height: normal; font-size: inherit; }
.education_detail { text-align: left !important; }
.education_detail b { font-weight: 700 !important; }
.education_detail p { margin:0px; letter-spacing: -0.28px; word-break: keep-all; }
.education_detail .edu_wrap { max-width:1000px; margin:auto; text-align: left; }
.education_detail .only-pc { display: block; }
.education_detail .not-pc { display: none; }
.education_detail .edu_head_wrap { height:300px;background-color:#eee;position: relative; }
.education_detail .edu_head_wrap .edu_head_img {
background-repeat:no-repeat;
background-size: cover;
background-position: center;
height: 100%;
}
.education_detail .edu_head_wrap .main-title {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding-left: 60px;
}
.education_detail .edu_head_wrap .main-title .sub {
color: #212327;
font-size: 22px;
position: relative;
font-weight: 700;
/* padding: 0px 3px;*/
}
.education_detail .edu_head_wrap .main-title .main { font-size: 36px; font-weight: 700;color: #212327; padding:0; }
.education_detail .edu_head_wrap .main-title .main span { color:#4789e7; font-weight: 700; }
.education_detail .edu_head_wrap .main-title .main + .sub { margin-top:20px; }
.education_detail .edu_head_wrap .main-title .main + .sub2 { font-size:18px; color:#696c71; }
.education_detail .edu_content { padding:0px 60px; font-size: 14px; display: flex;background-color:#fff; }
.education_detail .edu_content_left { padding-right: 60px; }
.education_detail .edu_content .edu_content_right { width:320px; flex-shrink: 0; }
.education_detail .edu_content .edu_tab { position: -webkit-sticky; position: sticky; top: 0px; background-color: #fff; z-index: 1; }
.education_detail .edu_content .edu_tab ul { display: flex; }
.education_detail .edu_content .edu_tab li {
flex:1;
text-align: center;
border-bottom: 1px solid #eceff4;
padding: 18px 0px;
font-weight: 500;
font-size: 15px;
color: #c2c2c2;
}
.education_detail .edu_content .edu_tab li.active { color:#212327;border-bottom: 2px solid #212327; }
.education_detail .edu_content .edu_tab li span.point { font-size: 8px; color:#e74747; padding-left:4px;letter-spacing: -0.16px; }
.education_detail .edu_content section p.point { font-size: 12px; color:#e74747;letter-spacing: -0.24px;margin-bottom: 2px; }
.education_detail .edu_content section { border-bottom: 1px solid #eceff4; }
.education_detail .edu_content section > div:not(.panel-group) { padding:48px 0px; }
.education_detail .edu_content section > div + div { border-top: 1px solid #eceff4; }
.education_detail .edu_content section:last-child { border-bottom: none; }
.education_detail .edu_content section .title { font-size: 22px; font-weight: 700 !important; margin-bottom: 22px !important; letter-spacing: -0.44px; word-break: keep-all; }
.education_detail .edu_content section .title.small { font-size: 18px; }
.education_detail .edu_content section .title i { color: #4789e7; font: unset; }
.education_detail .edu_content section .introduce { padding-bottom: 48px; }
.education_detail .edu_content section .content p { margin-bottom: 10px; line-height: 24px; }
.education_detail .edu_content section .content p:last-child { margin-bottom: 0px; }
.education_detail .edu_content section .content span.red { color: #e74747; }
.education_detail .edu_content section .content p svg { fill: #4789e7; margin-right: 4px; }
.education_detail .edu_content section div:not(.introduce) .content p { position: relative; padding-left: 20px; word-break: keep-all; }
.education_detail .edu_content section div:not(.introduce) .content p svg { position: absolute; top: 8px; left:0; }
.education_detail .edu_content section .teacher { display: flex; }
.education_detail .edu_content section .teacher .photo { width:130px; height:180px; background-color:#eee; margin-right: 20px; flex-shrink: 0;}
.education_detail .edu_content section .teacher .photo img { object-fit: cover; width: 100%; height: 100%; }
.education_detail .edu_content section .teacher .text { }
.education_detail .edu_content section .teacher p.text { font-size: 14px; }
.education_detail .edu_content section .teacher p.text.name { font-size: 13px; margin-top: 40px; }
.education_detail .edu_content section .teacher p.text span:not(.inline) { font-size: 14px; font-weight: 700; }
.education_detail .edu_content section #curriaccordion .panel { box-shadow: none; }
.education_detail .edu_content section #curriaccordion .panel-default,
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading,
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading + .panel-collapse .panel-body { border:none; }
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading {
background-color:#f3f4f9; border-radius: 10px; margin-top: 20px;
padding:0px; cursor: pointer;
}
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading > .panel-title {
padding:16px; font-size: 14px; position: relative;
}
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading > .panel-title svg {
position: absolute; right: 16px; fill: #000; transform: translateY(3px) rotate(180deg);
}
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading.collapsed > .panel-title svg {
transform: translateY(3px);
}
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading span.chapter { color:#4789e7; font-weight: 700; }
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading span.chapter:after {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background-color:#4789e7;
margin:0px 16px;
}
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading + .panel-collapse .panel-body { padding-left: 70px;padding-bottom: 0px; }
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading + .panel-collapse .panel-body p { margin-bottom: 12px; }
.education_detail .edu_content section #curriaccordion .panel-default > .panel-heading + .panel-collapse .panel-body p:last-child { margin-bottom: 0px; }
.education_detail .edu_content section#review .review-list li { margin-bottom: 30px; line-height: 22px; }
.education_detail .edu_content section#review .review-list p.review { font-size: 14px;letter-spacing: -0.28px; word-break: break-all; }
.education_detail .edu_content section#review .review-list p.name { font-size: 13px; color:#707070; letter-spacing: -0.3px; margin-top:12px; font-weight: 300; }
.education_detail .edu_content section#review .review-btn { background-color: #eceff4; font-size: 15px; text-align: center; padding: 13px 0px; }
.education_detail .edu_content section#review .review-list ul:last-child li:last-child { margin-bottom: 0px; }
.education_detail .edu_content .edu_content_right .sticky { position: -webkit-sticky; position: sticky; top: 24px;margin-top:24px; }
.education_detail .edu_content .btn-order { text-align: center; font-weight: 700; margin-bottom: 24px; padding: 14px 0px; }
.education_detail .edu_content .btn-order { background-color: #4789e7; color:#fff; font-size:18px; }
.education_detail .edu_content .btn-order.disabled { background-color: #8c8c8c; color:#ffffff; }
.education_detail .guide { }
.education_detail .guide ul.note { border:1px solid #eeeeee; padding:20px; }
.education_detail .guide ul.notice { padding:20px 7px 20px 20px; }
.education_detail .guide li.level span { color:#c8c8c8; }
.education_detail .guide li.level[data-level="1"] span.level1,
.education_detail .guide li.level[data-level="2"] span.level2,
.education_detail .guide li.level[data-level="3"] span.level3,
.education_detail .guide li.level[data-level="4"] span.level4 { color:#212327; }
.education_detail .guide li { margin-bottom: 4px;font-size: 16px; letter-spacing: -0.32px;position:relative;padding-left: 14px;word-break:keep-all; }
.education_detail .guide ul.notice li { font-size: 12px; color:#707070; font-weight: 300; letter-spacing: -0.2px; }
.education_detail .guide li:last-child { margin-bottom: 0px; }
.education_detail .guide li:before {
display: inline-block;
width: 4px;
height: 4px;
background-color: #000;
border-radius: 50%;
content: '';
position: absolute;
top:10px;
left:0;
}
.education_detail .guide ul.notice li:before {
background-color: #707070;
top:7px;
}
.education_detail .guide ul.notice li span { font-weight: 500; color:#e74747; }
.education_detail .inline-block,
.education_detail .inline { display: block; }
@media only screen and (max-width:991px) {
.education_detail .edu_head_wrap .main-title .main { font-size: 34px; }
.education_detail .edu_head_wrap .main-title .sub { font-size: 22px; }
.education_detail .edu_content .edu_content_right { width:254px; }
.education_detail .edu_content .edu_content_right .guide ul.note li { font-size: 15px; }
.education_detail .inline { display: inline; }
.education_detail .edu_content { padding:0px 40px; }
.education_detail .edu_content_left { padding-right: 40px; }
}
@media only screen and (max-width:768px) {
.education_detail .inline-block { display: inline-block; }
.education_detail .only-pc { display: none !important; }
.education_detail .not-pc { display: block !important; }
.education_detail .edu_wrap { background-color: #f3f4f9; }
.education_detail .edu_head_wrap { height:auto; margin-bottom: 12px; background-color:#fff; }
.education_detail .edu_head_wrap .edu_head_img { height:420px; }
.education_detail .edu_head_wrap .edu_head_m { padding: 28px 20px; }
.education_detail .edu_head_wrap .main-title {
position: relative;
transform: unset;
top: unset;
padding: 28px 20px 0px 20px;
}
.education_detail .edu_head_wrap .main-title .main { font-size: 20px; font-weight: 700; color: inherit; display: inline-block; }
.education_detail .edu_head_wrap .main-title .main span { color:inherit; }
.education_detail .edu_head_wrap .main-title .main + .sub { margin-top:0px; display: inline-block; margin-left: 5px;font-size: 20px; font-weight: 700; }
.education_detail .edu_head_wrap .main-title .sub { color: inherit;font-size: 14px;padding:0px; font-weight: normal; }
.education_detail .edu_head_wrap .edu_head_m .guide ul { border:none; padding:0px; }
.education_detail .edu_head_wrap .edu_head_m .guide ul.note li { font-size: 14px; }
.education_detail .edu_head_wrap .edu_head_m .guide ul.note { border-bottom: 1px solid #eceff4; padding-bottom: 20px; margin-bottom: 20px; }
.education_detail .edu_head_wrap .edu_head_m .guide ul.note li:before { top:9px; }
.education_detail .guide ul.notice li { font-size: 12px; color:#707070; font-weight: 300; letter-spacing: -0.2px; }
.education_detail .edu_content { display: block; padding:0px; padding-bottom: 100px; position: relative; }
.education_detail .edu_content_left { padding:0px; }
.education_detail .edu_content .edu_tab { border-top-right-radius: 20px; border-top-left-radius: 20px; }
.education_detail .edu_content .edu_tab ul { padding:0px 20px; }
.education_detail .edu_content .edu_tab:after { content:''; display:block; border-bottom: 1px solid #eceff4;position: absolute; bottom: 0px; width: 100%; z-index: -1; }
.education_detail .edu_content .edu_tab li { font-size:14px;padding: 12px 0px; }
.education_detail .edu_content .edu_section { padding: 0px 20px; }
.education_detail .edu_content section p.title span > span { color: #4789e7; display: inline-block; }
.education_detail .edu_content section .teacher { display: block; }
.education_detail .edu_content section .teacher .photo {
width: 100%;
padding-top: 66%;
position: relative;
overflow: hidden;
}
.education_detail .edu_content section .teacher .photo img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.education_detail .edu_content section .teacher .photo + div.text { margin-top:20px; }
.education_detail .edu_content section .teacher p.text.name { margin-top: 25px; }
.education_detail .edu_content .edu_content_right {
width:100%; border-top: 1px solid #eceff4; padding:0px 20px 28px;
position: absolute; background-color: #fff;
}
.education_detail .edu_content .edu_content_right.sticky { position: fixed; bottom: 0; z-index: 1; }
.education_detail .edu_content .edu_content_right .sticky { position: relative; top:0px; margin-top: 16px; }
.education_detail .edu_content .guide { display: none; }
.education_detail .edu_content .btn-order { font-size: 15px; margin-bottom: 0px; }
.education_detail .edu_head_wrap .main-title .main + .sub2 { font-size:14px; color:#212327; }
}
@media only screen and (max-width:414px) {
.education_detail .edu_content section p.title span { display: block; }
}
/*main header css -END*/
/* Main renew css -START **********************************************/
/* 0. Main 공통 css *****/
/* 1. Main 01 css *******/
/* 2. Main 02 css *******/
/* 3. Main 03 css *******/
/* 4. Main 04 css *******/
/* 5. Main 05 css *******/
/* 0. Main 공통 css ******/
body div[id$="Section"] {
width:100%;
position: relative;
font-family: 'Spoqa Han Sans';
float: left;
text-align: center;
}
body div[id$="Section"] h1,h2,h3 {margin:0;}
body div[id$="Section"] .container .row {margin:0 auto;}
body div[id$="Section"] * {font-family: 'Spoqa han sans';}
body div[id$="Section"] .section_left { float:left; width:50%; }
body div[id$="Section"] .section_right { float: right; width:50%;}
body div[id$="Section"] .section_btn_wrap {width:100%;}
body div[id$="Section"][data-lang="en"] .section_btn_wrap .section_btn {letter-spacing: normal;}
body div[id$="Section"] .section_btn_wrap .section_btn {
cursor: pointer;
width: 240px;
height: 60px;
border-radius: 100px;
box-shadow: 5px 5px 30px 0 rgba(195, 198, 214, 0.5);
color: #222428;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
font-size:15px;
letter-spacing: -0.45px;
}
body div[id$="Section"] .section_btn_wrap .section_btn:hover {background-color: #F9F9F9;}
body div[id="bsiteSection"] .section_btn_wrap .section_btn { display: inline-block; line-height: 60px; margin-top:50px; }
#videoSection {padding:100px 0 0 0;}
#videoSection[data-lang="en"] {padding:100px 0;}
#reviewSection,
#templateSection,
#functionSection,
#bsiteSection,
#qnaSection { padding:100px 0; color: #222428;}
#videoSection .section_header .title,
#reviewSection .title,
#templateSection .section_left .title,
#functionSection .section_header .title,
#bsiteSection .section_header .title,
#qnaSection .section_header .title { font-size:52px; }
/* 1. Main 01 css ********/
/* 1-1. countUpSection *******/
.main01#countUpSection {
width:100%;
height: 937px;
background-color:#f3f4f9;
overflow: hidden;
display: flex;
justify-content: center;
}
.main01#countUpSection .container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.main01#countUpSection .countUpsection_lf {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
flex-grow: 1;
align-items: flex-start;
}
.main01#countUpSection .countUpsection_lf .intro_content {
font-weight:300;
letter-spacing: -0.72px;
color: #222428;
width: 100%;
text-align: left;;
max-width: 579px;
/* padding: 32% 0; */
font-size: 20px;
font-weight: 300;
}
.main01#countUpSection .countUpsection_lf .intro_content #countUpNumber0 {
display: inline-block;
padding: 0 6px;
font-size:28px;
font-weight: 600;
}
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text03 {
margin: 60px 0 40px 0;
font-size: 46px;
color:#222428;
font-weight:600;
line-height: 1.39;
}
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text04 {
font-size:16px;
line-height: 1.6;
margin-bottom: 100px;
font-weight: 300;
}
.main01#countUpSection .countUpsection_rt {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
flex-wrap: wrap;
max-width: 479px;
width: 100%;
}
.main01#countUpSection .countUpsection_rt img { width: 100%; max-width: 494px; margin: 0; margin-bottom: 6px;}
.main01#countUpSection .countUpsection_rt img:last-child {margin-bottom: 0;}
.main01#countUpSection ~ footer#cl-footer {float: left; width:100%;}
@keyframes sectionFadeInUp {
0% {
opacity: 0;
transform: translate3d(0,65%, 0);
/* transform: translateY(20px); */
}
to {
opacity: 1;
transform: translateZ(0);
}
}
/* @keyframes sectionFadeInUp4 {
0% {
opacity: 0;
transform: translate3d(0,85%, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
} */
@keyframes sectionFadeInUpMain01_4 {
0% {
opacity: 0;
transform: translate3d(0,40%, 0);
/* transform: translateY(20px); */
}
to {
opacity: 1;
/* transform: rotate(1deg) translateZ(0); */
transform: translateZ(0);
}
}
.mainBlockAni .block_img {box-shadow: 8px 8px 10px 1px #d9d9e1;}
.mainBlockAni .block_img:not(.num1) {
opacity: 0;
position: relative;
animation-duration: .7s;
animation-name: sectionFadeInUp;
animation-timing-function: cubic-bezier(0,.59,.3,1);
animation-fill-mode: forwards;
}
.main01.mainBlockAni .block_img.num4 {animation-delay: 1s; animation-name:sectionFadeInUpMain01_4; animation-duration: 1s;}
/* .main01.mainBlockAni .block_img.num5 {animation-delay: 1.2s; animation-name:sectionFadeInUpMain01_5; animation-duration: 1s;} */
.main01.mainBlockAni .num2 {animation-delay: .3s; }
.main01.mainBlockAni .num3 {animation-delay: .6s; }
/* .main01.mainBlockAni .num4 {animation-delay: .8s;} */
/* 2. Main 02 css ********/
/* 1-1. section 01 *******/
.main02#mainSection {
background-image: url(https://storage.googleapis.com/i.addblock.net/main/section02_bg.jpg);
background-repeat: no-repeat;
background-position: center 0;
width: 100%;
height: 820px;
overflow: hidden;
display: flex;
justify-content: center;
position: relative;
}
.main02#mainSection .container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.main02#mainSection .mainSection_lf {
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-start;
flex-grow: 1;
align-items: flex-start;
font-weight: 300;
letter-spacing: -0.72px;
color: #ffffff;
width: 100%;
text-align: left;
padding-top: 122px;
}
.main02#mainSection .mainSection_lf .mainSection_text02 {
display: flex;
max-width: 490px;
width: 100%;
justify-content: space-between;
/* opacity:0; */
}
.main02#mainSection .text02_lf,
.main02#mainSection .text02_rt {
display: flex;
flex-direction: column;
}
.main02#mainSection[data-lang="en"] .counter_unit {display:none;}
.main02#mainSection .mainSection_lf .mainSection_text03 {
display: flex;
margin-top: 30px;
line-height: 1.39;
/* opacity:0; */
}
.main02#mainSection .mainSection_lf .mainSection_text01 {
position:relative;
width: 100%;
font-size: 45px;
font-weight: 600;
line-height: 1.42;
letter-spacing: normal;
text-align: left;
margin-bottom: 40px;
/* opacity:0; */
}
.main02#mainSection .mainSection_text01 .mainSection-text {float: left;}
.main02#mainSection .mainSection_lf .mainSection_title {color:#c8c8c8; margin-bottom: 10px;font-size:16px;}
.main02#mainSection[data-lang="en"] .mainSection_lf .mainSection_title,
.main02#mainSection[data-lang="en"] .section_btn,
.main02#mainSection .mainSection_lf .mainSection_title {
letter-spacing: normal;
}
.main02#mainSection[data-lang="en"] .section_btn {letter-spacing: normal;}
.main02#mainSection .section_btn {
color:#212327;
letter-spacing: -0.45px;
font-weight: 300;
font-size:15px;
margin-bottom: 0;
}
.main02#mainSection .mainSection_lf .mainSection_content {
color:#ffffff;
font-size: 40px;
font-weight: 600;
letter-spacing: -1.2px;
line-height:1.2;
}
.main02#mainSection .mainSection_rt {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
flex-wrap: wrap;
max-width: 415px;
width: 100%;
/* margin-top:-2%; */
}
.main02#mainSection .mainSection_rt img { width: 100%; max-width: 415px; margin: 0; /* opacity:0; */}
.main02#mainSection .mainSection_rt .num1,
.main02#mainSection .mainSection_rt .num2,
.main02#mainSection .mainSection_rt .num3,
.main02#mainSection .mainSection_rt .num4,
.main02#mainSection .mainSection_rt .num5 {margin-bottom: 2px;}
.main02#mainSection[data-lang="ko"] .mainSection_text01 .mainSection_text01_01 {float: left; margin-right:15px;}
.main02#mainSection .mainSection_text01 .mainSection_stType_wrap {
/* perspective: 1000px; */
position: relative;
height: 64px;
float: left;
width: calc(100% - 375px);
}
.main02#mainSection .mainSection_text01 .mainSection_stType {
backface-visibility: hidden;
overflow: hidden;
position: absolute;
transition: top .6s cubic-bezier(0.25, 1, 0.5, 1), transform .6s cubic-bezier(0.25, 1, 0.5, 1);
transform-origin: 50% 0;
transform-style: preserve-3d;
top: 0%;
bottom: inherit;
transform: rotateX(90deg);
opacity: 1;
}
.main02#mainSection .mainSection_text01 .mainSection_stType.active {
top: 0;
bottom: inherit;
transform: rotateX(0);
opacity: 1;
}
.main02#mainSection .mainSection_text01 .mainSection_stType.next {
top: 100%;
transform: rotateX(-90deg);
opacity: 0;
}
@keyframes sectionFadeInUpMain02 {
0% {
opacity: 0;
transform: translate3d(0,150%, 0);
/* transform: translateY(20px); */
}
to {
opacity: 1;
transform: translateZ(0);
}
}
@keyframes sectionFadeInUpMain02_3 {
0% {
opacity: 0;
transform: translate3d(0,250%, 0);
/* transform: translateY(20px); */
}
to {
opacity: 1;
transform: translateZ(0);
}
}
@keyframes sectionFadeInUpMain02_4 {
0% {
opacity: 0;
transform: translate3d(0,70%, 0);
/* transform: translateY(20px); */
}
to {
opacity: 1;
transform: translateZ(0);
}
}
@keyframes sectionFadeInUpMain02_5 {
0% {
opacity: 0;
transform: translate3d(0,70%, 0);
/* transform: translateY(20px); */
}
to {
opacity: 1;
transform: translateZ(0);
}
}
@keyframes sectionFadeInUpMain02_6 {
0% {
opacity: 0;
transform: translate3d(0,70%, 0);
/* transform: translateY(20px); */
}
to {
opacity: 1;
/* transform: rotate(1deg) translateZ(0); */
}
}
.main02.mainBlockAni .num2 {animation-delay: .7s; animation-duration: .7s;}
.main02.mainBlockAni .num3 {animation-delay: .8s; animation-duration: .2s;}
.main02.mainBlockAni .num4 {animation-delay: 1.1s; animation-duration: 1s;}
/* .main02.mainBlockAni .num5 {animation-delay: 1.1s; animation-duration: 1s;} */
.main02.mainBlockAni .block_img.num3 {animation-name: sectionFadeInUpMain02_3 !important;}
.main02.mainBlockAni .block_img.num4 {animation-name: sectionFadeInUpMain02_4 !important;}
/* .main02.mainBlockAni .block_img.num5 {animation-name: sectionFadeInUpMain02_5 !important;}
.main02.mainBlockAni .block_img.num6 {animation-delay: 1.1s; animation-name:sectionFadeInUpMain02_6; animation-duration: 1s;} */
.main02.mainBlockAni .block_img:not(.num1) {
opacity: 0;
position: relative;
animation-duration: .7s;
animation-name: sectionFadeInUpMain02;
/* animation-timing-function:cubic-bezier(.41,.01,.57,1); */
animation-timing-function:cubic-bezier(.41,.01,.22,.99);
animation-fill-mode: forwards;
}
.main02#mainSection .mainSection_rt .block_img {
box-shadow: none;
}
.main02#mainSection .section_btn_wrap {margin-top:170px;/* opacity: 0; */}
.main02#mainSection .mainSection_lf .section_btn_wrap .mainSection_title {color:#ffffff; font-size: 24px;}
.main02#mainSection .section_btn {margin-top:20px; box-shadow: none;}
/* 0-1. videoSection *******/
#videoSection {
background-color: #ffffff;
/* min-height: initial;
background-image: url(//storage.googleapis.com/i.addblock.net/intro/intro_service_video_img2.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center 0; */
}
#videoSection .section_header .title {
font-weight:600;
margin-bottom: 40px;
letter-spacing: -1.04px;
line-height: 1.3;
}
#videoSection .section_header .subtitle {font-weight:300; font-size: 16px; margin-bottom: 80px; letter-spacing: -0.4px; color:#222428;}
/* #videoSection .section_video .mvideoplay_btn,
#videoSection .section_video .mvideo_cover {display: none;} */
#videoSection .section_video {
position: relative;
top: unset;
left: unset;
right: unset;
bottom: unset;
width: 100%;
height: 100%;
max-height: 583px;
overflow: hidden;
}
#videoSection .section_video video.bgvid {
position: relative;
top: unset;
left:unset;
transform : unset;
-webkit-transform : unset;
-ms-transform : unset;
background-size : unset;
-webkit-background-size : unset;
background-position : unset;
width:100%;
height:100%;
}
/* 0-2. reviewSection *******/
#reviewSection { overflow: hidden;}
#reviewSection .title { font-weight: 600;}
#reviewSection .review_list_wrap {margin-top:80px;}
#reviewSection .review_list_wrap .re_list .re_bottom img { margin:0;}
#reviewSection .review_list_wrap .re_list .re_bottom {
width:100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#reviewSection .review_list_wrap .re_list {
font-weight: 300;
font-size: 16px;
width: 100%;
max-width: 452px;
height: 340px;
line-height: 1.5;
text-align: left;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
/* flex-grow: 1; */
align-items: center;
justify-content: space-between;
padding: 40px;
box-shadow: 5px 5px 20px 0 rgba(195, 198, 214, 0.5);
background-color:#ffffff;
border-radius: 20px;
margin-right:40px;
}
#reviewSection .review_list_wrap .re_list p.re_content {color:#222428;}
/* 0-3. section 04 *******/
#templateSection {
color:#222428;
background-color:#f3f4f9;
align-items: center;
display: flex;
height:858px;
}
#templateSection .section_left {
text-align: left;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-end;
padding-right: 104px;
width: 52.2%;
}
#templateSection .section_left .title,
#templateSection .section_left .subtitle,
#templateSection .section_left .section_btn_wrap {max-width: 493px; width: 100%;}
#templateSection .section_left .title {
line-height: 1.3;
letter-spacing: -1.04px;
margin-bottom: 40px;
font-weight: 600;
}
#templateSection .section_left .subtitle {
font-size:16px;
line-height: 1.6;
letter-spacing: -0.4px;
font-weight: 300;
margin-bottom: 100px;
}
#templateSection .section_right {
/* padding-left: 46px; */
height: 100%;
position: relative;
width: 47.8%;
margin-top:-3%;
display: flex;
justify-content: center;
align-items: center;
}
#templateSection .section_right [class^="bgShadow"] {
border-radius: 0 !important;
width: 20px !important;
background: linear-gradient(90deg, rgba(0,0,0,0.2) 16%, rgba(255,255,255,0) 100%);
opacity : 0.5;
}
#templateSection .section_right [class^='bgBlack'] {background-color: #000000;}
#templateSection .section_right [class^="bgShadow"],
#templateSection .section_right [class^='swiper-container'],
#templateSection .section_right [class^='bgBlack'] {
width: 100%;
overflow: hidden;
position: absolute;
left:0;
border-radius: 10px;
}
#templateSection .section_right .swiper-container0 {
width: 48%;
left:0;
max-height: 594px;
position: absolute;
/* top:0; */
z-index: 10;
}
#templateSection .section_right .swiper-container1,
#templateSection .section_right .bgBlack1,
#templateSection .section_right .bgShadow1 {
width: 38.55%;
max-height: 480px;
margin-left: 27.8%;
height: auto;
}
#templateSection .section_right .bgShadow1 {margin-left: 48%; z-index: 9;}
#templateSection .section_right .swiper-container1 {z-index: 8;}
#templateSection .section_right .bgBlack1 {z-index: 7;}
#templateSection .section_right .swiper-container2,
#templateSection .section_right .bgBlack2,
#templateSection .section_right .bgShadow2 {
width: 33.3%;
max-height: 414px;
margin-left: 44%;
z-index: 2;
height: auto;
}
#templateSection .section_right .bgShadow2 {z-index: 6; margin-left: 66.5%;}
#templateSection .section_right .swiper-container2 {z-index: 5;}
#templateSection .section_right .bgBlack2 {z-index: 4;}
#templateSection .section_right .swiper-container3,
#templateSection .section_right .bgBlack3,
#templateSection .section_right .bgShadow3 {
width: 28.02%;
max-height: 348px;
margin-left: 56.6%;
height: auto;
}
#templateSection .section_right .bgShadow3 {z-index: 3; margin-left: 77.5%;}
#templateSection .section_right .swiper-container3 { z-index: 2;}
#templateSection .section_right .bgBlack3 {z-index: 1;}
#templateSection .section_right .swiper-container1 {opacity: 0.7;}
#templateSection .section_right .swiper-container2 {opacity: 0.5;}
#templateSection .section_right .swiper-container3 {opacity: 0.3;}
#templateSection .section_right .swiper-container .swiper-wrapper .swiper-slide { width: 100%; }
#templateSection .section_right [class^='swiper-container'] .swiper-wrapper .swiper-slide img { width: 100%; margin-right:-1px; }
#templateSection .section_right .swiper-pagination {
width: 84.6%;
border-radius: 0;
background-color:#ffffff;
height:4px;
opacity:1;
margin: 0;
left: 0;
bottom: -28px;
}
#templateSection .section_right .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color:#B7BAC8;}
/* 0-4. functionSection *******/
#functionSection { background-color:#ffffff; align-items: flex-start;display: flex;}
#functionSection .container .row {display: flex; flex-direction: column;}
#functionSection .section_header .title {
font-weight:600;
margin-bottom: 80px;
letter-spacing: -1.5px;
line-height: 1.3;
}
#functionSection .function_wrap {margin-bottom: 80px;}
#functionSection .function_wrap .function_nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#functionSection .function_wrap,
#functionSection .function_wrap .function_nav { width: 100%; float: left; }
#functionSection .function_wrap .function_nav li:not(:last-child) { margin-right:18px;}
#functionSection .function_wrap .function_nav li.active { background-color:#4789e7; color:#fff; font-weight: 600;}
#functionSection .function_wrap .function_nav li:hover:not(.active) {background-color: #EAEDF0;}
#functionSection .function_wrap .function_nav li {
width: auto;
padding: 12px 27px;
height: 48px;
background-color: #f8f8f8;
color: #8e9095;
letter-spacing: -0.48px;
font-size: 16px;
border-radius: 30px;
float: left;
}
#functionSection .function_wrap .contents_wrap {
float: left;
width: 100%;
margin-top:20px;
display: flex;
justify-content: space-between;
}
#functionSection .function_wrap .contents_box {
color: #222428;
width: 100%;
max-width: 474px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding-right:123px;
padding-top: 48px;
text-align: left;
}
#functionSection .function_wrap .contents_box .contents_title {
font-size:32px;
font-weight: 500;
letter-spacing: -1.08px;
line-height: 1;
margin-bottom: 40px;
}
#functionSection .function_wrap .contents_box .contents_text {
font-size:16px;
font-weight: 300;
letter-spacing: -0.4px;
text-align: left;
line-height: 1.6;
}
#functionSection .function_wrap .contents_image {margin: 0;}
#functionSection .function_wrap .contents_image img {width:620px;}
#functionSection .section_btn_wrap {display: flex; justify-content: center; }
/* 0-4. bsiteSection *******/
#bsiteSection { background-color:#f3f4f9; position: relative; overflow: hidden;}
#bsiteSection .section_header .title {
font-weight:600;
margin-bottom: 80px;
letter-spacing: normal;
line-height: 1.3;
width: 100%;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
#bsiteSection .section_wrap,
#bsiteSection .section_wrap .bsite-nav,
#bsiteSection .section_wrap .bsite-wapper {float:left; width:100%; position: relative;}
#bsiteSection .section_wrap .bsite-nav { display: flex; justify-content: center; margin-bottom: 50px;}
#bsiteSection .section_wrap .bsite-nav .bsite-navlist:last-child {margin-right: 0;}
#bsiteSection .section_wrap .bsite-nav .bsite-navlist {
margin: 0 40px 0 0;
color: #8e9095;
font-size: 20px;
letter-spacing: normal;
position: relative;
padding: 5px 0 14px 0;
}
#bsiteSection .section_wrap .bsite-nav .bsite-navlist.active { color: #222428; font-weight: 600; }
#bsiteSection .section_wrap .bsite-nav .bsite-navlist:hover {color:#222428;}
#bsiteSection .section_wrap .bsite-nav .bsite-navlist.active:after {
content: '';
width: 100%;
height: 3px;
background-color: #222428;
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
}
#bsiteSection .section_wrap .bsite-box {transition-timing-function: linear;}
#bsiteSection .section_wrap .bsite-wrap .bsite-item {width:100% !important; max-width: 420px; height:270px; margin-right:40px;}
#bsiteSection .section_wrap .bsite-wrap [class^="bsite-box"]:not(:last-child) {margin-bottom: 60px;}
#bsiteSection .section_wrap .bsite-wrap .bsite-item:not(:nth-child(5n)) { margin-right: 40px;}
#bsiteSection .section_wrap .bsite-wrap {float: left; width:100%;}
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload [class^="bsite-box"] {
float: left;
width: 130%;
display: flex;
flex-wrap: wrap;
}
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload .bsite-item { width: 100%; max-width: 420px;}
/* 0-6. qnaSection *******/
#qnaSection { background-color:#ffffff; position: relative; }
#qnaSection .section_header .title {
line-height: 1.31;
letter-spacing: -1.5px;
font-weight: 600;
color:#222428;
}
#qnaSection .container {margin-top: 60px;}
#qnaSection .qna-title-text {width:calc(100% - 5px);}
#qnaSection .qna_wrap {
width:100%;
font-size: 24px;
text-align: left;
}
#qnaSection .qna_wrap .qna-q .panel-title a {display: flex; justify-content: space-between; align-items: center;}
#qnaSection .qna_wrap .qna-q {background-color: #ffffff; border: none; padding: 20px 0;}
#qnaSection .qna_wrap .qna-q svg {fill: #222428; }
#qnaSection .qna_wrap .qna-q .panel-title {
font-size: 24px;
color: #222428;
letter-spacing: -0.72px;
font-weight: 300;
}
#qnaSection .qna_wrap .panel .qna-q svg {
-webkit-transition: ease-in-out 0.3s;
-moz-transition: ease-in-out 0.3s;
-o-transition: ease-in-out 0.3s;
-ms-transition: ease-in-out 0.3s;
transition: ease-in-out 0.3s;
}
#qnaSection .qna_wrap .panel.active .qna-q .panel-title { color:#4789e7; }
#qnaSection .qna_wrap .panel.active .qna-q svg {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#qnaSection .qna_wrap .qna-a {
font-size:16px;
color:#222428;
letter-spacing: -0.48px;
font-weight: 300;
}
#qnaSection .qna_wrap .panel {
border: none;
border-bottom: 1px solid #cbcbce;
box-shadow: none;
margin: 0;
}
#qnaSection .qna_wrap .panel-default > .panel-heading + .panel-collapse .panel-body {padding:0 0 20px 0;}
#qnaSection .section_btn_wrap { margin-top: 40px; display: flex; justify-content: center;}
#qnaSection .section_btn_wrap .section_btn_detail {
font-size:18px;
color:#212327;
position: relative;
font-weight: 300;
}
#qnaSection .section_btn_wrap .section_btn_detail:hover {color:#4789e7;}
#qnaSection .section_btn_wrap .section_btn_detail:hover:after{
border-top: 1px solid #4789e7;
border-right: 1px solid #4789e7;
}
#qnaSection .section_btn_wrap .section_btn_detail:after {
content: '';
display: inline-block;
position: absolute;
top: 6px;
right: -15px;
width: 8px;
height: 8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}
@media only screen and (min-width: 1200px){
}
@media only screen and (max-width: 1199px){
/* 1. Main 01 css ********/
/* 0. Main 공통 css ******/
body div[id$="Section"] .container {width:912px;}
body div[id$="Section"] .section_btn_wrap .section_btn {width: 180px; height: 48px;}
#videoSection { padding:80px 0 0 0; }
#videoSection[data-lang="en"] {padding:80px 0;}
#reviewSection,
#templateSection,
#functionSection,
#bsiteSection,
#qnaSection { padding:80px 0; }
#videoSection .section_header .title,
#reviewSection .title,
#templateSection .section_left .title,
#functionSection .section_header .title,
#bsiteSection .section_header .title,
#qnaSection .section_header .title {font-size:38px;}
/* 0-1. countUpSection *******/
.main01#countUpSection { height:604px;}
.main01#countUpSection .countUpsection_rt {max-width: 344px;}
.main01#countUpSection .countUpsection_rt img {max-width: 344px;}
.main01#countUpSection .countUpsection_lf .intro_content {font-size:16px; max-width:458px;}
.main01#countUpSection .countUpsection_lf .intro_content #countUpNumber {font-size:24px;}
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text03 {font-size:36px; margin:40px 0 60px 0; }
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text04 {display: none;}
/* 0-2. videoSection *******/
#videoSection .section_header .title {}
#videoSection .section_video iframe {height:455px;}
#videoSection .section_header .subtitle {margin-bottom: 60px; font-size:14px; line-height: 1.71;}
/* 0-3. section 03 *******/
#reviewSection .title {line-height:1.47;}
/* 0-4. templateSection *******/
#templateSection {flex-direction: column; height:1120px;}
#templateSection .section_left .title {line-height: 1.47;}
#templateSection[data-lang="en"] .section_left .title,
#templateSection[data-lang="en"] .section_left .subtitle{
max-width: 912px;
}
#templateSection .section_left,
#templateSection .section_right { max-width: 719px; width: 100%;}
#templateSection .section_right {height:62%; padding-bottom:27px; margin-top: 0;}
#templateSection .section_left {
float: none;
text-align: center;
padding: 0;
align-items: center;
}
#templateSection .section_left .subtitle {margin-bottom: 60px; font-size:14px;}
#templateSection .section_btn_wrap { display: flex; justify-content: center; margin-top:96px;}
#templateSection .section_right .swiper-pagination {bottom:-17px; width:100%;}
#templateSection .section_right .swiper-container0 {width: 56.8%; max-height: 555px;}
#templateSection .section_right .swiper-container1,
#templateSection .section_right .bgBlack1,
#templateSection .section_right .bgShadow1 { margin-left: 32.85%; width:45.65%; max-height: 448px; }
#templateSection .section_right .swiper-container2,
#templateSection .section_right .bgBlack2,
#templateSection .section_right .bgShadow2 { margin-left: 52.05%; width: 39.37%; max-height: 388px; }
#templateSection .section_right .swiper-container3,
#templateSection .section_right .bgBlack3,
#templateSection .section_right .bgShadow3 { margin-left: 66.9%; width: 33.12%; max-height: 326px; }
#templateSection .section_right .bgShadow1 {margin-left: 56.8%;}
#templateSection .section_right .bgShadow2 {margin-left: 78.5%;}
#templateSection .section_right .bgShadow3 {margin-left: 91.4%;}
#templateSection .section_btn_wrap .section_btn {width: 240px; height: 60px;}
/* 0-5. functionSection *******/
#functionSection .section_header .title {margin-bottom: 60px; line-height: 1.47;}
#functionSection[data-lang="en"] .function_wrap .function_nav {justify-content: flex-start;}
#functionSection .function_wrap .function_nav li {width: 100%; max-width: 294px;}
#functionSection .function_wrap .function_nav li:nth-child(n+4) {margin-top: 16px;}
#functionSection .function_wrap .function_nav li:not(:last-child) {margin-right:15px;}
#functionSection .function_wrap .function_nav li:nth-child(3n) {margin-right: 0;}
#functionSection .function_wrap .contents_wrap {margin-top: 30px;}
#functionSection .function_wrap .contents_box {max-width: 456px; padding-top: 30px; padding-right:0px;}
#functionSection .function_wrap .contents_box .contents_text {font-size:14px; line-height: 1.7;}
#functionSection .section_btn_wrap .section_btn {width: 240px; height: 60px;}
#functionSection .function_wrap .contents_image img {width:456px;}
#functionSection .function_wrap .contents_box .contents_title {font-size:28px;}
/* 0-6. bsiteSection *******/
#bsiteSection .section_header .title {margin-bottom: 60px; line-height: 1.47; max-width: 912px;}
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload [class^="bsite-box"] {width:230%;}
#bsiteSection .section_wrap .bsite-wrap .bsite-item:not(:nth-child(5n)) {margin-right: 28px; overflow: hidden;}
#bsiteSection .section_wrap .bsite-wrap [class^="bsite-box"]:not(:last-child) {margin-bottom: 28px; }
#bsiteSection .section_wrap .bsite-wrap .bsite-item {max-width: 353px; height:226px;}
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload .bsite-item {max-width: 353px;}
#bsiteSection .section_btn_wrap .section_btn {width: 240px; height: 60px;}
/* 0-7. qnaSection *******/
#qnaSection .section_header .title {line-height: 1.47;}
#qnaSection .qna_wrap {max-width:100%;}
#qnaSection .qna_wrap .qna-a {font-size:14px;}
#qnaSection .section_btn_wrap .section_btn {width: 240px; height: 60px;}
#qnaSection .section_btn_wrap .section_btn_detail {font-size:16px;}
/* 2. Main 02 css ********/
.main02#mainSection .container {justify-content: space-between;}
.main02#mainSection .mainSection_lf .mainSection_text01 {
font-size:45px;
margin-bottom: 40px;
line-height: 1.42;
max-width: 487px;
}
.main02#mainSection .mainSection_lf {height: 100%; margin-top:0; padding-top: 0px; justify-content: center;}
.main02#mainSection .mainSection_text01 .mainSection_text01_01 {float: none;}
.main02#mainSection .mainSection_text01 .mainSection_stType_wrap {width:100%;}
.main02#mainSection .mainSection_lf .mainSection_content {font-size:40px;}
.main02#mainSection .mainSection_lf .mainSection_text02 {max-width: 440px;}
.main02#mainSection .mainSection_lf .mainSection_title {margin-bottom: 12px; font-size:16px;}
.main02#mainSection .section_btn_wrap {margin-top: 120px;}
.main02#mainSection .mainSection_lf .mainSection_text03 {margin-top: 20px;}
.main02#mainSection .mainSection_lf .section_btn_wrap .mainSection_title {margin-bottom: 24px;}
/* .main02#mainSection .mainSection_rt {margin-top:-12%;} */
.main02#mainSection .mainSection_rt,
.main02#mainSection .mainSection_rt img {max-width: 375px;}
.main02#mainSection .section_btn_wrap .section_btn {width: 240px; height: 60px; margin-top: 24px; font-size:14px;}
}
@media only screen and (max-width: 991px){
/* 1. Main 01 css ********/
/* 0. Main 공통 css ******/
body div[id$="Section"] .container {width:704px;}
#videoSection .section_header .title,
#reviewSection .title,
#templateSection .section_left .title,
#functionSection .section_header .title,
#bsiteSection .section_header .title,
#qnaSection .section_header .title {font-size:32px;}
/* 1-1. countUpSection *******/
.main01#countUpSection {height:477px;}
.main01#countUpSection .countUpsection_rt {max-width: 254px;}
.main01#countUpSection .countUpsection_rt img {max-width: 254px;}
.main01#countUpSection .countUpsection_lf .intro_content {font-size:13px; max-width:372px;}
.main01#countUpSection .countUpsection_lf .intro_content #countUpNumber {font-size:18px;}
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text03 {font-size:26px; margin:40px 0 60px 0; line-height: 1.43;}
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text04 {display: none;}
/* 1-2. videoSection *******/
#videoSection .section_header .title {line-height: 1.47;}
#videoSection .section_video iframe {height:351px;}
#videoSection .section_header .subtitle {margin-bottom: 60px; font-size:14px;}
/* 0-3. reviewSection *******/
#reviewSection .review_list_wrap {margin-top:63px;}
/* 0-4. templateSection *******/
#templateSection {flex-direction: column; height:967px;}
#templateSection .section_left .title {line-height: 1.47;}
#templateSection[data-lang="en"] .section_left .title,
#templateSection[data-lang="en"] .section_left .subtitle{
max-width: 704px;
}
#templateSection .section_left,
#templateSection .section_right { max-width: 552px; width: 100%;}
#templateSection .section_right {height:60%; padding-bottom:52px; margin-top: 0; }
#templateSection .section_left {
float: none;
text-align: center;
padding: 0;
align-items: center;
}
#templateSection .section_right [class^='swiper-container'] .swiper-wrapper .swiper-slide img {height:100%;}
#templateSection .section_left .subtitle {margin-bottom: 60px; font-size:14px;}
#templateSection .section_btn_wrap { display: flex; justify-content: center; margin-top:60px;}
#templateSection .section_right .swiper-pagination {bottom:0; width:100%;}
#templateSection .section_right .swiper-container0 {width: 56.71%; max-height: 426px; height:100%;}
#templateSection .section_right .swiper-container1,
#templateSection .section_right .bgBlack1,
#templateSection .section_right .bgShadow1 { margin-left: 33%; width:45.5%; max-height: 345px; height:100%;}
#templateSection .section_right .swiper-container2,
#templateSection .section_right .bgBlack2,
#templateSection .section_right .bgShadow2 { margin-left: 52%; width: 39.5%; max-height: 295px; height:100%;}
#templateSection .section_right .swiper-container3,
#templateSection .section_right .bgBlack3,
#templateSection .section_right .bgShadow3 { margin-left: 67.05%; width: 32.98%; max-height: 249px; height:100%;}
#templateSection .section_right .bgShadow1 {margin-left: 56.7%;}
#templateSection .section_right .bgShadow2 {margin-left: 78.6%;}
#templateSection .section_right .bgShadow3 {margin-left: 91.5%;}
#templateSection .section_btn_wrap .section_btn {width: 240px; height: 60px;}
/* 0-5. functionSection *******/
#functionSection .section_header .title {margin-bottom: 60px; line-height: 1.47;}
#functionSection .function_wrap .function_nav li {width: 100%; max-width: 224px;}
#functionSection[data-lang="en"] .function_wrap .function_nav li {padding:0; display: flex; justify-content: center; align-items:center;}
#functionSection .function_wrap .function_nav li:nth-child(3n) {margin-right: 0;}
#functionSection .function_wrap .contents_wrap {margin-top: 30px;}
#functionSection .function_wrap .contents_box {max-width: 288px; padding-top: 30px; padding-right:0px;}
#functionSection .function_wrap .contents_box .contents_text {font-size:14px; line-height: 1.7;}
#functionSection .section_btn_wrap .section_btn {width: 240px; height: 60px;}
#functionSection .function_wrap .contents_image img {width:410px;}
#functionSection .function_wrap .contents_box .contents_title {font-size:24px;}
/* 0-6. bsiteSection *******/
#bsiteSection .section_header .title {margin-bottom: 60px; line-height: 1.47; max-width: 704px;}
#bsiteSection .section_wrap .bsite-nav {margin-bottom: 60px;;}
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload [class^="bsite-box"] {width:230%;}
#bsiteSection .section_wrap .bsite-wrap .bsite-item:not(:nth-child(5n)) {margin-right: 28px; overflow: hidden;}
#bsiteSection .section_wrap .bsite-wrap [class^="bsite-box"]:not(:last-child) {margin-bottom: 28px; }
#bsiteSection .section_wrap .bsite-wrap .bsite-item {max-width: 353px; height:226px;}
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload .bsite-item {max-width: 353px;}
/* 0-7. qnaSection *******/
#qnaSection .section_header .title {line-height: 1.47;}
#qnaSection .qna_wrap {max-width:100%;}
#qnaSection .qna_wrap .qna-a {font-size:14px;}
#qnaSection .section_btn_wrap .section_btn {width: 240px; height: 60px;}
/* 2. Main 02 css ********/
.main02#mainSection .mainSection_lf .mainSection_text01 {
font-size:36px;
line-height: 1.39;
max-width: 390px;
}
.main02#mainSection .section_btn {font-size:14px;}
.main02#mainSection .text02_lf {margin-bottom: 40px;}
.main02#mainSection .mainSection_text01 .mainSection_stType_wrap {height:50px;}
.main02#mainSection .mainSection_lf .mainSection_content {font-size:36px;}
.main02#mainSection .mainSection_lf .mainSection_text02 {max-width: 400px; flex-direction: column;}
.main02#mainSection .text02_lf, .main02#mainSection .text02_rt {flex: auto}
.main02#mainSection .mainSection_rt, .main02#mainSection .mainSection_rt img {max-width: 300px;}
.main02#mainSection .mainSection_rt {margin-top:-31%;}
/* .main02#mainSection .section_btn_wrap {margin-top: 120px;} */
.main02#mainSection .section_btn_wrap .section_btn {width: 240px; height: 60px; margin-top: 20px;}
}
@media only screen and (max-width: 767px){
/* 1. Main 01 css ********/
/* 0. Main 공통 css ******/
body div[id$="Section"] .container {width:448px;}
body div[id$="Section"] .section_btn_wrap .section_btn {font-size:14px;}
#videoSection { padding:70px 0 0 0; }
#videoSection[data-lang="en"] {padding:70px 0;}
#reviewSection,
#templateSection,
#functionSection,
#bsiteSection,
#qnaSection { padding:70px 0; }
#videoSection .section_header .title,
#reviewSection .title,
#templateSection .section_left .title,
#functionSection .section_header .title,
#bsiteSection .section_header .title,
#qnaSection .section_header .title {font-size:28px;}
/* 1-1. countUpSection *******/
.main01#countUpSection { height: 903px; padding-top: 40px; display: inline-block; padding-bottom: 80px; }
.main01#countUpSection .container {flex-direction: column-reverse;}
.main01#countUpSection .countUpsection_lf { justify-content: flex-start; padding-bottom: 0;}
.main01#countUpSection .countUpsection_rt {max-width: 280px; }
.main01#countUpSection .countUpsection_rt img {max-width: 344px; margin-bottom: 5px !important;}
.main01#countUpSection .countUpsection_rt img:last-child {margin-bottom: 0 !important;}
.main01#countUpSection[data-lang="en"] .countUpsection_lf .intro_content {max-width: 448px;}
.main01#countUpSection .countUpsection_lf .intro_content {
text-align: center;
font-size: 14px;
max-width: 328px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main01#countUpSection .countUpsection_lf .intro_content #countUpNumber0 {font-size:20px;}
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text02 {order: 2;}
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text03 {order: 1; font-size:40px; margin:40px 0 30px 0; line-height: 1.3; }
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text04 {display: none;}
.main01#countUpSection .countUpsection_lf .intro_content .section_btn_wrap {
order: 4;
display: flex;
justify-content: center;
margin-top: 40px;
}
/* .main01#countUpSection .countUpsection_rt .num1 {height: 18px;}
.main01#countUpSection .countUpsection_rt .num2 {height: 183px;}
.main01#countUpSection .countUpsection_rt .num3 {height: 47px;}
.main01#countUpSection .countUpsection_rt .num4 {height: 54px; }
.main01#countUpSection .countUpsection_rt .num5 {height: 96px; } */
/* 1-2. videoSection *******/
#videoSection .section_video iframe {height:252px;}
#videoSection .section_header .title {margin-bottom: 51px;}
#videoSection .section_header .subtitle {display: none;}
#videoSection .section_video { max-height: 205px; padding: 0 16px;}
/* 0-3. reviewSection *******/
#reviewSection .title {line-height: 1.3;}
#reviewSection .review_list_wrap {margin-top:63px;}
#reviewSection .review_list_wrap .re_list {
max-width: 300px;
height:416px;
margin-right: 20px;
padding:43px 24px;
}
#reviewSection .review_list_wrap .re_list p.re_content {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 12;
-webkit-box-orient: vertical;
}
#reviewSection .review_list_wrap .re_list .re_bottom .re_id {font-size: 14px;}
/* 0-4. templateSection *******/
#templateSection {flex-direction: column; height:816px;}
#templateSection .section_left,
#templateSection .section_right { max-width: 448px; width: 100%;}
#templateSection .section_right {
height: 100%;
padding-bottom: 0;
margin-top: 0;
max-height: 465px;
margin-bottom: 0;
}
.main01#templateSection .section_left {
float: none;
text-align: center;
padding: 0;
align-items: center;
}
#templateSection .section_left .title { margin-bottom: 50px;}
#templateSection .section_left .subtitle {display:none;}
#templateSection .section_btn_wrap {
display: flex;
justify-content: center;
margin-top: 0;
bottom: 70px;
position: absolute;
}
#templateSection .section_right .swiper-pagination {display:none;}
#templateSection .section_right .swiper-container0 {width: 76.5%; max-height: 464px;}
#templateSection .section_right .swiper-container1,
#templateSection .section_right .bgBlack1,
#templateSection .section_right .bgShadow1 { margin-left: 31.3%; width:61.2%; max-height: 377px; }
#templateSection .section_right .swiper-container2,
#templateSection .section_right .bgBlack2,
#templateSection .section_right .bgShadow2 { margin-left: 46.9%; width: 53.2%; max-height: 294px; }
#templateSection .section_right .swiper-container3,
#templateSection .section_right .bgBlack3,
#templateSection .section_right .bgShadow3 { display: none;}
#templateSection .section_right .bgShadow1 {margin-left: 76.5%;}
#templateSection .section_right .bgShadow2 {margin-left: 92.7%;}
#templateSection .section_btn_wrap .section_btn {width: 180px; height: 48px;}
/* 0-5. functionSection *******/
#functionSection .section_header .title {margin-bottom: 40px;}
#functionSection .function_wrap {margin-bottom:40px;}
#functionSection .function_wrap .function_nav li {
width: 100%;
height:45px;
max-width: 216px;
font-size:12px;
padding:12px 0;
}
#functionSection .function_wrap .function_nav li:nth-child(n+3) {margin-top: 8px;}
#functionSection .function_wrap .function_nav li:not(:last-child) {margin-right:16px;}
#functionSection .function_wrap .function_nav li:nth-child(2n) {margin-right: 0;}
#functionSection .function_wrap .contents_wrap {margin-top: 20px; flex-direction: column-reverse;}
#functionSection .function_wrap .contents_box {max-width: 100%; padding-top: 20px; padding-right:0px;}
#functionSection .function_wrap .contents_box .contents_text {font-size:13px; line-height: 1.7;}
#functionSection .section_btn_wrap .section_btn {width: 180px; height: 48px;}
#functionSection .function_wrap .contents_image img {width:448px;}
#functionSection .function_wrap .contents_box .contents_title {display: none;}
/* 0-6. bsiteSection *******/
#bsiteSection .section_wrap .bsite-nav .bsite-navlist {font-size: 18px; padding:5px 0 8px 0; margin: 0 20px 0 0;}
#bsiteSection .section_header .title {margin-bottom: 40px; max-width: 448px;}
#bsiteSection .section_wrap .bsite-nav {margin-bottom: 40px;;}
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload [class^="bsite-box"] {width:330%;}
#bsiteSection .section_wrap .bsite-wrap .bsite-item:not(:nth-child(5n)) {margin-right: 12px; overflow: hidden;}
#bsiteSection .section_wrap .bsite-wrap .bsite-item {max-width: 196px; height:124px;}
#bsiteSection .section_wrap .bsite-wrap [class^="bsite-box"]:not(:last-child) {margin-bottom: 13px; }
#bsiteSection .section_btn_wrap .section_btn { width:180px; height:48px; line-height: 48px; margin-top: 40px; }
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload .bsite-item {max-width: 196px;}
/* 0-7. qnaSection *******/
#qnaSection .container {margin-top:40px;}
#qnaSection .qna_wrap {max-width:100%;}
#qnaSection .section_btn_wrap {margin-top:40px;}
#qnaSection .qna_wrap .qna-q .panel-title {font-size:16px;}
#qnaSection .qna_wrap .qna-a {font-size:13px; letter-spacing: -0.39px;}
#qnaSection .section_btn_wrap .section_btn {width: 180px; height: 48px;}
#qnaSection .section_btn_wrap .section_btn_detail {font-size:15px;}
/* 2. Main 02 css ********/
.main02#mainSection {height:740px;}
.main02#mainSection .container {flex-direction: column;}
.main02#mainSection .mainSection_lf {
height: 100%;
margin-top: 0;
padding-top: 80px;
justify-content: flex-start;
}
.main02#mainSection .mainSection_lf .mainSection_text01 {line-height: 1.44; margin-bottom: 60px;}
.main02#mainSection .mainSection_lf .mainSection_title {font-size: 14px; margin-bottom: 7px;}
.main02#mainSection .section_btn_wrap {margin-top: 60px;}
.main02#mainSection .mainSection_lf .mainSection_content {font-size:40px;}
.main02#mainSection .mainSection_lf .mainSection_text02 { max-width: none; flex-direction: column;}
.main02#mainSection .text02_lf {margin-bottom: 30px;}
.main02#mainSection .mainSection_rt {display:none;}
.main02#mainSection .section_btn_wrap .section_btn {width: 180px; height: 48px; font-size:15px;}
.main02#mainSection .mainSection_lf .section_btn_wrap .mainSection_title {font-size:16px; margin-bottom: 20px;}
}
@media only screen and (max-width: 480px){
/* 1. Main 01 css ********/
/* 0. Main 공통 css ******/
body div[id$="Section"] .container {width:328px;}
body div[id$="Section"] .section_btn_wrap .section_btn {font-size:14px;}
#videoSection { padding:70px 0 0 0; }
#videoSection[data-lang="en"] {padding:70px 0;}
#reviewSection,
#templateSection,
#functionSection,
#bsiteSection,
#qnaSection { padding:70px 0; }
#videoSection .section_header .title,
#reviewSection .title,
#templateSection .section_left .title,
#functionSection .section_header .title,
#bsiteSection .section_header .title,
#qnaSection .section_header .title {font-size:22px;}
/* 1-1. countUpSection *******/
.main01#countUpSection { height: 725px; padding-top: 30px; padding-bottom: 70px;}
.main01#countUpSection .countUpsection_lf {flex: 1;}
.main01#countUpSection .countUpsection_rt {max-width: 210px;}
.main01#countUpSection .countUpsection_rt img {max-width: 236px;}
.main01#countUpSection .countUpsection_lf .intro_content {
max-width: 326px;
}
.main01#countUpSection .countUpsection_lf .intro_content #countUpNumber0 {font-size:20px;}
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text03 {order: 1; font-size:28px; margin:40px 0 30px 0; }
.main01#countUpSection .countUpsection_lf .intro_content .mainSection_text04 {display: none;}
.main01#countUpSection .countUpsection_lf .intro_content .section_btn_wrap {
order: 4;
display: flex;
justify-content: center;
margin-top: 30px;
/* margin-bottom: 70px; */
}
/* 1-2. videoSection *******/
#videoSection .section_video iframe {height:184px;}
#videoSection .section_header .title {margin-bottom: 40px; line-height: 1.45;}
#videoSection .section_header .subtitle {display: none;}
#videoSection .mvideoplay_btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
}
#videoSection .btn-box {
position: fixed;
width: 20px;
height:20px;
right: 15px;
top:15px;
padding:0;
z-index: 9999
}
#videoSection .btn-box svg {
position: fixed;
z-index: 9999;
fill: #fff;
right: 15px;
top: 15px;
}
/* #videoSection .mvideo_wrap {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center left;
background-size: contain;
} */
#videoSection .mbgvid {
position: relative;
top: unset;
left:unset;
transform : unset;
-webkit-transform : unset;
-ms-transform : unset;
background-size : unset;
-webkit-background-size : unset;
background-position : unset;
width:100%;
height:100%;
}
#videoSection #mvideo,
#videoSection .bgvid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
/* 0-3. reviewSection *******/
#reviewSection .title {line-height: 1.45;}
#reviewSection .review_list_wrap {margin-top:40px;}
#reviewSection .review_list_wrap .re_list {
max-width: 230px;
height:416px;
margin-right: 20px;
padding:43px 24px;
font-size: 15px;
}
/* 0-4. templateSection *******/
#templateSection {height:667px;}
#templateSection .section_left,
#templateSection .section_right {max-width: 326px; width: 100%;}
#templateSection .section_right {
height:65%;
padding-bottom:0;
margin-top: 0;
}
#templateSection .section_left .title { margin-bottom: 40px; line-height: 1.45;}
#templateSection .section_btn_wrap { display: flex; justify-content: center; margin-top:60px;}
#templateSection .section_right .swiper-pagination {display:none;}
#templateSection .section_right .swiper-container0 {width: 76.7%; max-height: 340px;}
#templateSection .section_right .swiper-container1,
#templateSection .section_right .bgBlack1,
#templateSection .section_right .bgShadow1 { margin-left: 31.6%; width:61.4%; max-height: 285px; }
#templateSection .section_right .swiper-container2,
#templateSection .section_right .bgBlack2,
#templateSection .section_right .bgShadow2 { margin-left: 47.3%; width: 53.4%; max-height: 216px; }
#templateSection .section_right .bgShadow1 {margin-left: 76.8%;}
#templateSection .section_right .bgShadow2 {margin-left: 93.5%;}
#templateSection .section_right .swiper-container3,
#templateSection .section_right .bgBlack3,
#templateSection .section_right .bgShadow3 { display: none;}
/* 0-5. functionSection *******/
#functionSection .section_header .title {margin-bottom: 40px; line-height: 1.45;}
#functionSection .function_wrap {margin-bottom:40px;}
#functionSection .function_wrap .function_nav li { height:40px; max-width: 155px; padding: 9px 0;}
#functionSection .function_wrap .function_nav li:nth-child(n+3) {margin-top: 12px;}
#functionSection .function_wrap .contents_image img {width:328px;}
#functionSection .function_wrap .contents_box .contents_title {display: none;}
/* 0-6. bsiteSection *******/
#bsiteSection .section_wrap {
align-items: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#bsiteSection .section_header .title {line-height: 1.45; max-width: 448px;}
#bsiteSection .section_wrap .bsite-nav {
margin-bottom: 48px;
display: flex;
flex-wrap: wrap;
max-width: 217px;
justify-content: space-around;
}
#bsiteSection[data-lang="ko"] .section_wrap .bsite-nav .bsite-navlist {margin-right: 84px;}
#bsiteSection .section_wrap .bsite-nav .bsite-navlist:nth-child(2n) {margin-right:0;}
#bsiteSection .section_wrap .bsite-nav .bsite-navlist:first-child,
#bsiteSection .section_wrap .bsite-nav .bsite-navlist:nth-child(2) {margin-bottom: 23px;}
#bsiteSection .section_wrap .bsite-wrap.bsite-imageload [class^="bsite-box"] {width:370%;}
#bsiteSection .section_wrap .bsite-wrap [class^="bsite-box"]:not(:last-child) {margin-bottom: 12px; }
/* 0-7. qnaSection *******/
#qnaSection .container {margin-top:20px;}
#qnaSection .section_header .title {line-height: 1.45;}
#qnaSection .qna_wrap {max-width:100%;}
#qnaSection .section_btn_wrap {margin-top:40px;}
#qnaSection .qna_wrap .qna-q .panel-title {font-size:16px;}
#qnaSection .qna_wrap .qna-a {font-size:13px; letter-spacing: -0.39px;}
#qnaSection .section_btn_wrap .section_btn {width: 180px; height: 48px;}
/* 2. Main 02 css ********/
.main02#mainSection {height:611px;}
.main02#mainSection .container {flex-direction: column;}
.main02#mainSection .mainSection_lf .mainSection_text01 {
font-size:28px;
margin-bottom: 40px;
line-height: 1.36;
}
.main02#mainSection .mainSection_lf {padding-top: 60px;}
.main02#mainSection .mainSection_lf .mainSection_title {font-size:14px;}
.main02#mainSection .mainSection_lf .mainSection_content {font-size:28px;}
.main02#mainSection .mainSection_text01 .mainSection_stType_wrap {height: 38px;}
.main02#mainSection .mainSection_lf .mainSection_text02 { max-width: none; flex-direction: column;}
.main02#mainSection .text02_lf {margin-bottom: 25px;}
.main02#mainSection .section_btn_wrap {margin-top: 50px;}
.main02#mainSection .section_btn_wrap .section_btn {width: 180px; height: 48px; font-size:15px;}
.main02#mainSection .mainSection_lf .section_btn_wrap .mainSection_title {font-size:16px;}
}
/** button effect **/
.btn.btn-hover-effect {
position: relative;
box-shadow: none;
z-index: 1;
overflow: hidden;
}
.btn.btn-hover-effect::before {
opacity: 1;
content: "";
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 10px;
}
.btn.btn-hover-effect::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 120%;
height: 400%;
border-radius: 9999rem;
transform: translate(-50%, -50%) scale(0.1, 0.1);
opacity: 0;
z-index: -1;
transition-property: transform, opacity, background-color;
transition-duration: 0.3s;
}
.btn.btn-hover-effect:active::after {
opacity: 1;
transform: scale(1) translate(-50%, -50%);
}
.interview-slide-section {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 25px;
overflow: hidden;
background-color: #f3f4f9;
}
.interview-slide-section *:not(.fa) {
font-family: "NotoSansCJKkr", 'Noto sans Kr', sans-serif;
}
.interview-slide-section .container {
width: 100%;
max-width: 1140px;
padding: 0;
}
.interview-slide-section .row {
position: relative;
margin: 0;
}
.interview-slide-section .slide .carousel-inner {
width: 100%;
margin: 30px 0 0;
position: relative;
}
.interview-slide-section .slide .carousel-inner .item {
width: 60%;
padding-top: 40%;
background-size: cover;
background-position: center;
height: 1px;
}
.interview-slide-section .slide .carousel-inner .item.bg {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.interview-slide-section .slide .carousel-caption {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 30px;
top: 0px;
left: auto;
right: -66.6666%;
width: 66.6666% ;
height: 100%;
border: none;
float: right;
text-align: center;
text-shadow: none;
background-color: #edeef6;
}
.interview-slide-section .carousel-caption .caption-txt {
text-align: center;
font-size: 18px;
font-weight: bold;
color: #222428;
line-height: 1.55;
letter-spacing: -0.7px;
word-break: keep-all;
}
.interview-slide-section .carousel-caption .caption-txt > p {
margin: 20px 0;
padding: 0 20px;
}
.interview-slide-section .carousel-caption .caption-txt .quot-end {
transform: rotate(180deg);
}
.interview-slide-section .carousel-caption .carousel-link {
margin-top: 60px;
font-size: 14px;
}
.interview-slide-section .slide .carousel-inner .bg-1 {
background-image: url('//storage.googleapis.com/i.addblock.net/template/interview/main_slide01_1.jpg');
}
.interview-slide-section .slide .carousel-inner .bg-2 {
background-image: url('//storage.googleapis.com/i.addblock.net/template/interview/main_slide02.jpg');
}
.interview-slide-section .slide .carousel-inner .bg-3 {
background-image: url('//storage.googleapis.com/i.addblock.net/template/interview/main_slide03.jpg');
}
.interview-slide-section .carousel-indicators {
display: block;
right: 40%;
bottom: 4px;
left: auto;
z-index: 15;
}
.interview-slide-section .carousel-indicators li {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 0 0 15px;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
border: 1px solid #fff;
}
.interview-slide-section .carousel-indicators li:first-child {
margin: 0;
}
.interview-slide-section .carousel-control {
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
width: 104px;
height: 40px;
fill: #222428;
opacity: 1;
transition: all .2s;
z-index: 20;
}
.interview-slide-section .carousel-control.left {
background-image: none;
left: -52px;
}
.interview-slide-section .carousel-control.right {
background-image: none;
right: -52px;
}
.interview-slide-section .carousel-control svg {
fill: #222428;
opacity: 0.3;
}
.interview-slide-section .carousel-control:hover svg {
opacity: 0.4;
}
.interview-slide-section .carousel-control.left svg {
transform: scaleX(-1);
}
.interview-slide-section .btn-video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
fill: #fff;
opacity: 0.9;
cursor: pointer;
z-index: 16;
}
.interview-slide-section .btn-video-play:hover {
opacity: 1;
}
.interview-slide-section .video-container {
display: none;
}
.interview-slide-section iframe.video-container {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 17;
}
.customer-interview-page {
background-color: #f5f5f8;
}
.customer-interview-page section * {
font-family: "NotoSansCJKkr", 'Noto sans Kr', sans-serif;
letter-spacing: -0.034em;
word-break: keep-all;
}
.customer-interview-page .interview-title-banner {
position: relative;
width: 100%;
max-width: 1140px;
height: 500px;
margin: 0 auto 70px auto;
}
.customer-interview-page .interview-title-banner > img {
width: 100%;
height: 500px;
object-fit: cover;
object-position: center center;
}
.customer-interview-page .interview-title-banner .summary {
position: absolute;
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
right: 0;
bottom: 0;
left: 0;
padding: 0 20px;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.customer-interview-page.hattonheritage-page .interview-title-banner .summary {
height: 60%;
}
.customer-interview-page.markandkate-page .interview-title-banner .summary {
height: 70%;
}
.customer-interview-page.aaceramicstudio-page .interview-title-banner .summary {
height: 66.6666%;
background-image: linear-gradient(to top, rgba(34, 36, 40, 0.4), transparent);
}
.customer-interview-page .interview-title-banner .summary .quot .quot-start {
transform: rotate(180deg);
}
.customer-interview-page .interview-title-banner .summary .summary-txt {
width: 100%;
padding: 0 80px;
margin: 30px 0;
}
.customer-interview-page .interview-title-banner .summary .summary-txt p {
font-size: 18px;
line-height: 1.6;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: #fff;
}
.customer-interview-page .interview-title-banner .summary .summary-txt p:last-child {
margin: 0;
}
.customer-interview-page .interview-title-banner .summary .summary-txt > div {
flex-grow: 1;
}
.customer-interview-page section {
background-color: #fff;
}
.customer-interview-page section > .container > .row {
margin-right: -10px;
margin-left: -10px;
}
.customer-interview-page section > .container > .row > [class^="col-"] {
padding-right: 10px;
padding-left: 10px;
}
.customer-interview-page section > .container > .row.image-wrap {
max-width: 840px;
}
.customer-interview-page section > .container > .row.image-wrap div[class^="col-"] {
height: 100%;
overflow: hidden;
}
.customer-interview-page section > .container > .row.image-wrap img {
width: 100%;
height: 100%;
min-height: 218px;
object-fit: cover;
object-position: center center;
border: solid 1px #eff0f4;
}
.customer-interview-page section > .container > .row.video-wrap .video-content{
position: relative;
width: 100%;
padding-bottom: 56%;
}
.customer-interview-page section > .container > .row.video-wrap .video-content iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.customer-interview-page section > .container > .row .text-row.col-md-12 {
width: 100%;
max-width: 730px;
margin-right: auto;
margin-left: auto;
}
.customer-interview-page section > .container > .row .text-row h4 {
margin: 0 0 25px 0;
color: #222428;
font-weight: bold;
line-height: 1.75;
}
.customer-interview-page section > .container > .row .text-row p {
color: #696c71;
font-size: 16px;
margin: 0 0 15px 0;
line-height: 1.75;
}
.customer-interview-page section > .container > .row .text-row p:last-child {
margin: 0;
}
.customer-interview-page section > .container > .row .text-row aside p {
margin-top: 20px;
font-size: 14px;
text-align: right;
}
.customer-interview-page section > .container > .row.title-row h1 {
margin-top: 0;
margin-bottom: 40px;
font-size: 36px;
font-weight: bold;
line-height: 1.6;
color: #222428;
}
.customer-interview-page section > .container > .row.title-row p {
color: #222428;
}
.customer-interview-page section > .container > .row.title-row p.title-user {
font-size: 14px;
color: #8e9095;
}
.customer-interview-page .interview-title-section {
padding: 70px 0;
text-align: center;
}
.customer-interview-page .interview-title-section > .container > .row h1 {
margin: 10px 0;
font-size: 18px;
font-weight: bold;
line-height: 1.6;
}
.customer-interview-page .interview-title-section > .container > .row .meta {
margin: 0;
height: 16px;
line-height: 16px;
color: #8e9095;
font-size: 14px;
}
.customer-interview-page .interview-title-section > .container > .row .meta > span {
display: inline-block;
padding: 0 15px;
}
.customer-interview-page .interview-title-section > .container > .row .meta .category {
border-right: 1px solid #8e9095;
}
.customer-interview-page .interview-title-section > .container > .row .interview-logo {
width: 120px;
height: auto;
margin-bottom: 30px;
}
.customer-interview-page .interview-content-section {
margin: 20px 0;
}
.customer-interview-page .interview-content-section > .container {
width: 100%;
max-width: 820px;
padding-right: 10px;
padding-left: 10px;
}
.customer-interview-page .interview-content-section > .container > .row {
margin-top: 120px;
margin-bottom: 120px;
}
.customer-interview-page .interview-content-section figure > .col-md-12 > img {width: 100%;}
.customer-interview-page .interview-content-section figcaption {
margin-top: 10px;
font-size: 14px;
color: #8e9095;
}
.customer-interview-page .interview-content-section .row.last {
max-width: 710px;
margin-right: auto;
margin-left: auto;
}
.customer-interview-page .interview-content-section .row.last:before,
.customer-interview-page .interview-content-section .row.last:after {
display: none;
}
.customer-interview-page .interview-content-section .row.last .text-row p {
position: relative;
padding-left: 15px;
font-size: 14px;
}
.customer-interview-page .interview-content-section .row.last .text-row svg {
position: absolute;
left: 0;
top: 10px;
}
.customer-interview-page .interview-content-section .row.last .btn.site-link {
width: 138px;
height: 48px;
padding: 12px 0;
border-radius: 5px;
background-color: #222428;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
.customer-interview-page .interview-content-section .btn.make-site-free {
width: 180px;
height: 60px;
padding: 18px 30px;
border-radius: 10px;
background-color: #4789E7;
color: #fff;
font-size: 16px;
}
.customer-interview-page .interview-content-section .last .btn.site-link:hover {
background-color: #393E47;
}
.customer-interview-page .interview-content-section .btn.make-site-free:hover {
background-color: #2A78E8;
}
.customer-interview-page .interview-content-section .last .btn.site-link::after {
background-color: #222428;
}
.customer-interview-page .interview-content-section .btn.make-site-free::after {
background-color: #4789E7;
}
.customer-interview-page .interview-list-section .container {
max-width: 956px;
}
.customer-interview-page .interview-list-section .row {
margin: 120px auto;
}
.customer-interview-page .interview-list-section h1 {
margin-top: 0;
margin-bottom: 50px;
font-size: 30px;
font-weight: bold;
color: #222428;
line-height: 1.6;
}
.customer-interview-page .interview-list-section ul.interview-list li {
display: block;
border-top: 1px solid #d1d3d5;
}
.customer-interview-page .interview-list-section ul.interview-list li:last-child {
border-bottom: 1px solid #d1d3d5;
}
.customer-interview-page .interview-list-section ul.interview-list li a {
padding: 40px 20px;
}
.customer-interview-page .interview-list-section ul.interview-list li .thumbnail {
width: 280px;
height: 200px;
margin-right: 20px;
margin-bottom: 0;
padding: 0;
overflow: hidden;
border: none;
border-radius: 0;
flex-shrink: 0;
background-color: #eee;
}
.customer-interview-page .interview-list-section ul.interview-list li .thumbnail img{
transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
.customer-interview-page .interview-list-section ul.interview-list li h3{
font-size: 20px;
font-weight: bold;
line-height: 1.7;
color: #222428;
}
.customer-interview-page .interview-list-section ul.interview-list li p{
font-size: 16px;
margin: 10px 0 0 0;
color: #222428;
}
.customer-interview-page .interview-list-section ul.interview-list li p.date{
font-size: 12px;
color: #8e9095;
}
.customer-interview-page .interview-list-section ul.interview-list li a:hover {
background-color: rgba(243, 244, 245, .5);
}
.customer-interview-page .interview-list-section ul.interview-list li a:hover .thumbnail img{
transform: scale(1.1);
}
.customer-interview-page.markandkate-page .interview-title-section > .container > .row .interview-logo {width: 204px;}
.customer-interview-page.aaceramicstudio-page .interview-title-section > .container > .row .interview-logo {width: 80px;}
.customer-interview-page.hattonheritage-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"] {height: 350px;}
.customer-interview-page.hattonheritage-page .interview-content-section > .container > .row.img-row-02 > div[class^="col-"] {height: 482px;}
.customer-interview-page.markandkate-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"] {height: 350px;}
.customer-interview-page.aaceramicstudio-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"] {height: 482px;}
.customer-interview-page.aaceramicstudio-page .interview-content-section > .container > .row.img-row-02 > div[class^="col-"] {height: 480px;}
.customer-interview-page.aaceramicstudio-page .interview-content-section > .container > .row.img-row-02 img,
.customer-interview-page.aaceramicstudio-page .interview-title-banner > img {object-position: center 80%;}
@media only screen and (min-width: 1200px) { /* 1200px ~ *****************************************************/
.customer-interview-page.hattonheritage-page .interview-title-section img {object-position: center top;}
}
@media only screen and (max-width: 1199px) { /* 992px ~ 1199px *****************************************************/
.interview-slide-section .slide .carousel-inner .item {
padding-top: 50%;
}
.customer-interview-page .interview-title-banner {
height: 360px;
}
.customer-interview-page .interview-title-banner .summary .summary-txt p {
font-size: 16px;
}
.customer-interview-page .interview-title-banner > img {
height: 360px;
}
}
@media only screen and (max-width: 991px) { /* 768px ~ 991px *****************************************************/
.interview-slide-section .slide .carousel-caption {
padding: 20px;
}
.interview-slide-section .carousel-caption .caption-txt {
font-size: 16px;
}
.interview-slide-section .carousel-caption .carousel-link {
margin-top: 30px;
font-size: 12px;
}
.customer-interview-page .interview-title-banner .summary .summary-txt {
padding: 0 10px;
}
.customer-interview-page .interview-content-section > .container,
.customer-interview-page .interview-list-section > .container {
padding-right: 20px;
padding-left: 20px;
}
.customer-interview-page.hattonheritage-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"] {height: 322px;}
.customer-interview-page.hattonheritage-page .interview-content-section > .container > .row.img-row-02 > div[class^="col-"] {height: 437px;}
.customer-interview-page.markandkate-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"] {height: 322px;}
.customer-interview-page.aaceramicstudio-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"] {height: 437px;}
.customer-interview-page.aaceramicstudio-page .interview-content-section > .container > .row.img-row-02 > div[class^="col-"] {height: 455px;}
}
@media only screen and (max-width: 767px) { /* 481px ~ 767px *****************************************************/
.interview-slide-section {
padding: 0 15px;
}
.interview-slide-section .carousel {
position: static;
}
.interview-slide-section .slide .carousel-inner {
width: 100%;
}
.interview-slide-section .slide .carousel-inner .item {
width: 100%;
padding-top: 60%;
}
.interview-slide-section .slide .carousel-caption {
position: static;
width: 100%;
height: 336px;
padding: 20px 0;
}
.interview-slide-section .carousel-indicators {
top: 0;
right: auto;
bottom: auto;
left: 50%;
padding-top: calc(60% - 7px);
}
.interview-slide-section .carousel-control{
top: 30px;
margin-top: calc(60% + 30px);
transform: translate(0, 0);
}
.interview-slide-section .carousel-control.left {
left: -47px;
}
.interview-slide-section .carousel-control.right {
right: -47px;
}
.customer-interview-page section > .container > .row {
margin-right: 0;
margin-left: 0;
}
.customer-interview-page section > .container > .row.image-wrap {
margin-right: -5px;
margin-left: -5px;
}
.customer-interview-page section > .container > .row > [class^="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.customer-interview-page section > .container > .row .text-row.col-md-12 {
padding-right: 0;
padding-left: 0;
}
.customer-interview-page section > .container > .row.title-row h1 {
font-size: 30px;
color: #222428;
}
.customer-interview-page.hattonheritage-page .interview-title-banner .summary {
height: 70%;
}
.customer-interview-page.markandkate-page .interview-title-banner .summary {
height: 80%;
}
.customer-interview-page.aaceramicstudio-page .interview-title-banner .summary {
height: 70%;
}
.customer-interview-page .interview-title-banner .summary .quot {display: none;}
.customer-interview-page .interview-title-banner .summary .summary-txt {
padding: 0;
}
.customer-interview-page .interview-title-banner .summary .summary-txt p {font-size: 14px;}
.customer-interview-page .interview-title-section {
padding: 0 0 70px 0;
}
.customer-interview-page .interview-content-section .row.last {
flex-direction: column;
}
.customer-interview-page .interview-content-section .row.last .btn.site-link {margin-top: 30px;}
.customer-interview-page .interview-list-section ul.interview-list li h3{
font-size: 16px;
color: #222428;
}
.customer-interview-page .interview-list-section ul.interview-list li a {
padding: 30px 5px;
}
.customer-interview-page .interview-list-section ul.interview-list li .thumbnail {
width: 100px;
height: 72px;
}
.customer-interview-page.aaceramicstudio-page .interview-title-section > .container > .row .interview-logo {width: 60px;}
.customer-interview-page.hattonheritage-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"],
.customer-interview-page.hattonheritage-page .interview-content-section > .container > .row.img-row-02 > div[class^="col-"],
.customer-interview-page.markandkate-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"],
.customer-interview-page.aaceramicstudio-page .interview-content-section > .container > .row.img-row-01 > div[class^="col-"] {height: auto;}
.customer-interview-page.hattonheritage-page .interview-content-section > .container > .row.img-row-01 > .col-xs-12:first-child {margin-bottom: 10px;}
.customer-interview-page.hattonheritage-page .interview-content-section > .container > .row.img-row-02 > .col-xs-12:first-child {margin-bottom: 10px;}
.customer-interview-page.markandkate-page .interview-content-section > .container > .row.img-row-01 > .col-xs-12:first-child {margin-bottom: 10px;}
.customer-interview-page.aaceramicstudio-page .interview-content-section > .container > .row.img-row-01 > .col-xs-12:first-child {margin-bottom: 10px;}
.customer-interview-page.aaceramicstudio-page .interview-content-section > .container > .row.img-row-02 > div[class^="col-"] {height: auto;}
}