@charset "utf-8";

/* Layout Properties */
header .header_menu {background:rgba(0, 0, 0, 0.3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);}
#subVisual {background:url(../../img/sub_service_bg.jpg) no-repeat center bottom/cover}
#container .containSub {height:600px;}

/* template Lauout */
#container .tem_title {background:url(../../img/sub_template_bg01.png) no-repeat right 1120%;padding-bottom:160px;position:relative}
#container .tem_title h4 {color:#3f3e41;font:5.571em/0.8 'RobotoL','NanumSquareL','Malgun Gothic','맑은 고딕', sans-serif;padding-top:20px}
#container .tem_title h4 strong {color:#111;display:block;font:bold 1em 'RobotoM','NanumSquareB','Malgun Gothic','맑은 고딕', sans-serif}
#container .tem_title p {font-size:1.571em;color:#333;width:40%;padding-top:50px;line-height:1.45}
#container .tem_title::after {content:"";display:block;background:url(../../img/sub_template_pat.png) no-repeat center bottom;width:594px;height:275px;position: absolute;z-index:-1;right:0;top:-70px;animation:updownPat 4s;-webkit-animation:updownPat 4s}
#container .tem_title mark {position:absolute;right:10px;background-color:transparent;color:#444;font-size:1.786em;width:20%;top:110px;line-height:1.4}
#container .tem_title .line:first-child::after {width:65px}
#container .tem_title .line:last-child::after {width:92px}
#container .btn_add {text-align:center}
#container .btn_add a {display:inline-block;width:66px;height:66px;text-indent:-10000px;background:url(../../img/sub_ico_scroll.png) no-repeat;margin-top:100px}

/* template 1depth Tab */
#container label {display:block;width:100%;color:#9f8bc7;cursor:pointer;-webkit-transition-property:background-color, color;transition-property:background-color,color;-webkit-transition-duration:200ms;transition-duration:200ms}
#container label:hover {color:#fff}

#container .tem_wrap {background-color:#ededed;font-size:14px}
#container .tem_contain {margin:0 auto;width:1024px}
#container .tem_contain section header label {padding:12px 24px}
#container .tem_contain section .tem_list {max-height:0;opacity:0;-webkit-transition:opacity 800ms;transition:opacity 800ms;overflow-y:hidden}
#container .tem_contain section .tem_list.on {max-height:inherit;opacity:1;padding:2% 1%;}

#container .tem_wrap input[type='radio']{display:none}
#container .depth1_tab {background-color:#211728;padding:30px 0}
#container ul.ico_tab {text-align:center;width:1024px;margin:0 auto}
#container ul.ico_tab li {text-align:center;width:19.2%;position:relative;margin:5px 0;display:inline-block;-webkit-transition:.3s all ease;transition:.3s ease all}
#container ul.ico_tab li::before {-webkit-transition:.5s all ease;transition:.5s all ease;position:absolute;top:0;left:50%;right:50%;bottom:0;opacity:0;content:"";background-color:#310e78}
#container ul.ico_tab li:hover::before {-webkit-transition:.5s all ease;transition:.5s all ease;left:0;right:0;opacity:1}
#container ul.ico_tab li:focus::before {transition:.5s all ease;left:0;right:0;opacity:1}
#container ul.ico_tab li label {position:relative;padding:120px 0 40px;font-size:1.18em}
#container ul.ico_tab li label::after {content:"";position:absolute;left:50%;top:15px;width:80px;height:80px;margin-left:-40px}
#container ul.ico_tab li label:hover::after {animation:swashIn 0.5s ease-out}

#container ul.ico_tab li:nth-child(1) label::after {background:url(../../img/template_ico_sprite01.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(2) label::after {background:url(../../img/template_ico_sprite02.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(3) label::after {background:url(../../img/template_ico_sprite03.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(4) label::after {background:url(../../img/template_ico_sprite04.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(5) label::after {background:url(../../img/template_ico_sprite05.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(6) label::after {background:url(../../img/template_ico_sprite06.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(7) label::after {background:url(../../img/template_ico_sprite07.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(8) label::after {background:url(../../img/template_ico_sprite08.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(9) label::after {background:url(../../img/template_ico_sprite09.png) no-repeat 50% 10px}
#container ul.ico_tab li:nth-child(10) label::after {background:url(../../img/template_ico_sprite10.png) no-repeat 50% 9px}
#container ul.ico_tab li label::after,
#container ul.ico_tab li:not(:nth-child(10)) label:hover::after {background-position:50% -70px}
#container ul.ico_tab li:nth-child(10) label:hover::after {background-position:50% -72px}

