@charset "utf-8";


section {width:100%; margin:0 auto}
#touchSlider11 {/*max-width:1980px; */width:100%; height:100%; position:relative; overflow:hidden; margin:0 auto}
#touchSlider11 ul {position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100%}
#touchSlider11 ul li {height:inherit}
#touchSlider2 {width:612px; position:relative; overflow:hidden; height:480px; float:left}
#touchSlider2 ul {position:absolute; top:0; left:0; overflow:hidden; width:612px}
#touchSlider2 ul li {height:480px;  font-size:14px;}


/* main kv */
body#main .content {padding-bottom:80px}
main {width:100%}
main .main-kv {position:relative;  text-align:center; height:555px; max-width:inherit}

.content-obj {display:block; width:100%; height:100%; background:url('./../images/index/index-kv-newyear.png') no-repeat 50%; background-size:cover}
.content-obj .main-auto-slide img {display:block; width:100%}

.content-obj-1 {display:block; width:100%; height:100%; background:url('./../images/index/index-kv-test8.png') no-repeat 50%; background-size:cover}
.content-obj-1 .main-auto-slide img {display:block; width:100%}

.content-obj-2 {display:block; width:100%; height:100%; background:url('./../images/index/index-kv-test1.png') no-repeat 50%; background-size:cover}
.content-obj-2 .main-auto-slide img {display:block; width:100%}

.content-obj-3 {display:block; width:100%; height:100%; background:url('./../images/index/index-kv-test2.png') no-repeat 50%; background-size:cover}
.content-obj-3 .main-auto-slide img {display:block; width:100%}

.content-obj-4 {display:block; width:100%; height:100%; background:url('./../images/index/index-kv-test3.png') no-repeat 50%; background-size:cover}
.content-obj-4 .main-auto-slide img {display:block; width:100%}

.content-obj-5 {display:block; width:100%; height:100%; background:url('./../images/index/index-kv-test4.png') no-repeat 50%; background-size:cover}
.content-obj-5 .main-auto-slide img {display:block; width:100%}

.content-obj-6 {display:block; width:100%; height:100%; background:url('./../images/index/index-kv-test5.png') no-repeat 50%; background-size:cover}
.content-obj-6 .main-auto-slide img {display:block; width:100%}

.content-obj-7 {display:block; width:100%; height:100%; background:url('./../images/index/index-kv-test6.png') no-repeat 50%; background-size:cover}
.content-obj-7 .main-auto-slide img {display:block; width:100%}


