/* Common **********************************************************************/ /* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); <-- 기존에 있던 것 */ /* Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 900; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); } @font-face { font-family: 'TmonMonsori'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff'); font-weight: normal; font-style: normal; } /* Common **********************************************************************/ html,body {width:100%; } html {overflow-y:scroll; box-sizing:border-box;} *, *:before, *:after{box-sizing:inherit;} *{ -webkit-text-size-adjust:none; -webkit-text-size-adjust - auto | none | N% (default auto) } body {word-break:break-all;-ms-word-break:break-all; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0;} fieldset,img {border:0px none; vertical-align:top;} dl,ul,ol,menu,li {list-style:none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;} button {border:0 none; background-color:transparent; cursor:pointer;} body { background:#fff;} body,th,td,input,select,textarea,button {font-size:15px; line-height:1.7; font-family: 'SCDream'; color:#555;} input, select, textarea, button{vertical-align:middle; } a:link,a:active,a:visited{color:#7d7d7d; text-decoration:none; border:0px;} a:hover,a:focus{color:#333; text-decoration:none} table {border-collapse:collapse; border-spacing:0;} address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;} summary, caption, legend, hr {width:0; height:0; font-size: ; line-height: ; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;} caption {position:static;} /* label hidden 처리 */ .invisible, .hide{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;} label.invisible{*position:Absolute;} /* common */ .clfix:after {content: "."; display: block; height:0px; clear: both; visibility: hidden;} .clfix {display:inline-block;} .clfix {display:block;} * html .clfix {height:1%;} /* Hides from IE-mac */ .clfix {zoom:1;} /*for IE 5.5-7*/ .list {border-top:2px solid #1c1815; border-bottom:1px solid #1c1815;} /*멤버스킨*/ .title{font-size:15px; font-weight:bold;} /*테이블*/ .tbl_type,.tbl_type th,.tbl_type td{border:0} .tbl_type{width:100%;border-bottom:1px solid #e2e2e5; } .tbl_type th{padding:10px 0 10px 0;border-top:2px solid #383d4a; font-weight:bold; border-bottom:1px solid #e2e2e5;} .tbl_type p{font-size:11px; color:#b6b7bc;} .tbl_type td{padding:7px 0 7px 0;border-top:1px solid #e5e5e5;color:#4c4c4c; border-bottom:none; border-top:none; line-height:18px;} .tbl_type2,.tbl_type2 th,.tbl_type2 td{border:0} .tbl_type2{width:100%;border-bottom:1px solid #e7e7e7; } .tbl_type2 th{padding:10px 0 10px 0; background:#f9f9f9; text-align:center;} .tbl_type2 p{font-size:11px; color:#b6b7bc;} .tbl_type2 td{padding:10px 0 10px 10px; border-bottom:none; border-top:none; line-height:18px;} /*로그인스킨*/ .login_wrap{width:600px; position:relative; margin:0 auto; text-align:center;overflow:hidden;} .login_id{width:240px; float:left;height:30px; font-size:14px; font-weight:bold; color:#444;} .login_pw{width:240px; float:left; height:30px; font-size:14px; font-weight:bold; color:#444;} .login_btn{width:70px; float:left; height:30px; font-size:14px; font-weight:bold; color:#fff; background-color:#333; border:none; } .num_txt{width:100px; float:left;height:20px; font-size:13px; font-weight:bold; color:#444;} .font_color{color:#1a386a; font-weight:bold;} /* font-family: 'SCDream'; font-family: 'Noto Sans KR'; font-family: 'GmarketSans'; */ /*=== main ===*/ #wrap {position: relative; width: 100%; min-width: 1200px; max-width: 1920px; margin: 0 auto; overflow: hidden;} .inner {width: 1200px; margin: 0 auto;} #inner_none.inner{width:100%;} #header .h_top{height: 126px; border-bottom: 1px solid #ddd;} #header .h_top .inner{position:relative; height: 100%;} #header .h_top h1{position:absolute; left: 0; top: 6px; bottom: 0; right: 6px; margin:auto; width:217px; height: 88px; } #header .h_top h1 a{display: block; width: 100%; height: 100%;} #header .h_top h1 img{width: 100%; height: 100%; } #header .h_top .member_btn{position: absolute; display: flex; align-items: center; right: 0; bottom: 0; height: 100%; } #header .h_top .member_btn span{position:Relative; display: block; margin-right: 27px;} #header .h_top .member_btn span:after{content:''; position: absolute; right: -16px; top: 0; bottom: 0; margin: auto 0; width: 1px; height: 6px; background-color: #dfdfdf;} #header .h_top .member_btn span a{display: block; line-height: 1; font-size: 15px; color:#555;} #header .h_top .member_btn span:last-child{margin-right: 0;} #header .h_top .member_btn span:last-child:after{displaY: none;} #header .h_bot{position:relative; border-bottom: 3px solid #306ac2; z-index: 1000;} #header .h_bot .gnb{display: flex; font-size: 0; height: 72px; } #header .h_bot .gnb li{position:Relative; flex:1; height: 100%; transition:0.3s; text-align: center;} #header .h_bot .gnb li:after{content:''; position:absolute; right: 0; top:0; bottom: 0; margin: auto 0; width: 1px; height: 12px; background-color: #ddd;} #header .h_bot .gnb li:first-child:before{content:''; position:absolute; left: 0; top:0; bottom: 0; margin: auto 0; width: 1px; height: 12px; background-color: #ddd;} #header .h_bot .gnb li a{display: flex; align-items: center; width: 100%; height: 100%; } #header .h_bot .gnb li a span{display: block; font-size: 17px; width: 100%; font-weight: 500; color:#222; line-height: 23px; transition:0.3s;} #header .h_bot .gnb li.on:after,#header .h_bot .gnb li.on:before{display: none;} #header .h_bot .gnb li.on{background-color: #306ac2;} #header .h_bot .gnb li.on a span{color:#fff;} .all_menu_wrap{position:absolute; display: none; left: 0; top: 100%; width: 100%; background-color: #fff; border-top: 3px solid #306ac2; } .all_menu_wrap .inner{display: flex;} .all_menu_wrap .menu_box{position:relative; flex:1; text-align: center; overflow: hidden; padding: 20px 0;} .all_menu_wrap .menu_box:after{content:''; position: absolute; left: 50%; transform: translateX(-50%); width:18px; height: 9px; top: -9px; background: url(/images/main/gnb_deco.png)center no-repeat; transition:0.3s; } .all_menu_wrap .menu_box ul li a{display: block; line-height:35px; font-size: 15px; color:#666666; transition: 0.3s;} .all_menu_wrap .menu_box ul li:hover a{color:#306ac2; } .all_menu_wrap .menu_box.on:after{top: 0;} #visual_wrap{position:relative;} #section01{padding: 0 0 60px;} #section01 .top{display: flex; border: 1px solid #ddd; height: 95px; font-size: 0;} #section01 .top .prev{display: block; width: 94px; height: 100%; border-right: 1px solid #ddd; background: url(/images/main/main_prev01.png)center no-repeat;} #section01 .top .next{display: block; width: 94px; height: 100%; border-left: 1px solid #ddd; background: url(/images/main/main_next01.png)center no-repeat;} #section01 .top .tit{display: flex; align-items: center; justify-content: center; width: calc(100% - 188px); height: 100%; text-align: center;;} #section01 .top .tit em{display: inline-block; line-height: 1; font-size: 28px; color:#222; font-weight: 700; margin-right: 20px; font-family: 'GmarketSans'; vertical-align: middle;} #section01 .top .tit em span{color:#2371c3;} #section01 .top .tit p{display: inline-block; line-height: 1; font-size: 18px; color:#555; vertical-align: middle;} #section01 .mid{display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; padding: 32px 0 31px; background-color: #f4f8fc; font-size: 0; border-top:none; border-bottom:none;} #section01 .mid .number{position:relative; width: 65px; height: 65px; border-radius: 50%; margin: 0 10px; animation: revolveDrop 1.0s forwards; animation-iteration-count:infinite} #section01 .mid .number.num1{background-color: #916e01;border: 5px solid #684f00;} #section01 .mid .number.num2{background-color: #03a2da;border: 5px solid #007fac;} #section01 .mid .number.num3{background-color: #d3411e;border: 5px solid #b9300f;} #section01 .mid .number.num4{background-color: #7f7f7f;border: 5px solid #595959;} #section01 .mid .number.num5{background-color: #009453;border: 5px solid #007642;} #section01 .mid .number span{display: block; line-height: 55px; font-size: 25px; font-weight: 500; color:#fff; text-align: center; ;} #section01 .mid .more{width: 14px; height: 14px; background: url(/images/main/main_x.png)center no-repeat; margin: 0 10px;} #section01 .mid .number:nth-of-type(1){animation-delay: .60s;} #section01 .mid .number:nth-of-type(2){animation-delay: .65s;} #section01 .mid .number:nth-of-type(3){animation-delay: .70s;} #section01 .mid .number:nth-of-type(4){animation-delay: .75s;} #section01 .mid .number:nth-of-type(5){animation-delay: .8s;} #section01 .mid .number:nth-of-type(6){animation-delay: .85s;} #section01 .mid .number:last-child{animation-delay: .9s;} @keyframes revolveDrop { 30% { top: 0; } 60% { top: -10px; } 100% { top: 0; } } #section01 .bot{} #section01 .bot table{width: 100%; border:1px solid #ddd;} #section01 .bot table tr{border-top: 1px solid #ddd;} #section01 .bot table tr:nth-child(odd){background-color: #fff;} #section01 .bot table tr:nth-child(even){background-color: #f4f8fc;} #section01 .bot table th{height: 67px; text-align: center; font-size: 18px; font-weight: 500; color:#222;border-right: 1px solid #ddd;} #section01 .bot table td{height: 70px; font-size: 18px; color:#222; text-align: center; vertical-align: middle;border-right: 1px solid #ddd;} #section01 .bot table td.right{text-align: right;padding-right:20px;} #section01 .bot table td.blue{font-weight: 500; color:#2371c3;} #section02 .sec02_slider .img_wrap{position:relative; width: 100%; height: 260px; overflow: hidden; border-radius:10px 10px 10px 30px;} #section02 .sec02_slider .img_wrap img{position:absolute; left: 0; top: 0; bottom: 0; right: 0; margin :auto; width:auto; height:auto; max-width:100%; max-height: 100%;} h2.main_tit{position:relative; text-align: center; line-height: 1; font-size: 30px; font-weight: 700; color:#222; font-family: 'GmarketSans';} h2.main_tit span{color:#2371c3;} h2.main_tit:before{content:''; position:absolute; left: 0; width: 428px; top: 0; bottom: 10px; margin: auto 0; height: 1px; background-color: #ddd;} h2.main_tit:after{content:''; position:absolute; right: 0; width: 428px; top: 0; bottom: 10px; margin: auto 0; height: 1px; background-color: #ddd;} .main_list{margin-top: 24px;} .main_list ul{display: flex; } .main_list ul li{width: 225px; margin-right: 20px;} .main_list ul li:last-child{margin-right: 0;} .main_list ul li .img_wrap{position:relative; padding-bottom: 100%; overflow:hidden;;} .main_list ul li .img_wrap .tag{position:absolute; width: 50px; height: 27px; text-align: center; line-height: 27px; font-size:11px; color:#fff; background-color: #ed7980; z-index: 10;} .main_list ul li .img_wrap img{position:absolute; left: 0; top: 0; bottom: 0; right: 0; margin :auto; width:auto; height:auto; max-width:100%; max-height: 100%; transition: 0.5s;} .main_list ul li .txt{padding-top: 24px;} .main_list ul li .txt span{display: block; line-height: 1; font-size:15px; margin-bottom: 14px;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} .main_list ul li .txt span a{ color:#306ac2;} .main_list ul li .txt em{display: block; font-size: 18px; line-height: 1; font-weight: 500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} .main_list ul li .txt em a{ color:#222;} .main_list ul li .txt .bot{display: flex; justify-content:space-between; font-size: 0; margin-top: 18px;} .main_list ul li .txt .bot .price p{display: inline-block; line-height: 1; font-size: 15px; color:#222; margin-right: 14px;} .main_list ul li .txt .bot .price b{display: inline-block; line-height: 1; font-size: 15px; font-weight: 400;color:#ed7980; } .main_list ul li .txt .bot select{border:none; font-size: 15px; color:#666666; border: none; width:75px; line-height: 15px; height: 15px;text-align: right; padding-right: 23px; background: url(/images/main/main_sel.png)center right no-repeat; -webkit-appearance: none; -moz-appearance: none;appearance: none;} .main_list ul li .txt .bot select::-ms-expand {display: none;} .main_list ul li:hover .img_wrap img{transform: scale(1.2);} #section03{padding-top: 64px;} #section04{padding-top: 65px;} #section05{padding: 60px 0 100px;} #section05 .sec05_slider{position:relative; } #section05 .sec05_slider .img_wrap{position:relative; width: 100%; height: 160px; overflow: hidden; border-radius:10px 30px 10px 10px;} #section05 .sec05_slider .img_wrap img{position:absolute; left: 0; top: 0; bottom: 0; right: 0; margin :auto; width:auto; height:auto; max-width:100%; max-height: 100%;} #footer .f_top{height: 60px; background-color: #6f6f6f;} #footer .f_top .inner{display: flex; align-items: center; height: 100%; font-size: 0;} #footer .f_top span{position:relative; display: block; margin-right: 39px; } #footer .f_top span:after{content:''; position:absolute; right: -22px; width: 3px; height: 3px; background: #fff; border-radius: 50%; top: 0; bottom: 0; margin:auto 0;} #footer .f_top span:last-child:after{display: none;} #footer .f_top span a{display: block; line-height: 1; font-size: 15px; color:#fff; } #footer .f_bot{padding: 25px 0 25px;} #footer .f_bot .inner{position:relative; padding-left: 195px;} #footer .f_bot .foot_logo{position:absolute; display: block; left: 0; top: 12px; width: 140px; height: 52px;} #footer .f_bot .foot_logo img{width: 100%; height: 100%;} #footer .f_bot address{font-size: 15px; line-height: 25px; color:#666666;} #footer .f_bot address span{display: inline-block; width:43px;} #sub_contents{padding: 80px 0 100px; min-height: 500px;} #sub_contents.sub_contents_none{padding: 0;} #sub_contents.sub_contents_2{padding-bottom: 0;} .contop{margin-bottom: 40px;} .contop2{margin-bottom:25px;} .contop h2{text-align: center; line-height: 1; font-size:38px; color:#222; font-weight: 700; font-family: 'GmarketSans';} .contop h2 span{color:#2371c3;} .sub_menu{margin-bottom: 37px;} .sub_menu ul{font-size: 0; text-align: center;} .sub_menu ul li{position:relative; display: inline-block; margin: 0 22px;} .sub_menu ul li:after{content: ''; position: absolute; right: -24px; top: 0; bottom: 7px; margin: auto 0; width:4px; height: 4px; border-radius: 50%; background-color: #6f6f6f;} .sub_menu ul li:last-child:after{display: none;} .sub_menu ul li a{position:relative; display: block; line-height: 1; font-size: 15px; font-weight: 500; color:#666666; padding-bottom: 7px;} .sub_menu ul li a:hover{color:#2371c3} .sub_menu ul li.on a:after{content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #2371c3;} .sub_menu ul li.on a{color:#2371c3} /*sub0101*/ .sub0101{position:relative;} .sub0101 div{position:absolute;bottom:297px;left:50%;margin-left:-390px;background:url(/images/sub/sub0101_img1.png)center center no-repeat;width:780px;height:128px;text-align:center;} .sub0101 div a{ display: block;width:100%;line-height:128px;color:#fff;font-size:55px;font-family: 'TmonMonsori';} .sub0101 div a span{position:relative;} .sub0101 div a span:before{width:16px;height:16px;left:-50px;top:20px;background:url(/images/sub/sub0101_img2.png)no-repeat;content:'';position:absolute;} .sub0101 div a span:after{width:16px;height:16px;right:-50px;top:20px;background:url(/images/sub/sub0101_img2.png)no-repeat;content:'';position:absolute;} /*sub01_view*/ .sub01_view{background: url(/images/sub/sub01_view.jpg)center center no-repeat; padding: 60px 0 100px;} .sub01_view .sub01_view_list{display:flex;flex-wrap:wrap;} .sub01_view .sub01_view_list li{box-shadow: 7px 8px 10px rgba(0, 0, 0, .3);width:100%;padding:37px 50px;background:url(/images/sub/sub0101_view1_new.png)no-repeat;border-radius:15px;margin-top:40px;} .sub01_view .sub01_view_list li:nth-child(2){background:url(/images/sub/sub0101_view2_new.png)no-repeat;} .sub01_view .sub01_view_list li:nth-child(3){background:url(/images/sub/sub0101_view3_new.png)no-repeat;} .sub01_view .sub01_view_list li:nth-child(1){margin-top:0;} .sub01_view .sub01_view_list li em{display:block;margin-bottom:5px;font-size:34px;font-weight:700;font-family: 'GmarketSans';background: linear-gradient(to top, #c9995f, #eae685); color: transparent;-webkit-background-clip: text;} .sub01_view .sub01_view_list li em span{margin-left:10px;color:#fff;font-size:15px;font-weight:400;font-family: 'SCDream';} .sub01_view .sub01_view_list li > p{color:#fff;} .sub01_view .sub01_view_list li > div{display:flex;flex-wrap:wrap; align-items: flex-end;margin-top:25px} .sub01_view .sub01_view_list li > div div{width:170px;line-height:43px;height:45px;text-align:center;border: 1px solid transparent; border-radius: 300px; background-image: linear-gradient(#242424, #242424), linear-gradient(to top, #c9995f, #eae685); border-image-slice: 1; display: block; background-origin: border-box;background-clip: content-box, border-box;} .sub01_view .sub01_view_list li > div div a{background: linear-gradient(to top, #c9995f, #eae685); color: transparent;-webkit-background-clip: text;display:block;} .sub01_view .sub01_view_list li div p{color: #fff;font-size: 18px;margin-left: 20px;line-height:1;} .sub01_view .sub01_view_list li div p strong{background: linear-gradient(to top, #c9995f, #eae685); color: transparent;-webkit-background-clip: text;font-size:30px;margin:0 5px 0 20px} .sub01_view .sub01_view_list li em.color1{display:block;margin-bottom:5px;font-size:34px;font-weight:700;font-family: 'GmarketSans';background: linear-gradient(to top, #5D2E1E, #E49572); color: transparent;-webkit-background-clip: text;} .sub01_view .sub01_view_list li > div div.color1_1{width:170px;line-height:43px;height:45px;text-align:center;border: 1px solid transparent; border-radius: 300px; background-image: linear-gradient(#242424, #242424), linear-gradient(to top, #5D2E1E, #E49572); border-image-slice: 1; display: block; background-origin: border-box;background-clip: content-box, border-box;} .sub01_view .sub01_view_list li > div div a.color1_2{background: linear-gradient(to top, #5D2E1E, #E49572); color: transparent;-webkit-background-clip: text;display:block;} .sub01_view .sub01_view_list li div p strong.color1_3{background: linear-gradient(to top, #5D2E1E, #E49572); color: transparent;-webkit-background-clip: text;font-size:30px;margin:0 5px 0 20px} .sub01_view .sub01_view_list li em.color2{display:block;margin-bottom:5px;font-size:34px;font-weight:700;font-family: 'GmarketSans';background: linear-gradient(to top, #9FA6AC, #E2E3E7); color: transparent;-webkit-background-clip: text;} .sub01_view .sub01_view_list li > div div.color2_1{width:170px;line-height:43px;height:45px;text-align:center;border: 1px solid transparent; border-radius: 300px; background-image: linear-gradient(#242424, #242424), linear-gradient(to top, #9FA6AC, #E2E3E7); border-image-slice: 1; display: block; background-origin: border-box;background-clip: content-box, border-box;} .sub01_view .sub01_view_list li > div div a.color2_2{background: linear-gradient(to top, #9FA6AC, #E2E3E7); color: transparent;-webkit-background-clip: text;display:block;} .sub01_view .sub01_view_list li div p strong.color2_3{background: linear-gradient(to top, #9FA6AC, #E2E3E7); color: transparent;-webkit-background-clip: text;font-size:30px;margin:0 5px 0 20px} .sub01_view .layer_wrap{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index:10000; opacity:0;} .sub01_view .layer_wrap.on{opacity:1;} .sub01_view .layer_wrap .layer_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index:50;background-color:rgba(0,0,0,0.7);} .sub01_view .layer_wrap .pop_wrap{position: absolute;top: 50%; left: 50%;transform: translate(-50%,-50%);width: 600px; max-width:100%; z-index:100;} .sub01_view .layer_wrap .pop_wrap .pop_pos{position: relative; width: 100%; height: 100%;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con{} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con > div{background:#fff;padding:40px 50px} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con .top{background:#f7f7f7;padding:20px 30px;display:flex; align-items: center;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con .top p{font-weight:700;color:#222;font-size:20px;margin-left:20px;padding-left:20px;position:relative;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con .top p:before{left:0;width:1px;height:20px;background:#ddd;position:absolute;top:10px;content:'';} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con table{width:100%;table-layout: fixed;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con table tr{border-bottom:1px solid #ddd;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con table tbody tr:nth-child(1){border-top:1px solid #ddd;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con table tr th{color:#222;font-size:15px;padding:15px 20px;font-weight:400;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con table tr td{color:#555;font-size:15px;padding:15px 20px;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con table tr td .select{border:1px solid #ddd;padding:0 10px;height:45px;width:150px;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con .bottom{display:flex;flex-wrap:wrap;justify-content: center; margin-top: 30px;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con .bottom li{width:150px;height:50px;line-height:50px;text-align:center;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con .bottom li a{color:#fff;background:#2371c3;width:100%;display:block;border-radius:50px;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con .bottom li.pop_close{margin-left:20px;} .sub01_view .layer_wrap .pop_wrap .pop_pos .pop_con .bottom li.pop_close a{color:#2371c3;background:#fff;border:1px solid #2371c3} html.open{overflow: hidden} body.open{overflow: hidden} /*sub0201*/ .sub_list{padding-top: 40px; border-top:1px solid #ddd;} .sub_list ul{display: flex; flex-wrap:wrap;} .sub_list ul li{width: 285px; margin-right: 20px; margin-top: 27px;} .sub_list ul li:nth-child(-n + 4){margin-top: 0;} .sub_list ul li:nth-child(4n){margin-right: 0;} .sub_list ul li .img_wrap{position:relative; padding-bottom: 100%; overflow:hidden;;} .sub_list ul li .img_wrap .tag{position:absolute; width: 50px; height: 27px; text-align: center; line-height: 27px; font-size:11px; color:#fff; background-color: #ed7980; z-index: 10;} .sub_list ul li .img_wrap img{position:absolute; left: 0; top: 0; bottom: 0; right: 0; margin :auto; width:auto; height:auto; max-width:100%; max-height: 100%; transition: 0.5s;} .sub_list ul li .txt{padding-top: 24px;} .sub_list ul li .txt span{display: block; line-height: 1; font-size:15px; margin-bottom: 14px;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} .sub_list ul li .txt span a{ color:#306ac2;} .sub_list ul li .txt em{display: block; font-size: 18px; line-height: 1; font-weight: 500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} .sub_list ul li .txt em a{ color:#222;} .sub_list ul li .txt .bot{display: flex; justify-content:space-between; font-size: 0; margin-top: 18px;} .sub_list ul li .txt .bot .price p{display: inline-block; line-height: 1; font-size: 15px; color:#222; margin-right: 14px;} .sub_list ul li .txt .bot .price b{display: inline-block; line-height: 1; font-size: 15px; font-weight: 400;color:#ed7980; } .sub_list ul li .txt .bot select{border:none; font-size: 15px; color:#666666; border: none; width:75px; line-height: 15px; height: 15px;text-align: right; padding-right: 23px; background: url(/images/main/main_sel.png)center right no-repeat; -webkit-appearance: none; -moz-appearance: none;appearance: none;} .sub_list ul li .txt .bot select::-ms-expand {display: none;} .sub_list ul li:hover .img_wrap img{transform: scale(1.2);} .paging_wrap{text-align:center; box-sizing:border-box; margin-top: 60px;} .paging_wrap:before, .paging_wrap:after{box-sizing:inherit;} ul.paging{display:inline-block; font-size:0; } ul.paging li{display:inline-block; margin:0 2px; vertical-align:middle; } ul.paging li img{vertical-align:middle; } ul.paging li a{display:block; width:40px; height:40px; border:1px solid #dddddd; font-size:12px; color:#999999; line-height:38px; font-weight:bold; } ul.paging li.page_arrow a{line-height:34px; } ul.paging li.on{background:#2371c3; } ul.paging li.on a{color:#ffffff; border:1px solid #2371c3; } /*sub02_view*/ .view_wrap{} .view_wrap .view_top {width:100%;display:flex;flex-wrap:wrap} .view_wrap .view_top .view_img {width:614px;display:flex;flex-wrap:wrap} .view_wrap .view_top .view_img .big_img {position:relative; width:490px; height:490px;} .view_wrap .view_top .view_img .big_img li div{position: relative;padding-bottom: 100%; overflow: hidden;width:100%;height:0;} .view_wrap .view_top .view_img .big_img li div img {width:auto;height:auto;max-width:100%;max-height:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto} .view_wrap .view_top .view_img .view_slider {position:relative; margin-right:6px;width:118px;height: calc(100% + 6px);} .view_wrap .view_top .view_img .view_slider li {width: 118px !important; height:118px; margin-bottom:6px; outline:0 !important;} .view_wrap .view_top .view_img .view_slider li div {position: relative;padding-bottom: 100%; overflow: hidden;width:100%;height:0;} .view_wrap .view_top .view_img .view_slider li div img {width:auto;height:auto;max-width:100%;max-height:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto} .view_wrap .view_top .view_img .view_slider li.slick-current {border:2px solid #2371c3;} .view_wrap .view_top .view_txt {width:calc(100% - 614px);padding-left:60px;} .view_wrap .view_top .view_txt .category .new{color:#ED7980} .view_wrap .view_top .view_txt .category .best{color:#2371c3} .view_wrap .view_top .view_txt > h4 {font-size:25px; color:#222; font-weight:500; line-height: 32px; margin-top:10px;} .view_wrap .view_top .view_txt .desc {font-size:15px; color:#666; line-height:25px; margin-top:10px;} .view_wrap .view_top .view_txt .txt_bottom {margin-top:16px; padding:13px 0 21px; border-top:1px solid #8d8480; border-bottom:1px solid #ddd;} .view_wrap .view_top .view_txt .txt_bottom > li {align-items: center; margin-top:15px; font-size:15px; color:#666;display: flex; justify-content: space-between;min-height: 25px;} .view_wrap .view_top .view_txt .txt_bottom > li:first-child {margin-top:0;} .view_wrap .view_top .view_txt .txt_bottom > li label{width: 200px; padding-left: 10px;color:#555;position:relative;} .view_wrap .view_top .view_txt .txt_bottom > li label:before {content:''; position:absolute; top:12px; left:0; width:3px; height:3px; border-radius:50%; background:#2371c3;} .view_wrap .view_top .view_txt .txt_bottom > li .input_wrap{width:calc(100% - 200px);height:40px;padding:0 10px;border:1px solid #ddd;outline:0;} .view_wrap .view_top .view_txt .txt_bottom > li.text_wrap{align-items: flex-start;} .view_wrap .view_top .view_txt .txt_bottom > li .text_box{width:calc(100% - 200px);height:100px;padding:0 10px;border:1px solid #ddd;outline:0;} .view_wrap .view_top .view_txt .txt_bottom > li .selct_wrap{width:calc(100% - 200px);height:40px;padding:0 10px;border:1px solid #ddd;outline:0;background: url(/images/main/main_sel.png)97% center no-repeat; -webkit-appearance: none;-moz-appearance: none;appearance: none;} /* .view_wrap .view_top .view_txt .txt_bottom > li span {position:absolute; left:10px; top:1px; color:#555;} .view_wrap .view_top .view_txt .txt_bottom > li em {position:relative; display:inline-block; width:auto; padding:0 5px; color:#bbb;} .view_wrap .view_top .view_txt .txt_bottom > li em:before {content:''; position:absolute; top:50%; margin-top:1px; left:0; width:100%; height:1px; background:#aaa;} .view_wrap .view_top .view_txt .txt_bottom > li strong {display:block; line-height:26px; font-size:18px; color:#2371c3;} .view_wrap .view_top .view_txt .txt_bottom > li .select{display:flex;flex-wrap:wrap;} .view_wrap .view_top .view_txt .txt_bottom > li .select li{width:98px;height:38px;line-height:36px;margin-right:8px;margin-top:8px;} .view_wrap .view_top .view_txt .txt_bottom > li .select li:nth-child(-n+4){margin-top:0;} .view_wrap .view_top .view_txt .txt_bottom > li .select li:nth-child(4n){margin-right:0;} .view_wrap .view_top .view_txt .txt_bottom > li .select li input[type="radio"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } .view_wrap .view_top .view_txt .txt_bottom > li .select li input[type="radio"] + label{border-radius:5px;position: relative;cursor: pointer;font-size:14px;display: block; text-align: center;} .view_wrap .view_top .view_txt .txt_bottom > li .select li input[type="radio"] + label:before{border-radius:5px;content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 98px; height: 38px;text-align: center;background: #fff;border: 1px solid #ddd;box-sizing: border-box; z-index: -1;} .view_wrap .view_top .view_txt .txt_bottom > li .select li input[type="radio"] + label:hover{color:#2371c3;} .view_wrap .view_top .view_txt .txt_bottom > li .select li input[type="radio"] + label:hover:before{content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 98px; height: 38px;text-align: center;background: #fff;border: 1px solid #2371c3;box-sizing: border-box; z-index: -1;} .view_wrap .view_top .view_txt .txt_bottom > li .select li input[type="radio"]:checked + label{color:#fff} .view_wrap .view_top .view_txt .txt_bottom > li .select li input[type="radio"]:checked + label:before{ content: ''; background: #2371c3;border: 1px solid #2371c3;}*/ .view_wrap .view_top .view_txt .total_price {width:100%; padding-top:20px;display:flex;justify-content: space-between;} .view_wrap .view_top .view_txt .total_price em {font-size:18px; color:#666; padding-top:8px; line-height:1;} .view_wrap .view_top .view_txt .total_price div{display:flex;align-items: center;} .view_wrap .view_top .view_txt .total_price div p{font-size:18px; color:#2371c3;font-weight:500;} .view_wrap .view_top .view_txt .total_price div p strong{font-size:15px;color:#666;font-weight:400;} .view_wrap .view_top .view_txt .total_price div span{margin:0 10px;} /* .view_wrap .view_top .view_txt .total_price span {font-size:15px; color:#666; line-height:1;} .view_wrap .view_top .view_txt .total_price span strong {font-size:25px; color:#2371c3; vertical-align:-2px;} */ .view_wrap .view_top .view_txt .btn_wrap {margin-top:30px;width:100%;display:flex;} .view_wrap .view_top .view_txt .btn_wrap a.buy {border-radius:300px;display:block;width:336px;height:55px; background:#2371c3; font-size:16px; color:#fff; line-height:53px; text-align:center;} .view_wrap .view_top .view_txt .btn_wrap a.cart{border-radius: 300px; display: block;width: 175px;margin-right: 15px;height: 55px;background: #6f6f6f; font-size: 16px; color: #fff; line-height: 53px;text-align: center;} .view_wrap .view_con {width:100%; margin-top:60px;} .view_wrap .view_con .tab_tit li {float:left; width:25%; height:55px; border:1px solid #ddd; border-bottom:1px solid #2371c3; border-right:0; font-size:15px; color:#333; line-height:53px; text-align:center; cursor:pointer;} .view_wrap .view_con .tab_tit li:last-child {border-right:1px solid #ddd;} .view_wrap .view_con .tab_tit li.on {border:1px solid #2371c3; border-bottom:1px solid #fff;} .view_wrap .view_con .tab_tit li.on + li {border-left:0;} .view_wrap .view_con .tab_con {margin-top:50px;} /*sub0901*/ .sub0901{} .sub0901 .sub0901_list{display:flex;flex-wrap:wrap;} .sub0901 .sub0901_list li{width:585px;margin-right:30px;margin-top:30px;} .sub0901 .sub0901_list li:nth-child(2n){margin-right:0;} .sub0901 .sub0901_list li:nth-child(-n+2){margin-top:0;} .sub0901 .sub0901_list li a{display:block;width:100%;} .sub0901 .sub0901_list li a .img_area{position:relative;border-radius:10px;overflow:hidden;} .sub0901 .sub0901_list li a .img_area > p{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;text-align:center;line-height:280px;color:#fff;font-size:18px;font-weight:500;z-index:1;background:rgba(0,0,0,0.7);} .sub0901 .sub0901_list li a .img_area .img_wrap{position: relative;width:100%;height:0; padding-bottom:47.86%;overflow: hidden;} .sub0901 .sub0901_list li a .img_area .img_wrap img{ transition: 0.5s;position: absolute; left: 0; top: 0; bottom: 0; right: 0;margin: auto; width: auto; height: auto;max-width: 100%;max-height: 100%;} .sub0901 .sub0901_list li:hover a .img_area .img_wrap img{ transform: scale(1.2);} .sub0901 .sub0901_list li a .text_wrap{margin-top:20px;} .sub0901 .sub0901_list li a .text_wrap em{font-size:18px;line-height:1.2;color:#222;font-weight:500;display:block;text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;overflow: hidden;} .sub0901 .sub0901_list li a .text_wrap p{margin-top:10px;color:#666;} /*number_wrap*/ .number_wrap{} .number_wrap table{border-top: 2px solid #2371c3;width: 100%;table-layout: fixed;} .number_wrap table thead tr{border-bottom:1px solid #ddd;} .number_wrap table thead th{background: #f7f7f7; padding: 20px 25px;color: #222;} .number_wrap table tbody tr{border-bottom:1px solid #ddd;} .number_wrap table tbody td{padding: 20px 25px;text-align:center;} .number_wrap table tbody td a{background: #2371c3;cursor: pointer;height: 40px; line-height: 40px; font-size: 13px;width: 100px; border-radius: 5px;color: #fff;display:block;margin:0 auto;} /*number_view*/ .h4_tit{ padding-left: 30px;position:relative;font-size:22px;color:#222;font-weight:500;margin-bottom:25px;line-height:1} .h4_tit:before{width:20px;height:20px;border-radius:50%;border:5px solid #2371c3;position:absolute;left:0;top:2px;content:'';} .number_view{} .number_view .con1{margin-bottom:60px;} .number_view .con1 table{border-top: 2px solid #2371c3;width: 100%;table-layout: fixed;} .number_view .con1 table tbody th{background: #f7f7f7; padding: 20px 25px;color: #222;} .number_view .con1 table tbody tr{border-bottom:1px solid #ddd;} .number_view .con1 table tbody td{padding: 20px 25px;text-align:left;} .number_view .link_wrap{margin: 40px auto 0;background: #2371c3;height: 50px; width: 150px; line-height: 48px;border-radius: 5px;} .number_view .link_wrap a{font-size: 15px;color: #fff;display:block;text-align:center} .number_view .con2 > p{text-align:right;color:#ff0000} .number_view .con2 .tit_txt{margin:15px 0 20px} .number_view .con2 .tit_txt ul{display:flex;background:#f7f7f7;border:1px solid #ddd;border-top:2px solid #2371c3;padding:0 25px;} .number_view .con2 .tit_txt ul li{text-align: center;padding: 20px 0px; color: #222;font-weight:700;} .number_view .con2 .tit_txt ul li.episode{width:10%} .number_view .con2 .tit_txt ul li.date{width:12%} .number_view .con2 .tit_txt ul li.num{width:38%} .number_view .con2 .tit_txt ul li.rating1{width:10%} .number_view .con2 .tit_txt ul li.arr{width:7%} .number_view .con2 .tit_txt ul li.prc{width:23%} .number_view .con2 .con_con > li{cursor: pointer;background:#fff;border:1px solid #ddd;padding: 20px 25px;margin-top:10px} .number_view .con2 .con_con .top ul{display:flex;align-items: center;} .number_view .con2 .con_con .top li{text-align:center;} .number_view .con2 .con_con .top li.episode{width:10%} .number_view .con2 .con_con .top li.date{width:12%} .number_view .con2 .con_con .top li.num{width:38%;display:flex;align-items: center;justify-content: center;} .number_view .con2 .con_con .top li.num .ball{width:40px;height:40px;text-align:center;line-height:34px;border-radius:50%;color:#fff;margin-right:5px} .number_view .con2 .con_con .top li.num .ball.num1{background-color: #916e01;border: 3px solid #684f00;} .number_view .con2 .con_con .top li.num .ball.num2{background-color: #03a2da;border: 3px solid #007fac;} .number_view .con2 .con_con .top li.num .ball.num3{background-color: #d3411e;border: 3px solid #b9300f;} .number_view .con2 .con_con .top li.num .ball.num4{background-color: #7f7f7f;border: 3px solid #595959;} .number_view .con2 .con_con .top li.num .ball.num5{background-color: #009453;border: 3px solid #007642;} .number_view .con2 .con_con .top li.num .bonus{width: 14px;height: 14px;background: url(/images/main/main_x.png)center no-repeat;margin: 0 10px;} .number_view .con2 .con_con .top li.rating1{width:10%} .number_view .con2 .con_con .top li.arr{width:7%;background: url(/images/main/main_sel.png)center center no-repeat; margin: 0 auto;height: 6px;} .number_view .con2 .con_con .top li.prc{width:23%;} .number_view .con2 .con_con .top li.nothing{width:78%;text-align:center;font-weight:700;color:#222;} .number_view .con2 .con_con .bottom {display:none} .number_view .con2 .con_con .bottom ul{display:flex;align-items: center;flex-wrap: wrap;margin-top:20px;} .number_view .con2 .con_con .bottom ul li{border-top:1px dashed #ddd;padding:20px 0;width:50%;text-align:center;display:flex;align-items: center;} .number_view .con2 .con_con .bottom ul li:nth-child(9),.number_view .con2 .con_con .bottom ul li:last-child{padding:20px 0 0} .number_view .con2 .con_con .bottom ul li:nth-child(-n+2){border-top:1px solid #ddd;} .number_view .con2 .con_con .bottom ul li .episode{width:20%} .number_view .con2 .con_con .bottom ul li .num{width:80%;display:flex;align-items: center;} .number_view .con2 .con_con .bottom ul li .num .ball{width:40px;height:40px;text-align:center;line-height:34px;border-radius:50%;color:#fff;margin-right:5px} .number_view .con2 .con_con .bottom ul li .num .ball.num1{background-color: #916e01;border: 3px solid #684f00;} .number_view .con2 .con_con .bottom ul li .num .ball.num2{background-color: #03a2da;border: 3px solid #007fac;} .number_view .con2 .con_con .bottom ul li .num .ball.num3{background-color: #d3411e;border: 3px solid #b9300f;} .number_view .con2 .con_con .bottom ul li .num .ball.num4{background-color: #7f7f7f;border: 3px solid #595959;} .number_view .con2 .con_con .bottom ul li .num .ball.num5{background-color: #009453;border: 3px solid #007642;} .number_view .con2 .con_con li.on .top li.arr{background: url(/images/main/main_sel.png)center center no-repeat; transform: rotatez(-180deg);} .form-container input { color: #fff; box-shadow: none !important; border-bottom:2px solid #fff !important; font-size:1.35rem !important; } .form-container label { color: #fff !important; } .form-container input::placeholder { color: #fff; } button.btn.waves-effect.waves-light { width: 100%; height: 50px; padding: 0 20px; box-shadow: none; border: 1px solid #e58246; background: #e58246; color: #ffffff; font-size: 1.35rem; } .form-container h5 {padding-bottom: 15px;color: #fff;} form.col.s12 { text-align: center; } .form-container { background-color: #1e2f5b; /* #0075ff보다 조금 어두운 색상 */ padding: 20px; } .input-field { color: #ffffff; }