#container ul.ico_tab li.on {background-color:#310e78}
#container ul.ico_tab li.on label {color:#fff}
#container ul.ico_tab li.on:not(:nth-child(10)) label::after {background-position:50% -70px}
#container ul.ico_tab li.on:nth-child(10) label::after {background-position:50% -72px}

.tem_contain .temtab .tem_list {max-height:inherit;opacity:1;padding:2% 1%}
.temico.on {cursor:default;-webkit-transform:translate3d(0, 1px, 0);transform:translate3d(0, 1px, 0)}

/* #temtab_1_ctrl:checked ~ .tem_contain .temtab_1 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_2_ctrl:checked ~ .tem_contain .temtab_2 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_3_ctrl:checked ~ .tem_contain .temtab_3 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_4_ctrl:checked ~ .tem_contain .temtab_4 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_5_ctrl:checked ~ .tem_contain .temtab_5 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_6_ctrl:checked ~ .tem_contain .temtab_6 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_7_ctrl:checked ~ .tem_contain .temtab_7 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_8_ctrl:checked ~ .tem_contain .temtab_8 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_9_ctrl:checked ~ .tem_contain .temtab_9 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_10_ctrl:checked ~ .tem_contain .temtab_10 .tem_list {max-height:inherit;opacity:1;padding:2% 1%} */
/* #temtab_1_ctrl:checked ~ .ico_tab .temico_1, */
/* #temtab_2_ctrl:checked ~ .ico_tab .temico_2, */
/* #temtab_3_ctrl:checked ~ .ico_tab .temico_3, */
/* #temtab_4_ctrl:checked ~ .ico_tab .temico_4, */
/* #temtab_5_ctrl:checked ~ .ico_tab .temico_5, */
/* #temtab_6_ctrl:checked ~ .ico_tab .temico_6, */
/* #temtab_7_ctrl:checked ~ .ico_tab .temico_7, */
/* #temtab_8_ctrl:checked ~ .ico_tab .temico_8, */
/* #temtab_9_ctrl:checked ~ .ico_tab .temico_9, */
/* #temtab_10_ctrl:checked ~ .ico_tab .temico_10 {cursor:default;-webkit-transform:translate3d(0, 1px, 0);transform:translate3d(0, 1px, 0)} */

/* template 2depth Tab */
#container .depth2_tab {margin:50px 0;transition:all .3s}
#container .depth2_tab ul {text-align:center;width:100%;height:50px}
#container .depth2_tab li {display:inline-block;text-align:center;min-width:10%;transition:all .3s;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;-ms-transition:all .3s}
#container .depth2_tab a {display:block;font-size:1.286em;color:black;text-decoration:none;color:#585858;padding:5%;white-space:nowrap;position:relative}
#container .depth2_tab li a:hover,
#container .depth2_tab li a:focus,
#container .depth2_tab li.on a:hover,
#container .depth2_tab li.on a:focus {color:#a40081;font-weight:bold}
#container .depth2_tab li.on a {color:#643bb9;font-weight:bold}
#container .depth2_tab li a::after {content:"";width:0;border-bottom:3px solid #7433b6;height:2px;position:absolute;bottom:-10px;left:0;transition:all .3s;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;-ms-transition:all .3s}
#container .depth2_tab li a:hover::after,
#container .depth2_tab li a:focus::after {border-bottom:3px solid #a40081}
#container .depth2_tab li a:hover::after,
#container .depth2_tab li a:focus::after,
#container .depth2_tab li.on a::after{width:100%}

/* template list */
#container .card_list {padding-bottom:100px}
#container .card_list ul {*zoom:1}
#container .card_list ul li {width:32%;float:left;border:1px solid #e4e4e4;background-color:#fff;margin:0 0.5% 1%;position:relative;text-align:center;-webkit-transition:opacity .7s linear;-moz-transition:opacity .7s linear;-o-transition:opacity .7s linear;transition:opacity .7s linear}
#container .card_list ul li:hover {opacity:.65}
#container .card_list ul li a {display:block;position:relative}