/* 01 sgi란 */
main .main-kv.sgi {background:url('./../images/sgi/main-kv.png') no-repeat center; background-size:cover; color:#fff}
main .main-kv.sgi .content-obj {background:none !important}

/* 02 이케다선생님 */
main .main-kv.ikeda {background:url('./../images/ikeda/main-kv.png') no-repeat center; background-size:cover; color:#fff}
main .main-kv.ikeda .content-obj {background:none !important}


/* 03 주요활동 */
main .main-kv.activity {background:url('./../images/activity/main-kv.png') no-repeat center; background-size:cover; color:#fff}
main .main-kv.activity .content-obj {background:none !important}


/* 04 SGI 철학과 실천 */
main .main-kv.philosophy {background:url('./../images/philosophy/main-kv.png') no-repeat center; background-size:cover; color:#fff}
main .main-kv.philosophy .content-obj {background:none !important}


/* 05 신입회원 */
main .main-kv.new-member {background:url('./../images/new-member/main-kv.png') no-repeat center; background-size:cover; color:#fff}
main .main-kv.new-member .content-obj {background:none !important}


/* 06 회원서비스 */
main .main-kv.cs {background:url('./../images/cs/main-kv.png') no-repeat center; background-size:cover; color:#fff}
main .main-kv.cs .content-obj {background:none !important}


/* 07 SGI멤버쉽 */
main .main-kv.membership {background:url('./../images/membership/main-kv.png') no-repeat center; background-size:cover; color:#fff}
main .main-kv.membership .content-obj {background:none !important}
main .main-kv > ul > li {position:absolute; top:0; left:0; width:100%}
main .main-kv > ul > li:first-child {position:relative; margin-left:0}
main .main-kv .content-txt {top:0; left:0; width:100%; height:100%; position:absolute}

main .kv-title {width:800px; margin:0 auto; padding-bottom:110px; font-size:48px; font-weight:800; letter-spacing:-2.4px;}
main .kv-title .title-sml {display:block; margin-top:23px; font-size:18px; letter-spacing:-0.3px; font-weight:400}
main .kv-title .title-big01 {display:block;  font-size:32px; letter-spacing:-0.5px; font-weight:400}
main .kv-title .title-big02 {display:block;  font-size:80px; letter-spacing:-4px; font-weight:400; margin-top:-15px}

.index-kv .content-txt {position:static}
main .index-kv .index-cont-txt.content-obj-1-txt {max-width:773px}
main .main-kv .kv-title img {display:block; max-width:100%; margin:6px auto 0}
main .main-kv .align-left {text-align:left}
main .main-kv .bigger_txt .valign {max-width:1076px}
main .main-kv .bigger_txt .kv-title {font-size:89.5px; line-height:1.2}

/* kv 서브 네비 */
main .main-kv .kv-sub-gnb {height:60px; max-width:1224px; width:100%; position:absolute; bottom:0; left:50%; margin-left:-612px; z-index:10}
main .main-kv .kv-sub-gnb .kv-sub-gnb-colorbar {width:100%; height:60px; background-color:#7c8794; position:absolute; left:-1224px; bottom:0}
main .main-kv .kv-sub-gnb > ul {/*overflow:hidden; */}
main .main-kv .kv-sub-gnb > ul >li {width:250px; height:60px; font-weight:600; font-size:14px; line-height:60px; letter-spacing:-0.7px; position:relative; float:left; text-align:left; background-color:#fff; cursor:pointer}
main .main-kv .kv-sub-gnb > ul >li::after {content:''; display:block; position:absolute; top:50%; right:31px; margin-top:-7px; width:14px; height:14px; background:url('./../images/icon/sub-gnb.png') no-repeat center}
main .main-kv .kv-sub-gnb > ul >li:first-child::after {display:none}
main .main-kv .kv-sub-gnb > ul >li:first-child {width:60px; height:60px; padding-left:0; background-color:#00162e; background-image:none; border-left:none; text-align:center}
main .main-kv .kv-sub-gnb > ul >li:first-child>img {vertical-align:middle}
main .main-kv .kv-sub-gnb > ul >li:last-child {border-right:1px solid #e1e1e1}
main .main-kv .kv-sub-gnb > ul >li:last-child .active-fix {font-size:15px}
main .main-kv .kv-sub-gnb > ul >li >ul {margin-top:-1px; border-width:0 1px 1px 1px; border-style:solid; border-color:#e1e1e1}
main .main-kv .kv-sub-gnb > ul >li >ul#gnb_a {margin-top:0}
main .main-kv .kv-sub-gnb > ul >li >ul >li {display:block; border-top:1px solid #e1e1e1; background-color:#fff}
main .main-kv .kv-sub-gnb > ul >li >ul >li:first-child {border-top:0}
main .main-kv .kv-sub-gnb > ul >li >ul >li.kv-sub-gnb-active {display:block}
main .main-kv .kv-sub-gnb > ul >li >ul >li >a {color:#000; font-weight:200}
main .main-kv .kv-sub-gnb > ul >li >ul >li a {display:block; padding:0 0 0 30px}
main .main-kv .kv-sub-gnb > ul >li >ul >li a:hover {background:#f5f5f5; text-decoration:none}

.active-fix {height:60px; padding-left:30px; color:#000; border-width:0 0 1px 1px; border-style:solid; border-color:#e1e1e1}
.active-fix:hover {background:#f5f5f5}

/******************** index ********************/
.index-kv {position:relative; overflow:hidden; max-width:inherit; height:940px}
.index-kv .index-cont-txt {max-width:730px; width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff}
.index-kv .index-cont-txt .valign .middle .kv-title >span {display:block; font-weight:200; text-shadow:3px 3px 3px rgba(0,0,0,0.1); line-height:1.5}
.index-kv .content-obj-1-txt .valign .middle .kv-title > span {font-weight:400}
.index-kv .content-obj-1-txt .valign .middle .kv-title .title-big02 {margin-top:5px; font-weight:700}
.index-kv .content-obj-1-txt .valign .middle .kv-title .title-big01 b {font-weight:900}
.index-section h2::before {content:""; display:inline-block; clear:both; width:60px; height:2px; vertical-align:middle; background-color:#000; margin-right:30px}
.index-section h2::after {content:""; display:inline-block; clear:both; width:60px; height:2px; vertical-align:middle; background-color:#000; margin-left:30px}
.index-section h2 {font-weight:900; font-size:20px; letter-spacing:-1px; margin-bottom:40px}

.index-kv .ts-controls {display:none}
.content-obj .main-auto-slide {width:100%; height:100%}

/* section1 오늘의 명언 */
.section1 {font-family:'notoserif'; color:#fff; padding: 100px 0 30px; max-width:inherit; position:relative}
.section1 .arrowb {display:block; width:100px; height:100px; position:absolute; top:-50px; left:50%; transform:translate(-50%,18%)}
.section1 .content {width:95%; max-width:1224px; margin:0 auto; padding-bottom:0px}
.section1 p {font-size:20px; line-height:1.8em; letter-spacing:-1px; font-weight:400; font-family:'notoserif' !important}
.index-section.section1 h2::before {background-color:#fff}
.index-section.section1 h2::after {background-color:#fff}

/* section2 SGI소식 */
.section2 {padding:120px 100px 90px 100px; overflow:hidden; max-width:inherit}
.section2 .content {width:95%; max-width:1224px; margin:0 auto; overflow:hidden; padding-bottom:0}
.section2 .content >div {max-width:392px; width:100%; text-align:center; color:#666; float:left; margin-right:24px}
.section2 .content >div:nth-child(3) {margin-right:0}
.section2 .content >div >div {padding:54px 0 58px; margin-bottom:18px; background-color:#fff; height:272px}
.section2 .content >div >div:nth-child(2) {margin-bottom:0}
.section2 .content div strong {font-weight:900; font-size:24px; letter-spacing:-1.2px; color:#333; display:block; margin-bottom:10px}
.section2 .content div p {letter-spacing:-0.8px}
.section2 .content div a {display:block; width:104px; height:36px; line-height:36px; font-size:12px; border-radius:30px; border:solid 1px rgba(0, 0, 0, 0.2); margin:30px auto 0}
.section2 .content div a:hover {background:#333; border:0; color:#fff; text-decoration:none}
.section2 .content div.bg {color:#fff; height:562px; position:relative; overflow:hidden}
.section2 .content div.bg .bg-imgg {display:block; overflow:hidden}
.section2 .content div.bg .bg-imgg img {height:100%}
.section2 .content div.bg .bg-tit {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-color:transparent !important}
.section2 .content div.bg strong {color:#fff}
.section2 .content div.bg a {border:solid 1px #fff; color:#fff}
.section2 .content div.bg a:hover {border-color:#333}

/* section3 영상 */
.section3 {background:url('./../images/index/3-bg.png') no-repeat center / 100%; background-size:cover; overflow:hidden; max-width:inherit}
.section3 .content {width:95%; max-width:1224px; margin:0 auto; padding-top:110px; padding-bottom:110px}
.section3-video {position:relative}
#touchSlider {max-width:800px; width:100%; position:relative; overflow:hidden; margin:0 auto}
#touchSlider ul {position:absolute; top:0; left:0; overflow:hidden;}
#touchSlider ul li {height:550px}
#touchSlider ul li img {width:100%}
#touchSlider ul li > span {/* position:absolute; *//* left:50%; *//* bottom:-15%; *//* transform:translate(-50%, -50%); */padding-top:40px; display:block; font-size:16px; letter-spacing:-0.8px; color:#000}
.ts-paging-btn {display:none}
.section3-video .ts-prev {font-size:0; width:60px; height:60px; background:url("./../images/icon/bt-scroll-l.png") no-repeat 0 0 / 100%; position:absolute; left:0; top:50%; transform:translateY(-50%); border:none}
.section3-video .ts-next {font-size:0; width:60px; height:60px; background:url("./../images/icon/bt-scroll-r.png") no-repeat 0 0 / 100%; position:absolute; right:0; top:50%; transform:translateY(-50%); border:none}


/* section4 뉴스 */
.section4 {padding:100px 0; border-bottom:1px solid #e0e0e0; max-width:inherit}
.section4 .content {width:95%; max-width:1224px; margin:0 auto; padding-bottom:0}
.section4 ul {overflow:hidden}
.section4 ul li {max-width:288px; width:100%; float:left; margin-right:24px; text-align:left}
.section4 ul li > a {display:block}
.section4 ul li > a:hover {text-decoration:none}
.section4 ul li:last-child {margin-right:0}
.section4 ul li p {word-break:break-word}
.section4 ul li p:first-child {margin-bottom:20px; height:180px; overflow:hidden; word-break:break-word; background:#f5f5f5 url('../images/icon/logo-blk_gray.png') no-repeat 50%}
.section4 ul li p:first-child img {width:100%; min-height:180px}
.section4 ul li p:last-child strong {display:block; margin-bottom:20px; word-break:break-word}
.section4 ul li p:last-child span {display:block; word-break:break-word; font-size:14px; color:#666}

/* section5 탭 */
.section5 {padding-top:100px}
.section5 .page-sub-tab {text-align:center; overflow:hidden}
.section5 .page-sub-tab .tab {display:inline-block}
.section5 .page-sub-tab .tab li {font-weight:900; font-size:20px; letter-spacing:-1px; color:#ccc; float:left; margin:0 21px 60px}
.section5 .page-sub-tab .tab li.page-sub-tab-active {color:#000; position:relative}
.section5 .page-sub-tab .tab li.page-sub-tab-active::after {content:""; clear:both; display:block; width:100%; height:3px; background-color:#000; position:absolute; bottom:-2px; left:0}
.section5 .devide4 ul {width:100%; height:600px; overflow:hidden}
.section5 .devide4 ul li {position:relative; float:left; width:25%; height:600px; cursor:pointer}
.section5 .devide4 ul li > a {display:block; position:absolute; left:0; top:0; z-index:10; display:block; width:100%; height:100%}
.section5 .devide4 ul li > a img {width:100%; height:100%}
.section5 .devide4 ul li > img {position:absolute; left:0; top:0; z-index:10; display:block; width:100%; height:100%}
.section5 .devide4 ul li > div {position:relative; z-index:20; width:90%; height:300px; text-align:center; margin:30% auto 0}
.section5 .devide4 ul li > div span {display:block; margin:0 0 10px 0; font-family:'notoserif'; font-size:20px; color:rgba(255,255,255,0.9)}
.section5 .devide4 ul li > div strong {display:block; font-family:'notoserif'; font-size:48px; color:rgba(255,255,255,0.9); font-weight:500}
.section5 .devide4 ul li > div p {position:relative; margin-top:20px; padding:30px; font-size:16px; color:#fff; word-wrap:break-word; word-break:break-all}
.section5 .devide4 ul li > div p::before {position:absolute; left:50%; top:0; width:12px; height:12px; margin-left:-6px; background:#fff; border-radius:50%; content:''}

.sec5-txt-area {position:absolute; top:25%; left:50%; transform:translateX(-50%); text-align:center; color:#fff; display:block; width:86%}
.sec5-txt-area p {font-family:'notoserif' !important; font-weight:300; font-size:20px}
.sec5-txt-area h3 {font-family:'notoserif' !important; font-weight:100; font-size:48px}
.sec5-txt-area span {display:block; width:12px; height:12px; background-color:#fff; border-radius:50%; margin:24px auto}
.sec5-txt-area i {font-style:normal; font-weight:700; font-size:16px; display:block; line-height:1.4em}

/* section6 탭 */
.section6 .content {width:95%; max-width:1224px; margin:0 auto}
.banner-area {clear:both; overflow:hidden}
.banner-area li {float:left; margin-right:24px; max-width:392px; width:100%}
.banner-area li:nth-child(1) {position:relative; height:600px; padding-top:20px; background:url('../images/index/bg_6-1.png') repeat 0 0}
.banner-area li:nth-child(1)::after {position:absolute; left:0; bottom:0; width:100%; height:295px; background:url('../images/index/6-1-1.png') no-repeat 0 0; background-size:100% auto; content:''}
.banner-area li:nth-child(2) {max-width:808px; width:100%}
.banner-area.pc_only li:nth-child(2n) {margin-right:0}
.banner-area.pc_only li:nth-child(3) {margin-top:24px}
.banner-area.pc_only li:nth-child(4) {margin-top:24px}
.banner-area li a {display:block}
.banner-area li a img {display:block; width:100%}

.slide-banner {position:relative; width:1324px; height:160px; margin:70px 0 0 -50px; padding:0 38px}
.slide-banner .slick-prev {position:absolute; left:0; top:50%; width:36px; height:36px; margin:-18px 0 0 0; border:0; background:url('../images/main/icon_banner_prev.png') no-repeat 50%; font-size:0; text-indent:-99999px}
.slide-banner .slick-next {position:absolute; right:0; top:50%; width:36px; height:36px; margin:-18px 0 0 0; border:0; background:url('../images/main/icon_banner_next.png') no-repeat 50%; font-size:0; text-indent:-99999px}
.slide-banner .slick-slider {width:100%; height:160px; overflow:hidden}
.slide-banner .slick-slider .slick-slide {float:left; padding:0 12px; height:160px}
.slide-banner .slick-slider .slick-slide a {display:block; width:100%; height:160px; padding:30px 40px; background:#000; color:#fff}
.slide-banner .slick-slider .slick-slide a:hover {text-decoration:none}
.slide-banner .slick-slider .slick-slide a span {display:block; font-size:14px; color:#fff}
.slide-banner .slick-slider .slick-slide a strong {display:block; margin-top:5px; font-size:20px; color:#fff}
.slide-banner .slick-slider .slick-slide a button {width:75px; height:28px; margin-top:15px; background:none; border-radius:14px; border:1px solid rgba(255,255,255,0.8); color:#fff; font-size:12px; line-height:25px}
.slide-banner .slick-slider .slick-slide a button:hover {background-color:#fff; color:#222}


/* popup */
.main-modalpop {position:absolute; z-index:50}
.main-modalpop.pop-main {height:763px;}
.main-modalpop.pop-main p {width:100%; font-size:0}
.main-modalpop.pop-main .todayclose {position:relative; height:40px; padding:0 15px; background:#fff}
.main-modalpop.pop-main .todayclose > span:first-child {float:left; margin-top:5px}
.main-modalpop.pop-main .todayclose > span:first-child * {vertical-align:middle}
.main-modalpop.pop-main .todayclose > span:first-child label {margin-left:5px; font-size:13px}
.main-modalpop.pop-main .todayclose > span:last-child {float:right; margin-top:7px}

/*dropdown*/
.dropdown-menu {width:251px}

@media screen and (max-width:1440px) {
	/* main kv*/
	main .main-kv .valign {max-width:85vw}
	main .main-kv .kv-title .title-sml {margin-top:1.6vw; letter-spacing:-0.5px;}
	main .main-kv .kv-title img {margin:0.42vw auto 0}
	main .main-kv .bigger_txt .valign {max-width:85vw}
	main .main-kv .bigger_txt .kv-title {font-size:6.22vw}

	/* kv 서브 네비 */
	main .main-kv .kv-sub-gnb {left:0; margin-left:0}
	main .main-kv .kv-sub-gnb .kv-sub-gnb-colorbar {width:30%; height:60px; left:-24.3vw; bottom:0}
	main .main-kv .kv-sub-gnb > ul >li::after {right:2.15vw; margin-top:-0.49vw; width:14px; height:14px}

	/******************** index ********************/
	.index-kv .index-cont-txt .valign .middle .kv-title {margin-top:30px}
	.index-kv .index-cont-txt .valign .middle .kv-title img {width:100%}
	.index-section h2::before {content:""; display:inline-block; clear:both; width:60px; height:2px; vertical-align:middle; background-color:#000; margin-right:30px}
	.index-section h2::after {content:""; display:inline-block; clear:both; width:60px; height:2px; vertical-align:middle; background-color:#000; margin-left:30px}
	.index-section h2 {font-weight:900; font-size:20px; letter-spacing:-1px; margin-bottom:15px}


	/* section1 오늘의 명언 */
	.section1 {padding:6.94vw 0 5.83vw}
	.section1 p {font-size:20px; line-height:1.8em}

	/* section2 SGI소식 */
	.section2 {padding:8.33vw 6.94vw; overflow:hidden; max-width:inherit}
	.section2 .content >div {max-width:calc((100% - 40px) / 3); margin-right:20px}
	.section2 .content >div >div {height:220px; padding:30px 0}
	.section2 .content div.bg {height:458px}
	.section2 .content div p {font-size:14px; line-height:20px}
	.section2 .content div strong {font-size:1.66vw; margin-bottom:0.69vw}
	.section2 .content div a {width:104px; height:36px; line-height:36px; font-size:12px; border-radius:30px; margin:30px auto 0; font-weight:600}

	/* section3 영상 */
	.section3 .content {padding-bottom:7.63vw; padding-top:7.63vw}
	#touchSlider {max-width:55.55vw}
	#touchSlider ul li {height:470px}
	#touchSlider ul li img {width:100%}
	.section3-video .ts-prev {width:45px; height:45px}
	.section3-video .ts-next {width:45px; height:45px}

	/* section4 뉴스 */
	.section4 {padding:6.94vw 0; max-width:inherit}
	.section4 .content {padding-bottom:40px !imporant; margin-bottom:-40px !important}
	.section4 ul li {width:calc((100% - 60px) / 4); max-width:400px; margin-right:0; margin-left:20px}
	.section4 ul li:first-child {margin-left:0}
	.section4 ul li p:first-child {margin-bottom:1.38vw}
	.section4 ul li p:last-child strong {margin-bottom:1.38vw}

	/* section5 탭 */
	.section5 {padding-top:6.94vw}
	.section5 .devide4 ul {height:500px}
	.section5 .devide4 ul li > div span {font-size:16px}
	.section5 .devide4 ul li > div strong {font-size:36px}
	.section5 .devide4 ul li > div p {font-size:15px}
	.section5 .page-sub-tab .tab li {font-weight:900; font-size:20px; letter-spacing:-1px; color:#ccc; float:left; margin:0 1.45vw 4.16vw}
	.sec5-txt-area {position:absolute; top:25%; left:50%; transform:translateX(-50%); text-align:center; color:#fff; width:86%}
	.sec5-txt-area p {font-family:'notoserif' !important; font-weight:300; font-size:1.38vw}
	.sec5-txt-area h3 {font-family:'notoserif' !important; font-weight:100; font-size:2.3vw}
	.sec5-txt-area span {display:block; width:0.83vw; height:0.83vw; background-color:#fff; border-radius:50%; margin:0.97vw auto 1.66vw}
	.sec5-txt-area i {font-style:normal; font-weight:700; font-size:1.11vw}

	/* section6 탭 */
	.section6 .content {width:1000px}
	.banner-area {height:500px; overflow:hidden}
	.banner-area ul {clear:both; overflow:hidden; height:100%}
	.banner-area li {margin-right:20px; max-width:400px}
	.banner-area li:nth-child(1) {width:30%; height:100%; box-sizing:border-box; overflow:hidden; padding-top:40px}
	.banner-area li:nth-child(1)::after {background-position:50% 100%}
	.banner-area li:nth-child(1) img {width:100%}
	.banner-area li:nth-child(2) {width:calc(70% - 20px); max-width:800px; height:calc((100% - 20px) / 2); margin-right:0}
	.banner-area.pc_only li:nth-child(3) {width:calc((70% - 40px) / 2); height:calc((100% - 20px) / 2); margin-top:20px}
	.banner-area.pc_only li:nth-child(4) {width:calc((70% - 40px) / 2); height:calc((100% - 20px) / 2); margin-top:20px; margin-right:0}

	#touchSlider2 {width:42.5vw; position:relative; overflow:hidden; height:480px; float:left}
	#touchSlider2 ul {position:absolute; top:0; left:0; overflow:hidden; width:42.5vw}
	#touchSlider2 ul li {height:480px;  font-size:14px;}
	#touchSlider2 ul li img {width:100%}
	#touchSlider2 .ts-prev {display:none}
	#touchSlider2 .ts-next {display:none}

	.slide-banner {max-width:calc(1000px + 100px); margin-top:50px}
}

@media screen and (max-width:1024px) {
	main .main-kv .kv-sub-gnb > ul >li {width:27vw}
	main .main-kv .kv-sub-gnb {width:100%; left:0; margin-left:0}
	.dropdown-menu {width:27.1vw}
	#touchSlider2 {display:none}
	#touchSlider ul li {height:40vw}

	/*body#main .section2 {padding-bottom:0}*/
	body#main .section2 .content {padding-bottom:0}
	.section2 .content div.bg .bg-imgg .pc_only {display:block; width:auto !important; height:458px !important}
	.section2 .content div.bg .bg-imgg .m_only {display:none}
	.section2 .content div.bg .bg-imgg img {width:100%; height:auto}
	.section2 .content div.bg .bg-tit {height:350px}

	.section4 ul li p:first-child {height:130px}
	.section5 .devide4 ul {height:auto}
	.section5 .devide4 ul li {float:left; width:50%; height:auto}
	.section5 .devide4 ul li > img {height:auto}
	.section5 .devide4 ul li > a {height:auto}
	.section5 .devide4 ul li > div {height:auto; margin-bottom:20%}
	.section5 .devide4 ul li > div p {height:90px}
	.section5 .devide4 ul li:nth-child(3) > div {width:95%}
	.section5 .devide4 ul li:nth-child(3) > div p {letter-spacing:-0.5px}
	.section5 .devide4 ul li:nth-child(4) > div p {letter-spacing:-0.5px}

	.section6 .content {width:760px; overflow:hidden}
	.banner-area {height:auto; overflow:visible}
	.banner-area ul {height:auto; overflow:visible}
	.banner-area li:nth-child(1) {width:45%; height:608px; margin-right:15px; margin-bottom:15px}
	.banner-area li:nth-child(2) {width:calc(55% - 15px); height:calc((100% - 15px) / 2)}
	.banner-area li:nth-child(3) {width:calc(55% - 15px); height:calc((100% - 15px) / 2); margin-top:15px; margin-right:0}
	.banner-area li:nth-child(4) {float:none; clear:both; width:100%; max-width:100%; margin:15px 0 0 0}

	.slide-banner {width:calc(100% + 100px); height:140px; margin:40px -40px 20px -60px}
	.slide-banner .slick-list {padding:0 100px 0 0 !important}
	.slide-banner .slick-prev {display:none !important}
	.slide-banner .slick-next {display:none !important}
	.slide-banner .slick-slider {height:140px}
	.slide-banner .slick-slider .slick-slide {padding:0 0 0 20px; height:140px}
	.slide-banner .slick-slider .slick-slide a {height:140px; padding:20px 30px}
	.slide-banner .slick-slider .slick-slide a span {font-size:14px}
	.slide-banner .slick-slider .slick-slide a strong {margin-top:5px; font-size:18px}
	.slide-banner ul.slick-dots {width:100%; height:12px; margin-top:10px; text-align:center}
	.slide-banner ul.slick-dots li {display:inline-block; width:12px; height:12px; margin:0 5px}
	.slide-banner ul.slick-dots li button {width:12px; height:12px; background:#ddd; border:0; border-radius:50%; font-size:0; text-indent:-99999px}
	.slide-banner ul.slick-dots li.slick-active button {background:#222}
}

/*******************************************************************************
                                모바일 mobile
********************************************************************************/

@media screen and (max-width:768px) {
	#touchSlider {max-width:55.55vw; max-height:325px}
	#touchSlider ul li {height:40vw}
	#touchSlider ul li img {width:100%}

	.main-modalpop.pop-main {left:50% !important; top:100px !important; width:480px; margin-left:-240px}
	.main-modalpop.pop-main p img {width:100%}
	.active-fix {padding-left:20px; height:50px; line-height:50px; font-size:15px; color:#222}
	.active-fix:hover {background:0}
	.dropdown-menu {width:calc(100% + 1px)}
	.dropdown-menu li {height:50px; line-height:50px}
	.dropdown-menu li a {height:49px; line-height:49px}

	main .main-kv {height:450px}
	/* 01 sgi란 */
	main .main-kv.sgi {background:url('./../images/sgi/main-kv-m.png') no-repeat center; background-size:cover; color:#fff}

	/* 02 이케다선생님 */
	main .main-kv.ikeda {background:url('./../images/ikeda/main-kv-m.png') no-repeat center; background-size:cover; color:#fff}

	/* 03 주요활동 */
	main .main-kv.activity {background:url('./../images/activity/main-kv-m.png') no-repeat center; background-size:cover; color:#fff}

	/* 04 SGI 철학과 실천 */
	main .main-kv.philosophy {background:url('./../images/philosophy/main-kv-m.png') no-repeat center; background-size:cover; color:#fff}

	/* 05 신입회원 */
	main .main-kv.new-member {background:url('./../images/new-member/main-kv-m.png') no-repeat center; background-size:cover; color:#fff}

	/* 06 회원서비스 */
	main .main-kv.cs {background:url('./../images/cs/main-kv-m.png') no-repeat center; background-size:cover; color:#fff}

	/* 07 SGI멤버쉽 */
	main .main-kv.membership {background:url('./../images/membership/main-kv-m.png') no-repeat center; background-size:cover; color:#fff}
	main .main-kv .kv-title {width:100%; margin:0 auto 0; padding-top:40px; padding-bottom:0; font-size:40px; font-weight:800; letter-spacing:-2.4px;}
	main .main-kv .kv-title .title-sml {display:block; margin-top:23px; font-size:24px; letter-spacing:-0.5px; line-height:32px; font-weight:500}
	main .main-kv .kv-title img {display:block; max-width:100%; margin:6px auto 0}
	main .main-kv .kv-sub-gnb {width:100%; position:absolute; bottom:0; left:0; margin-left:0; height:50px}
	main .main-kv .kv-sub-gnb > ul >li {width:50%; height:50px; line-height:50px; font-size:2.77vw}
	main .main-kv .kv-sub-gnb > ul >li.pc_only {display:none}
	/* main .main-kv .kv-sub-gnb > ul >li.pc_only + .pc_only + li {width:100%} */
	main .main-kv .kv-sub-gnb > ul >li::after {content:''; display:block; position:absolute; top:50%; right:2vw; margin-top:-15px; width:30px; height:30px; background:url('./../images/icon/sub-gnb-m.png') no-repeat center; background-size:20px auto}
	main .main-kv .kv-sub-gnb > ul >li >ul >li a {padding-left:20px; font-size:14px}

	.index-kv {height:140vw}
	.index-kv .index-cont-txt .valign .middle .kv-title img {width:80%; max-width:380px; margin:0 auto}
	.index-kv .index-cont-txt .valign .middle .kv-title > span {line-height:1.5}
	.index-kv .index-cont-txt .valign .middle .kv-title > span.title-big01 {font-size:4.5vw}
	.index-kv .index-cont-txt .valign .middle .kv-title > span.title-big02 {margin-top:15px; letter-spacing:-0.5px; line-height:1.2; font-size:10vw}
	.index-kv .index-cont-txt .valign .middle .kv-title {margin-top:40%}
	.index-kv .index-cont-txt.content-obj-1-txt .valign .middle .kv-title {margin-top:20%}
	.index-kv .index-cont-txt {top:40%}
	.index-kv .index-cont-txt .valign .middle .kv-title img {max-width:480px; width:82%}
	.index-kv .kv-title {width:100%; text-align:center}
	.index-kv .kv-title .title-sml {font-size:14px}

	/* section1 오늘의 명언 */
	body#main .section1 .content {padding-bottom:50px}
	.section1 {padding:50px 0 0 0}
	.section1 p {font-size:15px; line-height:24px; letter-spacing:-0.1px}
	.section1 .arrowb {width:80px; height:80px; transform:translate(-50%,30%)}

	/* section2 SGI소식 */
	body#main .section2 .content {padding-bottom:20px}
	.section2 {padding:13.88vw 4.16vw 12vw 4.16vw; overflow:hidden; max-width:inherit}
	.section2 .content > div {max-width:26.3vw}
	.section2 .content {overflow:hidden}
	.section2 .content div.bg .bg-imgg .pc_only {display:none}
	.section2 .content div.bg .bg-imgg .m_only {display:block}
	.section2 .content div.bg .bg-tit {height:220px}
	.section2 .content >div {max-width:100%; width:100%; text-align:center; color:#666; float:left; margin-right:3.33vw}
	.section2 .content >div:nth-child(3) {margin-right:0; margin-top:3.33vw}
	.section2 .content >div >div {height:260px; padding:30px 10px 0 10px; margin-bottom:3.33vw; background-color:#fff; width:48%; float:left}
	.section2 .content >div >div:first-child {margin-right:3.3vw}
	.section2 .content div strong {font-size:24px; margin-bottom:2.77vw}
	.section2 .content div p {font-size:14px; letter-spacing:-0.5px; line-height:20px}
	.section2 .content div a {display:block; width:21.11vw; height:6.11vw; line-height:6.11vw; font-size:2.77vw; border-radius:30px; border:solid 1px rgba(0, 0, 0, 0.2); margin:3vw auto 0; font-weight:900}
	.section2 .content div.bg {height:auto}
	.section2 .content div.bg .bg-tit {width:max-content}
	.section2 .content div.bg .bg-imgg img.m_only {width:100%}
	.section2 .content div.bg strong {color:#fff}
	.section2 .content div.bg a {border:solid 1px #fff; color:#fff}

	/* section3 영상 */
	body#main .section3 .content {padding-bottom:30px}
	.section3 .content {padding-top:7.63vw}
	.section3-video .ts-prev {width:45px; height:45px}
	.section3-video .ts-next {width:45px; height:45px}

	/* section4 뉴스 */
	body#main .section4 .content {padding-bottom:0}
	.section4 {padding:13.88vw 0 10px 0; max-width:inherit}
	.section4 ul li {width:calc((100% - 10px) / 2); max-width:400px; height:320px; margin-right:10px; margin-bottom:30px}
	/***** 2021.08.03 수정 *********/
	.section4 ul li {margin-left:0; }
	.section4 ul li:nth-child(2n) {margin-right:0}
	.section4 ul li p:first-child {margin-bottom:1.38vw; height:160px; background-size:110px auto}
	.section4 ul li p:first-child img {min-height:170px}
	.section4 ul li p:last-child strong {margin-bottom:1.38vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
	.section4 ul li p:last-child span {max-height:108px; overflow:hidden; font-size:13px; line-height:18px}

	/* section5 탭 */
	.section5 {padding-top:8.94vw}
	.section5 .page-sub-tab .tab li {font-weight:900; font-size:18px; letter-spacing:-1px; color:#ccc; float:left; margin:0 1.45vw 4.16vw}
	.section5 .devide2 ul {overflow:hidden}
	.section5 .devide2 ul li {width:50%; float:left}
	.section5 .devide2 ul li a img {width:100%; display:block}
	.section5 .devide4 ul li > div {margin-top:10%}
	.section5 .devide4 ul li div span {font-size:15px}
	.section5 .devide4 ul li div strong {font-size:28px}
	.section5 .devide4 ul li div p {padding:25px 0 0 0; margin-top:12px; font-size:13px; line-height:18px}
	.section5 .devide4 ul li div p::before {width:9px; height:9px}

	.sec5-txt-area {position:absolute; top:25%; left:50%; transform:translateX(-50%); text-align:center; color:#fff; width:77%}
	.sec5-txt-area p {font-family:'notoserif' !important; font-weight:300; font-size:3vw}
	.sec5-txt-area h3 {font-family:'notoserif' !important; font-weight:100; font-size:6.5vw}
	.sec5-txt-area span {display:block; width:12px; height:12px; background-color:#fff; border-radius:50%; margin:24px auto}
	.sec5-txt-area i {font-style:normal; font-weight:500; font-size:2.5vw; display:block; line-height:1.4em}

	/* section6 탭 */
	.section6 .content {width:92%; ; max-width:700px; overflow:hidden}
	.section6 .overview {margin-top:50px}
	.banner-area ul {height:auto; overflow:visible}
	.banner-area li:nth-child(1) {width:45%; height:560px}
	.banner-area li:nth-child(2) {width:calc(55% - 15px)}
	.banner-area li:nth-child(3) {width:calc(55% - 15px)}

	.content-obj {background:url('./../images/index/index-kv-newyear-m.png') no-repeat 50%; background-size:cover}

	.slide-banner {width:calc(100% + 20px); height:120px; margin:30px 0 40px -20px; padding:0}
	.slide-banner .slick-list {padding:0 100px 0 0 !important}
	.slide-banner .slick-slider {height:120px}
	.slide-banner .slick-slider .slick-slide {padding:0 0 0 20px; height:120px}
	.slide-banner .slick-slider .slick-slide a {height:120px; padding:15px 20px}
	.slide-banner .slick-slider .slick-slide a span {font-size:13px}
	.slide-banner .slick-slider .slick-slide a strong {margin-top:3px; font-size:16px}
	.slide-banner ul.slick-dots {width:100%; height:10px}
	.slide-banner ul.slick-dots li {width:10px; height:10px; margin:0 5px}
	.slide-banner ul.slick-dots li button {width:10px; height:10px}
}


@media screen and (max-width:540px) {
	.main-modalpop.pop-main {left:5% !important; width:90%; margin-left:0}

	main .main-kv {height:400px}
	main .main-kv .kv-title {padding-top:20px; font-size:32px}
	main .main-kv .kv-title .title-sml {margin-top:12px; font-size:15px; line-height:20px}
	main .main-kv .kv-sub-gnb > ul >li {font-size:13px}

	.section1 p {font-size:13px; line-height:20px; letter-spacing:-0.1px}
	.section2 .content div.bg .bg-tit {height:100%}

	.section4 {padding-bottom:32px}
	.section4 ul li {max-width:300px; height:280px; margin-bottom:15px; margin-left:0}
	.section4 ul li p:first-child {height:110px; background-size:100px auto}
	.section4 ul li p:first-child img {min-height:110px}

	.section6 .overview {margin-top:30px}
	.section6 .content {margin-bottom:-20px}
	.banner-area li:nth-child(1) {width:190px; height:275px; padding-top:20px; margin:0 10px 10px 0; text-align:center}
	.banner-area li:nth-child(1) img {width:95%; margin:0 auto}
	.banner-area li:nth-child(2) {width:calc(100% - 200px)}
	.banner-area li:nth-child(3) {width:calc(100% - 200px); margin-top:10px}
}

/* Mobile M :375px */
@media screen and (max-width:414px) {
	main .main-kv {height:340px}
	main .main-kv .kv-title {font-size:8.33vw}
	main .main-kv .kv-sub-gnb {height:50px}
	main .main-kv .kv-sub-gnb > ul >li {height:50px; line-height:50px; font-size:12px}
	main .main-kv .kv-title .title-sml {margin-top:9px}

	.section2 {padding:20px 2% 20px 2%}
	.section2 .content > div {margin-right:0}
	.section2 .content > div > div {height:180px; padding-top:22px}
	.section2 .content > div > div:nth-child(2) {float:right}
	.section2 .content > div > div.bg-tit {padding-top:30px}
	.section2 .content div p {font-size:13px; line-height:18px}
	.section2 .content div strong {font-size:20px}

	.banner-area li:nth-child(1) {width:170px; height:255px}
	.banner-area li:nth-child(2) {width:calc(100% - 180px)}
	.banner-area li:nth-child(3) {width:calc(100% - 180px)}

}

/* Mobile S :320px */
@media screen and (max-width:320px) {
	main .main-kv {height:280px}
	main .main-kv .kv-title .title-sml {font-size:12px}
}


/* 1018 추가 */
.banner-area-mobile { }
.banner-area-mobile ul {position:relative; display: inline-block; width:100%;}
.banner-area-mobile ul li:nth-child(1) { position: relative; margin-bottom:0;}
.banner-area-mobile ul li:nth-child(1) a { object-fit: cover; display:block !important;}
.banner-area-mobile ul li { position: absolute;    height: 100%;}
.banner-area-mobile ul li:nth-child(2) { position: absolute; right: 0; top: 0; height: 50%; padding-bottom: 15px;}
.banner-area-mobile ul li:nth-child(3) { position: absolute; right: 0; bottom: 0; height: 50%;}
.banner-area-mobile ul li a { object-fit: cover; display: inline;}
.banner-area-mobile ul li a img {display:block; width:100%; object-fit: cover; height: 100%; --aspect-ratio: 100%;}
.banner-area-web { clear:both; margin-top:15px;}
.banner-area-web img { width:100%;}


@media screen and (max-width:768px) {
	.banner-area-mobile ul li:nth-child(1) { height:460px}
}

@media screen and (max-width:510px) {
	.banner-area-mobile ul li:nth-child(1) { height:300px}
}