#container .card_list .card_info > img {width:100%;max-width:352px}
#container .card_list .flag {display:table;position:absolute;top:0;left:0;width:65px;height:65px;background:#310e78;text-align:center;color:#fff;font:1.03em 'RobotoR','NanumSquareR','Malgun Gothic','맑은 고딕',sans-serif;}
#container .card_list .flag span {display:table-cell;vertical-align:middle}
#container .card_list .price {display:block;font:1.571em 'NanumSquareEB','Malgun Gothic','맑은 고딕';padding:10px 10px 60px}
#container .card_list .detail_info {background-color:#f8f8f8;position:absolute;bottom:0;left:0;width:100%;padding:15px;border-top:1px solid #e6e6e6;display:table}
#container .card_list .detail_info > span {display:table-cell;font-size:1.071em;vertical-align:middle;height:24px}
#container .card_list .use_count {text-align:left}
#container .card_list .name {text-align:right;color:#333;background:url(../../img/ico_user.png) no-repeat left top}

#container .card_list figure {color:#363636;white-space:normal}
#container .card_list figcaption {padding:5%;color:#888;border-top:1px solid #e6e6e6;}
#container .card_list figcaption cite {color:#333;font:bold 1.35em/1.4 'NanumSquareR','Malgun Gothic','맑은 고딕';height:58px;display:block}

#container .card_list .blank {width:100%;background-color:#ededed;border:1px solid #ededed;color:#888;font-size:1.2em;background:url(../../img/ico_blank.png) no-repeat center bottom;padding:100px 0 200px;-webkit-transition:none;-o-transition:none;transition:none}
#container .card_list .blank:hover {opacity:1}
#container .card_list .blank strong {display:block;font:normal 2.5em 'NanumSquareL','Malgun Gothic','맑은 고딕';color:#111;letter-spacing:-2px;}
#container .card_list .blank strong u {text-decoration:none;font-weight:bold;}
#container .card_list .blank span {padding-top:20px;display:block}

/* coupon */
#container .cp_title::after {background:url(../../img/sub_cpbg.jpg) no-repeat center top / cover;content:"";width:100%;height:823px;display:block;position:absolute;z-index:-1;top:0;left:0}
#container .cp_title h4 {color:#fff;width:30%;}
#container .cp_title h4 strong {font-weight:normal}
#container .cp_title mark {position:absolute;left:50%;background-color:transparent;color:#444;width:15%;top:240px;color: #fff;margin-left:130px;font:1.786em/1.4 'NanumSquareL','Malgun Gothic','맑은 고딕'}
#container .cp_title .line {color:#fff}
#container .cp_title .line:hover, #container .cp_title .line:focus  {background-color:#a40081}
#container .cp_title .line::after {border-color:#a40081}
#container .cp_title .line:first-child::after {width:65px}
#container .cp_title .line:last-child::after {width:92px}
#container .cp_view {margin:80px 0;}
#container .cp_view figure {width:50%;margin:0 auto;text-align:center;}
#container .cp_view figure img {max-width:552px;width:100%}
#container .cp_view p {font-size:1.571em;color:#333;padding-top:50px;line-height:1.5}

/* keyframe Ani */
@keyframes swashIn{
	0%{opacity:0;transform-origin:50% 50%;transform:scale(0,0)}
	80%{opacity:1;transform-origin:50% 50%;transform:scale(.9,.9)}
	100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1)}}
@keyframes updownPat {
	0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0}
	50%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:1}
	to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@-webkit-keyframes updownPat {
	0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0}
	50%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:1}
	to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@-moz-keyframes updownPat {
	0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0}
	50%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:1}
	to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@-o-keyframes updownPat {
	0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:0}
	50%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:1}
	to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}


.templ_unit {opacity:.55;transition:opacity .3s linear;}
.dev_img {min-height:187.36px;}


/* mobile mediaquery 320px*640px */

@media only screen and
(min-width:10px) and (max-width:640px)
{
	#lnbWrap .depth1 {display:none;}
	#gnbWrap ul li:not(:last-child) {display:none;}
	
	/* Layout Properties */
	#subVisual {background:url(../../img/sub_service_bg.jpg) no-repeat center bottom/510%}
	#container .tem_title {padding-left:13%;background:url(../../img/sub_template_bg01.png) no-repeat right 210% / contain}
	#container .tem_title h4 {font-size:3em}
	#container .tem_title p {font-size:1.18em;width:55%}
	#container .tem_title mark {font-size:1.1em}
	#container .tem_title::after {width:100%;background:url(../../img/sub_template_pat.png) no-repeat 3% bottom / 70%}
	#container .tem_title .line:first-child::after {width:45px}
	#container .tem_title .line:last-child::after {width:45px}

	/* template 1depth Tab */
	#container ul.ico_tab {text-align:center;width:100%;display:flex;flex-wrap:wrap;}
	#container ul.ico_tab li {width:20%}
	#container ul.ico_tab li label {padding:90px 0 30px;font-size:0.9em}
	#container ul.ico_tab li label::after {width:70px;height:67px;margin-left:-35px}
	#container ul.ico_tab li:nth-child(1) label::after {background:url(../../img/template_ico_sprite01.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(2) label::after {background:url(../../img/template_ico_sprite02.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(3) label::after {background:url(../../img/template_ico_sprite03.png) no-repeat 50% 7px / 80%}
	#container ul.ico_tab li:nth-child(4) label::after {background:url(../../img/template_ico_sprite04.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(5) label::after {background:url(../../img/template_ico_sprite05.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(6) label::after {background:url(../../img/template_ico_sprite06.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(7) label::after {background:url(../../img/template_ico_sprite07.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(8) label::after {background:url(../../img/template_ico_sprite08.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(9) label::after {background:url(../../img/template_ico_sprite09.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(10) label::after {background:url(../../img/template_ico_sprite10.png) no-repeat 50% 6px / 80%}

	#container ul.ico_tab li.on:not(:nth-child(10)) label::after {background-position:50% -53px}
	#container ul.ico_tab li:not(:nth-child(10)) label:hover::after {background-position:50% -56px}
	#container ul.ico_tab li:nth-child(10) label:hover::after {background-position:50% -56px}

	#container .depth1_tab {padding:10px 0}
	#container .depth2_tab {margin:30px 0}
	#container .tem_contain {width:100%}
	#container .tem_contain section .tem_list {max-height:100%;opacity:1}

	/* template 2depth Tab */
	#container .depth2_tab a {font-size:1.1em;}
	#container .depth2_tab ul {height:35px}
	#container .depth2_tab li a::after {bottom:-3px}

	/* template list */
	#container .card_list {padding-bottom:70px}
	#container .card_list ul li {width:48%;margin:0 1% 2%}
	#container .card_list figcaption cite {font:bold 1.1em/1.35 'NanumSquareR','Malgun Gothic','맑은 고딕'}
	#container .card_list .price {font:1.3em 'NanumSquareEB','Malgun Gothic','맑은 고딕';padding:20px 10px 50px}
	#container .card_list .flag {font-size:0.9em;width:60px;height:50px}
	#container .card_list .detail_info {padding:10px}
	#container .card_list .detail_info > span {font-size:0.95em}
	#container .card_list .name {padding-left:13%;background:url(../../img/ico_user.png) no-repeat left top / 10px}

	/* template Lauout */
	#container .btn_add a {margin-top:70px}
	#container .tem_title {background:url(../../img/sub_template_bg01.png) no-repeat right 240% / contain}

	/* coupon */
	#container .cp_title::after {background:none!important}
	#container .cp_title h4 {width:40%}
	#container .cp_title h4,
	#container .cp_title mark {color:#000}
	#container .cp_title mark {font-size:1.1em;margin-left:5%;width:30%;top:93px}
	#container .cp_title .line {color:#7433b6}
	#container .cp_title .line:first-child::after {width:45px}
	#container .cp_title .line:last-child::after {width:55px;display:none}
	#container .cp_title {width:80%;margin:0 auto}
	#container .cp_view figure {width:95%;margin:0}
	#container .cp_view p {font-size:1.1em;padding-top:20px}
	#container .cp_view {margin:40px}

	.dev_img {min-height:auto !important}
	
	#container article {padding-left:0px;}
}


@media only screen and
(min-width:641px) and (max-width:999px)
{
	#lnbWrap .depth1 {display:none;}
	#gnbWrap ul li:not(:last-child) {display:none;}
	
	/* Layout Properties */
	#subVisual {background:url(../../img/sub_service_bg.jpg) no-repeat center bottom/510%}
	#container .tem_title {padding-left:13%;background:url(../../img/sub_template_bg01.png) no-repeat right 210% / contain}
	#container .tem_title h4 {font-size:3em}
	#container .tem_title p {font-size:1.18em;width:55%}
	#container .tem_title mark {font-size:1.1em}
	#container .tem_title::after {width:100%;background:url(../../img/sub_template_pat.png) no-repeat 3% bottom / 70%}
	#container .tem_title .line:first-child::after {width:45px}
	#container .tem_title .line:last-child::after {width:45px}

	/* template 1depth Tab */
	#container ul.ico_tab {text-align:center;width:100%;display:flex;flex-wrap:wrap;}
	#container ul.ico_tab li {width:20%}
	#container ul.ico_tab li label {padding:90px 0 30px;font-size:0.9em}
	#container ul.ico_tab li label::after {width:70px;height:67px;margin-left:-35px}
	#container ul.ico_tab li:nth-child(1) label::after {background:url(../../img/template_ico_sprite01.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(2) label::after {background:url(../../img/template_ico_sprite02.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(3) label::after {background:url(../../img/template_ico_sprite03.png) no-repeat 50% 7px / 80%}
	#container ul.ico_tab li:nth-child(4) label::after {background:url(../../img/template_ico_sprite04.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(5) label::after {background:url(../../img/template_ico_sprite05.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(6) label::after {background:url(../../img/template_ico_sprite06.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(7) label::after {background:url(../../img/template_ico_sprite07.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(8) label::after {background:url(../../img/template_ico_sprite08.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(9) label::after {background:url(../../img/template_ico_sprite09.png) no-repeat 50% 5px / 80%}
	#container ul.ico_tab li:nth-child(10) label::after {background:url(../../img/template_ico_sprite10.png) no-repeat 50% 6px / 80%}

	#container ul.ico_tab li.on:not(:nth-child(10)) label::after {background-position:50% -53px}
	#container ul.ico_tab li:not(:nth-child(10)) label:hover::after {background-position:50% -56px}
	#container ul.ico_tab li:nth-child(10) label:hover::after {background-position:50% -56px}

	#container .depth1_tab {padding:10px 0}
	#container .depth2_tab {margin:30px 0}
	#container .tem_contain {width:100%}
	#container .tem_contain section .tem_list {max-height:100%;opacity:1}

	/* template 2depth Tab */
	#container .depth2_tab a {font-size:1.1em;}
	#container .depth2_tab ul {height:35px}
	#container .depth2_tab li a::after {bottom:-3px}

	/* template list */
	#container .card_list {padding-bottom:70px}
	#container .card_list ul li {width:48%;margin:0 1% 2%}
	#container .card_list figcaption cite {font:bold 1.1em/1.35 'NanumSquareR','Malgun Gothic','맑은 고딕'}
	#container .card_list .price {font:1.3em 'NanumSquareEB','Malgun Gothic','맑은 고딕';padding:20px 10px 50px}
	#container .card_list .flag {font-size:0.9em;width:60px;height:50px}
	#container .card_list .detail_info {padding:10px}
	#container .card_list .detail_info > span {font-size:0.95em}
	#container .card_list .name {padding-left:13%;background:url(../../img/ico_user.png) no-repeat left top / 10px}

	/* template Lauout */
	#container .btn_add a {margin-top:70px}
	#container .tem_title {background:url(../../img/sub_template_bg01.png) no-repeat right 240% / contain}

	/* coupon */
	#container .cp_title::after {background:none!important}
	#container .cp_title h4 {width:40%}
	#container .cp_title h4,
	#container .cp_title mark {color:#000}
	#container .cp_title mark {font-size:1.1em;margin-left:5%;width:30%;top:93px}
	#container .cp_title .line {color:#7433b6}
	#container .cp_title .line:first-child::after {width:45px}
	#container .cp_title .line:last-child::after {width:55px;display:none}
	#container .cp_title {width:80%;margin:0 auto}
	#container .cp_view figure {width:95%;margin:0}
	#container .cp_view p {font-size:1.1em;padding-top:20px}
	#container .cp_view {margin:40px}

	.dev_img {min-height:auto !important}
	
	#container article {padding-left:0px;}
}